|  |  | 
 |  |  | import * as React from 'react'; | 
 |  |  | import { useState } from 'react'; | 
 |  |  | import { Paper, Typography, Box, AvatarGroup, Avatar } from '@mui/material'; | 
 |  |  | import ContactsIcon from '@mui/icons-material/AccountCircle'; | 
 |  |  | import DealIcon from '@mui/icons-material/MonetizationOn'; | 
 |  |  | import { | 
 |  |  |     useCreatePath, | 
 |  |  |     SelectField, | 
 |  |  |     useRecordContext, | 
 |  |  |     Link, | 
 |  |  |     useResourceContext, | 
 |  |  | 
 |  |  | } from 'react-admin'; | 
 |  |  | import PulseSignal from '../components/PulseSignal'; | 
 |  |  | import { AgvAvatar } from './AgvAvatar'; | 
 |  |  | import { red } from '@mui/material/colors'; | 
 |  |  | import { red, blue, blueGrey } from '@mui/material/colors'; | 
 |  |  |  | 
 |  |  | export const AgvCard = (props) => { | 
 |  |  |     const resource = useResourceContext(); | 
 |  |  | 
 |  |  |     const createPath = useCreatePath(); | 
 |  |  |     const record = useRecordContext(props); | 
 |  |  |     if (!record) return null; | 
 |  |  |     console.log(record); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Link | 
 |  |  |             to={createPath({ | 
 |  |  | 
 |  |  |                     flexDirection: 'column', | 
 |  |  |                     justifyContent: 'space-between', | 
 |  |  |                     padding: '1em', | 
 |  |  |                     ...(!record.online && { | 
 |  |  |                         animation: 'cardBorderPulse 2s infinite', | 
 |  |  |                         '@keyframes cardBorderPulse': { | 
 |  |  |                             '0%': { | 
 |  |  |                                 boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)', | 
 |  |  |                             }, | 
 |  |  |                             '50%': { | 
 |  |  |                                 boxShadow: '0 0 3px 2px rgba(255, 0, 0, 0.3)', | 
 |  |  |                             }, | 
 |  |  |                             '100%': { | 
 |  |  |                                 boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)', | 
 |  |  |                             }, | 
 |  |  |                         }, | 
 |  |  |                     }) | 
 |  |  |                 }} | 
 |  |  |                 elevation={elevation} | 
 |  |  |             > | 
 |  |  |                 <Box display="flex" flexDirection="row" alignItems="center" justifyContent='space-between'> | 
 |  |  |                     <PulseSignal | 
 |  |  |                         flag={true} | 
 |  |  |                         flag={record.online} | 
 |  |  |                     /> | 
 |  |  |                     <Typography variant="caption" > | 
 |  |  |                         vol: | 
 |  |  | 
 |  |  |                 <Box display="flex" flexDirection="column" alignItems="center"> | 
 |  |  |                     <AgvAvatar /> | 
 |  |  |                     <Box textAlign="center" marginTop={2}> | 
 |  |  |                         <Typography variant="subtitle2"> | 
 |  |  |                         <Typography | 
 |  |  |                             variant="subtitle2" | 
 |  |  |                             color="textSecondary" | 
 |  |  |                             component="div" | 
 |  |  |                             sx={{ fontWeight: 'bold' }} | 
 |  |  |                         > | 
 |  |  |                             {record.agvStatus} | 
 |  |  |                         </Typography> | 
 |  |  |                         <Typography variant="overline" sx={{ opacity: .7 }}> | 
 |  |  | 
 |  |  |                 }, | 
 |  |  |             }} | 
 |  |  |         > | 
 |  |  |             {data.map((record) => ( | 
 |  |  |                 <Avatar | 
 |  |  |                     key={record.id} | 
 |  |  |                     title={`${record.seqNum}`} | 
 |  |  |                 > | 
 |  |  |                     {record.seqNum} | 
 |  |  |             {data.length > 0 ? ( | 
 |  |  |                 data.map((record) => ( | 
 |  |  |                     <Avatar | 
 |  |  |                         key={record.id} | 
 |  |  |                         title={`${record.seqNum}`} | 
 |  |  |                         sx={{ bgcolor: blueGrey[500] }} | 
 |  |  |                     > | 
 |  |  |                         {record.seqNum.slice(0, 4)} | 
 |  |  |                     </Avatar> | 
 |  |  |                 )) | 
 |  |  |             ) : ( | 
 |  |  |                 <Avatar title="No tasks" > | 
 |  |  |                     N/A | 
 |  |  |                 </Avatar> | 
 |  |  |             ))} | 
 |  |  |             )} | 
 |  |  |         </AvatarGroup> | 
 |  |  |     ); | 
 |  |  | } |