[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/FormRequestClaim.tsx
+++ b/frontend/hospital-portal/src/sections/dashboard/FormRequestClaim.tsx
@@ -0,0 +1,158 @@
+import { styled } from '@mui/material/styles';
+import Iconify from '@/components/Iconify';
+import { fCurrency } from '@/utils/formatNumber';
+import { LoadingButton } from '@mui/lab';
+import { Avatar, Divider, LinearProgress, linearProgressClasses } from '@mui/material';
+import { Card } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
+import { fPostFormat } from '@/utils/formatTime';
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+import { useRef, useState } from 'react';
+
+// TODO Fix any
+export default function FormRequestClaim({ member, handleSubmitSuccess }) {
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const fileResultInput = useRef<HTMLInputElement>(null);
+    const [filesResult, setFilesResult] = useState([]);
+    
+  const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+    height: 10,
+    borderRadius: 6,
+    [`&.${linearProgressClasses.colorPrimary}`]: {
+      backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+    },
+    [`& .${linearProgressClasses.bar}`]: {
+      borderRadius: 6,
+      background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+    },
+  }));
+    // ----------------------------------------------------------------------
+
+    
+
+  const handleImportButton = () => {
+    if (fileResultInput?.current) {
+      fileResultInput.current ? fileResultInput.current.click() : console.log('No File selected');
+    } else {
+      alert('No file selected');
+    }
+  };
+  
+  const handleResultInputChange = (event) => {
+    if (event.target.files[0]) {
+        // console.log('pushing', event.target.files[0])
+        // let currentFiles = filesResult;
+        // currentFiles.push(event.target.files[0])
+        setFilesResult([...filesResult, ...event.target.files])
+    } else {
+        console.log('NO FILE')
+    }
+  }
+  const removeFiles = (filesState, index) => {
+    setFilesResult(filesState.filter((file, fileIndex) => {
+        console.log('looing through', fileIndex)
+        return fileIndex != index;
+    }))
+  }
+  
+    function submitRequest() {
+        setSubmitLoading(true)
+        axios.post('/claim-requests', {
+            'member_id' : member.id,
+        })
+        .then((response) => {
+            enqueueSnackbar(response.data.message ?? 'Berhasil membuat data', {variant: 'success'})
+            handleSubmitSuccess()
+        })
+        .catch(({response}) => {
+            enqueueSnackbar(response.data.message ?? 'Something Went Wrong', {variant: 'error'});
+        })
+        .then(() => {
+            setSubmitLoading(false)
+        })
+    }
+
+  return (
+    <Stack>
+      <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2}}>
+        <Typography textAlign={'right'}>
+          Submission Date : <br /> {fPostFormat(new Date(), 'dd/MM/yyyy')}
+        </Typography>
+      </Stack>
+      <Card sx={{ p: 1, background: '#f4f6f8', marginBottom: 2 }}>
+        <Stack direction="row">
+          <Avatar
+            src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
+            alt={member?.full_name ?? ''}
+            sx={{ marginTop: 1, width: 48, height: 48 }}
+          />
+          <Stack sx={{ p: 1 }}>
+            <Typography>{member?.full_name ?? ''}</Typography>
+            <Typography>{member?.member_id ?? ''}</Typography>
+          </Stack>
+        </Stack>
+      </Card>
+
+      <Card sx={{ paddingY: 1, paddingX: 2 }}>
+        <Typography variant="body1" sx={{ marginBottom: 1, fontWeight: 600 }}>
+          Total Limit
+        </Typography>
+        <BorderLinearProgress
+          variant="determinate"
+          value={
+            100 -
+            (member?.current_plan?.limit_rules
+              ? (member?.current_plan?.usage ?? 0) / member?.current_plan?.limit_rules
+              : 0)
+          }
+        />
+        <Typography sx={{ textAlign: 'right', marginTop: 1 }}>
+          {fCurrency(member?.current_plan?.usage ?? 0)} /{' '}
+          {fCurrency(member?.current_plan?.limit_rules ?? 0)}
+        </Typography>
+      </Card>
+
+      <Stack sx={{ marginTop: 2 }}>
+        <Typography variant="body1" fontWeight={600}>
+          Hasil Penunjang
+        </Typography>
+        {/* <Typography variant="body2">Hasil Lab, </Typography> */}
+        <Stack
+          divider={<Divider orientation="horizontal" flexItem />}
+          spacing={1}
+          sx={{ marginY: 2 }}
+        >
+            {filesResult && filesResult.map((file, index) => (
+                <Stack direction="row" justifyContent={'space-between'} key={index}>
+                    <Typography>{file.name}</Typography>
+                    <Iconify icon="eva:trash-2-outline" color={'darkred'} onClick={() => {removeFiles(filesResult, index)}}></Iconify>
+                </Stack>
+            ))}
+          {/* <Stack direction="row" justifyContent={'space-between'}>
+                                    <Typography>Nama File .pdf</Typography>
+                                    <Iconify icon="eva:trash-2-outline" color={'darkred'}></Iconify>
+                                </Stack> */}
+        </Stack>
+        {/* { JSON.stringify(filesResult) } */}
+        <input
+          type="file"
+          id="file"
+          ref={fileResultInput}
+          style={{ display: 'none' }}
+          multiple
+          onChange={handleResultInputChange}
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+        />
+        <LoadingButton variant="outlined" onClick={() => {fileResultInput.current.click()}}>
+          <Iconify icon="eva:plus-fill" />
+          Add Result
+        </LoadingButton>
+      </Stack>
+
+      <LoadingButton variant="contained" sx={{ marginTop: 2, p: 2 }} onClick={() => {submitRequest()}} loading={submitLoading}>
+        LOG Request
+      </LoadingButton>
+    </Stack>
+  );
+}