|  |  | 
 |  |  | import AgvInsight from './agv'; | 
 |  |  |  | 
 |  |  | const Insight = (props) => { | 
 |  |  |     const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title } = props; | 
 |  |  |     const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH } = props; | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const themeMode = theme.palette.mode; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const [title, setTitle] = useState(null); | 
 |  |  |  | 
 |  |  |     const deviceType = sprite?.data?.type; | 
 |  |  |  | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |     }, []) | 
 |  |  |     }, [sprite]) | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  | 
 |  |  |                 {open && ( | 
 |  |  |                     <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 100px);'} mt={{ xs: 2, sm: 1 }} sx={{ | 
 |  |  |                     }}> | 
 |  |  |                         <Stack direction="row" p={2}> | 
 |  |  |                         <Stack direction="row" p={2} pt={3}> | 
 |  |  |                             <Typography variant="h6" flex="1"> | 
 |  |  |                                 {title || translate('page.map.insight.title')} | 
 |  |  |                                 {title || ''} | 
 |  |  |                             </Typography> | 
 |  |  |                             <IconButton onClick={handleClose} size="small"> | 
 |  |  |                                 <CloseIcon /> | 
 |  |  |                             </IconButton> | 
 |  |  |                         </Stack> | 
 |  |  |                         <Box p={2} pt={1} height='100%'> | 
 |  |  |                         <Box p={2} pt={0} height='100%'> | 
 |  |  |                             <Card sx={{ | 
 |  |  |                                 height: '100%', | 
 |  |  |                                 transition: '0.3s', | 
 |  |  | 
 |  |  |                                         <> | 
 |  |  |                                             <ShelfInsight | 
 |  |  |                                                 sprite={sprite} | 
 |  |  |                                                 setTitle={setTitle} | 
 |  |  |                                             /> | 
 |  |  |                                         </> | 
 |  |  |                                     )} | 
 |  |  | 
 |  |  |                                     {deviceType === DEVICE_TYPE.AGV && ( | 
 |  |  |                                         <> | 
 |  |  |                                             <AgvInsight | 
 |  |  |  | 
 |  |  |                                                 sprite={sprite} | 
 |  |  |                                                 setTitle={setTitle} | 
 |  |  |                                             /> | 
 |  |  |                                         </> | 
 |  |  |                                     )} |