Merge branch 'staging' of http://itcorp.primaya.id:3000/rajif/aso into staging

This commit is contained in:
adibwp
2023-10-25 10:31:31 +07:00
31 changed files with 1755 additions and 851 deletions

View File

@@ -0,0 +1,49 @@
import { Member } from "./member";
export type ClaimRequest = {
id: number;
code: string;
name: string;
submission_date: string;
payment_type: string;
service_code: string;
claim_method: string;
service_type: string;
code_provider: string;
file_condition: Files;
member: Member;
claim: {
organization: Organizations
}
};
export type Files = {
name: string;
url: string;
path: string;
}
export type Organizations = {
id: number;
code: string;
name: string;
address: string;
type: string;
lat: string;
lng: string;
phone: string;
timezone: string;
active: boolean | number;
province_id: number;
city_id: number;
district_id: number;
village_id: number;
postal_code: string;
description: string;
technology: string;
support_services: string;
merchant_code: string;
merchant_key: string;
image_url: string;
region_groups: string;
};

View File

@@ -30,6 +30,7 @@ export type Hospital = {
corporate_id: number;
code: string;
name?: string;
active: number;
}
export type Employee = {

View File

@@ -0,0 +1,8 @@
export type Drug = {
id: number;
type: string;
code: string;
name: string;
version:string;
active: number;
}

View File

@@ -42,6 +42,7 @@ const navConfig = [
{
title: 'PHARMACY & DELIVERY MANAGEMENT',
children: [
{ title: 'Drug', path: '/master/drugs'},
{ title: 'Inventory', path: '/inventory' },
{ title: 'Delivery Services', path: '/delivery' },
],
@@ -53,7 +54,6 @@ const navConfig = [
{ title: 'Corporate', path: '/corporates' },
// { title: 'Corporate Create', path: '/corporates/create' },
{ title: 'Formularium', path: '/master/formularium-template' },
{ title: 'Obat', path: '/master/drugs' },
{ title: 'Master ICD-10 Diagnosis', path: '/master/diagnosis-template' },
{ title: 'Hospitals', path: '/hospitals' },
],

View File

@@ -15,44 +15,42 @@ import { enqueueSnackbar } from 'notistack';
import { LoadingButton } from '@mui/lab';
import { fCurrency } from '../../utils/formatNumber';
import Iconify from '../../components/Iconify';
import { ClaimRequest } from '@/@types/claims';
import Form from './Form';
export default function ClaimsCreateUpdate() {
const { themeStretch } = useSettings();
const { id } = useParams();
const isEdit = id ? true : false;
const [currentClaim, setCurrentClaim] = useState();
const [currentClaim, setCurrentClaim] = useState<ClaimRequest>();
useEffect(() => {
if (isEdit) {
axios.get('/claims/' + id).then((res) => {
// console.log('Yeet', res.data);
setCurrentClaim(res.data);
axios.get('/claim-requests/' + id).then((res) => {
console.log('Yeet', res.data);
setCurrentClaim(res.data.data);
});
console.log(currentClaim)
}
}, [id]);
return (
<Page title={isEdit ? `Edit Claim : ${currentClaim?.id}` : "Create New Claim"}>
<Page title={isEdit ? `Edit Claim Request` : "Create New Claim"}>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center">
<HeaderBreadcrumbs
heading={
!isEdit
? 'Create New Claim'
: `Edit Claim : ${currentClaim?.code}`
}
heading={'Edit Claim Request'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Claim',
href: '/claims',
name: 'Claim Request',
},
{ name: !isEdit ? 'Create' : currentClaim?.id ?? '' },
]}
/>
</Stack>

View File

@@ -3,7 +3,7 @@ import { useSnackbar } from 'notistack';
import { useNavigate } from 'react-router-dom';
import { yupResolver } from '@hookform/resolvers/yup';
import { Controller, useForm } from 'react-hook-form';
import React, { useEffect, useMemo, useState } from 'react';
import React, { useRef, useEffect, useMemo, useState } from 'react';
import axios from '../../utils/axios';
import { FormProvider, RHFTextField } from '../../components/hook-form';
import {
@@ -24,16 +24,29 @@ import {
ListItemAvatar,
Avatar,
ListItemText,
Card,
InputAdornment,
Divider,
ButtonBase,
Box,
} from '@mui/material';
import Iconify from '../../components/Iconify';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import { LoadingButton } from '@mui/lab';
import { fCurrency } from '../../utils/formatNumber';
import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
import { Add, DeleteOutline } from '@mui/icons-material';
import { ClaimRequest, Files } from '@/@types/claims';
import { fDateTimesecond } from '@/utils/formatTime';
interface FormValuesProps extends Partial<ClaimRequest> {
taxes: boolean;
inStock: boolean;
}
type Props = {
isEdit: boolean;
currentClaim?: any;
currentClaim?: ClaimRequest;
};
export default function ClaimForm({ isEdit, currentClaim }: Props) {
@@ -41,28 +54,39 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
const { enqueueSnackbar } = useSnackbar();
const NewCorporateSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required'),
active: Yup.boolean().required('Corporate Status is required'),
// file: Yup.boolean().required('Corporate Status is required'),
const EditClaimSchema = Yup.object().shape({
organization_id: Yup.string().required('Name is required'),
});
const defaultValues = useMemo(
() => ({
member: currentClaim?.member || {},
member_id: currentClaim?.member_id || null,
diagnosis_id: currentClaim?.diagnosis_id || null,
total_claim: currentClaim?.total_claim || 0,
id: currentClaim?.id || '-',
code: currentClaim?.code || '-',
member_name: currentClaim?.member?.name || '-',
date: currentClaim?.submission_date ? fDateTimesecond(currentClaim?.submission_date) : '-',
claim_method: currentClaim?.payment_type || '-',
service_type: currentClaim?.service_code || '-',
organization_id: currentClaim?.claim?.organization?.code || '-',
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[currentClaim]
);
const methods = useForm<any>({
resolver: yupResolver(NewCorporateSchema),
useEffect(() => {
console.log(currentClaim, 'er')
if (isEdit && currentClaim) {
reset(defaultValues);
}
if (!isEdit) {
reset(defaultValues);
}
}, [isEdit, currentClaim]);
const methods = useForm<FormValuesProps>({
resolver: yupResolver(EditClaimSchema),
defaultValues,
});
const {
reset,
watch,
@@ -83,514 +107,326 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
const [member, setMember] = useState({})
useEffect(() => {
console.log('defaultValues', defaultValues);
if (isEdit && currentClaim) {
reset(defaultValues);
setMember(defaultValues.member)
// ----------------------------------------------------------------------
// Files Result Kondisi
const fileKondisiInput = useRef<HTMLInputElement>(null);
const [fileKondisis, setFileKondisis] = useState<Files>([]);
const handleKondisiInputChange = (event) => {
if (event.target.files[0]) {
setFileKondisis([...fileKondisis, ...event.target.files]);
} else {
console.log('NO FILE');
}
if (!isEdit) {
reset(defaultValues);
setMember(defaultValues.member)
};
const removeKondisiFiles = (filesState, index) => {
setFileKondisis(
filesState.filter((file, fileIndex) => {
return fileIndex != index;
})
);
};
// Files Result Diagnosa
const fileDiagnosaInput = useRef<HTMLInputElement>(null);
const [fileDiagnosas, setFileDiagnosas] = useState([]);
const handleDiagnosaInputChange = (event) => {
if (event.target.files[0]) {
setFileDiagnosas([...fileDiagnosas, ...event.target.files]);
} else {
console.log('NO FILE');
}
}, [isEdit, currentClaim]);
const fileSelected = (event, type) => {
const files = event.target.files;
const currentFiles = getValues(`uploaded_files.${type}`) ?? [];
setValue(`uploaded_files.${type}`, [...currentFiles, ...files]);
console.log('currentFiles', getValues('uploaded_files'));
};
const removeDiagnosaFiles = (filesState, index) => {
setFileDiagnosas(
filesState.filter((file, fileIndex) => {
return fileIndex != index;
})
);
};
const memberSelected = (member) => {
setMember(member)
// Files Result Hasil Penunjang
const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState([]);
const handleResultInputChange = (event) => {
if (event.target.files[0]) {
setFileHasilPenunjangs([...fileHasilPenunjangs, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeFiles = (filesState, index) => {
setFileHasilPenunjangs(
filesState.filter((file, fileIndex) => {
return fileIndex != index;
})
);
};
const checkLimit = async () => {
console.log('CHECKING LIMIT');
};
const onSubmit = async (data: any) => {
const onSubmit = async (data: FormValuesProps) => {
try {
if (!isEdit) {
const response = await axios.post('/claims', data);
} else {
const response = await axios.put('/claims/' + currentClaim?.id ?? '', data);
}
const formData = new FormData();
formData.append('result_files', fileHasilPenunjangs);
formData.append('diagnosa_files', fileDiagnosaInput);
formData.append('kondisi_files', fileKondisiInput);
formData.append('provider_code', data.organization_id);
formData.append('_method', 'PUT');
const response = await axios.post(`/claim-requests/${data.id}`, formData);
reset();
enqueueSnackbar(
!isEdit ? 'Organizations Created Successfully!' : 'Organizations Udpated Successfully!',
{ variant: 'success' }
);
navigate('/claims');
enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
navigate('/claim-requests');
} catch (error: any) {
if (error && error.response.status === 422) {
for (const [key, value] of Object.entries(error.response.data.errors)) {
setError(key, { message: value[0] });
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
// setError(key, { message: value[0] });
enqueueSnackbar('Failed Processing Request', { variant: 'error' });
}
} else {
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
}
}
const ascent = document?.querySelector('ascent');
if (ascent != null) {
ascent.innerHTML = '';
}
};
function generate(files, element: React.ReactElement) {
return files.map((value) =>
React.cloneElement(element, {
key: value,
})
);
}
const headStyle = {};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Typography variant="h6">Member</Typography>
<Stack spacing={2} direction="row">
<Grid item xs={12}>
<RHFTextField
name="member_id"
label="Member"
variant="outlined"
fullWidth
value={member?.name || ''}
InputProps={{
readOnly: true,
}}
onClick={() => {
if (!isEdit) setIsMemberDialogOpen(true);
if (isEdit) enqueueSnackbar('Cannot Change Member', { variant: 'error' });
}}
/>
<Card sx={{paddingX:2, paddingY:2}}>
<Grid container spacing={2}>
<Grid item xs={5}>
<Typography variant="subtitle1">Code*</Typography>
</Grid>
{/* <Grid item xs={2}>
<Button variant="outlined" fullWidth sx={{ p: 1.8 }} onClick={() => {
setIsMemberDialogOpen(true)
}}>
{member ? 'Change' : 'Search'}
</Button>
</Grid> */}
</Stack>
<Grid item xs={7}>
<Typography variant="subtitle1">Name*</Typography>
</Grid>
<Grid item xs={5}>
<RHFTextField name="code" label="Code" disabled/>
</Grid>
<Grid item xs={7}>
<RHFTextField name="member_name" label="Name" disabled/>
</Grid>
{/* <input type="hidden" name="id"/> */}
{member?.id && (
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Table border="light-700">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">
Name
</TableCell>
<TableCell align="left">{member?.full_name}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">
DOB
</TableCell>
<TableCell align="left">
{member?.birth_date} ({member?.age + ' years'})
</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">
Marital Status
</TableCell>
<TableCell align="left">{member?.marital_status}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">
Record Type
</TableCell>
<TableCell align="left">{member?.record_type}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">
Principal ID
</TableCell>
<TableCell align="left">
{member?.principal_id} (
{member?.relation_with_principal})
</TableCell>
</TableRow>
</TableBody>
</Table>
</Grid>
<Grid item xs={12} md={6}>
<Table border="light-700">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">
Plan
</TableCell>
<TableCell align="left">{member?.current_plan?.code}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">
Active
</TableCell>
<TableCell align="left">
{member?.current_plan?.start} -{' '}
{member?.current_plan?.end} (Active)
</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">
Corporate Limit
</TableCell>
<TableCell align="left">
{fCurrency(0)} / {fCurrency(member?.current_plan?.limit_rules)}
</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">
Plan Usage
</TableCell>
<TableCell align="left">
{fCurrency(0)} / {fCurrency(member?.current_plan?.limit_rules)}
</TableCell>
</TableRow>
</TableBody>
</Table>
</Grid>
</Grid>
</Stack>
)}
<Grid item xs={12}></Grid>
<Controller
name="benefit"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
options={memberBenefits}
getOptionLabel={(option) =>
option ? `#${option.id} (${option.code}) ${option.description}` : ''
}
value={value || ''}
onChange={(event: any, newValue: any) => {
setValue('benefit_id', newValue?.id);
onChange(newValue);
}}
renderInput={(params) => (
<TextField
name="benefit"
{...params}
label="Benefit"
variant="outlined"
fullWidth
// onKeyPress={(event) => {
// if (event.key === 'Enter')
// searchDiagnosis(event.target.value)
// }}
/>
)}
/>
)}
/>
<Grid item xs={3}>
<Typography variant="subtitle1">Date of Submission*</Typography>
</Grid>
<Grid item xs={3}>
<Typography variant="subtitle1">Claim Method*</Typography>
</Grid>
<Grid item xs={3}>
<Typography variant="subtitle1">Service Type*</Typography>
</Grid>
<Grid item xs={3}>
<Typography variant="subtitle1">Code Provider*</Typography>
</Grid>
<Controller
name="diagnosis"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
options={diagnosisOption}
getOptionLabel={(option) => (option ? `(${option.code}) ${option.name}` : '')}
value={value || ''}
onChange={(event: any, newValue: any) => {
setValue('diagnosis_id', newValue?.id);
// setValue('diagnosis', newValue)
onChange(newValue);
}}
renderInput={(params) => (
<TextField
name="diagnosis"
{...params}
label="Diagnosis"
variant="outlined"
fullWidth
onKeyPress={(event) => {
if (event.key === 'Enter') searchDiagnosis(event.target.value);
}}
/>
)}
/>
)}
/>
{isCheckingLimit && (
<Stack
sx={{
backgroundColor: 'gray',
paddingY: 1,
paddingX: 1.5,
mb: 2,
borderRadius: '3-xl',
}}
>
{/* Checking */}
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
<Iconify
icon="bxs:info-circle"
width={12}
height={13}
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Please Wait, Checking Eligibilty
</Typography>
</Typography>
</Stack>
)}
{false && isCheckingLimit == false && isEligible == null && (
<Stack
sx={{
backgroundColor: 'gray',
paddingY: 1,
paddingX: 1.5,
mb: 2,
borderRadius: '3-xl',
}}
>
{/* No Data Selected */}
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
<Iconify
icon="bxs:info-circle"
width={12}
height={13}
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Please Select Diagnosis !
</Typography>
</Typography>
</Stack>
)}
{!isCheckingLimit && isEligible !== null && isEligible && (
<Stack
sx={{
backgroundColor: '#B2E8E8',
paddingY: 1,
paddingX: 1.5,
mb: 2,
borderRadius: '3-xl',
}}
>
{/* Eligible */}
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
<Iconify
icon="bxs:lock-alt"
width={12}
height={13}
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Diagnosis is Eligible
</Typography>
</Typography>
<Typography sx={{ typography: 'caption', color: '#637381' }}>
125.000.000 / 125.000.000
</Typography>
</Stack>
)}
{!isCheckingLimit && isEligible !== null && !isEligible && (
<Stack
sx={{
backgroundColor: '#B2E8E8',
paddingY: 1,
paddingX: 1.5,
mb: 2,
borderRadius: '3-xl',
}}
>
{/* Not Eligible */}
{/* <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
<Iconify
icon="bxs:lock-alt"
width={12}
height={13}
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Not Eligible
</Typography>
</Typography>
<Typography sx={{ typography: 'caption', color: '#637381' }}>
125.000.000 / 125.000.000
</Typography> */}
</Stack>
)}
<Grid item xs={3}>
<RHFTextField InputProps={{endAdornment: (
<InputAdornment position="end">
<CalendarTodayIcon />
</InputAdornment>
), }}
name="date" label="Date of Submission" disabled/>
</Grid>
<Grid item xs={3}>
<RHFTextField name="claim_method" label="Claim Method" disabled/>
</Grid>
<Grid item xs={3}>
<RHFTextField name="service_type" label="Service Type*" disabled/>
</Grid>
<Grid item xs={3}>
<RHFTextField name="organization_id" label="Code Provider*"/>
</Grid>
<RHFTextField type="number" name="total_claim" label="Total Claim" />
{isEdit && (
{/* -------------------------------Upload Dokumen Kondisi------------------------------- */}
<React.Fragment>
<Typography variant="h6">Documents</Typography>
<List>
{(getValues('uploaded_files.invoice') && getValues('uploaded_files.invoice').length
? getValues('uploaded_files.invoice')
: []
).map((file, index) => (
<ListItem
secondaryAction={
<IconButton edge="end" aria-label="delete">
<DeleteOutline />
</IconButton>
}
>
<ListItemAvatar>
<Avatar>
{/* <FileIcon /> */}
I
</Avatar>
</ListItemAvatar>
<ListItemText primary={file.name} secondary={file.type} />
</ListItem>
<Grid item xs={12}>
<Typography variant='h6'> Condition Document</Typography>
</Grid>
<Grid item xs={12}>
{fileKondisis &&
fileKondisis.map((file, index) => (
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeKondisiFiles(fileKondisis, index);
}}
></Iconify>
</Stack>
))}
</List>
<Button
variant="outlined"
startIcon={<Add />}
component="label"
sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
>
Invoice
<input
name="invoice"
hidden
accept="image/*,application/pdf"
multiple
type="file"
onChange={(event) => {
fileSelected(event, 'invoice');
}}
/>
</Button>
<List>
{(getValues('uploaded_files.prescription') && getValues('uploaded_files.prescription').length
? getValues('uploaded_files.prescription')
: []
).map((file, index) => (
<ListItem
secondaryAction={
<IconButton edge="end" aria-label="delete">
<DeleteOutline />
</IconButton>
}
>
<ListItemAvatar>
<Avatar>
{/* <FileIcon /> */}
P
</Avatar>
</ListItemAvatar>
<ListItemText primary={file.name} secondary={file.type} />
</ListItem>
))}
</List>
<Button
variant="outlined"
startIcon={<Add />}
component="label"
sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
>
Prescription
<input
name="prescription"
hidden
accept="image/*,application/pdf"
multiple
type="file"
onChange={(event) => {
fileSelected(event, 'prescription');
}}
/>
</Button>
<List>
{(getValues('uploaded_files.diagnosis') && getValues('uploaded_files.diagnosis').length
? getValues('uploaded_files.diagnosis')
: []
).map((file, index) => (
<ListItem
secondaryAction={
<IconButton edge="end" aria-label="delete">
<DeleteOutline />
</IconButton>
}
>
<ListItemAvatar>
<Avatar>
{/* <FileIcon /> */}
DR
</Avatar>
</ListItemAvatar>
<ListItemText primary={file.name} secondary={file.type} />
</ListItem>
))}
</List>
<Button
variant="outlined"
startIcon={<Add />}
component="label"
sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
>
Doctor Result
<input
name="invoice"
hidden
accept="image/*,application/pdf"
multiple
type="file"
onChange={(event) => {
fileSelected(event, 'diagnosis');
}}
/>
</Button>
</Grid>
<Grid item xs={12}>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileKondisiInput.current?.click()}>
<Box
sx={{
display: 'flex',
placeItems: 'center',
gap: 1,
placeContent: 'center',
}}
>
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
<Typography variant="body1" fontWeight="bold">
Add File
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileKondisiInput}
style={{ display: 'none' }}
multiple
onChange={handleKondisiInputChange}
accept="application/pdf"
/>
</ButtonBase>
</Grid>
</React.Fragment>
{/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
<React.Fragment>
<Grid item xs={12}>
<Typography variant='h6'> Diagnosis Document</Typography>
</Grid>
<Grid item xs={12}>
{fileDiagnosas &&
fileDiagnosas.map((file, index) => (
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeDiagnosaFiles(fileDiagnosas, index);
}}
></Iconify>
</Stack>
))}
</Grid>
<Grid item xs={12}>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.current?.click()}>
<Box
sx={{
display: 'flex',
placeItems: 'center',
gap: 1,
placeContent: 'center',
}}
>
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
<Typography variant="body1" fontWeight="bold">
Add Result
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileDiagnosaInput}
style={{ display: 'none' }}
multiple
onChange={handleDiagnosaInputChange}
accept="application/pdf"
/>
</ButtonBase>
</Grid>
</React.Fragment>
{/* -------------------------------Upload Result Hasil Penunjang------------------------------- */}
<React.Fragment>
<Grid item xs={12}>
<Typography variant='h6'> Supporting Result Document</Typography>
</Grid>
<Grid item xs={12}>
{fileHasilPenunjangs &&
fileHasilPenunjangs.map((file, index) => (
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeFiles(fileHasilPenunjangs, index);
}}
></Iconify>
</Stack>
))}
</Grid>
<Grid item xs={12}>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.current?.click()}>
<Box
sx={{
display: 'flex',
placeItems: 'center',
gap: 1,
placeContent: 'center',
}}
>
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
<Typography variant="body1" fontWeight="bold">
Add Result
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileHasilPenunjangInput}
style={{ display: 'none' }}
multiple
onChange={handleResultInputChange}
accept="application/pdf"
/>
</ButtonBase>
</Grid>
</React.Fragment>
)}
{isEligible === true ? (
<LoadingButton
onClick={handleSubmit(onSubmit)}
variant="contained"
color="success"
style={{ color: '#ffffff' }}
size="large"
fullWidth={true}
loading={isCheckingLimit}
>
Create Claim
</LoadingButton>
) : (
<LoadingButton
onClick={checkLimit}
variant="outlined"
size="large"
fullWidth={true}
loading={isCheckingLimit}
>
Check Limit
</LoadingButton>
)}
</Stack>
<MemberSelectDialog
openDialog={isMemberDialogOpen}
setOpenDialog={setIsMemberDialogOpen}
onSelect={memberSelected}
></MemberSelectDialog>
</Grid>
</Card>
<Grid container marginTop={3}>
<Grid item xs={12} md={12} >
<Stack direction="row" alignItems="center" justifyContent="flex-end">
<Button
sx={{
margin: 1
}}
type="submit"
variant="contained"
size="large"
color='inherit'
onClick={() => navigate(`/claim-requests`)}
>
Cancel
</Button>
<LoadingButton
type="submit"
variant="contained"
size="large"
loading={isSubmitting}
>
Update
</LoadingButton>
</Stack>
</Grid>
</Grid>
</FormProvider>
);
}

View File

@@ -17,12 +17,17 @@ import {
ButtonGroup,
Link,
Chip,
TableHead,
Grid,
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
// hooks
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
@@ -38,6 +43,10 @@ import { enqueueSnackbar } from 'notistack';
import { Divider } from '@mui/material';
import Iconify from '@/components/Iconify';
import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
import { fDateTimesecond } from '@/utils/formatTime';
import { capitalizeFirstLetter } from '@/utils/formatString';
import Label from '@/components/Label';
import TableMoreMenu from '@/components/table/TableMoreMenu';
// import LoadingButton from '@/theme/overrides/LoadingButton';
export default function List() {
@@ -45,6 +54,8 @@ export default function List() {
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
const navigate = useNavigate()
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
@@ -75,6 +86,7 @@ export default function List() {
fullWidth
onChange={handleSearchChange}
value={searchText}
placeholder='Search Code or Name...'
/>
</form>
);
@@ -87,26 +99,164 @@ export default function List() {
const createMenu = Boolean(anchorEl);
const importForm = useRef<HTMLInputElement>(null);
const [currentImportFileName, setCurrentImportFileName] = useState(null);
const [importLoading, setImportLoading] = useState(false);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleImportButton = () => {
if (importForm?.current) {
handleClose();
importForm.current ? importForm.current.click() : console.log('No File selected');
} else {
alert('No file selected');
}
};
const handleCancelImportButton = () => {
importForm.current.value = '';
importForm.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 (importForm.current?.files.length) {
const formData = new FormData();
formData.append('file', importForm.current?.files[0]);
setImportLoading(true);
axios
.post(`claim-requests/import`, formData)
.then((response) => {
handleCancelImportButton();
loadDataTableData();
setImportResult(response.data);
// alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
setImportLoading(false);
})
.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 = (type :string) => {
axios.get('corporates/import-document-example/' + type)
.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 handleGetData = (type :string) => {
axios.get(`corporates/${corporate_id}/data-plan-benefit`)
.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();
})
}
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>
<input
type="file"
id="file"
ref={importForm}
style={{ display: 'none' }}
onChange={handleImportChange}
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
/>
{!currentImportFileName && (
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter} />
<Button
variant="outlined"
startIcon={<UploadIcon />}
sx={{ p: 1.8 }}
onClick={handleClick}
>
Import
</Button>
<Menu
id="import-button"
anchorEl={anchorEl}
open={createMenu}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={handleImportButton}>Import</MenuItem>
<MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template test</MenuItem>
<MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
</Menu>
<Button
variant="contained"
startIcon={<AddIcon />}
sx={{ p: 1.8 }}
onClick={() => {
navigate('/claims/create');
}}
>
Create
</Button>
</Stack>
)}
{currentImportFileName && (
<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>
)}
</div>
);
}
@@ -176,43 +326,43 @@ export default function List() {
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
{/* <TableCell>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
</TableCell> */ }
<TableCell align="left">
<Typography
onClick={() => {
handleShowClaim(row);
}}
color={themeColorPresets}
// onClick={() => {
// handleShowClaim(row);
// }}
>
{row.code}
</Typography>
</TableCell>
<TableCell align="left">{row.member?.full_name}</TableCell>
<TableCell align="left">{row.member?.current_policy?.code}</TableCell>
<TableCell align="left">{row.submission_date}</TableCell>
<TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
<TableCell align="left">{row.service_name}</TableCell>
{/* <TableCell align="left">{row.payment_type_name}</TableCell> */}
<TableCell align="left">{'-'}</TableCell>
<TableCell align="right">
<Chip label={row.status} />
<TableCell align="left">{row.payment_type_name}</TableCell>
<TableCell align="left">
{ row.status == "requested" ?
(<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status)}</Label>) :
(<Label color='success'> {capitalizeFirstLetter(row.status)}</Label>)
}
</TableCell>
<TableCell align="right">
{row.status == 'requested' && (
<LoadingButton
loading={loadingApprove}
variant="outlined"
size="small"
onClick={() => {
handleApprove(row);
}}
>
Ajukan Claim <Iconify icon="eva:arrow-forward-outline"></Iconify>
</LoadingButton>
)}
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
<EditOutlinedIcon />
Edit
</MenuItem>
<MenuItem onClick={() => ''}>
<FindInPageOutlinedIcon />
Detail
</MenuItem>
</>
} />
</TableCell>
{/* <TableCell>
@@ -306,9 +456,9 @@ export default function List() {
return (
<Table aria-label="collapsible table">
{/* ------------------ TABLE HEADER ------------------ */}
<TableBody>
<TableHead>
<TableRow>
<TableCell style={headStyle} align="left" />
{/* <TableCell style={headStyle} align="left" /> */}
<TableCell style={headStyle} align="left">
Code
</TableCell>
@@ -316,23 +466,20 @@ export default function List() {
Name
</TableCell>
<TableCell style={headStyle} align="left">
Nomor Polis
</TableCell>
<TableCell style={headStyle} align="left">
Tanggal Pengajuan
Date of Submission
</TableCell>
<TableCell style={headStyle} align="left">
Service Type
</TableCell>
<TableCell style={headStyle} align="left">
Claim Type
Claim Method
</TableCell>
<TableCell style={headStyle} align="left">
Status
</TableCell>
<TableCell style={headStyle} align="right"></TableCell>
</TableRow>
</TableBody>
</TableHead>
{/* ------------------ END TABLE HEADER ------------------ */}
{/* ------------------ TABLE ROW ------------------ */}
@@ -388,23 +535,28 @@ export default function List() {
function handleDownloadLog() {}
return (
<Card>
<ImportForm />
<Grid container>
<Grid item sm={12}>
<ImportForm />
</Grid>
<DataTable
isLoading={dataTableIsLoading}
lastRequest={0}
data={dataTableData}
handlePageChange={handlePageChange}
TableContent={<TableContent />}
/>
<DialogDetailClaim
openDialog={openDialogDetailClaim}
setOpenDialog={setOpenDialogDetailClaim}
title={{ name: 'Claim Request Detail' }}
data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
></DialogDetailClaim>
</Card>
<Grid item sm={12}>
<DataTable
isLoading={dataTableIsLoading}
lastRequest={0}
data={dataTableData}
handlePageChange={handlePageChange}
TableContent={<TableContent />}
/>
</Grid>
<Grid item sm={12}>
<DialogDetailClaim
openDialog={openDialogDetailClaim}
setOpenDialog={setOpenDialogDetailClaim}
title={{ name: 'Claim Request Detail' }}
data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
></DialogDetailClaim>
</Grid>
</Grid>
);
}

View File

@@ -27,7 +27,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { CorporatePlan } from '../../../@types/corporates';
import { Hospital } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import BasePagination from '../../../components/BasePagination';
import TableMoreMenu from '@/components/table/TableMoreMenu';
@@ -40,7 +40,7 @@ import CloseIcon from '@mui/icons-material/Close';
import { enqueueSnackbar } from 'notistack';
import Label from '../../../components/Label';
export default function PlanList() {
export default function HospitalList() {
const { corporate_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
@@ -80,9 +80,9 @@ export default function PlanList() {
}
// Called on every row to map the data to the columns
function createData(plan: CorporatePlan): CorporatePlan {
function createData(hospital: Hospital): Hospital {
return {
...plan,
...hospital,
};
}

View File

@@ -61,6 +61,7 @@ import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import Label from '../../../components/Label';
export default function CorporatePlanList({handleSubmitSuccess}) {
const navigate = useNavigate();
@@ -424,12 +425,14 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
}
const [columns, setColumns] = React.useState([
{ id: 'member_id', label: 'Member ID', minWidth: 100, align: 'left', width: '10%' },
{ id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left', width: '20%' },
{ id: 'member_id', label: 'Member ID', minWidth: 100, align: 'left', width: '15%' },
{ id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left', width: '15%' },
{ id: 'name', label: 'Name', minWidth: 100, align: 'left', width: '20%' },
{ id: 'plan_id', label: 'Plan ID', minWidth: 100, align: 'left', width: '10%' },
{ id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left', width: '20%' },
{ id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left', width: '20%' },
{ id: 'plan_id', label: 'Plan', minWidth: 100, align: 'left', width: '10%' },
{ id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left', width: '15%' },
{ id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left', width: '15%' },
{id: 'status', label: 'Status', minWidth: 100, align: 'left', width: '5%' },
{id: 'action', label: '', minWidth: 100, align: 'left', width: '5%' },
]);
// Generate the every row of the table
@@ -489,6 +492,19 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
<TableCell align="left">
<Typography variant='body2'>{row.terminated_date ? row.terminated_date : '-'}</Typography>
</TableCell>
<TableCell align="left">
<Typography variant='body2'>
{row.active === 1 ? (
<Label color='success' >
Active
</Label>
) : (
<Label color='error'>
Inactive
</Label>
)}
</Typography>
</TableCell>
<TableCell align='left'>
<TableMoreMenu actions={
<>

View File

@@ -1,16 +1,11 @@
import { Card, Grid } from "@mui/material";
import { useParams } from "react-router-dom";
import { Card } from "@mui/material";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import List from "./List";
export default function Drugs() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const pageTitle = 'Drug';
return (
@@ -20,8 +15,8 @@ export default function Drugs() {
heading={ pageTitle }
links={[
{
name: 'Master',
href: '/master',
name: 'Pharmacy & Delivery Management',
href: '/',
},
{
name: 'Drug',

View File

@@ -1,310 +1,579 @@
// @mui
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
import BasePagination from '../../../components/BasePagination';
import {
Button,
Card,
IconButton,
MenuItem,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
Stack,
Collapse,
Box,
FormControl,
InputLabel,
Select,
FormHelperText,
Menu,
ButtonGroup,
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
// hooks
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { Drug } from '../../../@types/pharmacy-and-delivery-managements';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import BasePagination from '../../../components/BasePagination';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import HistoryIcon from '@mui/icons-material/History';
import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { enqueueSnackbar } from 'notistack';
import Label from '../../../components/Label';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
import DownloadIcon from '@mui/icons-material/Download';
import { LoadingButton } from '@mui/lab';
export default function List() {
const { themeStretch } = useSettings();
export default function DrugList() {
const { corporate_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
const navigate = useNavigate();
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState("");
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState('');
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
}
};
const handleSearchSubmit = (event: any) => {
const handleSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText); // Trigger to Parent
}
};
useEffect(() => { // Trigger First Search
useEffect(() => {
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
}, [searchParams]);
return (
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
return (
<form onSubmit={handleSubmit} style={{ width: '100%' }}>
<TextField
id="search-input"
ref={searchInput}
label="Search Code or Name..."
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
</form>
);
}
function ImportForm(props: any) {
// IMPORT
// Create Button Menu
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const importForm = useRef<HTMLInputElement>(null)
const [currentImportFileName, setCurrentImportFileName] = useState(null)
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleImportButton = () => {
if (importForm?.current) {
handleClose();
importForm.current ? importForm.current.click() : console.log('No File selected');
} else {
alert('No file selected')
}
}
const handleCancelImportButton = () => {
importForm.current.value = "";
importForm.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 (importForm.current?.files.length) {
const formData = new FormData();
formData.append("file", importForm.current?.files[0])
axios.post(`corporates/${corporate_id}/import-plan-benefit`, formData )
.then(response => {
handleCancelImportButton();
loadDataTableData();
setImportResult(response.data)
// alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
})
.catch(response => {
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
})
} else {
enqueueSnackbar('No File Selected', { variant: 'warning' })
}
}
return (
<div>
<input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
{( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter}/>
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
<Button
id="import-button"
variant='outlined'
startIcon={<AddIcon />} sx={{ p: 1.8 }}
aria-controls={createMenu ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={createMenu ? 'true' : undefined}
onClick={handleClick}
>
Import
</Button>
<Menu
id="import-button"
anchorEl={anchorEl}
open={createMenu}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={handleImportButton}>Import</MenuItem>
<MenuItem onClick={handleClose}>Download Template</MenuItem>
</Menu>
</Stack>
)}
{( currentImportFileName && <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>
<Button
id="upload-button"
variant='outlined'
startIcon={<UploadIcon />} sx={{ p: 1.8 }}
onClick={handleUpload}
>
Upload
</Button>
</Stack>
)}
{( importResult &&
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
<Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
</Stack>
)}
</div>
);
);
}
// Called on every row to map the data to the columns
function createData( icd: Icd ): Icd {
return {
...icd,
}
function createData(drug: Drug): Drug {
return {
...drug,
};
}
function ImportForm(props: any) {
// IMPORT
// Create Button Menu
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const importPlan = useRef<HTMLInputElement>(null);
const [currentImportFileName, setCurrentImportFileName] = useState(null);
const [importLoading, setImportLoading] = useState(false);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleImportButton = () => {
if (importPlan?.current) {
handleClose();
importPlan.current ? importPlan.current.click() : console.log('No File selected');
} else {
alert('No file selected');
}
};
const handleCancelImportButton = () => {
if(importPlan.current)
{
importPlan.current.value = '';
importPlan.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(importPlan.current && importPlan.current.files)
{
if (importPlan.current?.files.length) {
const formData = new FormData();
formData.append('file', importPlan.current?.files[0]);
setImportLoading(true);
axios
.post(`master/drugs/import`, formData)
.then((response) => {
handleCancelImportButton();
loadDataTableData();
setImportResult(response.data);
console.log(response.data);
setImportLoading(false);
})
.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('master/drugs/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();
});
};
return (
<div>
<input
type="file"
id="file"
ref={importPlan}
style={{ display: 'none' }}
onChange={handleImportChange}
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
/>
{!currentImportFileName && (
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter} />
<Button
id="import-button"
startIcon={<DownloadIcon />}
sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
aria-controls={createMenu ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={createMenu ? 'true' : undefined}
onClick={handleClick}
>
Import
</Button>
<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>
{/* <MenuItem onClick={handleICDList}>
<Typography variant='body2'>Download ICD</Typography>
</MenuItem> */}
</Menu>
</Stack>
)}
{currentImportFileName && (
<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>
)}
{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'},Name=>{row.name ? row.name : 'Required'}]</Typography>
))}
</Box>
</Stack>
)}
</div>
);
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const { row } = props;
const [open, setOpen] = React.useState(false);
const style1 = {
color: '#637381'
}
return (
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
<TableRow sx={{ '& > *': open ? {borderBottom: 'unset'} : {}, cursor: open ? 'pointer' : '' }} onClick={() => {if(open==true) setOpen(!open)}}>
<TableCell align="left">{row.type ? row.type : '-'}</TableCell>
<TableCell align="left">{row.code ? row.code : '-'}</TableCell>
<TableCell align="left">{row.name ? row.name : '-'}</TableCell>
<TableCell align="left">{row.version ? row.version : '-'}</TableCell>
<TableCell align="left">
{row.active === 1 ? (
<Label color='success' >
Active
</Label>
) : (
<Label color='error'>
Inactive
</Label>
)}
</TableCell>
<TableCell align="left">
<TableMoreMenu actions={
<>
<MenuItem onClick={() => setOpen(!open)}>
<FindInPageOutlinedIcon />
Details
</MenuItem>
{/* <MenuItem onClick={() => handleEditData(row)}>
<EditOutlinedIcon />
Edit
</MenuItem> */}
<MenuItem onClick={() => handleEditDataStatus(row)}>
<CachedOutlinedIcon />
Update Status
</MenuItem>
{/* <MenuItem onClick={() => navigate ('/corporates/'+corporate_id+'/hospitals/'+row.id+'/history')}>
<HistoryIcon />
History
</MenuItem> */}
</>
}
/>
</TableCell>
<TableCell align="left">{row.type}</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.version}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
<TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></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>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow sx={{display: open ? '' : 'none', cursor: open ? 'pointer' : ''}} onClick={() => {if(open==true) setOpen(!open)}}>
<TableCell colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Card sx={{padding:2}}>
<Box sx={{ pb: 2 }}>
<Typography variant='subtitle1'>Detail</Typography>
<Stack marginTop={2}>
<Stack direction='row' spacing={1}>
<Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Code:</Typography>
<Typography variant='body2' sx={{width: '70%'}}>{row.code ? row.code : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={1}>
<Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Name:</Typography>
<Typography variant='body2' sx={{width: '70%'}}>{row.name ? row.name : '-'}</Typography>
</Stack>
</Stack>
</Box>
</Card>
</Collapse>
</TableCell>
</TableRow>
</TableRow>
</React.Fragment>
);
);
}
// 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 [dataTableIsLoading, setDataTableLoading] = React.useState(true);
const [dataTableData, setDataTableData] = React.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('/master/drugs', { params: filter });
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
const headStyle = {
fontWeight: 'bold',
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
// Get Data Drugs
const response = await axios.get('/master/drugs', { params: filter });
setDataTableLoading(false);
setDataTableData(response.data);
};
const applyFilter = async (searchFilter: string) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
const applyFilter = async (searchFilter: any) => {
await loadDataTableData({ search: searchFilter });
setSearchParams({ search: searchFilter });
};
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
};
useEffect(() => {
loadDataTableData();
}, [])
return (
<Stack>
<ImportForm />
loadDataTableData();
}, []);
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} align="left">Type</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Version</TableCell>
<TableCell style={headStyle} align="right">Status</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
<TableBody>
//validation dialog
const [nameField, setNameField] = useState('');
const [codeField, setCodeField] = useState('');
// ID for edit data
const [idField, setIdField] = useState('');
const handleAddData = () => {
navigate('/corporates/'+corporate_id+'/hospitals/create');
}
//Edit data
const handleEditData = (data : any) => {
navigate('/corporates/'+corporate_id+'/hospitals/edit/'+data.id+'/'+data.organization_id);
}
// End dialog for hospitals
// Dialog for update status hospitals
const [openDialogStatus, setOpenDialogStatus] = useState(false);
const [activeField, setActiveField] = useState(0);
const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
const handleCloseDialogUpdate = () => {
setOpenDialogStatus(false);
setNameField('');
setCodeField('');
setIdField('');
setActiveField(activeField);
}
const handleSaveUpdateData = () => {
let activeValue = 0;
if(activeField === 1)
{
activeValue = 0;
}
else
{
activeValue = 1;
}
const updateData = {
reason: reasonUpdate,
active : activeValue,
id: idField,
};
axios
.put('/master/drugs/'+idField+'/activation', updateData)
.then((response) => {
enqueueSnackbar('Data updated successfully', { variant: 'success' });
loadDataTableData();
handleCloseDialogUpdate();
})
.catch((error) => {
enqueueSnackbar('Failed to add data', { variant: 'error' });
});
}
const handleEditDataStatus = (data: any) => {
setIdField(data.id);
setNameField(data.name);
setCodeField(data.code);
setActiveField(data.active);
setOpenDialogStatus(true);
}
// End dialog for update status devisions
return (
<Stack>
<ImportForm />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
{/* Table Head */}
<TableHead>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
<TableCell sx={{width: '10%'}} align="left">
<Typography variant='subtitle2'>Type</Typography>
</TableCell>
<TableCell sx={{width: '20%'}} align="left">
<Typography variant='subtitle2'>Code</Typography>
</TableCell>
<TableCell sx={{width: '30%'}} align="left">
<Typography variant='subtitle2'>Name</Typography>
</TableCell>
<TableCell sx={{width: '20%'}} align="left">
<Typography variant='subtitle2'>Version</Typography>
</TableCell>
<TableCell sx={{width: '10%'}} align="left">
<Typography variant='subtitle2'>Status</Typography>
</TableCell>
<TableCell sx={{width: '10%'}} align="left">
</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
</TableHead>
{/* Condition Table Body */}
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={6} align="center">
Loading
</TableCell>
</TableRow>
</TableBody>
) : (
) : dataTableData.data.length == 0 ? (
<TableBody>
{dataTableData.data.map(row => (
<TableRow>
<TableCell colSpan={6} 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>
)}
</Table>
</TableContainer>
{/* Paginations */}
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
{/* Dialog Update Status */}
<Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} 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">Update Status</Typography>
</Stack>
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
<CloseIcon />
</IconButton>
</Stack>
</DialogTitle>
<DialogContent>
<Stack spacing={2} padding={2}>
<Typography variant='body1'>Are you sure to {activeField == 1 ? 'Inactive' : 'Active'} this drug ?</Typography>
<Card sx={{padding:2}} >
<Stack direction='row' spacing={2}>
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
<Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
</Stack>
<Stack direction='row' spacing={2}>
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
<Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
</Stack>
</Card>
</Stack>
<Stack spacing={2} padding={2}>
<Typography variant='subtitle1'>Reason for update*</Typography>
<FormControl>
<InputLabel htmlFor="reason" required>
Reason for update
</InputLabel>
<Select
id="reason"
value={reasonUpdate}
fullWidth
label="Reason for update"
onChange={(e) => {
setReasonUpdate(e.target.value);
}}
>
<MenuItem value="Agreement changed">Agreement changed</MenuItem>
<MenuItem value="Endorsement">Endorsement</MenuItem>
<MenuItem value="Renewal">Renewal</MenuItem>
<MenuItem value="Worng Setting">Worng Setting</MenuItem>
</Select>
<FormHelperText style={{ color: 'red' }}></FormHelperText>
</FormControl>
</Stack>
</DialogContent>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
<Button sx={{backgroundColor: activeField == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeField == 1 ? 'Inactive' : 'Active'}</Button>
</DialogActions>
</Dialog>
</Stack>
);
}
}

View File

@@ -377,10 +377,18 @@ export default function Router() {
path: 'claim-requests',
element: <ClaimRequests />,
},
{
path: 'claim-requests/edit/:id',
element: <ClaimRequestsCreate />,
},
{
path: 'claims/create',
element: <ClaimsCreate />,
},
{
path: 'claims/edit/:id',
element: <ClaimsCreate />,
},
{
path: 'claims/:id',
element: <ClaimShow />,
@@ -550,6 +558,7 @@ const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate'))
const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
const ClaimRequests = Loadable(lazy(() => import('../pages/ClaimRequests/Index')));
const ClaimRequestsCreate = Loadable(lazy(() => import('../pages/ClaimRequests/CreateUpdate')));
const Membership = Loadable(lazy(() => import('../pages/Service/Membership/index')));

View File

@@ -1,3 +1,5 @@
import { string } from "yup";
export function clearTag(htmlString: string | undefined) {
return htmlString?.replace(/(<([^>]+)>)/gi, "");
}
@@ -9,3 +11,9 @@ export function limitString(anyString: string | undefined, limit: number = 50) {
export function makeExcerpt(htmlString: string | undefined, limit: number = 50) {
return limitString(clearTag(htmlString ?? ''), limit);
}
export function capitalizeFirstLetter(text: string) {
return text.charAt(0).toUpperCase() + text.slice(1);
}

View File

@@ -10,6 +10,10 @@ export function fDateTime(date: Date | string | number) {
return format(new Date(date), 'dd MMM yyyy p');
}
export function fDateTimesecond(date: Date | string | number) {
return format(new Date(date), 'dd MMM yyyy HH:mm:ss');
}
export function fTimestamp(date: Date | string | number) {
return getTime(new Date(date));
}