dialog component, dash & service-monitoring slice

frontend/client-portal/src/sections/dashboard/DialogDetailClaim.tsx

@@ -0,0 +1,175 @@
+// @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;