|  |  | 
 |  |  | import { Droppable } from '@hello-pangea/dnd'; | 
 |  |  | import { Box, Stack, Typography } from '@mui/material'; | 
 |  |  | import { | 
 |  |  |     useTranslate, | 
 |  |  |     useTheme, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { MissionCard } from './MissionCard'; | 
 |  |  |  | 
 |  |  | import { Deal } from '../types'; | 
 |  |  | import { DealCard } from './MissionCard'; | 
 |  |  | import { useConfigurationContext } from '../root/ConfigurationContext'; | 
 |  |  | import { findDealLabel } from './deal'; | 
 |  |  | export const MissionColumn = ({ stage, missions, }) => { | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  | export const MissionColumn = ({ stage, deals, }) => { | 
 |  |  |     const totalAmount = deals.reduce((sum, deal) => sum + deal.amount, 0); | 
 |  |  |  | 
 |  |  |     const { dealStages } = useConfigurationContext(); | 
 |  |  |     return ( | 
 |  |  |         <Box | 
 |  |  |             sx={{ | 
 |  |  |                 flex: 1, | 
 |  |  |                 paddingTop: '8px', | 
 |  |  |                 paddingBottom: '16px', | 
 |  |  |                 bgcolor: '#eaeaee', | 
 |  |  |                 bgcolor: theme[0] === 'dark' ? '#303030' : '#eaeaee', | 
 |  |  |                 '&:first-of-type': { | 
 |  |  |                     paddingLeft: '5px', | 
 |  |  |                     borderTopLeftRadius: 5, | 
 |  |  | 
 |  |  |             }} | 
 |  |  |         > | 
 |  |  |             <Stack alignItems="center"> | 
 |  |  |                 <Typography variant="subtitle1"> | 
 |  |  |                     {findDealLabel(dealStages, stage)} | 
 |  |  |                 <Typography variant="body1" sx={{ | 
 |  |  |                     // fontWeight: 'bold' | 
 |  |  |                 }}> | 
 |  |  |                     {translate(`page.mission.enums.posType.${stage}`)} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="subtitle1" | 
 |  |  |                     color="text.secondary" | 
 |  |  |                     fontSize="small" | 
 |  |  |                 > | 
 |  |  |                     {totalAmount.toLocaleString('en-US', { | 
 |  |  |                         notation: 'compact', | 
 |  |  |                         style: 'currency', | 
 |  |  |                         currency: 'USD', | 
 |  |  |                         currencyDisplay: 'narrowSymbol', | 
 |  |  |                         minimumSignificantDigits: 3, | 
 |  |  |                     })} | 
 |  |  |                     {missions.length} | 
 |  |  |                 </Typography> | 
 |  |  |             </Stack> | 
 |  |  |             <Droppable droppableId={stage}> | 
 |  |  | 
 |  |  |                             }, | 
 |  |  |                         }} | 
 |  |  |                     > | 
 |  |  |                         {deals.map((deal, index) => ( | 
 |  |  |                             <DealCard key={deal.id} deal={deal} index={index} /> | 
 |  |  |                         {missions.map((mission, idx) => ( | 
 |  |  |                             <MissionCard key={mission.id} mission={mission} index={idx} /> | 
 |  |  |                         ))} | 
 |  |  |                         {droppableProvided.placeholder} | 
 |  |  |                     </Box> |