| import * as React from 'react'; | 
| import { Box, Card, CardActions, Button, Typography, useTheme } from '@mui/material'; | 
| import { useNavigate } from 'react-router-dom'; | 
| import { useTranslate } from 'react-admin'; | 
| import AssignmentIcon from '@mui/icons-material/Assignment'; | 
| import AccountCircleIcon from '@mui/icons-material/AccountCircle'; | 
|   | 
| import publishArticleImage from './welcome_illustration.svg'; | 
|   | 
| const Welcome = () => { | 
|     const translate = useTranslate(); | 
|     const navigate = useNavigate(); | 
|     const theme = useTheme(); | 
|     const isLight = theme.palette.mode === 'light'; | 
|   | 
|     return ( | 
|         <Card | 
|             sx={{ | 
|                 background: theme => | 
|                     `linear-gradient(45deg,  | 
|                     ${isLight ? theme.palette.secondary.dark : theme.palette.primary.dark} 0%,  | 
|                     ${isLight ? theme.palette.secondary.light : theme.palette.primary.light} 50%,  | 
|                     ${theme.palette.primary.dark} 100%)`, | 
|                 color: theme => theme.palette.primary.contrastText, | 
|                 padding: '20px', | 
|                 // paddingBottom: '50px', | 
|                 marginTop: 2, | 
|                 marginBottom: '1em', | 
|                 width: '100%', | 
|                 overflow: 'visible' | 
|             }} | 
|         > | 
|             <Box display="flex"> | 
|                 <Box flex="1"> | 
|                     <Typography variant="h5" component="h2" gutterBottom> | 
|                         {translate('page.dashboard.welcome.title')} | 
|                     </Typography> | 
|                     <Box maxWidth="40em"> | 
|                         <Typography variant="body1" component="p" gutterBottom> | 
|                             {translate('page.dashboard.welcome.title')} | 
|                         </Typography> | 
|                     </Box> | 
|                     <CardActions | 
|                         sx={{ | 
|                             padding: { xs: 0, xl: null }, | 
|                             flexWrap: { xs: 'wrap', xl: null }, | 
|                             '& a': { | 
|                                 marginTop: { xs: '1em', xl: null }, | 
|                                 marginLeft: { xs: '0!important', xl: null }, | 
|                                 marginRight: { xs: '1em', xl: null }, | 
|                             }, | 
|                             marginTop: 3, | 
|                         }} | 
|                     > | 
|                         <Button | 
|                             variant="contained" | 
|                             startIcon={<AssignmentIcon />} | 
|                             onClick={() => { | 
|                                 navigate('/task') | 
|                             }} | 
|                         > | 
|                             {translate('menu.task')} | 
|                         </Button> | 
|                         <Button | 
|                             variant="contained" | 
|                             startIcon={<AccountCircleIcon />} | 
|                             onClick={() => { | 
|                                 navigate('/warehouseStock') | 
|                             }} | 
|                         > | 
|                             {translate('menu.warehouseStock')} | 
|                         </Button> | 
|                     </CardActions> | 
|                 </Box> | 
|                 <Box | 
|                     display={{ xs: 'none', sm: 'none', md: 'block' }} | 
|                     sx={{ | 
|                         background: `url(${publishArticleImage}) top right / cover`, | 
|                         marginLeft: 'auto', | 
|                     }} | 
|                     width="16em" | 
|                     height="9em" | 
|                     overflow="hidden" | 
|                 /> | 
|             </Box> | 
|         </Card> | 
|     ); | 
| }; | 
|   | 
| export default Welcome; |