[WIP] Update

frontend/dashboard/src/pages/ClaimRequests/List.tsx

@@ -26,6 +26,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
+import useSettings from '@/hooks/useSettings';
 // components
 import axios from '../../utils/axios';
 import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
@@ -40,6 +41,7 @@ import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
 // import LoadingButton from '@/theme/overrides/LoadingButton';
 
 export default function List() {
+  const { themeColorPresets } = useSettings();
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
 
@@ -137,15 +139,16 @@ export default function List() {
   };
 
   const handleApprove = (claimRequest) => {
-    axios.post(`claim-requests/${claimRequest.id}/approve`)
+    axios
+      .post(`claim-requests/${claimRequest.id}/approve`)
       .then((response) => {
-        enqueueSnackbar('Success Approve', {variant: 'success'})
-        loadDataTableData()
+        enqueueSnackbar('Success Approve', { variant: 'success' });
+        loadDataTableData();
       })
-      .catch(({response}) => {
-        enqueueSnackbar(response.data.message ?? 'Something went wrong!', {variant : "error"})
-      })
-  }
+      .catch(({ response }) => {
+        enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+      });
+  };
 
   useEffect(() => {
     loadDataTableData();
@@ -178,13 +181,39 @@ export default function List() {
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
-          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">
+            <Typography
+              onClick={() => {
+                handleShowClaim(row);
+              }}
+              color={themeColorPresets}
+            >
+              {row.code}
+            </Typography>
+          </TableCell>
+          <TableCell align="left">{row.member?.full_name}</TableCell>
           <TableCell align="left">{row.member?.full_name}</TableCell>
           <TableCell align="left">{row.submission_date}</TableCell>
-          <TableCell align="left">{row.service_type}</TableCell>
-          <TableCell align="right"><Chip label={row.status}/></TableCell>
-          <TableCell align="right">{ row.status == 'requested' && (<LoadingButton loading={loadingApprove} variant="outlined" onClick={() => {handleApprove(row)}}>Approve</LoadingButton> )}</TableCell>
-          <TableCell>
+          <TableCell align="left">{row.service_name}</TableCell>
+          <TableCell align="left">{row.payment_type_name}</TableCell>
+          <TableCell align="right">
+            <Chip label={row.status} />
+          </TableCell>
+          <TableCell align="right">
+            {row.status == 'requested' && (
+              <LoadingButton
+                loading={loadingApprove}
+                variant="outlined"
+                size="small"
+                onClick={() => {
+                  handleApprove(row);
+                }}
+              >
+                Ajukan Claim <Iconify icon="eva:arrow-forward-outline"></Iconify>
+              </LoadingButton>
+            )}
+          </TableCell>
+          {/* <TableCell>
             
           <IconButton
                           onClick={() => {
@@ -193,32 +222,33 @@ export default function List() {
                         >
                           <Iconify icon="eva:eye-fill" />
                         </IconButton>
-          </TableCell>
+          </TableCell> */}
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
             <Collapse in={open} timeout="auto" unmountOnExit>
               <Box sx={{ borderBottom: 1 }}>
-              <Stack
-                divider={<Divider orientation="horizontal" flexItem />}
-                spacing={1}
-                sx={{ marginY: 2 }}
-              >
-                <Box>
-                  <Typography fontWeight={600}>Berkas Hasil Penunjang</Typography>
-                  {row.files_by_type?.result &&
-                    row.files_by_type?.result.map((file, index) => (
-                      <Stack direction="row" key={index}>
-                        <Typography sx={{marginRight: 2}}>-</Typography> <a href={file.url} target="_blank">{file.name}</a>
-                      </Stack>
-                    ))}
-                  
-                  { !row.files_by_type?.result && (
-                    <Typography>Tidak ada berkas</Typography>
-                  )}
+                <Stack
+                  divider={<Divider orientation="horizontal" flexItem />}
+                  spacing={1}
+                  sx={{ marginY: 2 }}
+                >
+                  <Box>
+                    <Typography fontWeight={600}>Berkas Hasil Penunjang</Typography>
+                    {row.files_by_type?.result &&
+                      row.files_by_type?.result.map((file, index) => (
+                        <Stack direction="row" key={index}>
+                          <Typography sx={{ marginRight: 2 }}>-</Typography>{' '}
+                          <a href={file.url} target="_blank">
+                            {file.name}
+                          </a>
+                        </Stack>
+                      ))}
+
+                    {!row.files_by_type?.result && <Typography>Tidak ada berkas</Typography>}
                   </Box>
-              </Stack>
+                </Stack>
               </Box>
             </Collapse>
           </TableCell>
@@ -241,20 +271,24 @@ export default function List() {
               Code
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Member Name
+              Name
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Submission Date
+              Nomor Polis
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Jenis Layanan
+              Tanggal Pengajuan
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Service Type
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Claim Type
             </TableCell>
             <TableCell style={headStyle} align="left">
               Status
             </TableCell>
-            <TableCell style={headStyle} align="right">
-              Action
-            </TableCell>
+            <TableCell style={headStyle} align="right"></TableCell>
           </TableRow>
         </TableBody>
         {/* ------------------ END TABLE HEADER ------------------ */}
@@ -288,8 +322,6 @@ export default function List() {
     );
   }
 
-
-
   // ---------------------------------------------------------
   // Dialog Detail Claim Request
   const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
@@ -300,20 +332,18 @@ export default function List() {
     setLoadingClaimDetail(true);
     setOpenDialogDetailClaim(true);
 
-    axios.get(`/claim-requests/${claimRequest.id}`)
-      .then(({data}) => {
+    axios
+      .get(`/claim-requests/${claimRequest.id}`)
+      .then(({ data }) => {
         setCurrentClaim(data.data);
         setLoadingClaimDetail(false);
       })
       .catch((err) => {
-        enqueueSnackbar(err.message, {variant: 'error'})
-      })
-  }
-
-  function handleDownloadLog() {
-    
+        enqueueSnackbar(err.message, { variant: 'error' });
+      });
   }
 
+  function handleDownloadLog() {}
 
   return (
     <Card>
@@ -327,7 +357,6 @@ export default function List() {
         TableContent={<TableContent />}
       />
 
-      
       <DialogDetailClaim
         openDialog={openDialogDetailClaim}
         setOpenDialog={setOpenDialogDetailClaim}