LMSN-217

Improve Slicing tampilan pada hospital portal (List Claim, Detail, Search Member)

frontend/hospital-portal/src/components/dialogs/DialogDetailClaim.tsx

@@ -10,6 +10,7 @@ import {
   Divider,
   Stack,
   CircularProgress,
+  ButtonBase,
 } from '@mui/material';
 import { Add } from '@mui/icons-material';
 // components
@@ -17,7 +18,7 @@ import MuiDialog from '../../components/MuiDialog';
 // theme
 import palette from '../../theme/palette';
 // React
-import { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState, useRef } from 'react';
 import { fDate } from '@/utils/formatTime';
 import { addMinutes, format } from 'date-fns';
 import { LoadingButton } from '@mui/lab';
@@ -44,6 +45,7 @@ type MuiDialogProps = {
 const steps = ['Review', 'Approval', 'Disbursement'];
 
 const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  console.log(data);
   const claim = data.claim ?? null;
 
   // ---------------------------------------------
@@ -103,11 +105,11 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
             <Typography variant="subtitle1" sx={{ height: 'max-content' }}>
               Claim Request
             </Typography>
-            <Stack>
-              <Typography variant="caption">Submission date</Typography>
+            <Stack direction="row" spacing={1}>
+              <Typography variant="caption">Submission Date</Typography>
               {/* {JSON.stringify(data)} */}
-              <Typography variant="caption">
-                {claim.created_at && fDate(claim.created_at)}
+              <Typography variant="caption" sx={{fontWeight: 'bold'}}>
+                {claim.created_at && format(new Date(claim.created_at), "d MMM yyyy")}
               </Typography>
             </Stack>
           </Stack>
@@ -122,47 +124,19 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
               ))}
             </Stepper>
           </Box>
-
-          {/* { claim.status == 'approved' && (
-            <Stack sx={{ marginTop: 4}}>
-              <LoadingButton loading={false}
-                variant="contained"
-                startIcon={<Add />}
-                fullWidth
-                // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
-                onClick={() => {handleUploadInvoice()}}
-              >
-                Upload Invoice
-              </LoadingButton>
-            </Stack>
-          )} */}
           
           <Stack direction="row" spacing={2} sx={{ marginTop: 2 }}>
-            <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
             <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
               {/* ---------------------------------TYPE INFO------------------------------------ */}
-              <Card sx={{ paddingY: 2, paddingX: 3 }}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center">
                   <Typography variant="body1" fontWeight={600}>
-                    <Iconify icon="eva:file-text-fill"></Iconify> Pengajuan Penjaminan
+                    Request Claim
                   </Typography>
                 </Stack>
-                <Divider sx={{ marginY: 2 }} />
-
-                <Stack>
-                <LoadingButton loading={false}
-                variant="contained"
-                startIcon={<Add />}
-                fullWidth
-                // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
-                onClick={() => {}}
-              >
-                Upload Invoice
-              </LoadingButton>
-                </Stack>
-              </Card>
+                  <Buttons variant="contained" type="invoice" />
             </Stack>
           </Stack>
+          {console.log(claim.histories_by_date)}
 
           {claim.histories_by_date &&
             claim.histories_by_date.map((historiesByDate) => (
@@ -322,4 +296,46 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
   );
 };
 
+type ButtonIProp = {
+  row: ClaimSubmission;
+  type: 'invoice' | 'another' | 'lab';
+  handle: (event: any, row: any, type: any) => void;
+};
+
+const Buttons = ({ handle, row, type }: ButtonIProp) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  return (
+    <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+          bgcolor: '#919EAB52',
+          borderRadius: '8px',
+          width: '100%',}} onClick={() => ref.current?.click()}>
+      <Box
+        sx={{
+          display: 'flex',
+          placeItems: 'center',
+          gap: 1,
+          placeContent: 'center',
+          
+
+        }}
+      >
+        <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+        <Typography variant="body1" fontWeight="bold">
+          Add Invoice
+        </Typography>
+      </Box>
+      <input
+        ref={ref}
+        hidden
+        accept="application/pdf"
+        type="file"
+        name="file"
+        multiple
+        onChange={(event) => handle(event, row, type)}
+      />
+    </ButtonBase>
+  );
+};
+
 export default DialogDetailClaim;