tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/staging' into origin/production

Browse Source
This commit is contained in:
Linksehat Staging Server
2024-02-22 08:38:39 +07:00
parent be0544b31b 16e6aa08dd
commit 8faab96fb1
26 changed files with 1867 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/dashboard/src/@types/claims.ts
View File

@@ -10,12 +10,16 @@ export type ClaimRequest = {
service_code: string;
claim_method: string;
service_type: string;
service_name: string;
code_provider: string;
file_condition: Files;
member: Member;
claim: {
organization: Organizations
}
organization: {
code: string
}
};
export type Claims = {

155
frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringList.tsx
View File

@@ -2,10 +2,10 @@
* Core
* ============================================
*/
import { useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { Box, IconButton, Typography, Grid, Card, List, ListItem } from '@mui/material';
import { Box, IconButton, Typography, Grid, Card, List, ListItem, Stack, Autocomplete, TextField, Button } from '@mui/material';
import { LoadingButton } from "@mui/lab";
/**
@@ -31,6 +31,13 @@ import { fDate, fDateOnly } from '@/utils/formatTime';
import { getMonitoringDetailList } from '../Model/Functions';
import { getOrganizationId } from '../Model/Functions';
import { DetailMonitoringListType } from '../Model/Types';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import { MenuItem } from '@mui/material';
import { Delete } from '@mui/icons-material';
import MuiDialog from '@/components/MuiDialog';
import { DialogActions } from '@mui/material';
import axios from '@/utils/axios';
import { enqueueSnackbar } from 'notistack';
export default function DetailMonitoringList() {
@@ -42,12 +49,91 @@ export default function DetailMonitoringList() {
// --------------------
const [detailMonitoringList, setDetailMonitoringList] = useState<DetailMonitoringListType[]>();
const [organizationId, setOrganizationId] = useState<number|undefined>();
const [openDialog, setOpenDialog] = useState<boolean>(false)
// Use Effect
// --------------------
useEffect(() => {
loadDataTableData();
}, [])
// Dialog
const marginBottom2 = {
marginBottom: 2,
}
const [selectedReason, setSelectedReason] = useState({value:'-', label:''});
const reason = [
{ value: 'Wrong Setting', label: 'Wrong Setting' },
{ value: 'Hospital Request', label: 'Hospital Request' }
];
const [error, setError] = useState('');
const [id, setId] = useState(null);
const handleCloseDialog = () => {
setOpenDialog(false);
}
const handleDelete = () => {
if(selectedReason.value != '-'){
const parameters = {
'reason' : selectedReason.value
}
const response = axios.get(`case_management/daily_monitoring/detail/${id}/delete`, {
params: { ...parameters },
});
if (!response.error){
enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
window.location.reload();
setOpenDialog(false)
} else {
enqueueSnackbar('Claim Request Updated Error!', { variant: 'error' });
}
} else {
setError('Please select a reason')
}
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to delete this Daily Monitoring ?</Typography>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<Typography variant="subtitle1" marginY={2}>Reason for Delete*</Typography>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Autocomplete
options={reason}
getOptionLabel={(option) => option.label}
fullWidth
value={selectedReason}
onChange={(event, newValue) => {
setSelectedReason(newValue);
// Validasi jika newValue adalah null
if (!newValue) {
setError('Please select a reason');
} else {
setError('');
}
}}
renderInput={(params) => (
<TextField
{...params}
label="Reason for Delete"
variant="outlined"
name='reason'
error={Boolean(error)} // Menampilkan error jika ada
helperText={error} // Menampilkan pesan kesalahan
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Button color="primary" variant="contained" onClick={() => handleDelete()}>Delete</Button>
</DialogActions>
</Stack>
)
// Load Data
// -------------------
const loadDataTableData = async () => {
@@ -81,33 +167,49 @@ export default function DetailMonitoringList() {
detailMonitoringList?.map((row, index) => {
return (
<Grid key={index} item xs={12}>
<Card sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '32px', py: '24px'}}>
<Card sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '30px', py: '24px'}}>
{/* card header */}
<Box sx={{ pb: '20px', mb: '20px', borderBottom: '1px solid rgba(0,0,0,0.125)' }}>
<Label
variant="ghost"
color="default"
>
<Box
sx={{
pb: '20px',
mb: '20px',
borderBottom: '1px solid rgba(0,0,0,0.125)',
position: 'relative',
display: 'flex',
alignItems: 'center'
}}
>
<Label variant="ghost" color="default">
{row.submission_date ? fDate(row.submission_date) : '-'}
</Label>
{row.discharge_date.discharge_date ?
(<Label
variant="ghost"
color="success"
sx={{marginLeft: '85%'}}
>
{row.discharge_date ? (
<Label
variant="ghost"
color="success"
sx={{ position: 'absolute', top: 0, right: '120px' }} // Atur posisi label "Close Monitoring"
>
Close Monitoring
</Label>) : (<Label
variant="ghost"
color="warning"
sx={{marginLeft: '77%'}}
>
</Label>
) : (
<Label
variant="ghost"
color="warning"
sx={{ position: 'absolute', top: 0, right: '120px' }} // Atur posisi label "On Monitoring"
>
On Monitoring
</Label>)}
</Box>
</Label>
)}
<Box sx={{ marginLeft: 'auto' }}> {/* Menempatkan TableMoreMenu di sebelah kanan */}
<TableMoreMenu actions={
<MenuItem onClick={() => {setOpenDialog(true); setId(row.id)}}>
<Delete color='error' />
Delete
</MenuItem>
} />
</Box>
</Box>
{/* card body */}
<Grid container gap={4}>
<Grid item xs={12}>
@@ -387,6 +489,15 @@ export default function DetailMonitoringList() {
}
</Grid>
</Grid>
{/* Dialog Delete */}
<MuiDialog
title={{name: "Delete Daily Monitoring"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xs"
/>
</Grid>
</Page>
);

3
frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Types.ts
View File

@@ -48,7 +48,7 @@ export type ClaimListType = {
* Detail Monitoring List
*/
export type DetailMonitoringListType = {
id : string|null,
id : number|null,
claim_id : string|null,
claim_code : string,
subject : string,
@@ -61,6 +61,7 @@ export type DetailMonitoringListType = {
analysis : string,
complaints : string,
submission_date : string,
discharge_date : string,
lab_date : string,
provider : string,
examination : string,

174
frontend/dashboard/src/pages/ClaimRequests/Components/DialogConfirmation.tsx Normal file
View File

@@ -0,0 +1,174 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { ClaimRequest, Files } from '@/@types/claims';
import { fDateOnly, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar, useSnackbar } from "notistack";
import { useNavigate } from "react-router";
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
type DialogConfirmationType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
approve: string;
claimRequest: ClaimRequest|undefined;
}
export default function DialogConfirmation({claimRequest, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
const navigate = useNavigate();
const { enqueueSnackbar } = useSnackbar();
const [formData, setFormData] = useState({
date: claimRequest?.date,
id: claimRequest?.id,
reason: claimRequest?.reason
});
const handleChange = (field, value) => {
setFormData((prevData) => ({
...prevData,
[field]: value,
}));
};
const handleSubmit = () => {
axios
.post(`customer-service/request/final-log`, formData)
.then((response) => {
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
setOpenDialog(false);
if (requestLog?.service_type == 'Inpatient'){
navigate('/case_management/inpatient_monitoring');
} else {
navigate('/custormer-service/final-log');
}
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
}
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const marginBottom2 = {
marginBottom: 2,
}
const handleCloseDialog = () => {
setOpenDialog(false);
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</Typography>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
</Stack>
</Card>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => handleChange('icdCodes', newValues.map((value) => value.value))}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
{approve == 'approved' ? (
<Button color="primary" variant="contained" onClick={() => handleApprove()}>Approve</Button>
) : (
<Button color="error" variant="contained" onClick={() => handleApprove()}>Decline</Button>
) }
</DialogActions>
</Stack>
);
return (
<MuiDialog
title={{name: "Confirmation"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}

140
frontend/dashboard/src/pages/ClaimRequests/Components/DialogDeleteFileLog.tsx Normal file
View File

@@ -0,0 +1,140 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
import { TextField } from "@mui/material";
type DialogDeleteType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
id: number|undefined;
path: string;
}
export default function DialogDeleteFileLog({id, path, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom2 = {
marginBottom: 2,
}
const handleCloseDialog = () => {
setOpenDialog(false);
resetForm();
}
const [isReasonSelected, setIsReasonSelected] = useState(false);
const reasons = [
{ value: 'Wrong Setting', label: 'Wrong Setting' },
{ value: 'Hospital Request', label: 'Hospital Request' }
];
const [formData, setFormData] = useState({
path: path,
reason: null
});
const resetForm = () => {
setFormData({
reason: null,
path: path
});
};
useEffect(() => {
// Update formData setiap kali approve berubah
setFormData(prevData => ({
...prevData,
path: path || '',
}));
}, [path]);
const handleChange = (field, value) => {
setFormData((prevData) => ({
...prevData,
[field]: value,
}));
if (field === 'reason') {
setIsReasonSelected(!!value);
}
};
const handleSubmit = () => {
if (isReasonSelected && formData.reason !== '') {
console.log(formData)
axios
.post(`customer-service/request/${id}/delete_file`, formData)
.then((response) => {
enqueueSnackbar('File LOG has Deleted', { variant: 'success' });
setOpenDialog(false);
window.location.reload()
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
} else {
setIsReasonSelected(false);
alert('Silakan pilih alasan sebelum menghapus data.');
}
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2" marginBottom={4}>Are you sure to delete this file Final LOG ?</Typography>
<br/>
<Grid item xs={12} md={12} marginTop={2}>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
<Autocomplete
options={reasons}
getOptionLabel={(option) => option.label}
fullWidth
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
onChange={(e, newValue) => handleChange('reason', newValue?.value)}
renderInput={(params) => (
<TextField
{...params}
label="Reason"
variant="outlined"
required
error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
/>
)}
/>
</Stack>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
</DialogActions>
</Stack>
);
return (
<MuiDialog
title={{name: "Delete File Final LOG"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xs"
/>
);
}

241
frontend/dashboard/src/pages/ClaimRequests/Components/DialogUploadFileFinalLog.tsx Normal file
View File

@@ -0,0 +1,241 @@
import { styled } from '@mui/material/styles';
import Iconify from '@/components/Iconify';
import { fCurrency } from '@/utils/formatNumber';
import { LoadingButton } from '@mui/lab';
import { Avatar, Button, Divider, LinearProgress, linearProgressClasses, ButtonBase, Box } from '@mui/material';
import { Card, Autocomplete } 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, useContext, useEffect } from 'react';
import { makeFormData } from '@/utils/jsonToFormData';
import { format } from 'date-fns';
// import { LanguageContext } from '@/contexts/LanguageContext';
import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import TextField from '@mui/material/TextField';
import MuiDialog from '@/components/MuiDialog';
type DialogUploadType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
id: number|undefined;
}
export default function DialogUploadFileFinalLog({ id, openDialog, setOpenDialog }: DialogUploadType) {
// ----------------------------------------------------------------------
// Files Diagnosa
const fileDiagnosaInput = useRef<HTMLInputElement>(null);
const [fileDiagnosas, setFileDiagnosas] = useState<any>([]);
const marginBottom2 = {
marginBottom: 2,
}
const reason = [
{ value: 'Wrong Setting', label: 'Wrong Setting' },
{ value: 'Hospital Request', label: 'Hospital Request' }
];
const [selectedReason, setSelectedReason] = useState({value:'-', label:''});
const [error, setError] = useState('');
const handleDiagnosaInputChange = (event:any) => {
if (event.target.files[0]) {
setFileDiagnosas([...fileDiagnosas, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeDiagnosaFiles = (filesState:any, index:any) => {
setFileDiagnosas(
filesState.filter((file:any, fileIndex:any) => {
return fileIndex != index;
})
);
};
// ----------------------------------------------------------------------
// Files Result Kondisi
const fileKondisiInput = useRef<HTMLInputElement>(null);
const [fileKondisis, setFileKondisis] = useState<any>([]);
const handleKondisiInputChange = (event:any) => {
if (event.target.files[0]) {
setFileKondisis([...fileKondisis, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeKondisiFiles = (filesState:any, index:any) => {
setFileKondisis(
filesState.filter((file:any, fileIndex:any) => {
return fileIndex != index;
})
);
};
// ----------------------------------------------------------------------
// Files Result Hasil Penunjang
const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState<any>([]);
const handleResultInputChange = (event:any) => {
if (event.target.files[0]) {
setFileHasilPenunjangs([...fileHasilPenunjangs, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeFiles = (filesState:any, index:any) => {
setFileHasilPenunjangs(
filesState.filter((file:any, fileIndex:any) => {
return fileIndex != index;
})
);
};
// --------------------------------------------------------------
// Submit Form
const [submitLoading, setSubmitLoading] = useState(false);
function submitRequestFinalLog() {
if(selectedReason.value != '-'){
setSubmitLoading(true);
const formData = makeFormData({
request_logs_id: id,
result_files: fileHasilPenunjangs,
diagnosa_files: fileDiagnosas,
kondisi_files: fileKondisis,
reason: selectedReason.value
});
axios
.post(`/customer-service/request/${id}/add_file`, formData)
.then((response) => {
enqueueSnackbar('Berhasil membuat data', { variant: 'success' });
setOpenDialog(false);
window.location.reload()
})
.catch(({ response }) => {
enqueueSnackbar('Something Went Wrong', { variant: 'error' });
})
.then(() => {
setSubmitLoading(false);
});
} else {
setError('Please select a reason')
}
}
const getContent = () => (
<Stack>
<Stack
divider={<Divider orientation="horizontal" flexItem />}
spacing={4}
sx={{ marginY: 2, marginBottom: 6 }}
>
{/* -------------------------------Upload Dokumen Hasil Penunjang------------------------------- */}
<Stack sx={{ marginTop: 2 }}>
{/* <Typography variant="body2">Hasil Lab, </Typography> */}
<Stack
divider={<Divider orientation="horizontal" flexItem />}
spacing={1}
sx={{ marginY: 2 }}
>
{fileHasilPenunjangs &&
fileHasilPenunjangs.map((file:any, index:any) => (
<Stack direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeFiles(fileHasilPenunjangs, index);
}}
style={{ cursor: 'pointer' }}
></Iconify>
</Stack>
))}
</Stack>
{/* { JSON.stringify(filesResult) } */}
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.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 Files
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileHasilPenunjangInput}
style={{ display: 'none' }}
multiple
onChange={handleResultInputChange}
accept="application/pdf,image/*"
/>
</ButtonBase>
<Typography variant="subtitle1" marginY={2}>Reason for Update*</Typography>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Autocomplete
options={reason}
getOptionLabel={(option) => option.label}
fullWidth
value={selectedReason}
onChange={(event, newValue) => {
setSelectedReason(newValue);
// Validasi jika newValue adalah null
if (!newValue) {
setError('Please select a reason');
} else {
setError('');
}
}}
renderInput={(params) => (
<TextField
{...params}
label="Reason for updates"
variant="outlined"
name='reason'
error={Boolean(error)} // Menampilkan error jika ada
helperText={error} // Menampilkan pesan kesalahan
/>
)}
/>
</Stack>
</Stack>
</Stack>
<LoadingButton
variant="contained"
sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
onClick={() => {
submitRequestFinalLog();
}}
loading={submitLoading}
>
Add
</LoadingButton>
</Stack>
)
return (
<MuiDialog
title={{name: "Add Files"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="md"
/>
);
}

407
frontend/dashboard/src/pages/ClaimRequests/Components/FormEdit.tsx
View File

@@ -5,7 +5,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
import { Controller, useForm } from 'react-hook-form';
import React, { useRef, useEffect, useMemo, useState } from 'react';
import axios from '../../../utils/axios';
import { FormProvider, RHFTextField } from '../../../components/hook-form';
import { FormProvider, RHFDatepicker, RHFTextField } from '../../../components/hook-form';
import { makeFormData } from '@/utils/jsonToFormData';
import {
@@ -31,6 +31,7 @@ import {
Divider,
ButtonBase,
Box,
DialogActions,
} from '@mui/material';
import Iconify from '../../../components/Iconify';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
@@ -39,7 +40,10 @@ import { fCurrency } from '../../../utils/formatNumber';
import MemberSelectDialog from '../../../components/dialogs/MemberSelectDialog';
import { Add, ArrowBackIosNew, DeleteOutline } from '@mui/icons-material';
import { ClaimRequest, Files } from '@/@types/claims';
import { fDateTimesecond } from '@/utils/formatTime';
import { fDateOnly, fDateTimesecond, fPostFormat } from '@/utils/formatTime';
import RHFDatePicker from '@/components/hook-form/RHFDatePickerV2';
import RHFDateTimePicker from '@/components/hook-form/v2/RHFDateTimePicker';
import MuiDialog from '@/components/MuiDialog';
interface FormValuesProps extends Partial<ClaimRequest> {
taxes: boolean;
@@ -57,7 +61,7 @@ export default function FormEdit({ isEdit, currentClaim }: Props) {
const { enqueueSnackbar } = useSnackbar();
const EditClaimSchema = Yup.object().shape({
organization_id: Yup.string().required('Code Provider is required'),
date: Yup.string().required('Date Submission is required'),
});
const defaultValues = useMemo(
@@ -73,6 +77,16 @@ export default function FormEdit({ isEdit, currentClaim }: Props) {
[currentClaim]
);
const [date, setDate] = useState(currentClaim?.submission_date)
const id = currentClaim?.id
useEffect(() => {
setDate(currentClaim?.submission_date)
}, [currentClaim]);
console.log(date);
useEffect(() => {
if (isEdit && currentClaim) {
reset(defaultValues);
@@ -80,9 +94,6 @@ export default function FormEdit({ isEdit, currentClaim }: Props) {
if (!isEdit) {
reset(defaultValues);
}
// setFileKondisis(currentClaim?.files_by_type?.claim_diagnosis);
// setFileDiagnosas(currentClaim?.files_by_type?.claim_diagnosis);
setFileHasilPenunjangCurrent(currentClaim?.files_by_type?.claim_result);
}, [isEdit, currentClaim]);
@@ -97,99 +108,25 @@ export default function FormEdit({ isEdit, currentClaim }: Props) {
control,
setValue,
getValues,
setError,
handleSubmit,
formState: { isSubmitting },
} = methods;
const values = watch();
const [isCheckingLimit, setIsCheckingLimit] = useState(false);
const [isEligible, setIsEligible] = useState(false);
const [memberBenefits, setMemberBenefits] = useState([]);
const [diagnosisOption, setDiagnosisOption] = useState([]);
const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
const [member, setMember] = useState({})
// ----------------------------------------------------------------------
// Files Result Kondisi
const fileKondisiInput = useRef<HTMLInputElement>(null);
const [fileKondisis, setFileKondisis] = useState<Files>([]);
const handleKondisiInputChange = (event) => {
if (event.target.files[0]) {
setFileKondisis([...fileKondisis, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeKondisiFiles = (filesState, index) => {
setFileKondisis(
filesState.filter((file, fileIndex) => {
return fileIndex != index;
})
);
};
// Files Result Diagnosa
const fileDiagnosaInput = useRef<HTMLInputElement>(null);
const [fileDiagnosas, setFileDiagnosas] = useState([]);
const handleDiagnosaInputChange = (event) => {
if (event.target.files[0]) {
setFileDiagnosas([...fileDiagnosas, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeDiagnosaFiles = (filesState, index) => {
setFileDiagnosas(
filesState.filter((file, fileIndex) => {
return fileIndex != index;
})
);
};
// Files Result Hasil Penunjang
const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState([]);
const [fileHasilPenunjangsCurrent, setFileHasilPenunjangCurrent] = useState([]);
const handleResultInputChange = (event) => {
if (event.target.files[0]) {
setFileHasilPenunjangs([...fileHasilPenunjangs, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeFiles = (filesState, index) => {
setFileHasilPenunjangs(
filesState.filter((file, fileIndex) => {
return fileIndex != index;
})
);
};
const onSubmit = async (data: FormValuesProps) => {
try {
// const formData = new FormData();
const formData = new FormData();
// formData.append('result_files', fileHasilPenunjangs);
// formData.append('diagnosa_files', fileDiagnosaInput);
// formData.append('kondisi_files', fileKondisiInput);
// formData.append('provider_code', data.organization_id);
// formData.append('_method', 'PUT');
const formData = makeFormData({
result_files: fileHasilPenunjangs,
diagnosa_files: fileDiagnosas,
kondisi_files: fileKondisis,
provider_code: data.organization_id,
_method: 'PUT'
});
const response = await axios.put(`/claim-requests/${data.id}`, formData);
// formData.append('date', fPostFormat(id));
// const response = await axios.post(`/claim-requests/${data.id}/update`, formData);
reset();
enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
navigate('/claim-requests');
@@ -205,6 +142,118 @@ export default function FormEdit({ isEdit, currentClaim }: Props) {
}
};
const handleApprove = () => {
if(selectedReason.value != '-'){
const formData = makeFormData({
date: fPostFormat(date),
reason: selectedReason.value,
});
const response = axios.post(`/claim-requests/${id}/update`, formData);
if (!response.error){
reset();
enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
navigate('/claim-requests');
} else {
enqueueSnackbar('Claim Request Updated Error!', { variant: 'error' });
}
} else {
setError('Please select a reason')
}
}
const [openDialog, setOpenDialog] = useState(false);
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const marginBottom2 = {
marginBottom: 2,
}
const handleCloseDialog = () => {
setOpenDialog(false);
}
const reason = [
{ value: 'Wrong Setting', label: 'Wrong Setting' },
{ value: 'Hospital Request', label: 'Hospital Request' }
];
const [selectedReason, setSelectedReason] = React.useState({value:'-', label:''});
const [error, setError] = useState('');
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to update this claim ?</Typography>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Code</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{currentClaim?.code}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{currentClaim?.member?.name}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Date of Submission</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{date ? fDateTimesecond(date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{currentClaim?.payment_type}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{currentClaim?.service_name || '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Code Provider</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{currentClaim?.organization?.code || '-'}</Typography>
</Stack>
</Card>
<Card sx={{padding:2, marginTop:2}} >
<Typography variant="subtitle1" marginY={2}>Reason for Update*</Typography>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Autocomplete
options={reason}
getOptionLabel={(option) => option.label}
fullWidth
value={selectedReason}
onChange={(event, newValue) => {
setSelectedReason(newValue);
// Validasi jika newValue adalah null
if (!newValue) {
setError('Please select a reason');
} else {
setError('');
}
}}
renderInput={(params) => (
<TextField
{...params}
label="Reason for updates"
variant="outlined"
name='reason'
error={Boolean(error)} // Menampilkan error jika ada
helperText={error} // Menampilkan pesan kesalahan
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Button color="primary" variant="contained" onClick={() => handleApprove()}>Approve</Button>
</DialogActions>
</Stack>
)
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
@@ -254,12 +303,18 @@ export default function FormEdit({ isEdit, currentClaim }: Props) {
<Grid item xs={3}>
<RHFTextField InputProps={{endAdornment: (
<InputAdornment position="end">
<CalendarTodayIcon />
</InputAdornment>
), }}
name="date" label="Date of Submission" disabled/>
<Controller
name="date"
control={control}
render={({ field }) => (
<RHFDateTimePicker
{...field}
label="Date of Submission"
value={field.value || null}
onChange={() => setDate(field.value)}
/>
)}
/>
</Grid>
<Grid item xs={3}>
<RHFTextField name="claim_method" label="Claim Method" disabled/>
@@ -268,161 +323,8 @@ export default function FormEdit({ isEdit, currentClaim }: Props) {
<RHFTextField name="service_type" label="Service Type*" disabled/>
</Grid>
<Grid item xs={3}>
<RHFTextField name="organization_id" label="Code Provider*"/>
<RHFTextField name="organization_id" label="Code Provider*" disabled/>
</Grid>
{/* -------------------------------Upload Dokumen Kondisi------------------------------- */}
<React.Fragment>
<Grid item xs={12}>
<Typography variant='h6'> Condition Document</Typography>
</Grid>
<Grid item xs={12}>
{fileKondisis &&
fileKondisis.map((file, index) => (
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeKondisiFiles(fileKondisis, index);
}}
></Iconify>
</Stack>
))}
</Grid>
<Grid item xs={12}>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileKondisiInput.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 File
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileKondisiInput}
style={{ display: 'none' }}
multiple
onChange={handleKondisiInputChange}
accept="application/pdf"
/>
</ButtonBase>
</Grid>
</React.Fragment>
{/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
<React.Fragment>
<Grid item xs={12}>
<Typography variant='h6'> Diagnosis Document</Typography>
</Grid>
<Grid item xs={12}>
{fileDiagnosas &&
fileDiagnosas.map((file, index) => (
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeDiagnosaFiles(fileDiagnosas, index);
}}
></Iconify>
</Stack>
))}
</Grid>
<Grid item xs={12}>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.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 Result
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileDiagnosaInput}
style={{ display: 'none' }}
multiple
onChange={handleDiagnosaInputChange}
accept="application/pdf"
/>
</ButtonBase>
</Grid>
</React.Fragment>
{/* -------------------------------Upload Result Hasil Penunjang------------------------------- */}
<React.Fragment>
<Grid item xs={12}>
<Typography variant='h6'> Supporting Result Document</Typography>
</Grid>
<Grid item xs={12}>
{fileHasilPenunjangs &&
fileHasilPenunjangs.map((file, index) => (
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeFiles(fileHasilPenunjangs, index);
}}
></Iconify>
</Stack>
))}
</Grid>
<Grid item xs={12}>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.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 Result
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileHasilPenunjangInput}
style={{ display: 'none' }}
multiple
onChange={handleResultInputChange}
accept="application/pdf"
/>
</ButtonBase>
</Grid>
</React.Fragment>
</Grid>
</Card>
<Grid container marginTop={3}>
@@ -440,17 +342,24 @@ export default function FormEdit({ isEdit, currentClaim }: Props) {
>
Cancel
</Button>
<LoadingButton
type="submit"
<Button
// type="submit"
variant="contained"
size="large"
loading={isSubmitting}
onClick={() => date ? setOpenDialog(true) : setOpenDialog(false)}
>
Update
</LoadingButton>
</Button>
</Stack>
</Grid>
</Grid>
<MuiDialog
title={{name: "Update Status"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="md"
/>
</FormProvider>
);
}

1
frontend/dashboard/src/pages/ClaimRequests/CreateUpdate.tsx
View File

@@ -33,7 +33,6 @@ export default function ClaimsCreateUpdate() {
useEffect(() => {
if (isEdit) {
axios.get('/claim-requests/' + id).then((res) => {
console.log('Yeet', res.data);
setCurrentClaim(res.data.data);
});

700
frontend/dashboard/src/pages/ClaimRequests/Detail.tsx
View File

@@ -1,5 +1,5 @@
// mui
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton, MenuItem } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
@@ -8,7 +8,7 @@ import useSettings from '../../hooks/useSettings';
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { useEffect, useState, useRef } from 'react';
import axios from '../../utils/axios';
// pages
// pages
import DetailTimeline from '../../pages/ClaimRequests/DetailTimeline';
import DetailStepper from '../../pages/ClaimRequests/DetailStepper';
import { format } from 'date-fns';
@@ -19,7 +19,7 @@ import RemoveIcon from '@mui/icons-material/Remove';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import Iconify from '@/components/Iconify';
import { fPostFormat } from '@/utils/formatTime';
import { fDate, fPostFormat } from '@/utils/formatTime';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import DownloadIcon from '@mui/icons-material/Download';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
@@ -28,279 +28,509 @@ import { fDateTimesecond } from '@/utils/formatTime';
import { makeFormData } from '@/utils/jsonToFormData';
import { enqueueSnackbar } from 'notistack';
import { DetailClaimRequest } from './Model/Types';
import { Delete, EditOutlined } from '@mui/icons-material';
import { fNumber } from '@/utils/formatNumber';
import palette from '@/theme/palette';
import MoreMenu from '@/components/MoreMenu';
import DialogUploadFileFinalLog from './Components/DialogUploadFileFinalLog';
import DialogDeleteFileLog from './Components/DialogDeleteFileLog';
// ----------------------------------------------------------------------
export default function Detail() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const code = queryParams.get('code');
const navigate = useNavigate();
const { themeStretch } = useSettings();
const [data, setData] = useState();
const [dataDialog, setDataDialog] = useState();
const [document, setDocument] = useState(null);
const [claimRequests, setClaimRequest] = useState<DetailClaimRequest>();
const { id } = useParams();
useEffect(() => {
axios
.get('/claim-requests/detail/'+id)
.get('claim-requests/detail/'+id)
.then((response) => {
setData(response.data);
setDataDialog(response.data.data.dialog_submits);
setDocument(response.data.data.documents);
setClaimRequest(response.data.data)
})
.catch((error) => {
console.error(error);
});
}, []);
const [isInvoiceVisible, setInvoiceVisibility] = useState(false);
const handleInvoice = () => {
setInvoiceVisibility(!isInvoiceVisible);
}
const currentDate = new Date();
const formattedCurrentDate = format(currentDate, 'dd MMM yyyy');
const [dateInvoice, setDateInvoice] = useState(currentDate);
const fileInvoiceInput = useRef<HTMLInputElement>(null);
const [fileInvoices, setFileInvoices] = useState([]);
const handleInvoiceInputChange = (event) => {
if (event.target.files[0]) {
setFileInvoices([...fileInvoices, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeInvoiceFiles = (filesState, index) => {
setFileInvoices(
filesState.filter((file, fileIndex) => {
return fileIndex != index;
})
);
};
const date = dateInvoice ? fPostFormat(dateInvoice, 'yyyy-MM-dd') : null;
}, [id]);
function toTitleCase(str: string | null) {
return str.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const style3 = {
color: '#919EAB',
width: '35%'
}
const marginBottom1 = {
marginBottom: 1,
}
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
const handleCloseDialogSubmit = () => {
setOpenDialogSubmit(false);
}
const handleSubmitData = () => {
// if(fileInvoices.length > 0)
// {
//submit data
axios
.post('claim-requests/'+id+'/approve')
.then((response) => {
enqueueSnackbar('Success Submit Claim Request', { variant: 'success' });
setOpenDialogSubmit(false);
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
//Upload file invoices
const formData = makeFormData({
date:date,
invoice_files: fileInvoices,
});
axios
.post('claim-requests/'+id+'/invoice-files', formData)
.then((response) => {
enqueueSnackbar(response.data.message ?? 'Success upload invoice', { variant: 'success' });
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
});
// }
// else
// {
// enqueueSnackbar('Please upload file invoice, before submit', { variant: 'warning' });
// }
const [approve, setApprove] = useState('');
setTimeout(() =>
{
window.location.reload();
}, 5000);
// Handle Delete File LOG
const [pathFile, setPathFile] = useState('')
const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
};
const check_invoice = document?.find((dataInvoice) => dataInvoice.type === 'claim-invoice');
// Handle Upload File LOG
const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
// Buat total data
const totalAmountIncurred = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
return accumulator + (item.amount_incurred || 0);
}, 0);
const totalAmountApprove = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
return accumulator + (item.amount_approved || 0);
}, 0);
const totalAmountNotApprove = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
return accumulator + (item.amount_not_approved || 0);
}, 0);
const totalExcessPaid = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
return accumulator + (item.excess_paid || 0);
}, 0);
return (
<Page title='Detail'>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Page title='Detail'>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{marginLeft:2}}>{(data && data.data) ? data.data.status.code : ''}</Typography>
{data ? (
<Stack direction="row" spacing={2} ml="auto">
<Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
<Typography variant="body2" fontWeight="bold">{(data && data.data) ? format(new Date(data.data.status.submission_date), "d MMM yyyy") : ''}</Typography>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{marginLeft:2}}>{(claimRequests && claimRequests.code ? claimRequests.code : '')}</Typography>
</Stack>
) : ''}
</Stack>
{data ? (
<Grid container spacing={2}>
{/* Detail */}
<Grid item xs={12} md={12}>
<DetailStepper data={data}/>
</Grid>
<Grid item xs={12} md={12}>
<Stack direction="row" alignItems="center">
<Typography variant="subtitle1">Format Claim</Typography>
<Button variant="outlined" color="primary" startIcon={< DownloadIcon/>} sx={{marginLeft: 'auto'}}>
<Typography variant="button" display="block">Import</Typography>
</Button>
</Stack>
</Grid>
{check_invoice ? (
<Grid item xs={12} md={12}>
<Stack direction="row" alignItems="center">
<Typography variant="subtitle1">Request Claim</Typography>
<Button variant="outlined" color="primary" startIcon={ isInvoiceVisible ? < RemoveIcon/> : < AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleInvoice()}>
<Typography variant="button" display="block">Invoice</Typography>
</Button>
</Stack>
</Grid>
) : ''}
<Grid item xs={12} md={12} sx={{display : isInvoiceVisible ? '' : 'none',}}>
<Card sx={{padding: 2}}>
<Stack direction="column" spacing={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Invoice Date"
value={dateInvoice}
onChange={(newValue) => {
setDateInvoice(newValue);
}}
inputFormat="dd MMM yyyy"
renderInput={(params) => <TextField sx={{width:'40%'}} {...params} defaultValue={formattedCurrentDate} required/>}
/>
</LocalizationProvider>
<Stack
divider={<Divider orientation="horizontal" flexItem />}
spacing={1}
sx={{ marginY: 2 }}
>
{fileInvoices &&
fileInvoices.map((file, index) => (
<Stack direction="row" justifyContent={'space-between'} key={index}>
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
<InsertDriveFileIcon />
<Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
</Stack>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeInvoiceFiles(fileInvoices, index);
}}
sx={{cursor: 'pointer'}}
></Iconify>
</Stack>
))}
</Stack>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileInvoiceInput.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">
Upload Invoice
<Card sx={{padding:2}} >
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant='subtitle1' sx={{ color: '#19BBBB', marginBottom: 4 }} gutterBottom>
Details
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileInvoiceInput}
style={{ display: 'none' }}
multiple
onChange={handleInvoiceInputChange}
accept="application/pdf"
/>
</ButtonBase>
</Grid>
</Grid>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Provider Name</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.provider}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.member_id}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.policy_number}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.name}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Date Of Birth</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.date_of_birth ? fDate(claimRequests?.date_of_birth) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Marital Status</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.marital_status}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.submission_date ? fDateTimesecond(claimRequests?.submission_date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>No KTP</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.no_identitas ? claimRequests?.no_identitas : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Keterangan</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.keterangan ? claimRequests?.keterangan : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Hak Kamar Pasien</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.hak_kamar_pasien ? claimRequests?.hak_kamar_pasien : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Penempatan Kamar</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.penempatan_kamar ? claimRequests?.penempatan_kamar : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style3} gutterBottom>Diagnosis</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>
{claimRequests?.diagnosis?.length > 0 ? (
<ul>
{claimRequests?.diagnosis.map((diagnosisItem, index) => (
<li key={index}>{diagnosisItem.code} - {diagnosisItem.name}</li>
// Replace 'name' with the property you want to display
))}
</ul>
) : (
<p>No diagnosis available.</p>
)}
</Typography>
</Stack>
</Card>
</Grid>
<Grid item xs={12} md={12}>
<DetailTimeline data={data}/>
{/* Service */}
<Grid item xs={12} md={12} marginTop={2}>
<Card sx={{padding:2}} >
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Service</Typography>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.service_type}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(claimRequests?.claim_method ?? '-')}</Typography>
</Stack>
</Card>
</Grid>
{/* Document */}
<Grid item xs={12} md={12}>
<Stack direction="row" padding={4}>
{dataDialog && dataDialog.status === 'requested' ? (
<>
<Button variant="outlined" sx={{color: '#212B36', marginLeft: 'auto', borderColor: '#919EAB52'}} >Cancel</Button>
<Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
</>
) : ''}
{/* Dialog Submits */}
<Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} fullWidth={true}>
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
<Stack direction="row" alignItems="center" justifyContent="space-between">
<Stack direction="row" alignItems='center' spacing={1}>
<Typography variant="h6">Confirmation</Typography>
</Stack>
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
<CloseIcon />
</IconButton>
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Document </Typography>
</Stack>
</DialogTitle>
<DialogContent>
{dataDialog ? (
<Stack spacing={2} padding={2}>
<Typography variant='body1'>Are you sure to submit this claim ?</Typography>
<Card sx={{padding:2}} >
<Stack direction='row' spacing={2}>
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
<Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.code}</Typography>
</Stack>
<Stack direction='row' spacing={2}>
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
<Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.name}</Typography>
</Stack>
<Stack direction='row' spacing={2}>
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Date Submission</Typography>
<Typography variant='subtitle2' sx={{width: '70%'}}>{fDateTimesecond(dataDialog.submission_date)}</Typography>
</Stack>
<Stack direction='row' spacing={2}>
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Claim Method</Typography>
<Typography variant='subtitle2' sx={{width: '70%'}}>Service Type</Typography>
</Stack>
<Stack direction='row' spacing={2}>
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Service Type</Typography>
<Typography variant='subtitle2' sx={{width: '70%'}}>
{dataDialog.service_code === 'IP' ? 'Inpatient' : 'Outpatient'}
</Typography>
</Stack>
</Card>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
setDialogUploadFileLog(true)
}} >
<Typography variant="button" display="block">File</Typography>
</Button>
</Stack>
</Stack>
{claimRequests?.files?.map((documentType, index) => (
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 2}} key={index}>
<Stack direction="column" spacing={2} >
<a
href={documentType.url}
style={{
cursor: 'pointer',
textDecoration: 'none',
color: '#19BBBB',
display: 'flex',
alignItems: 'center' // Menjadikan konten dalam satu garis vertikal
}}
target="_blank"
>
<InsertDriveFileIcon style={{ marginRight: '5px' }} />
<Typography variant="body1" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
</a>
</Stack>
) : ''}
</DialogContent>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
<Button sx={{backgroundColor: '#19BBBB'}} onClick={handleSubmitData} variant="contained">Submit</Button>
</DialogActions>
</Dialog>
</Stack>
<Stack direction="column" spacing={2}>
<IconButton onClick={() => {
setDialogDeleteFileLog(true)
setPathFile(documentType.path)
}} aria-label="delete" size="small" sx={{ marginLeft: 'auto' }}>
<Delete color='error' fontSize="small" />
</IconButton>
</Stack>
</Stack>
))}
<DialogDeleteFileLog
id={claimRequests?.request_log_id}
path={pathFile}
setOpenDialog={setDialogDeleteFileLog}
openDialog={dialogDeleteFIleLog}
/>
<DialogUploadFileFinalLog
id={claimRequests?.request_log_id}
setOpenDialog={setDialogUploadFileLog}
openDialog={dialogUploadFileLog}
/>
</Card>
</Grid>
{/* Benefit */}
<Grid item xs={12} md={12}>
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Benefit</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
// setDialogBenefit(true);
}} >
<Typography variant="button" display="block">Benefit</Typography>
</Button>
</Stack>
<Box sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '24px', py: '20px', marginBottom: '24px', borderRadius: '12px'}}>
{claimRequests?.benefit_data?.map((item, index) => (
<Grid container spacing={2}>
<Grid item xs={12}>
<Grid container >
<Grid item xs={6}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
{item.benefit?.description}
</Typography>
</Grid>
<Grid item xs={6} sx={{ display: 'flex', placeContent: 'end' }}>
<MoreMenu actions={
<>
<MenuItem onClick={() => {
// setDialogEditBenefit(true)
// setIdBenefitData(item.id)
// setBenefitConfigurationData(item)
}}
>
<EditOutlined />
Edit
</MenuItem>
<MenuItem onClick={() => {
// setIdBenefitData(item.id)
// setDialogDeleteBenefit(true)
}}
>
<Delete color='error'/>
Delete
</MenuItem>
</>
} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12} py={2}>
<Box sx={{ py: '8px', px: '12px', background: palette.light.grey[50012], borderRadius: '6px'}}>
<Grid container spacing={1}>
{/* Amount Incurred */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Incurred
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(item.amount_incurred)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Approved */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(item.amount_approved)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Not Approved */}
<Grid item xs={3}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Not Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(item.amount_not_approved)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Excess Paid* */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Excess Paid*
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(item.excess_paid)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Keterangan* */}
<Grid item xs={3}>
<Grid container>
<Grid item xs={12}>
<Typography variant="caption">
Keterangan*
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{item.keterangan}
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
))}
<hr />
<br />
{claimRequests?.benefit_data && claimRequests.benefit_data.length > 0 ? (
<Grid container spacing={2}>
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
Total Benefit
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Box sx={{ py: '8px', px: '12px', background: palette.light.grey[50012], borderRadius: '6px'}}>
<Grid container spacing={1}>
{/* Amount Incurred */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Incurred
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(totalAmountIncurred)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Approved */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(totalAmountApprove)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Not Approved */}
<Grid item xs={3}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Not Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(totalAmountNotApprove)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Excess Paid* */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Excess Paid
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(totalExcessPaid)}
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
)
: (
null
)}
</Box>
</Card>
{/* PR Buat pindahin ke componen */}
{/* <CardBenefit
requestLog={requestLog}
>
</CardBenefit> */}
{/* <DialogBenefit
requestLog={requestLog}
openDialog={openDialogBenefit}
setOpenDialog={setDialogBenefit}
/>
{/* Dialog Edit */}
{/* <DialogEditBenefit
id={idBenefitData}
data={BenefitConfigurationData}
openDialog={openDialogEditBenefit}
setOpenDialog={setDialogEditBenefit}
/> */}
{/* Dialog Delete */}
{/* <DialogDeleteBenfit
id={idBenefitData}
openDialog={openDialogDeleteBenefit}
setOpenDialog={setDialogDeleteBenefit}
/> */}
{/* Dialog Edit Detai; */}
{/* <DialogEditFinalLOG
setOpenDialog={setDialogDEditDetail}
requestLog={requestLog}
openDialog={openDialogEditDetail}
/> */}
</Grid>
</Grid>
) : ''}
</Container>
</Page>
);
</Page>
)
}

138
frontend/dashboard/src/pages/ClaimRequests/List.tsx
View File

@@ -19,6 +19,7 @@ import {
Chip,
TableHead,
Grid,
Autocomplete,
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -43,25 +44,59 @@ import { enqueueSnackbar } from 'notistack';
import { Divider } from '@mui/material';
import Iconify from '@/components/Iconify';
import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
import { fDateTimesecond } from '@/utils/formatTime';
import { fDateOnly, fDateTimesecond } from '@/utils/formatTime';
import { capitalizeFirstLetter } from '@/utils/formatString';
import Label from '@/components/Label';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import { Import } from '@/@types/claims';
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// import LoadingButton from '@/theme/overrides/LoadingButton';
export default function List() {
type ServiceCode = {
value: string,
label: string
}
const { themeColorPresets } = useSettings();
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState<Import>(null);
const [selectedOptions, setSelectedOptions] = useState<ServiceCode|undefined>([]); // State untuk nilai terpilih
const navigate = useNavigate()
const defaultValue = [
{
value: '-',
label: '-'
}
];
const [serviceCode, setServiceCode] = useState(defaultValue);
const handleOptionService = () => {
}
const handleFilter = (event: React.SyntheticEvent<Element, Event>, newValue: { value: string, label: string }[], name:string) => { //
const serviceCodeArray :string[] = [];
const codeArray :string[] = [];
const typeArray :string[] = [];
const planArray :string[] = [];
if (name == 'service_code'){
newValue.map(row => {
serviceCodeArray.push(row.value);
})
setSelectedOptions(newValue)
}
var entries = [...searchParams.entries(), ['service_code', serviceCodeArray ?? '']];
const filter = Object.fromEntries(entries);
loadDataTableData(filter);
}
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
@@ -79,16 +114,83 @@ export default function List() {
return (
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
placeholder='Search Code or Name...'
/>
<Grid container spacing={2} >
<Grid item md={5}>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
placeholder='Search Code or Name...'
/>
</Grid>
<Grid item md={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Start Date"
value={searchParams.get('start_date')}
inputFormat="dd/MM/yyyy"
onChange={(value) => {
try {
if (value && !!Date.parse(value)) {
const date:string = value ? fDateOnly(value) : '';
var entries = [...searchParams.entries(), ['start_date', date ?? '']];
const filter = Object.fromEntries(entries);
setSearchParams(filter);
loadDataTableData(filter);
}
} catch (e) {}
}}
renderInput={(params) => <TextField {...params} variant="outlined" />}
/>
</LocalizationProvider>
</Grid>
<Grid item md={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="End Date"
inputFormat="MM/dd/yyyy"
value={searchParams.get('end_date')}
onChange={(value) => {
try {
if (value && !!Date.parse(value)) {
const date = fDateOnly(value);
var entries = [...searchParams.entries(), ['end_date', date ?? '']];
const filter = Object.fromEntries(entries);
setSearchParams(filter);
loadDataTableData(filter);
}
} catch (e) {}
}}
renderInput={(params) => <TextField {...params} variant="outlined" />}
/>
</LocalizationProvider>
</Grid>
<Grid item md={3}>
<Autocomplete
id="combo-box-demo"
options={serviceCode}
multiple
limitTags={1}
value={selectedOptions}
onChange={
(event, newValue) => handleFilter(event, newValue, 'service_code')
}
fullWidth
disableCloseOnSelect
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField {...params} label="Service" variant="outlined" />
)}
/>
</Grid>
</Grid>
</form>
);
}
@@ -279,11 +381,21 @@ export default function List() {
);
const loadDataTableData = async (appliedFilter: any | null = null) => {
axios.get('service').then((response) => {
const formattedData = response.data.data.map(service => ({
value: service.code,
label: service.name
}));
setServiceCode(formattedData);
});
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/claim-requests', { params: filter });
// console.log(response.data);
console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
};

58
frontend/dashboard/src/pages/ClaimRequests/Model/Types.tsx
View File

@@ -23,3 +23,61 @@ export type ServiceType = {
code : string
name : string
}
export type DetailClaimRequest = {
id : number,
code : string,
member_id : string,
policy_number : string,
name : string,
date_of_birth : string,
gender : string,
marital_status : string,
submission_date : string,
service_type : string,
claim_method : string,
no_identitas : string,
keterangan : string,
hak_kamar_pasien : string,
penempatan_kamar : string,
provider : string,
status : string,
request_log_id : number,
benefit : Benefit[],
reason : string,
files : file[],
benefit_data : BenefitData[],
diagnosis : Diagnosis[],
}
export type Benefit = {
code: string,
description: string
}
export type BenefitData = {
amount_incurred : number,
amount_approved : number,
amount_not_approved : number,
excess_paid : number,
keterangan : string,
benefit : Benefit,
request_log_id : number,
benefit_name : string,
description : string,
id : number,
}
export type Diagnosis = {
id : number,
name : string,
code : string
}
export type file = {
original_name: string,
name: string,
path: string,
url: string,
}