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

Client Portal - Fix Employee Data

Browse Source
This commit is contained in:
Muhammad Fajar
2024-01-06 12:17:39 +07:00
parent 562f3121c5
commit b865802806
2 changed files with 102 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
frontend/client-portal/src/sections/employee-data/user-profile/CardFamilyInformation.tsx
View File

@@ -1,6 +1,7 @@
/* ------------------------------- material ui ------------------------------ */
import { Card, Typography, Grid, Skeleton, Stack } from '@mui/material';
import { fDateBirth } from '../../../utils/formatTime';
import { Fragment } from 'react';
type CardFamilyInformationProps = {
data?: {
@@ -11,88 +12,20 @@ type CardFamilyInformationProps = {
phoneNumber: string;
status: string;
}[];
loading: boolean;
};
export default function CardFamilyInformation({ data }: CardFamilyInformationProps) {
console.log(data);
return (
<Card sx={{ borderRadius: 2, padding: 3 }}>
<Grid container gap={5}>
<Grid item xs={12}>
<Typography component={'h6'} fontWeight={700}>
{data ? 'Beneficiary / Family' : <Skeleton animation={'wave'} width={200} />}
</Typography>
</Grid>
<Grid item container xs={12} spacing={3}>
{data && data.length > 0 ? (
data.map((familyMember, index) => (
<Grid item xs={12} md={6} key={index}>
<Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
<Grid container>
<Grid item xs={12}>
<Stack gap={0.5}>
<Typography variant="subtitle1" color={'grey.800'}>
{familyMember.name ? familyMember.name : '-'}
</Typography>
<Typography variant="subtitle2" color={'grey.600'}>
{familyMember.relationship ? familyMember.relationship : '-'}
</Typography>
</Stack>
</Grid>
<Grid container xs={12} marginTop={3}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
Date Of Birth
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
{familyMember.dateOfBirth ? fDateBirth(familyMember.dateOfBirth) : '-'}
</Typography>
</Grid>
</Grid>
<Grid container xs={12}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
Email
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
{familyMember.email ? familyMember.email : '-'}
</Typography>
</Grid>
</Grid>
<Grid container xs={12}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
Phone Number
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
{familyMember.phoneNumber ? familyMember.phoneNumber : '-'}
</Typography>
</Grid>
</Grid>
<Grid container xs={12}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
Status
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
{familyMember.status ? familyMember.status : '-'}
</Typography>
</Grid>
</Grid>
</Grid>
</Card>
</Grid>
))
) : (
export default function CardFamilyInformation({ data, loading }: CardFamilyInformationProps) {
if (loading) {
return (
<Card sx={{ borderRadius: 2, padding: 3 }}>
<Grid container gap={5}>
<Grid item xs={12}>
<Typography component={'h6'} fontWeight={700}>
<Skeleton animation={'wave'} width={200} />
</Typography>
</Grid>
<Grid item container xs={12} spacing={3}>
<Grid item xs={12} md={6}>
<Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
<Grid container>
@@ -157,9 +90,91 @@ export default function CardFamilyInformation({ data }: CardFamilyInformationPro
</Grid>
</Card>
</Grid>
)}
</Grid>
</Grid>
</Grid>
</Card>
);
</Card>
);
} else {
return data && data.length > 0 ? (
<Card sx={{ borderRadius: 2, padding: 3 }}>
<Grid container gap={5}>
<Grid item xs={12}>
<Typography component={'h6'} fontWeight={700}>
Beneficiary / Family
</Typography>
</Grid>
<Grid item container xs={12} spacing={3}>
{data.map((familyMember, index) => (
<Grid item xs={12} md={6} key={index}>
<Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
<Grid container>
<Grid item xs={12}>
<Stack gap={0.5}>
<Typography variant="subtitle1" color={'grey.800'}>
{familyMember.name ? familyMember.name : '-'}
</Typography>
<Typography variant="subtitle2" color={'grey.600'}>
{familyMember.relationship ? familyMember.relationship : '-'}
</Typography>
</Stack>
</Grid>
<Grid container xs={12} marginTop={3}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
Date Of Birth
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
{familyMember.dateOfBirth ? fDateBirth(familyMember.dateOfBirth) : '-'}
</Typography>
</Grid>
</Grid>
<Grid container xs={12}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
Email
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
{familyMember.email ? familyMember.email : '-'}
</Typography>
</Grid>
</Grid>
<Grid container xs={12}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
Phone Number
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
{familyMember.phoneNumber ? familyMember.phoneNumber : '-'}
</Typography>
</Grid>
</Grid>
<Grid container xs={12}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
Status
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
{familyMember.status ? familyMember.status : '-'}
</Typography>
</Grid>
</Grid>
</Grid>
</Card>
</Grid>
))}
</Grid>
</Grid>
</Card>
) : (
<Fragment />
);
}
}