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

update

Browse Source
This commit is contained in:
Server D3 Linksehat
2024-10-14 10:35:21 +07:00
parent 611689235b
commit 013c57d00a
86 changed files with 9199 additions and 729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/dashboard/src/@types/corporates.ts
View File

@@ -16,6 +16,12 @@ export type Corporate = {
corporate_plans_count: number;
corporate_benefits_count: number;
employees_count: number;
phone: string;
phone_alarm_canter: string;
description_information: string;
linking_rules: string;
reason: string;
automatic_linking: number;
};

2
frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
View File

@@ -104,7 +104,7 @@ const navConfig = [
{ title: 'Live Chat', path: '/report/live-chat' },
{ title: 'Linksehat Payment', path: '/report/linksehat-payments' },
// { title: 'Prescription', path: '/report/prescription' },
{ title: 'Doctor Rating', path: '/report/doctorrating' },
{ title: 'Doctor Rating', path: '/report/doctor-rating' },
],
},

19
frontend/dashboard/src/pages/Corporates/Form.tsx
View File

@@ -254,6 +254,9 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
linking_rules: currentCorporate?.linking_rules || ['nric', 'nik', 'member_id'],
type: currentCorporate?.type || 'corporate',
logo: currentCorporate?.logo || '',
phone: currentCorporate?.phone || '',
phone_alarm_canter: currentCorporate?.phone_alarm_canter || '',
description_information: currentCorporate?.description_information || '',
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[currentCorporate]
@@ -327,6 +330,9 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
formData.append('policy_start', fPostFormat(data.policy_start));
formData.append('policy_end', fPostFormat(data.policy_end));
formData.append('linking_rules', data.linking_rules);
formData.append('description_information', data.description_information);
formData.append('phone', data.phone);
formData.append('phone_alarm_canter', data.phone_alarm_canter);
// console.log('MOTHERFUCKER', data.linking_rules)
@@ -532,6 +538,12 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
<Typography variant='subtitle1' color="#637381">Corporate Name*</Typography>
<RHFTextField name="name" label="Corporate Name" disabled={isDisabled} />
<Typography variant='subtitle1' color="#637381">Corporate Phone</Typography>
<RHFTextField name="phone" label="Corporate Phone" />
<Typography variant='subtitle1' color="#637381">Alarm Center Phone</Typography>
<RHFTextField name="phone_alarm_canter" label="Alarm Center Phone" />
<Typography variant='subtitle1' color="#637381">Payor ID*</Typography>
<RHFTextField name="payor_id" label="Payor ID" disabled={isDisabled} />
@@ -560,6 +572,13 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
<RHFEditor name="help_text" />
</Stack>
<Stack spacing={1}>
<Typography variant="subtitle1" color="#637381">
Description Letter of Guarantee
</Typography>
<RHFEditor name="description_information" />
</Stack>
{/* <div>
<LabelStyle>Images</LabelStyle>
<RHFUploadMultiFile

3
frontend/dashboard/src/pages/Corporates/Plan/List.tsx
View File

@@ -60,6 +60,7 @@ import Label from '@/components/Label';
import DialogUpdateStatus from '@/components/DialogUpdateStatus';
import {Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { fNumber } from '@/utils/formatNumber';
export default function CorporatePlanList() {
@@ -478,7 +479,7 @@ export default function CorporatePlanList() {
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.type}</TableCell>
<TableCell align="left">{row.limit_rules}</TableCell>
<TableCell align="left">{row.limit_rules ? fNumber(row.limit_rules) : row.limit_rules}</TableCell>
<TableCell align="center">
{row.active == 1 ?

147
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogBenefit.tsx
View File

@@ -40,6 +40,11 @@ type BenefitSelected = {
id: number,
description: string,
benefit_id: number,
family_plan: string,
family_plan_plans: string,
limit_amount: number,
limit_amount_plan: number,
max_frequency_period: number,
}
@@ -54,6 +59,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
const [valBenefitNameError, setValBenefitNameError] = useState('');
const benefitNameData = requestLog?.benefit;
const [benefitSelected, setBenefitSelected] = useState<BenefitSelected[]>([]);
const [isDisabled, setisDisable] = useState(false);
const handleConditionChangeService = (event) => {
const selectedItem = event.target.value;
@@ -186,15 +192,125 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
}
}
const totalUsage = () => {
let realTimeUsageMember = 0
for (let key in requestLog?.member_usage_benefit) {
if (requestLog?.member_usage_benefit.hasOwnProperty(key)) {
let value = requestLog?.member_usage_benefit[key];
// Menggunakan parseFloat() untuk mengonversi nilai menjadi angka
let numericValue = parseFloat(value);
// Memeriksa apakah numericValue adalah angka yang valid
if (!isNaN(numericValue)) {
realTimeUsageMember += numericValue;
}
}
}
let totalAmountMember = 0
for (let key in benefitData) {
// Menambahkan nilai amount_approved ke totalAmount
totalAmountMember += Number(benefitData[key].amount_approved);
}
return realTimeUsageMember+totalAmountMember
}
const handleOnChangeNominal = (key) => {
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
// setValue(`benefit_data.${key}.amount_approved`, 0);
setError(`benefit_data.${key}.amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
if (benefitSelected[key].family_plan == 'S' || benefitSelected[key].family_plan == 'F'){
if (requestLog?.member_usage_benefit && benefitSelected[key] && benefitData[key]) {
let limitAmount = Number(benefitSelected[key].limit_amount) || 0;
let limitAmountPlan = Number(benefitSelected[key].limit_amount_plan) || 0;
// Periksa apakah limitAmount Benefit lebih besar dari realTimeUsage
if (limitAmountPlan != 999999999){
let realTimeUsage = 0;
let value = 0;
for (let key in requestLog?.member_usage_benefit) {
if (requestLog?.member_usage_benefit.hasOwnProperty(key)) {
let value = requestLog?.member_usage_benefit[key];
// Menggunakan parseFloat() untuk mengonversi nilai menjadi angka
let numericValue = parseFloat(value);
// Memeriksa apakah numericValue adalah angka yang valid
if (!isNaN(numericValue)) {
realTimeUsage += numericValue;
}
}
}
// console.log(benefitData, 'test')
let totalAmount = 0;
for (let key in benefitData) {
// Menambahkan nilai amount_approved ke totalAmount
totalAmount += Number(benefitData[key].amount_approved);
}
// Hitung penggunaan waktu nyata
realTimeUsage += totalAmount;
let excess = realTimeUsage - limitAmountPlan
let incurred = Number(benefitData[key].amount_incurred);
if (realTimeUsage === limitAmountPlan){
setisDisable(true)
setValue(`benefit_data.${key}.amount_not_approved`, incurred);
} else {
setisDisable(false)
}
if (limitAmountPlan < realTimeUsage) {
setValue(`benefit_data.${key}.amount_not_approved`, excess);
setValue(`benefit_data.${key}.amount_approved`, incurred - excess);
setError(`benefit_data.${key}.amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmountPlan) } , silakan isikan di Amount Excess` });
} else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
}
} else if (limitAmount != 999999999) { // Periksa apakah limitAmount Benefit lebih besar dari realTimeUsage
// Konversi nilai ke angka dengan aman
let memberUsage = Number(requestLog.member_usage_benefit[benefitSelected[key].id]) || 0;
let amountApproved = Number(benefitData[key].amount_approved) || 0;
// Hitung penggunaan waktu nyata
let realTimeUsage = memberUsage + amountApproved;
let value = realTimeUsage - limitAmount
if (limitAmount < realTimeUsage) {
setValue(`benefit_data.${key}.amount_not_approved`, value);
setError(`benefit_data.${key}.amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmount) } , silakan isikan di Amount Excess` });
} else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
}
} else {
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
}
}
if (totalAll().totalAmountApproved + totalAll().totalAmountNotApproved === totalAll().totalAmountIncurred) {
clearErrors(`benefit_data.${key}.excess_paid`);
} else {
setError(`benefit_data.${key}.excess_paid`, { message: 'Total Amount Excess tidak sama dengan Total Amount Incurred' });
}
}
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
setError(`benefit_data.${key}.amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
}
}
}
const handleOnChangeNotApprove = (key, value) => {
setValue(`benefit_data.${key}.excess_paid`, value);
if (totalAll().totalAmountApproved + totalAll().totalAmountNotApproved === totalAll().totalAmountIncurred) {
clearErrors(`benefit_data.${key}.excess_paid`);
} else {
setError(`benefit_data.${key}.excess_paid`, { message: 'Total Amount Excess tidak sama dengan Total Amount Incurred' });
}
};
// Submit Form
// =====================================
const submitHandler = async (data: BenefitConfigurationListType) => {
@@ -318,6 +434,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
setValue(`benefit_data.${index}.amount_approved`, event.target.value)
handleOnChangeNominal(index)}
}
disabled={isDisabled}
/>
</Grid>
</Grid>
@@ -338,6 +455,10 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
name={`benefit_data.${index}.amount_not_approved`}
placeholder='Amount Not Approved'
required
onChange={(event) => {
setValue(`benefit_data.${index}.amount_not_approved`, event.target.value)
handleOnChangeNotApprove(index, event.target.value)}
}
/>
</Grid>
</Grid>
@@ -432,7 +553,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
Total Benefit
Total Benefit
</Typography>
</Grid>
@@ -507,7 +628,21 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
</Grid>
</Box>
</Grid>
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={3}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
Total Usage / Limit
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
{fNumber(totalUsage())} / {fNumber(benefitSelected[0].limit_amount_plan) }
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>

206
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation copy.tsx Executable file
View File

@@ -0,0 +1,206 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, 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 { fDateOnly, 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 [formData, setFormData] = useState({
discharge_date: requestLog?.discharge_date,
id: requestLog?.id,
status: approve || '',
catatan: '',
icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.id, label: diagnosis.name })) : []
});
const [icdOptions, setIcdOptions] = useState([
{ value: '-', label: '-' }
]);
useEffect(() => {
// Ambil data dari API dan atur opsi ICD
axios.get('diagnosis')
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
useEffect(() => {
// Update formData setiap kali approve berubah
setFormData(prevData => ({
...prevData,
status: approve || '',
}));
}, [approve]);
const handleChange = (field, value) => {
setFormData((prevData) => ({
...prevData,
[field]: value,
}));
};
const handleApprove = () => {
setFormData((prevData) => ({
...prevData,
status: approve,
}));
handleSubmit();
};
const handleSubmit = () => {
axios
.post(`customer-service/request/final-log`, formData)
.then((response) => {
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
setOpenDialog(false);
if (requestLog?.service_type == 'Inpatient'){
navigate('/case_management/inpatient_monitoring');
} else {
navigate('/custormer-service/final-log');
}
})
.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 marginBottom2 = {
marginBottom: 2,
}
const handleCloseDialog = () => {
setOpenDialog(false);
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</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>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => handleChange('icdCodes', newValues.map((value) => value.value))}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
{approve == 'approved' ? (
<Button color="primary" variant="contained" onClick={() => handleApprove()}>Approve</Button>
) : (
<Button color="error" variant="contained" onClick={() => handleApprove()}>Decline</Button>
) }
</DialogActions>
</Stack>
);
return (
<MuiDialog
title={{name: "Confirmation"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}

221
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation.tsx
View File

@@ -1,6 +1,5 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Autocomplete, Button, Card, DialogActions, Grid, TextField, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
@@ -26,25 +25,15 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
id: requestLog?.id,
status: approve || '',
catatan: '',
icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.id, label: diagnosis.name })) : []
icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.value, label: diagnosis.label })) : []
});
const [icdOptions, setIcdOptions] = useState([
{ value: '-', label: '-' }
]);
useEffect(() => {
// Ambil data dari API dan atur opsi ICD
axios.get('diagnosis')
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
const [searchIcd, setSearchIcd] = useState('');
useEffect(() => {
// Update formData setiap kali approve berubah
setFormData(prevData => ({
@@ -58,7 +47,6 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
...prevData,
[field]: value,
}));
};
const handleApprove = () => {
@@ -68,7 +56,17 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
}));
handleSubmit();
};
const handleSearch = (search) => {
setSearchIcd(search);
axios.get('diagnosis?search=' + search)
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}
const handleSubmit = () => {
axios
@@ -76,7 +74,7 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
.then((response) => {
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
setOpenDialog(false);
if (requestLog?.service_type == 'Inpatient'){
if (requestLog?.service_type === 'Inpatient') {
navigate('/case_management/inpatient_monitoring');
} else {
navigate('/custormer-service/final-log');
@@ -87,120 +85,117 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
});
}
const style1 = {
color: '#919EAB',
width: '30%'
}
};
const style2 = {
width: '70%'
}
};
const marginBottom1 = {
marginBottom: 1,
}
};
const marginBottom2 = {
marginBottom: 2,
}
};
const handleCloseDialog = () => {
setOpenDialog(false);
}
};
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</Typography>
<Typography variant="subtitle2">Are you sure to {approve === 'approved' ? 'approve' : 'decline'} this final log?</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>
<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>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => handleChange('icdCodes', newValues.map((value) => value.value))}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Card sx={{ padding: 2, marginTop: 2 }}>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={formData.icdCodes}
onChange={(e, newValues) => handleChange('icdCodes', newValues)}
inputValue={searchIcd}
onInputChange={(e, newInputValue) => handleSearch(newInputValue)}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{ color: '#212B36', borderColor: '#919EAB52' }} onClick={handleCloseDialog}>Cancel</Button>
{approve == 'approved' ? (
<Button color="primary" variant="contained" onClick={() => handleApprove()}>Approve</Button>
) : (
<Button color="error" variant="contained" onClick={() => handleApprove()}>Decline</Button>
) }
</DialogActions>
{approve === 'approved' ? (
<Button color="primary" variant="contained" onClick={handleApprove}>Approve</Button>
) : (
<Button color="error" variant="contained" onClick={handleApprove}>Decline</Button>
)}
</DialogActions>
</Stack>
);
);
return (
<MuiDialog
title={{name: "Confirmation"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
title={{ name: "Confirmation" }}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}
);
}

76
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditBenefit.tsx
View File

@@ -31,10 +31,19 @@ type DialogDeleteType = {
total: any
}
type BenefitSelected = {
id: number,
description: string,
benefit_id: number,
family_plan: string,
limit_amount: number,
}
export default function DialogEditBenefit({id, data, setOpenDialog, openDialog, onSubmit, total} : DialogDeleteType ) {
const handleCloseDialog = () => {
setOpenDialog(false);
}
const [benefitSelected, setBenefitSelected] = useState<BenefitSelected[]>([]);
// setup form
// ====================================
@@ -85,15 +94,70 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,
}
}
const findItemById = (id) => {
return total.benefit.find(item => item.id === id);
}
const handleOnChangeNominal = (key) => {
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
// setValue(`benefit_data.${key}.amount_approved`, 0);
setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
let benefitData = findItemById(data?.benefit_id)
if (benefitData.family_plan == 'S' || benefitData.family_plan == 'F'){
// Konversi nilai ke angka dengan aman
let limitAmount = Number(benefitData.limit_amount) || 0;
let limitAmountPlan = Number(benefitData.limit_amount_plan) || 0;
if (limitAmountPlan != 999999999){
let realTimeUsage = totalAll().totalAmountApproved;
console.log(limitAmountPlan, 'test')
if (limitAmountPlan < realTimeUsage) {
setError(`amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmountPlan) } , silakan isikan di Amount Excess` });
} else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`amount_approved`);
}
} else if (limitAmount != 999999999) {
let memberUsage = Number(total.totalLimit[benefitData.id]) || 0;
let amountApproved = Number(parseFloat(watch('amount_approved'))) || 0;
// Hitung penggunaan waktu nyata
let realTimeUsage = memberUsage + amountApproved;
// Periksa apakah limitAmount lebih besar dari realTimeUsage
if (limitAmount < realTimeUsage) {
setError(`amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmount) } , silakan isikan di Amount Excess` });
} else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
// setValue(`benefit_data.${key}.amount_approved`, 0);
setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
} else {
clearErrors(`amount_approved`);
}
} else {
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`amount_approved`);
}
}
} else {
clearErrors(`amount_approved`);
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
} else {
clearErrors(`amount_approved`);
}
}
}
const handleOnChangeNotApprove = (key, value) => {
let amountApproved = Number(parseFloat(watch('amount_approved'))) || 0;
let amountNotApproved = Number(parseFloat(watch('amount_not_approved'))) || 0;
let amountIncurred = Number(parseFloat(watch('amount_incurred'))) || 0;
setValue(`excess_paid`, value);
console.log(amountApproved + amountNotApproved, amountIncurred, 'test')
if ((amountApproved + amountNotApproved) !== amountIncurred) {
setError(`amount_not_approved`, {message: 'Amount Not Approve tidak sama dengan total Amount Incurred'});
} else {
clearErrors(`amount_not_approved`);
}
};
// if (totalAmountIncurred !== (totalAmountApproved+totalAmountNotApproved)){
// // alert('Total Incurred tidak sama dengan Total Approve + Total Not Approve')
// // setValue('amount_approved', data?.amount_approved)
@@ -203,6 +267,10 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,
name={`amount_not_approved`}
placeholder='Amount Not Approved'
required
onChange={(event) => {
setValue(`amount_not_approved`, event.target.value)
handleOnChangeNotApprove(id, event.target.value)}
}
/>
</Grid>
</Grid>

284
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG copy.tsx Executable file
View File

@@ -0,0 +1,284 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, 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 { fDateOnly, 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;
requestLog: DetailFinalLogType|undefined;
}
export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialog, onSubmit} : DialogConfirmationType ) {
const navigate = useNavigate();
const [formData, setFormData] = useState({
billing_no: requestLog?.billing_no,
invoice_no: requestLog?.invoice_no,
discharge_date: requestLog?.discharge_date,
id: requestLog?.id,
catatan: requestLog?.catatan,
icdCodes: requestLog?.diagnosis
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
: [],
reason: requestLog?.reason
});
const [icdOptions, setIcdOptions] = useState([
{ value: '-', label: '-' }
]);
useEffect(() => {
// Ambil data dari API dan atur opsi ICD
axios.get('diagnosis')
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
useEffect(() => {
if (requestLog) {
setFormData({
discharge_date: requestLog.discharge_date,
billing_no: requestLog.billing_no,
invoice_no: requestLog.invoice_no,
id: requestLog.id,
catatan: requestLog.catatan,
icdCodes: requestLog.diagnosis
? requestLog.diagnosis.map(diagnosis => diagnosis.code)
: [],
reason: requestLog.reason
});
}
}, [requestLog]);
const handleChange = (field, value) => {
setFormData((prevData) => ({
...prevData,
[field]: value,
}));
if (field === 'reason') {
setIsReasonSelected(!!value);
}
};
const handleApprove = () => {
setFormData((prevData) => ({
...prevData,
}));
handleSubmit();
};
const handleSubmit = () => {
if (isReasonSelected && formData.reason !== '') {
axios
.post(`customer-service/request/final-log`, formData)
.then((response) => {
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
setOpenDialog(false);
navigate('/custormer-service/final-log/detail/' + requestLog?.id)
window.location.reload()
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
} else {
setIsReasonSelected(false);
alert('Silakan pilih alasan sebelum mengirimkan data.');
}
}
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const marginBottom2 = {
marginBottom: 2,
}
const resetForm = () => {
setFormData({
discharge_date: requestLog?.discharge_date,
id: requestLog?.id,
billing_no: requestLog?.billing_no,
invoice_no: requestLog?.invoice_no,
catatan: requestLog?.catatan,
icdCodes: requestLog?.diagnosis
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
: [],
reason: requestLog?.reason
});
};
const [isReasonSelected, setIsReasonSelected] = useState(true);
const handleCloseDialog = () => {
setOpenDialog(false);
resetForm();
}
const reasons = [
{ value: 'agreement', label: 'Agreement changed' },
{ value: 'endorsement', label: 'Endorsement' },
{ value: 'renewal', label: 'Renewal' },
{ value: 'wrong_setting', label: 'Wrong Setting' },
// Add more options as needed
];
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to edit this final log ?</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>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Invoice Number</Typography>
<TextField
label="Invoice Number"
variant="outlined"
fullWidth
value={formData.invoice_no}
onChange={(e) => handleChange('invoice_no', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Billing Number</Typography>
<TextField
label="Billing Number"
variant="outlined"
fullWidth
value={formData.billing_no}
onChange={(e) => handleChange('billing_no', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : '-'}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => {
const selectedCodes = newValues.map((value) => value.value);
setFormData({ ...formData, icdCodes: selectedCodes });
}}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
<Autocomplete
options={reasons}
getOptionLabel={(option) => option.label}
fullWidth
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
onChange={(e, newValue) => handleChange('reason', newValue?.value)}
renderInput={(params) => (
<TextField
{...params}
label="Reason"
variant="outlined"
required
error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Button color="primary" variant="contained" onClick={() => handleApprove()}>Update</Button>
</DialogActions>
</Stack>
);
return (
<MuiDialog
title={{name: "Update"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}

66
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG.tsx
View File

@@ -26,9 +26,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
discharge_date: requestLog?.discharge_date,
id: requestLog?.id,
catatan: requestLog?.catatan,
icdCodes: requestLog?.diagnosis
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
: [],
icdCodes: requestLog?.diagnosis,
reason: requestLog?.reason
});
@@ -36,8 +34,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
{ value: '-', label: '-' }
]);
const [searchIcd, setSearchIcd] = useState('');
useEffect(() => {
// Ambil data dari API dan atur opsi ICD
// Ambil data dari API dan atur opsi ICD
axios.get('diagnosis')
.then((response) => {
setIcdOptions(response.data.data);
@@ -45,23 +45,23 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
useEffect(() => {
if (requestLog) {
setFormData({
discharge_date: requestLog.discharge_date,
billing_no: requestLog.billing_no,
invoice_no: requestLog.invoice_no,
id: requestLog.id,
catatan: requestLog.catatan,
icdCodes: requestLog.diagnosis
? requestLog.diagnosis.map(diagnosis => diagnosis.code)
: [],
reason: requestLog.reason
});
}
}, [requestLog]);
if (requestLog) {
setFormData({
discharge_date: requestLog.discharge_date,
billing_no: requestLog.billing_no,
invoice_no: requestLog.invoice_no,
id: requestLog.id,
catatan: requestLog.catatan,
icdCodes: requestLog.diagnosis,
reason: requestLog.reason
});
}
}, [requestLog]);
const handleChange = (field, value) => {
setFormData((prevData) => ({
@@ -80,6 +80,17 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
}));
handleSubmit();
};
const handleSearch = (search) => {
setSearchIcd(search);
axios.get('diagnosis?search=' + search)
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}
const handleSubmit = () => {
@@ -100,8 +111,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
alert('Silakan pilih alasan sebelum mengirimkan data.');
}
}
const style1 = {
color: '#919EAB',
width: '30%'
@@ -123,13 +133,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
billing_no: requestLog?.billing_no,
invoice_no: requestLog?.invoice_no,
catatan: requestLog?.catatan,
icdCodes: requestLog?.diagnosis
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
: [],
icdCodes: requestLog?.diagnosis,
reason: requestLog?.reason
});
};
const [isReasonSelected, setIsReasonSelected] = useState(true);
const handleCloseDialog = () => {
@@ -227,11 +234,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => {
const selectedCodes = newValues.map((value) => value.value);
setFormData({ ...formData, icdCodes: selectedCodes });
}}
value={formData.icdCodes}
onChange={(e, newValues) => handleChange('icdCodes', newValues)}
inputValue={searchIcd}
onInputChange={(e, newInputValue) => handleSearch(newInputValue)}
renderInput={(params) => (
<TextField
{...params}
@@ -247,7 +253,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
options={reasons}
getOptionLabel={(option) => option.label}
fullWidth
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
value={reasons.find((r) => r.value == formData.reason) || null} // Use find to match the default value
onChange={(e, newValue) => handleChange('reason', newValue?.value)}
renderInput={(params) => (
<TextField

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

@@ -140,6 +140,8 @@ export default function Detail() {
totalAmountApproved : totalAmountApprove,
totalAmountNotApproved : totalAmountNotApprove,
totalExcessPaid : totalExcessPaid,
totalLimit : requestLog?.member_usage_benefit,
benefit : requestLog?.benefit,
}
// Handle Delete File LOG
const [pathFile, setPathFile] = useState('')
@@ -254,7 +256,7 @@ export default function Detail() {
{requestLog?.diagnosis?.length > 0 ? (
<ul>
{requestLog.diagnosis.map((diagnosisItem, index) => (
<li key={index}>{diagnosisItem.code} - {diagnosisItem.name}</li>
<li key={index}>{diagnosisItem.value} - {diagnosisItem.label}</li>
// Replace 'name' with the property you want to display
))}
</ul>

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

@@ -61,12 +61,13 @@ export type DetailFinalLogType = {
exclusion : Exclusion[],
medicine : Medicine[],
files : file[],
member_usage_benefit : number
}
export type Diagnosis = {
id : number,
name : string,
code : string
value : string,
label : string
}
export type BenefitData = {
@@ -85,6 +86,7 @@ export type BenefitData = {
export type BenefitConfigurationListType = {
request_log_id: number|undefined,
benefit_name: string,
benefit_id: number,
benefit: {
description: string
},

35
frontend/dashboard/src/pages/Report/DoctorRating_v2/Index.tsx Executable file
View File

@@ -0,0 +1,35 @@
import { Card, Grid, Container } from '@mui/material';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import List from './List';
export default function Index() {
const { themeStretch } = useSettings();
const { id } = useParams();
const pageTitle = 'Doctor Ratings';
return (
<Page title={pageTitle}>
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={pageTitle}
links={[
{
name: 'Report',
href: '#',
},
{
name: 'Doctor Ratings',
href: '/report/doctor-rating',
},
]}
/>
<List />
</Container>
</Page>
);
}

1026
frontend/dashboard/src/pages/Report/DoctorRating_v2/List.tsx Executable file
View File

File diff suppressed because it is too large Load Diff

35
frontend/dashboard/src/pages/Report/KatalogDokter/Index.tsx Executable file
View File

@@ -0,0 +1,35 @@
import { Card, Grid, Container } from '@mui/material';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import List from './List';
export default function Index() {
const { themeStretch } = useSettings();
const { id } = useParams();
const pageTitle = 'Katalog Dokter & Profile';
return (
<Page title={pageTitle}>
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={pageTitle}
links={[
{
name: 'Report',
href: '#',
},
{
name: 'Katalog Dokter & Profile',
href: '/report/katalog-dokter',
},
]}
/>
<List />
</Container>
</Page>
);
}

1027
frontend/dashboard/src/pages/Report/KatalogDokter/List.tsx Executable file
View File

File diff suppressed because it is too large Load Diff

60
frontend/dashboard/src/pages/Report/Prescription/Index.tsx
View File

@@ -1,37 +1,35 @@
import { Card, Grid, Container } from '@mui/material';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '@/components/HeaderBreadcrumbs';
import Page from '@/components/Page';
import useSettings from '@/hooks/useSettings';
import List from '../Prescription/List';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import List from './List';
export default function Prescription(){
const { themeStretch } = useSettings();
export default function LinksehatPayments() {
const { themeStretch } = useSettings();
const { id } = useParams();
const { id } = useParams();
const pageTitle = 'Prescription';
const pageTitle = 'Resep Online';
return (
<Page title={pageTitle}>
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={pageTitle}
links={[
{
name: 'Report',
href: '/report',
},
{
name: 'Resep Online',
href: '/report/prescription',
},
]}
/>
return(
<Page title = {pageTitle}>
<Container maxWidth = {themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs heading= {pageTitle}
links={[
{
name: 'Report',
href: '/report',
},
{
name: 'Prescription',
href: '/prescription',
},
]}
/>
<List/>
</Container>
</Page>
);
}
<List />
</Container>
</Page>
);
}

832
frontend/dashboard/src/pages/Report/Prescription/List.tsx
View File

@@ -26,6 +26,8 @@ import {
Autocomplete,
InputAdornment,
IconButton,
InputLabel,
Menu,
} from '@mui/material';
import {
@@ -39,6 +41,7 @@ import {
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
// components
import AutocompleteHealthcare from '@/components/autocomplete/AutocompleteHealthcare';
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
@@ -49,9 +52,8 @@ import { Props } from '../../../components/editor/index';
import { red } from '@mui/material/colors';
import { margin, padding } from '@mui/system';
import { enqueueSnackbar } from 'notistack';
import { fNumber } from '@/utils/formatNumber';
import { Controller } from 'react-hook-form';
import { User } from '../../../Models/User';
import SvgIconStyle from '../../../components/SvgIconStyle';
import { GridSearchIcon } from '@mui/x-data-grid';
@@ -59,370 +61,520 @@ import { Search } from '@mui/icons-material';
import { Icon } from '@iconify/react';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { MenuItem } from '@mui/material';
import { fDateOnly, fDateTime } from '@/utils/formatTime';
import AutocompleteLinksehatHealthcare from '@/components/autocomplete/AutocompleteLinksehatHealthcare';
import { LoadingButton } from '@mui/lab';
import UploadIcon from '@mui/icons-material/Upload';
export default function List(){
// ----------------------------------------------------------------------
export default function List() {
// Generate the every row of the table
const navigate = useNavigate();
const { organization_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [organizationOptions, setOrganizationOptions] = useState([]);
const [searchParamsPaymentStatus, setSearchParamsPaymentStatus] = useSearchParams();
const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
useEffect(() => {
// axios.get(`/search-organizations`).then((response) => {
// setOrganizationOptions(response.data);
// });
}, []);
function Filter(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
//handle search
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
};
const handleSearchSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText);
};
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
const [importLoading, setImportLoading] = useState(false);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
useEffect(() => {
// Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, []);
const item = [
{
id: '',
value: '',
name: 'Semua',
},
];
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<form style={{ width: '100%' }}>
<Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Grid item xs={12} sm={12} md={12} lg={12}>
<TextField
id="search-input"
ref={searchInput}
variant="outlined"
fullWidth
onChange={handleSearchChange}
onKeyDown={(event) => {
if (event.key === 'Enter') {
handleSearchSubmit(event);
/* ------------------------------ handle params ----------------------------- */
const [appliedParams, setAppliedParams] = useState({});
const params = {
searchParams: searchParams,
setSearchParams: setSearchParams,
appliedParams: appliedParams,
setAppliedParams: setAppliedParams,
};
const handleGetData = (type :string) => {
const parameters =
Object.keys(appliedParams).length !== 0
? appliedParams
: Object.fromEntries([...searchParams.entries()]);
setImportLoading(true);
axios.get('/linksehat/prescription/generate-excel', {
params: { ...parameters },
}).then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
setImportLoading(false);
});
// axios.get(`report/logs/export`)
// .then((response) => {
// const link = document.createElement('a');
// link.href = response.data.data.file_url;
// link.setAttribute('download', response.data.data.file_name);
// document.body.appendChild(link);
// link.click();
// handleClose();
// })
}
//handle search
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
};
const handleSearchSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText);
};
useEffect(() => {
// Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, []);
return (
<form style={{ width: '100%' }}>
<Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Grid item md={7}>
<TextField
id="search-input"
ref={searchInput}
variant="outlined"
fullWidth
onChange={handleSearchChange}
onKeyDown={(event) => {
if (event.key === 'Enter') {
// handleSearchSubmit(event);
const filter = Object.fromEntries([
...searchParams.entries(),
['search', searchText],
]);
setSearchParams(filter);
loadDataTableData(filter);
}
}}
label="Search"
value={searchText}
InputProps={{
// startAdornment: (
// <InputAdornment position="start">
// <Search />
// </InputAdornment>
// ),
placeholder: 'Nama Pasien',
}}
/>
</Grid>
<Grid item md={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
value={searchParams.get('prescription_start')}
inputFormat="dd/MM/yyyy"
onChange={(value) => {
try {
if (value && !!Date.parse(value)) {
const date = value ? fDateOnly(value) : '';
var entries = [...searchParams.entries(), ['prescription_start', date ?? '']];
if (!searchParams.get('prescription_end')) {
entries = [...entries, ['prescription_end', date ?? '']];
}
}}
value={searchText}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
placeholder: 'Search',
}}
const filter = Object.fromEntries(entries);
setSearchParams(filter);
loadDataTableData(filter);
}
} catch (e) {}
}}
renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
/>
</LocalizationProvider>
</Grid>
<Grid item md={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
value={searchParams.get('prescription_end')}
inputFormat="dd/MM/yyyy"
onChange={(value) => {
try {
if (value && !!Date.parse(value)) {
const date = fDateOnly(value);
var entries = [...searchParams.entries(), ['prescription_end', date ?? '']];
if (!searchParams.get('prescription_start')) {
entries = [...entries, ['prescription_start', date ?? '']];
}
const filter = Object.fromEntries(entries);
setSearchParams(filter);
loadDataTableData(filter);
}
} catch (e) {}
}}
renderInput={(params) => (
<TextField
{...params}
fullWidth
label="End"
// error={!!error}
// helperText={error?.message}
// {...other}
/>
</Grid>
</Grid>
</form>
);
}
function FilterForm(props: any) {
return(
)}
/>
</LocalizationProvider>
</Grid>
<Grid item md={1}>
<LoadingButton
variant="outlined"
startIcon={<UploadIcon />}
sx={{ p: 1.8 }}
onClick={handleClick}
loading={importLoading}
>
Export
</LoadingButton>
<Menu
id="import-button"
anchorEl={anchorEl}
open={createMenu}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={() => {handleGetData('')}}>Download Excel</MenuItem>
</Menu>
</Grid>
</Grid>
</form>
);
}
function FilterForm(props: any) {
// IMPORT
return (
<Grid
container
spacing={2}
sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
>
<Grid item xs={12} md={12} lg={12}>
<Filter onSearch={applyItems} />
container
spacing={2}
sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
>
<Grid item xs={12} md={12} lg={12}>
<Filter onSearch={applyItems} />
</Grid>
</Grid>
</Grid>
);
}
);
}
function createData(doctor: Practitioner): Practitioner {
return {
...doctor,
/* user: doctor.user ? new User(doctor.user) : null; */
};
}
//TODO Create PaymentType
function createData(payments: any): any {
return {
...payments,
};
}
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const [openDialog, setOpenDialog] = React.useState(false);
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(true);
const [openDialog, setOpenDialog] = React.useState(false);
const handleDelete = (model: any) => {
axios
.delete(`/doctors/${row.id}`)
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.filter((model) => model.id != row.id),
});
enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
})
.catch((error) => {
enqueueSnackbar(
error.response.data.message ?? error.message ?? 'Failed Processing Request',
{ variant: 'error' }
);
});
};
return (
<React.Fragment>
<TableRow>
<TableCell>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.prescription_code ?? '-'}</TableCell>
<TableCell align="left">{row.date_consultation ? fDateTime(row.date_consultation) : '-'}</TableCell>
<TableCell align="left">{row.patient_name ?? '-'}</TableCell>
<TableCell align="left">{row.doctor_name ?? '-'}</TableCell>
{/* <TableCell align="center">
<ButtonGroup variant="text" aria-label="text button group">
<Link to={'/report/appointments/' + row.id + '/show'}>
<Button>
<Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
</Button>
</Link>
</ButtonGroup>
</TableCell> */}
</TableRow>
return (
<React.Fragment>
<TableRow>
<TableCell>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell
style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: 'rgba(244, 246, 248, 0.5)' }}
colSpan={12}
>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1, pb: 2, pl: 4 }}>
<Grid container>
<Grid item xs={12} sx={{ padding: 2 }}>
<Grid container>
<Grid item style={headStyle} xs={4}>
Jenis Obat (Drugs)
</Grid>
<Grid item style={headStyle} xs={4}>
Jumlah Obat (QTY)
</Grid>
<Grid item style={headStyle} xs={4}>
Cara Minum Obat
</Grid>
<TableCell align="left">{row.user ? row.user.sFirstName : '-'}</TableCell>
<TableCell align="left">{row.nIDDokter ? row.nIDDokter : '-'}</TableCell>
<TableCell align="left">{row.nRating ? row.nRating : '-'}</TableCell>
<TableCell align="left">{row.sNotes ? row.sNotes : '-'}</TableCell>
<TableCell align="left">{row.dCreateOn ? row.dCreateOn : '-'}</TableCell>
{row.items?.map((item) => (
<React.Fragment key={item.nID}>
<Grid item xs={4}>
<Typography>{item.sItemName}</Typography>
</Grid>
<Grid item xs={4}>
<Typography>{item.nQty}</Typography>
</Grid>
<Grid item xs={4}>
<Typography>{item.sSigna}</Typography>
</Grid>
</React.Fragment>
))}
{/* <TableCell align="center">
<ButtonGroup variant="text" aria-label="text button group">
<Link to={'/report/prescription/' + row.id + '/show'}>
<Button>
<Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
</Button>
</Link>
</ButtonGroup>
</TableCell> */}
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell
style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: 'rgba(244, 246, 248, 0.5)' }}
colSpan={6}
>
{/* <Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1, pb: 2, pl: 4 }}>
<Grid container>
<Grid item xs={12} sx={{ padding: 2 }}>
<Grid container>
<Grid item xs={6}>
Metode Pembayaran
</Grid>
<Grid item xs={6}>
: {row.payment_method ? row.payment_method : '-'}
</Grid>
<Grid item xs={6}>
Jenis Benefit
</Grid>
<Grid item xs={6}>
: -
</Grid>
<Grid item xs={6}>
Durasi
</Grid>
<Grid item xs={6}>
: {row.duration ? row.duration : '-'}
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Collapse> */}
</TableCell>
</TableRow>
</Box>
</Collapse>
</TableCell>
</TableRow>
{/* END COLLAPSIBLE ROW */}
{/* END COLLAPSIBLE ROW */}
<Dialog
open={openDialog}
onClose={() => {
setOpenDialog(false);
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent sx={{ p: 5 }}>
<Icon
icon="eva:trash-2-outline"
style={{
width: '100px',
height: '100px',
color: '#FF0000',
margin: 'auto',
display: 'block',
marginBottom: '20px',
alignContent: 'center',
}}
/>
<DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
Apakah anda yakin ingin menghapus
</DialogContentText>
<Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
{row.name}?
</Typography>
</DialogContent>
<DialogActions>
<Button
onClick={() => {
setOpenDialog(false);
}}
color="primary"
>
Batal
</Button>
{/* <Button
onClick={() => {
handleDelete(row.id);
}}
color="primary"
autoFocus
>
Hapus
</Button> */}
</DialogActions>
</Dialog>
</React.Fragment>
<Dialog
open={openDialog}
onClose={() => {
setOpenDialog(false);
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent sx={{ p: 5 }}>
<Icon
icon="eva:trash-2-outline"
style={{
width: '100px',
height: '100px',
color: '#FF0000',
margin: 'auto',
display: 'block',
marginBottom: '20px',
alignContent: 'center',
}}
/>
<DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
Apakah anda yakin ingin menghapus
</DialogContentText>
<Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
{row.name}?
</Typography>
</DialogContent>
<DialogActions>
<Button
onClick={() => {
setOpenDialog(false);
}}
color="primary"
>
Batal
</Button>
<Button
onClick={() => {
handleDelete(row.id);
}}
color="primary"
autoFocus
>
Hapus
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
);
}
const headStyle = {
fontWeight: 'bold',
};
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: '',
first_page_url: '',
last_page: 1,
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0,
});
const [dataTablePage, setDataTablePage] = useState(5);
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/linksehat/prescription', {
params: filter,
});
setDataTableLoading(false);
setDataTableData(response.data.data);
};
// const applyFilter = async (searchFilter: string) => {
// await loadDataTableData({ search: searchFilter });
// setSearchParams({ search: searchFilter });
// };
const applyItems = async (
searchFilter: string,
searchFilterOrganization: string,
searchFilterPaymentStatus: string,
searchFilterAppointmentStart: string,
searchFilterAppointmentEnd: string
) => {
await loadDataTableData({
search: searchFilter,
organization_id: searchFilterOrganization,
payment_status: searchFilterPaymentStatus,
prescription_start: searchFilterAppointmentStart,
prescription_end: searchFilterAppointmentEnd,
});
setSearchParamsFilter({
search: searchFilter,
organization_id: searchFilterOrganization,
payment_status: searchFilterPaymentStatus,
prescription_start: searchFilterAppointmentStart,
prescription_end: searchFilterAppointmentEnd,
});
};
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
};
useEffect(() => {
loadDataTableData();
}, []);
return (
<Stack>
{/* <Ambulace /> */}
<Card sx={{ marginTop: '30px' }}>
<FilterForm sx={{ marginTop: '100px' }} />
{/* The Main Table */}
<TableContainer component={Paper}>
<Table>
<TableBody>
<TableRow>
<TableCell>
</TableCell>
<TableCell style={headStyle} align="left">
Prescription Code
</TableCell>
<TableCell style={headStyle} align="left">
Date
</TableCell>
<TableCell style={headStyle} align="left">
Patient
</TableCell>
<TableCell style={headStyle} align="left">
Doctor
</TableCell>
{/* <TableCell style={headStyle} align="center">
Aksi
</TableCell> */}
</TableRow>
</TableBody>
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
Loading
</TableCell>
</TableRow>
</TableBody>
) : dataTableData.data.length == 0 ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map((row) => (
<Row key={row.nID} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}
const headStyle = {
fontWeight: 'bold',
};
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: '',
first_page_url: '',
last_page: 1,
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0,
});
const [dataTablePage, setDataTablePage] = useState(5);
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/doctorrating ', {
params: filter,
});
setDataTableLoading(false);
setDataTableData(response.data);
};
// const applyFilter = async (searchFilter: string) => {
// await loadDataTableData({ search: searchFilter });
// setSearchParams({ search: searchFilter });
// };
const applyItems = async (
searchFilter: string,
searchFilterOrganization: string,
searchFilterSpecialities: string
) => {
await loadDataTableData({
search: searchFilter,
organization_id: searchFilterOrganization,
speciality_id: searchFilterSpecialities,
});
setSearchParamsFilter({
search: searchFilter,
organization_id: searchFilterOrganization,
speciality_id: searchFilterSpecialities,
});
};
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
};
useEffect(() => {
loadDataTableData();
}, []);
return (
<Stack>
{/* <Ambulace /> */}
<Card sx={{ marginTop: '30px' }}>
<FilterForm sx={{ marginTop: '100px' }} />
{/* The Main Table */}
<TableContainer component={Paper}>
<Table>
<TableBody>
<TableRow>
{/* <TableCell colSpan={8} rowSpan={1} align="center" /> */}
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} rowSpan={2} align="left">
Nama User
</TableCell>
<TableCell style={headStyle} rowSpan={2} align="left">
ID Dokter
</TableCell>
<TableCell style={headStyle} rowSpan={2} align="left">
Rating
</TableCell>
<TableCell style={headStyle} rowSpan={2} align="left">
Notes
</TableCell>
<TableCell style={headStyle} rowSpan={2} align="left">
Created On
</TableCell>
</TableRow>
{/* <TableRow>
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} align="left">
Tanggal Booking
</TableCell>
<TableCell style={headStyle} align="left">
Tanggal Appointment
</TableCell>
<TableCell style={headStyle} align="left">
Faskes
</TableCell>
<TableCell style={headStyle} align="left">
Nama Dokter
</TableCell>
<TableCell style={headStyle} align="left">
Spesialisasi
</TableCell>
<TableCell style={headStyle} align="left">
Pasien
</TableCell>
<TableCell style={headStyle} align="left">
Dokter
</TableCell>
</TableRow> */}
</TableBody>
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
Loading
</TableCell>
</TableRow>
</TableBody>
) : (dataTableData.data && dataTableData.data.length === 0) ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData && dataTableData.map((row) => (
<Row key={row.id} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}

35
frontend/dashboard/src/pages/Report/RiwayatMedisPeserta/Index.tsx Executable file
View File

@@ -0,0 +1,35 @@
import { Card, Grid, Container } from '@mui/material';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import List from './List';
export default function LinksehatPayments() {
const { themeStretch } = useSettings();
const { id } = useParams();
const pageTitle = 'Riwayat Medis Peserta';
return (
<Page title={pageTitle}>
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={pageTitle}
links={[
{
name: 'Report',
href: '/report',
},
{
name: 'Riwayat Medis Peserta',
href: '/report/phr',
},
]}
/>
<List />
</Container>
</Page>
);
}

550
frontend/dashboard/src/pages/Report/RiwayatMedisPeserta/List.tsx Executable file
View File

@@ -0,0 +1,550 @@
import {
Box,
Button,
Card,
Collapse,
Paper,
Select,
SelectChangeEvent,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
Stack,
ButtonGroup,
Grid,
Chip,
Dialog,
DialogContent,
DialogContentText,
DialogActions,
FormControl,
Autocomplete,
InputAdornment,
IconButton,
InputLabel,
Menu,
} from '@mui/material';
import {
Link,
NavLink as RouterLink,
useSearchParams,
useNavigate,
useParams,
} from 'react-router-dom';
// hooks
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
// components
import AutocompleteHealthcare from '@/components/autocomplete/AutocompleteHealthcare';
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
import BasePagination from '../../../components/BasePagination';
import { Practitioner } from '../../../@types/doctor';
import CreateIcon from '@mui/icons-material/Create';
import { Props } from '../../../components/editor/index';
import { red } from '@mui/material/colors';
import { margin, padding } from '@mui/system';
import { enqueueSnackbar } from 'notistack';
import { fNumber } from '@/utils/formatNumber';
import { Controller } from 'react-hook-form';
import SvgIconStyle from '../../../components/SvgIconStyle';
import { GridSearchIcon } from '@mui/x-data-grid';
import { Search } from '@mui/icons-material';
import { Icon } from '@iconify/react';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { MenuItem } from '@mui/material';
import { fDateOnly, fDateTime } from '@/utils/formatTime';
import AutocompleteLinksehatHealthcare from '@/components/autocomplete/AutocompleteLinksehatHealthcare';
import { LoadingButton } from '@mui/lab';
import UploadIcon from '@mui/icons-material/Upload';
// ----------------------------------------------------------------------
export default function List() {
// Generate the every row of the table
const navigate = useNavigate();
const { organization_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [organizationOptions, setOrganizationOptions] = useState([]);
const [searchParamsPaymentStatus, setSearchParamsPaymentStatus] = useSearchParams();
const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
useEffect(() => {
// axios.get(`/search-organizations`).then((response) => {
// setOrganizationOptions(response.data);
// });
}, []);
function Filter(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
const [importLoading, setImportLoading] = useState(false);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
/* ------------------------------ handle params ----------------------------- */
const [appliedParams, setAppliedParams] = useState({});
const params = {
searchParams: searchParams,
setSearchParams: setSearchParams,
appliedParams: appliedParams,
setAppliedParams: setAppliedParams,
};
const handleGetData = (type :string) => {
const parameters =
Object.keys(appliedParams).length !== 0
? appliedParams
: Object.fromEntries([...searchParams.entries()]);
setImportLoading(true);
axios.get('/linksehat/phr/generate-excel', {
params: { ...parameters },
}).then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
setImportLoading(false);
});
// axios.get(`report/logs/export`)
// .then((response) => {
// const link = document.createElement('a');
// link.href = response.data.data.file_url;
// link.setAttribute('download', response.data.data.file_name);
// document.body.appendChild(link);
// link.click();
// handleClose();
// })
}
//handle search
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
};
const handleSearchSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText);
};
useEffect(() => {
// Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, []);
return (
<form style={{ width: '100%' }}>
<Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Grid item md={7}>
<TextField
id="search-input"
ref={searchInput}
variant="outlined"
fullWidth
onChange={handleSearchChange}
onKeyDown={(event) => {
if (event.key === 'Enter') {
// handleSearchSubmit(event);
const filter = Object.fromEntries([
...searchParams.entries(),
['search', searchText],
]);
setSearchParams(filter);
loadDataTableData(filter);
}
}}
label="Search"
value={searchText}
InputProps={{
// startAdornment: (
// <InputAdornment position="start">
// <Search />
// </InputAdornment>
// ),
placeholder: 'Nama Pasien',
}}
/>
</Grid>
<Grid item md={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
value={searchParams.get('livechat_start')}
inputFormat="dd/MM/yyyy"
onChange={(value) => {
try {
if (value && !!Date.parse(value)) {
const date = value ? fDateOnly(value) : '';
var entries = [...searchParams.entries(), ['livechat_start', date ?? '']];
if (!searchParams.get('livechat_end')) {
entries = [...entries, ['livechat_end', date ?? '']];
}
const filter = Object.fromEntries(entries);
setSearchParams(filter);
loadDataTableData(filter);
}
} catch (e) {}
}}
renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
/>
</LocalizationProvider>
</Grid>
<Grid item md={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
value={searchParams.get('livechat_end')}
inputFormat="dd/MM/yyyy"
onChange={(value) => {
try {
if (value && !!Date.parse(value)) {
const date = fDateOnly(value);
var entries = [...searchParams.entries(), ['livechat_end', date ?? '']];
if (!searchParams.get('livechat_start')) {
entries = [...entries, ['livechat_start', date ?? '']];
}
const filter = Object.fromEntries(entries);
setSearchParams(filter);
loadDataTableData(filter);
}
} catch (e) {}
}}
renderInput={(params) => (
<TextField
{...params}
fullWidth
label="End"
// error={!!error}
// helperText={error?.message}
// {...other}
/>
)}
/>
</LocalizationProvider>
</Grid>
<Grid item md={1}>
<LoadingButton
variant="outlined"
startIcon={<UploadIcon />}
sx={{ p: 1.8 }}
onClick={handleClick}
loading={importLoading}
>
Export
</LoadingButton>
<Menu
id="import-button"
anchorEl={anchorEl}
open={createMenu}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={() => {handleGetData('')}}>Download Excel</MenuItem>
</Menu>
</Grid>
</Grid>
</form>
);
}
function FilterForm(props: any) {
// IMPORT
return (
<Grid
container
spacing={2}
sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
>
<Grid item xs={12} md={12} lg={12}>
<Filter onSearch={applyItems} />
</Grid>
</Grid>
);
}
//TODO Create PaymentType
function createData(payments: any): any {
return {
...payments,
};
}
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const [openDialog, setOpenDialog] = React.useState(false);
const handleDelete = (model: any) => {
axios
.delete(`/doctors/${row.id}`)
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.filter((model) => model.id != row.id),
});
enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
})
.catch((error) => {
enqueueSnackbar(
error.response.data.message ?? error.message ?? 'Failed Processing Request',
{ variant: 'error' }
);
});
};
return (
<React.Fragment>
<TableRow>
<TableCell align="left">{row.healthcare ?? '-'}</TableCell>
<TableCell align="left">{row.patient_name ?? '-'}</TableCell>
<TableCell align="left">{row.doctor_name ?? '-'}</TableCell>
<TableCell align="left">{row.specialis ?? '-' }</TableCell>
<TableCell align="left">{row.date_consultation ? fDateTime(row.date_consultation) : '-'}</TableCell>
<TableCell align="left">{row.subject ?? '-'}</TableCell>
<TableCell align="left">{row.object ?? '-'}</TableCell>
<TableCell align="left">{row.assessment ?? '-'}</TableCell>
<TableCell align="left">{row.plan ?? '-'}</TableCell>
{/* <TableCell align="center">
<ButtonGroup variant="text" aria-label="text button group">
<Link to={'/report/appointments/' + row.id + '/show'}>
<Button>
<Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
</Button>
</Link>
</ButtonGroup>
</TableCell> */}
</TableRow>
<Dialog
open={openDialog}
onClose={() => {
setOpenDialog(false);
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent sx={{ p: 5 }}>
<Icon
icon="eva:trash-2-outline"
style={{
width: '100px',
height: '100px',
color: '#FF0000',
margin: 'auto',
display: 'block',
marginBottom: '20px',
alignContent: 'center',
}}
/>
<DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
Apakah anda yakin ingin menghapus
</DialogContentText>
<Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
{row.name}?
</Typography>
</DialogContent>
<DialogActions>
<Button
onClick={() => {
setOpenDialog(false);
}}
color="primary"
>
Batal
</Button>
<Button
onClick={() => {
handleDelete(row.id);
}}
color="primary"
autoFocus
>
Hapus
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
);
}
const headStyle = {
fontWeight: 'bold',
};
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: '',
first_page_url: '',
last_page: 1,
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0,
});
const [dataTablePage, setDataTablePage] = useState(5);
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/linksehat/phr', {
params: filter,
});
setDataTableLoading(false);
setDataTableData(response.data.data);
};
// const applyFilter = async (searchFilter: string) => {
// await loadDataTableData({ search: searchFilter });
// setSearchParams({ search: searchFilter });
// };
const applyItems = async (
searchFilter: string,
searchFilterOrganization: string,
searchFilterPaymentStatus: string,
searchFilterAppointmentStart: string,
searchFilterAppointmentEnd: string
) => {
await loadDataTableData({
search: searchFilter,
organization_id: searchFilterOrganization,
payment_status: searchFilterPaymentStatus,
livechat_start: searchFilterAppointmentStart,
livechat_end: searchFilterAppointmentEnd,
});
setSearchParamsFilter({
search: searchFilter,
organization_id: searchFilterOrganization,
payment_status: searchFilterPaymentStatus,
livechat_start: searchFilterAppointmentStart,
livechat_end: searchFilterAppointmentEnd,
});
};
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
};
useEffect(() => {
loadDataTableData();
}, []);
return (
<Stack>
{/* <Ambulace /> */}
<Card sx={{ marginTop: '30px' }}>
<FilterForm sx={{ marginTop: '100px' }} />
{/* The Main Table */}
<TableContainer component={Paper}>
<Table>
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">
Healthcare
</TableCell>
<TableCell style={headStyle} align="left">
Patient
</TableCell>
<TableCell style={headStyle} align="left">
Doctor
</TableCell>
<TableCell style={headStyle} align="left">
Speciality
</TableCell>
<TableCell style={headStyle} align="left">
Date
</TableCell>
<TableCell style={headStyle} align="left">
Subjective
</TableCell>
<TableCell style={headStyle} align="left">
Objective
</TableCell>
<TableCell style={headStyle} align="left">
Assessment
</TableCell>
<TableCell style={headStyle} align="left">
Plan
</TableCell>
{/* <TableCell style={headStyle} align="center">
Aksi
</TableCell> */}
</TableRow>
</TableBody>
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
Loading
</TableCell>
</TableRow>
</TableBody>
) : dataTableData.data.length == 0 ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map((row) => (
<Row key={row.nID} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}

35
frontend/dashboard/src/pages/Report/Rujukan/Index.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Card, Grid, Container } from '@mui/material';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import List from './List';
export default function LinksehatPayments() {
const { themeStretch } = useSettings();
const { id } = useParams();
const pageTitle = 'Rujukan';
return (
<Page title={pageTitle}>
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={pageTitle}
links={[
{
name: 'Report',
href: '/report',
},
{
name: 'Rujukan',
href: '/report/rujukan',
},
]}
/>
<List />
</Container>
</Page>
);
}

550
frontend/dashboard/src/pages/Report/Rujukan/List.tsx Normal file
View File

@@ -0,0 +1,550 @@
import {
Box,
Button,
Card,
Collapse,
Paper,
Select,
SelectChangeEvent,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
Stack,
ButtonGroup,
Grid,
Chip,
Dialog,
DialogContent,
DialogContentText,
DialogActions,
FormControl,
Autocomplete,
InputAdornment,
IconButton,
InputLabel,
Menu,
} from '@mui/material';
import {
Link,
NavLink as RouterLink,
useSearchParams,
useNavigate,
useParams,
} from 'react-router-dom';
// hooks
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
// components
import AutocompleteHealthcare from '@/components/autocomplete/AutocompleteHealthcare';
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
import BasePagination from '../../../components/BasePagination';
import { Practitioner } from '../../../@types/doctor';
import CreateIcon from '@mui/icons-material/Create';
import { Props } from '../../../components/editor/index';
import { red } from '@mui/material/colors';
import { margin, padding } from '@mui/system';
import { enqueueSnackbar } from 'notistack';
import { fNumber } from '@/utils/formatNumber';
import { Controller } from 'react-hook-form';
import SvgIconStyle from '../../../components/SvgIconStyle';
import { GridSearchIcon } from '@mui/x-data-grid';
import { Search } from '@mui/icons-material';
import { Icon } from '@iconify/react';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { MenuItem } from '@mui/material';
import { fDateOnly, fDateTime } from '@/utils/formatTime';
import AutocompleteLinksehatHealthcare from '@/components/autocomplete/AutocompleteLinksehatHealthcare';
import { LoadingButton } from '@mui/lab';
import UploadIcon from '@mui/icons-material/Upload';
// ----------------------------------------------------------------------
export default function List() {
// Generate the every row of the table
const navigate = useNavigate();
const { organization_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [organizationOptions, setOrganizationOptions] = useState([]);
const [searchParamsPaymentStatus, setSearchParamsPaymentStatus] = useSearchParams();
const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
useEffect(() => {
// axios.get(`/search-organizations`).then((response) => {
// setOrganizationOptions(response.data);
// });
}, []);
function Filter(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
const [importLoading, setImportLoading] = useState(false);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
/* ------------------------------ handle params ----------------------------- */
const [appliedParams, setAppliedParams] = useState({});
const params = {
searchParams: searchParams,
setSearchParams: setSearchParams,
appliedParams: appliedParams,
setAppliedParams: setAppliedParams,
};
const handleGetData = (type :string) => {
const parameters =
Object.keys(appliedParams).length !== 0
? appliedParams
: Object.fromEntries([...searchParams.entries()]);
setImportLoading(true);
axios.get('/linksehat/phr/generate-excel', {
params: { ...parameters },
}).then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
setImportLoading(false);
});
// axios.get(`report/logs/export`)
// .then((response) => {
// const link = document.createElement('a');
// link.href = response.data.data.file_url;
// link.setAttribute('download', response.data.data.file_name);
// document.body.appendChild(link);
// link.click();
// handleClose();
// })
}
//handle search
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
};
const handleSearchSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText);
};
useEffect(() => {
// Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, []);
return (
<form style={{ width: '100%' }}>
<Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Grid item md={7}>
<TextField
id="search-input"
ref={searchInput}
variant="outlined"
fullWidth
onChange={handleSearchChange}
onKeyDown={(event) => {
if (event.key === 'Enter') {
// handleSearchSubmit(event);
const filter = Object.fromEntries([
...searchParams.entries(),
['search', searchText],
]);
setSearchParams(filter);
loadDataTableData(filter);
}
}}
label="Search"
value={searchText}
InputProps={{
// startAdornment: (
// <InputAdornment position="start">
// <Search />
// </InputAdornment>
// ),
placeholder: 'Nama Pasien',
}}
/>
</Grid>
<Grid item md={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
value={searchParams.get('livechat_start')}
inputFormat="dd/MM/yyyy"
onChange={(value) => {
try {
if (value && !!Date.parse(value)) {
const date = value ? fDateOnly(value) : '';
var entries = [...searchParams.entries(), ['livechat_start', date ?? '']];
if (!searchParams.get('livechat_end')) {
entries = [...entries, ['livechat_end', date ?? '']];
}
const filter = Object.fromEntries(entries);
setSearchParams(filter);
loadDataTableData(filter);
}
} catch (e) {}
}}
renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
/>
</LocalizationProvider>
</Grid>
<Grid item md={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
value={searchParams.get('livechat_end')}
inputFormat="dd/MM/yyyy"
onChange={(value) => {
try {
if (value && !!Date.parse(value)) {
const date = fDateOnly(value);
var entries = [...searchParams.entries(), ['livechat_end', date ?? '']];
if (!searchParams.get('livechat_start')) {
entries = [...entries, ['livechat_start', date ?? '']];
}
const filter = Object.fromEntries(entries);
setSearchParams(filter);
loadDataTableData(filter);
}
} catch (e) {}
}}
renderInput={(params) => (
<TextField
{...params}
fullWidth
label="End"
// error={!!error}
// helperText={error?.message}
// {...other}
/>
)}
/>
</LocalizationProvider>
</Grid>
<Grid item md={1}>
<LoadingButton
variant="outlined"
startIcon={<UploadIcon />}
sx={{ p: 1.8 }}
onClick={handleClick}
loading={importLoading}
>
Export
</LoadingButton>
<Menu
id="import-button"
anchorEl={anchorEl}
open={createMenu}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={() => {handleGetData('')}}>Download Excel</MenuItem>
</Menu>
</Grid>
</Grid>
</form>
);
}
function FilterForm(props: any) {
// IMPORT
return (
<Grid
container
spacing={2}
sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
>
<Grid item xs={12} md={12} lg={12}>
<Filter onSearch={applyItems} />
</Grid>
</Grid>
);
}
//TODO Create PaymentType
function createData(payments: any): any {
return {
...payments,
};
}
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const [openDialog, setOpenDialog] = React.useState(false);
const handleDelete = (model: any) => {
axios
.delete(`/doctors/${row.id}`)
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.filter((model) => model.id != row.id),
});
enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
})
.catch((error) => {
enqueueSnackbar(
error.response.data.message ?? error.message ?? 'Failed Processing Request',
{ variant: 'error' }
);
});
};
return (
<React.Fragment>
<TableRow>
<TableCell align="left">{row.healthcare ?? '-'}</TableCell>
<TableCell align="left">{row.patient_name ?? '-'}</TableCell>
<TableCell align="left">{row.doctor_name ?? '-'}</TableCell>
<TableCell align="left">{row.specialis ?? '-' }</TableCell>
<TableCell align="left">{row.date_consultation ? fDateTime(row.date_consultation) : '-'}</TableCell>
<TableCell align="left">{row.subject ?? '-'}</TableCell>
<TableCell align="left">{row.object ?? '-'}</TableCell>
<TableCell align="left">{row.assessment ?? '-'}</TableCell>
<TableCell align="left">{row.plan ?? '-'}</TableCell>
{/* <TableCell align="center">
<ButtonGroup variant="text" aria-label="text button group">
<Link to={'/report/appointments/' + row.id + '/show'}>
<Button>
<Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
</Button>
</Link>
</ButtonGroup>
</TableCell> */}
</TableRow>
<Dialog
open={openDialog}
onClose={() => {
setOpenDialog(false);
}}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent sx={{ p: 5 }}>
<Icon
icon="eva:trash-2-outline"
style={{
width: '100px',
height: '100px',
color: '#FF0000',
margin: 'auto',
display: 'block',
marginBottom: '20px',
alignContent: 'center',
}}
/>
<DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
Apakah anda yakin ingin menghapus
</DialogContentText>
<Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
{row.name}?
</Typography>
</DialogContent>
<DialogActions>
<Button
onClick={() => {
setOpenDialog(false);
}}
color="primary"
>
Batal
</Button>
<Button
onClick={() => {
handleDelete(row.id);
}}
color="primary"
autoFocus
>
Hapus
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
);
}
const headStyle = {
fontWeight: 'bold',
};
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: '',
first_page_url: '',
last_page: 1,
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0,
});
const [dataTablePage, setDataTablePage] = useState(5);
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/linksehat/phr', {
params: filter,
});
setDataTableLoading(false);
setDataTableData(response.data.data);
};
// const applyFilter = async (searchFilter: string) => {
// await loadDataTableData({ search: searchFilter });
// setSearchParams({ search: searchFilter });
// };
const applyItems = async (
searchFilter: string,
searchFilterOrganization: string,
searchFilterPaymentStatus: string,
searchFilterAppointmentStart: string,
searchFilterAppointmentEnd: string
) => {
await loadDataTableData({
search: searchFilter,
organization_id: searchFilterOrganization,
payment_status: searchFilterPaymentStatus,
livechat_start: searchFilterAppointmentStart,
livechat_end: searchFilterAppointmentEnd,
});
setSearchParamsFilter({
search: searchFilter,
organization_id: searchFilterOrganization,
payment_status: searchFilterPaymentStatus,
livechat_start: searchFilterAppointmentStart,
livechat_end: searchFilterAppointmentEnd,
});
};
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
};
useEffect(() => {
loadDataTableData();
}, []);
return (
<Stack>
{/* <Ambulace /> */}
<Card sx={{ marginTop: '30px' }}>
<FilterForm sx={{ marginTop: '100px' }} />
{/* The Main Table */}
<TableContainer component={Paper}>
<Table>
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">
Healthcare
</TableCell>
<TableCell style={headStyle} align="left">
Patient
</TableCell>
<TableCell style={headStyle} align="left">
Doctor
</TableCell>
<TableCell style={headStyle} align="left">
Speciality
</TableCell>
<TableCell style={headStyle} align="left">
Date
</TableCell>
<TableCell style={headStyle} align="left">
Subjective
</TableCell>
<TableCell style={headStyle} align="left">
Objective
</TableCell>
<TableCell style={headStyle} align="left">
Assessment
</TableCell>
<TableCell style={headStyle} align="left">
Plan
</TableCell>
{/* <TableCell style={headStyle} align="center">
Aksi
</TableCell> */}
</TableRow>
</TableBody>
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
Loading
</TableCell>
</TableRow>
</TableBody>
) : dataTableData.data.length == 0 ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map((row) => (
<Row key={row.nID} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}

26
frontend/dashboard/src/routes/index.tsx
View File

@@ -12,8 +12,8 @@ import VerifyCode from '../pages/auth/VerifyCode';
import { AuthProvider } from '../contexts/LaravelAuthContext';
import AuthGuard from '../guards/AuthGuard';
import { Link, useParams, useSearchParams } from 'react-router-dom';
import Prescription from '@/pages/Report/Prescription/Index';
import DoctorRating from '@/pages/Report/DoctorRating/Index';
import DoctorRating from '@/pages/Report/DoctorRating_v2/Index';
import KatalogDokter from '@/pages/Report/KatalogDokter/Index';
// ----------------------------------------------------------------------
@@ -443,14 +443,30 @@ export default function Router() {
element: <Prescription/>,
},
{
path: 'report/doctorrating',
path: 'report/doctor-rating',
element: <DoctorRating/>,
},
{
path: 'report/katalog-dokter',
element: <KatalogDokter/>,
},
{
path: 'report/linksehat-payments',
element: <LinksehatPayment />,
},
{
path: 'report/phr',
element: <RiwayatMedisPeserta />,
},
{
path: 'report/prescription',
element: <Prescription/>,
},
{
path: 'report/rujukan',
element: <RujukanPasien/>,
},
{
path: 'claims',
element: <Claims />,
@@ -716,6 +732,10 @@ const EPrescriptionShow = Loadable(lazy(() => import('../pages/EPrescription/Liv
const LinksehatPayment = Loadable(lazy(() => import('../pages/Report/LinksehatPayments/Index')));
const RiwayatMedisPeserta = Loadable(lazy(() => import('../pages/Report/RiwayatMedisPeserta/Index')));
const RujukanPasien = Loadable(lazy(() => import('../pages/Report/Rujukan/Index')));
const Prescription = Loadable(lazy(() => import('../pages/Report/Prescription/Index')));
const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
const MasterFormularium = Loadable(lazy(() => import('../pages/Master/Formularium/Index')));