pengajuan claim
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { Button, Card, Typography, Link, Divider, Stack } from '@mui/material';
|
||||
import { ChevronRight } from '@mui/icons-material';
|
||||
// components
|
||||
import Iconify from '../../components/Iconify';
|
||||
// Section
|
||||
import DialogNotification from './DialogNotification';
|
||||
import DialogDetailClaim from './DialogDetailClaim';
|
||||
// React
|
||||
import { useState } from 'react';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type DataContent = {
|
||||
info: string;
|
||||
date: string;
|
||||
time: string;
|
||||
};
|
||||
|
||||
type NotificationProps = {
|
||||
data?: DataContent[];
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const RootNotificationStyle = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: '1.5rem',
|
||||
color: 'black',
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
height: '100%',
|
||||
maxHeight: '240px',
|
||||
}));
|
||||
|
||||
const ItemNotificationStyle = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(1),
|
||||
borderRadius: 0.5,
|
||||
color: 'black',
|
||||
marginTop: 2,
|
||||
overflowY: 'auto',
|
||||
maxHeight: '154px',
|
||||
gap: '0.5rem',
|
||||
}));
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function CardNotification({ data }: NotificationProps) {
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [dialogTitle, setDialogTitle] = useState('');
|
||||
const [isDialog, setIsDialog] = useState('');
|
||||
|
||||
const clickHandler = (isDialog: string) => {
|
||||
switch (isDialog) {
|
||||
case 'allNotification':
|
||||
setDialogTitle('Notification');
|
||||
setIsDialog(isDialog);
|
||||
setOpenDialog(true);
|
||||
break;
|
||||
case 'infoDetail':
|
||||
setDialogTitle('Claim Details');
|
||||
setIsDialog(isDialog);
|
||||
setOpenDialog(true);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<RootNotificationStyle>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
component="span"
|
||||
sx={{ display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<Iconify icon="eva:bell-fill" marginRight={0.75} />
|
||||
Notification
|
||||
<span
|
||||
style={{
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
backgroundColor: '#19BBBB',
|
||||
marginLeft: '0.5rem',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
</Typography>
|
||||
<Button
|
||||
sx={{ typography: 'body2' }}
|
||||
endIcon={<ChevronRight />}
|
||||
onClick={() => clickHandler('allNotification')}
|
||||
>
|
||||
View All
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<ItemNotificationStyle>
|
||||
{data
|
||||
? data.map(({ info, date, time }, index) => (
|
||||
<div key={index}>
|
||||
{index >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
|
||||
<Typography sx={{ typography: 'caption' }}>{info}</Typography>
|
||||
<Link
|
||||
component="button"
|
||||
variant="caption"
|
||||
underline="always"
|
||||
onClick={() => clickHandler('infoDetail')}
|
||||
>
|
||||
Info Detail
|
||||
</Link>
|
||||
</Stack>
|
||||
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
|
||||
<Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
|
||||
<Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
))
|
||||
: ''}
|
||||
</ItemNotificationStyle>
|
||||
|
||||
{isDialog === 'allNotification' && (
|
||||
<DialogNotification
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
title={{ name: dialogTitle }}
|
||||
data={data}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isDialog === 'infoDetail' && (
|
||||
<DialogDetailClaim
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
title={{ name: dialogTitle }}
|
||||
/>
|
||||
)}
|
||||
</RootNotificationStyle>
|
||||
);
|
||||
}
|
||||
210
frontend/client-portal/src/sections/claim-submit/CardPolicy.tsx
Normal file
210
frontend/client-portal/src/sections/claim-submit/CardPolicy.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Typography,
|
||||
LinearProgress,
|
||||
linearProgressClasses,
|
||||
Stack,
|
||||
} from '@mui/material';
|
||||
// components
|
||||
import Iconify from '../../components/Iconify';
|
||||
// React
|
||||
import { useState } from 'react';
|
||||
// utils
|
||||
import { fCurrency, fSplit } from '../../utils/formatNumber';
|
||||
/* -------------------------------- sections -------------------------------- */
|
||||
import DialogTopUpLimit from './DialogTopUpLimit';
|
||||
import DialogClaimSubmitMember from './DialogClaimSubmitMember';
|
||||
|
||||
/* ---------------------------------- types --------------------------------- */
|
||||
|
||||
type DataMember = {
|
||||
id: number;
|
||||
fullName: string;
|
||||
memberId: string;
|
||||
limit: {
|
||||
current: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
};
|
||||
avatar?: {
|
||||
url?: string;
|
||||
title?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type CardPolicyProps = {
|
||||
data: {
|
||||
limit: {
|
||||
myLimit: {
|
||||
balance: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
};
|
||||
lockLimit: {
|
||||
balance: number;
|
||||
percentage: number;
|
||||
};
|
||||
};
|
||||
topUpLimit: {
|
||||
companyName: string;
|
||||
policyNumber: number;
|
||||
totalMembers: number;
|
||||
totalCases: number;
|
||||
totalPersen: number;
|
||||
myLimit: {
|
||||
balance: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
};
|
||||
maxTopUp: number;
|
||||
};
|
||||
members: {
|
||||
memberId: string;
|
||||
memberFullName: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* --------------------------------- styled --------------------------------- */
|
||||
|
||||
const RootBalanceStyle = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(3),
|
||||
color: 'black',
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
maxHeight: '240px',
|
||||
}));
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 6,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
}));
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export default function CardPolicy(props: CardPolicyProps) {
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [dialogTitle, setDialogTitle] = useState('');
|
||||
const [isDialog, setIsDialog] = useState('');
|
||||
|
||||
const { limit, topUpLimit, members } = props.data || {};
|
||||
if (!limit || !topUpLimit) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const clickHandler = (isDialog: string) => {
|
||||
switch (isDialog) {
|
||||
case 'submitClaim':
|
||||
setDialogTitle('Add Claim');
|
||||
setIsDialog(isDialog);
|
||||
setOpenDialog(true);
|
||||
break;
|
||||
case 'topUpLimit':
|
||||
setDialogTitle('Top Up Limit');
|
||||
setIsDialog(isDialog);
|
||||
setOpenDialog(true);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<RootBalanceStyle>
|
||||
<>
|
||||
<Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
|
||||
<div>
|
||||
<Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
|
||||
Total Limit
|
||||
</Typography>
|
||||
<Typography sx={{ typography: 'body2' }}>
|
||||
{fCurrency(limit.myLimit ? limit.myLimit.balance : 0)}
|
||||
</Typography>
|
||||
<Typography sx={{ typography: 'caption', color: '#919EAB' }}>
|
||||
/ {fSplit(limit.myLimit ? limit.myLimit.total : 0)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<Typography variant="h5" sx={{ ml: 0.5 }}>
|
||||
{limit.myLimit ? limit.myLimit.percentage : 0}%
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<BorderLinearProgress
|
||||
variant="determinate"
|
||||
value={limit.myLimit ? limit.myLimit.percentage : 0}
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
|
||||
<Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
|
||||
<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">
|
||||
Lock Fund ( {limit.lockLimit ? limit.lockLimit.percentage : 0}% )
|
||||
</Typography>
|
||||
</Typography>
|
||||
<Typography sx={{ typography: 'caption', color: '#637381' }}>
|
||||
{fSplit(limit.lockLimit ? limit.lockLimit.balance : 0)} /{' '}
|
||||
{fSplit(limit.myLimit ? limit.myLimit.total : 0)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Iconify icon="bi:clipboard-check-fill" />}
|
||||
fullWidth={true}
|
||||
onClick={() => clickHandler('submitClaim')}
|
||||
>
|
||||
Submit Claim
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Iconify icon="heroicons-solid:cash" />}
|
||||
fullWidth={true}
|
||||
onClick={() => clickHandler('topUpLimit')}
|
||||
>
|
||||
Top Up
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
|
||||
{isDialog === 'submitClaim' && (
|
||||
<DialogClaimSubmitMember
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
title={{ name: dialogTitle }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isDialog === 'topUpLimit' && (
|
||||
<DialogTopUpLimit
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
title={{ name: dialogTitle, icon: 'heroicons-solid:cash' }}
|
||||
data={topUpLimit}
|
||||
/>
|
||||
)}
|
||||
</RootBalanceStyle>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import {
|
||||
Typography,
|
||||
LinearProgress,
|
||||
linearProgressClasses,
|
||||
Stack,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
Card,
|
||||
Grid,
|
||||
IconButton,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
} from '@mui/material';
|
||||
import { Search as SearchIcon } from '@mui/icons-material';
|
||||
// components
|
||||
import MuiDialog from '../../components/MuiDialog';
|
||||
import Iconify from '../../components/Iconify';
|
||||
import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
|
||||
// React
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react';
|
||||
import DialogRequestLog from './DialogRequestLog';
|
||||
import axios from '../../utils/axios';
|
||||
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
import { fSplit } from '../../utils/formatNumber';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type DataContentType = {
|
||||
id: number;
|
||||
fullName: string;
|
||||
memberId: string;
|
||||
limit: {
|
||||
current: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
};
|
||||
avatar?: {
|
||||
url?: string;
|
||||
title?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
// data?: DataContent[];
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: '#D1F1F1',
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 6,
|
||||
backgroundColor: '#54D62C',
|
||||
},
|
||||
}));
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function DialogClaimSubmitMember({
|
||||
title,
|
||||
openDialog,
|
||||
setOpenDialog,
|
||||
}: MuiDialogProps) {
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
|
||||
/* ---------------------------------- data ---------------------------------- */
|
||||
const [data, setData] = useState([]);
|
||||
const [dataMemberClaim, setDataMemberClaim] = useState<DataContentType>({
|
||||
id: 0,
|
||||
fullName: '',
|
||||
memberId: '',
|
||||
limit: {
|
||||
current: 0,
|
||||
total: 0,
|
||||
percentage: 0,
|
||||
},
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* --------------------------------- Search --------------------------------- */
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [appliedParams, setAppliedParams] = useState({});
|
||||
|
||||
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (searchText === '') {
|
||||
setAppliedParams({});
|
||||
} else {
|
||||
setAppliedParams({ search: searchText });
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* ------------------------------ Icon On Click ----------------------------- */
|
||||
const clickHandler = ({ id, fullName, memberId, limit, avatar }: DataContentType) => {
|
||||
setDataMemberClaim({
|
||||
id: id,
|
||||
fullName: fullName,
|
||||
memberId: memberId,
|
||||
limit: {
|
||||
current: limit.current,
|
||||
total: limit.total,
|
||||
percentage: limit.percentage,
|
||||
},
|
||||
avatar: {
|
||||
url: avatar && avatar.url,
|
||||
title: avatar && avatar.title,
|
||||
},
|
||||
});
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (openDialog === true) {
|
||||
const response = await axios.get(`${corporateValue}/members`, {
|
||||
params: { ...appliedParams, type: 'claim-submit' },
|
||||
});
|
||||
|
||||
setData(response.data.data);
|
||||
}
|
||||
})();
|
||||
}, [corporateValue, openDialog, appliedParams]);
|
||||
|
||||
const getContent = () => (
|
||||
<Stack>
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
{data.map((row: DataContentType, key) => (
|
||||
<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,
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<Stack direction="row" alignItems="center" >
|
||||
<Grid item xs={1} lg={1} xl={1} >
|
||||
<form>
|
||||
<FormControlLabel
|
||||
value="end"
|
||||
control={<Checkbox />}
|
||||
label=""
|
||||
labelPlacement="end"
|
||||
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} >
|
||||
<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} >
|
||||
<BorderLinearProgress
|
||||
variant="determinate"
|
||||
value={row.limit && row.limit.percentage}
|
||||
// color='success'
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
<Stack direction={'row'}>
|
||||
<Grid item xs={3}>
|
||||
<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>
|
||||
<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 >
|
||||
<Iconify icon="ic:history" />
|
||||
</IconButton>
|
||||
<IconButton sx={{marginLeft: '10px'}} onClick={() => navigate(`/claim-request/${row.id}`)} >
|
||||
<Iconify icon="ic:round-chevron-right" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
);
|
||||
|
||||
return (
|
||||
<Grid container>
|
||||
<Grid item xs={12} paddingX="10px" paddingY="20px">
|
||||
<form onSubmit={handleSearchSubmit}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={(event) => setSearchText(event?.target.value)}
|
||||
value={searchText}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
placeholder="Search Name or Member ID... "
|
||||
sx={{ marginTop: 2 }}
|
||||
/>
|
||||
</form>
|
||||
{getContent()}
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
sx={{ marginTop: 2, p: 2, margin: '10px', color:'#212B36', backgroundColor:'#DFE3E8' }}
|
||||
fullWidth
|
||||
|
||||
>
|
||||
Claim Submit Selected
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
// @mui
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
Stepper,
|
||||
Step,
|
||||
StepLabel,
|
||||
Card,
|
||||
Typography,
|
||||
Divider,
|
||||
Stack,
|
||||
} from '@mui/material';
|
||||
import { Add } from '@mui/icons-material';
|
||||
// components
|
||||
import MuiDialog from '../../components/MuiDialog';
|
||||
// theme
|
||||
import palette from '../../theme/palette';
|
||||
// React
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
type DataContent = {
|
||||
info: string;
|
||||
date: string;
|
||||
time: string;
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
data?: DataContent[];
|
||||
};
|
||||
|
||||
const steps = ['Review', 'Approval', 'Disbursement'];
|
||||
|
||||
const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
||||
const getContent = () => (
|
||||
<>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
direction="row"
|
||||
sx={{ marginTop: 1 }}
|
||||
>
|
||||
<Typography variant="subtitle1" sx={{ height: 'max-content' }}>
|
||||
Claim Request
|
||||
</Typography>
|
||||
<Stack>
|
||||
<Typography variant="caption">Submission date</Typography>
|
||||
<Typography variant="caption">15 / 05 / 2022</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Box sx={{ width: '100%', marginTop: 2 }}>
|
||||
<Stepper alternativeLabel>
|
||||
{steps.map((label) => (
|
||||
<Step key={label}>
|
||||
<StepLabel>{label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Box>
|
||||
<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' }}
|
||||
>
|
||||
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>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<MuiDialog
|
||||
title={title}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogDetailClaim;
|
||||
@@ -0,0 +1,93 @@
|
||||
// react
|
||||
import { ReactElement, useState } from 'react';
|
||||
// mui
|
||||
import { Card, Divider, Link, Stack, Typography } from '@mui/material';
|
||||
import { styled } from '@mui/material/styles';
|
||||
// Component
|
||||
import MuiDialog from '../../components/MuiDialog';
|
||||
// Sections
|
||||
import DialogDetailClaim from './DialogDetailClaim';
|
||||
|
||||
type DataContent = {
|
||||
info: string;
|
||||
date: string;
|
||||
time: string;
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
data?: DataContent[];
|
||||
};
|
||||
|
||||
const ItemNotificationStyle = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(1),
|
||||
borderRadius: 0.5,
|
||||
color: 'black',
|
||||
}));
|
||||
|
||||
const DialogNotification = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
||||
const [openDialogClaim, setOpenDialogClaim] = useState(false);
|
||||
const [dialogTitleClaim, setDialogTitleClaim] = useState('');
|
||||
|
||||
const clickHandler = () => {
|
||||
setDialogTitleClaim('Claim Details');
|
||||
setOpenDialogClaim(true);
|
||||
};
|
||||
|
||||
const getContent = () => (
|
||||
<Stack sx={{ marginTop: 2 }}>
|
||||
<ItemNotificationStyle>
|
||||
{data
|
||||
? data.map(({ info, date, time }: DataContent, key) => (
|
||||
<div key={key}>
|
||||
{key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
|
||||
<Typography sx={{ typography: 'caption' }}>{info}</Typography>
|
||||
<Link
|
||||
component="button"
|
||||
variant="caption"
|
||||
underline="always"
|
||||
onClick={clickHandler}
|
||||
>
|
||||
Info Detail
|
||||
</Link>
|
||||
</Stack>
|
||||
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
|
||||
<Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
|
||||
<Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
))
|
||||
: ''}
|
||||
</ItemNotificationStyle>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MuiDialog
|
||||
title={title}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
/>
|
||||
|
||||
<DialogDetailClaim
|
||||
openDialog={openDialogClaim}
|
||||
setOpenDialog={setOpenDialogClaim}
|
||||
title={{ name: dialogTitleClaim }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogNotification;
|
||||
@@ -0,0 +1,355 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import {
|
||||
Typography,
|
||||
LinearProgress,
|
||||
linearProgressClasses,
|
||||
Stack,
|
||||
Card,
|
||||
Button,
|
||||
Divider,
|
||||
Avatar,
|
||||
} from '@mui/material';
|
||||
// components
|
||||
import MuiDialog from '../../components/MuiDialog';
|
||||
import Iconify from '../../components/Iconify';
|
||||
// React
|
||||
import { ReactElement, useRef, useState } from 'react';
|
||||
// form
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import axios from '../../utils/axios';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { fPostFormat } from '../../utils/formatTime';
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
import { makeFormData } from '../../utils/jsonToFormData';
|
||||
|
||||
/* ---------------------------------- types --------------------------------- */
|
||||
type DataContentType = {
|
||||
id: number;
|
||||
fullName: string;
|
||||
memberId: string;
|
||||
limit: {
|
||||
current: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
};
|
||||
avatar?: {
|
||||
url?: string;
|
||||
title?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
data: DataContentType;
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* --------------------------------- styles --------------------------------- */
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 6,
|
||||
background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
|
||||
},
|
||||
}));
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const DialogRequestLog = ({ openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
||||
const [serviceCode, setServiceCode] = useState('IP');
|
||||
|
||||
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');
|
||||
}
|
||||
};
|
||||
const removeDiagnosaFiles = (filesState, index) => {
|
||||
setFileDiagnosas(filesState.filter((file, fileIndex) => fileIndex != index));
|
||||
};
|
||||
|
||||
const fileKondisiInput = useRef<HTMLInputElement>(null);
|
||||
const [fileKondisis, setFileKondisis] = useState([]);
|
||||
|
||||
const handleKondisiInputChange = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
setFileKondisis([...fileKondisis, ...event.target.files]);
|
||||
} else {
|
||||
console.log('NO FILE');
|
||||
}
|
||||
};
|
||||
const removeKondisiFiles = (filesState, index) => {
|
||||
setFileKondisis(filesState.filter((file, fileIndex) => fileIndex != index));
|
||||
};
|
||||
|
||||
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) => fileIndex != index));
|
||||
};
|
||||
|
||||
const [submitLoading, setSubmitLoading] = useState(false);
|
||||
function submitRequest() {
|
||||
setSubmitLoading(true);
|
||||
const formData = makeFormData({
|
||||
member_id: data.id,
|
||||
result_files: fileHasilPenunjangs,
|
||||
diagnosa_files: fileDiagnosas,
|
||||
kondisi_files: fileKondisis,
|
||||
service_code: serviceCode,
|
||||
});
|
||||
|
||||
axios
|
||||
.post('/claim-requests', formData)
|
||||
.then((response) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Berhasil membuat data', { variant: 'success' });
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
|
||||
})
|
||||
.then(() => {
|
||||
setSubmitLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
const getContent = () => (
|
||||
<Stack paddingY={1}>
|
||||
<Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }}>
|
||||
<Typography textAlign={'right'} variant="body2">
|
||||
Submission Date : <br /> {fPostFormat(new Date(), 'dd/MM/yyyy')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
<Card sx={{ p: 1, background: '#f4f6f8', marginBottom: 2 }}>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Button
|
||||
sx={{ padding: 2, width: '100%' }}
|
||||
variant={serviceCode == 'IP' ? 'contained' : ''}
|
||||
onClick={() => {
|
||||
setServiceCode('IP');
|
||||
}}
|
||||
>
|
||||
Rawat Inap
|
||||
</Button>
|
||||
<Button
|
||||
sx={{ padding: 2, width: '100%' }}
|
||||
variant={serviceCode == 'OP' ? 'contained' : ''}
|
||||
onClick={() => {
|
||||
setServiceCode('OP');
|
||||
}}
|
||||
>
|
||||
Rawat Jalan
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card sx={{ p: 1, background: '#f4f6f8', marginBottom: 2 }}>
|
||||
<Stack direction="row">
|
||||
<Avatar
|
||||
src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
|
||||
alt={data.fullName}
|
||||
sx={{ marginTop: 1, width: 48, height: 48 }}
|
||||
/>
|
||||
<Stack sx={{ p: 1 }}>
|
||||
<Typography>{data.fullName}</Typography>
|
||||
<Typography>{data.memberId}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card sx={{ paddingY: 1, paddingX: 2 }}>
|
||||
<Typography variant="body1" sx={{ marginBottom: 1, fontWeight: 600 }}>
|
||||
Total Limit
|
||||
</Typography>
|
||||
<BorderLinearProgress variant="determinate" value={data.limit.percentage} />
|
||||
<Typography sx={{ textAlign: 'right', marginTop: 1 }}>
|
||||
{fCurrency(data.limit.current)} / {fCurrency(data.limit.total)}
|
||||
</Typography>
|
||||
</Card>
|
||||
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={4}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
<Stack sx={{ marginTop: 2 }}>
|
||||
<Typography variant="body1" fontWeight={600}>
|
||||
<Iconify icon="eva:file-text-fill" /> Dokumen Kondisi
|
||||
</Typography>
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{fileKondisis &&
|
||||
fileKondisis.map((file, index) => (
|
||||
<Stack 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);
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileKondisiInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={handleKondisiInputChange}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
||||
/>
|
||||
<LoadingButton
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
fileKondisiInput?.current?.click();
|
||||
}}
|
||||
>
|
||||
<Iconify icon="eva:plus-fill" />
|
||||
Add Result
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
|
||||
<Stack sx={{ marginTop: 2 }}>
|
||||
<Typography variant="body1" fontWeight={600}>
|
||||
<Iconify icon="eva:file-text-fill" /> Dokumen Diagnosa
|
||||
</Typography>
|
||||
{/* <Typography variant="body2">Hasil Lab, </Typography> */}
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{fileDiagnosas &&
|
||||
fileDiagnosas.map((file, index) => (
|
||||
<Stack 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);
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileDiagnosaInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={handleDiagnosaInputChange}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
||||
/>
|
||||
<LoadingButton
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
fileDiagnosaInput?.current?.click();
|
||||
}}
|
||||
>
|
||||
<Iconify icon="eva:plus-fill" />
|
||||
Add Result
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
|
||||
<Stack sx={{ marginTop: 2 }}>
|
||||
<Typography variant="body1" fontWeight={600}>
|
||||
<Iconify icon="eva:file-text-fill" /> Dokumen Hasil Penunjang
|
||||
</Typography>
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{fileHasilPenunjangs &&
|
||||
fileHasilPenunjangs.map((file, index) => (
|
||||
<Stack 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);
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileHasilPenunjangInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={handleResultInputChange}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
||||
/>
|
||||
<LoadingButton
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
fileHasilPenunjangInput?.current?.click();
|
||||
}}
|
||||
>
|
||||
<Iconify icon="eva:plus-fill" />
|
||||
Add File
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
sx={{ marginTop: 2, p: 2 }}
|
||||
onClick={() => {
|
||||
submitRequest();
|
||||
}}
|
||||
loading={submitLoading}
|
||||
>
|
||||
LOG Request
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return (
|
||||
// <>
|
||||
// <MuiDialog
|
||||
// title={{ name: data.fullName }}
|
||||
// openDialog={openDialog}
|
||||
// setOpenDialog={setOpenDialog}
|
||||
// content={getContent()}
|
||||
// maxWidth="sm"
|
||||
// />
|
||||
// </>
|
||||
getContent()
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogRequestLog;
|
||||
@@ -0,0 +1,265 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import {
|
||||
Typography,
|
||||
LinearProgress,
|
||||
linearProgressClasses,
|
||||
Stack,
|
||||
FormControlLabel,
|
||||
} from '@mui/material';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
// components
|
||||
import MuiDialog from '../../components/MuiDialog';
|
||||
import { FormProvider, RHFTextField } from '../../components/hook-form';
|
||||
// React
|
||||
import { useContext, ReactElement, useEffect, useState } from 'react';
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
|
||||
// yup
|
||||
import * as Yup from 'yup';
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import axios from '../../utils/axios';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
|
||||
/* ---------------------------------- types --------------------------------- */
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
data?: DataProps;
|
||||
};
|
||||
|
||||
type DataProps = {
|
||||
companyName: string;
|
||||
policyNumber: number;
|
||||
totalMembers: number;
|
||||
totalCases: number;
|
||||
totalPersen: number;
|
||||
myLimit: {
|
||||
balance: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
};
|
||||
maxTopUp: number;
|
||||
};
|
||||
|
||||
type FormValuesProps = {
|
||||
topup: string;
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 6,
|
||||
background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
|
||||
},
|
||||
}));
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function DialogTopUpLimit({
|
||||
title,
|
||||
openDialog,
|
||||
setOpenDialog,
|
||||
data,
|
||||
}: MuiDialogProps) {
|
||||
const [isDisabledInput, setIsDisabledInput] = useState(false);
|
||||
const [isDisabledButton, setIsDisabledButton] = useState(true);
|
||||
const [isCheckboxChecked, setIsCheckboxChecked] = useState(false);
|
||||
const [ message, setMessage ] = useState ('');
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
|
||||
const TopUpSchema = Yup.object().shape({
|
||||
topup: Yup.number().max(
|
||||
data?.maxTopUp,
|
||||
`Maximum top-up amount is ${fCurrency(data?.maxTopUp)}`
|
||||
),
|
||||
});
|
||||
|
||||
const defaultValues = {
|
||||
topup: 0,
|
||||
};
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(TopUpSchema),
|
||||
// @ts-ignore
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
setValue,
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
} = methods;
|
||||
|
||||
useEffect(() => {
|
||||
if (openDialog === false) {
|
||||
setIsDisabledInput(false);
|
||||
setIsDisabledButton(true);
|
||||
setIsCheckboxChecked(false);
|
||||
|
||||
reset();
|
||||
}
|
||||
}, [openDialog, reset]);
|
||||
|
||||
const onSubmit = async (data: FormValuesProps) => {
|
||||
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
|
||||
setIsDisabledInput(false);
|
||||
setIsDisabledButton(true);
|
||||
setIsCheckboxChecked(false);
|
||||
|
||||
try {
|
||||
// Send the HTTP POST request to the backend
|
||||
await axios.post(corporateValue + '/topup', {
|
||||
topup: data.topup,
|
||||
});
|
||||
|
||||
// Show a success notification
|
||||
enqueueSnackbar('The request has been sent', { variant: 'success' });
|
||||
setOpenDialog(false);
|
||||
|
||||
reset();
|
||||
} catch (error) {
|
||||
// Show an error notification
|
||||
enqueueSnackbar('An error occurred', { variant: 'error' });
|
||||
setOpenDialog(false);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
const onCheckHandler = (value: string) => {
|
||||
setIsDisabledInput(!isDisabledInput);
|
||||
value === '0' || value === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
|
||||
setIsCheckboxChecked(!isCheckboxChecked);
|
||||
// @ts-ignore
|
||||
setValue('topup', data.maxTopUp.toString());
|
||||
};
|
||||
|
||||
const onTopupHandler = (value: string) => {
|
||||
//console.log(!!errors);
|
||||
|
||||
let newValue;
|
||||
|
||||
if (value.startsWith('0')) {
|
||||
newValue = '0';
|
||||
} else {
|
||||
newValue = value;
|
||||
}
|
||||
|
||||
newValue === '0' || newValue === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
|
||||
setValue('topup', newValue);
|
||||
};
|
||||
|
||||
const getContent = () => (
|
||||
<Stack spacing={1} marginTop={2}>
|
||||
<Stack>
|
||||
<Typography variant="caption" color="#637381">
|
||||
Company Name
|
||||
</Typography>
|
||||
<Typography variant="body2">{data ? data.companyName : ''}</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption" color="#637381">
|
||||
Policy Number
|
||||
</Typography>
|
||||
<Typography variant="body2">{data ? data.policyNumber : 0}</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={22}>
|
||||
<Stack>
|
||||
<Typography variant="caption" color="#637381">
|
||||
Total Member
|
||||
</Typography>
|
||||
<Typography variant="body2">{data ? data.totalMembers : 0} Person</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption" color="#637381">
|
||||
Total Cases
|
||||
</Typography>
|
||||
<Typography variant="body2">{data ? data.totalCases : 0} Cases</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack spacing={1} sx={{ backgroundColor: '#F4F6F8', borderRadius: 1.5, padding: 2 }}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Stack>
|
||||
<Typography variant="body2">Company Pooled Fund</Typography>
|
||||
<Typography variant="body2">{fCurrency(data ? data.myLimit.balance : 0)}</Typography>
|
||||
<Typography variant="caption" color="#919EAB">
|
||||
/ {data ? data.myLimit.total : 0}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="h5">{data ? data.myLimit.percentage : 0}%</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<BorderLinearProgress variant="determinate" value={data ? data.myLimit.percentage : 0} />
|
||||
</Stack>
|
||||
<Stack spacing={2}>
|
||||
<Typography variant="subtitle1" marginTop={3}>
|
||||
Top Up Limit
|
||||
</Typography>
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<RHFTextField
|
||||
name="topup"
|
||||
label="Top Up"
|
||||
type="number"
|
||||
disabled={isDisabledInput}
|
||||
onChange={(e) => onTopupHandler(e.target.value)}
|
||||
error={!!errors.topup}
|
||||
helperText={errors.topup?.message}
|
||||
/>
|
||||
<FormControlLabel
|
||||
name="checkboxTopUp"
|
||||
sx={{ typography: 'caption' }}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={isCheckboxChecked}
|
||||
onChange={(e) => onCheckHandler(e.target.value)}
|
||||
/>
|
||||
}
|
||||
label={'Max ' + fCurrency(data ? data.maxTopUp : 0)}
|
||||
/>
|
||||
|
||||
<LoadingButton
|
||||
fullWidth
|
||||
size="large"
|
||||
type="submit"
|
||||
variant="contained"
|
||||
loading={isSubmitting}
|
||||
sx={{ marginTop: 2 }}
|
||||
disabled={isDisabledButton}
|
||||
>
|
||||
Ajukan Permintaan
|
||||
</LoadingButton>
|
||||
</FormProvider>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return (
|
||||
<MuiDialog
|
||||
title={title}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
maxWidth="xs"
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user