fix claim report
This commit is contained in:
Muhammad Fajar
@@ -1,183 +1,181 @@
|
||||
// @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.');
|
||||
}
|
||||
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';
|
||||
|
||||
// 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()}
|
||||
// />
|
||||
);
|
||||
type DataContent = {
|
||||
info: string;
|
||||
date: string;
|
||||
time: string;
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
|
||||
export default DialogDetailClaim;
|
||||
|
||||
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;
|
||||
|
||||
@@ -1,22 +1,5 @@
|
||||
/* ---------------------------------- @mui ---------------------------------- */
|
||||
import {
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Stack,
|
||||
IconButton,
|
||||
Button,
|
||||
TableSortLabel,
|
||||
Box,
|
||||
} from '@mui/material';
|
||||
import DialogDetailClaim from '../../sections/dashboard/DialogDetailClaim';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import { MoreVert as MoreVertIcon } from '@mui/icons-material';
|
||||
import { Stack, Button } from '@mui/material';
|
||||
/* ---------------------------------- axios --------------------------------- */
|
||||
// import axios from 'axios';
|
||||
import axios from '../../utils/axios';
|
||||
@@ -25,121 +8,13 @@ import { useContext, useEffect, useState } from 'react';
|
||||
|
||||
/* -------------------------------- component ------------------------------- */
|
||||
import Iconify from '../../components/Iconify';
|
||||
import BaseTablePagination from '../../components/BaseTablePagination';
|
||||
import TableComponent from '../../components/Table';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
|
||||
/* ---------------------------------- hooks --------------------------------- */
|
||||
import useMap from '../../hooks/useMap';
|
||||
/* ---------------------------------- theme --------------------------------- */
|
||||
import palette from '../../theme/palette';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
|
||||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||
|
||||
/* ---------------------------------- types --------------------------------- */
|
||||
|
||||
// type PaginationTableProps = {
|
||||
// current_page: number;
|
||||
// from: number;
|
||||
// last_page: number;
|
||||
// links: [];
|
||||
// path: string;
|
||||
// per_page: number;
|
||||
// to: number;
|
||||
// total: number;
|
||||
// };
|
||||
|
||||
// type DataTableProps = {
|
||||
// fullName: string;
|
||||
// memberId: string;
|
||||
// service: string;
|
||||
// start_date: string;
|
||||
// end_date: string;
|
||||
// status: boolean | number;
|
||||
// };
|
||||
|
||||
// /* -------------------------------------------------------------------------- */
|
||||
|
||||
// /* -------------------------- enchanced table head -------------------------- */
|
||||
|
||||
// type Order = 'asc' | 'desc';
|
||||
|
||||
// interface HeadCell {
|
||||
// id: string;
|
||||
// label: string;
|
||||
// }
|
||||
|
||||
// const headCells: readonly HeadCell[] = [
|
||||
// {
|
||||
// id: 'name',
|
||||
// label: 'Name',
|
||||
// },
|
||||
// {
|
||||
// id: 'member_id',
|
||||
// label: 'Member ID',
|
||||
// },
|
||||
// {
|
||||
// id: 'service',
|
||||
// label: 'Service',
|
||||
// },
|
||||
// {
|
||||
// id: 'start_date',
|
||||
// label: 'Start Date',
|
||||
// },
|
||||
// {
|
||||
// id: 'end_date',
|
||||
// label: 'End Date',
|
||||
// },
|
||||
// {
|
||||
// id: 'status',
|
||||
// label: 'Status',
|
||||
// },
|
||||
// ];
|
||||
|
||||
// interface EnhancedTableProps {
|
||||
// onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
|
||||
// order: Order;
|
||||
// orderBy: string;
|
||||
// }
|
||||
|
||||
// function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
// const { order, orderBy, onRequestSort } = props;
|
||||
// const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
|
||||
// onRequestSort(event, property);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <TableHead>
|
||||
// <TableRow>
|
||||
// <TableCell align="center">No</TableCell>
|
||||
// {headCells.map((headCell) => (
|
||||
// <TableCell
|
||||
// key={headCell.id}
|
||||
// sortDirection={orderBy === headCell.id ? order : false}
|
||||
// align="center"
|
||||
// >
|
||||
// <TableSortLabel
|
||||
// active={orderBy === headCell.id}
|
||||
// direction={orderBy === headCell.id ? order : 'asc'}
|
||||
// onClick={createSortHandler(headCell.id)}
|
||||
// >
|
||||
// {headCell.label}
|
||||
// {orderBy === headCell.id ? (
|
||||
// <Box component="span" sx={visuallyHidden}>
|
||||
// {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
// </Box>
|
||||
// ) : null}
|
||||
// </TableSortLabel>
|
||||
// </TableCell>
|
||||
// ))}
|
||||
// </TableRow>
|
||||
// </TableHead>
|
||||
// );
|
||||
// }
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export default function List() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -250,12 +125,6 @@ export default function List() {
|
||||
label: 'Divisi',
|
||||
isSort: true,
|
||||
},
|
||||
/* {
|
||||
id: 'end_date',
|
||||
align: 'center',
|
||||
label: 'End Date',
|
||||
isSort: false,
|
||||
}, */
|
||||
{
|
||||
id: 'status',
|
||||
align: 'center',
|
||||
@@ -270,31 +139,6 @@ export default function List() {
|
||||
},
|
||||
];
|
||||
|
||||
const [open, setOpen] = useState<HTMLElement | null>(null);
|
||||
|
||||
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setOpen(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(null);
|
||||
};
|
||||
|
||||
/* const clickHandler = (isDialog: string) => {
|
||||
switch (isDialog) {
|
||||
|
||||
case 'infoDetail':
|
||||
setDialogTitle('Claim Details');
|
||||
setIsDialog(isDialog);
|
||||
setOpenDialog(true);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}; */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setIsLoading(true);
|
||||
@@ -313,13 +157,10 @@ export default function List() {
|
||||
setData(
|
||||
response.data.data.map((obj: any) => ({
|
||||
...obj,
|
||||
|
||||
/* memberId: <Button onClick={() => navigate ('user-profile/:id')}>{obj.memberId}</Button>, */
|
||||
status:
|
||||
obj.status === 1 ? (
|
||||
obj.status === 'requested' ? (
|
||||
<Button
|
||||
onClick={() => navigate('dialog-detail')}
|
||||
/* startIcon={<Iconify icon="ic:round-check" />} */
|
||||
sx={{
|
||||
backgroundColor: 'rgba(84, 214, 44, 0.16)',
|
||||
color: palette.dark.success.dark,
|
||||
@@ -333,6 +174,21 @@ export default function List() {
|
||||
>
|
||||
Request
|
||||
</Button>
|
||||
) : obj.status === 'approved' ? (
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.secondary.main,
|
||||
color: '#FFFF',
|
||||
paddingX: 1.5,
|
||||
paddingY: 1,
|
||||
'&:hover': {
|
||||
backgroundColor: (theme) => theme.palette.secondary.dark,
|
||||
color: '#FFFF',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Aprroved
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
startIcon={<Iconify icon="fa6-solid:clock" />}
|
||||
@@ -350,11 +206,6 @@ export default function List() {
|
||||
Ongoing
|
||||
</Button>
|
||||
),
|
||||
/* action: (
|
||||
<IconButton onClick={() => clickHandler('infoDetail')}>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
), */
|
||||
}))
|
||||
);
|
||||
|
||||
@@ -383,7 +234,6 @@ export default function List() {
|
||||
loadings={loadings}
|
||||
params={params}
|
||||
searchs={searchs}
|
||||
// filters={filters}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user