Update Show Claim Request

frontend/hospital-portal/src/sections/dashboard/TableList.tsx

@@ -40,6 +40,7 @@ import { useSearchParams } from 'react-router-dom';
 import { fSplit } from '@/utils/formatNumber';
 import { Chip } from '@mui/material';
 import { enqueueSnackbar } from 'notistack';
+import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
 
 /* ---------------------------------- types --------------------------------- */
 type PaginationTableProps = {
@@ -310,10 +311,11 @@ export default function TableList(props: any) {
 
   // -----------------------------------------------------------------
   // Download LOG
-  function handleDownloadLog(claimRequest) {
-    axios.get(`claim-requests/${claimRequest.id}/log`, {
-      responseType: 'blob'
-    })
+  async function handleDownloadLog(claimRequest) {
+    return axios
+      .get(`claim-requests/${claimRequest.id}/log`, {
+        responseType: 'blob',
+      })
       .then((response) => {
         window.open(URL.createObjectURL(response.data));
         // setLoadingLog(false);
@@ -323,9 +325,24 @@ export default function TableList(props: any) {
       //   setLoadingLog(false);
       // })
       .catch((response) => {
-        enqueueSnackbar(response.message, {variant: 'error'})
+        enqueueSnackbar(response.message, { variant: 'error' });
         // setLoadingLog(false);
-      })
+      });
+  }
+
+  // ---------------------------------------------------------
+  // Dialog Detail Claim
+  const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
+  const [loadingClaimDetail, setLoadingClaimDetail] = useState(true);
+  const [currentClaim, setCurrentClaim] = useState(null);
+
+  function handleShowClaim(claimRequest) {
+    setLoadingClaimDetail(true);
+    setOpenDialogDetailClaim(true);
+    setTimeout(function () {
+      setCurrentClaim(claimRequest);
+      setLoadingClaimDetail(false);
+    }, 300);
   }
 
   return (
@@ -379,7 +396,11 @@ export default function TableList(props: any) {
                       >
                         {statusOptions &&
                           statusOptions.map((option, index) => (
-                            <MenuItem value={option} sx={{ textTransform: 'capitalize' }} key={index}>
+                            <MenuItem
+                              value={option}
+                              sx={{ textTransform: 'capitalize' }}
+                              key={index}
+                            >
                               {option}
                             </MenuItem>
                           ))}
@@ -427,7 +448,9 @@ export default function TableList(props: any) {
                                 color: palette.dark.success.darker,
                               },
                             }}
-                            onClick={() => {handleDownloadLog(row)}}
+                            onClick={() => {
+                              handleDownloadLog(row);
+                            }}
                           >
                             Download LOG
                           </Button>
@@ -451,6 +474,16 @@ export default function TableList(props: any) {
                           sx={{ textTransform: 'capitalize' }}
                         />
                       </TableCell>
+
+                      <TableCell align="right">
+                        <IconButton
+                          onClick={() => {
+                            handleShowClaim(row);
+                          }}
+                        >
+                          <Iconify icon="eva:eye-fill" />
+                        </IconButton>
+                      </TableCell>
                     </TableRow>
                   ))
                 ) : (
@@ -475,6 +508,13 @@ export default function TableList(props: any) {
         </Grid>
         {/* End Field 2 */}
       </Grid>
+
+      <DialogDetailClaim
+        openDialog={openDialogDetailClaim}
+        setOpenDialog={setOpenDialogDetailClaim}
+        title={{ name: 'Claim Request Detail' }}
+        data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
+      ></DialogDetailClaim>
     </Card>
   );
 }