diff --git a/frontend/hospital-portal/src/components/dialogs/DialogDetailClaim.tsx b/frontend/hospital-portal/src/components/dialogs/DialogDetailClaim.tsx
new file mode 100644
index 00000000..59c65056
--- /dev/null
+++ b/frontend/hospital-portal/src/components/dialogs/DialogDetailClaim.tsx
@@ -0,0 +1,296 @@
+// @mui
+import {
+ Button,
+ Box,
+ Stepper,
+ Step,
+ StepLabel,
+ Card,
+ Typography,
+ Divider,
+ Stack,
+ CircularProgress,
+} from '@mui/material';
+import { Add } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+// theme
+import palette from '../../theme/palette';
+// React
+import { ReactElement, useEffect, useState } from 'react';
+import { fDate } from '@/utils/formatTime';
+import { addMinutes, format } from 'date-fns';
+import { LoadingButton } from '@mui/lab';
+
+type DataContent = {
+ claim: object;
+ isLoading: boolean;
+ handleDownloadLog: void;
+};
+
+type MuiDialogProps = {
+ title?: {
+ name?: string;
+ icon?: string;
+ };
+ openDialog: boolean;
+ setOpenDialog: Function;
+ content?: ReactElement;
+ data?: DataContent[];
+};
+
+const steps = ['Review', 'Approval', 'Disbursement'];
+
+const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+ const claim = data.claim ?? null;
+
+ // ---------------------------------------------
+ // Step
+ const [currentStep, setCurrentStep] = useState(0);
+ useEffect(
+ function () {
+ if (claim?.status == 'requested') {
+ setCurrentStep(0);
+ }
+ if (claim?.status == 'approved') {
+ setCurrentStep(1);
+ }
+ if (claim?.status == 'closed') {
+ setCurrentStep(2);
+ }
+ },
+ [data]
+ );
+
+
+ // ----------------------------------------------------
+ // Download LOG
+ const [loadingDownloadLog, setLoadingDownloadLog] = useState(false)
+ const handleDownloadLog = async (claimRequest) => {
+ setLoadingDownloadLog(true)
+ await data.handleDownloadLog(claimRequest).then(() => {
+ setLoadingDownloadLog(false)
+ })
+ }
+
+ const getContent = () => (
+ <>
+ {data.isLoading && (
+
+
+
+ )}
+
+ {!data.isLoading && (
+ <>
+
+
+ Claim Request
+
+
+ Submission date
+ {/* {JSON.stringify(data)} */}
+ {claim && fDate(claim.created_at)}
+
+
+
+
+ {steps.map((label) => (
+
+ {label}
+
+ ))}
+
+
+
+ { claim.status == 'approved' && (
+
+ }
+ fullWidth
+ // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
+ onClick={() => {handleDownloadLog(claim)}}
+ >
+ Upload Invoice
+
+ )}
+
+
+
+ {fDate(claim.created_at)}
+
+
+
+
+
+
+ {/* Download LOG */}
+ {claim.status == 'approved' && (
+
+
+
+ {format(
+ addMinutes(
+ new Date(claim.created_at),
+ 15 //Math.floor(Math.random() * (20 - 15 + 1)) + 15
+ ),
+ 'HH:mm'
+ )}{' '}
+ WIB
+
+ Approved
+
+
+
+
+ }
+ fullWidth
+ // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
+ onClick={() => {handleDownloadLog(claim)}}
+ >
+ Download Guarantee Letter
+
+
+
+ )}
+
+
+ {/* Item 1 */}
+ {claim.status == 'requested' && (
+
+
+ 09:10 WIB
+
+ Approval
+
+
+
+
+
+ Details : mohon melengkapi kekurangan dokumen
+
+
+ Lab pemeriksaan darah
+
+ }
+ fullWidth
+ sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
+ >
+ Hasil Pemeriksaan Laboratorium
+
+
+
+ )}
+
+ {/* Item 2 */}
+
+
+ {/* // TODO sementara tanggal random */}
+
+ {format(
+ addMinutes(
+ new Date(claim.created_at),
+ 10// Math.floor(Math.random() * (15 - 5 + 1)) + 5
+ ),
+ 'HH:mm'
+ )}{' '}
+ WIB
+
+
+ Approval
+
+
+
+
+
+ Details : Penilaian Dokter
+
+
+
+ {/* Item 3 */}
+
+
+ {fDate(claim.created_at, 'HH:mm')} WIB
+
+ Review
+
+
+
+
+
+ Details : Klaim Diajukan
+
+
+
+
+
+
+ )}
+
+ );
+
+ return (
+
+ );
+};
+
+export default DialogDetailClaim;
diff --git a/frontend/hospital-portal/src/sections/dashboard/TableList.tsx b/frontend/hospital-portal/src/sections/dashboard/TableList.tsx
index a7daecb9..9448654f 100755
--- a/frontend/hospital-portal/src/sections/dashboard/TableList.tsx
+++ b/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) => (
-