// @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>
  );
}
