[WIP] Add Claim Request

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

@@ -1,64 +1,78 @@
 // @mui
-import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
+import { Typography, Container, Grid } from '@mui/material';
 // hooks
-import useSettings from '../hooks/useSettings';
+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';
+import Page from '@/components/Page';
+// theme
+import CardNotification from '@/sections/dashboard/CardNotification';
+import CardSearchMember from '@/sections/dashboard/CardSearchMember'
+import { useContext, useEffect, useState } from 'react';
+import axios from '@/utils/axios';
+import { Stack } from '@mui/system';
+import { Input } from '@mui/material';
+//sections
+import TableList from '@/sections/dashboard/TableList';
 
 // ----------------------------------------------------------------------
 
+const itemList = [
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
+];
+
+// ----------------------------------------------------------------------
+
+/* ---------------------------------- types --------------------------------- */
+
+type PolicyProps = {
+  myLimit: {
+    balance: number;
+    total: number;
+    percentage: number;
+  };
+  lockLimit: {
+    balance: number;
+    percentage: number;
+  };
+};
+
+/* -------------------------------------------------------------------------- */
+
+/* ------------------------------ default data ------------------------------ */
+const defaultPolicyData = {
+  myLimit: {
+    balance: 0,
+    total: 0,
+    percentage: 0,
+  },
+  lockLimit: {
+    balance: 0,
+    percentage: 0,
+  },
+};
+/* -------------------------------------------------------------------------- */
+
 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,
-  }));
+  // const [tableData, setTableData] = useState([]);
+  const [policyData, setPolicyData] = useState<PolicyProps>(defaultPolicyData);
 
   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 item xs={12} lg={6} md={6}>
+            <CardSearchMember></CardSearchMember>
           </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 item xs={12} lg={6} md={6}>
+            <CardNotification data={itemList} />
+          </Grid>
+          <Grid item xs={12} lg={12} md={12}>
+            <TableList />
           </Grid>
         </Grid>
       </Container>