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

update listing dan edit claim management

Browse Source
This commit is contained in:
Tb Fajri
2023-10-26 10:32:43 +07:00
parent 0abcaea006
commit adcb4e508d
22 changed files with 2302 additions and 1218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/dashboard/src/@types/claims.ts
View File

@@ -1,3 +1,4 @@
import { Benefit } from "./corporates";
import { Member } from "./member";
export type ClaimRequest = {
@@ -17,12 +18,45 @@ export type ClaimRequest = {
}
};
export type Claims = {
id: number;
code: string;
plan: Plan;
payor_id: string;
corporate_id: string;
policy_number: string;
member: Member;
benefit: Benefit | boolean;
status: string;
claim_request: ClaimRequest;
};
export type ClaimsEdit = {
id: number;
plan_id: string;
payor_id: string;
corporate_id: string;
policy_number: string;
member_id: string;
benefit_code: string;
benefit_desc: string;
amount_incurred: number;
amount_approved: number;
amount_not_approved: number;
excess_paid: number;
}
export type Files = {
name: string;
url: string;
path: string;
}
export type Plan = {
code: string;
}
export type Organizations = {
id: number;
code: string;
@@ -46,4 +80,11 @@ export type Organizations = {
merchant_key: string;
image_url: string;
region_groups: string;
};
};
export type Import = {
result_file: {
url: string,
name: string,
}
}

30
frontend/dashboard/src/pages/ClaimRequests/Form.tsx
View File

@@ -6,6 +6,8 @@ import { Controller, useForm } from 'react-hook-form';
import React, { useRef, useEffect, useMemo, useState } from 'react';
import axios from '../../utils/axios';
import { FormProvider, RHFTextField } from '../../components/hook-form';
import { makeFormData } from '@/utils/jsonToFormData';
import {
Autocomplete,
Button,
@@ -55,7 +57,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
const { enqueueSnackbar } = useSnackbar();
const EditClaimSchema = Yup.object().shape({
organization_id: Yup.string().required('Name is required'),
organization_id: Yup.string().required('Code Provider is required'),
});
const defaultValues = useMemo(
@@ -66,19 +68,21 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
date: currentClaim?.submission_date ? fDateTimesecond(currentClaim?.submission_date) : '-',
claim_method: currentClaim?.payment_type || '-',
service_type: currentClaim?.service_code || '-',
organization_id: currentClaim?.claim?.organization?.code || '-',
organization_id: currentClaim?.organization?.code || '-',
}),
[currentClaim]
);
useEffect(() => {
console.log(currentClaim, 'er')
if (isEdit && currentClaim) {
reset(defaultValues);
}
if (!isEdit) {
reset(defaultValues);
}
// setFileKondisis(currentClaim?.files_by_type?.claim_diagnosis);
// setFileDiagnosas(currentClaim?.files_by_type?.claim_diagnosis);
setFileHasilPenunjangCurrent(currentClaim?.files_by_type?.claim_result);
}, [isEdit, currentClaim]);
@@ -150,6 +154,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
// Files Result Hasil Penunjang
const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState([]);
const [fileHasilPenunjangsCurrent, setFileHasilPenunjangCurrent] = useState([]);
const handleResultInputChange = (event) => {
if (event.target.files[0]) {
@@ -169,12 +174,19 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
const onSubmit = async (data: FormValuesProps) => {
try {
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 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 formData = makeFormData({
result_files: fileHasilPenunjangs,
diagnosa_files: fileDiagnosas,
kondisi_files: fileKondisis,
provider_code: data.organization_id,
_method: 'PUT'
});
const response = await axios.post(`/claim-requests/${data.id}`, formData);

15
frontend/dashboard/src/pages/ClaimRequests/List.tsx
View File

@@ -47,12 +47,13 @@ import { fDateTimesecond } from '@/utils/formatTime';
import { capitalizeFirstLetter } from '@/utils/formatString';
import Label from '@/components/Label';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import { Import } from '@/@types/claims';
// import LoadingButton from '@/theme/overrides/LoadingButton';
export default function List() {
const { themeColorPresets } = useSettings();
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
const [importResult, setImportResult] = useState<Import>(null);
const navigate = useNavigate()
@@ -213,7 +214,7 @@ export default function List() {
}}
>
<MenuItem onClick={handleImportButton}>Import</MenuItem>
<MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template test</MenuItem>
<MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template</MenuItem>
<MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
</Menu>
<Button
@@ -257,6 +258,16 @@ export default function List() {
</LoadingButton>
</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>
);
}

21
frontend/dashboard/src/pages/Claims/CreateUpdate.tsx
View File

@@ -28,31 +28,26 @@ export default function ClaimsCreateUpdate() {
useEffect(() => {
if (isEdit) {
axios.get('/claims/' + id).then((res) => {
// console.log('Yeet', res.data);
setCurrentClaim(res.data);
});
axios.get(`/claims/${id}/edit`).then((res) => {
console.log('Yeet', res.data.data);
setCurrentClaim(res.data.data);
});;
}
}, [id]);
return (
<Page title={isEdit ? `Edit Claim : ${currentClaim?.id}` : "Create New Claim"}>
<Page title={'Edit Claim Management'}>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center">
<HeaderBreadcrumbs
heading={
!isEdit
? 'Create New Claim'
: `Edit Claim : ${currentClaim?.code}`
}
heading={`Edit Claim Management`}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Claim',
href: '/claims',
name: 'Claim Management',
},
{ name: !isEdit ? 'Create' : currentClaim?.id ?? '' },
]}
/>
</Stack>

554
frontend/dashboard/src/pages/Claims/Form.tsx
View File

@@ -24,16 +24,18 @@ import {
ListItemAvatar,
Avatar,
ListItemText,
Card,
} from '@mui/material';
import Iconify from '../../components/Iconify';
import { LoadingButton } from '@mui/lab';
import { fCurrency } from '../../utils/formatNumber';
import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
import { Add, DeleteOutline } from '@mui/icons-material';
import { ClaimsEdit } from '@/@types/claims';
type Props = {
isEdit: boolean;
currentClaim?: any;
currentClaim?: ClaimsEdit;
};
export default function ClaimForm({ isEdit, currentClaim }: Props) {
@@ -42,18 +44,27 @@ 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'),
benefit_desc: Yup.string().required('Benefit Desc is required'),
amount_incurred: Yup.string().required('Amount Incurred is required'),
amount_approved: Yup.number().required('Amount Approved is required'),
amount_not_approved: Yup.number().required('Amount Not Approved is required'),
excess_paid: Yup.number().required('Excess Paid is required'),
// file: Yup.boolean().required('Corporate Status is required'),
});
const defaultValues = useMemo(
() => ({
member: currentClaim?.member || {},
plan_id: currentClaim?.plan_id || null,
payor_id: currentClaim?.payor_id || null,
corporate_id: currentClaim?.corporate_id || null,
policy_number: currentClaim?.policy_number || null,
member_id: currentClaim?.member_id || null,
diagnosis_id: currentClaim?.diagnosis_id || null,
total_claim: currentClaim?.total_claim || 0,
benefit_code: currentClaim?.benefit_code || '-',
benefit_desc: currentClaim?.benefit_desc || '-',
amount_incurred: currentClaim?.amount_incurred || 0,
amount_approved: currentClaim?.amount_approved || 0,
amount_not_approved: currentClaim?.amount_not_approved || 0,
excess_paid: currentClaim?.excess_paid || 0,
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[currentClaim]
@@ -88,11 +99,11 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
console.log('defaultValues', defaultValues);
if (isEdit && currentClaim) {
reset(defaultValues);
setMember(defaultValues.member)
// setMember(defaultValues.member)
}
if (!isEdit) {
reset(defaultValues);
setMember(defaultValues.member)
// setMember(defaultValues.member)
}
}, [isEdit, currentClaim]);
@@ -105,13 +116,13 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
console.log('currentFiles', getValues('uploaded_files'));
};
const memberSelected = (member) => {
setMember(member)
};
// const memberSelected = (member) => {
// setMember(member)
// };
const checkLimit = async () => {
console.log('CHECKING LIMIT');
};
// const checkLimit = async () => {
// console.log('CHECKING LIMIT');
// };
const onSubmit = async (data: any) => {
try {
@@ -122,7 +133,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
}
reset();
enqueueSnackbar(
!isEdit ? 'Organizations Created Successfully!' : 'Organizations Udpated Successfully!',
!isEdit ? 'Organizations Created Successfully!' : 'Claim Udpated Successfully!',
{ variant: 'success' }
);
navigate('/claims');
@@ -154,443 +165,86 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
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' });
}}
/>
</Grid>
{/* <Grid item xs={2}>
<Button variant="outlined" fullWidth sx={{ p: 1.8 }} onClick={() => {
setIsMemberDialogOpen(true)
}}>
{member ? 'Change' : 'Search'}
</Button>
</Grid> */}
</Stack>
{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>
<Card sx={{paddingX:2, paddingY:3}}>
<Grid container spacing={2}>
{/* Baris ke 1 */}
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Plan ID*</Typography>
<RHFTextField name="plan_id" disabled />
</Grid>
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Payor ID*</Typography>
<RHFTextField name="payor_id" disabled />
</Grid>
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Corporate ID*</Typography>
<RHFTextField name="corporate_id"disabled />
</Grid>
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Policy Number*</Typography>
<RHFTextField name="policy_number" disabled />
</Grid>
</Stack>
)}
<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)
// }}
/>
)}
/>
)}
/>
{/* Baris ke 2 */}
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Memeber ID*</Typography>
<RHFTextField name="member_id" disabled />
</Grid>
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Benefit Code*</Typography>
<RHFTextField name="benefit_code" disabled />
</Grid>
<Grid item xs={6}>
<Typography marginBottom={2} variant="subtitle1">Benefit Desc*</Typography>
<RHFTextField name="benefit_desc" label="Benefit Desc" />
</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>
)}
<RHFTextField type="number" name="total_claim" label="Total Claim" />
{isEdit && (
<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>
))}
</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');
{/* Baris ke 3 */}
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Amount Incurred*</Typography>
<RHFTextField name="amount_incurred" label="Amount Incurred" type="number" />
</Grid>
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Amount Approved*</Typography>
<RHFTextField name="amount_approved" label="Amount Approved" type="number" />
</Grid>
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Amount Not Approved*</Typography>
<RHFTextField name="amount_not_approved" label="Amount Not Approved" type="number" />
</Grid>
<Grid item xs={3}>
<Typography marginBottom={2} variant="subtitle1">Excess Paid*</Typography>
<RHFTextField name="excess_paid" label="Excess Paid*" type="number" />
</Grid>
</Grid>
</Card>
<Grid container marginTop={2}>
<Grid item xs={12} md={12} >
<Stack direction="row" alignItems="center" justifyContent="flex-end">
<Button
sx={{
margin: 1
}}
/>
</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>
</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>
</FormProvider>
type="submit"
variant="contained"
size="large"
color='inherit'
onClick={() => navigate(`/claims`)}
>
Cancel
</Button>
<LoadingButton
type="submit"
variant="contained"
size="large"
// fullWidth={true}
loading={isSubmitting}
>
Save
</LoadingButton>
</Stack>
</Grid>
</Grid>
</FormProvider>
);
}

111
frontend/dashboard/src/pages/Claims/List.tsx
View File

@@ -16,13 +16,10 @@ import {
Menu,
ButtonGroup,
Tooltip,
TableHead,
} 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 FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
import AssessmentIcon from '@mui/icons-material/Assessment';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
@@ -36,6 +33,12 @@ import { Chip } from '@mui/material';
import Iconify from '@/components/Iconify';
import { enqueueSnackbar } from 'notistack';
import { fDate } 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';
export default function List() {
const [searchParams, setSearchParams] = useSearchParams();
@@ -84,10 +87,16 @@ export default function List() {
fullWidth
onChange={handleSearchChange}
value={searchText}
placeholder='Search Code or Member ID...'
/>
<Tooltip title="Benefit Usage Report">
<Button variant="outlined" startIcon={<AssessmentIcon />} sx={{ p: 1.8 }} onClick={handleGetData}/>
</Tooltip>
<Button
variant="contained"
startIcon={<Download />}
sx={{ p: 1.8 }}
onClick={handleGetData}
>
Export
</Button>
</Stack>
</form>
);
@@ -153,7 +162,7 @@ export default function List() {
};
// Called on every row to map the data to the columns
function createData(data: any): any {
function createData(data: Claims): Claims {
return {
...data,
};
@@ -176,36 +185,37 @@ export default function List() {
</TableCell> */}
<TableCell align="left">{row.claim_request?.code}</TableCell>
{/* <TableCell align="left">{row.code}</TableCell> */}
<TableCell align="left">{fDate(row.created_at)}</TableCell>
<TableCell align="left">{row.member?.full_name}</TableCell>
<TableCell align="left">{row.plan?.code}</TableCell>
<TableCell align="left">{row.claim_request?.service?.name}</TableCell>
<TableCell align="left">
({row.diagnoses[0]?.icd?.code}) {row.diagnoses[0]?.icd?.name}
</TableCell>
<TableCell align="left">{fCurrency(row.total_claim)}</TableCell>
<TableCell align="left">{row.member?.current_plan?.code}</TableCell>
<TableCell align="left">{row.member?.current_corporate?.payor_id}</TableCell>
<TableCell align="left">{row.member?.current_corporate?.code}</TableCell>
<TableCell align="left">{row.member?.current_corporate?.current_policy?.code}</TableCell>
<TableCell align="left">{row.member?.member_id}</TableCell>
<TableCell align="left">{row.benefit ? row.benefit?.description : '-'}</TableCell>
<TableCell align="center">
{row.status == 'draft' && (<Chip label='Draft' color="default" variant="outlined" />)}
{row.status == 'requested' && (<Chip label='Requested' color="primary" />)}
{row.status == 'received' && (<Chip label='Received' color="success" variant='outlined' />)}
{row.status == 'approved' && (<Chip label='Approved' color="success" />)}
{row.status == 'postpone' && (<Chip label='Postpone' color="primary" variant="outlined" />)}
{row.status == 'paid' && (<Chip label='Paid' color="warning" />)}
{row.status == 'declined' && (<Chip label='Declined' color="error" />)}
{row.status == 'draft' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
{row.status == 'requested' && (<Label color='primary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
{row.status == 'received' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
{row.status == 'approved' && (<Label color='success' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
{row.status == 'postpone' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
{row.status == 'paid' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
{row.status == 'declined' && (<Label color='error' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
</TableCell>
<TableCell align="right">
{['approved', 'paid'].includes(row.status) && (
<Iconify icon="eva:eye-fill" onClick={(e) => {
navigate('/claims/' + row.id);
}}></Iconify>
)}
{!['approved', 'paid'].includes(row.status) && (
<Iconify icon="eva:edit-outline" onClick={(e) => {
navigate('/claims/' + row.id);
}}></Iconify>
)}
</TableCell>
<TableMoreMenu actions={
<>
<MenuItem onClick={() =>navigate(`/claims/edit/${row.id}`) }>
<Edit />
Edit
</MenuItem>
<MenuItem onClick={() => setOpen(!open) }>
<FindInPageOutlinedIcon />
Detail
</MenuItem>
</>
} />
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
@@ -230,41 +240,38 @@ 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">
Code Request
Code
</TableCell>
<TableCell style={headStyle} align="left">
Date
</TableCell>
{/* <TableCell style={headStyle} align="left">
Code Claim
</TableCell> */}
<TableCell style={headStyle} align="left">
Member Name
Plan ID
</TableCell>
<TableCell style={headStyle} align="left">
Plan
Payor ID
</TableCell>
<TableCell style={headStyle} align="left">
Benefit
Corporate ID
</TableCell>
<TableCell style={headStyle} align="left">
Diagnosis
Policy Number
</TableCell>
<TableCell style={headStyle} align="left">
Total Claim
Member ID
</TableCell>
<TableCell style={headStyle} align="left">
Benefit Desc
</TableCell>
<TableCell style={headStyle} align="left">
Status
</TableCell>
<TableCell style={headStyle} align="right">
Action
<TableCell style={headStyle} align="left">
</TableCell>
</TableRow>
</TableBody>
</TableHead>
{/* ------------------ END TABLE HEADER ------------------ */}
{/* ------------------ TABLE ROW ------------------ */}

1
frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx
View File

@@ -70,6 +70,7 @@ export default function CorporateTabNavigations({ position }: Props) {
// },
];
useEffect(() => {
console.log(position);
let currentIndex = mainTabItems.findIndex((item) => item.path === position);
setCurrentTab(currentIndex);
}, []);

2
frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx
View File

@@ -44,7 +44,7 @@ export default function CorporateFormularium() {
/>
<Card>
<CorporateTabNavigations position={'formularium'} />
<CorporateTabNavigations position={'formulariums'} />
<List />
</Card>
</Page>

1
frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx
View File

@@ -82,7 +82,6 @@ export default function CategoryDetail({props, formularium} : ParamsDetail) {
} else {
active = "1"
}
console.log(corporate_id, id , active)
axios
.put(`/corporates/${corporate_id}/formulariums-update-status/${id}`, {
active: active,

2
frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx
View File

@@ -60,7 +60,7 @@ export default function CorporateFormulariumCreateForm() {
const [dataDropdownData, setDataDropdownData] = React.useState<DetailCorpFormularium[] | null>(null)
const loadDataDropdown = async () => {
setDataDropdownLoading(true);
const resp = await axios.get(`corporates/${corporate_id}/formulariums/create`);
const resp = await axios.get(`corporates/${corporate_id}/formulariums-create`);
console.log(resp.data);
setDataDropdownLoading(false);