|  |  |  | 
|---|
|  |  |  | import * as React from 'react'; | 
|---|
|  |  |  | import { FC, createElement } from 'react'; | 
|---|
|  |  |  | import { Card, Box, Typography, Divider } from '@mui/material'; | 
|---|
|  |  |  | import { Card, Box, Typography, Divider, Stack } from '@mui/material'; | 
|---|
|  |  |  | import { useTranslate } from 'react-admin'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | import { Link } from 'react-router-dom'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const CardWithIcon = ({ icon, title, subtitle, to, children }) => ( | 
|---|
|  |  |  | <Card | 
|---|
|  |  |  | sx={{ | 
|---|
|  |  |  | minHeight: 52, | 
|---|
|  |  |  | display: 'flex', | 
|---|
|  |  |  | flexDirection: 'column', | 
|---|
|  |  |  | flex: '1', | 
|---|
|  |  |  | '& a': { | 
|---|
|  |  |  | textDecoration: 'none', | 
|---|
|  |  |  | color: 'inherit', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <Box | 
|---|
|  |  |  | const CardWithIcon = ({ icon, title, subtitle, to, children, statistic, type }) => { | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Card | 
|---|
|  |  |  | sx={{ | 
|---|
|  |  |  | position: 'relative', | 
|---|
|  |  |  | overflow: 'hidden', | 
|---|
|  |  |  | padding: '16px', | 
|---|
|  |  |  | display: 'flex', | 
|---|
|  |  |  | justifyContent: 'space-between', | 
|---|
|  |  |  | alignItems: 'center', | 
|---|
|  |  |  | '& .icon': { | 
|---|
|  |  |  | color: 'primary.main', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '&:before': { | 
|---|
|  |  |  | position: 'absolute', | 
|---|
|  |  |  | top: '50%', | 
|---|
|  |  |  | left: 0, | 
|---|
|  |  |  | display: 'block', | 
|---|
|  |  |  | content: `''`, | 
|---|
|  |  |  | height: '200%', | 
|---|
|  |  |  | aspectRatio: '1', | 
|---|
|  |  |  | transform: 'translate(-30%, -60%)', | 
|---|
|  |  |  | borderRadius: '50%', | 
|---|
|  |  |  | backgroundColor: 'primary.main', | 
|---|
|  |  |  | opacity: 0.15, | 
|---|
|  |  |  | width: '100%', | 
|---|
|  |  |  | maxHeight: 1025, | 
|---|
|  |  |  | minHeight: 52, | 
|---|
|  |  |  | flexDirection: 'column', | 
|---|
|  |  |  | flex: '1', | 
|---|
|  |  |  | '& a': { | 
|---|
|  |  |  | textDecoration: 'none', | 
|---|
|  |  |  | color: 'inherit', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <Box width="3em" className="icon"> | 
|---|
|  |  |  | {createElement(icon, { fontSize: 'large' })} | 
|---|
|  |  |  | <Box | 
|---|
|  |  |  | sx={{ | 
|---|
|  |  |  | position: 'relative', | 
|---|
|  |  |  | overflow: 'hidden', | 
|---|
|  |  |  | padding: '16px', | 
|---|
|  |  |  | display: 'flex', | 
|---|
|  |  |  | justifyContent: 'space-between', | 
|---|
|  |  |  | alignItems: 'center', | 
|---|
|  |  |  | '& .icon': { | 
|---|
|  |  |  | color: 'primary.main', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '&:before': { | 
|---|
|  |  |  | position: 'absolute', | 
|---|
|  |  |  | top: '50%', | 
|---|
|  |  |  | left: 0, | 
|---|
|  |  |  | display: 'block', | 
|---|
|  |  |  | content: `''`, | 
|---|
|  |  |  | height: '200%', | 
|---|
|  |  |  | aspectRatio: '1', | 
|---|
|  |  |  | transform: 'translate(-30%, -60%)', | 
|---|
|  |  |  | borderRadius: '50%', | 
|---|
|  |  |  | backgroundColor: 'primary.main', | 
|---|
|  |  |  | opacity: 0.15, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <Box width="3em" className="icon"> | 
|---|
|  |  |  | {createElement(icon, { fontSize: 'large' })} | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | <Box textAlign="right"> | 
|---|
|  |  |  | <Typography variant="h5" component="h2"> | 
|---|
|  |  |  | {subtitle || ' '} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | {type ? <Box sx={{ display: "flex" }}> | 
|---|
|  |  |  | <Box sx={{ display: 'flex', padding: '1em' }}> | 
|---|
|  |  |  | <Typography color="textSecondary">{translate("page.dashboard.header.planQty")}:</Typography> | 
|---|
|  |  |  | <Typography color="textSecondary">{statistic?.inAnf}</Typography> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | {!children && <Box sx={{ display: "flex" }}> | 
|---|
|  |  |  | <Box sx={{ display: 'flex', padding: '1em' }}> | 
|---|
|  |  |  | <Typography color="textSecondary">{translate("page.dashboard.header.realQty")}:</Typography> | 
|---|
|  |  |  | <Typography color="textSecondary">{statistic?.taskIn}</Typography> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | <Box sx={{ display: 'flex', padding: '1em' }}> | 
|---|
|  |  |  | <Typography color="textSecondary">{type == 'in' ? translate("page.dashboard.header.waitQty") : translate("page.dashboard.header.waitOutQty")}:</Typography> | 
|---|
|  |  |  | <Typography color="textSecondary">{type == 'in' ? statistic?.taskIn : statistic?.taskOut}</Typography> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </Box>} | 
|---|
|  |  |  | </Box> : <Box> | 
|---|
|  |  |  | <Typography  sx={{ display: 'flex', padding: '1em' }}> | 
|---|
|  |  |  | { title } | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Box>} | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | <Box textAlign="right"> | 
|---|
|  |  |  | <Typography color="textSecondary">{title}</Typography> | 
|---|
|  |  |  | <Typography variant="h5" component="h2"> | 
|---|
|  |  |  | {subtitle || ' '} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | {children && <Divider />} | 
|---|
|  |  |  | {children} | 
|---|
|  |  |  | </Card> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | {children && <Divider />} | 
|---|
|  |  |  | {children} | 
|---|
|  |  |  | </Card> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default CardWithIcon; | 
|---|