230 lines
8.7 KiB
TypeScript
230 lines
8.7 KiB
TypeScript
// 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>
|
|
);
|
|
}
|