update final log
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
import { Card, Typography } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import { DetailFinalLogType } from "../FinalLog/Model/Types";
|
||||
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
||||
|
||||
|
||||
type CardDetail = {
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
|
||||
export default function CardDetail({requestLog} : CardDetail ) {
|
||||
return (
|
||||
<Card sx={{padding:2}} >
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Detail</Typography>
|
||||
<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>Date Of Birth</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.date_of_birth ? fDate(requestLog?.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>{requestLog?.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>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import { Accordion, AccordionDetails, AccordionSummary, Card, Typography } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import { DetailFinalLogType } from "../FinalLog/Model/Types";
|
||||
import { toTitleCase } from "@/utils/formatTime";
|
||||
import Label from '@/components/Label';
|
||||
import { ExpandMore } from "@mui/icons-material";
|
||||
|
||||
|
||||
|
||||
type CardDetail = {
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
|
||||
export default function CardExclusion({requestLog} : CardDetail ) {
|
||||
return (
|
||||
<Card sx={{padding:2}} >
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Exclusion</Typography>
|
||||
{requestLog?.exclusion?.length > 0 ? requestLog?.exclusion.map((r, index) => (
|
||||
<Accordion>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMore />}
|
||||
aria-controls='panelia-content'
|
||||
id='panel1a-header'
|
||||
>
|
||||
<Typography variant='subtitle1'>{r.exclusionable.code}</Typography>
|
||||
<Typography variant='subtitle1' sx={{marginLeft:3}}>{r.exclusionable.name}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>MSC</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
{r.rules.length > 0 && r?.rules?.map((text, i) => {
|
||||
return text.name === 'msc' ?
|
||||
text.values.split(',').map((text2, j) => {
|
||||
let labelMSC: string = text2;
|
||||
switch (labelMSC) {
|
||||
case 'm':
|
||||
labelMSC = 'Member';
|
||||
break;
|
||||
case 'c':
|
||||
labelMSC = 'Child';
|
||||
break;
|
||||
case 's':
|
||||
labelMSC = 'Spouse';
|
||||
break;
|
||||
default:
|
||||
labelMSC = 'Member';
|
||||
}
|
||||
return (
|
||||
<Label key={j} sx={{marginLeft:1}}>{labelMSC}</Label>
|
||||
);
|
||||
})
|
||||
: null;
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Gender</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
{r.rules.length > 0 && r?.rules?.map((text, i) => {
|
||||
return text.name === 'gender' ?
|
||||
text.values.split(',').map((text2, j) => {
|
||||
let labelGender: string = toTitleCase(text2);
|
||||
return (
|
||||
<Label key={j} sx={{marginLeft:1}}>{labelGender}</Label>
|
||||
);
|
||||
})
|
||||
: null;
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Min Age</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
{r.rules.length > 0 && r?.rules?.map((text, i) => {
|
||||
return text.name === 'min_age' ?
|
||||
<Typography variant='subtitle1'> {text.values} </Typography> : null
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Max Age</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
{r.rules.length > 0 && r?.rules?.map((text, i) => {
|
||||
return text.name === 'max_age' ?
|
||||
<Typography variant='subtitle1'> {text.values} </Typography> : null
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Plan</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
{r.rules.length > 0 && r?.rules?.map((text, i) => {
|
||||
return text.name === 'plan' ?
|
||||
<Typography variant='subtitle1'> {text.values} </Typography> : null
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
)) : null}
|
||||
</Card>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import { Card, Typography } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import { DetailFinalLogType } from "../FinalLog/Model/Types";
|
||||
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
||||
import Label from '@/components/Label';
|
||||
|
||||
|
||||
|
||||
type CardDetail = {
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
isFinalLog: boolean
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
|
||||
export default function CardService({requestLog, isFinalLog = true} : CardDetail ) {
|
||||
return (
|
||||
<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>{requestLog?.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(requestLog?.claim_method ?? '-')}</Typography>
|
||||
</Stack>
|
||||
{/* <Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Benefit</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
<ul>
|
||||
{requestLog?.benefit.length > 0 ? requestLog?.benefit.map((r, index) => (
|
||||
<li key={index}>{r.code } - {r.description}</li>
|
||||
)) : <li>-</li>}
|
||||
</ul>
|
||||
</Typography>
|
||||
</Stack> */}
|
||||
{/* General Practitioner */}
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>General Practitioner</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>External Doctor :
|
||||
{requestLog?.config_service?.gp_external_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
|
||||
{requestLog?.config_service?.gp_external_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom></Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>Internal Doctor :
|
||||
{requestLog?.config_service?.gp_internal_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
|
||||
{requestLog?.config_service?.gp_internal_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{/* Specialist Practitioner */}
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Specialist Practitioner</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>External Doctor :
|
||||
{requestLog?.config_service?.sp_external_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
|
||||
{requestLog?.config_service?.sp_external_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom></Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>Internal Doctor :
|
||||
{requestLog?.config_service?.gp_internal_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
|
||||
{requestLog?.config_service?.gp_internal_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{/* Medicine */}
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Medicine</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
<ul>
|
||||
{requestLog?.config_service?.vitamins == '1' ? (<li>Suplemen</li>) : (<li>-</li>)}
|
||||
{requestLog?.config_service?.delivery_fee == '1' ? (<li>Delivery Fee</li>) : (<li>-</li>)}
|
||||
</ul>
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Admin Fee</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
{requestLog?.config_service?.general_practitioner_fee == '1' ? (<Label sx={{marginLeft:2}}> General Practitioner</Label>) : '-'}
|
||||
{requestLog?.config_service?.specialist_practitioner_fee == '1' ? (<Label sx={{marginLeft:1}}> Specialist Practitioner</Label>) : '-'}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
|
||||
</Card>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { Card, Grid, Typography } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import { DetailFinalLogType } from "../FinalLog/Model/Types";
|
||||
import { useEffect, useState, useRef, useMemo } from 'react';
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
|
||||
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
||||
import Label from '@/components/Label';
|
||||
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
|
||||
|
||||
type CardDetail = {
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default function DetailBenefit({requestLog} : CardDetail ) {
|
||||
return (
|
||||
{requestLog.benefitData?.map((item, index) => (
|
||||
<Box sx={{ marginTop:'10px', marginBottom:'10px', py: '8px', px: '12px', border:'1px solid #919EAB52', borderRadius: '6px'}}>
|
||||
<Grid 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}}>
|
||||
|
||||
</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}}>
|
||||
|
||||
</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}}>
|
||||
|
||||
</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}}>
|
||||
|
||||
</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}}>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
)
|
||||
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
|
||||
@@ -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 { DetailRequestLogType } 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: DetailRequestLogType|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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,305 +1,174 @@
|
||||
// mui
|
||||
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
|
||||
import {
|
||||
Container,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
Card,
|
||||
Dialog,
|
||||
} from '@mui/material';
|
||||
// components
|
||||
import Page from '../../../components/Page';
|
||||
// utils
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
// react
|
||||
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
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 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 { DetailRequestLogType } from './Model/Types';
|
||||
import { fDate, fDateTimesecond } from '@/utils/formatTime';
|
||||
import { Button } from '@mui/material';
|
||||
import DialogConfirmation from './Components/DialogConfirmation';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
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<DetailRequestLogType>();
|
||||
|
||||
|
||||
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]);
|
||||
|
||||
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 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' });
|
||||
// }
|
||||
|
||||
setTimeout(() =>
|
||||
{
|
||||
window.location.reload();
|
||||
}, 5000);
|
||||
|
||||
};
|
||||
|
||||
const check_invoice = document?.find((dataInvoice) => dataInvoice.type === 'claim-invoice');
|
||||
const [approve, setApprove] = useState('')
|
||||
|
||||
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}>
|
||||
<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>
|
||||
<Card sx={{padding:2}} >
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Detail</Typography>
|
||||
<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>
|
||||
</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
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileInvoiceInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={handleInvoiceInputChange}
|
||||
accept="application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
<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>Date Of Birth</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.date_of_birth ? fDate(requestLog?.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>{requestLog?.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>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12}>
|
||||
<DetailTimeline data={data}/>
|
||||
<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>{requestLog?.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(requestLog?.claim_method ?? '-')}</Typography>
|
||||
</Stack>
|
||||
{/* <Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Benefit</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
<ul>
|
||||
{requestLog?.benefit.length > 0 ? requestLog?.benefit.map((r, index) => (
|
||||
<li key={index}>{r.code } - {r.description}</li>
|
||||
)) : <li>-</li>}
|
||||
</ul>
|
||||
</Typography>
|
||||
</Stack> */}
|
||||
</Card>
|
||||
</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 == '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="outlined"
|
||||
sx={{ color: '#19BBBB', borderColor: '#19BBBB' }}
|
||||
onClick={() => {
|
||||
setOpenDialogSubmit(true);
|
||||
setApprove('approved');
|
||||
}}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
<DialogConfirmation
|
||||
setOpenDialog={setOpenDialogSubmit}
|
||||
requestLog={requestLog}
|
||||
openDialog={openDialogSubmit}
|
||||
approve={approve}
|
||||
></DialogConfirmation>
|
||||
</Stack>
|
||||
</Grid>
|
||||
) : null}
|
||||
|
||||
</Grid>
|
||||
) : ''}
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
|
||||
@@ -51,6 +51,8 @@ import { capitalizeFirstLetter } from '@/utils/formatString';
|
||||
import Label from '@/components/Label';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
import { Import } from '@/@types/claims';
|
||||
|
||||
import { RequestLogType } from '../Request/Model/Types';
|
||||
// import SvgIconStyle from '@/components/SvgIconStyle';
|
||||
import SvgIconStyle from '../../../components/SvgIconStyle';
|
||||
// import LoadingButton from '@/theme/overrides/LoadingButton';
|
||||
@@ -323,7 +325,7 @@ export default function List() {
|
||||
};
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData(data: any): any {
|
||||
function createData(data: RequestLogType): any {
|
||||
return {
|
||||
...data,
|
||||
};
|
||||
@@ -345,7 +347,7 @@ export default function List() {
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
</TableCell> */ }
|
||||
<TableCell align="left">
|
||||
{/* <TableCell align="left">
|
||||
<Typography
|
||||
// onClick={() => {
|
||||
// handleShowClaim(row);
|
||||
@@ -353,9 +355,9 @@ export default function List() {
|
||||
>
|
||||
{row.id}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableCell> */}
|
||||
<TableCell align="left">{row.code}</TableCell>
|
||||
<TableCell align="left">{row.member?.full_name}</TableCell>
|
||||
<TableCell align="left">{row.member_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>
|
||||
@@ -371,19 +373,11 @@ export default function List() {
|
||||
<TableCell align="right">
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
|
||||
<MenuItem onClick={() => navigate ('/custormer-service/request/detail/'+row.id+'')}>
|
||||
<FindInPageOutlinedIcon />
|
||||
Detail
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
|
||||
<SvgIcon>
|
||||
{/* credit: plus icon from https://heroicons.com/ */}
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5 10.25C12.5 10.0511 12.579 9.86032 12.7197 9.71967C12.8603 9.57902 13.0511 9.5 13.25 9.5H16.75C16.9489 9.5 17.1397 9.57902 17.2803 9.71967C17.421 9.86032 17.5 10.0511 17.5 10.25C17.5 10.4489 17.421 10.6397 17.2803 10.7803C17.1397 10.921 16.9489 11 16.75 11H13.25C13.0511 11 12.8603 10.921 12.7197 10.7803C12.579 10.6397 12.5 10.4489 12.5 10.25ZM13.25 15C13.0511 15 12.8603 15.079 12.7197 15.2197C12.579 15.3603 12.5 15.5511 12.5 15.75C12.5 15.9489 12.579 16.1397 12.7197 16.2803C12.8603 16.421 13.0511 16.5 13.25 16.5H16.75C16.9489 16.5 17.1397 16.421 17.2803 16.2803C17.421 16.1397 17.5 15.9489 17.5 15.75C17.5 15.5511 17.421 15.3603 17.2803 15.2197C17.1397 15.079 16.9489 15 16.75 15H13.25ZM10.78 9.78C10.8537 9.71134 10.9128 9.62854 10.9538 9.53654C10.9948 9.44454 11.0168 9.34522 11.0186 9.24452C11.0204 9.14382 11.0018 9.04379 10.9641 8.9504C10.9264 8.85701 10.8703 8.77218 10.799 8.70096C10.7278 8.62974 10.643 8.5736 10.5496 8.53588C10.4562 8.49816 10.3562 8.47963 10.2555 8.48141C10.1548 8.48318 10.0555 8.50523 9.96346 8.54622C9.87146 8.58721 9.78866 8.64631 9.72 8.72L8.25 10.19L7.78 9.72C7.63783 9.58752 7.44978 9.5154 7.25548 9.51882C7.06118 9.52225 6.87579 9.60097 6.73838 9.73838C6.60097 9.87579 6.52225 10.0612 6.51883 10.2555C6.5154 10.4498 6.58752 10.6378 6.72 10.78L7.72 11.78C7.86063 11.9205 8.05125 11.9993 8.25 11.9993C8.44875 11.9993 8.63937 11.9205 8.78 11.78L10.78 9.78ZM10.78 14.22C10.9205 14.3606 10.9993 14.5512 10.9993 14.75C10.9993 14.9488 10.9205 15.1394 10.78 15.28L8.78 17.28C8.63937 17.4205 8.44875 17.4993 8.25 17.4993C8.05125 17.4993 7.86063 17.4205 7.72 17.28L6.72 16.28C6.64631 16.2113 6.58721 16.1285 6.54622 16.0365C6.50523 15.9445 6.48319 15.8452 6.48141 15.7445C6.47963 15.6438 6.49816 15.5438 6.53588 15.4504C6.5736 15.357 6.62974 15.2722 6.70096 15.201C6.77218 15.1297 6.85701 15.0736 6.9504 15.0359C7.04379 14.9982 7.14382 14.9796 7.24452 14.9814C7.34523 14.9832 7.44454 15.0052 7.53654 15.0462C7.62854 15.0872 7.71134 15.1463 7.78 15.22L8.25 15.69L9.72 14.22C9.86063 14.0795 10.0512 14.0007 10.25 14.0007C10.4488 14.0007 10.6394 14.0795 10.78 14.22ZM15.994 4.084C15.9521 3.51752 15.6975 2.98786 15.2813 2.60132C14.865 2.21478 14.318 1.99997 13.75 2H10.25C9.69656 2.00002 9.16255 2.20401 8.75004 2.57297C8.33754 2.94194 8.07549 3.44999 8.014 4H6.25C5.65326 4 5.08097 4.23705 4.65901 4.65901C4.23705 5.08097 4 5.65326 4 6.25V19.75C4 20.3467 4.23705 20.919 4.65901 21.341C5.08097 21.7629 5.65326 22 6.25 22H17.75C18.0455 22 18.3381 21.9418 18.611 21.8287C18.884 21.7157 19.1321 21.5499 19.341 21.341C19.5499 21.1321 19.7157 20.884 19.8287 20.611C19.9418 20.3381 20 20.0455 20 19.75V6.25C20 5.95453 19.9418 5.66194 19.8287 5.38896C19.7157 5.11598 19.5499 4.86794 19.341 4.65901C19.1321 4.45008 18.884 4.28434 18.611 4.17127C18.3381 4.0582 18.0455 4 17.75 4H15.986L15.994 4.084ZM15.994 4.096L16 4.25C16 4.198 15.997 4.147 15.994 4.096ZM10.25 6.5H13.75C14.53 6.5 15.217 6.103 15.621 5.5H17.75C17.9489 5.5 18.1397 5.57902 18.2803 5.71967C18.421 5.86032 18.5 6.05109 18.5 6.25V19.75C18.5 19.9489 18.421 20.1397 18.2803 20.2803C18.1397 20.421 17.9489 20.5 17.75 20.5H6.25C6.05109 20.5 5.86032 20.421 5.71967 20.2803C5.57902 20.1397 5.5 19.9489 5.5 19.75V6.25C5.5 6.05109 5.57902 5.86032 5.71967 5.71967C5.86032 5.57902 6.05109 5.5 6.25 5.5H8.379C8.783 6.103 9.47 6.5 10.25 6.5ZM10.25 3.5H13.75C13.9489 3.5 14.1397 3.57902 14.2803 3.71967C14.421 3.86032 14.5 4.05109 14.5 4.25C14.5 4.44891 14.421 4.63968 14.2803 4.78033C14.1397 4.92098 13.9489 5 13.75 5H10.25C10.0511 5 9.86032 4.92098 9.71967 4.78033C9.57902 4.63968 9.5 4.44891 9.5 4.25C9.5 4.05109 9.57902 3.86032 9.71967 3.71967C9.86032 3.57902 10.0511 3.5 10.25 3.5Z" fill="black"/>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
Konfirmasi
|
||||
</MenuItem>
|
||||
|
||||
</>
|
||||
} />
|
||||
</TableCell>
|
||||
@@ -482,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>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { Member } from "@/@types/member"
|
||||
|
||||
/**
|
||||
* Search Type
|
||||
*/
|
||||
@@ -8,18 +10,48 @@ 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 RequestLogType = {
|
||||
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 files_by_type = {
|
||||
claim_diagnosis : file[],
|
||||
claim_kondisi : file[],
|
||||
claim_result : file[],
|
||||
}
|
||||
|
||||
export type file = {
|
||||
name: string,
|
||||
url: string,
|
||||
}
|
||||
|
||||
export type DetailRequestLogType = {
|
||||
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,
|
||||
status : string,
|
||||
benefit : Benefit[],
|
||||
}
|
||||
|
||||
export type Benefit = {
|
||||
code: string,
|
||||
description: string
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user