update final log
This commit is contained in:
@@ -0,0 +1,109 @@
|
||||
import MuiDialog from "@/components/MuiDialog";
|
||||
import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
|
||||
import { Paper } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import React, { useState } from 'react';
|
||||
import { DetailRequestLogType } from "../Model/Types";
|
||||
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
||||
import axios from "@/utils/axios";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
|
||||
type DialogConfirmationType = {
|
||||
openDialog: boolean;
|
||||
setOpenDialog: any;
|
||||
onSubmit?: void;
|
||||
approve: string;
|
||||
requestLog: DetailRequestLogType|undefined;
|
||||
}
|
||||
|
||||
export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const handleSubmit = () => {
|
||||
const formData = {
|
||||
status : approve
|
||||
}
|
||||
axios
|
||||
.put(`customer-service/request/${requestLog?.id}`, formData)
|
||||
.then((response) => {
|
||||
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
|
||||
setOpenDialog(false);
|
||||
navigate('/custormer-service/request')
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
|
||||
});
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialog(false);
|
||||
}
|
||||
|
||||
const getContent = () => (
|
||||
<Stack spacing={1} marginTop={2}>
|
||||
<Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this request ?</Typography>
|
||||
<Grid item xs={12} md={12} marginTop={4}>
|
||||
<Card sx={{padding:2, marginTop:2}} >
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
|
||||
|
||||
{approve == 'approved' ? (
|
||||
<Button color="primary" variant="contained" onClick={handleSubmit}>Approve</Button>
|
||||
) : (
|
||||
<Button color="error" variant="contained" onClick={handleSubmit}>Decline</Button>
|
||||
) }
|
||||
|
||||
</DialogActions>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
|
||||
return (
|
||||
<MuiDialog
|
||||
title={{name: "Confirmation"}}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
maxWidth="xl"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,305 +1,174 @@
|
||||
// mui
|
||||
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
|
||||
import {
|
||||
Container,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
Card,
|
||||
Dialog,
|
||||
} from '@mui/material';
|
||||
// components
|
||||
import Page from '../../../components/Page';
|
||||
// utils
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
// react
|
||||
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import { useEffect, useState, useRef, useMemo } from 'react';
|
||||
import axios from '../../../utils/axios';
|
||||
// pages
|
||||
import DetailTimeline from '../../../pages/ClaimRequests/DetailTimeline';
|
||||
import DetailStepper from '../../../pages/ClaimRequests/DetailStepper';
|
||||
import { format } from 'date-fns';
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
import Button from '@mui/material/Button';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import RemoveIcon from '@mui/icons-material/Remove';
|
||||
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import Iconify from '@/components/Iconify';
|
||||
import { fPostFormat } from '@/utils/formatTime';
|
||||
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { fDateTimesecond } from '@/utils/formatTime';
|
||||
import { makeFormData } from '@/utils/jsonToFormData';
|
||||
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { DetailRequestLogType } from './Model/Types';
|
||||
import { fDate, fDateTimesecond } from '@/utils/formatTime';
|
||||
import { Button } from '@mui/material';
|
||||
import DialogConfirmation from './Components/DialogConfirmation';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function Detail() {
|
||||
const location = useLocation();
|
||||
const queryParams = new URLSearchParams(location.search);
|
||||
const code = queryParams.get('code');
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { themeStretch } = useSettings();
|
||||
const [data, setData] = useState();
|
||||
const [dataDialog, setDataDialog] = useState();
|
||||
const [document, setDocument] = useState(null);
|
||||
const [requestLog, setRequestLog] = useState<DetailRequestLogType>();
|
||||
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get('/claim-requests/detail/'+id)
|
||||
.get('customer-service/request/'+id)
|
||||
.then((response) => {
|
||||
setData(response.data);
|
||||
setDataDialog(response.data.data.dialog_submits);
|
||||
setDocument(response.data.data.documents);
|
||||
|
||||
setRequestLog(response.data.data)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
const [isInvoiceVisible, setInvoiceVisibility] = useState(false);
|
||||
|
||||
const handleInvoice = () => {
|
||||
setInvoiceVisibility(!isInvoiceVisible);
|
||||
}
|
||||
const currentDate = new Date();
|
||||
const formattedCurrentDate = format(currentDate, 'dd MMM yyyy');
|
||||
const [dateInvoice, setDateInvoice] = useState(currentDate);
|
||||
|
||||
const fileInvoiceInput = useRef<HTMLInputElement>(null);
|
||||
const [fileInvoices, setFileInvoices] = useState([]);
|
||||
|
||||
const handleInvoiceInputChange = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
setFileInvoices([...fileInvoices, ...event.target.files]);
|
||||
} else {
|
||||
console.log('NO FILE');
|
||||
}
|
||||
};
|
||||
const removeInvoiceFiles = (filesState, index) => {
|
||||
setFileInvoices(
|
||||
filesState.filter((file, fileIndex) => {
|
||||
return fileIndex != index;
|
||||
})
|
||||
);
|
||||
};
|
||||
const date = dateInvoice ? fPostFormat(dateInvoice, 'yyyy-MM-dd') : null;
|
||||
}, [id]);
|
||||
|
||||
function toTitleCase(str: string | null) {
|
||||
return str.replace(/\w\S*/g, function(txt) {
|
||||
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
});
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
|
||||
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
||||
const handleCloseDialogSubmit = () => {
|
||||
setOpenDialogSubmit(false);
|
||||
}
|
||||
const handleSubmitData = () => {
|
||||
// if(fileInvoices.length > 0)
|
||||
// {
|
||||
//submit data
|
||||
axios
|
||||
.post('claim-requests/'+id+'/approve')
|
||||
.then((response) => {
|
||||
enqueueSnackbar('Success Submit Claim Request', { variant: 'success' });
|
||||
setOpenDialogSubmit(false);
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
|
||||
});
|
||||
//Upload file invoices
|
||||
const formData = makeFormData({
|
||||
date:date,
|
||||
invoice_files: fileInvoices,
|
||||
});
|
||||
axios
|
||||
.post('claim-requests/'+id+'/invoice-files', formData)
|
||||
.then((response) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Success upload invoice', { variant: 'success' });
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
|
||||
});
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// enqueueSnackbar('Please upload file invoice, before submit', { variant: 'warning' });
|
||||
// }
|
||||
|
||||
setTimeout(() =>
|
||||
{
|
||||
window.location.reload();
|
||||
}, 5000);
|
||||
|
||||
};
|
||||
|
||||
const check_invoice = document?.find((dataInvoice) => dataInvoice.type === 'claim-invoice');
|
||||
const [approve, setApprove] = useState('')
|
||||
|
||||
return (
|
||||
<Page title='Detail'>
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
|
||||
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
|
||||
<Typography variant="h5" sx={{marginLeft:2}}>{(data && data.data) ? data.data.status.code : ''}</Typography>
|
||||
{data ? (
|
||||
<Stack direction="row" spacing={2} ml="auto">
|
||||
<Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
|
||||
<Typography variant="body2" fontWeight="bold">{(data && data.data) ? format(new Date(data.data.status.submission_date), "d MMM yyyy") : ''}</Typography>
|
||||
<Typography variant="h5" sx={{marginLeft:2}}>{(requestLog && requestLog.code ? requestLog.code : '')}</Typography>
|
||||
</Stack>
|
||||
) : ''}
|
||||
</Stack>
|
||||
{data ? (
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={12}>
|
||||
<DetailStepper data={data}/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<Typography variant="subtitle1">Format Claim</Typography>
|
||||
<Button variant="outlined" color="primary" startIcon={< DownloadIcon/>} sx={{marginLeft: 'auto'}}>
|
||||
<Typography variant="button" display="block">Import</Typography>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
{check_invoice ? (
|
||||
<Grid item xs={12} md={12}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<Typography variant="subtitle1">Request Claim</Typography>
|
||||
<Button variant="outlined" color="primary" startIcon={ isInvoiceVisible ? < RemoveIcon/> : < AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleInvoice()}>
|
||||
<Typography variant="button" display="block">Invoice</Typography>
|
||||
</Button>
|
||||
<Card sx={{padding:2}} >
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Detail</Typography>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
) : ''}
|
||||
<Grid item xs={12} md={12} sx={{display : isInvoiceVisible ? '' : 'none',}}>
|
||||
<Card sx={{padding: 2}}>
|
||||
<Stack direction="column" spacing={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DatePicker
|
||||
label="Invoice Date"
|
||||
value={dateInvoice}
|
||||
onChange={(newValue) => {
|
||||
setDateInvoice(newValue);
|
||||
}}
|
||||
inputFormat="dd MMM yyyy"
|
||||
renderInput={(params) => <TextField sx={{width:'40%'}} {...params} defaultValue={formattedCurrentDate} required/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{fileInvoices &&
|
||||
fileInvoices.map((file, index) => (
|
||||
<Stack direction="row" justifyContent={'space-between'} key={index}>
|
||||
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
||||
<InsertDriveFileIcon />
|
||||
<Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
|
||||
</Stack>
|
||||
<Iconify
|
||||
icon="eva:trash-2-outline"
|
||||
color={'darkred'}
|
||||
onClick={() => {
|
||||
removeInvoiceFiles(fileInvoices, index);
|
||||
}}
|
||||
sx={{cursor: 'pointer'}}
|
||||
></Iconify>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
|
||||
bgcolor: '#919EAB52',
|
||||
borderRadius: '8px',
|
||||
width: '100%', height: '60px'}} onClick={() => fileInvoiceInput.current?.click()}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
placeItems: 'center',
|
||||
gap: 1,
|
||||
placeContent: 'center',
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
|
||||
<Typography variant="body1" fontWeight="bold">
|
||||
Upload Invoice
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileInvoiceInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={handleInvoiceInputChange}
|
||||
accept="application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Date Of Birth</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.date_of_birth ? fDate(requestLog?.date_of_birth) : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Marital Status</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.marital_status}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12}>
|
||||
<DetailTimeline data={data}/>
|
||||
<Grid item xs={12} md={12} marginTop={2}>
|
||||
<Card sx={{padding:2}} >
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Service</Typography>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(requestLog?.claim_method ?? '-')}</Typography>
|
||||
</Stack>
|
||||
{/* <Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Benefit</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
||||
<ul>
|
||||
{requestLog?.benefit.length > 0 ? requestLog?.benefit.map((r, index) => (
|
||||
<li key={index}>{r.code } - {r.description}</li>
|
||||
)) : <li>-</li>}
|
||||
</ul>
|
||||
</Typography>
|
||||
</Stack> */}
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12}>
|
||||
<Stack direction="row" padding={4}>
|
||||
{dataDialog && dataDialog.status === 'requested' ? (
|
||||
<>
|
||||
<Button variant="outlined" sx={{color: '#212B36', marginLeft: 'auto', borderColor: '#919EAB52'}} >Cancel</Button>
|
||||
<Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
|
||||
</>
|
||||
) : ''}
|
||||
{/* Dialog Submits */}
|
||||
<Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row" alignItems='center' spacing={1}>
|
||||
<Typography variant="h6">Confirmation</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
{dataDialog ? (
|
||||
<Stack spacing={2} padding={2}>
|
||||
<Typography variant='body1'>Are you sure to submit this claim ?</Typography>
|
||||
<Card sx={{padding:2}} >
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.code}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.name}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Date Submission</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '70%'}}>{fDateTimesecond(dataDialog.submission_date)}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Claim Method</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '70%'}}>Service Type</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Service Type</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '70%'}}>
|
||||
{dataDialog.service_code === 'IP' ? 'Inpatient' : 'Outpatient'}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
) : ''}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
|
||||
<Button sx={{backgroundColor: '#19BBBB'}} onClick={handleSubmitData} variant="contained">Submit</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
{requestLog?.status == 'requested' ? (
|
||||
<Grid item xs={12} md={12}>
|
||||
<Stack direction="row" padding={4} sx={{ justifyContent: 'space-between' }}>
|
||||
<>
|
||||
<div>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ color: '#FF4842', borderColor: '#FF4842' }}
|
||||
onClick={() => {
|
||||
setOpenDialogSubmit(true);
|
||||
setApprove('declined');
|
||||
}}
|
||||
>
|
||||
Decline
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ color: '#19BBBB', borderColor: '#19BBBB' }}
|
||||
onClick={() => {
|
||||
setOpenDialogSubmit(true);
|
||||
setApprove('approved');
|
||||
}}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
<DialogConfirmation
|
||||
setOpenDialog={setOpenDialogSubmit}
|
||||
requestLog={requestLog}
|
||||
openDialog={openDialogSubmit}
|
||||
approve={approve}
|
||||
></DialogConfirmation>
|
||||
</Stack>
|
||||
</Grid>
|
||||
) : null}
|
||||
|
||||
</Grid>
|
||||
) : ''}
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
|
||||
@@ -51,6 +51,8 @@ import { capitalizeFirstLetter } from '@/utils/formatString';
|
||||
import Label from '@/components/Label';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
import { Import } from '@/@types/claims';
|
||||
|
||||
import { RequestLogType } from '../Request/Model/Types';
|
||||
// import SvgIconStyle from '@/components/SvgIconStyle';
|
||||
import SvgIconStyle from '../../../components/SvgIconStyle';
|
||||
// import LoadingButton from '@/theme/overrides/LoadingButton';
|
||||
@@ -323,7 +325,7 @@ export default function List() {
|
||||
};
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData(data: any): any {
|
||||
function createData(data: RequestLogType): any {
|
||||
return {
|
||||
...data,
|
||||
};
|
||||
@@ -345,7 +347,7 @@ export default function List() {
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
</TableCell> */ }
|
||||
<TableCell align="left">
|
||||
{/* <TableCell align="left">
|
||||
<Typography
|
||||
// onClick={() => {
|
||||
// handleShowClaim(row);
|
||||
@@ -353,9 +355,9 @@ export default function List() {
|
||||
>
|
||||
{row.id}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableCell> */}
|
||||
<TableCell align="left">{row.code}</TableCell>
|
||||
<TableCell align="left">{row.member?.full_name}</TableCell>
|
||||
<TableCell align="left">{row.member_name}</TableCell>
|
||||
<TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
|
||||
<TableCell align="left">{row.service_name}</TableCell>
|
||||
<TableCell align="left">{row.payment_type_name}</TableCell>
|
||||
@@ -371,19 +373,11 @@ export default function List() {
|
||||
<TableCell align="right">
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
|
||||
<MenuItem onClick={() => navigate ('/custormer-service/request/detail/'+row.id+'')}>
|
||||
<FindInPageOutlinedIcon />
|
||||
Detail
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
|
||||
<SvgIcon>
|
||||
{/* credit: plus icon from https://heroicons.com/ */}
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5 10.25C12.5 10.0511 12.579 9.86032 12.7197 9.71967C12.8603 9.57902 13.0511 9.5 13.25 9.5H16.75C16.9489 9.5 17.1397 9.57902 17.2803 9.71967C17.421 9.86032 17.5 10.0511 17.5 10.25C17.5 10.4489 17.421 10.6397 17.2803 10.7803C17.1397 10.921 16.9489 11 16.75 11H13.25C13.0511 11 12.8603 10.921 12.7197 10.7803C12.579 10.6397 12.5 10.4489 12.5 10.25ZM13.25 15C13.0511 15 12.8603 15.079 12.7197 15.2197C12.579 15.3603 12.5 15.5511 12.5 15.75C12.5 15.9489 12.579 16.1397 12.7197 16.2803C12.8603 16.421 13.0511 16.5 13.25 16.5H16.75C16.9489 16.5 17.1397 16.421 17.2803 16.2803C17.421 16.1397 17.5 15.9489 17.5 15.75C17.5 15.5511 17.421 15.3603 17.2803 15.2197C17.1397 15.079 16.9489 15 16.75 15H13.25ZM10.78 9.78C10.8537 9.71134 10.9128 9.62854 10.9538 9.53654C10.9948 9.44454 11.0168 9.34522 11.0186 9.24452C11.0204 9.14382 11.0018 9.04379 10.9641 8.9504C10.9264 8.85701 10.8703 8.77218 10.799 8.70096C10.7278 8.62974 10.643 8.5736 10.5496 8.53588C10.4562 8.49816 10.3562 8.47963 10.2555 8.48141C10.1548 8.48318 10.0555 8.50523 9.96346 8.54622C9.87146 8.58721 9.78866 8.64631 9.72 8.72L8.25 10.19L7.78 9.72C7.63783 9.58752 7.44978 9.5154 7.25548 9.51882C7.06118 9.52225 6.87579 9.60097 6.73838 9.73838C6.60097 9.87579 6.52225 10.0612 6.51883 10.2555C6.5154 10.4498 6.58752 10.6378 6.72 10.78L7.72 11.78C7.86063 11.9205 8.05125 11.9993 8.25 11.9993C8.44875 11.9993 8.63937 11.9205 8.78 11.78L10.78 9.78ZM10.78 14.22C10.9205 14.3606 10.9993 14.5512 10.9993 14.75C10.9993 14.9488 10.9205 15.1394 10.78 15.28L8.78 17.28C8.63937 17.4205 8.44875 17.4993 8.25 17.4993C8.05125 17.4993 7.86063 17.4205 7.72 17.28L6.72 16.28C6.64631 16.2113 6.58721 16.1285 6.54622 16.0365C6.50523 15.9445 6.48319 15.8452 6.48141 15.7445C6.47963 15.6438 6.49816 15.5438 6.53588 15.4504C6.5736 15.357 6.62974 15.2722 6.70096 15.201C6.77218 15.1297 6.85701 15.0736 6.9504 15.0359C7.04379 14.9982 7.14382 14.9796 7.24452 14.9814C7.34523 14.9832 7.44454 15.0052 7.53654 15.0462C7.62854 15.0872 7.71134 15.1463 7.78 15.22L8.25 15.69L9.72 14.22C9.86063 14.0795 10.0512 14.0007 10.25 14.0007C10.4488 14.0007 10.6394 14.0795 10.78 14.22ZM15.994 4.084C15.9521 3.51752 15.6975 2.98786 15.2813 2.60132C14.865 2.21478 14.318 1.99997 13.75 2H10.25C9.69656 2.00002 9.16255 2.20401 8.75004 2.57297C8.33754 2.94194 8.07549 3.44999 8.014 4H6.25C5.65326 4 5.08097 4.23705 4.65901 4.65901C4.23705 5.08097 4 5.65326 4 6.25V19.75C4 20.3467 4.23705 20.919 4.65901 21.341C5.08097 21.7629 5.65326 22 6.25 22H17.75C18.0455 22 18.3381 21.9418 18.611 21.8287C18.884 21.7157 19.1321 21.5499 19.341 21.341C19.5499 21.1321 19.7157 20.884 19.8287 20.611C19.9418 20.3381 20 20.0455 20 19.75V6.25C20 5.95453 19.9418 5.66194 19.8287 5.38896C19.7157 5.11598 19.5499 4.86794 19.341 4.65901C19.1321 4.45008 18.884 4.28434 18.611 4.17127C18.3381 4.0582 18.0455 4 17.75 4H15.986L15.994 4.084ZM15.994 4.096L16 4.25C16 4.198 15.997 4.147 15.994 4.096ZM10.25 6.5H13.75C14.53 6.5 15.217 6.103 15.621 5.5H17.75C17.9489 5.5 18.1397 5.57902 18.2803 5.71967C18.421 5.86032 18.5 6.05109 18.5 6.25V19.75C18.5 19.9489 18.421 20.1397 18.2803 20.2803C18.1397 20.421 17.9489 20.5 17.75 20.5H6.25C6.05109 20.5 5.86032 20.421 5.71967 20.2803C5.57902 20.1397 5.5 19.9489 5.5 19.75V6.25C5.5 6.05109 5.57902 5.86032 5.71967 5.71967C5.86032 5.57902 6.05109 5.5 6.25 5.5H8.379C8.783 6.103 9.47 6.5 10.25 6.5ZM10.25 3.5H13.75C13.9489 3.5 14.1397 3.57902 14.2803 3.71967C14.421 3.86032 14.5 4.05109 14.5 4.25C14.5 4.44891 14.421 4.63968 14.2803 4.78033C14.1397 4.92098 13.9489 5 13.75 5H10.25C10.0511 5 9.86032 4.92098 9.71967 4.78033C9.57902 4.63968 9.5 4.44891 9.5 4.25C9.5 4.05109 9.57902 3.86032 9.71967 3.71967C9.86032 3.57902 10.0511 3.5 10.25 3.5Z" fill="black"/>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
Konfirmasi
|
||||
</MenuItem>
|
||||
|
||||
</>
|
||||
} />
|
||||
</TableCell>
|
||||
@@ -482,9 +476,9 @@ export default function List() {
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{/* <TableCell style={headStyle} align="left" /> */}
|
||||
<TableCell style={headStyle} align="left">
|
||||
{/* <TableCell style={headStyle} align="left">
|
||||
ID Request LOG
|
||||
</TableCell>
|
||||
</TableCell> */}
|
||||
<TableCell style={headStyle} align="left">
|
||||
Code
|
||||
</TableCell>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { Member } from "@/@types/member"
|
||||
|
||||
/**
|
||||
* Search Type
|
||||
*/
|
||||
@@ -8,18 +10,48 @@ export type SearchType = {
|
||||
/**
|
||||
* Member List
|
||||
*/
|
||||
export type MemberListType = {
|
||||
id : string,
|
||||
member_id : string,
|
||||
name : string,
|
||||
service_type : ServiceType[],
|
||||
patien_type? : string,
|
||||
file_kondisi? : any[],
|
||||
file_diagnosa? : any[],
|
||||
file_penunjang? : any[],
|
||||
export type RequestLogType = {
|
||||
id : number,
|
||||
code : string,
|
||||
member : Member,
|
||||
submission_date : string,
|
||||
service_name : string,
|
||||
payment_type_name : string,
|
||||
status_final_log : string,
|
||||
status : string,
|
||||
files_by_type : files_by_type,
|
||||
}
|
||||
|
||||
export type ServiceType = {
|
||||
code : string
|
||||
name : string
|
||||
export type files_by_type = {
|
||||
claim_diagnosis : file[],
|
||||
claim_kondisi : file[],
|
||||
claim_result : file[],
|
||||
}
|
||||
|
||||
export type file = {
|
||||
name: string,
|
||||
url: string,
|
||||
}
|
||||
|
||||
export type DetailRequestLogType = {
|
||||
id : number,
|
||||
code : string,
|
||||
member_id : string,
|
||||
policy_number : string,
|
||||
name : string,
|
||||
date_of_birth : string,
|
||||
gender : string,
|
||||
marital_status : string,
|
||||
submission_date : string,
|
||||
service_type : string,
|
||||
claim_method : string,
|
||||
status : string,
|
||||
benefit : Benefit[],
|
||||
}
|
||||
|
||||
export type Benefit = {
|
||||
code: string,
|
||||
description: string
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user