|  |  | 
 |  |  |         }); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     console.log(mission); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Box | 
 |  |  |             sx={{ marginBottom: 1, cursor: 'pointer' }} | 
 |  |  | 
 |  |  |                                 Code: {mission.destCode} | 
 |  |  |                             </Typography> | 
 |  |  |                         </Stack> | 
 |  |  |  | 
 |  |  |                         <Stack direction="row" justifyContent="space-between" mb={1}> | 
 |  |  |                         <Divider orientation="horizontal" flexItem /> | 
 |  |  |                         <Stack direction="row" justifyContent="space-between" > | 
 |  |  |                             <Typography variant="overline"> | 
 |  |  |                                 Task: [{mission.taskNos.join(',')}] | 
 |  |  |                             </Typography> | 
 |  |  |                         </Stack> | 
 |  |  |  | 
 |  |  |                         <Stack pl={1} pr={1} direction="row" spacing={1} alignItems="center"> | 
 |  |  |                         <Stack pl={0.5} pr={0.5} direction="row" spacing={1} alignItems="center" mb={.6}> | 
 |  |  |                             <Slider | 
 |  |  |                                 aria-label="Temperature" | 
 |  |  |                                 aria-label="Progress" | 
 |  |  |                                 defaultValue={mission.progress} | 
 |  |  |                                 getAriaValueText={(value) => { | 
 |  |  |                                     return `${value}°C`; | 
 |  |  |                                     return `${value}%`; | 
 |  |  |                                 }} | 
 |  |  |                                 color="secondary" | 
 |  |  |                                 size="small" |