367 lines
13 KiB
TypeScript
367 lines
13 KiB
TypeScript
import * as Yup from 'yup';
|
|
import { useSnackbar } from 'notistack';
|
|
import { useNavigate } from 'react-router-dom';
|
|
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, RHFDatepicker, RHFTextField } from '../../../components/hook-form';
|
|
|
|
import { makeFormData } from '@/utils/jsonToFormData';
|
|
import {
|
|
Autocomplete,
|
|
Button,
|
|
Grid,
|
|
Stack,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableRow,
|
|
TextField,
|
|
Typography,
|
|
useTheme,
|
|
List,
|
|
ListItem,
|
|
IconButton,
|
|
ListItemAvatar,
|
|
Avatar,
|
|
ListItemText,
|
|
Card,
|
|
InputAdornment,
|
|
Divider,
|
|
ButtonBase,
|
|
Box,
|
|
DialogActions,
|
|
} from '@mui/material';
|
|
import Iconify from '../../../components/Iconify';
|
|
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
|
|
import { LoadingButton } from '@mui/lab';
|
|
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 { 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;
|
|
inStock: boolean;
|
|
}
|
|
|
|
type Props = {
|
|
isEdit: boolean;
|
|
currentClaim?: ClaimRequest;
|
|
};
|
|
|
|
export default function FormEdit({ isEdit, currentClaim }: Props) {
|
|
const navigate = useNavigate();
|
|
|
|
const { enqueueSnackbar } = useSnackbar();
|
|
|
|
const EditClaimSchema = Yup.object().shape({
|
|
date: Yup.string().required('Date Submission is required'),
|
|
});
|
|
|
|
const defaultValues = useMemo(
|
|
() => ({
|
|
id: currentClaim?.id || '-',
|
|
code: currentClaim?.code || '-',
|
|
member_name: currentClaim?.name || '-',
|
|
date: currentClaim?.submission_date ? fDateTimesecond(currentClaim?.submission_date) : '-',
|
|
claim_method: currentClaim?.claim_method || '-',
|
|
service_type: currentClaim?.service_type || '-',
|
|
organization_id: currentClaim?.provider_code || '-',
|
|
}),
|
|
[currentClaim]
|
|
);
|
|
|
|
|
|
const [date, setDate] = useState(currentClaim?.submission_date ? fDateTimesecond(currentClaim?.submission_date) : null)
|
|
const id = currentClaim?.id
|
|
|
|
useEffect(() => {
|
|
setDate(currentClaim?.submission_date)
|
|
}, [currentClaim]);
|
|
|
|
useEffect(() => {
|
|
if (isEdit && currentClaim) {
|
|
reset(defaultValues);
|
|
}
|
|
if (!isEdit) {
|
|
reset(defaultValues);
|
|
}
|
|
}, [isEdit, currentClaim]);
|
|
|
|
|
|
const methods = useForm<FormValuesProps>({
|
|
resolver: yupResolver(EditClaimSchema),
|
|
defaultValues,
|
|
});
|
|
|
|
const {
|
|
reset,
|
|
watch,
|
|
control,
|
|
setValue,
|
|
getValues,
|
|
handleSubmit,
|
|
formState: { isSubmitting },
|
|
} = methods;
|
|
|
|
|
|
// ----------------------------------------------------------------------
|
|
const onSubmit = async (data: FormValuesProps) => {
|
|
try {
|
|
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');
|
|
// 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');
|
|
} catch (error: any) {
|
|
if (error && error.response.status === 422) {
|
|
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
|
// setError(key, { message: value[0] });
|
|
enqueueSnackbar('Failed Processing Request', { variant: 'error' });
|
|
}
|
|
} else {
|
|
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
|
}
|
|
}
|
|
};
|
|
|
|
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?.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?.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>{currentClaim?.service_type || '-'}</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?.provider_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)}>
|
|
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center'}}>
|
|
<IconButton size='large' color='inherit' onClick={() => navigate(`/claim-requests`)} >
|
|
<ArrowBackIosNew/>
|
|
</IconButton>
|
|
|
|
<Typography variant="h5" sx={{ marginLeft: '24px' }}>
|
|
{'Edit Claim Requests'}
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Card sx={{paddingX:2, paddingY:2}}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={5}>
|
|
<Typography variant="subtitle1">Code*</Typography>
|
|
</Grid>
|
|
<Grid item xs={7}>
|
|
<Typography variant="subtitle1">Name*</Typography>
|
|
</Grid>
|
|
<Grid item xs={5}>
|
|
<RHFTextField name="code" label="Code" disabled/>
|
|
</Grid>
|
|
<Grid item xs={7}>
|
|
<RHFTextField name="member_name" label="Name" disabled/>
|
|
</Grid>
|
|
{/* <input type="hidden" name="id"/> */}
|
|
|
|
|
|
<Grid item xs={12}></Grid>
|
|
|
|
<Grid item xs={3}>
|
|
<Typography variant="subtitle1">Date of Submission*</Typography>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<Typography variant="subtitle1">Claim Method*</Typography>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<Typography variant="subtitle1">Service Type*</Typography>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<Typography variant="subtitle1">Code Provider*</Typography>
|
|
</Grid>
|
|
|
|
|
|
<Grid item xs={3}>
|
|
<Controller
|
|
name="date"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<RHFDateTimePicker
|
|
{...field}
|
|
label="Date of Submission"
|
|
value={field.value}
|
|
onChange={() =>
|
|
setDate(field.value)
|
|
}
|
|
dateFormat='dd MMM yyyy HH:mm:ss'
|
|
/>
|
|
)}
|
|
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<RHFTextField name="claim_method" label="Claim Method" disabled/>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<RHFTextField name="service_type" label="Service Type*" disabled/>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<RHFTextField name="organization_id" label="Code Provider*" disabled/>
|
|
</Grid>
|
|
</Grid>
|
|
</Card>
|
|
<Grid container marginTop={3}>
|
|
<Grid item xs={12} md={12} >
|
|
<Stack direction="row" alignItems="center" justifyContent="flex-end">
|
|
<Button
|
|
sx={{
|
|
margin: 1
|
|
}}
|
|
type="submit"
|
|
variant="contained"
|
|
size="large"
|
|
color='inherit'
|
|
onClick={() => navigate(`/claim-requests`)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
// type="submit"
|
|
variant="contained"
|
|
size="large"
|
|
onClick={() => date ? setOpenDialog(true) : setOpenDialog(false)}
|
|
>
|
|
Update
|
|
</Button>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
<MuiDialog
|
|
title={{name: "Update Status"}}
|
|
openDialog={openDialog}
|
|
setOpenDialog={setOpenDialog}
|
|
content={getContent()}
|
|
maxWidth="md"
|
|
/>
|
|
</FormProvider>
|
|
);
|
|
}
|