1318 lines
65 KiB
TypeScript
1318 lines
65 KiB
TypeScript
import * as Yup from 'yup';
|
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
import { NumericFormat } from "react-number-format";
|
|
import {
|
|
Container,
|
|
Grid,
|
|
Stack,
|
|
Typography,
|
|
Card,
|
|
Dialog,
|
|
TableRow,
|
|
Tab,
|
|
TableCell,
|
|
Collapse,
|
|
AccordionSummary,
|
|
AccordionDetails,
|
|
IconButton,
|
|
Divider,
|
|
ButtonBase
|
|
} from '@mui/material';
|
|
// components
|
|
import Page from '../../../components/Page';
|
|
import Iconify from '@/components/Iconify';
|
|
import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
|
|
import RHFTextFieldMoney from '@/components/hook-form/v2/RHFTextFieldMoney';
|
|
import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
|
|
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
|
// utils
|
|
import useSettings from '../../../hooks/useSettings';
|
|
import { useFieldArray, useForm } from 'react-hook-form';
|
|
// react
|
|
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
|
import { useEffect, useState, useRef, useMemo } from 'react';
|
|
import axios from '../../../utils/axios';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
// pages
|
|
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
|
import { DetailFinalLogType } from './Model/Types';
|
|
import { fDate, fDateTimesecond } from '@/utils/formatTime';
|
|
import { Button, Autocomplete, FormHelperText} 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 { LoadingButton } from '@mui/lab';
|
|
import { makeFormData } from '@/utils/jsonToFormData';
|
|
import TextField from '@mui/material/TextField';
|
|
import { fPostFormat } from '@/utils/formatTime';
|
|
import { parse } from 'date-fns';
|
|
|
|
|
|
|
|
|
|
|
|
// Import Card Detail Final LOG
|
|
import CardDetail from '../Components/CardDetail';
|
|
import CardService from '../Components/CardService';
|
|
import CardExclusion from '../Components/CardExclusion';
|
|
import CardBenefit from '../Components/CardBenefit';
|
|
|
|
// Import Dialog
|
|
import DialogHospitalCare from './Components/DialogHospitalCare';
|
|
import DialogBenefit from './Components/DialogBenefit';
|
|
import DialogMedicine from './Components/DialogMedicine';
|
|
import DialogDeleteBenfit from './Components/DialogDeleteBenefit';
|
|
import DialogEditBenefit from './Components/DialogEditBenefit';
|
|
import DialogDeleteMedicine from './Components/DialogDeleteMedicine'
|
|
|
|
import MoreMenu from '@/components/MoreMenu';
|
|
import { MenuItem } from '@mui/material';
|
|
import { fNumber } from '@/utils/formatNumber';
|
|
import palette from '@/theme/palette';
|
|
import CardMedicine from '../Components/CardMedicine';
|
|
import CardFile from '../Components/CardFile';
|
|
import DialogEditFinalLOG from './Components/DialogEditFinalLOG';
|
|
import DialogDeleteFileLog from './Components/DialogDeleteFileLog';
|
|
import DialogUploadFileFinalLog from './Components/DialogUploadFileFinalLog';
|
|
import DialogSendWa from './Components/DialogSendWa';
|
|
import { set } from 'nprogress';
|
|
import { format } from 'date-fns';
|
|
|
|
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function Detail() {
|
|
//dari hospital portal
|
|
// const [dischargeDate, setDischargeDate] = useState<string>(format(new Date(), "yyyy MMM d HH:mm:ss"));
|
|
const [dischargeDate, setDischargeDate] = useState<Date | null>(null)
|
|
|
|
|
|
// const [serviceOptions, setServiceOptions] = useState([
|
|
// { value: '-', label: '-' }
|
|
// ]);
|
|
// const [specialisOptions, setSpecialisOptions] = useState([
|
|
// { value: '-', label: '-' }
|
|
// ]);
|
|
|
|
const [serviceOptions, setServiceOptions] = useState<
|
|
{ value: string; label: string }[]
|
|
>([])
|
|
|
|
const [specialisOptions, setSpecialisOptions] = useState<
|
|
{ value: number; label: string }[]
|
|
>([])
|
|
const [serviceCode, setServiceCode] = useState<string>("");
|
|
const [idSpecialities, setIdSpecialities] = useState<number | null>(null)
|
|
|
|
const [inputDppj, setInputDppj] = useState("");
|
|
const [requestLog, setRequestLog] = useState<DetailFinalLogType>();
|
|
function submitRequestFinalLog() {
|
|
if(dischargeDate == '')
|
|
{
|
|
enqueueSnackbar('Tanggal Keluar', { variant: 'warning' });
|
|
return false;
|
|
}
|
|
//cek spesialis
|
|
if(!idSpecialities)
|
|
{
|
|
enqueueSnackbar('Spesialis', { variant: 'warning' });
|
|
return false;
|
|
}
|
|
//cek dpjp
|
|
if(!inputDppj)
|
|
{
|
|
enqueueSnackbar('DPJP', { variant: 'warning' });
|
|
return false;
|
|
}
|
|
setSubmitLoading(true);
|
|
const formData = makeFormData({
|
|
// request_logs_id: member.id,
|
|
// result_files: fileHasilPenunjangs,
|
|
// diagnosa_files: fileDiagnosas,
|
|
// kondisi_files: fileKondisis,
|
|
request_logs_id: requestLog?.id,
|
|
discharge_date: fPostFormat(dischargeDate, 'yyyy-MM-dd HH:mm:ss'),
|
|
service_code: serviceCode,
|
|
spescialis_id: idSpecialities,
|
|
dppj: inputDppj,
|
|
});
|
|
axios
|
|
.post('/request-final-log', formData)
|
|
.then((response) => {
|
|
enqueueSnackbar(response.data.meta.message ?? 'Berhasil membuat data', { variant: 'success' });
|
|
// handleSubmitSuccess();
|
|
// onClose({ someData: 'example data' }, getData);
|
|
})
|
|
.catch(({ response }) => {
|
|
enqueueSnackbar(response.data.meta.message ?? 'Something Went Wrong', { variant: 'error' });
|
|
})
|
|
.then(() => {
|
|
setSubmitLoading(false);
|
|
});
|
|
}
|
|
//end dari hospital portal
|
|
|
|
|
|
const location = useLocation();
|
|
const queryParams = new URLSearchParams(location.search);
|
|
|
|
const navigate = useNavigate();
|
|
const { themeStretch } = useSettings();
|
|
|
|
const [isReversal, setIsReversal] = useState(false);
|
|
const [submitLoading, setSubmitLoading] = useState(false);
|
|
|
|
const defaultValues: any = {nominal : 0};
|
|
const validationSchema = Yup.object().shape({nominal: Yup.number().typeError('Nominal harus berupa angka').required('Nominal harus diisi')})
|
|
|
|
const methods = useForm<any>({
|
|
resolver: yupResolver(validationSchema),
|
|
defaultValues
|
|
});
|
|
|
|
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
|
|
|
|
const onSubmit = async (data: any) => {
|
|
setSubmitLoading(true);
|
|
const formData = makeFormData({
|
|
request_logs_id: id,
|
|
approval_files: fileApprovals,
|
|
nominal: data.nominal,
|
|
});
|
|
axios
|
|
.post(`/customer-service/request/${id}/approval_files`, formData)
|
|
.then((response) => {
|
|
enqueueSnackbar('Berhasil membuat data', { variant: 'success' });
|
|
|
|
window.location.reload()
|
|
})
|
|
.catch(({ response }) => {
|
|
enqueueSnackbar('Something Went Wrong', { variant: 'error' });
|
|
})
|
|
.then(() => {
|
|
setSubmitLoading(false);
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!requestLog?.id_member) return
|
|
axios.get('service-member/'+ (requestLog?.id_member ?? null))
|
|
.then((response) => {
|
|
setServiceOptions(response.data);
|
|
}).catch((error) => {
|
|
console.error('Error fetching ICD options:', error);
|
|
});
|
|
|
|
axios.get('specialis')
|
|
.then((response) => {
|
|
setSpecialisOptions(response.data);
|
|
}).catch((error) => {
|
|
console.error('Error fetching ICD options:', error);
|
|
});
|
|
|
|
}, [requestLog?.id_member]);
|
|
|
|
const updateApproval = async () => {
|
|
setSubmitLoading(true);
|
|
axios
|
|
.put(`/customer-service/request/${id}`, {
|
|
status_approval: 'approved',
|
|
})
|
|
.then((response) => {
|
|
enqueueSnackbar('Berhasil Approve', { variant: 'success' });
|
|
window.location.reload();
|
|
})
|
|
.catch(({ response }) => {
|
|
enqueueSnackbar(response?.data?.message || 'Something Went Wrong', { variant: 'error' });
|
|
})
|
|
.finally(() => {
|
|
setSubmitLoading(false);
|
|
});
|
|
};
|
|
|
|
|
|
const updateDecline = async () => {
|
|
setSubmitLoading(true);
|
|
axios
|
|
.put(`/customer-service/request/${id}`, {
|
|
status_approval: 'declined',
|
|
})
|
|
.then((response) => {
|
|
enqueueSnackbar('Berhasil Approve', { variant: 'success' });
|
|
window.location.reload();
|
|
})
|
|
.catch(({ response }) => {
|
|
enqueueSnackbar(response?.data?.message || 'Something Went Wrong', { variant: 'error' });
|
|
})
|
|
.finally(() => {
|
|
setSubmitLoading(false);
|
|
});
|
|
}
|
|
|
|
const { id, approval } = useParams();
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get('customer-service/request/'+id)
|
|
.then((response) => {
|
|
setRequestLog(response.data.data)
|
|
setIsReversal(response.data.data.is_reversal)
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
})
|
|
}, [id]);
|
|
|
|
const style1 = {
|
|
color: '#919EAB',
|
|
width: '30%'
|
|
}
|
|
const style3 = {
|
|
color: '#919EAB',
|
|
width: '35%'
|
|
}
|
|
const style2 = {
|
|
width: '70%'
|
|
}
|
|
const marginBottom1 = {
|
|
marginBottom: 1,
|
|
}
|
|
const marginBottom2 = {
|
|
marginBottom: 2,
|
|
}
|
|
|
|
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
|
const [openDialogEditDetail, setDialogDEditDetail] = useState(false);
|
|
const [openDialogBenefit, setDialogBenefit] = useState(false);
|
|
const [openDialogMedicine, setDialogMedicine] = useState(false);
|
|
const [openDialogSendWa, setDialogSendWa] = useState(false);
|
|
const [shareLink, setShareLink] = useState(false);
|
|
|
|
// Handel Delete Detail Benefit
|
|
const [idBenefitData, setIdBenefitData] = useState<number>();
|
|
const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
|
|
|
|
const [idMedicineData, setIdMedicineData] = useState<number>();
|
|
const [openDialogDeleteMedicine, setDialogDeleteMedicine] = useState(false)
|
|
|
|
const [approve, setApprove] = useState('')
|
|
|
|
// Handle Edit Detail Benefit
|
|
const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
|
|
const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
|
|
|
|
// Buat total data
|
|
const totalAmountIncurred = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
|
|
return accumulator + (item.amount_incurred || 0);
|
|
}, 0);
|
|
const totalAmountApprove = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
|
|
return accumulator + (item.amount_approved || 0);
|
|
}, 0);
|
|
const totalAmountNotApprove = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
|
|
return accumulator + (item.amount_not_approved || 0);
|
|
}, 0);
|
|
const totalExcessPaid = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
|
|
return accumulator + (item.excess_paid || 0);
|
|
}, 0);
|
|
|
|
const total = {
|
|
totalAmountIncurred : totalAmountIncurred,
|
|
totalAmountApproved : totalAmountApprove,
|
|
totalAmountNotApproved : totalAmountNotApprove,
|
|
totalExcessPaid : totalExcessPaid,
|
|
totalLimit : requestLog?.member_usage_benefit,
|
|
benefit : requestLog?.benefit,
|
|
}
|
|
// Handle Delete File LOG
|
|
const [pathFile, setPathFile] = useState('')
|
|
const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
|
|
|
|
// Handle Upload File LOG
|
|
const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
|
|
|
|
|
|
const fileDiagnosaInput = useRef<HTMLInputElement>(null);
|
|
const [fileApprovals, setFileApproval] = useState<any>([]);
|
|
const handleDiagnosaInputChange = (event:any) => {
|
|
if (event.target.files[0]) {
|
|
setFileApproval([...fileApprovals, ...event.target.files]);
|
|
} else {
|
|
console.log('NO FILE');
|
|
}
|
|
};
|
|
const removeApprovalFiles = (filesState:any, index:any) => {
|
|
setFileApproval(
|
|
filesState.filter((file:any, fileIndex:any) => {
|
|
return fileIndex != index;
|
|
})
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (requestLog?.discharge_date) {
|
|
setDischargeDate(
|
|
parse(
|
|
requestLog.discharge_date,
|
|
'yyyy-MM-dd HH:mm:ss',
|
|
new Date()
|
|
)
|
|
)
|
|
}
|
|
}, [requestLog?.discharge_date])
|
|
useEffect(() => {
|
|
if (!requestLog) return
|
|
setServiceCode(requestLog.service_code ?? '')
|
|
setIdSpecialities(requestLog.specialitiesID ?? null)
|
|
setInputDppj(requestLog.dppj ?? '')
|
|
}, [requestLog])
|
|
const selectedService = useMemo(
|
|
() =>
|
|
serviceOptions.find(
|
|
(o) => String(o.value) === String(serviceCode)
|
|
) || null,
|
|
[serviceOptions, serviceCode]
|
|
)
|
|
console.log(serviceOptions);
|
|
console.log(serviceCode);
|
|
const selectedSpecialis = useMemo(
|
|
() =>
|
|
specialisOptions.find(
|
|
(o) => Number(o.value) === Number(idSpecialities)
|
|
) || null,
|
|
[specialisOptions, idSpecialities]
|
|
)
|
|
|
|
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}}>{(requestLog && requestLog.code ? requestLog.code : '')}</Typography>
|
|
</Stack>
|
|
<Grid container spacing={2}>
|
|
{/* Detail */}
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography variant='subtitle1' sx={{ color: '#19BBBB', marginBottom: 4 }} gutterBottom>
|
|
Detail
|
|
</Typography>
|
|
</Grid>
|
|
{requestLog?.status_final_log != 'approved' ? (
|
|
<Grid item xs={6} sx={{ display: 'flex', placeContent: 'end' }}>
|
|
<MoreMenu
|
|
actions={
|
|
<>
|
|
<MenuItem onClick={() => {
|
|
setDialogDEditDetail(true)
|
|
}}>
|
|
<EditOutlined />
|
|
Edit
|
|
</MenuItem>
|
|
</>
|
|
}
|
|
/>
|
|
</Grid>) : null }
|
|
|
|
</Grid>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Invoice Number</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.invoice_no ? requestLog?.invoice_no : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Billing Number</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.billing_no ? requestLog?.billing_no : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Provider</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.provider}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Type Of Member</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.type_of_member}</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>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.admission_date ? fDateTimesecond(requestLog?.admission_date) : '-'}</Typography>
|
|
</Stack>
|
|
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.discharge_date ? fDateTimesecond(requestLog?.discharge_date) : '-'}</Typography>
|
|
</Stack>
|
|
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>No KTP</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.no_identitas ? requestLog?.no_identitas : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Keterangan</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.keterangan ? requestLog?.keterangan : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Hak Kamar Pasien</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.hak_kamar_pasien ? requestLog?.hak_kamar_pasien : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Penempatan Kamar</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.penempatan_kamar ? requestLog?.penempatan_kamar : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Spesialis</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.specialities_id ? requestLog?.specialities_id : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>DPJP</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.dppj ? requestLog?.dppj : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.catatan ? requestLog?.catatan : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style3} gutterBottom>Diagnosis</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
|
{requestLog?.diagnosis?.length > 0 ? (
|
|
<ul>
|
|
{requestLog.diagnosis.map((diagnosisItem, index) => (
|
|
<li key={index}>{diagnosisItem.value} - {diagnosisItem.label}</li>
|
|
// Replace 'name' with the property you want to display
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p>No diagnosis available.</p>
|
|
)}
|
|
</Typography>
|
|
</Stack>
|
|
{/* <DialogEditFinalLOG
|
|
setOpenDialog={setOpenDialogEdit}
|
|
requestLog={requestLog}
|
|
openDialog={openDialogEdit}
|
|
/> */}
|
|
</Card>
|
|
</Grid>
|
|
|
|
{/* Service */}
|
|
<Grid item xs={12} md={12} marginTop={2}>
|
|
<CardService
|
|
requestLog={requestLog}
|
|
isFinalLog={true}
|
|
>
|
|
</CardService>
|
|
</Grid>
|
|
|
|
{/* 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>
|
|
</Card>
|
|
<DialogHospitalCare
|
|
requestLog={requestLog}
|
|
openDialog={openDialogHospital}
|
|
setOpenDialog={setDialogHospital}
|
|
|
|
>
|
|
</DialogHospitalCare>
|
|
</Grid> */}
|
|
<Grid item xs={12}>
|
|
<Card sx={{p:3}}>
|
|
<Stack direction="row" spacing={2} sx={{ width: '100%' }}>
|
|
{/* Kolom Tanggal Discharge */}
|
|
<Stack spacing={2} sx={{ flex: 1 }}>
|
|
<Typography variant="subtitle1">Tanggal Keluar </Typography>
|
|
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
|
<DatePicker
|
|
label="Tanggal Keluar"
|
|
value={dischargeDate}
|
|
onChange={(newValue: any) => {
|
|
setDischargeDate(newValue);
|
|
}}
|
|
inputFormat="dd-MM-yyyy HH:mm"
|
|
renderInput={(params) => <TextField {...params} fullWidth required />}
|
|
/>
|
|
</LocalizationProvider>
|
|
</Stack>
|
|
|
|
{/* Kolom Service Type */}
|
|
<Stack spacing={2} sx={{ flex: 1 }}>
|
|
<Typography variant="subtitle1">Tipe Service </Typography>
|
|
{/* <Autocomplete
|
|
id="service_type"
|
|
options={serviceOptions}
|
|
getOptionLabel={(option) => option.label || ""}
|
|
value={serviceOptions.find((opt) => opt.value == serviceCode) || null}
|
|
onChange={(event, newValue) => {
|
|
setServiceCode(newValue?.value || "");
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField {...params} label='Tipe Service' fullWidth />
|
|
)}
|
|
/> */}
|
|
<Autocomplete
|
|
options={serviceOptions}
|
|
value={selectedService}
|
|
getOptionLabel={(o) => o.label}
|
|
isOptionEqualToValue={(o, v) => o.value === v.value}
|
|
onChange={(_, v) => setServiceCode(v?.value ?? '')}
|
|
renderInput={(params) => (
|
|
<TextField {...params} label="Tipe Service" fullWidth />
|
|
)}
|
|
/>
|
|
<FormHelperText style={{ color: "red" }}></FormHelperText>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Specialist */}
|
|
<Stack direction="row" spacing={2}>
|
|
<Stack spacing={2} sx={{ width: '100%' }}>
|
|
<Typography variant='subtitle1'>Spesialis </Typography>
|
|
{/* <Autocomplete
|
|
id='specialities'
|
|
options={specialisOptions}
|
|
getOptionLabel={(option) => option.label || ''}
|
|
value={specialisOptions.find((opt) => opt.value === idSpecialities) || null}
|
|
onChange={(event, newValue) => {
|
|
setIdSpecialities(newValue?.value || 0);
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField {...params} label="Spesialis" fullWidth />
|
|
)}
|
|
/> */}
|
|
<Autocomplete
|
|
options={specialisOptions}
|
|
value={selectedSpecialis}
|
|
getOptionLabel={(o) => o.label}
|
|
isOptionEqualToValue={(o, v) => o.value === v.value}
|
|
onChange={(_, v) => setIdSpecialities(v?.value ?? null)}
|
|
renderInput={(params) => (
|
|
<TextField {...params} label="Spesialis" fullWidth />
|
|
)}
|
|
/>
|
|
<FormHelperText style={{ color: 'red' }}></FormHelperText>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack direction="row" spacing={2}>
|
|
<Stack spacing={2} sx={{ width: '100%' }}>
|
|
<Typography variant='subtitle1'>DPJP </Typography>
|
|
<TextField
|
|
id='dppj'
|
|
variant='outlined'
|
|
value={inputDppj}
|
|
placeholder="DPJP"
|
|
onChange={(event) => {
|
|
setInputDppj(event.target.value);
|
|
}}
|
|
fullWidth
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
<LoadingButton
|
|
variant="contained"
|
|
sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
|
|
onClick={() => {
|
|
submitRequestFinalLog();
|
|
}}
|
|
loading={submitLoading}
|
|
>
|
|
Simpan
|
|
</LoadingButton>
|
|
</Card>
|
|
</Grid>
|
|
|
|
{/* Surat persetujuan Tindakan */}
|
|
<Grid item xs={12}>
|
|
<Card sx={{ p: 3 }}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 3 }}>
|
|
<Typography variant="subtitle1" sx={{ color: '#19BBBB', fontWeight: 'bold' }}>
|
|
Tindakan Persetujuan
|
|
</Typography>
|
|
</Stack>
|
|
|
|
{!isReversal && (
|
|
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
|
<Stack spacing={2}>
|
|
<Stack spacing={2} sx={{ mb: 3 }}>
|
|
<Typography variant="body1" fontWeight="bold">
|
|
Upload Tindakan Persetujuan
|
|
</Typography>
|
|
|
|
{fileApprovals?.map((file: any, index: number) => (
|
|
<Stack
|
|
key={index}
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{file.name}
|
|
</Typography>
|
|
<Iconify
|
|
icon="eva:trash-2-outline"
|
|
color="darkred"
|
|
sx={{ cursor: "pointer" }}
|
|
onClick={() => removeApprovalFiles(fileApprovals, index)}
|
|
/>
|
|
</Stack>
|
|
))}
|
|
|
|
<ButtonBase
|
|
sx={{
|
|
p: 2,
|
|
border: "2px dashed #F9FAFB",
|
|
bgcolor: "#F4F6F8",
|
|
borderRadius: 2,
|
|
width: "100%",
|
|
height: 60,
|
|
}}
|
|
onClick={() => fileDiagnosaInput.current?.click()}
|
|
>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
gap={1}
|
|
>
|
|
<Iconify icon="icon-park-outline:upload-one" fontSize="2rem" />
|
|
<Typography variant="body2" fontWeight="bold">
|
|
Upload Tindakan Persetujuan
|
|
</Typography>
|
|
</Box>
|
|
<input
|
|
type="file"
|
|
ref={fileDiagnosaInput}
|
|
style={{ display: "none" }}
|
|
multiple
|
|
onChange={handleDiagnosaInputChange}
|
|
accept="application/pdf,image/*"
|
|
/>
|
|
</ButtonBase>
|
|
</Stack>
|
|
<RHFTextFieldMoney
|
|
id="nominal"
|
|
name="nominal"
|
|
label="Nominal"
|
|
required
|
|
placeholder="Nominal"
|
|
value={requestLog?.nominal || 0}
|
|
disabled={!!approval}
|
|
/>
|
|
|
|
{/* <LoadingButton
|
|
type="submit" // ✅ supaya ikut submit
|
|
variant="contained"
|
|
sx={{ marginTop: 2, p: 2, backgroundColor: "#19BBBB" }}
|
|
loading={false}
|
|
>
|
|
Simpan
|
|
</LoadingButton> */}
|
|
<Stack direction="row" spacing={2} sx={{ mt: 6 }}>
|
|
{approval ? (
|
|
<>
|
|
<Box sx={{ flexGrow: 1 }} />
|
|
{/* GRUP TOMBOL DI KANAN */}
|
|
{requestLog?.status_approval !== 'approved' && (
|
|
<Stack direction="row" spacing={1.5} mt={2}>
|
|
<Button
|
|
color="error"
|
|
variant="outlined"
|
|
size="small"
|
|
onClick={updateDecline}
|
|
>
|
|
Decline
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
color="primary"
|
|
onClick={updateApproval}
|
|
>
|
|
Approve
|
|
</Button>
|
|
</Stack>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* TOMBOL SIMPAN DI KIRI */}
|
|
<LoadingButton
|
|
type="submit"
|
|
variant="contained"
|
|
sx={{ p: 2, backgroundColor: "#19BBBB" }}
|
|
loading={false}
|
|
size="small"
|
|
>
|
|
Simpan
|
|
</LoadingButton>
|
|
|
|
{/* Ini adalah spacer untuk mendorong tombol berikutnya ke kanan */}
|
|
<Box sx={{ flexGrow: 1 }} />
|
|
|
|
{/* GRUP TOMBOL DI KANAN */}
|
|
<Stack direction="row" spacing={1.5} mt={2}>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
sx={{ p: 2, backgroundColor: "#19BBBB" }}
|
|
onClick={() => {
|
|
setDialogSendWa(true);
|
|
setShareLink(false);
|
|
}}
|
|
>
|
|
Kirim (WA Chatbot)
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
sx={{ p: 2, backgroundColor: "#19BBBB" }}
|
|
onClick={() => {
|
|
setDialogSendWa(true);
|
|
setShareLink(true);
|
|
}}
|
|
>
|
|
Share Link
|
|
</Button>
|
|
</Stack>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
|
|
</Stack>
|
|
</FormProvider>
|
|
|
|
)}
|
|
|
|
{/* FILE YANG SUDAH TERUPLOAD */}
|
|
{requestLog?.files
|
|
?.filter((document) => document.type === 'approval')
|
|
?.map((documentType, index) => (
|
|
<Stack
|
|
key={index}
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
sx={{ mt: 2 }}
|
|
>
|
|
<a
|
|
href={documentType.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{ textDecoration: 'none', color: '#19BBBB' }}
|
|
>
|
|
<Typography variant="body2">
|
|
{documentType.original_name || '-'}
|
|
</Typography>
|
|
</a>
|
|
|
|
{!isReversal && (
|
|
<IconButton
|
|
onClick={() => {
|
|
setDialogDeleteFileLog(true);
|
|
setPathFile(documentType.path);
|
|
}}
|
|
size="small"
|
|
>
|
|
<Delete color="error" fontSize="small" />
|
|
</IconButton>
|
|
)}
|
|
</Stack>
|
|
))}
|
|
|
|
{/* DIALOG */}
|
|
<DialogDeleteFileLog
|
|
id={requestLog?.id}
|
|
path={pathFile}
|
|
setOpenDialog={setDialogDeleteFileLog}
|
|
openDialog={dialogDeleteFIleLog}
|
|
/>
|
|
|
|
<DialogUploadFileFinalLog
|
|
id={requestLog?.id}
|
|
setOpenDialog={setDialogUploadFileLog}
|
|
openDialog={dialogUploadFileLog}
|
|
/>
|
|
</Card>
|
|
</Grid>
|
|
|
|
|
|
{/* Benefit */}
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Benefit</Typography>
|
|
{
|
|
!isReversal ? (
|
|
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
|
|
setDialogBenefit(true);
|
|
}} >
|
|
<Typography variant="button" display="block">Benefit</Typography>
|
|
</Button>
|
|
) : null
|
|
}
|
|
</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>
|
|
{
|
|
!isReversal ? (
|
|
<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>
|
|
) : null
|
|
}
|
|
</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>
|
|
))}
|
|
<hr/>
|
|
<br/>
|
|
{requestLog?.benefit_data && requestLog.benefit_data.length > 0 ? (
|
|
<Box key={requestLog.benefit_data.length+1} 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'}}>
|
|
Total Benefit
|
|
</Typography>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Box sx={{ py: '8px', px: '12px', background: palette.light.grey[50012], borderRadius: '6px'}}>
|
|
<Grid container spacing={1}>
|
|
|
|
{/* Amount Incurred */}
|
|
<Grid item xs={2}>
|
|
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Amount Incurred
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{fNumber(totalAmountIncurred)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Amount Approved */}
|
|
<Grid item xs={2}>
|
|
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Amount Approved
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{fNumber(totalAmountApprove)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Amount Not Approved */}
|
|
<Grid item xs={3}>
|
|
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Amount Not Approved
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{fNumber(totalAmountNotApprove)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Excess Paid* */}
|
|
<Grid item xs={2}>
|
|
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Excess Paid
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{fNumber(totalExcessPaid)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Box>
|
|
)
|
|
: (
|
|
null
|
|
)}
|
|
</Card>
|
|
|
|
{/* PR Buat pindahin ke componen */}
|
|
{/* <CardBenefit
|
|
requestLog={requestLog}
|
|
>
|
|
|
|
</CardBenefit> */}
|
|
<DialogBenefit
|
|
requestLog={requestLog}
|
|
openDialog={openDialogBenefit}
|
|
setOpenDialog={setDialogBenefit}
|
|
|
|
/>
|
|
{/* Dialog Edit */}
|
|
<DialogEditBenefit
|
|
id={idBenefitData}
|
|
data={BenefitConfigurationData}
|
|
openDialog={openDialogEditBenefit}
|
|
setOpenDialog={setDialogEditBenefit}
|
|
total={total}
|
|
/>
|
|
|
|
{/* Dialog Delete */}
|
|
<DialogDeleteBenfit
|
|
id={idBenefitData}
|
|
openDialog={openDialogDeleteBenefit}
|
|
setOpenDialog={setDialogDeleteBenefit}
|
|
/>
|
|
|
|
{/* Dialog Edit Detai; */}
|
|
<DialogEditFinalLOG
|
|
setOpenDialog={setDialogDEditDetail}
|
|
requestLog={requestLog}
|
|
openDialog={openDialogEditDetail}
|
|
/>
|
|
|
|
<DialogSendWa
|
|
requestLog={requestLog}
|
|
openDialog={openDialogSendWa}
|
|
setOpenDialog={setDialogSendWa}
|
|
shareLink={shareLink}
|
|
|
|
/>
|
|
|
|
|
|
</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>
|
|
|
|
{requestLog?.medicine.map((item, index) => (
|
|
<Grid
|
|
container
|
|
direction="row"
|
|
alignItems="center"
|
|
justifyContent="space-between" // Menempatkan item ke sebelah kiri dan kanan
|
|
sx={{ marginBottom: 2 }}
|
|
>
|
|
<Typography variant='subtitle1'>{item.medicine}</Typography>
|
|
<Typography variant="subtitle1">Rp. {fNumber(item.price)}
|
|
<IconButton size='large' color='error' onClick={() => {
|
|
setIdMedicineData(item.id)
|
|
setDialogDeleteMedicine(true)
|
|
}}>
|
|
<Delete color='error'/>
|
|
</IconButton>
|
|
</Typography>
|
|
</Grid>
|
|
))}
|
|
|
|
<DialogMedicine
|
|
requestLog={requestLog}
|
|
openDialog={openDialogMedicine}
|
|
setOpenDialog={setDialogMedicine}
|
|
/>
|
|
<DialogDeleteMedicine
|
|
id={idMedicineData}
|
|
openDialog={openDialogDeleteMedicine}
|
|
setOpenDialog={setDialogDeleteMedicine}
|
|
/>
|
|
</Card>
|
|
</Grid>
|
|
|
|
{/* File */}
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files </Typography>
|
|
</Stack>
|
|
{ !isReversal ? (
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
|
|
setDialogUploadFileLog(true)
|
|
}} >
|
|
<Typography variant="button" display="block">Files</Typography>
|
|
</Button>
|
|
</Stack>
|
|
) : null }
|
|
|
|
</Stack>
|
|
{requestLog?.files
|
|
?.filter((document) => document.type !== 'approval')
|
|
?.map((documentType, index) => (
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 2}} key={index}>
|
|
<Stack direction="column" spacing={2} >
|
|
<a
|
|
href={documentType.url}
|
|
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
|
target="_blank"
|
|
>
|
|
<Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
|
|
</a>
|
|
</Stack>
|
|
{ !isReversal ? (
|
|
<Stack direction="column" spacing={2}>
|
|
<IconButton onClick={() => {
|
|
setDialogDeleteFileLog(true)
|
|
setPathFile(documentType.path)
|
|
}} aria-label="delete" size="small" sx={{ marginLeft: 'auto' }}>
|
|
<Delete color='error' fontSize="small" />
|
|
</IconButton>
|
|
</Stack>
|
|
) : null }
|
|
|
|
</Stack>
|
|
))}
|
|
|
|
<DialogDeleteFileLog
|
|
id={requestLog?.id}
|
|
path={pathFile}
|
|
setOpenDialog={setDialogDeleteFileLog}
|
|
openDialog={dialogDeleteFIleLog}
|
|
/>
|
|
|
|
<DialogUploadFileFinalLog
|
|
id={requestLog?.id}
|
|
setOpenDialog={setDialogUploadFileLog}
|
|
openDialog={dialogUploadFileLog}
|
|
/>
|
|
</Card>
|
|
</Grid>
|
|
|
|
{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={() => {
|
|
|
|
}}
|
|
>
|
|
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>
|
|
);
|
|
}
|