[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>

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

@@ -4,10 +4,10 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Typography, Container } from '@mui/material';
 // components
-import Page from '../components/Page';
-import { MotionContainer, varBounce } from '../components/animate';
+import Page from '@/components/Page';
+import { MotionContainer, varBounce } from '@/components/animate';
 // assets
-import { PageNotFoundIllustration } from '../assets';
+import { PageNotFoundIllustration } from '@/assets';
 
 // ----------------------------------------------------------------------
 

frontend/hospital-portal/src/pages/auth/ForgetPassword.tsx

@@ -3,14 +3,14 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Link, Container, Typography } from '@mui/material';
 // layouts
-import LogoOnlyLayout from '../../layouts/LogoOnlyLayout';
+import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
 // routes
-import { PATH_AUTH } from '../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // components
-import Page from '../../components/Page';
-import Iconify from '../../components/Iconify';
+import Page from '@/components/Page';
+import Iconify from '@/components/Iconify';
 // sections
-import { ForgetPasswordForm } from '../../sections/auth/forget-password';
+import { ForgetPasswordForm } from '@/sections/auth/forget-password';
 import { useSearchParams } from 'react-router-dom';
 
 // ----------------------------------------------------------------------

frontend/hospital-portal/src/pages/auth/Login.tsx

@@ -13,16 +13,16 @@ import {
     Typography,
 } from "@mui/material";
 // routes
-import { PATH_AUTH } from "../../routes/paths";
+import { PATH_AUTH } from "@/routes/paths";
 // hooks
-import useAuth from "../../hooks/useAuth";
-import useResponsive from "../../hooks/useResponsive";
+import useAuth from "@/hooks/useAuth";
+import useResponsive from "@/hooks/useResponsive";
 // components
-import Page from "../../components/Page";
-import Logo from "../../components/Logo";
-import Image from "../../components/Image";
+import Page from "@/components/Page";
+import Logo from "@/components/Logo";
+import Image from "@/components/Image";
 // sections
-import { LoginForm } from "../../sections/auth/login";
+import { LoginForm } from "@/sections/auth/login";
 
 // ----------------------------------------------------------------------
 

frontend/hospital-portal/src/pages/auth/Register.tsx

@@ -4,16 +4,16 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Card, Link, Container, Typography, Tooltip } from '@mui/material';
 // hooks
-import useAuth from '../../hooks/useAuth';
-import useResponsive from '../../hooks/useResponsive';
+import useAuth from '@/hooks/useAuth';
+import useResponsive from '@/hooks/useResponsive';
 // routes
-import { PATH_AUTH } from '../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // components
-import Page from '../../components/Page';
-import Logo from '../../components/Logo';
-import Image from '../../components/Image';
+import Page from '@/components/Page';
+import Logo from '@/components/Logo';
+import Image from '@/components/Image';
 // sections
-import { RegisterForm } from '../../sections/auth/register';
+import { RegisterForm } from '@/sections/auth/register';
 
 // ----------------------------------------------------------------------
 

frontend/hospital-portal/src/pages/auth/ResetPassword.tsx

@@ -4,15 +4,15 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Container, Typography } from '@mui/material';
 // layouts
-import LogoOnlyLayout from '../../layouts/LogoOnlyLayout';
+import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
 // routes
-import { PATH_AUTH } from '../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // components
-import Page from '../../components/Page';
+import Page from '@/components/Page';
 // sections
-import { ResetPasswordForm } from '../../sections/auth/reset-password';
+import { ResetPasswordForm } from '@/sections/auth/reset-password';
 // assets
-import { SentIcon } from '../../assets';
+import { SentIcon } from '@/assets';
 
 // ----------------------------------------------------------------------
 

frontend/hospital-portal/src/pages/auth/VerifyCode.tsx

@@ -3,14 +3,14 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Link, Container, Typography } from '@mui/material';
 // layouts
-import LogoOnlyLayout from '../../layouts/LogoOnlyLayout';
+import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
 // routes
-import { PATH_AUTH } from '../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // components
-import Page from '../../components/Page';
-import Iconify from '../../components/Iconify';
+import Page from '@/components/Page';
+import Iconify from '@/components/Iconify';
 // sections
-import { VerifyCodeForm } from '../../sections/auth/verify-code';
+import { VerifyCodeForm } from '@/sections/auth/verify-code';
 
 // ----------------------------------------------------------------------