claim reports slicing

frontend/client-portal/src/pages/ClaimReport/Index.tsx

@@ -0,0 +1,46 @@
+// @mui
+import { Card, Container, Grid, TableBody, TableCell, TableRow } from '@mui/material';
+// components
+import Page from '../../components/Page';
+// utils
+import useSettings from '../../hooks/useSettings';
+// theme
+import palette from '../../theme/palette';
+// section
+import CardClaimStatus from '../../sections/claim-report/CardClaimStatus';
+
+// ----------------------------------------------------------------------
+
+const listClaimItems = [
+  { name: 'Requested', value: 15, color: palette.dark.primary.dark },
+  { name: 'Approval', value: 20, color: palette.dark.warning.dark },
+  { name: 'Disbrusment', value: 20, color: palette.dark.success.dark },
+  { name: 'Rejected', value: 20, color: palette.dark.error.dark },
+];
+
+const testingData = [
+  { label: 'Member ID', value: 'member_id' },
+  { label: 'Name', value: 'name' },
+  { label: 'Divisi', value: 'division_id' },
+];
+
+// ----------------------------------------------------------------------
+
+export default function Drugs() {
+  const { themeStretch } = useSettings();
+
+  return (
+    <Page title="Claim Reports">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Grid container spacing={2}>
+          <Grid item xs={12} lg={12} md={12}>
+            <CardClaimStatus data={listClaimItems} />
+          </Grid>
+          <Grid item xs={12} lg={12} md={12}>
+            <Card></Card>
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}