update componen label

This commit is contained in:
2023-10-13 16:15:52 +07:00
parent a694bc03f3
commit c3b745e23b
8 changed files with 165 additions and 302 deletions

View File

@@ -0,0 +1,98 @@
// @mui
import { alpha, Theme, useTheme, styled } from '@mui/material/styles';
import { BoxProps } from '@mui/material';
// theme
import { ColorSchema } from '../theme/palette';
// ----------------------------------------------------------------------
type LabelColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
type LabelVariant = 'filled' | 'outlined' | 'ghost';
const RootStyle = styled('span')(
({
theme,
ownerState,
}: {
theme: Theme;
ownerState: {
color: LabelColor;
variant: LabelVariant;
};
}) => {
const isLight = theme.palette.mode === 'light';
const { color, variant } = ownerState;
const styleFilled = (color: ColorSchema) => ({
color: theme.palette[color].contrastText,
backgroundColor: theme.palette[color].main,
});
const styleOutlined = (color: ColorSchema) => ({
color: theme.palette[color].main,
backgroundColor: 'transparent',
border: `1px solid ${theme.palette[color].main}`,
});
const styleGhost = (color: ColorSchema) => ({
color: theme.palette[color][isLight ? 'dark' : 'light'],
backgroundColor: alpha(theme.palette[color].main, 0.16),
});
return {
height: 22,
minWidth: 22,
lineHeight: 0,
borderRadius: 6,
// cursor: 'default',
alignItems: 'center',
whiteSpace: 'nowrap',
display: 'inline-flex',
justifyContent: 'center',
padding: theme.spacing(0, 1),
color: theme.palette.grey[800],
fontSize: theme.typography.pxToRem(12),
fontFamily: theme.typography.fontFamily,
backgroundColor: theme.palette.grey[300],
fontWeight: theme.typography.fontWeightBold,
...(color !== 'default'
? {
...(variant === 'filled' && { ...styleFilled(color) }),
...(variant === 'outlined' && { ...styleOutlined(color) }),
...(variant === 'ghost' && { ...styleGhost(color) }),
}
: {
...(variant === 'outlined' && {
backgroundColor: 'transparent',
color: theme.palette.text.primary,
border: `1px solid ${theme.palette.grey[500_32]}`,
}),
...(variant === 'ghost' && {
color: isLight ? theme.palette.text.secondary : theme.palette.common.white,
backgroundColor: theme.palette.grey[500_16],
}),
}),
};
}
);
// ----------------------------------------------------------------------
interface Props extends BoxProps {
color?: LabelColor;
variant?: LabelVariant;
}
export default function Label({ color = 'default', variant = 'ghost', children, sx }: Props) {
const theme = useTheme();
return (
<RootStyle ownerState={{ color, variant }} sx={sx} theme={theme}>
{children}
</RootStyle>
);
}

View File

@@ -40,6 +40,7 @@ import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import DetailDataMember from './ListMember'; import DetailDataMember from './ListMember';
import Label from '../../components/Label';
/* ---------------------------------- types --------------------------------- */ /* ---------------------------------- types --------------------------------- */
@@ -398,28 +399,10 @@ export default function List() {
// >{obj.memberId}</Button> // >{obj.memberId}</Button>
// , // ,
start_date: start_date:
<Typography <Label>{ fDateSuffix(obj.start_date) }</Label>
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.start_date) }
</Typography>
, ,
end_date: end_date:
<Typography <Label> { fDateSuffix(obj.end_date) }</Label>
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.end_date) }
</Typography>
, ,
// status: // status:
// obj.status === 1 ? ( // obj.status === 1 ? (

View File

@@ -40,6 +40,7 @@ import { useSearchParams, useNavigate, Link, useParams } from 'react-router-dom'
import { fDateSuffix, fPostFormat } from '../../utils/formatTime'; import { fDateSuffix, fPostFormat } from '../../utils/formatTime';
import TableMoreMenu from '../../components/table/TableMoreMenu'; import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import Label from '../../components/Label';
/* ---------------------------------- types --------------------------------- */ /* ---------------------------------- types --------------------------------- */
@@ -400,55 +401,20 @@ export default function List() {
return { return {
...obj, ...obj,
admission_date: admission_date:
<Typography <Label>{ fDateSuffix(obj.admission_date) }</Label>
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
marginTop: 2,
}} variant='overline'
>{ fDateSuffix(obj.admission_date) }
</Typography>
, ,
discharge_date: discharge_date:
<Typography <Label>{ fDateSuffix(obj.discharge_date) }</Label>
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.discharge_date) }
</Typography>
, ,
status: status:
obj.status === 'Done' ? ( obj.status === 'Done' ? (
<Typography <Label color='success'>
sx={{
background: 'rgba(84, 214, 44, 0.16)',
color: '#229A16',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>
Done Done
</Typography> </Label>
) : ( ) : (
<Typography <Label color='warning'>
sx={{
background: 'rgba(255, 193, 7, 0.16)',
color: '#BF6919',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>
Ongoing Ongoing
</Typography> </Label>
), ),
action: action:
<TableMoreMenu actions={ <TableMoreMenu actions={

View File

@@ -35,6 +35,7 @@ import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineSepa
import Select from '../../theme/overrides/Select'; import Select from '../../theme/overrides/Select';
import TableMoreMenu from '../../components/table/TableMoreMenu'; import TableMoreMenu from '../../components/table/TableMoreMenu';
import { MenuItem } from '@mui/material'; import { MenuItem } from '@mui/material';
import Label from '../../components/Label';
// sections // sections
// import ListTable from '../../sections/claimreports/ListTable'; // import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard'; // import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
@@ -291,38 +292,18 @@ export default function ServiceMonitoring() {
<Grid item xs={12} lg={12} md={12}> <Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}> <Stack spacing={1}>
<Typography variant="inherit">Main Diagnosis</Typography> <Typography variant="inherit">Main Diagnosis</Typography>
<Stack direction={'row'}> <Stack direction={'row'} gap={1}>
<Typography variant="h6">{data?.main_diagnose}</Typography> <Typography variant="h6">{data?.main_diagnose}</Typography>
<Typography <Label>{data?.main_diagnose_code}</Label>
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginLeft: 1,
paddingX: 1,
paddingY: 1,
marginRight: 'auto',
}} variant='overline'
>{data?.main_diagnose_code}</Typography>
</Stack> </Stack>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} lg={12} md={12}> <Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}> <Stack spacing={1}>
<Typography variant="inherit">Comparative Diagnosis</Typography> <Typography variant="inherit">Comparative Diagnosis</Typography>
<Stack direction={'row'}> <Stack direction={'row'} gap={1}>
<Typography variant="h6">{data?.comparative_diagnosis}</Typography> <Typography variant="h6">{data?.comparative_diagnosis}</Typography>
<Typography <Label>{data?.comparative_diagnosis_code}</Label>
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginLeft: 1,
paddingX: 1,
paddingY: 1,
marginRight: 'auto',
}} variant='overline'
>{data?.comparative_diagnosis_code}</Typography>
</Stack> </Stack>
</Stack> </Stack>
</Grid> </Grid>
@@ -411,27 +392,9 @@ export default function ServiceMonitoring() {
<TimelineContent> <TimelineContent>
<Typography variant='h5' sx={{marginBottom: 2}}> { fDateSuffix(row.date)}</Typography> <Typography variant='h5' sx={{marginBottom: 2}}> { fDateSuffix(row.date)}</Typography>
<Card sx={{paddinX:2, paddingY:2}} > <Card sx={{paddinX:2, paddingY:2}} >
<Stack direction={'row'} sx={{ alignItems: 'center' }}> <Stack direction={'row'} sx={{ alignItems: 'center', padding: 2, justifyContent: 'space-between' }}>
<Typography <Label> {row.time} </Label>
sx={{ <Label color='success' sx={{marginRight: 0}}> {row.status} </Label>
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginLeft: 2,
paddingX: 2,
paddingY: 1,
marginRight: 'auto',
}} variant='overline'> {row.time} </Typography>
<Typography
sx={{
background: 'rgba(84, 214, 44, 0.16)',
color: '#229A16',
borderRadius: 1,
marginRight: 2,
paddingX: 2,
paddingY: 1,
}} variant='overline'> {row.status} </Typography>
</Stack> </Stack>
<hr style={{margin:10, marginLeft:15, marginRight:15, color: 'rgba(145, 158, 171, 0.32)' }}/> <hr style={{margin:10, marginLeft:15, marginRight:15, color: 'rgba(145, 158, 171, 0.32)' }}/>
<Stack spacing={3} sx={{ paddingY: 1, paddingX: 3 }}> <Stack spacing={3} sx={{ paddingY: 1, paddingX: 3 }}>
@@ -537,23 +500,13 @@ export default function ServiceMonitoring() {
<Grid container> <Grid container>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
{data?.laboratorium_result.length > 0 ? data?.laboratorium_result.map((row, index) => ( {data?.laboratorium_result.length > 0 ? data?.laboratorium_result.map((row, index) => (
<Card sx={{paddinX:2, paddingY:2, paddingX:1, marginTop:2 }} key={index} > <Card sx={{paddinX:2, paddingY:2, paddingX:1, marginTop:2 }} key={index} >
<Stack paddingX={5}> <Stack paddingX={5}>
<Typography variant='subtitle1'>{fDateSuffix(row[index].datetime)}</Typography> <Typography variant='subtitle1'>{fDateSuffix(row[index].datetime)}</Typography>
{row.length > 0 ? row.map((list, i) => ( {row.length > 0 ? row.map((list, i) => (
<Card key={i} sx={{marginTop:2, paddingX:2, paddingY:2}}> <Card key={i} sx={{marginTop:2, paddingX:2, paddingY:2}}>
<Typography <Label> {list.reimbursement_code}
sx={{ </Label>
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginBottom: 2,
paddingX: 2,
paddingY: 1,
}} variant='overline'> {list.reimbursement_code}
</Typography>
<Table sx={{marginY:2}}> <Table sx={{marginY:2}}>
<TableHead> <TableHead>
<TableRow> <TableRow>
@@ -566,16 +519,7 @@ export default function ServiceMonitoring() {
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell> <TableCell>
<Typography <Label> {fDateTime(list.datetime)}</Label>
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginBottom: 2,
paddingX: 2,
paddingY: 1,
}} variant='overline'> {fDateTime(list.datetime)}
</Typography>
</TableCell> </TableCell>
<TableCell>{list.examination}</TableCell> <TableCell>{list.examination}</TableCell>
<TableCell>{list.location}</TableCell> <TableCell>{list.location}</TableCell>

View File

@@ -14,13 +14,14 @@ import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate'; import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table'; import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams, useNavigate } from 'react-router-dom'; import { useSearchParams, useNavigate } from 'react-router-dom';
import { fDate } from '../../utils/formatTime'; import { fDate, fDateSuffix } from '../../utils/formatTime';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { format } from 'date-fns'; import { format } from 'date-fns';
import TableMoreMenu from '../../components/table/TableMoreMenu'; import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import HistoryIcon from '@mui/icons-material/History'; import HistoryIcon from '@mui/icons-material/History';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import Label from '../../components/Label';
export default function List() { export default function List() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -179,85 +180,25 @@ export default function List() {
...obj, ...obj,
status: status:
obj.status === 'requested' ? ( obj.status === 'requested' ? (
<Typography <Label color='primary'>
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#159C9C',
backgroundColor: '#00AB5529',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Request Request
</Typography> </Label>
) : obj.status === 'approved' ? ( ) : obj.status === 'approved' ? (
<Typography <Label color='success' >
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#229A16',
backgroundColor: '#54D62C29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Approval Approval
</Typography> </Label>
) : obj.status === 'declined' ? ( ) : obj.status === 'declined' ? (
<Typography <Label color='error'>
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#B72136',
backgroundColor: '#FF484229',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Decline Decline
</Typography> </Label>
) : obj.status === 'pending' ? ( ) : obj.status === 'pending' ? (
<Typography <Label color='primary'>
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#BF6919',
backgroundColor: '#FFC10729',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Pending Pending
</Typography> </Label>
) : obj.status === 'reviewed' ? ( ) : obj.status === 'reviewed' ? (
<Typography <Label color='info'>
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#0C53B7',
backgroundColor: '#1890FF29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Review Review
</Typography> </Label>
) : ( ) : (
<Button <Button
startIcon={<Iconify icon="fa6-solid:clock" />} startIcon={<Iconify icon="fa6-solid:clock" />}
@@ -276,16 +217,9 @@ export default function List() {
</Button> </Button>
), ),
submission_date: submission_date:
<Typography <Label>
sx={{ {obj.submission_date ? fDateSuffix(obj.submission_date) : ''}
backgroundColor: (theme) => theme.palette.grey[300], </Label>
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{obj.submission_date ? format(new Date(obj.submission_date), "d MMM yyyy") : ''}
</Typography>
, ,
action: action:
<TableMoreMenu actions={ <TableMoreMenu actions={

View File

@@ -512,7 +512,7 @@ const Buttons = ({ handle, row, type }: ButtonIProp) => {
> >
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" /> <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
<Typography variant="body1" fontWeight="bold"> <Typography variant="body1" fontWeight="bold">
Add Invoice Add {type}
</Typography> </Typography>
</Box> </Box>
<input <input

View File

@@ -33,12 +33,13 @@ import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate'; import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table'; import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams, useNavigate, Link } from 'react-router-dom'; import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import { fDate } from '../../utils/formatTime'; import { fDate, fDateSuffix } from '../../utils/formatTime';
import { format } from 'date-fns'; import { format } from 'date-fns';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import TableMoreMenu from '../../components/table/TableMoreMenu'; import TableMoreMenu from '../../components/table/TableMoreMenu';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import Label from '../../components/Label';
/* ---------------------------------- types --------------------------------- */ /* ---------------------------------- types --------------------------------- */
@@ -301,61 +302,23 @@ export default function List() {
// , // ,
status: status:
obj.status === 1 ? ( obj.status === 1 ? (
<Typography <Label color='success'>
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#229A16',
backgroundColor: '#54D62C29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Active Active
</Typography> </Label>
) : ( ) : (
<Typography <Label color='error'>
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#B72136',
backgroundColor: '#FF484229',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Inactive Inactive
</Typography> </Label>
), ),
start_date: start_date:
<Typography <Label>
sx={{ {obj.start_date ? fDateSuffix(obj.start_date) : ''}
backgroundColor: (theme) => theme.palette.grey[300], </Label>
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{obj.start_date ? format(new Date(obj.start_date), "dd MMM yyyy") : ''}
</Typography>
, ,
end_date: end_date:
<Typography <Label>
sx={{ {obj.end_date ? fDateSuffix(obj.end_date) : ''}
backgroundColor: (theme) => theme.palette.grey[300], </Label>
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{obj.end_date ? format(new Date(obj.end_date), "d MMM yyyy") : ''}
</Typography>
, ,
fullName: fullName:
<Typography <Typography

View File

@@ -116,23 +116,6 @@ export default function DialogClaimSubmitMember({
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* ------------------------------ Icon On Click ----------------------------- */ /* ------------------------------ Icon On Click ----------------------------- */
const clickHandler = ({ id, fullName, memberId, limit, avatar }: DataContentType) => {
setDataMemberClaim({
id: id,
fullName: fullName,
memberId: memberId,
limit: {
current: limit.current,
total: limit.total,
percentage: limit.percentage,
},
avatar: {
url: avatar && avatar.url,
title: avatar && avatar.title,
},
});
};
const handleCheck = (data: DataContentType, isChecked: boolean) => { const handleCheck = (data: DataContentType, isChecked: boolean) => {
if (isChecked) { if (isChecked) {
dispatch(claimSubmitAction.patch([...selectedData, data])); dispatch(claimSubmitAction.patch([...selectedData, data]));
@@ -164,20 +147,12 @@ export default function DialogClaimSubmitMember({
<Stack marginTop={2} spacing={1}> <Stack marginTop={2} spacing={1}>
{data.map((row: DataContentType, key) => ( {data.map((row: DataContentType, key) => (
<Card <Card
key={key} key={key}
sx={{ paddingY: 1, paddingX: 2 }} sx={{bgcolor: (theme) => {
// onClick={() => return selectedData.some((item) => item.memberId === row.memberId) ? theme.palette.primary.lighter : theme.palette.background.default
// clickHandler({ }
// id: row.id, }}
// fullName: row.fullName,
// memberId: row.memberId,
// limit: {
// current: row.limit.current,
// total: row.limit.total,
// percentage: row.limit.percentage,
// },
// })
// }
> >
<Stack direction="row" alignItems="center"> <Stack direction="row" alignItems="center">
<Grid item xs={1} lg={1} xl={1}> <Grid item xs={1} lg={1} xl={1}>
@@ -207,20 +182,20 @@ export default function DialogClaimSubmitMember({
style={{ borderRadius: '50%' }} style={{ borderRadius: '50%' }}
/> />
</div> </div>
<Grid item xs={7} lg={7} xl={7}> <Grid item xs={11} lg={11} xl={11}>
<Typography variant="subtitle1">{row.fullName}</Typography> <Typography variant="subtitle1">{row.fullName}</Typography>
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}> <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
{row.memberId} {row.memberId}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={3} lg={3} xl={3}> {/* <Grid item xs={3} lg={3} xl={3}> */}
<BorderLinearProgress {/* <BorderLinearProgress
variant="determinate" variant="determinate"
value={row.limit && row.limit.percentage} value={row.limit && row.limit.percentage}
// color='success' // color='success'
sx={{ mb: 1 }} sx={{ mb: 1 }}
/> /> */}
<Stack direction={'row'}> {/* <Stack direction={'row'}>
<Grid item xs={3}> <Grid item xs={3}>
<Typography variant="overline" sx={{ textAlign: 'left' }}> <Typography variant="overline" sx={{ textAlign: 'left' }}>
LIMIT LIMIT
@@ -236,18 +211,18 @@ export default function DialogClaimSubmitMember({
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
</Stack> </Stack> */}
</Grid> {/* </Grid> */}
<Grid <Grid
item item
xs={2} xs={1}
lg={2} lg={1}
xl={2} xl={1}
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} style={{ display: 'flex', justifyContent: 'right', alignItems: 'right' }}
> >
<IconButton> {/* <IconButton>
<Iconify icon="ic:history" /> <Iconify icon="ic:history" />
</IconButton> </IconButton> */}
<IconButton <IconButton
disabled={selectedData.length > 0} disabled={selectedData.length > 0}
sx={{ marginLeft: '10px' }} sx={{ marginLeft: '10px' }}