183 lines
7.8 KiB
TypeScript
183 lines
7.8 KiB
TypeScript
// mui
|
|
import { styled } from '@mui/material/styles';
|
|
import { LoadingButton, TabPanel } from "@mui/lab";
|
|
import { Button, Card, Divider, Grid, LinearProgress, linearProgressClasses, Typography } from "@mui/material";
|
|
import { Tab, Tabs } from "@mui/material";
|
|
import { Box, Stack } from "@mui/material";
|
|
import React, { useEffect, useState, useContext } from "react";
|
|
import { fCurrency } from '@/utils/formatNumber';
|
|
import { fPostFormat } from '@/utils/formatTime';
|
|
import { Avatar } from '@mui/material';
|
|
import Iconify from '@/components/Iconify';
|
|
import FormRequestClaim from './FormRequestClaim';
|
|
import { LanguageContext } from '@/contexts/LanguageContext';
|
|
|
|
export default function DialogMember(member, handleSubmitSuccess) {
|
|
const { localeData } = useContext(LanguageContext);
|
|
const [currentTab, setCurrentTab] = useState('request')
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
useEffect(() => {
|
|
setCurrentTab('detail')
|
|
}, [member])
|
|
|
|
function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
|
|
setCurrentTab(newValue)
|
|
}
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
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%)',
|
|
},
|
|
}));
|
|
|
|
function TabPanel(props) {
|
|
const { children, value, index, ...other } = props;
|
|
|
|
console.log('current', value)
|
|
return (
|
|
<div
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
id={`simple-tabpanel-${index}`}
|
|
aria-labelledby={`simple-tab-${index}`}
|
|
{...other}
|
|
>
|
|
{value === index && (
|
|
<Box sx={{ p: 3 }}>
|
|
<div>{children}</div>
|
|
</Box>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
<Tabs
|
|
value={currentTab}
|
|
onChange={handleChangeTab}
|
|
aria-label="wrapped label tabs example"
|
|
>
|
|
<Tab value="detail" label={localeData.txtDialogMember3} />
|
|
<Tab value="benefit" label={localeData.txtDialogMember1} />
|
|
<Tab value="request" label={localeData.txtDialogMember2} />
|
|
</Tabs>
|
|
|
|
<TabPanel value={currentTab} index={'detail'}>
|
|
<Stack spacing={2}>
|
|
<Grid container sx={{ pb: 2, mb: 2, borderBottom: 0 }}>
|
|
<Grid item xs={7}>
|
|
<Grid container>
|
|
<Grid item xs={4}>
|
|
Member ID
|
|
</Grid>
|
|
<Grid item xs={8}>
|
|
: { member?.member_id ?? '-'}
|
|
</Grid>
|
|
<Grid item xs={4}>
|
|
Policy Number
|
|
</Grid>
|
|
<Grid item xs={8}>
|
|
: { member?.current_policy?.code ?? '-'}
|
|
</Grid>
|
|
<Grid item xs={4}>
|
|
NRIC
|
|
</Grid>
|
|
<Grid item xs={8}>
|
|
: {member?.nric ?? '-'}
|
|
</Grid>
|
|
|
|
<Grid item xs={4}>
|
|
NIK
|
|
</Grid>
|
|
<Grid item xs={8}>
|
|
: {member?.person?.nik ?? '-'}
|
|
</Grid>
|
|
<Grid item xs={4}>
|
|
Email
|
|
</Grid>
|
|
<Grid item xs={8}>
|
|
: {member?.email ?? '-'}
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={5}>
|
|
<Grid container>
|
|
<Grid item xs={6}>
|
|
Birth Date
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
: {member?.birth_date ?? '-'}
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
Gender
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
: {member?.gender ?? '-'}
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
Marital Status
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
: {member?.marital_status ?? '-'}
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
Language
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
: {member?.language ?? '-'}
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
Race
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
: {member?.race ?? '-'}
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
Relationship
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
: {member?.relation_with_principal ?? '-'}
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Stack>
|
|
</TabPanel>
|
|
|
|
<TabPanel value={currentTab} index={'benefit'}>
|
|
<Grid container spacing={2}>
|
|
{ member && member?.current_plan?.corporate_benefits?.map((corporateBenefit, index) => {return (
|
|
<Grid item sm={6} key={index}>
|
|
<Card sx={{p: 2}}>
|
|
<Typography variant="body1" sx={{fontWeight: 500}}>{corporateBenefit.benefit.description}</Typography>
|
|
<Typography variant="body2">Member ID : {corporateBenefit.benefit.code}</Typography>
|
|
<Typography variant="body2" sx={{ marginTop: 2 }}>Yearly Limits</Typography>
|
|
<BorderLinearProgress variant="determinate" value={100 - (corporateBenefit.limit_amount ? ((corporateBenefit.usage ?? 0) / corporateBenefit.limit_amount) : 0)} sx={{ mb: 1 }} />
|
|
<Typography sx={{ textAlign: 'right'}}>{corporateBenefit.usage ?? 0} /
|
|
{corporateBenefit.limit_ammount < 9999999999 ? fCurrency(corporateBenefit.limit_amount ?? 0) : 'As Charge' }</Typography>
|
|
</Card>
|
|
</Grid>
|
|
)})}
|
|
</Grid>
|
|
</TabPanel>
|
|
|
|
|
|
<TabPanel value={currentTab} index={'request'}>
|
|
<FormRequestClaim member={member} handleSubmitSuccess={handleSubmitSuccess} />
|
|
</TabPanel>
|
|
</Box>
|
|
</div>
|
|
)
|
|
} |