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

comitting

Browse Source
This commit is contained in:
Muhammad Fajar
2022-11-26 22:30:11 +07:00
parent c3d953322d
commit 52b9dd49c8
30 changed files with 5767 additions and 3786 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx Normal file
View File

@@ -0,0 +1,229 @@
// mui
import { styled } from '@mui/material/styles';
import {
Card,
Typography,
Stack,
LinearProgress,
linearProgressClasses,
Grid,
} from '@mui/material';
// ----------------------------------------------------------------------
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%)',
},
}));
// ----------------------------------------------------------------------
export default function CardBenefitSummary() {
return (
<div style={{ marginTop: '1rem' }}>
<Typography padding={1} variant="subtitle2">
Benefit Summary
</Typography>
<Card>
<Grid container spacing={1} marginTop={1} sx={{ backgroundColor: '#F4F6F8', padding: 1 }}>
{/* Card 1 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Rawat Jalan
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 2 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Rawat Inap
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 3 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Special
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 4 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Special
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 5 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Perobatan Mata
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 6 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Perawatan Gigi
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 7 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Kehamilan
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 8 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Laboratorium
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 9 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Farmasi
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
</Grid>
</Card>
</div>
);
}

97
frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx Normal file
View File

@@ -0,0 +1,97 @@
// mui
import {
Card,
Typography,
Stack,
TablePagination,
TableContainer,
Table,
TableHead,
TableRow,
TableCell,
TableBody,
} from '@mui/material';
// react
import { useState } from 'react';
// ----------------------------------------------------------------------
function createData(benefitType: string, submissionDate: string, status: string) {
return { benefitType, submissionDate, status };
}
const rows = [
createData('Rawat Jalan', '15-10-2022', 'Request'),
createData('Rawat Inap', '15-10-2022', 'Request'),
createData('Manfaat Special', '15-10-2022', 'Request'),
createData('Perobatan Mata', '15-10-2022', 'Request'),
createData('Perawatan Gigi', '15-10-2022', 'Request'),
createData('Kehamilan', '15-10-2022', 'Request'),
createData('Laboratorium', '15-10-2022', 'Request'),
createData('Manfaat Farmasi', '15-10-2022', 'Request'),
];
// ----------------------------------------------------------------------
export default function CardClaimHistory() {
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
setPage(newPage);
};
return (
<Card sx={{ padding: 2 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="subtitle2">Claim History</Typography>
<TablePagination
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[]}
page={page}
onPageChange={handleChangePage}
sx={{
border: 'none',
'.MuiToolbar-root.MuiTablePagination-toolbar': {
height: '24px',
minHeight: '24px',
},
'.MuiTablePagination-actions .MuiButtonBase-root:nth-last-of-type': {
marginLeft: 2,
},
'.MuiTablePagination-actions .MuiButtonBase-root': { padding: 1 },
}}
/>
</Stack>
<Card>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell>Benefit Type</TableCell>
<TableCell align="center">Submission Date</TableCell>
<TableCell align="center">Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{/* if you don't need to support IE11, you can replace the `stableSort` call with:
rows.sort(getComparator(order, orderBy)).slice() */}
{rows
// .sort(getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => (
<TableRow key={index}>
<TableCell>{row.benefitType}</TableCell>
<TableCell align="center">{row.submissionDate}</TableCell>
<TableCell align="center">{row.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Card>
</Card>
);
}

359
frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx Normal file
View File

@@ -0,0 +1,359 @@
// mui
import { Button, Card, Stack, Typography, Grid, Switch } from '@mui/material';
// components
import Iconify from '../../../components/Iconify';
export default function CardFamilyInformation() {
return (
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ paddingY: 1, paddingX: 3 }}
>
<Typography variant="subtitle2">Beneficiary / Family</Typography>
<Button startIcon={<Iconify icon="ic:round-add" />}>Add Member</Button>
</Stack>
{/* Stack 2 */}
<Grid container maxHeight="307px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
{/* Card 1 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<img
width={24}
height={24}
src="/images/husband-user-profile.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Husband
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Octa Xavier
</Typography>
<Typography variant="body2" color="#757575">
14 Jan 1986
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 2 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 3 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 4 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 5 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
{/* Card 6 */}
<Grid item xs={12} sm={6} md={6}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
>
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<div
style={{
borderRadius: '50%',
width: '24px',
height: '24px',
backgroundColor: '#D9D9D9',
}}
/>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
Kid
</Typography>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
Celine Claudia
</Typography>
<Typography variant="body2" color="#757575">
15 Oct 2000
</Typography>
<Typography variant="body2" color="#757575">
082113256754
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
Remove
</Button>
<Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
Edit Data
</Button>
</Stack>
</Card>
</Grid>
</Grid>
</Card>
);
}

147
frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx Normal file
View File

@@ -0,0 +1,147 @@
// mui
import { Button, IconButton, Card, Stack, Typography } from '@mui/material';
import { Visibility as VisibilityIcon } from '@mui/icons-material';
// components
import Iconify from '../../../components/Iconify';
export default function CardPersonalInformation() {
return (
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ paddingY: 1, paddingX: 3 }}
>
<Typography variant="subtitle2">Informasi Pribadi</Typography>
<Button startIcon={<Iconify icon="heroicons:pencil-solid" />}>Edit Data</Button>
</Stack>
{/* Stack 2 */}
<Stack direction="row" spacing={2} paddingX={2}>
<div style={{ position: 'relative', flex: 'none', height: 'fit-content' }}>
<img
width={52}
height={52}
src="/images/user-profile.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
<IconButton
color="primary"
sx={{
position: 'absolute',
bottom: 0,
right: 0,
width: '20px',
height: '20px',
padding: '4px',
backgroundColor: 'rgba(255,255,255,0.9)',
}}
>
<Iconify icon="material-symbols:photo-camera" />
</IconButton>
</div>
<Stack direction="row" paddingY={1} spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '60%' }}>
<Typography variant="caption">Nama Lengkap</Typography>
<Typography variant="body2">Jessica Lie</Typography>
</Stack>
<Stack sx={{ width: '20%' }}>
<Typography variant="caption">Berat Badan</Typography>
<Typography variant="body2">40 kg</Typography>
</Stack>
<Stack sx={{ width: '20%' }}>
<Typography variant="caption">Tinggi Badan</Typography>
<Typography variant="body2">165 cm</Typography>
</Stack>
</Stack>
</Stack>
{/* Stack 3 */}
<Stack maxHeight="338px" paddingX={2} sx={{ overflowY: 'auto' }}>
{/* Stack 3.1 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Dasar</Typography>
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Tempat Lahir</Typography>
<Typography variant="body2">Jakarta</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Tanggal Lahir</Typography>
<Typography variant="body2">15-05-1996</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Jenis Kelamin</Typography>
<Typography variant="body2">Perempuan</Typography>
</Stack>
</Stack>
</Stack>
{/* Stack 3.2 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Kontak</Typography>
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Nomor Telpon</Typography>
<Typography variant="body2">081256788765</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Email</Typography>
<Typography variant="body2">Jessica.lie@gmail.com</Typography>
</Stack>
</Stack>
<Stack>
<Typography variant="caption">Alamat</Typography>
<Typography variant="body2">
Jl. Kalimantan No.6, Rw. Mekar Jaya, Kec. Serpong, Kota Tangerang Selatan, Banten
15310
</Typography>
</Stack>
</Stack>
{/* Stack 3.3 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Identitas Diri</Typography>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={2}
sx={{ flex: '100%' }}
>
<Stack>
<Typography variant="caption">Nomor NIK</Typography>
<Typography variant="body2">081256788765</Typography>
</Stack>
<Stack>
<Button variant="contained" startIcon={<VisibilityIcon />}>
Lihat Foto
</Button>
</Stack>
</Stack>
</Stack>
{/* Stack 3.4 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Lainnya</Typography>
<Stack direction="row" justifyContent="space-between" spacing={2} sx={{ flex: '100%' }}>
<Stack>
<Typography variant="caption">Agama</Typography>
<Typography variant="body2">Kristen</Typography>
</Stack>
<Stack>
<Typography variant="caption">Status</Typography>
<Typography variant="body2">Menikah</Typography>
</Stack>
<Stack>
<Typography variant="caption">Pendidikan</Typography>
<Typography variant="body2">S1</Typography>
</Stack>
<Stack>
<Typography variant="caption">Pekerjaan</Typography>
<Typography variant="body2">Ibu Rumah Tangga</Typography>
</Stack>
</Stack>
</Stack>
</Stack>
</Card>
);
}

50
frontend/client-portal/src/sections/alarm-center/user-profile/CardPolicyNumber.tsx Normal file
View File

@@ -0,0 +1,50 @@
// mui
import { styled } from '@mui/material/styles';
import { Card, Typography, Stack, LinearProgress, linearProgressClasses } from '@mui/material';
import CardBenefitSummary from './CardBenefitSummary';
// ----------------------------------------------------------------------
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%)',
},
}));
// ----------------------------------------------------------------------
export default function CardPolicyNumber() {
return (
<Card sx={{ padding: 2 }}>
<Stack>
<Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
<Stack direction="row" spacing={1} alignItems="center">
<img width={52} height={52} src="/logo/logo-linksehat.png" alt="LinkSehat" />
<Stack spacing={1}>
<Typography variant="subtitle2">Policy Number</Typography>
<Typography variant="subtitle2">12345678910</Typography>
</Stack>
</Stack>
<Stack spacing={1} sx={{ width: '206.5px' }}>
<Typography variant="subtitle2">Yearly Limit</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
10.000.000 /{' '}
<Typography variant="body2" color="#757575" component="span">
10.000.000
</Typography>
</Typography>
</Stack>
</Stack>
{/* Benefit Summary */}
<CardBenefitSummary />
</Stack>
</Card>
);
}