Merge remote-tracking branch 'origin/staging' into origin/production
This commit is contained in:
Linksehat Staging Server
@@ -30,6 +30,13 @@ export type Specialities = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type PeriodStart = {
|
||||
date: string;
|
||||
};
|
||||
export type PeriodEnd = {
|
||||
date: string;
|
||||
};
|
||||
|
||||
export type Practitioner = {
|
||||
id: number;
|
||||
name: string;
|
||||
@@ -50,6 +57,35 @@ export type Practitioner = {
|
||||
active: boolean | number;
|
||||
organizations?: Organizations[];
|
||||
specialities?: Specialities[];
|
||||
period_start?: PeriodStart[];
|
||||
period_end?: PeriodEnd[];
|
||||
};
|
||||
|
||||
export type Medicine = {
|
||||
id: number;
|
||||
drug_id: number;
|
||||
unit_id: number;
|
||||
qty: number;
|
||||
signa: string;
|
||||
note: string;
|
||||
}
|
||||
|
||||
export type Appointment = {
|
||||
id:number|undefined;
|
||||
name:string;
|
||||
address:string;
|
||||
birth_date:string;
|
||||
gender:string;
|
||||
description:string;
|
||||
birth_place:string;
|
||||
active:number;
|
||||
avatar_url:string;
|
||||
doctor_id:number;
|
||||
organizations:Organizations[];
|
||||
specialities:Specialities[];
|
||||
diagnosis:string;
|
||||
hospital:string;
|
||||
medicine: Medicine[];
|
||||
}
|
||||
|
||||
export type PractitionerType = Practitioner;
|
||||
@@ -19,6 +19,8 @@ export const accessGroup = {
|
||||
admin: ["/report/logs"]
|
||||
}
|
||||
|
||||
|
||||
|
||||
const navConfig = [
|
||||
// GENERAL
|
||||
// ----------------------------------------------------------------------
|
||||
@@ -95,11 +97,12 @@ const navConfig = [
|
||||
{
|
||||
title: 'REPORT',
|
||||
children: [
|
||||
{ title: 'Files Provider', path: 'report/files-provider'},
|
||||
{ title: 'Letter of Guarantee', path: '/report/logs' },
|
||||
{ title: 'Appointment', path: '/report/appointments' },
|
||||
{ title: 'Live Chat', path: '/report/live-chat' },
|
||||
{ title: 'Linksehat Payment', path: '/report/linksehat-payments' },
|
||||
{ title: 'Prescription', path: '/report/prescription' },
|
||||
// { title: 'Prescription', path: '/report/prescription' },
|
||||
{ title: 'Doctor Rating', path: '/report/doctorrating' },
|
||||
|
||||
],
|
||||
@@ -122,6 +125,10 @@ const navConfig = [
|
||||
title: 'LINKING TOOLS',
|
||||
path: '/linking',
|
||||
},
|
||||
{
|
||||
title: 'E-PRESCRIPTION',
|
||||
path: '/e-prescription/live-chat',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -19,6 +19,7 @@ import navConfig from './NavConfig';
|
||||
import NavbarDocs from './NavbarDocs';
|
||||
import NavbarAccount from './NavbarAccount';
|
||||
import CollapseButton from './CollapseButton';
|
||||
import useAuth from '@/hooks/useAuth';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -42,6 +43,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
|
||||
const theme = useTheme();
|
||||
|
||||
const { pathname } = useLocation();
|
||||
const {user} = useAuth()
|
||||
|
||||
const isDesktop = useResponsive('up', 'lg');
|
||||
|
||||
@@ -55,6 +57,16 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pathname]);
|
||||
|
||||
const filteredItems = navConfig.filter(section => {
|
||||
return section.items.some(item => {
|
||||
return item.title === 'E-PRESCRIPTION';
|
||||
});
|
||||
});
|
||||
|
||||
const filteredData = filteredItems.map(section => ({
|
||||
items: section.items.filter(item => item.title === "E-PRESCRIPTION")
|
||||
}));
|
||||
|
||||
const renderContent = (
|
||||
<Scrollbar
|
||||
sx={{
|
||||
@@ -89,7 +101,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
|
||||
<NavbarAccount isCollapse={isCollapse} />
|
||||
</Stack>
|
||||
|
||||
<NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
|
||||
<NavSectionVertical navConfig={user.role_id == 5 ? filteredData : navConfig} isCollapse={isCollapse} />
|
||||
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
|
||||
|
||||
@@ -21,6 +21,8 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
|
||||
|
||||
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,
|
||||
@@ -49,6 +51,8 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
|
||||
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
|
||||
@@ -116,6 +120,8 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
|
||||
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)
|
||||
@@ -173,6 +179,26 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
|
||||
</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
|
||||
|
||||
@@ -182,6 +182,14 @@ export default function Detail() {
|
||||
</Grid>) : null }
|
||||
|
||||
</Grid>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Invoice Number</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.invoice_no ? requestLog?.invoice_no : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Billing Number</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.billing_no ? requestLog?.billing_no : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Provider</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.provider}</Typography>
|
||||
|
||||
@@ -31,6 +31,8 @@ export type DetailFinalLogType = {
|
||||
id : number,
|
||||
code : string,
|
||||
member_id : string,
|
||||
invoice_no : string,
|
||||
billing_no : string,
|
||||
provider : string,
|
||||
policy_number : string,
|
||||
name : string|any,
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { paramCase } from 'change-case';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
// @mui
|
||||
import { Container, Stack } from '@mui/material';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import Page from '../../../components/Page';
|
||||
import Form from './Form';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import axios from '../../../utils/axios';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
import ButtonBack from '../../../components/ButtonBack';
|
||||
|
||||
export default function Create() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { id } = useParams();
|
||||
|
||||
const isEdit = id ? true : false;
|
||||
|
||||
const [currentPractitioner, setCurrentPractitioner] = useState<Practitioner>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/doctors/' + id).then((res) => {
|
||||
setCurrentPractitioner(res.data);
|
||||
});
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<Page title="Membership: Create a new Dokter">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
{/* <ButtonBack /> */}
|
||||
<HeaderBreadcrumbs
|
||||
heading={!isEdit ? 'Manage a new Dokter' : 'Manage Dokter'}
|
||||
links={[
|
||||
{ name: 'Master', href: '/master' },
|
||||
{
|
||||
name: 'Doctors',
|
||||
href: '/master/doctors',
|
||||
},
|
||||
{ name: !isEdit ? 'Create' : currentPractitioner?.name ?? '' },
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Form
|
||||
// isSubmitting={isSubmitting}
|
||||
isEdit={isEdit}
|
||||
currentPractitioner={currentPractitioner}
|
||||
/>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
// const pageTitle = 'Create Data Dokter';
|
||||
// return (
|
||||
// <Page title={pageTitle}>
|
||||
// <Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
// <HeaderBreadcrumbs
|
||||
// heading={pageTitle}
|
||||
// links={[
|
||||
// {
|
||||
// name: 'Master',
|
||||
// href: '/master',
|
||||
// },
|
||||
// {
|
||||
// name: 'Dokter',
|
||||
// href: '/master/organizations/',
|
||||
// },
|
||||
// {
|
||||
// name: 'Create',
|
||||
// href: '/master/organizations/create/',
|
||||
// },
|
||||
// ]}
|
||||
// />
|
||||
|
||||
// <Grid container spacing={2}>
|
||||
// <Grid item xs={12}>
|
||||
// <Card sx={{ p: 2 }}>
|
||||
// <Form
|
||||
// isSubmitting={isSubmitting}
|
||||
// isEdit={isEdit}
|
||||
// currentOrganizations={currentOrganizations}
|
||||
// />
|
||||
// </Card>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Container>
|
||||
// </Page>
|
||||
// );
|
||||
// }
|
||||
260
frontend/dashboard/src/pages/EPrescription/Livechat/Form.tsx
Normal file
260
frontend/dashboard/src/pages/EPrescription/Livechat/Form.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import * as React from 'react';
|
||||
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
TextField,
|
||||
Chip,
|
||||
} from '@mui/material';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
// components
|
||||
import {
|
||||
FormProvider,
|
||||
RHFTextField,
|
||||
RHFRadioGroup,
|
||||
RHFUploadAvatar,
|
||||
RHFSwitch,
|
||||
RHFEditor,
|
||||
RHFDatepicker,
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
} from '../../../components/hook-form';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
|
||||
import { Label, Rowing } from '@mui/icons-material';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
paddingBottom: theme.spacing(5),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
const Title = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.h4,
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
interface FormValuesProps extends Partial<Practitioner> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentPractitioner?: Practitioner;
|
||||
};
|
||||
|
||||
const Span = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const Text = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(3),
|
||||
}));
|
||||
|
||||
export default function PractitionerForm({ isEdit, currentPractitioner }: Props) {
|
||||
const navigate = useNavigate();
|
||||
const [practitioner_group, setPractitionerGroups] = useState([]);
|
||||
|
||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
// file: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
id: currentPractitioner?.id,
|
||||
name: currentPractitioner?.name || '',
|
||||
address: currentPractitioner?.address || '',
|
||||
birth_date: currentPractitioner?.birth_date || '',
|
||||
gender: currentPractitioner?.gender || '',
|
||||
description: currentPractitioner?.description || '',
|
||||
birth_place: currentPractitioner?.birth_place || '',
|
||||
active: currentPractitioner?.active === 1 ? true : false,
|
||||
avatar_url: currentPractitioner?.avatar_url || '',
|
||||
doctor_id: currentPractitioner?.doctor_id || '',
|
||||
organizations: currentPractitioner?.organizations || [],
|
||||
specialities: currentPractitioner?.specialities || [],
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentPractitioner]
|
||||
);
|
||||
|
||||
console.log('defaultValues', defaultValues);
|
||||
|
||||
function StatusLabel({ value }: { value: boolean }) {
|
||||
return (
|
||||
<Chip
|
||||
label={value ? 'Aktif' : 'Tidak Aktif'}
|
||||
size="medium"
|
||||
sx={{
|
||||
backgroundColor: value ? 'rgba(84, 214, 44, 0.16)' : 'rgba(255, 72, 66, 0.16)',
|
||||
color: value ? '#229A16' : '#B72136',
|
||||
padding: '1 8 1 8 px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentPractitioner) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentPractitioner]);
|
||||
|
||||
const handleActivate = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue('active', event.target.checked);
|
||||
|
||||
console.log('event.target.checked', event.target.checked);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('active', event.target.checked ? '1' : '0');
|
||||
formData.append('_method', 'PUT');
|
||||
axios.post('/doctors/' + currentPractitioner?.id ?? '', formData);
|
||||
|
||||
enqueueSnackbar('active Updated Successfully!', { variant: 'success' });
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods}>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* <Stack spacing={3}> */}
|
||||
<Card sx={{ p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Title>Data Dokter</Title>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={6}>
|
||||
{/* <Typography>Status Rumah Sakit</Typography> */}
|
||||
<RHFSwitch name="active" label="" onClick={handleActivate} />
|
||||
<StatusLabel value={values.active} />
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
<Title variant="h5">Informasi Umum</Title>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src={currentPractitioner?.avatar_url}
|
||||
sx={{ width: 120, height: 120, marginBottom: 2 }}
|
||||
/>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
|
||||
<Text>{currentPractitioner?.name ? currentPractitioner?.name : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>No Telp</Span>
|
||||
<Text>{currentPractitioner?.phone ? currentPractitioner?.phone : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tempat Lahir</Span>
|
||||
<Text>
|
||||
{currentPractitioner?.birth_place ? currentPractitioner?.birth_place : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Alamat</Span>
|
||||
<Text>{currentPractitioner?.address ? currentPractitioner?.address : '-'}</Text>
|
||||
</Grid>
|
||||
<Grid item xs={5} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Jenis Kelamin</Span>
|
||||
<Text>{currentPractitioner?.gender ? currentPractitioner?.gender : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Email</Span>
|
||||
<Text>{currentPractitioner?.email ? currentPractitioner?.email : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Lahir</Span>
|
||||
<Text>
|
||||
{currentPractitioner?.birth_date ? currentPractitioner?.birth_date : '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
<Card sx={{ p: 5, marginTop: 2 }}>
|
||||
<Title variant="h5">Tempat Praktik</Title>
|
||||
{currentPractitioner?.organizations?.map((item, index) => (
|
||||
<Box key={index} sx={{ mt: 3 }}>
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Text>{item.name}</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
<Card sx={{ p: 5, marginTop: 2 }}>
|
||||
<Title variant="h5">Spesialisasi</Title>
|
||||
{currentPractitioner?.specialities?.map((item, index) => (
|
||||
<Box key={index} sx={{ mt: 3 }}>
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={7}>
|
||||
<Text>{item.name}</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
</Box>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
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 Doctor() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const pageTitle = 'E-Prescription';
|
||||
return (
|
||||
<Page title={pageTitle}>
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{
|
||||
name: ' E-Prescription',
|
||||
href: 'e-prescription/live-chat',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<List />
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
573
frontend/dashboard/src/pages/EPrescription/Livechat/List.tsx
Normal file
573
frontend/dashboard/src/pages/EPrescription/Livechat/List.tsx
Normal file
@@ -0,0 +1,573 @@
|
||||
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,
|
||||
} 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 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 { Controller } from 'react-hook-form';
|
||||
|
||||
import SvgIconStyle from '../../../components/SvgIconStyle';
|
||||
import { GridSearchIcon } from '@mui/x-data-grid';
|
||||
import { Add, 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 { RHFDatepicker } from '@/components/hook-form';
|
||||
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { fDateOnly } from '@/utils/formatTime';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function List() {
|
||||
// Generate the every row of the table
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { organization_id } = useParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
|
||||
const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
|
||||
const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger First Search
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
}, []);
|
||||
|
||||
const item = [
|
||||
{
|
||||
id: '',
|
||||
value: '',
|
||||
name: 'Semua',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<form style={{ width: '100%' }}>
|
||||
<Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearchSubmit(event);
|
||||
}
|
||||
}}
|
||||
value={searchText}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
</InputAdornment>
|
||||
),
|
||||
placeholder: 'Search',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
value={searchParams.get('startDate')}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
onChange={(value) => {
|
||||
try {
|
||||
if (value && !!Date.parse(value)) {
|
||||
const date = value ? fDateOnly(value) : '';
|
||||
var entries = [...searchParams.entries(), ['startDate', date ?? '']];
|
||||
if (!searchParams.get('endDate')) {
|
||||
entries = [...entries, ['endDate', date ?? '']];
|
||||
}
|
||||
const filter = Object.fromEntries(entries);
|
||||
|
||||
setSearchParams(filter);
|
||||
loadDataTableData(filter);
|
||||
}
|
||||
} catch (e) {}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
value={searchParams.get('endDate')}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
onChange={(value) => {
|
||||
try {
|
||||
if (value && !!Date.parse(value)) {
|
||||
const date = fDateOnly(value);
|
||||
var entries = [...searchParams.entries(), ['endDate', date ?? '']];
|
||||
if (!searchParams.get('startDate')) {
|
||||
entries = [...entries, ['startDate', 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 xs={12} md={2}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
startIcon={<Add />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={exportExcel}
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
function createData(doctor: Practitioner): Practitioner {
|
||||
return {
|
||||
...doctor,
|
||||
};
|
||||
}
|
||||
|
||||
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>
|
||||
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.date_created ? row.date_created : '-'}</TableCell>
|
||||
<TableCell align="left">{row.time_request ? row.time_request : '-'}</TableCell>
|
||||
<TableCell align="left">{row.health_care ? row.health_care : '-'}</TableCell>
|
||||
<TableCell align="left">{row.doctor_name ? row.doctor_name : '-'}</TableCell>
|
||||
<TableCell align="left">{row.speciality ? row.speciality : '-'}</TableCell>
|
||||
<TableCell align="left">{row.pasien_name ? row.pasien_name : '-'}</TableCell>
|
||||
<TableCell align="left">{row.pasien_phone ? row.pasien_phone : '-'}</TableCell>
|
||||
{/* <TableCell align="left">{row.appointment_media ? row.appointment_media : '-'}</TableCell> */}
|
||||
<TableCell align="left">{row.patient_media ? row.patient_media : '-'}</TableCell>
|
||||
<TableCell align="left">{row.doctor_media ? row.doctor_media : '-'}</TableCell>
|
||||
{/* <TableCell align="left">
|
||||
{row.status_appointment ? row.status_appointment : '-'}
|
||||
</TableCell> */}
|
||||
<TableCell align="left">{row.status_chat ? row.status_chat : '-'}</TableCell>
|
||||
<TableCell align="center">
|
||||
<ButtonGroup variant="text" aria-label="text button group">
|
||||
<Link to={'/e-prescription/live-chat/' + 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 item xs={6}>
|
||||
Kode
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
: {row.id ? row.id : '-'}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
|
||||
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('/prescription', {
|
||||
params: filter,
|
||||
});
|
||||
setDataTableLoading(false);
|
||||
setDataTableData(response.data);
|
||||
};
|
||||
|
||||
const exportExcel = async () => {
|
||||
var filter = Object.fromEntries([...searchParams.entries()]);
|
||||
|
||||
await axios
|
||||
.get('live-chat/export', { params: filter })
|
||||
.then((res) => {
|
||||
enqueueSnackbar('Data berhasil di Export', {
|
||||
variant: 'success',
|
||||
anchorOrigin: { horizontal: 'right', vertical: 'top' },
|
||||
});
|
||||
|
||||
document.location.href = res.data.data.file_url;
|
||||
})
|
||||
.catch((err) =>
|
||||
enqueueSnackbar('Data Gagal di Export', {
|
||||
variant: 'error',
|
||||
anchorOrigin: { horizontal: 'right', vertical: 'top' },
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
// 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">
|
||||
Tanggal
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Waktu
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Faskes
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Nama Dokter
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Spesialisasi
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Nama Pasien
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
No Telepon Pasien
|
||||
</TableCell>
|
||||
{/* <TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Appointment Via App/Website
|
||||
</TableCell> */}
|
||||
<TableCell
|
||||
colSpan={2}
|
||||
style={headStyle}
|
||||
align="center"
|
||||
sx={{ borderBottom: '3px solid #d7d7d7' }}
|
||||
>
|
||||
Chat Via App/Website
|
||||
</TableCell>
|
||||
{/* <TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Status Appointment
|
||||
</TableCell> */}
|
||||
<TableCell style={headStyle} rowSpan={2} align="left">
|
||||
Status
|
||||
</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.length == 0 ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
No Data
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map((row) => (
|
||||
<Row key={row.id} row={row} />
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
53
frontend/dashboard/src/pages/EPrescription/Livechat/Show.tsx
Normal file
53
frontend/dashboard/src/pages/EPrescription/Livechat/Show.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { paramCase } from 'change-case';
|
||||
import { useParams, useLocation } from 'react-router-dom';
|
||||
// @mui
|
||||
import { Container, Stack } from '@mui/material';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import Page from '../../../components/Page';
|
||||
import View from './View';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import axios from '../../../utils/axios';
|
||||
import { Appointment } from '../../../@types/doctor';
|
||||
|
||||
export default function Create() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { id } = useParams();
|
||||
|
||||
const isEdit = id ? true : false;
|
||||
|
||||
const [currentAppointment, setCurrentAppointment] = useState<Appointment>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/live-chat/' + id).then((res) => {
|
||||
setCurrentAppointment(res.data);
|
||||
});
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<Page title="E-Prescription">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<HeaderBreadcrumbs
|
||||
heading={!isEdit ? 'E-Prescription' : 'E-Prescription'}
|
||||
links={[
|
||||
{
|
||||
name: 'E-Prescription',
|
||||
href: 'e-prescription/live-chat',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<View
|
||||
// isSubmitting={isSubmitting}
|
||||
isEdit={isEdit}
|
||||
id={id}
|
||||
currentAppointment={currentAppointment}
|
||||
/>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
687
frontend/dashboard/src/pages/EPrescription/Livechat/View.tsx
Normal file
687
frontend/dashboard/src/pages/EPrescription/Livechat/View.tsx
Normal file
@@ -0,0 +1,687 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import * as React from 'react';
|
||||
|
||||
// form
|
||||
import {useFieldArray, useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Autocomplete,
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
TextField,
|
||||
Chip,
|
||||
Badge,
|
||||
Divider,
|
||||
} from '@mui/material';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
// components
|
||||
import {
|
||||
FormProvider,
|
||||
RHFTextField,
|
||||
RHFRadioGroup,
|
||||
RHFUploadAvatar,
|
||||
RHFSwitch,
|
||||
RHFEditor,
|
||||
RHFDatepicker,
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
} from '../../../components/hook-form';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import { Appointment } from '../../../@types/doctor';
|
||||
import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
|
||||
|
||||
import { Label, Rowing, Spa } from '@mui/icons-material';
|
||||
import { border, padding } from '@mui/system';
|
||||
import { IconButton } from '@mui/material';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import RemoveIcon from '@mui/icons-material/Remove';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
paddingBottom: theme.spacing(5),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
const Title = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.h4,
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
interface FormValuesProps extends Partial<Appointment> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
id: number;
|
||||
currentAppointment?: Appointment;
|
||||
};
|
||||
|
||||
const Span = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const Text = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
paddingBottom: theme.spacing(3),
|
||||
}));
|
||||
|
||||
export default function AppointmentForm({ isEdit, id, currentAppointment }: Props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
// name: Yup.string().required('Name is required'),
|
||||
// file: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
id: currentAppointment?.id,
|
||||
name: currentAppointment?.name || '',
|
||||
address: currentAppointment?.address || '',
|
||||
birth_date: currentAppointment?.birth_date || '',
|
||||
gender: currentAppointment?.gender || '',
|
||||
description: currentAppointment?.description || '',
|
||||
birth_place: currentAppointment?.birth_place || '',
|
||||
active: currentAppointment?.active === 1 ? true : false,
|
||||
avatar_url: currentAppointment?.avatar_url || '',
|
||||
doctor_id: currentAppointment?.doctor_id || '',
|
||||
organizations: currentAppointment?.organizations || [],
|
||||
specialities: currentAppointment?.specialities || [],
|
||||
diagnosis: currentAppointment?.diagnosis || '',
|
||||
hospital: currentAppointment?.hospital || null,
|
||||
medicine : currentAppointment?.medicine || [
|
||||
{
|
||||
drug_id: 0,
|
||||
qty: 0,
|
||||
signa: '',
|
||||
unit_id: 0,
|
||||
note: '', // input to database
|
||||
}
|
||||
],
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentAppointment]
|
||||
);
|
||||
|
||||
console.log()
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
// resolver: yupResolver(NewCorporateSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {fields, append, remove} = useFieldArray({name: 'medicine',control: methods.control})
|
||||
|
||||
// Autocomplite ICD
|
||||
const [icdOptions, setIcdOptions] = useState([]);
|
||||
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
|
||||
|
||||
// Menggunakan selectedIcdOptions sebagai state untuk nilai default
|
||||
const [selectedIcdOptions, setSelectedIcdOptions] = useState([]);
|
||||
const codes = defaultValues.diagnosis.split(',');
|
||||
useEffect(() => {
|
||||
// Pastikan bahwa icdOptions sudah terisi sebelum memfilter
|
||||
if (icdOptions.length > 0) {
|
||||
const selectedCodes = icdOptions.filter((icd) => {
|
||||
return codes.includes(icd.value);
|
||||
});
|
||||
setSelectedIcdOptions(selectedCodes);
|
||||
// setValue('diagnosis', selectedCodes); // Ini bisa Anda hilangkan jika tidak diperlukan
|
||||
}
|
||||
}, [icdOptions, defaultValues.diagnosis]);
|
||||
|
||||
|
||||
// Autocomplite Rumah Sakit
|
||||
const [hospitalOptions, setHospitalOptions] = useState([]);
|
||||
const [selectedHospitalOption, setSelectedHospitalOption] = useState(null);
|
||||
|
||||
// Ambil data dari API dan atur opsi rumah sakit
|
||||
useEffect(() => {
|
||||
axios.get('hospitals')
|
||||
.then((response) => {
|
||||
setHospitalOptions(response.data.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching hospital options:', error);
|
||||
});
|
||||
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
|
||||
|
||||
// Set default value saat hospitalOptions berubah
|
||||
useEffect(() => {
|
||||
const selectedId = hospitalOptions.find((hospital) => {
|
||||
|
||||
return hospital.value == defaultValues.hospital
|
||||
});
|
||||
setSelectedHospitalOption(selectedId);
|
||||
setValue('hospital', defaultValues.hospital)
|
||||
|
||||
}, [hospitalOptions, defaultValues]);
|
||||
|
||||
// Autocomplete drugs
|
||||
const [drugOptions, setDrugsOptions] = useState([]);
|
||||
const [selectedDrugsOptions, setSelectedDrugsOptions] = useState({});
|
||||
|
||||
const handleAutocompleteChange = (newValue, index) => {
|
||||
setSelectedDrugsOptions((prevState) => ({
|
||||
...prevState,
|
||||
[index]: newValue
|
||||
}));
|
||||
setValue(`medicine.${index}.drug_id`, newValue ? newValue.value : '');
|
||||
};
|
||||
|
||||
// Ambil data dari API dan atur opsi obat
|
||||
useEffect(() => {
|
||||
axios.get('drugs')
|
||||
.then((response) => {
|
||||
const data = response.data.data;
|
||||
// Set nilai default jika data tidak kosong
|
||||
if (data.length > 0) {
|
||||
// Pilih nilai default pertama
|
||||
setSelectedDrugsOptions({ 0: data[0] });
|
||||
setValue('medicine.0.drug_id', data[0] ? data[0].value : '');
|
||||
}
|
||||
setDrugsOptions(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching drug options:', error);
|
||||
});
|
||||
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
|
||||
|
||||
// Autocomplete unit
|
||||
const [unitOptions, setUnitsOptions] = useState([]);
|
||||
const [selectedUnitsOptions, setSelectedUnitsOptions] = useState({});
|
||||
|
||||
// Ambil data dari API dan atur opsi satuan
|
||||
useEffect(() => {
|
||||
axios.get('units')
|
||||
.then((response) => {
|
||||
const data = response.data.data;
|
||||
// Set nilai default jika data tidak kosong
|
||||
if (data.length > 0) {
|
||||
// Pilih nilai default pertama
|
||||
setSelectedUnitsOptions({ 0: data[0] });
|
||||
setValue('medicine.0.unit_id', data[0] ? data[0].value : '');
|
||||
}
|
||||
setUnitsOptions(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching unit options:', error);
|
||||
});
|
||||
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
|
||||
|
||||
const handleAutocompleteChangeUnit = (newValue, index) => {
|
||||
setSelectedUnitsOptions((prevState) => ({
|
||||
...prevState,
|
||||
[index]: newValue
|
||||
}));
|
||||
setValue(`medicine.${index}.unit_id`, newValue ? newValue.value : '');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (defaultValues.medicine.length > 0) {
|
||||
defaultValues.medicine.forEach((med, index) => {
|
||||
const selectedDrugId = drugOptions.find((drug) => drug.value === med.drug_id);
|
||||
handleAutocompleteChange(selectedDrugId, index);
|
||||
|
||||
const selectedUnitId = unitOptions.find((unit) => unit.value === med.unit_id);
|
||||
handleAutocompleteChangeUnit(selectedUnitId, index);
|
||||
|
||||
// Lakukan tindakan lainnya sesuai kebutuhan Anda
|
||||
});
|
||||
} else {
|
||||
console.log('Medicine is empty');
|
||||
}
|
||||
}, [defaultValues.medicine]);
|
||||
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentAppointment) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentAppointment]);
|
||||
|
||||
const onSubmit = async (data: FormValuesProps) => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('id', data.id);
|
||||
formData.append('diagnosis', data.diagnosis);
|
||||
formData.append('hospital', data.hospital);
|
||||
|
||||
// Iterasi melalui setiap objek dalam array medicine dan menambahkannya ke FormData
|
||||
data.medicine.forEach((medicineObj, index) => {
|
||||
// Anda dapat menambahkan setiap properti dari objek medicine ke FormData
|
||||
formData.append(`medicine[${index}][drug_id]`, medicineObj.drug_id);
|
||||
formData.append(`medicine[${index}][qty]`, medicineObj.qty);
|
||||
formData.append(`medicine[${index}][unit_id]`, medicineObj.unit_id);
|
||||
formData.append(`medicine[${index}][signa]`, medicineObj.signa);
|
||||
formData.append(`medicine[${index}][note]`, medicineObj.note);
|
||||
});
|
||||
|
||||
|
||||
const response = await axios.post('/prescription', formData);
|
||||
reset();
|
||||
enqueueSnackbar('Berhasil menambahkan resep', {
|
||||
variant: 'success',
|
||||
});
|
||||
navigate('/e-prescription/live-chat');
|
||||
} catch (error: any) {
|
||||
console.log(error, 'submit')
|
||||
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
|
||||
const ascent = document?.querySelector('ascent');
|
||||
if (ascent != null) {
|
||||
ascent.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadEPrescription = (id: number) => {
|
||||
axios
|
||||
.get(`prescription-download/${id}`, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
.then((response) => {
|
||||
window.open(URL.createObjectURL(response.data));
|
||||
})
|
||||
.catch((response) => {
|
||||
enqueueSnackbar(response.message, { variant: 'error' });
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* <Stack spacing={3}> */}
|
||||
<Card sx={{ p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Stack
|
||||
direction="row"
|
||||
divider={<Divider orientation="vertical" flexItem />}
|
||||
spacing={2}
|
||||
>
|
||||
<Title>Data Live Chat</Title>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2} alignItems="center">
|
||||
<Span style={{ fontWeight: 'bold', paddingBottom: '0px' }}>
|
||||
Status Appointment :
|
||||
</Span>
|
||||
<Chip
|
||||
label={
|
||||
currentAppointment?.status_appointment
|
||||
? currentAppointment?.status_appointment
|
||||
: '-'
|
||||
}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2} alignItems="center">
|
||||
<Span style={{ fontWeight: 'bold', paddingBottom: '0px' }}>
|
||||
Status Chat :
|
||||
</Span>
|
||||
<Chip
|
||||
label={
|
||||
currentAppointment?.status_chat ? currentAppointment?.status_chat : '-'
|
||||
}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{ marginTop: '20px' }}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Booking :</Span>
|
||||
<Text>
|
||||
{currentAppointment?.date_created ? currentAppointment?.date_created : '-'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tanggal Appointment :</Span>
|
||||
<Text>
|
||||
{currentAppointment?.date_appointment
|
||||
? currentAppointment?.date_appointment
|
||||
: '-'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
|
||||
<Text>
|
||||
{currentAppointment?.doctor_name ? currentAppointment?.doctor_name : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Faskes</Span>
|
||||
<Text>
|
||||
{currentAppointment?.health_care ? currentAppointment?.health_care : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Durasi</Span>
|
||||
<Text>{currentAppointment?.duration ? currentAppointment?.duration : '-'}</Text>
|
||||
</Grid>
|
||||
<Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Spesialis</Span>
|
||||
<Text>{currentAppointment?.speciality ? currentAppointment?.speciality : '-'}</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Appointment Via Web/App</Span>
|
||||
<Text>
|
||||
{currentAppointment?.appointment_media
|
||||
? currentAppointment?.appointment_media
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
<Card sx={{ mt: 5, p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Title>Data Pembayaran</Title>
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
|
||||
{currentAppointment?.payment_detail !== null ? (
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={6}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Metode Pembayaran</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_method ? currentAppointment?.payment_method : '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Harga</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.gross_amount
|
||||
? currentAppointment?.payment_detail?.gross_amount
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Mata Uang</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.currency
|
||||
? currentAppointment?.payment_detail?.currency
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Tipe Pembayaran</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.payment_type
|
||||
? currentAppointment?.payment_detail?.payment_type
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Waktu Transaksi</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.transaction_time
|
||||
? currentAppointment?.payment_detail?.transaction_time
|
||||
: '-'}
|
||||
</Text>
|
||||
<Span style={{ fontWeight: 'bold' }}>Status</Span>
|
||||
<Text>
|
||||
{currentAppointment?.payment_detail?.status_message
|
||||
? currentAppointment?.payment_detail?.status_message
|
||||
: '-'}
|
||||
</Text>
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : (
|
||||
<Span>Belum ada pembayaran</Span>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card sx={{ mt: 5, p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={12} md={12}>
|
||||
<Title>E-Prescription</Title>
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
|
||||
<Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{marginBottom: 4}}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Diagnosa</Span>
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={icdOptions}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={selectedIcdOptions}
|
||||
onChange={(e, newValues) => {
|
||||
const selectedCodes = newValues.map((value) => value.value);
|
||||
setValue('diagnosis', selectedCodes);
|
||||
setSelectedIcdOptions(newValues);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Diagnosis ICD - X"
|
||||
variant="outlined"
|
||||
// required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
{/* <Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{marginBottom: 4}}>
|
||||
<Span style={{ fontWeight: 'bold' }}>Rumah Sakit</Span>
|
||||
<Autocomplete
|
||||
options={hospitalOptions}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={selectedHospitalOption}
|
||||
onChange={(e, newValue) => {
|
||||
setSelectedHospitalOption(newValue);
|
||||
setValue('hospital', newValue ? newValue.value : ''); // Simpan nilai rumah sakit
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Rumah Sakit"
|
||||
variant="outlined"
|
||||
// required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
</Grid> */}
|
||||
|
||||
<Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
||||
<Typography variant='subtitle1' gutterBottom>Obat</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
{fields.map((field, index) => (
|
||||
<Grid container spacing={2} key={index} sx={{ marginBottom: '15px' }}>
|
||||
<Grid item xs={3}>
|
||||
<Autocomplete
|
||||
options={drugOptions}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={selectedDrugsOptions[index] || null}
|
||||
onChange={(e, newValue) => handleAutocompleteChange(newValue, index)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Drugs"
|
||||
variant="outlined"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={1}>
|
||||
<RHFTextField
|
||||
id={`qty_${index}`}
|
||||
name={`medicine.${index}.qty`}
|
||||
label="Qty"
|
||||
required
|
||||
type="number"
|
||||
placeholder="Qty"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<Autocomplete
|
||||
options={unitOptions}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={selectedUnitsOptions[index] || null}
|
||||
onChange={(e, newValue) => handleAutocompleteChangeUnit(newValue, index)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Units"
|
||||
variant="outlined"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<RHFTextField
|
||||
id={`signa_${index}`}
|
||||
name={`medicine.${index}.signa`}
|
||||
label="Signa"
|
||||
required
|
||||
placeholder="Signa"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<RHFTextField
|
||||
id={`note_${index}`}
|
||||
name={`medicine.${index}.note`}
|
||||
label="Note"
|
||||
required
|
||||
placeholder="Note"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
{
|
||||
index === 0 ? (
|
||||
<Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<IconButton size='large' color='primary' onClick={() => append({medicine_name: '', medicine_price: 0, request_log_id: 1 })}>
|
||||
<AddIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
) : (
|
||||
index == (fields.length-1) ? (
|
||||
<Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<IconButton size='large' color='error' onClick={() => remove(index)}>
|
||||
<RemoveIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
) : (
|
||||
<Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<IconButton size='large' color='primary' onClick={() => append({medicine_name: '', medicine_price: 0, request_log_id: 1 })}>
|
||||
<AddIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
)
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', marginRight: '10px' }}
|
||||
onClick={() => handleDownloadEPrescription(id)}
|
||||
variant="contained"
|
||||
size="large"
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
<LoadingButton
|
||||
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{!isEdit ? 'Save' : 'Update'}
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Card>
|
||||
</Box>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
@@ -188,6 +188,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
// formData.append('active', data.active ? '1' : '0');
|
||||
forms.forEach((form, index) => {
|
||||
formData.append(`practices[${index}][organization_id]`, form.organizationId);
|
||||
formData.append(`practices[${index}][period_start]`, form.periodStart);
|
||||
formData.append(`practices[${index}][period_end]`, form.periodEnd);
|
||||
form.specialities.forEach((speciality, i) => {
|
||||
formData.append(`practices[${index}][specialities][${i}][speciality_id]`, speciality);
|
||||
});
|
||||
@@ -225,6 +227,7 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
|
||||
const [organizations, setOrganizations] = useState<any>([]);
|
||||
const [specialities, setSpecialities] = useState<any>([]);
|
||||
const [price, setPrice] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`/search-organizations`).then((response) => {
|
||||
@@ -281,6 +284,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
return {
|
||||
organizationId: practice.organization_id,
|
||||
specialities: practice.specialities.map((s) => s.speciality_id),
|
||||
periodStart: practice.period_start,
|
||||
periodEnd: practice.period_end,
|
||||
};
|
||||
});
|
||||
setForms(newForms);
|
||||
@@ -289,6 +294,9 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
{
|
||||
organizationId: '',
|
||||
specialities: [],
|
||||
periodStart: '',
|
||||
periodEnd: '',
|
||||
|
||||
},
|
||||
]);
|
||||
}
|
||||
@@ -333,6 +341,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
...forms,
|
||||
{
|
||||
organizationId: '',
|
||||
periodStart: '',
|
||||
periodEnd: '',
|
||||
specialities: [],
|
||||
},
|
||||
]);
|
||||
@@ -397,6 +407,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
setForms(updatedForms);
|
||||
};
|
||||
|
||||
console.log(forms, 'forms')
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack spacing={3}>
|
||||
@@ -492,7 +504,6 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
value={findValueOrganization(form.organizationId) ?? ''}
|
||||
getOptionLabel={(option) => option.name}
|
||||
isOptionEqualToValue={(option, value) => {
|
||||
console.log(value, option, 'test')
|
||||
return option.value === value.value
|
||||
}
|
||||
}
|
||||
@@ -541,6 +552,23 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={6}>
|
||||
<LabelStyle>Period Start</LabelStyle>
|
||||
<RHFDatepicker
|
||||
name={`period_start`}
|
||||
placeholder="Silahkan Pilih Tanggal Mulai"
|
||||
/>
|
||||
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6}>
|
||||
<LabelStyle>Period End</LabelStyle>
|
||||
<RHFDatepicker
|
||||
name={`period_end`}
|
||||
placeholder="Silahkan Pilih Tanggal Selesai" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</div>
|
||||
))}
|
||||
|
||||
35
frontend/dashboard/src/pages/Report/FilesProvider/Index.tsx
Normal file
35
frontend/dashboard/src/pages/Report/FilesProvider/Index.tsx
Normal 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 = 'Files Provider';
|
||||
return (
|
||||
<Page title={pageTitle}>
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{
|
||||
name: 'Report',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'Files Provider',
|
||||
href: '/report/files-provider',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<List />
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
999
frontend/dashboard/src/pages/Report/FilesProvider/List.tsx
Normal file
999
frontend/dashboard/src/pages/Report/FilesProvider/List.tsx
Normal file
@@ -0,0 +1,999 @@
|
||||
// @mui
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
IconButton,
|
||||
MenuItem,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
Stack,
|
||||
Menu,
|
||||
ButtonGroup,
|
||||
Tooltip,
|
||||
TableHead,
|
||||
Checkbox,
|
||||
InputAdornment,
|
||||
TableSortLabel,
|
||||
FormControl
|
||||
} from '@mui/material';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
|
||||
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { fDateOnly } from '@/utils/formatTime';
|
||||
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
|
||||
import AssessmentIcon from '@mui/icons-material/Assessment';
|
||||
// hooks
|
||||
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
|
||||
import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
// components
|
||||
import axios from '../../../utils/axios';
|
||||
import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../../@types/paginated-data';
|
||||
import DataTable from '../../../components/LaravelTable';
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
||||
import { Chip } from '@mui/material';
|
||||
import Iconify from '@/components/Iconify';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { fDate, fDateTime } from '../../../utils/formatTime';
|
||||
import { Claims } from '@/@types/claims';
|
||||
import Label from '@/components/Label';
|
||||
import { capitalizeFirstLetter } from '@/utils/formatString';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
import Edit from '@mui/icons-material/Edit';
|
||||
import { Download } from '@mui/icons-material';
|
||||
import { Add, Search } from '@mui/icons-material';
|
||||
import Autocomplete from '@mui/material/Autocomplete';
|
||||
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||||
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
|
||||
export default function List() {
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
const [providers, setProviders] = useState(null);
|
||||
// const [searchText, setSearchText] = useState('');
|
||||
const [order, setOrder] = useState<Order>('desc');
|
||||
const [orderBy, setOrderBy] = useState('created_at');
|
||||
const [perPage, setPerPage] = useState<number>(0);
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
// Jika newValue tidak undefined, atur nilai dataProvider
|
||||
if (newValue !== undefined) {
|
||||
setDataProvider(newValue.service_code);
|
||||
} else {
|
||||
// Jika tidak ada yang dipilih, set dataProvider menjadi string kosong
|
||||
setDataProvider(null);
|
||||
}
|
||||
};
|
||||
// Dummy data
|
||||
const dummyServices = [
|
||||
{ service_code: '1', name: 'Service 1' },
|
||||
{ service_code: '2', name: 'Service 2' },
|
||||
{ service_code: '3', name: 'Service 3' },
|
||||
// tambahkan data lain sesuai kebutuhan
|
||||
];
|
||||
|
||||
|
||||
|
||||
const handleSelectAll = () => {
|
||||
setSelectAll(!selectAll);
|
||||
if (!selectAll) {
|
||||
const requestedIds = dataTableData.data
|
||||
.filter(row => row.status === 'approved') // Memfilter baris dengan status 'requested'
|
||||
.map(row => row.id); // Mengambil hanya ID dari baris-baris yang memenuhi kondisi
|
||||
setSelectedRows(requestedIds);
|
||||
} else {
|
||||
setSelectedRows([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRowSelect = (id) => {
|
||||
if (selectedRows.includes(id)) {
|
||||
setSelectedRows(selectedRows.filter(rowId => rowId !== id));
|
||||
} else {
|
||||
setSelectedRows([...selectedRows, id]);
|
||||
}
|
||||
};
|
||||
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [startDate, setStartDate] = useState(null);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [endDate, setEndDate] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const [dataProvider, setDataProvider] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (startDate !== null || endDate !== null || dataProvider !== null
|
||||
|| order !== null || orderBy !== null || perPage !== 0) {
|
||||
loadDataTableData();
|
||||
getProvider();
|
||||
}
|
||||
}, [startDate, endDate, dataProvider, order, orderBy, perPage]);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isLoadingImport, setIsLoadingImport] = useState(false);
|
||||
const handleExportReport = async () => {
|
||||
|
||||
|
||||
const year = startDate?.getFullYear();
|
||||
const month = (startDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
|
||||
const day = startDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
|
||||
|
||||
const formattedDate = year && month && day ? `${year}-${month}-${day}` : '';
|
||||
|
||||
const year1 = endDate?.getFullYear();
|
||||
const month1 = (endDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
|
||||
const day1 = endDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
|
||||
|
||||
const formattedDate1 = year1 && month1 && day1 ? `${year1}-${month1}-${day1}` : '';
|
||||
|
||||
|
||||
|
||||
var filter = Object.fromEntries([...searchParams.entries()]);
|
||||
setIsLoading(true)
|
||||
await axios
|
||||
.get('/claims/export-claim-management',{
|
||||
params: {
|
||||
search: searchText,
|
||||
start_date: formattedDate ? formattedDate : null,
|
||||
end_date:formattedDate1,
|
||||
provider: dataProvider,
|
||||
order: order,
|
||||
orderBy: orderBy,
|
||||
page: perPage,
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
enqueueSnackbar('Data berhasil di Export', {
|
||||
variant: 'success',
|
||||
anchorOrigin: { horizontal: 'right', vertical: 'top' },
|
||||
});
|
||||
setIsLoading(false)
|
||||
|
||||
document.location.href = res.data.data.file_url;
|
||||
})
|
||||
.catch((err) =>
|
||||
enqueueSnackbar('Data Gagal di Export', {
|
||||
variant: 'error',
|
||||
anchorOrigin: { horizontal: 'right', vertical: 'top' },
|
||||
})
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
function SearchInput(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
|
||||
|
||||
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? '';
|
||||
setSearchText(newSearchText);
|
||||
};
|
||||
|
||||
const handleSearchSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
props.onSearch({ search: searchText }); // Trigger to Parent
|
||||
};
|
||||
|
||||
const handleGetData = (type :string) => {
|
||||
axios.get(`claims/1/data-claim`)
|
||||
.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();
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger First Search
|
||||
// setSearchText(searchParams.get('search') ?? '');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
|
||||
<Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
value={searchText}
|
||||
placeholder='Search Code or Member ID...'
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Download />}
|
||||
onClick={() => handleGetData('DO')}
|
||||
sx={{ p: 1.8 }}
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function ImportForm(props: any) {
|
||||
// IMPORT
|
||||
// Create Button Menu
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<SearchInput onSearch={applyFilter} />
|
||||
{/* <Button
|
||||
variant="outlined"
|
||||
startIcon={<AddIcon />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={() => {
|
||||
navigate('/claims/create');
|
||||
}}
|
||||
>
|
||||
Create
|
||||
</Button> */}
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
|
||||
|
||||
//handle search
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? '';
|
||||
setSearchText(newSearchText);
|
||||
};
|
||||
|
||||
const handleSearchSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
loadDataTableData();
|
||||
};
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger First Search
|
||||
//setSearchText(searchText);
|
||||
}, []);
|
||||
|
||||
const item = [
|
||||
{
|
||||
id: '',
|
||||
value: '',
|
||||
name: 'Semua',
|
||||
},
|
||||
];
|
||||
|
||||
// const handleClick = () => {
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// Dummy Default Data
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
|
||||
LaravelPaginatedDataDefault
|
||||
);
|
||||
|
||||
|
||||
|
||||
const loadDataTableData = async (appliedFilter: any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const year = startDate?.getFullYear();
|
||||
const month = (startDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
|
||||
const day = startDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
|
||||
|
||||
const formattedDate = year && month && day ? `${year}-${month}-${day}` : '';
|
||||
|
||||
const year1 = endDate?.getFullYear();
|
||||
const month1 = (endDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
|
||||
const day1 = endDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
|
||||
|
||||
const formattedDate1 = year1 && month1 && day1 ? `${year1}-${month1}-${day1}` : '';
|
||||
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
const response = await axios.get('/claims-files-provider', {
|
||||
params: {
|
||||
search: searchText,
|
||||
start_date: formattedDate ? formattedDate : null,
|
||||
end_date:formattedDate1,
|
||||
provider: dataProvider,
|
||||
order: order,
|
||||
orderBy: orderBy,
|
||||
page: perPage,
|
||||
}
|
||||
});
|
||||
|
||||
setDataTableLoading(false);
|
||||
|
||||
setDataTableData(response.data);
|
||||
};
|
||||
|
||||
const getProvider = async () => {
|
||||
const response = await axios.get('/claims/get-provider');
|
||||
setProviders(response.data)
|
||||
}
|
||||
|
||||
const applyFilter = async (searchFilter: { search: string }) => {
|
||||
await loadDataTableData(searchFilter);
|
||||
setSearchParams(searchFilter);
|
||||
};
|
||||
|
||||
const handlePageChange = (event: ChangeEvent, value: number): void => {
|
||||
setPerPage(value);
|
||||
};
|
||||
|
||||
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
||||
const handleCloseDialogSubmit = () => {
|
||||
setOpenDialogSubmit(false);
|
||||
}
|
||||
|
||||
function toTitleCase(str: string | null) {
|
||||
return str.replace(/\w\S*/g, function(txt) {
|
||||
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
});
|
||||
}
|
||||
|
||||
const [approve, setApprove] = useState('');
|
||||
|
||||
const [reasonDecline, setReasonDecline] = useState('');
|
||||
|
||||
const handleReasonDeclineChange = (event) => {
|
||||
setReasonDecline(event.target.value);
|
||||
// Tambahkan logika yang diperlukan di sini
|
||||
};
|
||||
|
||||
const handleSubmitData = async () => {
|
||||
try {
|
||||
const response = await axios.post('download-zip', { selectedRows: selectedRows });
|
||||
const fileUrl = response.data.file_url; // Perbaikan disini
|
||||
enqueueSnackbar('Data berhasil di download', { variant: 'success' });
|
||||
window.open(fileUrl, '_blank');
|
||||
setOpenDialogSubmit(false);
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 5000); // Reload the page after 5 seconds
|
||||
} catch (error) {
|
||||
enqueueSnackbar('Data Gagal di download', { variant: 'error' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitData1 = () => {
|
||||
//approve or decline
|
||||
if (!reasonDecline && approve == 'decline') {
|
||||
enqueueSnackbar('Mohon isi alasan', { variant: 'warning' });
|
||||
return false;
|
||||
}
|
||||
Promise.all(selectedRows.map(send_bulk))
|
||||
.then(() => {
|
||||
enqueueSnackbar('All requests processed successfully', { variant: 'success' });
|
||||
setOpenDialogSubmit(false);
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 5000); // Reload the page after 5 seconds
|
||||
})
|
||||
.catch((error) => {
|
||||
enqueueSnackbar(error.response?.data?.message ?? 'Something went wrong!', { variant: 'error' });
|
||||
});
|
||||
};
|
||||
|
||||
function send_bulk(id) {
|
||||
return axios.post(`claims/${id}/${approve}`, { reasonDecline: reasonDecline });
|
||||
}
|
||||
|
||||
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const createMenu = Boolean(anchorEl);
|
||||
const importClaimManagement = useRef<HTMLInputElement>(null);
|
||||
const [currentImportFileName, setCurrentImportFileName] = useState(null);
|
||||
const [importLoading, setImportLoading] = useState(false);
|
||||
const [importResult, setImportResult] = useState(null);
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
const handleImportButton = () => {
|
||||
if (importClaimManagement?.current) {
|
||||
handleClose();
|
||||
importClaimManagement.current ? importClaimManagement.current.click() : console.log('No File selected');
|
||||
} else {
|
||||
alert('No file selected');
|
||||
}
|
||||
};
|
||||
const handleCancelImportButton = () => {
|
||||
if(importClaimManagement.current)
|
||||
{
|
||||
importClaimManagement.current.value = '';
|
||||
importClaimManagement.current.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
};
|
||||
const handleImportChange = (event: any) => {
|
||||
if (event.target.files[0]) {
|
||||
setCurrentImportFileName(event.target.files[0].name);
|
||||
} else {
|
||||
setCurrentImportFileName(null);
|
||||
}
|
||||
};
|
||||
const handleUpload = () => {
|
||||
if(importClaimManagement.current && importClaimManagement.current.files)
|
||||
{
|
||||
if (importClaimManagement.current?.files.length) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', importClaimManagement.current?.files[0]);
|
||||
setImportLoading(true);
|
||||
axios
|
||||
.post('claims/import', formData)
|
||||
.then((response) => {
|
||||
handleCancelImportButton();
|
||||
loadDataTableData();
|
||||
setImportResult(response.data);
|
||||
setImportLoading(false);
|
||||
enqueueSnackbar('Success Import Claim Managemenet', { variant: 'success' });
|
||||
})
|
||||
.catch((response) => {
|
||||
enqueueSnackbar(
|
||||
'Looks like something went wrong. Please check your data and try again. ' +
|
||||
response.message,
|
||||
{ variant: 'error' }
|
||||
);
|
||||
setImportLoading(false);
|
||||
});
|
||||
} else {
|
||||
enqueueSnackbar('No File Selected', { variant: 'warning' });
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleGetTemplate = () => {
|
||||
axios.get('claims/download-template').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();
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
const handleExportReportFiled = async () => {
|
||||
|
||||
await axios
|
||||
.post('claims/exportFiled', { params: importResult?.data.result_rows })
|
||||
.then((res) => {
|
||||
enqueueSnackbar('Data berhasil di Export', {
|
||||
variant: 'success',
|
||||
anchorOrigin: { horizontal: 'right', vertical: 'top' },
|
||||
});
|
||||
setIsLoading(false)
|
||||
|
||||
document.location.href = res.data.data.file_url;
|
||||
})
|
||||
.catch((err) =>
|
||||
enqueueSnackbar('Data Gagal di Export', {
|
||||
variant: 'error',
|
||||
anchorOrigin: { horizontal: 'right', vertical: 'top' },
|
||||
})
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// useEffect(() => {
|
||||
// loadDataTableData();
|
||||
// getProvider();
|
||||
// }, []);
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
const headCells = [
|
||||
{
|
||||
id: 'created_at',
|
||||
align: 'left',
|
||||
label: 'Date Submission',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'code',
|
||||
align: 'left',
|
||||
label: 'Code',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
align: 'left',
|
||||
label: 'Name',
|
||||
isSort: false,
|
||||
},
|
||||
{
|
||||
id: 'provider',
|
||||
align: 'left',
|
||||
label: 'Provider',
|
||||
isSort: false,
|
||||
},
|
||||
{
|
||||
id: 'files',
|
||||
align: 'left',
|
||||
label: 'Nama File',
|
||||
isSort: false,
|
||||
},
|
||||
];
|
||||
|
||||
const orders = {
|
||||
order: order,
|
||||
setOrder: setOrder,
|
||||
orderBy: orderBy,
|
||||
setOrderBy: setOrderBy,
|
||||
};
|
||||
const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
|
||||
handleRequestSort(event, property);
|
||||
};
|
||||
const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
|
||||
const isAsc = orders?.orderBy === property && orders?.order === 'asc';
|
||||
|
||||
orders?.setOrder(isAsc ? 'desc' : 'asc');
|
||||
orders?.setOrderBy(property);
|
||||
};
|
||||
// Called on every row to map the data to the columns
|
||||
function createData(data: Claims): Claims {
|
||||
return {
|
||||
...data,
|
||||
};
|
||||
}
|
||||
|
||||
{
|
||||
/* ------------------ TABLE ROW ------------------ */
|
||||
}
|
||||
function Row(props: { row: ReturnType<typeof createData>, isSelected: boolean, onSelect: (id: string) => void }) {
|
||||
const { row, isSelected, onSelect } = props;
|
||||
// Memperbaiki destrukturisasi props
|
||||
|
||||
const handleRowCheckboxChange = () => {
|
||||
onSelect(row.id); // Panggil fungsi onSelect dari komponen induk dengan id baris saat checkbox di baris diklik
|
||||
};
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const test = 1000;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
|
||||
{/* <TableCell>
|
||||
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
</TableCell> */}
|
||||
<TableCell align="left">
|
||||
<Checkbox checked={isSelected} onChange={handleRowCheckboxChange} />
|
||||
</TableCell>
|
||||
<TableCell align="left">{row?.created_at ? fDateTime(row?.created_at) : ''}</TableCell>
|
||||
<TableCell align="left">{row?.code}</TableCell>
|
||||
{/* <TableCell align="left">{row.code}</TableCell> */}
|
||||
<TableCell align="left">{row?.name}</TableCell>
|
||||
<TableCell align="left">{row?.provider}</TableCell>
|
||||
<TableCell align='left'>
|
||||
<a
|
||||
href={row.path}
|
||||
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
||||
target="_blank"
|
||||
>
|
||||
<Typography variant="body2" gutterBottom>{row.files ? row.files : '-'}</Typography>
|
||||
</a>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
{/* <Box sx={{ borderBottom: 1 }}>
|
||||
<Typography variant="body2" gutterBottom component="div">
|
||||
Description : {row.description}
|
||||
</Typography>
|
||||
</Box> */}
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
{
|
||||
/* ------------------ END TABLE ROW ------------------ */
|
||||
}
|
||||
|
||||
|
||||
|
||||
function TableContent() {
|
||||
return (
|
||||
<Table aria-label="collapsible table">
|
||||
{/* ------------------ TABLE HEADER ------------------ */}
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{selectedRows.length > 0 ? (
|
||||
<>
|
||||
<TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={2}>
|
||||
<Stack direction="row">
|
||||
<Checkbox checked={selectAll} onChange={handleSelectAll} />
|
||||
{selectedRows.length > 0 ? selectedRows.length : '0'} <Typography variant='subtitle2'>Selected</Typography>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={6}>
|
||||
|
||||
</TableCell>
|
||||
{/* <TableCell style={{ backgroundColor: '#D1F1F1' }} align="right" colSpan={2}>
|
||||
<Button variant="text" color="error" startIcon={<CancelIcon />} onClick={() => {setOpenDialogSubmit(true);
|
||||
setApprove('decline');}}>
|
||||
<Typography variant='subtitle2'>Decline</Typography>
|
||||
</Button>
|
||||
</TableCell> */}
|
||||
<TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={4}>
|
||||
<Button variant="text" color="primary" startIcon={<CheckCircleIcon />} onClick={() => {setOpenDialogSubmit(true);
|
||||
setApprove('approve');}}>
|
||||
<Typography variant='subtitle2'>Download</Typography>
|
||||
</Button>
|
||||
</TableCell>
|
||||
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TableCell style={headStyle} align="left">
|
||||
<Checkbox checked={selectAll} onChange={handleSelectAll} />
|
||||
</TableCell>
|
||||
{headCells &&
|
||||
headCells.map((headCell, index) => (
|
||||
<TableCell
|
||||
key={index}
|
||||
sortDirection={orders?.orderBy === headCell.id ? orders.order : false}
|
||||
// @ts-ignore
|
||||
align={headCell.align}
|
||||
sx={{ padding: 2 }}
|
||||
width={headCell.width ? headCell.width : 'auto'}
|
||||
>
|
||||
{headCell.isSort ? (
|
||||
<TableSortLabel
|
||||
active={orders?.orderBy === headCell.id}
|
||||
direction={orders?.orderBy === headCell.id ? orders.order : 'asc'}
|
||||
onClick={createSortHandler(headCell.id)}
|
||||
>
|
||||
{headCell.label}
|
||||
{orders?.orderBy === headCell.id ? (
|
||||
<Box component="span" sx={visuallyHidden}>
|
||||
{orders.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableSortLabel>
|
||||
) : (
|
||||
headCell.label
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{/* ------------------ END TABLE HEADER ------------------ */}
|
||||
|
||||
{/* ------------------ TABLE ROW ------------------ */}
|
||||
{dataTableIsLoading ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={11} align="center">
|
||||
Loading
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : dataTableData.data.length === 0 ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={11} align="center">
|
||||
No Data
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map((row) => (
|
||||
<Row key={row.id} row={row} isSelected={selectedRows.includes(row.id)} onSelect={handleRowSelect} />
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
{/* ------------------ END TABLE ROW ------------------ */}
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12}>
|
||||
<form style={{ width: '100%' }}>
|
||||
<Grid container spacing={1} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={importClaimManagement}
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleImportChange}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
|
||||
/>
|
||||
{!currentImportFileName && (
|
||||
<>
|
||||
<Grid item xs={12} md={4}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
variant="outlined"
|
||||
value={searchText}
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearchSubmit(event);
|
||||
}
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
</InputAdornment>
|
||||
),
|
||||
placeholder: 'Search Code or Name',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={5} display="flex" sx={{ gap: '16px' }}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
value={startDate}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
onChange={(value) => {
|
||||
|
||||
// loadDataTableData();
|
||||
setStartDate(value);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
value={endDate}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
onChange={(value) => {
|
||||
setEndDate(value);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
fullWidth
|
||||
label="End"
|
||||
// error={!!error}
|
||||
// helperText={error?.message}
|
||||
// {...other}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={3}>
|
||||
{
|
||||
providers ? (
|
||||
<Autocomplete
|
||||
id="provider"
|
||||
options={providers}
|
||||
getOptionLabel={(option) => option.name || ''}
|
||||
value={providers.find((item) => item.id === dataProvider) || null}
|
||||
onChange={(event, value) => {
|
||||
if (value) {
|
||||
setDataProvider(value.id);
|
||||
} else {
|
||||
setDataProvider(null);
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Provider"
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
):(
|
||||
<>
|
||||
<Typography variant='body2' align='center'>Loading...</Typography>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
{/* <Grid item xs={12} md={3} display="flex" sx={{ gap: '16px' }}>
|
||||
<FormControl >
|
||||
<LoadingButton
|
||||
id="upload-button"
|
||||
variant="outlined"
|
||||
startIcon={<UploadIcon />}
|
||||
sx={{ p: 1.8 }}
|
||||
loading={isLoadingImport}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Typography variant="inherit" sx={{ marginLeft: 1 }}>
|
||||
Import
|
||||
</Typography>
|
||||
</LoadingButton>
|
||||
<Menu
|
||||
id="import-button"
|
||||
anchorEl={anchorEl}
|
||||
open={createMenu}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleImportButton}>
|
||||
<Typography variant='body2'>Import</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleGetTemplate();
|
||||
}}
|
||||
>
|
||||
<Typography variant='body2'> Download Template</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</FormControl>
|
||||
<FormControl >
|
||||
<LoadingButton
|
||||
id="upload-button"
|
||||
variant="contained"
|
||||
startIcon={<Download />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={handleExportReport}
|
||||
loading={isLoading}
|
||||
>
|
||||
<Typography variant="inherit" sx={{ marginLeft: 1 }}>
|
||||
Export
|
||||
</Typography>
|
||||
</LoadingButton>
|
||||
</FormControl>
|
||||
</Grid> */}
|
||||
</>
|
||||
)}
|
||||
{currentImportFileName && (
|
||||
<Grid item xs={12} md={12}>
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
||||
<Button onClick={handleImportButton} fullWidth>
|
||||
{currentImportFileName ?? 'No File Selected'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCancelImportButton}
|
||||
size="small"
|
||||
fullWidth={false}
|
||||
sx={{ p: 1.8 }}
|
||||
>
|
||||
<CancelIcon color="error" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<LoadingButton
|
||||
id="upload-button"
|
||||
variant="outlined"
|
||||
startIcon={<UploadIcon />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={handleUpload}
|
||||
loading={importLoading}
|
||||
>
|
||||
Upload
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</Grid>
|
||||
)}
|
||||
{importResult && (
|
||||
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
|
||||
<Box sx={{ color: 'text.secondary' }}>
|
||||
Last Import Result :{' '}
|
||||
<Box sx={{ color: 'success.main', display: 'inline' }}>
|
||||
{importResult.data.total_success_row ?? 0}
|
||||
</Box>{' '}
|
||||
Row Processed,{' '}
|
||||
<Box sx={{ color: 'error.main', display: 'inline' }}>
|
||||
{importResult.data.total_failed_row}
|
||||
</Box>{' '}
|
||||
Failed,
|
||||
{/* {importResult.data.failed_rows.map((row, index) => (
|
||||
<Typography variant='body' key={index} color="error"> [Code={row.code ? row.code : 'Required'}]</Typography>
|
||||
))} */}
|
||||
Report:
|
||||
<u onClick={handleExportReportFiled} style={{cursor:'pointer'}}>Download Data Result Import</u>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Grid>
|
||||
</form>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<DataTable
|
||||
isLoading={dataTableIsLoading}
|
||||
lastRequest={0}
|
||||
data={dataTableData}
|
||||
handlePageChange={handlePageChange}
|
||||
TableContent={<TableContent />}
|
||||
/>
|
||||
<Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row" alignItems='center' spacing={1}>
|
||||
<Typography variant="h6">Confirmation</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
|
||||
<Stack spacing={2} padding={2}>
|
||||
<Typography variant='body1'>Are you sure to Download this files selected ?</Typography>
|
||||
{approve == "decline" ? (
|
||||
<Stack direction='row' spacing={2} marginTop={2}>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
label="Reason decline"
|
||||
multiline
|
||||
rows={4} // Tentukan jumlah baris yang diinginkan
|
||||
defaultValue=""
|
||||
onChange={handleReasonDeclineChange}
|
||||
variant="outlined"
|
||||
sx={{width:'100%'}}
|
||||
// fullWidth // Gunakan ini jika Anda ingin input memenuhi lebar Stack
|
||||
/>
|
||||
</Stack>
|
||||
): ''}
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
|
||||
<Button sx={{backgroundColor: (approve === 'decline' ? '' : '#19BBBB'), color: (approve === 'decline' ? '#FF4842' : ''), borderColor: '#FF4842'}} onClick={handleSubmitData} variant={(approve === 'decline' ? 'outlined' : 'contained')}>{(approve === "decline" ? 'Decline' : 'Download')}</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -418,6 +418,10 @@ export default function Router() {
|
||||
path: 'report/appointments/:id/edit',
|
||||
element: <AppointmentCreate />,
|
||||
},
|
||||
{
|
||||
path: 'report/files-provider',
|
||||
element: <FilesProvider />,
|
||||
},
|
||||
{
|
||||
path: 'report/live-chat',
|
||||
element: <Livechat />,
|
||||
@@ -507,6 +511,18 @@ export default function Router() {
|
||||
path: 'custormer-service/final-log/detail/:id',
|
||||
element: <FinalLogDetail />,
|
||||
},
|
||||
{
|
||||
path: 'e-prescription/live-chat',
|
||||
element: <EPrescription />,
|
||||
},
|
||||
{
|
||||
path: 'e-prescription/live-chat/:id',
|
||||
element: <EPrescriptionCreate />,
|
||||
},
|
||||
{
|
||||
path: 'e-prescription/live-chat/:id/show',
|
||||
element: <EPrescriptionShow />,
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
@@ -630,7 +646,7 @@ const InpatientMonitoring = Loadable(lazy(() => import('../pages/CaseManagement/
|
||||
/**
|
||||
* Customer Service
|
||||
*/
|
||||
// Request
|
||||
// Request
|
||||
const RequestLog = Loadable(lazy(() => import('../pages/CustomerService/Request/Index')))
|
||||
const RequestLogDetail = Loadable(lazy(() => import('../pages/CustomerService/Request/Detail')))
|
||||
// Final LOG
|
||||
@@ -662,10 +678,17 @@ const Appointment = Loadable(lazy(() => import('../pages/Report/Appointments/Ind
|
||||
const AppointmentCreate = Loadable(lazy(() => import('../pages/Report/Appointments/Create')));
|
||||
const AppointmentShow = Loadable(lazy(() => import('../pages/Report/Appointments/Show')));
|
||||
|
||||
const FilesProvider = Loadable(lazy(() => import('../pages/Report/FilesProvider/Index')));
|
||||
|
||||
const Livechat = Loadable(lazy(() => import('../pages/Report/Livechat/Index')));
|
||||
const LivechatCreate = Loadable(lazy(() => import('../pages/Report/Livechat/Create')));
|
||||
const LivechatShow = Loadable(lazy(() => import('../pages/Report/Livechat/Show')));
|
||||
|
||||
|
||||
const EPrescription = Loadable(lazy(() => import('../pages/EPrescription/Livechat/Index')));
|
||||
const EPrescriptionCreate = Loadable(lazy(() => import('../pages/EPrescription/Livechat/Create')));
|
||||
const EPrescriptionShow = Loadable(lazy(() => import('../pages/EPrescription/Livechat/Show')));
|
||||
|
||||
const LinksehatPayment = Loadable(lazy(() => import('../pages/Report/LinksehatPayments/Index')));
|
||||
|
||||
const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
|
||||
|
||||
Reference in New Issue
Block a user