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

Client Portal - Employee Data

Browse Source
This commit is contained in:
Muhammad Fajar
2024-01-06 11:40:40 +07:00
parent 37b8229fc2
commit 23081382ce
8 changed files with 577 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,165 @@
/* ------------------------------- material ui ------------------------------ */
import { Card, Typography, Grid, Skeleton, Stack } from '@mui/material';
import { fDateBirth } from '../../../utils/formatTime';
type CardFamilyInformationProps = {
data?: {
name: string;
relationship: string;
dateOfBirth: string;
email: string;
phoneNumber: string;
status: string;
}[];
};
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>
))
) : (
<Grid item xs={12} md={6}>
<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'}>
<Skeleton animation={'wave'} width={250} />
</Typography>
<Typography variant="subtitle2" color={'grey.600'}>
<Skeleton animation={'wave'} width={150} />
</Typography>
</Stack>
</Grid>
<Grid container xs={12} spacing={1} marginTop={3}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
<Skeleton animation={'wave'} />
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
<Skeleton animation={'wave'} />
</Typography>
</Grid>
</Grid>
<Grid container xs={12} spacing={1}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
<Skeleton animation={'wave'} />
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
<Skeleton animation={'wave'} />
</Typography>
</Grid>
</Grid>
<Grid container xs={12} spacing={1}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
<Skeleton animation={'wave'} />
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
<Skeleton animation={'wave'} />
</Typography>
</Grid>
</Grid>
<Grid container xs={12} spacing={1}>
<Grid item xs={12} md={4}>
<Typography variant="body2" color={'grey.600'}>
<Skeleton animation={'wave'} />
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant="body2" color={'grey.800'}>
<Skeleton animation={'wave'} />
</Typography>
</Grid>
</Grid>
</Grid>
</Card>
</Grid>
)}
</Grid>
</Grid>
</Card>
);
}

280
frontend/client-portal/src/sections/employee-data/user-profile/CardPersonalInformation.tsx Normal file
View File

@@ -0,0 +1,280 @@
/* ------------------------------- Material UI ------------------------------ */
import { Card, Stack, Typography, Grid, Skeleton } from '@mui/material';
import { fDateBirth } from '../../../utils/formatTime';
type CardPersonalInformationProps = {
data?: {
name: string;
weight: number;
height: number;
placeOfBirth: string;
dateOfBirth: string;
gender: string;
phoneNumber: string;
email: string;
address: string;
idNumber: string;
religion: string;
maritalStatus: string;
education: string;
occupation: string;
};
};
export default function CardPersonalInformation({ data }: CardPersonalInformationProps) {
return (
<Card sx={{ borderRadius: 2, padding: 3 }}>
<Grid container gap={5}>
<Grid item xs={12}>
<Typography component={'h6'} fontWeight={700}>
{data ? 'Personal Information' : <Skeleton animation={'wave'} width={200} />}
</Typography>
</Grid>
<Grid item container xs={12} spacing={3}>
{/* First */}
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Full Name' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? data.name ? data.name : '-' : <Skeleton animation={'wave'} width={125} />}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Weight' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.weight ? (
`${data.weight} kg`
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Height' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.height ? (
`${data.height} cm`
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
{/* Second */}
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Place of Birth' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.placeOfBirth ? (
data.placeOfBirth
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Date of Birth' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.dateOfBirth ? (
fDateBirth(data.dateOfBirth)
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Gender' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.gender ? (
data.gender
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
{/* Third */}
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Phone Number' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.phoneNumber ? (
data.phoneNumber
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
<Grid item xs={8}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Email' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? data.email ? data.email : '-' : <Skeleton animation={'wave'} width={125} />}
</Typography>
</Stack>
</Grid>
{/* Four */}
<Grid item xs={12}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Address' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.address ? (
data.address
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
{/* Five */}
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'ID Number' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.idNumber ? (
data.idNumber
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
<Grid item xs={8}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Religion' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.religion ? (
data.religion
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
{/* Six */}
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Marital Status' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.maritalStatus ? (
data.maritalStatus
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Education' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.education ? (
data.education
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={4}>
<Stack gap={1.5}>
<Typography variant="subtitle2" color={'grey.600'}>
{data ? 'Occupation' : <Skeleton animation={'wave'} width={200} />}
</Typography>
<Typography variant="subtitle1" color={'grey.800'}>
{data ? (
data.occupation ? (
data.occupation
) : (
'-'
)
) : (
<Skeleton animation={'wave'} width={125} />
)}
</Typography>
</Stack>
</Grid>
</Grid>
</Grid>
</Card>
);
}