update final log
This commit is contained in:
@@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user