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

5
frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx
View File

@@ -25,6 +25,7 @@ export default function UserProfile() {
const { themeStretch } = useSettings(); const { themeStretch } = useSettings();
const navigate = useNavigate(); const navigate = useNavigate();
const [data, setData] = useState<UserProfileDataType>(); const [data, setData] = useState<UserProfileDataType>();
const [loading, setLoading] = useState(true);
const { corporateValue } = useContext(UserCurrentCorporateContext); const { corporateValue } = useContext(UserCurrentCorporateContext);
const { id } = useParams(); const { id } = useParams();
@@ -35,8 +36,8 @@ export default function UserProfile() {
.get(corporateValue + '/members/' + id) .get(corporateValue + '/members/' + id)
.then((response) => { .then((response) => {
setTimeout(() => { setTimeout(() => {
console.log(response.data);
setData(response.data); setData(response.data);
setLoading(false);
}, 1000); }, 1000);
}) })
.catch((error) => { .catch((error) => {
@@ -64,7 +65,7 @@ export default function UserProfile() {
<CardPersonalInformation data={data?.person} /> <CardPersonalInformation data={data?.person} />
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<CardFamilyInformation data={data?.families} /> <CardFamilyInformation data={data?.families} loading={loading} />
</Grid> </Grid>
</Grid> </Grid>
</Container> </Container>

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

@@ -1,6 +1,7 @@
/* ------------------------------- material ui ------------------------------ */ /* ------------------------------- material ui ------------------------------ */
import { Card, Typography, Grid, Skeleton, Stack } from '@mui/material'; import { Card, Typography, Grid, Skeleton, Stack } from '@mui/material';
import { fDateBirth } from '../../../utils/formatTime'; import { fDateBirth } from '../../../utils/formatTime';
import { Fragment } from 'react';
type CardFamilyInformationProps = { type CardFamilyInformationProps = {
data?: { data?: {
@@ -11,88 +12,20 @@ type CardFamilyInformationProps = {
phoneNumber: string; phoneNumber: string;
status: string; status: string;
}[]; }[];
loading: boolean;
}; };
export default function CardFamilyInformation({ data }: CardFamilyInformationProps) { export default function CardFamilyInformation({ data, loading }: CardFamilyInformationProps) {
console.log(data); if (loading) {
return (
return ( <Card sx={{ borderRadius: 2, padding: 3 }}>
<Card sx={{ borderRadius: 2, padding: 3 }}> <Grid container gap={5}>
<Grid container gap={5}> <Grid item xs={12}>
<Grid item xs={12}> <Typography component={'h6'} fontWeight={700}>
<Typography component={'h6'} fontWeight={700}> <Skeleton animation={'wave'} width={200} />
{data ? 'Beneficiary / Family' : <Skeleton animation={'wave'} width={200} />} </Typography>
</Typography> </Grid>
</Grid> <Grid item container xs={12} spacing={3}>
<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>
))
) : (
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}> <Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
<Grid container> <Grid container>
@@ -157,9 +90,91 @@ export default function CardFamilyInformation({ data }: CardFamilyInformationPro
</Grid> </Grid>
</Card> </Card>
</Grid> </Grid>
)} </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 />
);
}
} }