Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 5x 5x 5x 43x 43x 43x 43x 43x 43x 147x 1x | /**
* PartnerOverviewTab Component
*
* Displays partnership details, engagement metrics, and recent activity
* Story 2.8.2: Partner Detail View - AC4
*/
import React from 'react';
import { Box, Card, CardContent, Typography, Button, Divider, Stack } from '@mui/material';
import { CheckCircle } from '@mui/icons-material';
import { useTranslation } from 'react-i18next';
import { usePartnerDetailStore } from '@/stores/partnerDetailStore';
import type { PartnerResponse } from '@/services/api/partnerApi';
interface PartnerOverviewTabProps {
partner: PartnerResponse;
}
// Partnership tier emojis
const TIER_EMOJIS: Record<string, string> = {
STRATEGIC: '🏆',
PLATINUM: '💎',
GOLD: '🥇',
SILVER: '🥈',
BRONZE: '🥉',
};
// Tier benefits as translation key arrays
const TIER_BENEFIT_KEYS: Record<string, string[]> = {
STRATEGIC: [
'logoPlacement',
'newsletterMentions',
'priorityAccess',
'quarterlyMeetings',
'roiAnalytics',
'accountManager',
],
PLATINUM: ['logoPlacement', 'newsletterMentions', 'priorityAccess', 'quarterlyMeetings'],
GOLD: ['logoPlacement', 'newsletterMentions', 'priorityAccess'],
SILVER: ['newsletterMentions', 'eventAccess'],
BRONZE: ['eventAccess'],
};
export const PartnerOverviewTab: React.FC<PartnerOverviewTabProps> = ({ partner }) => {
const { t, i18n } = useTranslation('partners');
const { setShowEditModal } = usePartnerDetailStore();
const tierEmoji = TIER_EMOJIS[partner.partnershipLevel] || '';
const benefitKeys = TIER_BENEFIT_KEYS[partner.partnershipLevel] || [];
const formattedStartDate = new Date(partner.partnershipStartDate).toLocaleDateString(
i18n.language,
{ year: 'numeric', month: 'short', day: 'numeric' }
);
return (
<Box>
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
{t('detail.overviewTab.title')}
</Typography>
<Divider sx={{ mb: 2 }} />
<Stack spacing={2}>
<Box>
<Typography variant="body2" color="text.secondary">
{t('detail.overviewTab.tier')}
</Typography>
<Typography variant="h6">
{tierEmoji} {t(`tiers.${partner.partnershipLevel.toLowerCase()}`)}
</Typography>
</Box>
<Box>
<Typography variant="body2" color="text.secondary">
{t('detail.overviewTab.startDate')}
</Typography>
<Typography variant="body1">{formattedStartDate}</Typography>
</Box>
<Box>
<Typography variant="body2" color="text.secondary" gutterBottom>
{t('detail.overviewTab.benefits')}
</Typography>
<Stack spacing={1}>
{benefitKeys.map((key) => (
<Box key={key} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CheckCircle color="success" fontSize="small" />
<Typography variant="body2">
{t(`detail.overviewTab.tierBenefits.${key}`)}
</Typography>
</Box>
))}
</Stack>
</Box>
<Button variant="outlined" onClick={() => setShowEditModal(true)} fullWidth>
{t('detail.overviewTab.changeTier')}
</Button>
</Stack>
</CardContent>
</Card>
</Box>
);
};
|