/* ---------------------------------- @mui ---------------------------------- */
import { Container, Grid } from '@mui/material';
/* ------------------------------- components ------------------------------- */
import Page from '../../components/Page';
/* ---------------------------------- hooks --------------------------------- */
import useSettings from '../../hooks/useSettings';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import DashboardBilling from './DashboardBilling';
import DashboardBillingProvider from './DashboardBillingProvider';
import DashboardBillingDiagnosis from './DashboardBillingDiagnosis';

export default function Drugs() {
  const { themeStretch } = useSettings();

  return (
    <Page title="Dashboard">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <HeaderBreadcrumbs
          heading={'Dashboard'}
          links={[
            { name: 'Dashboard', href: '/dashboard' }
          ]}
        />
        <Grid container spacing={2}>
            <Grid item xs={12}>
                {/* Billing per bulan */}
                <DashboardBilling />
            </Grid>

            <Grid item xs={12}>
                {/* Billing per provider */}
                <DashboardBillingProvider />
            </Grid>

            <Grid item xs={12}>
                {/* Billing per diagnosis */}
                <DashboardBillingDiagnosis />
            </Grid>
        </Grid>

      </Container>
    </Page>
  );
}