103 lines
3.2 KiB
TypeScript
Executable File
103 lines
3.2 KiB
TypeScript
Executable File
// @mui
|
|
import { Grid, Card, Typography, Stack } from '@mui/material';
|
|
import { styled } from '@mui/material/styles';
|
|
// theme
|
|
import palette from '../../theme/palette';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
interface ClaimStatusType {
|
|
name: string;
|
|
value: number;
|
|
color: string;
|
|
}
|
|
|
|
interface PropsCardClaimStatus {
|
|
data?: ClaimStatusType[];
|
|
}
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const RootStyle = styled(Card)(({ theme }) => ({
|
|
boxShadow: 'none',
|
|
padding: theme.spacing(2),
|
|
color: 'black',
|
|
backgroundColor: theme.palette.grey[200],
|
|
}));
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const defaultData = [
|
|
{ name: 'Requested', value: 0, color: palette.dark.primary.dark },
|
|
{ name: 'Approval', value: 0, color: palette.dark.warning.dark },
|
|
{ name: 'Disbrusment', value: 0, color: palette.dark.success.dark },
|
|
{ name: 'Rejected', value: 0, color: palette.dark.error.dark },
|
|
];
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
|
|
return (
|
|
<RootStyle>
|
|
<Stack sx={{ mb: 1 }}>
|
|
<Typography variant="body2">Claim Status</Typography>
|
|
</Stack>
|
|
<Grid container spacing={2}>
|
|
{data
|
|
? data.map(({ name, value, color }: ClaimStatusType, key) => (
|
|
<Grid item key={key} xs={6} sm={3}>
|
|
<Card
|
|
sx={{
|
|
paddingX: 1,
|
|
borderRadius: 0.75,
|
|
borderColor: color,
|
|
borderStyle: 'solid',
|
|
borderWidth: '1px',
|
|
padding: 2,
|
|
flex: 1,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<Typography component="p" variant="body2">
|
|
{name}
|
|
</Typography>
|
|
<Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
|
|
{value}
|
|
</Typography>
|
|
<Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
|
|
Cases
|
|
</Typography>
|
|
</Card>
|
|
</Grid>
|
|
))
|
|
: defaultData.map(({ name, value, color }: ClaimStatusType, key) => (
|
|
<Grid item key={key} xs={6} sm={3}>
|
|
<Card
|
|
sx={{
|
|
paddingX: 1,
|
|
borderRadius: 0.75,
|
|
borderColor: color,
|
|
borderStyle: 'solid',
|
|
borderWidth: '1px',
|
|
padding: 2,
|
|
flex: 1,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<Typography component="p" variant="body2">
|
|
{name}
|
|
</Typography>
|
|
<Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
|
|
{value}
|
|
</Typography>
|
|
<Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
|
|
Cases
|
|
</Typography>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</RootStyle>
|
|
);
|
|
}
|