[WIP] Add Claim Request

2023-02-14 12:39:51 +07:00
parent a7e688a52c
commit 13542cd3c0
102 changed files with 2625 additions and 391 deletions
--- a/frontend/hospital-portal/src/sections/dashboard/NotificationCard.tsx
+++ b/frontend/hospital-portal/src/sections/dashboard/NotificationCard.tsx
@@ -0,0 +1,109 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import { Button, Card, Divider, Link, Typography, Stack } from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+// components
+import Iconify from '@/components/Iconify';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: '1rem 0.5rem',
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  maxHeight: '250px',
+}));
+
+const ItemStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+  height: '180px',
+}));
+
+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' },
+];
+
+// ----------------------------------------------------------------------
+
+export default function NotificationCard() {
+  return (
+    <RootStyle>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography>
+          <Typography
+            variant="body2"
+            component="span"
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            <Iconify icon="eva:bell-fill" marginRight={0.75} />
+            Notification
+            <div
+              style={{
+                width: '12px',
+                height: '12px',
+                backgroundColor: '#19BBBB',
+                marginLeft: '0.5rem',
+                borderRadius: '50%',
+              }}
+            />
+          </Typography>
+        </Typography>
+        <Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
+          View All
+        </Button>
+      </Stack>
+
+      <Stack sx={{ marginTop: 2 }}>
+        <ItemStyle>
+          {itemList.map(({ info, date, time }, key) => (
+            <div key={key}>
+              {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
+              <Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                  <Typography sx={{ typography: 'caption' }}>{info}</Typography>
+                  <Link
+                    component="button"
+                    variant="caption"
+                    underline="always"
+                    onClick={() => {
+                      alert('Info Detail');
+                    }}
+                  >
+                    Info Detail
+                  </Link>
+                </Stack>
+                <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                  <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
+                  <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
+                </Stack>
+              </Stack>
+            </div>
+          ))}
+        </ItemStyle>
+      </Stack>
+
+      {/* <BorderLinearProgress variant="determinate" value={50} sx={{ mb: 1 }} />
+
+      <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
+        <Typography sx={{ typography: 'caption' }}>Lock Fund ( 25% )</Typography>
+        <Typography sx={{ typography: 'caption' }}>125.000.000 / 125.000.000</Typography>
+      </Stack>
+
+      <Stack direction="row" spacing={2}>
+        <Button variant="outlined" fullWidth={true}>
+          Submit Claim
+        </Button>
+        <Button variant="contained" startIcon={<Payments />} fullWidth={true}>
+          Top Up
+        </Button>
+      </Stack> */}
+    </RootStyle>
+  );
+}