aso/frontend/client-portal/src/pages/ClaimReport/DialogDetailClaim.tsx

// @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) => {
    function clickHandler(arg0: string) {
      throw new Error('Function not implemented.');
    }

    // const getContent = () => (
     
    // );
  
    return (
      
      <>
        <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' }}
                >
                  onClick={() => clickHandler('topUpLimit')}
                  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>
      </>
      // <MuiDialog
      //   title={title}
      //   openDialog={openDialog}
      //   setOpenDialog={setOpenDialog}
      //   content={getContent()}
      // />
    );
  };
  
  export default DialogDetailClaim;