|  |  | 
 |  |  | import { Draggable } from '@hello-pangea/dnd'; | 
 |  |  | import { Box, Card, Typography, Avatar, Divider, Stack, Slider } from '@mui/material'; | 
 |  |  | import { ReferenceField, useRedirect } from 'react-admin'; | 
 |  |  | import { Box, Card, Typography, Avatar, Divider, Stack, Slider, useTheme } from '@mui/material'; | 
 |  |  | import { ReferenceField, useRedirect, useTranslate } from 'react-admin'; | 
 |  |  | import { blueGrey } from '@mui/material/colors'; | 
 |  |  | import { styled } from '@mui/material/styles'; | 
 |  |  |  | 
 |  |  | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | export const MissionCardContent = ({ provided, snapshot, mission, }) => { | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const redirect = useRedirect(); | 
 |  |  |     const handleClick = () => { | 
 |  |  |         redirect(`/mission/${mission.id}/show`, undefined, undefined, undefined, { | 
 |  |  | 
 |  |  |                             sx={{ | 
 |  |  |                                 width: 30, | 
 |  |  |                                 height: 30, | 
 |  |  |                                 bgcolor: blueGrey[500], | 
 |  |  |                                 bgcolor: theme.palette.primary.main, | 
 |  |  |                             }} | 
 |  |  |                         > | 
 |  |  |                             {mission.agv} | 
 |  |  | 
 |  |  |                     <Box> | 
 |  |  |                         <Stack direction="row" justifyContent="space-between" mb={1}> | 
 |  |  |                             <Typography variant="caption" color="textSecondary"> | 
 |  |  |                                 Backpack: {mission.backpack} | 
 |  |  |                                 {translate('table.field.mission.backpack')} : {mission.backpack} | 
 |  |  |                             </Typography> | 
 |  |  |                             <Typography variant="caption" color="textPrimary"> | 
 |  |  |                                 Code: {mission.destCode} | 
 |  |  |                                 {translate('table.field.mission.code')}: {mission.currCode} | 
 |  |  |                             </Typography> | 
 |  |  |                         </Stack> | 
 |  |  |                         <Divider orientation="horizontal" flexItem /> | 
 |  |  |                         <Stack direction="row" justifyContent="space-between" > | 
 |  |  |                             <Typography variant="overline"> | 
 |  |  |                                 Task: [{mission.taskNos.join(',')}] | 
 |  |  |                                 {translate('table.field.mission.task')}: [{mission.taskNos.join(',')}] | 
 |  |  |                             </Typography> | 
 |  |  |                         </Stack> | 
 |  |  |                         <Stack pl={0.5} pr={0.5} direction="row" spacing={1} alignItems="center" mb={.6}> |