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

implement claim submit

Browse Source
This commit is contained in:
lasteinsa
2023-10-09 17:25:16 +07:00
parent b49f78858f
commit 1700e8ebfb
9 changed files with 691 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/client-portal/src/App.tsx
View File

@@ -9,27 +9,31 @@ import { ProgressBarStyle } from './components/ProgressBar';
import ThemeColorPresets from './components/ThemeColorPresets';
import MotionLazyContainer from './components/animate/MotionLazyContainer';
import { SnackbarProvider } from 'notistack';
import { Provider } from 'react-redux';
import store from './store';
// ----------------------------------------------------------------------
export default function App() {
return (
<ThemeProvider>
<SnackbarProvider
autoHideDuration={2000}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<ThemeColorPresets>
<RtlLayout>
<MotionLazyContainer>
<ProgressBarStyle />
{/* <Settings /> */}
<ScrollToTop />
<Router />
</MotionLazyContainer>
</RtlLayout>
</ThemeColorPresets>
</SnackbarProvider>
</ThemeProvider>
<Provider store={store}>
<ThemeProvider>
<SnackbarProvider
autoHideDuration={2000}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<ThemeColorPresets>
<RtlLayout>
<MotionLazyContainer>
<ProgressBarStyle />
{/* <Settings /> */}
<ScrollToTop />
<Router />
</MotionLazyContainer>
</RtlLayout>
</ThemeColorPresets>
</SnackbarProvider>
</ThemeProvider>
</Provider>
);
}

599
frontend/client-portal/src/pages/ClaimSubmit/DialogDetailClaim.tsx
View File

@@ -14,6 +14,7 @@ import {
Stack,
Grid,
Avatar,
ButtonBase,
} from '@mui/material';
import { Add } from '@mui/icons-material';
// components
@@ -23,10 +24,17 @@ import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
// theme
import palette from '../../theme/palette';
// React
import { ReactElement, useRef, useState } from 'react';
import { Fragment, ReactElement, useEffect, useRef, useState } from 'react';
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import { fPostFormat } from '../../utils/formatTime';
import { fCurrency } from '../../utils/formatNumber';
import { LoadingButton } from '@mui/lab';
import Iconify from '../../components/Iconify';
import { useSelector } from 'react-redux';
import { RootState } from '../../store';
import { makeFormData } from '../../utils/jsonToFormData';
import { useSnackbar } from 'notistack';
import axiosInstance from '../../utils/axios';
// -------------------------------- type --------------------------------------
type DataContentType = {
@@ -44,6 +52,24 @@ type DataContentType = {
};
};
type ClaimSubmission = {
id: number;
personID: string;
personName: string;
typePatient: string;
limit: {
current: number;
total: number;
percentage: number;
};
avatar: {
url: string;
};
fileRealInvoice: any[];
anotherDocument: any[];
laboratoryResult: any[];
};
type MuiDialogProps = {
title?: {
name?: string;
@@ -69,188 +95,435 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
}));
/* -------------------------------------------------------------------------- */
const steps = ['Review', 'Approval', 'Disbursement'];
const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
function clickHandler(arg0: string) {
throw new Error('Function not implemented.');
}
const navigate = useNavigate();
const [serviceCode, setServiceCode] = useState('IP');
const { enqueueSnackbar } = useSnackbar();
// const getContent = () => (
const [submitLoading, setSubmitLoading] = useState(false);
const selectedData = useSelector((state: RootState) => state.claims.data);
const [dataContent, setDataContent] = useState<ClaimSubmission[]>([]);
// );
useEffect(() => {
if (selectedData.length > 0) {
let temp: ClaimSubmission[] = selectedData.map((item) => ({
id: item.id,
avatar: {
url: '',
},
limit: item.limit,
personID: item.memberId,
personName: item.fullName,
typePatient: 'IP',
anotherDocument: [],
fileRealInvoice: [],
laboratoryResult: [],
}));
setDataContent(temp);
} else {
navigate('/claim-submit', { replace: true });
}
}, [selectedData]);
const handleServiceCode = (data: ClaimSubmission, index?: number) => {
let temp = dataContent.map((item) => {
if (item.personID === data.personID) {
return {
...item,
typePatient: item.typePatient === 'IP' ? 'OP' : 'IP',
};
} else {
return item;
}
});
setDataContent(temp);
};
const handleInputFile = (
event: any,
data: ClaimSubmission,
typeFile: 'invoice' | 'another' | 'lab'
) => {
if (event.target.files[0]) {
let temp = dataContent.map((item) => {
if (item.personID === data.personID) {
if (typeFile === 'invoice') {
return {
...item,
fileRealInvoice: [...item.fileRealInvoice, event.target.files[0]],
};
} else if (typeFile === 'another') {
return {
...item,
anotherDocument: [...item.anotherDocument, event.target.files[0]],
};
} else {
return {
...item,
laboratoryResult: [...item.laboratoryResult, event.target.files[0]],
};
}
} else {
return item;
}
});
setDataContent(temp);
} else {
console.log('NO FILE');
}
};
const handleRemoveFile = (
data: ClaimSubmission,
typeFile: 'invoice' | 'another' | 'lab',
index: number
) => {
let temp = dataContent.map((item) => {
if (item.personID === data.personID) {
if (typeFile === 'invoice') {
return {
...item,
fileRealInvoice: item.fileRealInvoice.filter((file, fileIndex) => fileIndex != index),
};
} else if (typeFile === 'another') {
return {
...item,
anotherDocument: item.anotherDocument.filter((file, fileIndex) => fileIndex != index),
};
} else {
return {
...item,
laboratoryResult: item.laboratoryResult.filter((file, fileIndex) => fileIndex != index),
};
}
} else {
return item;
}
});
setDataContent(temp);
};
const onSubmit = () => {
setSubmitLoading(true);
const mapArrayToFormData = (claims: ClaimSubmission[]): FormData => {
const formData = new FormData();
claims.forEach((claim, index) => {
formData.append(`member_id[${index}]`, claim.id.toString());
formData.append(`service_code[${index}]`, claim.typePatient);
claim.laboratoryResult.forEach((file, fileIndex) => {
formData.append(`laboratorium[${index}][${fileIndex}]`, file);
});
claim.anotherDocument.forEach((file, fileIndex) => {
formData.append(`prescription[${index}][${fileIndex}]`, file);
});
claim.fileRealInvoice.forEach((file, fileIndex) => {
formData.append(`invoice[${index}][${fileIndex}]`, file);
});
});
return formData;
};
const formData = mapArrayToFormData(dataContent);
axiosInstance
.post('/claim-requests', formData)
.then((response) => {
enqueueSnackbar(response.data.message ?? 'Berhasil membuat data', { variant: 'success' });
navigate('/claim-submit', { replace: true });
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
})
.finally(() => {
setSubmitLoading(false);
});
};
return (
<>
<Grid container>
<Grid container spacing={8}>
{/* Field 1 */}
<Grid item xs={12} paddingX="24px" paddingY="20px">
<Stack direction="row" alignItems="center">
<ArrowBackIosIcon onClick={() => navigate(`/corporate`)} sx={{ cursor: "pointer" }} />
<Typography variant="h5" sx={{ flexGrow: 1 }}>Claim Submission </Typography>
<Typography variant="inherit" sx={{ textAlign: "center", flexBasis: "15%" }}>Submission Date </Typography>
<Typography textAlign={'right'} variant="h6" sx={{ textAlign: "right" }}>
<ArrowBackIosIcon
onClick={() => navigate(`/claim-submit`)}
sx={{ cursor: 'pointer' }}
/>
<Typography variant="h5" sx={{ flexGrow: 1 }}>
Claim Submission{' '}
</Typography>
<Typography variant="inherit" sx={{ textAlign: 'center', flexBasis: '15%' }}>
Submission Date{' '}
</Typography>
<Typography textAlign={'right'} variant="h6" sx={{ textAlign: 'right' }}>
{fPostFormat(new Date(), 'dd MMM yyyy')}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} paddingX="24px" paddingY="20px">
<Stack direction="row" spacing={4}>
<Button
sx={{ padding: 2, width: '50%', border: serviceCode === 'OP' ? '1px solid #919EAB52' : '1px solid #19BBBB' }}
variant={serviceCode == 'IP' ? 'outlined' : ''}
onClick={() => {
setServiceCode('IP');
}}
>
Inpatient
</Button>
<Button
sx={{ padding: 2, width: '50%',border: serviceCode === 'IP' ? '1px solid #919EAB52' : '1px solid #19BBBB' }}
variant={serviceCode == 'OP' ? 'outlined' : ''}
onClick={() => {
setServiceCode('OP');
}}
>
Outpatient
</Button>
</Stack>
</Grid>
<Grid item xs={12}>
<Card sx={{ p: 2, marginBottom: 2 }}>
<Stack direction="row" alignContent={'center'}>
<Avatar
src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
alt={'test'}
sx={{ margin: 1, width: 56, height: 56 }}
/>
<Stack sx={{ p: 1 }}>
<Typography variant='h5'>{'Alexandra Rhea Putranto'}</Typography>
<Typography variant='subtitle1' color={'#637381'}>{'KM002-01'}</Typography>
</Stack>
<Stack sx={{ p: 1 }}>
<Typography variant="body1" sx={{ marginBottom: 1, fontWeight: 600 }}>
Total Limit
</Typography>
<BorderLinearProgress variant="determinate" value={80} />
<Typography sx={{ textAlign: 'right', marginTop: 1 }}>
{fCurrency(8000000)} / {fCurrency(100000)}
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{dataContent.map((row, index) => {
return (
<Grid item xs={12} key={index}>
<Card sx={{ p: 3 }}>
<Grid container spacing={4} key={index}>
<Grid item xs={12} paddingX="24px" paddingY="20px">
<Stack direction="row" spacing={4}>
<Button
sx={{
padding: 2,
width: '50%',
border:
row.typePatient === 'OP' ? '1px solid #919EAB52' : '1px solid #19BBBB',
}}
variant="outlined"
color={row.typePatient === 'IP' ? 'primary' : 'inherit'}
onClick={() => {
handleServiceCode(row);
}}
>
Inpatient
</Button>
<Button
sx={{
padding: 2,
width: '50%',
border:
row.typePatient === 'IP' ? '1px solid #919EAB52' : '1px solid #19BBBB',
}}
variant="outlined"
color={row.typePatient === 'OP' ? 'primary' : 'inherit'}
onClick={() => {
handleServiceCode(row);
}}
>
Outpatient
</Button>
</Stack>
</Grid>
<Grid item xs={12}>
<Card sx={{ p: 2 }}>
<Stack direction="row" alignContent={'center'}>
<Avatar
src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
alt={'test'}
sx={{ margin: 1, width: 56, height: 56 }}
/>
<Stack sx={{ p: 1 }}>
<Typography variant="h5">{row.personName}</Typography>
<Typography variant="subtitle1" color="#637381">
{row.personID}
</Typography>
</Stack>
<Stack sx={{ p: 1 }}>
<Typography variant="body1" sx={{ marginBottom: 1, fontWeight: 600 }}>
Total Limit
</Typography>
<BorderLinearProgress
variant="determinate"
value={row.limit && row.limit.percentage}
sx={{ mb: 1 }}
/>
<Typography sx={{ textAlign: 'right', marginTop: 1 }}>
{fCurrency(8000000)} / {fCurrency(100000)}
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* REAL INVOICE */}
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h6">Real Invoice</Typography>
</Grid>
{row.fileRealInvoice &&
row.fileRealInvoice.map((file, fileIndex) => (
<Grid item xs={12} key={fileIndex}>
<Stack direction="row" justifyContent={'space-between'}>
<Typography sx={{ color: 'text.secondary' }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
handleRemoveFile(row, 'invoice', fileIndex);
}}
/>
</Stack>
</Grid>
))}
<Grid item xs={12}>
<Box
sx={{
display: 'flex',
placeContent: 'center',
placeItems: 'center',
border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
p: 0,
}}
>
<Buttons handle={handleInputFile} row={row} type="invoice" />
</Box>
</Grid>
</Grid>
</Grid>
{/* DOCTOR'S PRESCRIPTION AND ANOTHER DOCUMENTS */}
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h6">
Doctor's Prescription and Another Documents
</Typography>
</Grid>
{row.anotherDocument &&
row.anotherDocument.map((file, fileIndex) => (
<Grid item xs={12} key={fileIndex}>
<Stack direction="row" justifyContent={'space-between'}>
<Typography sx={{ color: 'text.secondary' }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
handleRemoveFile(row, 'another', fileIndex);
}}
/>
</Stack>
</Grid>
))}
<Grid item xs={12}>
<Box
sx={{
display: 'flex',
placeContent: 'center',
placeItems: 'center',
border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
p: 0,
}}
>
<Buttons handle={handleInputFile} row={row} type="another" />
</Box>
</Grid>
</Grid>
</Grid>
{/* LABORATORY RESULTS */}
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h6">Laboraroty Results</Typography>
</Grid>
{row.laboratoryResult &&
row.laboratoryResult.map((file, fileIndex) => (
<Grid item xs={12} key={fileIndex}>
<Stack direction="row" justifyContent={'space-between'}>
<Typography sx={{ color: 'text.secondary' }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
handleRemoveFile(row, 'lab', fileIndex);
}}
/>
</Stack>
</Grid>
))}
</Grid>
<Grid item xs={12}>
<Box
sx={{
display: 'flex',
placeContent: 'center',
placeItems: 'center',
border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
p: 0,
}}
>
<Buttons handle={handleInputFile} row={row} type="lab" />
</Box>
</Grid>
</Grid>
</Grid>
</Card>
</Grid>
);
})}
<Grid item xs={12}>
<LoadingButton
variant="contained"
sx={{ marginTop: 2, p: 2, margin: '10px' }}
fullWidth
onClick={onSubmit}
loading={submitLoading}
>
Claim Submit
</LoadingButton>
</Grid>
</Grid>
<Stack marginTop={2}>
<Typography variant="subtitle1" paddingY={2}>
17 Mei 2022
</Typography>
</Stack>
<Stack direction="row" spacing={2}>
<Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
<Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
{/* Item 1 */}
<Card sx={{ paddingY: 2, paddingX: 3 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="body1">09:10 WIB</Typography>
<Typography
sx={{
backgroundColor: palette.light.warning.lighter,
color: palette.light.warning.dark,
borderColor: palette.light.warning.dark,
border: '1px solid',
borderRadius: '6px',
padding: 1,
}}
variant="caption"
>
Approval
</Typography>
</Stack>
<Divider sx={{ marginY: 2 }} />
<Stack>
<Typography variant="subtitle2" color="#404040">
Details : mohon melengkapi kekurangan dokumen
</Typography>
<Typography variant="caption" color="#757575" sx={{ marginTop: 2, marginBottom: 1 }}>
Lab pemeriksaan darah
</Typography>
<Button
variant="outlined"
startIcon={<Add />}
fullWidth
sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
// onClick={() => clickHandler('topUpLimit')}
>
Hasil Pemeriksaan Laboratorium
</Button>
</Stack>
</Card>
{/* Item 2 */}
<Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="body1">09:00 WIB</Typography>
<Typography
sx={{
backgroundColor: palette.light.warning.lighter,
color: palette.light.warning.dark,
borderColor: palette.light.warning.dark,
border: '1px solid',
borderRadius: '6px',
padding: 1,
}}
variant="caption"
>
Approval
</Typography>
</Stack>
<Divider sx={{ marginY: 2 }} />
<Stack>
<Typography variant="subtitle2" color="#404040">
Details : Penilaian Dokter
</Typography>
</Stack>
</Card>
{/* Item 3 */}
<Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="body1">08:00 WIB</Typography>
<Typography
sx={{
backgroundColor: '#F5F5F5',
color: '#757575',
borderColor: '#757575',
border: '1px solid',
borderRadius: '6px',
padding: 1,
}}
variant="caption"
>
Review
</Typography>
</Stack>
<Divider sx={{ marginY: 2 }} />
<Stack>
<Typography variant="subtitle2" color="#404040">
Details : Klaim Diajukan
</Typography>
</Stack>
</Card>
</Stack>
</Stack>
</>
// <MuiDialog
// title={title}
// openDialog={openDialog}
// setOpenDialog={setOpenDialog}
// content={getContent()}
// />
);
};
// let temp = [
// {
// member: "",
// result_file: [
// "file.pdf",
// "file2.pdf"
// ]
// }
// ]
export default DialogDetailClaim;
type ButtonIProp = {
row: ClaimSubmission;
type: 'invoice' | 'another' | 'lab';
handle: (event: any, row: any, type: any) => void;
};
const Buttons = ({ handle, row, type }: ButtonIProp) => {
const ref = useRef<HTMLInputElement>(null);
return (
<ButtonBase sx={{ p: 4 }} onClick={() => ref.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 Invoice
</Typography>
</Box>
<input
ref={ref}
hidden
accept="application/pdf"
type="file"
name="file"
multiple
onChange={(event) => handle(event, row, type)}
/>
</ButtonBase>
);
};

10
frontend/client-portal/src/pages/ClaimSubmit/List.tsx
View File

@@ -106,7 +106,6 @@ export default function List() {
handleSearchSubmit: handleSearchSubmit,
};
/* ------------------------------------------------------------------------- */
/*-------------------------------- handlle checkbox ------------------------ */
const handleCheckboxChange = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -122,18 +121,11 @@ export default function List() {
}
};
/* -------------------------------- headCell -------------------------------- */
return (
<Stack>
<CardClaimSubmit
rows={data}
loadings={loadings}
params={params}
searchs={searchs}
/>
<CardClaimSubmit rows={data} loadings={loadings} params={params} searchs={searchs} />
</Stack>
);
}

120
frontend/client-portal/src/sections/claim-submit/DialogClaimSubmitMember.tsx
View File

@@ -26,6 +26,9 @@ import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { fSplit } from '../../utils/formatNumber';
import { LoadingButton } from '@mui/lab';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../store';
import { claimSubmitAction, claimSubmitType } from '../../store/claimSubmit';
// ----------------------------------------------------------------------
@@ -80,6 +83,10 @@ export default function DialogClaimSubmitMember({
/* ---------------------------------- data ---------------------------------- */
const [data, setData] = useState([]);
const dispatch = useDispatch();
const selectedData = useSelector((state: RootState) => state.claims.data);
const [dataMemberClaim, setDataMemberClaim] = useState<DataContentType>({
id: 0,
fullName: '',
@@ -108,7 +115,6 @@ export default function DialogClaimSubmitMember({
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ Icon On Click ----------------------------- */
const clickHandler = ({ id, fullName, memberId, limit, avatar }: DataContentType) => {
setDataMemberClaim({
@@ -126,6 +132,15 @@ export default function DialogClaimSubmitMember({
},
});
};
const handleCheck = (data: DataContentType, isChecked: boolean) => {
if (isChecked) {
dispatch(claimSubmitAction.patch([...selectedData, data]));
} else {
let temp = selectedData.filter((row) => row.memberId !== data.memberId);
dispatch(claimSubmitAction.patch(temp));
}
};
/* -------------------------------------------------------------------------- */
useEffect(() => {
@@ -140,6 +155,10 @@ export default function DialogClaimSubmitMember({
})();
}, [corporateValue, openDialog, appliedParams]);
useEffect(() => {
dispatch(claimSubmitAction.dispatch());
}, [dispatch]);
const getContent = () => (
<Stack>
<Stack marginTop={2} spacing={1}>
@@ -147,47 +166,54 @@ export default function DialogClaimSubmitMember({
<Card
key={key}
sx={{ paddingY: 1, paddingX: 2 }}
onClick={() =>
clickHandler({
id: row.id,
fullName: row.fullName,
memberId: row.memberId,
limit: {
current: row.limit.current,
total: row.limit.total,
percentage: row.limit.percentage,
},
})
}
// onClick={() =>
// clickHandler({
// id: row.id,
// fullName: row.fullName,
// memberId: row.memberId,
// limit: {
// current: row.limit.current,
// total: row.limit.total,
// percentage: row.limit.percentage,
// },
// })
// }
>
<Stack direction="row" alignItems="center" >
<Grid item xs={1} lg={1} xl={1} >
<Stack direction="row" alignItems="center">
<Grid item xs={1} lg={1} xl={1}>
<form>
<FormControlLabel
value="end"
control={<Checkbox />}
control={<Checkbox onChange={(e) => handleCheck(row, e.target.checked)} />}
label=""
labelPlacement="end"
sx={{marginLeft: '20px'}}
sx={{ marginLeft: '20px' }}
/>
</form>
</Grid>
<div style={{ position: 'relative', flex: 'none', height: 'fit-content', margin: '15px'}}>
<img
width={52}
height={52}
src="/images/user-profile.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
</div>
<Grid item xs={7} lg={7} xl={7} >
<div
style={{
position: 'relative',
flex: 'none',
height: 'fit-content',
margin: '15px',
}}
>
<img
width={52}
height={52}
src="/images/user-profile.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
</div>
<Grid item xs={7} lg={7} xl={7}>
<Typography variant="subtitle1">{row.fullName}</Typography>
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
{row.memberId}
</Typography>
</Grid>
<Grid item xs={3} lg={3} xl={3} >
<Grid item xs={3} lg={3} xl={3}>
<BorderLinearProgress
variant="determinate"
value={row.limit && row.limit.percentage}
@@ -196,27 +222,40 @@ export default function DialogClaimSubmitMember({
/>
<Stack direction={'row'}>
<Grid item xs={3}>
<Typography variant='overline' sx={{textAlign:'left'}}>
<Typography variant="overline" sx={{ textAlign: 'left' }}>
LIMIT
</Typography>
</Grid>
<Grid item xs={7} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Stack direction={'row'}>
<Typography variant='overline'>
{fSplit(row.limit && row.limit.current)}
<Typography variant="overline">
{fSplit(row.limit && row.limit.current)}
</Typography>
<Typography variant='overline'>
/ {fSplit(row.limit && row.limit.total)}
<Typography variant="overline">
/ {fSplit(row.limit && row.limit.total)}
</Typography>
</Stack>
</Grid>
</Stack>
</Grid>
<Grid item xs={2} lg={2} xl={2} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<IconButton >
<Grid
item
xs={2}
lg={2}
xl={2}
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
>
<IconButton>
<Iconify icon="ic:history" />
</IconButton>
<IconButton sx={{marginLeft: '10px'}} onClick={() => navigate(`/claim-request/${row.id}`)} >
<IconButton
disabled={selectedData.length > 0}
sx={{ marginLeft: '10px' }}
onClick={() => {
dispatch(claimSubmitAction.patch([row]));
navigate(`/claim-request/${row.id}`);
}}
>
<Iconify icon="ic:round-chevron-right" />
</IconButton>
</Grid>
@@ -225,7 +264,6 @@ export default function DialogClaimSubmitMember({
))}
</Stack>
</Stack>
);
return (
@@ -254,13 +292,15 @@ export default function DialogClaimSubmitMember({
<Grid item xs={12}>
<LoadingButton
variant="contained"
sx={{ marginTop: 2, p: 2, margin: '10px', color:'#212B36', backgroundColor:'#DFE3E8' }}
// sx={{ marginTop: 2, p: 2, margin: '10px', color: '#212B36', backgroundColor: '#DFE3E8' }}
sx={{ marginTop: 2, p: 2, margin: '10px' }}
fullWidth
disabled={selectedData.length === 0}
onClick={() => navigate('/claim-request/bulk')}
>
Claim Submit Selected
</LoadingButton>
</Grid>
</Grid>
)
);
}

37
frontend/client-portal/src/store/claimSubmit.ts Normal file
View File

@@ -0,0 +1,37 @@
import { createSlice } from '@reduxjs/toolkit';
export type claimSubmitType = {
id: number;
fullName: string;
memberId: string;
limit: {
current: number;
total: number;
percentage: number;
};
};
type initState = {
data: claimSubmitType[];
};
let initState: initState = {
data: [],
};
const claimSubmitSlice = createSlice({
name: 'claimsubmit',
initialState: initState,
reducers: {
patch(state, action) {
state.data = action.payload;
},
dispatch(state) {
state.data = [];
},
},
});
export const claimSubmitAction = claimSubmitSlice.actions;
export default claimSubmitSlice.reducer;

12
frontend/client-portal/src/store/index.ts Normal file
View File

@@ -0,0 +1,12 @@
import { configureStore } from '@reduxjs/toolkit';
import claimSubmit from './claimSubmit';
const store = configureStore({
reducer: {
claims: claimSubmit,
},
});
export type RootState = ReturnType<typeof store.getState>;
export default store;