|  |  | 
 |  |  | import { Droppable } from '@hello-pangea/dnd'; | 
 |  |  | import { Box, Stack, Typography } from '@mui/material'; | 
 |  |  |  | 
 |  |  | import { | 
 |  |  |     useTranslate, | 
 |  |  |     useTheme, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { MissionCard } from './MissionCard'; | 
 |  |  |  | 
 |  |  | export const MissionColumn = ({ stage, missions, }) => { | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Box | 
 |  |  | 
 |  |  |                 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"> | 
 |  |  |                     1 | 
 |  |  |                     {/* {findDealLabel(dealStages, stage)} */} | 
 |  |  |                 <Typography variant="body1" sx={{ | 
 |  |  |                     // fontWeight: 'bold' | 
 |  |  |                 }}> | 
 |  |  |                     {translate(`page.mission.enums.posType.${stage}`)} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="subtitle1" | 
 |  |  |                     color="text.secondary" | 
 |  |  |                     fontSize="small" | 
 |  |  |                 > | 
 |  |  |                     2 | 
 |  |  |                     {missions.length} | 
 |  |  |                 </Typography> | 
 |  |  |             </Stack> | 
 |  |  |             <Droppable droppableId={stage}> |