Improve Slicing tampilan pada hospital portal (List Claim, Detail, Search Member)
This commit is contained in:
ivan-sim
2023-10-16 09:55:15 +07:00
parent c3b745e23b
commit 827ce472ba
13 changed files with 433 additions and 300 deletions

View File

@@ -11,6 +11,7 @@ import { Avatar } from '@mui/material';
import Iconify from '@/components/Iconify';
import FormRequestClaim from './FormRequestClaim';
import { LanguageContext } from '@/contexts/LanguageContext';
import { format } from 'date-fns';
export default function DialogMember(member, handleSubmitSuccess) {
const { localeData } = useContext(LanguageContext);
@@ -75,84 +76,51 @@ export default function DialogMember(member, handleSubmitSuccess) {
</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 direction="column" spacing={2}>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Member ID</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.member_id ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Policy Number</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.current_policy?.code ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">NRIC</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.person?.nik ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">NIK</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.person?.nik ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Email</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.email ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Date of Birth</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.birth_date ? format(new Date(member.birth_date), "d MMM yyyy") : '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Gender</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.gender ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Marital Status</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.marital_status ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Language</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.language ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Race</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.race ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Relationship</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.relation_with_principal ?? '-'}</Typography>
</Stack>
</Stack>
</TabPanel>
@@ -161,12 +129,9 @@ export default function DialogMember(member, handleSubmitSuccess) {
{ 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>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{corporateBenefit.benefit.description}</Typography>
<Typography variant="body2" sx={{color: '#919EAB'}}>{corporateBenefit.benefit.code}</Typography>
</Card>
</Grid>
)})}