|  |  |  | 
|---|
|  |  |  | 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}> | 
|---|