hospital portal

frontend/hospital-portal/src/pages/Dashboard.tsx

@@ -0,0 +1,67 @@
+// @mui
+import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
+// hooks
+import useSettings from '../hooks/useSettings';
+// components
+import Page from '../components/Page';
+import axios from '../utils/axios';
+import useAuth from '../hooks/useAuth';
+import SomethingUsage from '../sections/dashboard/SomethingUsage';
+import { fCurrency } from '../utils/formatNumber';
+
+// ----------------------------------------------------------------------
+
+export default function Dashboard() {
+  const { themeStretch } = useSettings();
+
+  const { logout } = useAuth();
+  
+  const loadSomething = () => {
+    axios.get('/user')
+  };
+
+  const DangerCard = styled(Card)(({ theme }) => ({
+    boxShadow: 'none',
+    padding: theme.spacing(3),
+    color: theme.palette.error.main,
+    backgroundColor: theme.palette.error.lighter,
+  }));
+
+  const SuccessCard = styled(Card)(({ theme }) => ({
+    boxShadow: 'none',
+    padding: theme.spacing(3),
+    color: theme.palette.success.darker,
+    backgroundColor: theme.palette.success.lighter,
+  }));
+
+  return (
+    <Page title="Dashboard">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Typography variant="h3" component="h1" paragraph>
+          Dashboard
+        </Typography>
+
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <SomethingUsage />
+          </Grid>
+          <Grid item xs={6}>
+            <DangerCard>
+              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
+                <Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
+                <Typography>{fCurrency(15000000)} (57)</Typography>
+              </Stack>
+            </DangerCard>
+            <br />
+            <SuccessCard>
+              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
+                <Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
+                <Typography>November 2022</Typography>
+              </Stack>
+            </SuccessCard>
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}