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

update final log

Browse Source
This commit is contained in:
Tb Fajri
2023-12-12 14:35:12 +07:00
parent 91b7a10f86
commit e76c480ce9
59 changed files with 5524 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogBenefit.tsx Normal file
View File

@@ -0,0 +1,343 @@
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import MuiDialog from "@/components/MuiDialog";
import { Checkbox, Typography, FormControl, Card, Grid, DialogActions } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
import { BenefitConfigurationListType } from "../Model/Types";
import { InputLabel, Select, FormHelperText } from "@mui/material";
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Button from '@mui/material/Button';
import { fNumber } from "@/utils/formatNumber";
import palette from "@/theme/palette";
import { Box } from "@mui/material";
import { FormProvider, RHFTextField } from "@/components/hook-form";
import RHFTextFieldMoney from '@/components/hook-form/v2/RHFTextFieldMoney';
import { useFieldArray, useForm } from 'react-hook-form';
import { LoadingButton } from '@mui/lab';
import { postAddBenefit } from '../Model/Functions';
import { useNavigate } from 'react-router';
import { description } from '@/_mock/text';
type DialogConfirmationType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
requestLog: DetailFinalLogType|undefined;
}
type BenefitSelected = {
id: number,
description: string,
benefit_id: number,
}
export default function DialogBenefit({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
// Add Benefit
const [addBenefit, setAddBenefit] = useState(false)
const navigate = useNavigate()
//Benefit Name
const [valBenefitNames, setValBenefitNames] = useState([]);
const [valBenefitNameError, setValBenefitNameError] = useState('');
const benefitNameData = requestLog?.benefit;
const [benefitSelected, setBenefitSelected] = useState<BenefitSelected[]>([]);
const handleConditionChangeService = (event) => {
const selectedItem = event.target.value;
if (valBenefitNames.includes(selectedItem)) {
// Item is already selected, remove it
setValBenefitNames(valBenefitNames.filter(item => item !== selectedItem));
} else {
// Item is not selected, add it
setValBenefitNames([...valBenefitNames, selectedItem]);
}
};
useEffect(() => {
const datax: any[] = []
valBenefitNames.map((data) => {
benefitNameData?.map((row) => {
if(row.id == data) {
datax.push(row)
}
})
})
// for data information
let temp = datax.map((item, indx) => {
return {
benefit_id: item.id,
description: item.description,
request_log_id: requestLog?.id,
amount_incurred: 0,
amount_approved: 0,
amount_not_approved: 0,
excess_paid: 0,
keterangan: '',
}
})
reset({benefit_data: temp})
setBenefitSelected(datax)
}, [valBenefitNames])
const handleCloseDialogBenefit = () => {
// setOpenDialog(false);
setAddBenefit(false)
setBenefitSelected([])
setValBenefitNames([])
}
const handleAddDialogBenefit = () => {
setAddBenefit(true)
}
const defaultValues: BenefitConfigurationListType = {
request_log_id: requestLog?.id,
benefit_name: '',
amount_incurred: 0,
amount_approved: 0,
amount_not_approved: 0,
excess_paid: 0,
};
const validationSchema = Yup.object().shape({
benefit_data: Yup.array().of(
Yup.object().shape({
amount_incurred : Yup.number().typeError('').required(''),
amount_approved : Yup.number().typeError('').required(''),
amount_not_approved : Yup.number().typeError('').required(''),
excess_paid : Yup.number().typeError('').required(''),
})
)
})
const methods = useForm<any>({
resolver: yupResolver(validationSchema),
defaultValues
});
const {fields, append, remove} = useFieldArray({name: 'benefit_data',control: methods.control})
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
// Submit Form
// =====================================
const submitHandler = async (data: BenefitConfigurationListType) => {
const response = await postAddBenefit(data);
if (response == true) {
reset();
// navigate('custormer-service/final-log/detail/'+requestLog?.id);
window.location.reload()
}
}
const getContent = () => !addBenefit ? (
<Stack spacing={2} sx={{marginTop: 2, padding: 2}} direction="column">
<Stack direction="row" spacing={2}>
<Stack spacing={2} sx={{width:'100%'}}>
<Typography variant='subtitle1'>Benefit Name*</Typography>
<FormControl>
<InputLabel htmlFor="benefit_name">
Benefit Name
</InputLabel>
<Select
id="benefit_name"
value={valBenefitNames}
fullWidth
label="Benefit Name"
error={!!valBenefitNameError}
onChange={(e) => {
setValBenefitNameError(!valBenefitNames ? 'At least one item must be selected' : '');
}}
renderValue={(selected) => selected.map(value => {
const selectedOption = benefitNameData?.find(option => String(option.id) === value);
return selectedOption ? selectedOption.description : '';
}).join(', ')}
>
{benefitNameData?.map((item, index) => (
<FormGroup key={index} sx={{ marginLeft: 2 }}>
<FormControlLabel
control={
<Checkbox
checked={valBenefitNames.includes(String(item.id))}
onChange={handleConditionChangeService}
value={String(item.id)}
/>
}
label={item.description}
/>
</FormGroup>
))}
</Select>
<FormHelperText style={{ color: 'red' }}>{valBenefitNameError}</FormHelperText>
</FormControl>
</Stack>
</Stack>
</Stack>
) :
(
<FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
<Stack paddingX={2} paddingY={4}>
{/* <Card sx={{padding:2}}> */}
{fields?.map((item, index) =>
(
<Box sx={{ marginTop:'10px', marginBottom:'10px', py: '8px', px: '12px', border:'1px solid #919EAB52', borderRadius: '6px'}}>
<Grid key={item.id} container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" sx={{ fontWeight: 'bold'}}>
{item.description}
</Typography>
</Grid>
<Grid item xs={2.5}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Amount Incurred*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
key={item.id}
id='amount_incurred'
name={`benefit_data.${index}.amount_incurred`}
placeholder='Amount Incurred'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Amount Approved*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
// onChange={() => append({amount_approved: ''}) }
id='amount_approved'
key={item.id}
name={`benefit_data.${index}.amount_approved`}
placeholder='Amount Approved'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Amount Not Approved*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
// onChange={() => append({amount_not_approved: ''}) }
id='amount_not_approved'
key={item.id}
name={`benefit_data.${index}.amount_not_approved`}
placeholder='Amount Not Approved'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Excess Paid*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
// onChange={() => append({excess_paid: ''}) }
id='excess_paid'
key={item.id}
name={`benefit_data.${index}.excess_paid`}
placeholder='Excess Paid'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Keterangan*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField
// onChange={() => append({keterangan: ''}) }
id='keterangan'
key={item.id}
name={`benefit_data.${index}.keterangan`}
placeholder='Keterangan'
required
/>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
))}
{/* </Card> */}
<DialogActions>
<Stack direction="row" sx={{marginTop:3}} alignItems="center" justifyContent="space-between" spacing={2}>
<Button variant="outlined" onClick={handleCloseDialogBenefit}><Typography>Cancel</Typography></Button>
<LoadingButton disabled={!addBenefit} type="submit" variant="contained" loading={isSubmitting}>
Save
</LoadingButton>
</Stack>
</DialogActions>
</Stack>
</FormProvider>
);
const getAction = () => !addBenefit ? (
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
<Button variant="outlined" onClick={handleCloseDialogBenefit}><Typography>Cancel</Typography></Button>
<Button variant="contained" onClick={handleAddDialogBenefit}><Typography>Add</Typography></Button>
</Stack>
) : null;
return (
<MuiDialog
title={{name: "Add Benefit"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
action={getAction()}
maxWidth="xl"
/>
);
}

109
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation.tsx Normal file
View File

@@ -0,0 +1,109 @@
import MuiDialog from "@/components/MuiDialog";
import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
type DialogConfirmationType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
approve: string;
requestLog: DetailFinalLogType|undefined;
}
export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
const navigate = useNavigate();
const handleSubmit = () => {
const formData = {
status : approve
}
axios
.put(`customer-service/request/${requestLog?.id}`, formData)
.then((response) => {
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
setOpenDialog(false);
navigate('/custormer-service/request')
})
.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 handleCloseDialog = () => {
setOpenDialog(false);
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this request ?</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>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
{approve == 'approved' ? (
<Button color="primary" variant="contained" onClick={handleSubmit}>Approve</Button>
) : (
<Button color="error" variant="contained" onClick={handleSubmit}>Decline</Button>
) }
</DialogActions>
</Stack>
);
return (
<MuiDialog
title={{name: "Confirmation"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}

69
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDelete.tsx Normal file
View File

@@ -0,0 +1,69 @@
import MuiDialog from "@/components/MuiDialog";
import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
type DialogDeleteType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
id: number|undefined;
}
export default function DialogDelete({id, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
const handleSubmit = () => {
axios
.delete(`customer-service/request/benefit_data/${id}`)
.then((response) => {
enqueueSnackbar('Benefit Data has Deleted', { variant: 'success' });
setOpenDialog(false);
window.location.reload()
})
.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 handleCloseDialog = () => {
setOpenDialog(false);
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to delete this detail benefit ?</Typography>
<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 Benefit"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xs"
/>
);
}

220
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditBenefit.tsx Normal file
View File

@@ -0,0 +1,220 @@
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import MuiDialog from "@/components/MuiDialog";
import { Box, 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 { DetailFinalLogType } from "../Model/Types";
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
import { BenefitConfigurationListType } from "../Model/Types";
import { postEditBenefit } from "../Model/Functions";
import { useForm } from 'react-hook-form';
import { FormProvider, RHFTextField } from "@/components/hook-form";
import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
import { LoadingButton } from "@mui/lab";
type DialogDeleteType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
data: BenefitConfigurationListType|undefined;
id: number;
}
export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
const handleCloseDialog = () => {
setOpenDialog(false);
}
// setup form
// ====================================
const defaultValues: BenefitConfigurationListType = {
request_log_id: 0,
benefit_name: '',
amount_incurred: 0,
amount_approved: 0,
amount_not_approved: 0,
excess_paid: 0,
keterangan: '-',
description: '-'
};
const validationSchema = Yup.object().shape({
amount_incurred : Yup.string().typeError('').required(''),
amount_approved : Yup.string().typeError('').required(''),
amount_not_approved : Yup.string().typeError('').required(''),
excess_paid : Yup.string().typeError('').required(''),
});
const methods = useForm<any>({
resolver: yupResolver(validationSchema),
defaultValues
});
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
// Submit Form
// =====================================
const submitHandler = async (data: BenefitConfigurationListType) => {
const response = await postEditBenefit(id, data);
if (response == true) {
reset();
// navigate('custormer-service/final-log/detail/'+requestLog?.id);
window.location.reload()
}
}
// Set Value Form
// =====================================
useEffect(() => {
setValue('amount_incurred', data?.amount_incurred)
setValue('amount_approved', data?.amount_approved)
setValue('amount_not_approved', data?.amount_not_approved)
setValue('excess_paid', data?.excess_paid)
setValue('keterangan', data?.keterangan)
}, [data])
const getContent = () => (
<FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
<Stack paddingX={2} paddingY={4}>
{/* <Card sx={{padding:2}}> */}
<Box sx={{ marginTop:'10px', marginBottom:'10px', py: '8px', px: '12px', border:'1px solid #919EAB52', borderRadius: '6px'}}>
<Grid key={id} container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" sx={{ fontWeight: 'bold'}}>
{data?.benefit?.description}
</Typography>
</Grid>
<Grid item xs={2.5}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Amount Incurred*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
key={id}
id='amount_incurred'
name={`amount_incurred`}
placeholder='Amount Incurred'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Amount Approved*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
// onChange={() => append({amount_approved: ''}) }
id='amount_approved'
key={id}
name={`amount_approved`}
placeholder='Amount Approved'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Amount Not Approved*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
// onChange={() => append({amount_not_approved: ''}) }
id='amount_not_approved'
key={id}
name={`amount_not_approved`}
placeholder='Amount Not Approved'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Excess Paid*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
// onChange={() => append({excess_paid: ''}) }
id='excess_paid'
key={id}
name={`excess_paid`}
placeholder='Excess Paid'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Keterangan*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField
// onChange={() => append({keterangan: ''}) }
id='keterangan'
key={id}
name={`keterangan`}
placeholder='Keterangan'
required
/>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
{/* </Card> */}
<DialogActions>
<Stack direction="row" sx={{marginTop:3}} alignItems="center" justifyContent="space-between" spacing={2}>
<Button variant="outlined" onClick={handleCloseDialog}><Typography>Cancel</Typography></Button>
<LoadingButton type="submit" variant="contained" loading={isSubmitting}>
Save
</LoadingButton>
</Stack>
</DialogActions>
</Stack>
</FormProvider>
);
return (
<MuiDialog
title={{name: "Edit Detail Benefit"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}

155
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogHospitalCare.tsx Normal file
View File

@@ -0,0 +1,155 @@
import MuiDialog from "@/components/MuiDialog";
import { Button, Autocomplete, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import { useFieldArray, useForm } from 'react-hook-form';
import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
import { LoadingButton } from '@mui/lab';
import AddIcon from '@mui/icons-material/Add';
type DialogConfirmationType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
requestLog: DetailFinalLogType|undefined;
}
export default function DialogHospitalCare({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
interface FormValuesProps extends Partial<DetailFinalLogType> {
taxes: boolean;
inStock: boolean;
}
const onSubmit = async (data: DetailFinalLogType) => {
reset();
}
const methods = useForm<DetailFinalLogType>();
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
resetField,
formState: { isSubmitting },
} = methods;
const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})
const getContent = () => (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
<Grid container spacing={2}>
{/* Location */}
<Grid item xs={12}>
<Typography variant='subtitle1' marginBottom={1}>Location*</Typography>
<RHFTextField name="location" label="Location" required placeholder='Location' />
</Grid>
{/* Dokter */}
<Grid item xs={12}>
<Typography variant='subtitle1' marginBottom={1}>Doctor*</Typography>
<RHFTextField name="doctor" label="Doctor" required placeholder='Doctor' />
</Grid>
<Grid item xs={12}>
<Typography variant='subtitle1' marginBottom={1}>Medical Record Number*</Typography>
<RHFTextField name="medical_record_number" label="Medical Record Number" required placeholder='Medical Record Number' />
</Grid>
<Grid item xs={12}>
<Typography variant='subtitle1' marginBottom={1}>Symptoms*</Typography>
<RHFTextField name="symptoms" label="Symptoms" placeholder='Symptoms' required/>
</Grid>
<Grid item xs={12}>
<Typography variant='subtitle1' marginBottom={1}>Sign*</Typography>
<RHFTextField name="sign" label="Sign" placeholder='Sign' required />
</Grid>
<Grid item xs={10.8}>
<Typography variant='subtitle1'>Diagnosis*</Typography>
</Grid>
<Grid item xs={1} justifyContent={'flex-end'}>
{/* <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddSecondaryDiagnosis()}> */}
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => append({value: {name: "", value: 0}})}>
<Typography variant="button" display="block">Diagnosis</Typography>
</Button>
</Grid>
<Grid item xs={12}>
<RHFTextField name="Diagnosis" label="Diagnosis" placeholder='Diagnosis' required />
</Grid>
<Grid item xs={10.7}>
<Typography variant='subtitle1'>Examination and Result*</Typography>
</Grid>
<Grid item xs={1} justifyContent={'flex-end'}>
{/* <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddSecondaryDiagnosis()}> */}
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => append({value: {name: "", value: 0}})}>
<Typography variant="button" display="block">Examination</Typography>
</Button>
</Grid>
<Grid item xs={6}>
<RHFTextField name="examination" label="Examination" placeholder='Examination' required />
</Grid>
<Grid item xs={6}>
<RHFTextField name="result" label="Result" placeholder='Result' required />
</Grid>
<Grid item xs={12}>
<Typography variant='subtitle1' marginBottom={1}>Invoice*</Typography>
<RHFTextField name="invoice" label="Invoice" placeholder='Invoice' required/>
</Grid>
</Grid>
</Stack>
<Stack direction="row" spacing={2}>
<Grid container item xs={12} md={12} justifyContent="flex-end">
<Button variant="outlined" color='primary' >Cancel</Button>
<LoadingButton
type="submit"
variant="contained"
size="medium"
loading={isSubmitting}
sx={{marginLeft:2}}
>
<Typography variant="subtitle2"> Save</Typography>
</LoadingButton>
</Grid>
</Stack>
</FormProvider>
);
return (
<MuiDialog
title={{name: "Add History of Hospital Care"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}

160
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogMedicine.tsx Normal file
View File

@@ -0,0 +1,160 @@
import MuiDialog from "@/components/MuiDialog";
import { Button, Autocomplete, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import { useFieldArray, useForm } from 'react-hook-form';
import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
import { LoadingButton } from '@mui/lab';
import AddIcon from '@mui/icons-material/Add';
import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
type DialogConfirmationType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
requestLog: DetailFinalLogType|undefined;
}
export default function DialogHMedicine({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
interface FormValuesProps extends Partial<DetailFinalLogType> {
taxes: boolean;
inStock: boolean;
}
const onSubmit = async (data: DetailFinalLogType) => {
reset();
}
const handleCloseDialogMedicine = () => {
setOpenDialog(false)
setMedicines([])
}
const [medicines, setMedicines] = useState([]);
const addMedicine = () => {
setMedicines((prevMedicines) => [...prevMedicines, { medicine: '', price: '' }]);
};
const handleDelete = (index) => {
// Update the medicines state to remove the medicine at the given index
setMedicines((prevMeds) => prevMeds.filter((med, medIndex) => medIndex !== index));
};
const removeMedicene = (i:number) => {
const index = medicines.indexOf(i);
if (index > -1) { // only splice array when item is found
medicines.splice(index, 1); // 2nd parameter means remove one item only
}
}
const methods = useForm<DetailFinalLogType>();
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
resetField,
formState: { isSubmitting },
} = methods;
const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})
const getContent = () => (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
<Grid container spacing={2}>
{/* Medicine */}
<Grid item xs={12}>
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' gutterBottom>Medicine*</Typography>
<Button color="inherit" variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={addMedicine}>
<Typography variant="button" display="block">Medicine</Typography>
</Button>
</Stack>
</Grid>
{/* Listing */}
<Grid item xs={6}>
<RHFTextField
name={`medicine[0].name`}
label="Medicine"
required
placeholder="Medicine"
/>
</Grid>
<Grid item xs={6}>
<RHFTextFieldMoney
name={`medicine[0].price`}
label="Price"
required
placeholder="Price"
/>
</Grid>
{medicines.map((medicine, index) => (
<React.Fragment key={index+1}>
<Grid item xs={6}>
<RHFTextField
name={`medicine[${index+1}].name`}
label="Medicine"
required
placeholder="Medicine"
/>
</Grid>
<Grid item xs={6}>
<RHFTextFieldMoney
name={`medicine[${index+1}].price`}
label="Price"
required
placeholder="Price"
/>
</Grid>
{/* <Grid item xs={1}>
<Button variant="contained" color="error" onClick={() => handleDelete(index)}>
Delete
</Button>
</Grid> */}
</React.Fragment>
))}
</Grid>
</Stack>
</FormProvider>
);
const getAction = () => (
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
<Button color="inherit" variant="outlined" onClick={handleCloseDialogMedicine}><Typography>Cancel</Typography></Button>
<Button variant="contained"><Typography>Add</Typography></Button>
</Stack>
);
return (
<MuiDialog
title={{name: "Medicine"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
action={getAction()}
content={getContent()}
maxWidth="xl"
/>
);
}

611
frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
View File

@@ -1,305 +1,412 @@
// mui
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
import {
Container,
Grid,
Stack,
Typography,
Card,
Dialog,
TableRow,
Tab,
TableCell,
Collapse,
AccordionSummary,
AccordionDetails,
} from '@mui/material';
// components
import Page from '../../components/Page';
import Page from '../../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
import useSettings from '../../../hooks/useSettings';
// react
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { useEffect, useState, useRef } from 'react';
import axios from '../../utils/axios';
import { useEffect, useState, useRef, useMemo } from 'react';
import axios from '../../../utils/axios';
// pages
import DetailTimeline from '../../pages/ClaimRequests/DetailTimeline';
import DetailStepper from '../../pages/ClaimRequests/DetailStepper';
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import Button from '@mui/material/Button';
import { DetailFinalLogType } from './Model/Types';
import { fDate, fDateTimesecond } from '@/utils/formatTime';
import { Button } from '@mui/material';
import DialogConfirmation from '../FinalLog/Components/DialogConfirmation';
import Label from '@/components/Label';
import { Box } from '@mui/system';
import { Accordion } from '@mui/material';
import { Delete, EditOutlined, ExpandMore } from '@mui/icons-material';
import {BenefitData } from '../FinalLog/Model/Types'
import AddIcon from '@mui/icons-material/Add';
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 InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import DownloadIcon from '@mui/icons-material/Download';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { fDateTimesecond } from '@/utils/formatTime';
import { makeFormData } from '@/utils/jsonToFormData';
import { enqueueSnackbar } from 'notistack';
// Import Card Detail Final LOG
import CardDetail from '../Components/CardDetail';
import CardService from '../Components/CardService';
import CardExclusion from '../Components/CardExclusion';
// Import Dialog
import DialogHospitalCare from './Components/DialogHospitalCare';
import DialogBenefit from './Components/DialogBenefit';
import DialogMedicine from './Components/DialogMedicine';
import DetailBenefit from '../Components/DetailBenefit';
import DialogEditBenefit from './Components/DialogEditBenefit';
import MoreMenu from '@/components/MoreMenu';
import { MenuItem } from '@mui/material';
import { fNumber } from '@/utils/formatNumber';
import palette from '@/theme/palette';
import DialogDelete from './Components/DialogDelete';
// ----------------------------------------------------------------------
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 [requestLog, setRequestLog] = useState<DetailFinalLogType>();
const { id } = useParams();
useEffect(() => {
axios
.get('/claim-requests/detail/'+id)
.get('customer-service/request/'+id)
.then((response) => {
setData(response.data);
setDataDialog(response.data.data.dialog_submits);
setDocument(response.data.data.documents);
setRequestLog(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]);
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const marginBottom2 = {
marginBottom: 2,
}
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 [openDialogHospital, setDialogHospital] = useState(false);
const [openDialogBenefit, setDialogBenefit] = useState(false);
const [openDialogMedicine, setDialogMedicine] = useState(false);
setTimeout(() =>
{
window.location.reload();
}, 5000);
// Handel Delete Detail Benefit
const [idBenefitData, setIdBenefitData] = useState<number>();
const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
};
const check_invoice = document?.find((dataInvoice) => dataInvoice.type === 'claim-invoice');
const [approve, setApprove] = useState('')
// Handle Edit Detail Benefit
const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
return (
<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>
<Typography variant="h5" sx={{marginLeft:2}}>{(requestLog && requestLog.code ? requestLog.code : '')}</Typography>
</Stack>
) : ''}
</Stack>
{data ? (
<Grid container spacing={2}>
{/* Detail */}
<Grid item xs={12} md={12}>
<DetailStepper data={data}/>
<CardDetail
requestLog={requestLog}
>
</CardDetail>
</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>
{/* Service */}
<Grid item xs={12} md={12} marginTop={2}>
<CardService
requestLog={requestLog}
isFinalLog={true}
>
</CardService>
</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>
{/* Exclusion */}
<Grid item xs={12} md={12} marginTop={2}>
<CardExclusion
requestLog={requestLog}
>
</CardExclusion>
</Grid>
{/* Hospital Care */}
{/* <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>History of Hospital Care</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
setDialogHospital(true);
}} >
<Typography variant="button" display="block">History</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>
</Card>
<DialogHospitalCare
requestLog={requestLog}
openDialog={openDialogHospital}
setOpenDialog={setDialogHospital}
>
</DialogHospitalCare>
</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>
{requestLog?.benefit_data?.map((item, index) => (
<Box key={index} sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '24px', py: '20px', marginBottom: '24px', borderRadius: '12px'}}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Grid container spacing={2}>
<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}>
<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>
</Box>
))}
</Card>
<DialogBenefit
requestLog={requestLog}
openDialog={openDialogBenefit}
setOpenDialog={setDialogBenefit}
/>
{/* Dialog Edit */}
<DialogEditBenefit
id={idBenefitData}
data={BenefitConfigurationData}
openDialog={openDialogEditBenefit}
setOpenDialog={setDialogEditBenefit}
>
</DialogEditBenefit>
{/* Dialog Delete */}
<DialogDelete
id={idBenefitData}
openDialog={openDialogDeleteBenefit}
setOpenDialog={setDialogDeleteBenefit}
/>
</Grid>
{/* Medicine */}
<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>Medicine</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
setDialogMedicine(true)
}} >
<Typography variant="button" display="block">Medicine</Typography>
</Button>
</Stack>
</Card>
<DialogMedicine
requestLog={requestLog}
openDialog={openDialogMedicine}
setOpenDialog={setDialogMedicine}
/>
</Grid>
{/* File */}
<Grid item xs={12} md={12}>
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files History</Typography>
{requestLog?.files?.map((documentType, index) => (
<Stack direction="column" spacing={2} key={index}>
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
<a
href={documentType.url}
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
target="_blank"
>
<Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
</a>
</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
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileInvoiceInput}
style={{ display: 'none' }}
multiple
onChange={handleInvoiceInputChange}
accept="application/pdf"
/>
</ButtonBase>
</Stack>
))}
</Stack>
</Stack>
</Card>
</Grid>
<Grid item xs={12} md={12}>
<DetailTimeline data={data}/>
</Grid>
<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>
</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>
) : ''}
</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>
{requestLog?.status_final_log == 'requested' ? (
<Grid item xs={12} md={12}>
<Stack direction="row" padding={4} sx={{ justifyContent: 'space-between' }}>
<>
<div>
<Button
variant="outlined"
sx={{ color: '#FF4842', borderColor: '#FF4842' }}
onClick={() => {
setOpenDialogSubmit(true);
setApprove('declined');
}}
>
Decline
</Button>
</div>
<div>
<Button
variant="contained"
onClick={() => {
setOpenDialogSubmit(true);
setApprove('approved');
}}
>
Approve
</Button>
</div>
</>
<DialogConfirmation
setOpenDialog={setOpenDialogSubmit}
requestLog={requestLog}
openDialog={openDialogSubmit}
approve={approve}
></DialogConfirmation>
</Stack>
</Grid>
) : null}
</Grid>
) : ''}
</Container>
</Page>
);

37
frontend/dashboard/src/pages/CustomerService/FinalLog/List.tsx
View File

@@ -48,6 +48,8 @@ import { capitalizeFirstLetter } from '@/utils/formatString';
import Label from '@/components/Label';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import { Import } from '@/@types/claims';
import { FinalLogType } from '../FinalLog/Model/Types';
// import LoadingButton from '@/theme/overrides/LoadingButton';
export default function List() {
@@ -217,7 +219,7 @@ export default function List() {
<MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template</MenuItem>
<MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
</Menu>
<Button
{/* <Button
variant="contained"
startIcon={<AddIcon />}
sx={{ p: 1.8 }}
@@ -226,7 +228,7 @@ export default function List() {
}}
>
Create
</Button>
</Button> */}
</Stack>
)}
@@ -281,7 +283,7 @@ export default function List() {
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/customer-service/request?status=approved', { params: filter });
const response = await axios.get('/customer-service/request?final_log=1&service_code=OP', { params: filter });
// console.log(response.data);
setDataTableLoading(false);
@@ -320,7 +322,7 @@ export default function List() {
};
// Called on every row to map the data to the columns
function createData(data: any): any {
function createData(data: FinalLogType) {
return {
...data,
};
@@ -342,7 +344,7 @@ export default function List() {
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell> */ }
<TableCell align="left">
{/* <TableCell align="left">
<Typography
// onClick={() => {
// handleShowClaim(row);
@@ -350,26 +352,29 @@ export default function List() {
>
{row.id}
</Typography>
</TableCell>
<TableCell align="left">{row.member?.code}</TableCell>
</TableCell> */}
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.member?.full_name}</TableCell>
<TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
<TableCell align="left">{row.service_name}</TableCell>
<TableCell align="left">{row.payment_type_name}</TableCell>
<TableCell align="left">
{ row.status == "requested" ?
(<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status)}</Label>) :
(<Label color='success'> {capitalizeFirstLetter(row.status)}</Label>)
}
{ row.status_final_log == "requested" ?
(<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status_final_log)}</Label>) :
row.status_final_log == "declined" ?
(<Label color='error'> {capitalizeFirstLetter(row.status_final_log)}</Label>)
:
(<Label color='success'> {capitalizeFirstLetter(row.status_final_log)}</Label>)
}
</TableCell>
<TableCell align="right">
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
{/* <MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
<EditOutlinedIcon />
Edit
</MenuItem>
<MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
</MenuItem> */}
<MenuItem onClick={() => navigate ('/custormer-service/final-log/detail/'+row.id+'')}>
<FindInPageOutlinedIcon />
Detail
</MenuItem>
@@ -471,9 +476,9 @@ export default function List() {
<TableHead>
<TableRow>
{/* <TableCell style={headStyle} align="left" /> */}
<TableCell style={headStyle} align="left">
{/* <TableCell style={headStyle} align="left">
ID Request LOG
</TableCell>
</TableCell> */}
<TableCell style={headStyle} align="left">
Code
</TableCell>

74
frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Functions.tsx
View File

@@ -1,6 +1,7 @@
import axios from '@/utils/axios';
import { enqueueSnackbar } from 'notistack';
import { MemberListType } from './Types';
import { BenefitConfigurationListType } from './Types';
import { makeFormData } from '@/utils/jsonToFormData';
/**
@@ -77,3 +78,76 @@ export const addClaimRequest = async ( data: MemberListType[] ): Promise<boolean
return response;
};
/**
* Add Benefit
*/
export const postAddBenefit = async (data: BenefitConfigurationListType):Promise<boolean> => {
const response = await axios.post(`customer-service/request/insert-benefit`, {
...data
})
.then((res) =>{
enqueueSnackbar(res.data.message, {
variant: 'success',
});
return true;
})
.catch((res) => {
if (res.response.status == 400) {
let arr_message = res.response.data.message;
// for (const key in arr_message) {
enqueueSnackbar(arr_message, {
variant: 'warning',
});
// }
}
else {
enqueueSnackbar("server error !", {
variant: 'error',
});
}
return false;
});
return response;
}
/**
* Edit Benefit
*/
export const postEditBenefit = async (id:number, data: BenefitConfigurationListType):Promise<boolean> => {
const response = await axios.put(`customer-service/request/benefit_data/${id}`, {
...data
})
.then((res) =>{
enqueueSnackbar(res.data.message, {
variant: 'success',
});
return true;
})
.catch((res) => {
if (res.response.status == 400) {
let arr_message = res.response.data.message;
// for (const key in arr_message) {
enqueueSnackbar(arr_message, {
variant: 'warning',
});
// }
}
else {
enqueueSnackbar("server error !", {
variant: 'error',
});
}
return false;
});
return response;
}

117
frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx
View File

@@ -1,3 +1,5 @@
import { Member } from "@/@types/member"
/**
* Search Type
*/
@@ -8,18 +10,109 @@ export type SearchType = {
/**
* Member List
*/
export type MemberListType = {
id : string,
member_id : string,
name : string,
service_type : ServiceType[],
patien_type? : string,
file_kondisi? : any[],
file_diagnosa? : any[],
file_penunjang? : any[],
export type FinalLogType = {
id : number,
code : string,
member : Member,
submission_date : string,
service_name : string,
payment_type_name : string,
status_final_log : string,
status : string,
files_by_type : files_by_type,
}
export type ServiceType = {
code : string
name : string
export type DetailFinalLogType = {
id : number,
code : string,
member_id : string,
policy_number : string,
name : string|any,
date_of_birth : string,
gender : string,
marital_status : string,
submission_date : string,
service_type : string,
claim_method : string,
status : string,
status_final_log : string,
benefit : Benefit[],
benefit_data : BenefitData[],
config_service : ConfigService,
exclusion : Exclusion[],
files : file[],
}
export type BenefitData = {
amount_incurred : number,
amount_approved : number,
amount_not_approved : number,
excess_paid : number,
keterangan : string,
benefit : Benefit,
id : number,
}
export type Benefit = {
id: number,
code: string,
description: string
}
export type files_by_type = {
claim_diagnosis : file[],
claim_kondisi : file[],
claim_result : file[],
}
export type file = {
original_name: string,
name: string,
path: string,
url: string,
}
export type ConfigService = {
gp_external_doctor_online: string,
gp_external_doctor_offline: string,
gp_internal_doctor_online: string,
gp_internal_doctor_offline: string,
sp_external_doctor_online: string,
sp_external_doctor_offline: string,
sp_internal_doctor_online: string,
sp_internal_doctor_offline: string,
vitamins: string,
delivery_fee: string,
general_practitioner_fee: string,
specialist_practitioner_fee: string
}
export type Exclusion = {
exclusionable: {
code: string,
name: string
},
rules: Rule[]
}
export type Rule = {
id: number,
exclusion_id: number,
name: string,
values: string,
}
export type BenefitConfigurationListType = {
request_log_id: number|undefined,
benefit_name: string,
amount_incurred: number,
amount_approved: number,
amount_not_approved: number,
excess_paid: number,
keterangan: string,
description: string,
}