176 lines
5.2 KiB
TypeScript
176 lines
5.2 KiB
TypeScript
// @mui
|
|
import {
|
|
Button,
|
|
Box,
|
|
Stepper,
|
|
Step,
|
|
StepLabel,
|
|
Card,
|
|
Typography,
|
|
Divider,
|
|
Stack,
|
|
} from '@mui/material';
|
|
import { Add } from '@mui/icons-material';
|
|
// components
|
|
import MuiDialog from '../../components/MuiDialog';
|
|
// theme
|
|
import palette from '../../theme/palette';
|
|
// React
|
|
import { ReactElement } from 'react';
|
|
|
|
type DataContent = {
|
|
info: string;
|
|
date: string;
|
|
time: string;
|
|
};
|
|
|
|
type MuiDialogProps = {
|
|
title?: {
|
|
name?: string;
|
|
icon?: string;
|
|
};
|
|
openDialog: boolean;
|
|
setOpenDialog: Function;
|
|
content?: ReactElement;
|
|
data?: DataContent[];
|
|
};
|
|
|
|
const steps = ['Review', 'Approval', 'Disbursement'];
|
|
|
|
const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
|
const getContent = () => (
|
|
<>
|
|
<Stack
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
direction="row"
|
|
sx={{ marginTop: 1 }}
|
|
>
|
|
<Typography variant="subtitle1" sx={{ height: 'max-content' }}>
|
|
Claim Request
|
|
</Typography>
|
|
<Stack>
|
|
<Typography variant="caption">Submission date</Typography>
|
|
<Typography variant="caption">15 / 05 / 2022</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
<Box sx={{ width: '100%', marginTop: 2 }}>
|
|
<Stepper alternativeLabel>
|
|
{steps.map((label) => (
|
|
<Step key={label}>
|
|
<StepLabel>{label}</StepLabel>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
</Box>
|
|
<Stack marginTop={2}>
|
|
<Typography variant="subtitle1" paddingY={2}>
|
|
17 Mei 2022
|
|
</Typography>
|
|
</Stack>
|
|
<Stack direction="row" spacing={2}>
|
|
<Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
|
|
<Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
|
|
{/* Item 1 */}
|
|
<Card sx={{ paddingY: 2, paddingX: 3 }}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography variant="body1">09:10 WIB</Typography>
|
|
<Typography
|
|
sx={{
|
|
backgroundColor: palette.light.warning.lighter,
|
|
color: palette.light.warning.dark,
|
|
borderColor: palette.light.warning.dark,
|
|
border: '1px solid',
|
|
borderRadius: '6px',
|
|
padding: 1,
|
|
}}
|
|
variant="caption"
|
|
>
|
|
Approval
|
|
</Typography>
|
|
</Stack>
|
|
<Divider sx={{ marginY: 2 }} />
|
|
<Stack>
|
|
<Typography variant="subtitle2" color="#404040">
|
|
Details : mohon melengkapi kekurangan dokumen
|
|
</Typography>
|
|
<Typography variant="caption" color="#757575" sx={{ marginTop: 2, marginBottom: 1 }}>
|
|
Lab pemeriksaan darah
|
|
</Typography>
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<Add />}
|
|
fullWidth
|
|
sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
|
|
>
|
|
Hasil Pemeriksaan Laboratorium
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
{/* Item 2 */}
|
|
<Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography variant="body1">09:00 WIB</Typography>
|
|
<Typography
|
|
sx={{
|
|
backgroundColor: palette.light.warning.lighter,
|
|
color: palette.light.warning.dark,
|
|
borderColor: palette.light.warning.dark,
|
|
border: '1px solid',
|
|
borderRadius: '6px',
|
|
padding: 1,
|
|
}}
|
|
variant="caption"
|
|
>
|
|
Approval
|
|
</Typography>
|
|
</Stack>
|
|
<Divider sx={{ marginY: 2 }} />
|
|
<Stack>
|
|
<Typography variant="subtitle2" color="#404040">
|
|
Details : Penilaian Dokter
|
|
</Typography>
|
|
</Stack>
|
|
</Card>
|
|
{/* Item 3 */}
|
|
<Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography variant="body1">08:00 WIB</Typography>
|
|
<Typography
|
|
sx={{
|
|
backgroundColor: '#F5F5F5',
|
|
color: '#757575',
|
|
borderColor: '#757575',
|
|
border: '1px solid',
|
|
borderRadius: '6px',
|
|
padding: 1,
|
|
}}
|
|
variant="caption"
|
|
>
|
|
Review
|
|
</Typography>
|
|
</Stack>
|
|
<Divider sx={{ marginY: 2 }} />
|
|
<Stack>
|
|
<Typography variant="subtitle2" color="#404040">
|
|
Details : Klaim Diajukan
|
|
</Typography>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Stack>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<MuiDialog
|
|
title={title}
|
|
openDialog={openDialog}
|
|
setOpenDialog={setOpenDialog}
|
|
content={getContent()}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default DialogDetailClaim;
|