claim reports slicing

frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx

@@ -0,0 +1,102 @@
+// @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>
+  );
+}