update requst dan final log
This commit is contained in:
@@ -0,0 +1,355 @@
|
||||
/**
|
||||
* Core
|
||||
* ============================================
|
||||
*/
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { Box, FormControlLabel, Grid, Checkbox, Typography, CircularProgress , Button, styled, Stack, IconButton, Card} from '@mui/material';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
|
||||
/**
|
||||
* Components
|
||||
* ============================================
|
||||
*/
|
||||
// - Global -
|
||||
import Label from '@/components/Label';
|
||||
// - Local -
|
||||
import FormCreateSearch from './FormCreateSearch';
|
||||
import FormCreateListChoose from './FormCreateListChoose';
|
||||
import FormCreateBtnUpload from './FormCreateBtnUpload';
|
||||
|
||||
/**
|
||||
* Icon, Utils, Types, Functions, theme, hook
|
||||
* ============================================
|
||||
*/
|
||||
import { ArrowBackIosNew } from '@mui/icons-material';
|
||||
import { fDateTimesecond } from '@/utils/formatTime';
|
||||
import { MemberListType } from '../Model/Types';
|
||||
import { addClaimRequest, getMemberList } from '../Model/Functions';
|
||||
import palette from '@/theme/palette';
|
||||
import FormCreateFilesUpload from './FormCreateFilesUpload';
|
||||
import useLoadOnScroll from '@/hooks/useLoadOnScroll';
|
||||
import useCollapseDrawer from '@/hooks/useCollapseDrawer';
|
||||
import FormCreateBtnChoose from './FormCreateBtnChoose';
|
||||
import axios from '../../../utils/axios';
|
||||
|
||||
export default function FormCreate() {
|
||||
const navigate = useNavigate()
|
||||
const defaultListChoosed:MemberListType[] = [];
|
||||
|
||||
// State
|
||||
// -------------------------
|
||||
const [keyword, setKeyword] = useState<string>('');
|
||||
const [listChoosed, setListChoosed] = useState<MemberListType[]>([]);
|
||||
const [isChoosed, setIsChoosed] = useState<boolean>(false);
|
||||
const [formIsLoading, setFormIsLoading] = useState<boolean>(false);
|
||||
|
||||
// List Choose - auto Scroll
|
||||
// -------------------------
|
||||
const fetchFunction = async (page: number): Promise<MemberListType[]> => getMemberList(page, keyword)
|
||||
|
||||
const {data: MemberList, isLoading: scrollIsLoading, setData, resetLastPage, refetchData} = useLoadOnScroll<MemberListType>(fetchFunction);
|
||||
|
||||
// List Choose - Search
|
||||
// -------------------------
|
||||
const handleSearch = (keyword: string) => {
|
||||
setData([])
|
||||
resetLastPage()
|
||||
setKeyword(keyword)
|
||||
refetchData()
|
||||
}
|
||||
|
||||
// Function - Clear Form
|
||||
// -----------------------------
|
||||
const clearForm = () => {
|
||||
setListChoosed(defaultListChoosed);
|
||||
setIsChoosed(false);
|
||||
}
|
||||
|
||||
// Function - Choose Patien Type
|
||||
// -----------------------------
|
||||
const handleChoosePatienType = (data: MemberListType, type: string) => {
|
||||
let newListChoosed = listChoosed.map((list) => {
|
||||
if (data.id == list.id) {
|
||||
list.patien_type = type
|
||||
}
|
||||
|
||||
return list;
|
||||
})
|
||||
setListChoosed(newListChoosed)
|
||||
}
|
||||
|
||||
// Function - Handle Btn Upload
|
||||
// -----------------------------
|
||||
const handleChangeInput = (data: MemberListType, type_file: 'kondisi'|'diagnosa'|'penunjang', file: any) => {
|
||||
let newListChoosed = listChoosed.map((list) => {
|
||||
if (data.id == list.id) {
|
||||
if (type_file == 'kondisi') {
|
||||
if (list.file_kondisi == undefined) {
|
||||
list.file_kondisi = [file];
|
||||
}
|
||||
else {
|
||||
list.file_kondisi.push(file);
|
||||
}
|
||||
}
|
||||
|
||||
if (type_file == 'diagnosa') {
|
||||
if (list.file_diagnosa == undefined) {
|
||||
list.file_diagnosa = [file];
|
||||
}
|
||||
else {
|
||||
list.file_diagnosa.push(file);
|
||||
}
|
||||
}
|
||||
|
||||
if (type_file == 'penunjang') {
|
||||
if (list.file_penunjang == undefined) {
|
||||
list.file_penunjang = [file];
|
||||
}
|
||||
else {
|
||||
list.file_penunjang.push(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return list;
|
||||
})
|
||||
|
||||
setListChoosed(newListChoosed)
|
||||
}
|
||||
|
||||
// Function - Handle Remove Fle
|
||||
// -----------------------------
|
||||
const handleRemoveFile = (data: MemberListType, type_file: 'kondisi'|'diagnosa'|'penunjang', target_index: number) => {
|
||||
let newListChoosed = listChoosed.map((list) => {
|
||||
if (data.id == list.id) {
|
||||
if (type_file == 'kondisi') {
|
||||
list.file_kondisi = list.file_kondisi?.filter((file: any, index: number) =>{
|
||||
if (target_index !== index) {
|
||||
return file;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (type_file == 'diagnosa') {
|
||||
list.file_diagnosa = list.file_diagnosa?.filter((file: any, index: number) =>{
|
||||
if (target_index !== index) {
|
||||
return file;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (type_file == 'penunjang') {
|
||||
list.file_penunjang = list.file_penunjang?.filter((file: any, index: number) =>{
|
||||
if (target_index !== index) {
|
||||
return file;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return list;
|
||||
})
|
||||
|
||||
setListChoosed(newListChoosed)
|
||||
}
|
||||
|
||||
// Function - Handle Submit Form
|
||||
// -----------------------------
|
||||
const handleSubmit = async () => {
|
||||
setFormIsLoading(true)
|
||||
let response = await addClaimRequest(listChoosed)
|
||||
setFormIsLoading(false)
|
||||
|
||||
if (response == true) {
|
||||
clearForm()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
let isDirty = listChoosed.some((row) => {
|
||||
if (row.patien_type == undefined) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Back Button */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 5}}>
|
||||
<IconButton size='large' color='inherit' onClick={() => isChoosed==false ? navigate(`/claim-requests`) : setIsChoosed(false)} >
|
||||
<ArrowBackIosNew/>
|
||||
</IconButton>
|
||||
|
||||
<Typography variant="h5" sx={{ marginLeft: '24px' }}>
|
||||
{'Create Claim Requests'}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Choose Section */}
|
||||
<Grid container spacing={4} sx={{ px: 2, position: 'relative', display: isChoosed==false ? 'inherit' : 'none' }}>
|
||||
{/* Search */}
|
||||
<Grid item xs={12}>
|
||||
<FormCreateSearch onEmpty={() => handleSearch('')} onSubmit={(keyword) => handleSearch(keyword)} />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
{/* List */}
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
{
|
||||
MemberList.map((row, index) => {
|
||||
return (
|
||||
<FormCreateListChoose
|
||||
key={index}
|
||||
data={row}
|
||||
ListChoosed={listChoosed}
|
||||
handleCheckedProp={(checked, data) => {
|
||||
checked ? setListChoosed((prevData) => [...prevData, data]) : setListChoosed((items) => items.filter(item => item.id != data.id))
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Loading */}
|
||||
<Grid item xs={12} sx={{ display: scrollIsLoading === false ? 'none' : 'flex', justifyContent: 'center', marginTop: '40px' }}>
|
||||
<CircularProgress />
|
||||
</Grid>
|
||||
|
||||
{/* Submit List */}
|
||||
<Grid item xs={12}>
|
||||
<FormCreateBtnChoose disabled={listChoosed.length==0} title={`Create Number Batch (${listChoosed.length})`} handleClickProp={() => setIsChoosed(true)} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Input Section */}
|
||||
<Grid container spacing={10} sx={{ px: 2, display: isChoosed==true ? 'inherit' : 'none' }}>
|
||||
{
|
||||
listChoosed.map((row, index) => {
|
||||
return (
|
||||
<Grid key={index} item xs={12}>
|
||||
<Grid container spacing={6}>
|
||||
{/* Patien Name */}
|
||||
<Grid item xs={12}>
|
||||
<Card sx={{ border: '1px solid rgba(0,0,0,0.05)', display: 'flex', justifyContent: 'space-between', borderRadius: '12px', px: '24px', py: '16px' }}>
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{row.name}
|
||||
</Typography>
|
||||
<Typography variant="caption" color={palette.light.grey[500]} sx={{ fontWeight: 600 }}>
|
||||
{row.member_id}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Label variant="ghost" color="default">
|
||||
{fDateTimesecond(new Date())}
|
||||
</Label>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/* Patien Type */}
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
{row.service_type.map((r,i) => {
|
||||
const code = r.code
|
||||
return (
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
sx={{ padding: 2, width: '100%',border: row.patien_type === code ? '1px solid #19BBBB' : '1px solid #919EAB52' }}
|
||||
variant="outlined"
|
||||
color={row.patien_type === code ? 'primary' : 'inherit'}
|
||||
onClick={() => {
|
||||
handleChoosePatienType(row, code)
|
||||
}}
|
||||
>
|
||||
{r.name}
|
||||
</Button>
|
||||
</Grid>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* File Kondisi */}
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6">Condition Document</Typography>
|
||||
</Grid>
|
||||
|
||||
{row.file_kondisi && row.file_kondisi.map((file, index) => (
|
||||
<Grid item xs={12} key={index}>
|
||||
<FormCreateFilesUpload file={file} handleRemoveFileProp={() => handleRemoveFile(row, 'kondisi', index)} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
||||
<FormCreateBtnUpload handleChangeInputProp={(file) => handleChangeInput(row, 'kondisi', file)} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* File Diagnosa */}
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6">Diagnosis Document</Typography>
|
||||
</Grid>
|
||||
|
||||
{row.file_diagnosa && row.file_diagnosa.map((file, index) => (
|
||||
<Grid item xs={12} key={index}>
|
||||
<FormCreateFilesUpload file={file} handleRemoveFileProp={() => handleRemoveFile(row, 'diagnosa', index)} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
||||
<FormCreateBtnUpload handleChangeInputProp={(file) => handleChangeInput(row, 'diagnosa', file)} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* File Penunjang */}
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6">Supporting Result Document</Typography>
|
||||
</Grid>
|
||||
|
||||
{row.file_penunjang && row.file_penunjang.map((file, index) => (
|
||||
<Grid item xs={12} key={index}>
|
||||
<FormCreateFilesUpload file={file} handleRemoveFileProp={() => handleRemoveFile(row, 'penunjang', index)} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
||||
<FormCreateBtnUpload handleChangeInputProp={(file) => handleChangeInput(row, 'penunjang', file)} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Box display="flex" gap={1}>
|
||||
<Button variant="outlined" color="inherit" onClick={() => clearForm()}>
|
||||
Cancel
|
||||
</Button>
|
||||
<LoadingButton disabled={isDirty} type="submit" variant="contained" loading={formIsLoading} onClick={() => handleSubmit()}>
|
||||
Save Changes
|
||||
</LoadingButton>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { styled, Button } from "@mui/material";
|
||||
import useCollapseDrawer from "@/hooks/useCollapseDrawer";
|
||||
|
||||
/**
|
||||
* Custom Style
|
||||
* ============================================
|
||||
*/
|
||||
const DivCustom1 = styled('div')(({ theme }) => ({
|
||||
background: 'white',
|
||||
position: 'fixed',
|
||||
left: '350px',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingLeft: '32px',
|
||||
paddingRight: '32px',
|
||||
paddingTop: '32px',
|
||||
paddingBottom: '48px',
|
||||
[theme.breakpoints.between('sm', 'lg')]: {
|
||||
left: '0px',
|
||||
},
|
||||
}));
|
||||
|
||||
type Props = {
|
||||
disabled: boolean,
|
||||
title : string,
|
||||
handleClickProp: () => void
|
||||
}
|
||||
|
||||
export default function FormCreateBtnChoose ({disabled, title, handleClickProp}: Props) {
|
||||
const { collapseClick } = useCollapseDrawer();
|
||||
|
||||
return (
|
||||
<DivCustom1 sx={{ left: collapseClick ? '80px' : '350px' }}>
|
||||
<Button variant="contained" color="primary" disabled={disabled} sx={{ width: '100%', p: '11px' }} onClick={handleClickProp}>
|
||||
{title}
|
||||
</Button>
|
||||
</DivCustom1>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { useRef } from "react";
|
||||
import { Box, ButtonBase, Typography } from "@mui/material";
|
||||
import Iconify from "@/components/Iconify";
|
||||
|
||||
type Props = {
|
||||
handleChangeInputProp: (event: any) => void
|
||||
}
|
||||
|
||||
export default function FormCreateBtnUpload ({handleChangeInputProp}: Props) {
|
||||
const fileInput = useRef<HTMLInputElement>(null);
|
||||
|
||||
return (
|
||||
<ButtonBase sx={{ py: 5, border: '2px dashed #F9FAFB',bgcolor: '#919EAB52',borderRadius: '8px',width: '100%', height: '60px'}} onClick={() => fileInput.current?.click()}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
placeItems: 'center',
|
||||
gap: 1,
|
||||
placeContent: 'center',
|
||||
py:'11px'
|
||||
}}
|
||||
>
|
||||
<Iconify icon="icon-park-outline:upload-one" fontSize="1.5em" />
|
||||
<Typography variant="body1" fontWeight="bold" fontSize={'15px'}>
|
||||
Upload Result
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={(event) => handleChangeInputProp(event.target.files ? event.target.files[0] : {})}
|
||||
accept="application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import Iconify from "@/components/Iconify";
|
||||
import { ArrowBackIosNew, InsertDriveFile } from '@mui/icons-material';
|
||||
import { Stack, Typography } from "@mui/material";
|
||||
|
||||
type Props = {
|
||||
file: any,
|
||||
handleRemoveFileProp: () => void,
|
||||
}
|
||||
|
||||
export default function FormCreateFilesUpload({ file, handleRemoveFileProp }: Props) {
|
||||
return (
|
||||
<Stack direction="row" justifyContent={'space-between'} sx={{ mb: '16px' }}>
|
||||
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
||||
<InsertDriveFile />
|
||||
<Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
|
||||
</Stack>
|
||||
<Iconify
|
||||
icon="eva:trash-2-outline"
|
||||
color={'darkred'}
|
||||
onClick={() => {handleRemoveFileProp()}}
|
||||
sx={{cursor: 'pointer'}}
|
||||
></Iconify>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* Core
|
||||
* ============================================
|
||||
*/
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Box, FormControlLabel, Grid, Checkbox, Typography, Card} from '@mui/material';
|
||||
|
||||
/**
|
||||
* Components
|
||||
* ============================================
|
||||
*/
|
||||
// - Global -
|
||||
import Label from '@/components/Label';
|
||||
// - Local -
|
||||
|
||||
/**
|
||||
* Icon, Utils, Types, Functions, theme, hook
|
||||
* ============================================
|
||||
*/
|
||||
import { fDateTimesecond } from '@/utils/formatTime';
|
||||
import { MemberListType } from '../Model/Types';
|
||||
import palette from '@/theme/palette';
|
||||
|
||||
/**
|
||||
* Props
|
||||
* =====================================================
|
||||
*/
|
||||
type Props = {
|
||||
data: MemberListType,
|
||||
ListChoosed: MemberListType[],
|
||||
handleCheckedProp: (checked: boolean, data: MemberListType) => void,
|
||||
};
|
||||
|
||||
export default function FormCreateListChoose({data, ListChoosed, handleCheckedProp}: Props) {
|
||||
const [isChoosed, setIsChoosed] = useState<boolean>(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsChoosed(false);
|
||||
|
||||
ListChoosed.forEach(list => {
|
||||
if (list.id == data.id) {
|
||||
setIsChoosed(true);
|
||||
}
|
||||
})
|
||||
}, [ListChoosed])
|
||||
|
||||
return (
|
||||
<Grid item xs={12}>
|
||||
<Card sx={{
|
||||
border: '0px solid rgba(0,0,0,0.125)', px: '24px', py: '16px', borderRadius: '12px', display: 'flex', justifyContent: 'space-between',
|
||||
bgcolor: (theme) => {
|
||||
return isChoosed ? palette.light.primary.lighter : palette.light.background.default
|
||||
}
|
||||
}}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', px: '8px'}}>
|
||||
<FormControlLabel
|
||||
label=""
|
||||
control={<Checkbox onChange={(event, checked) => handleCheckedProp(checked, data)} />}
|
||||
checked={isChoosed}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{data.name}
|
||||
</Typography>
|
||||
<Typography variant="caption" color={palette.light.grey[500]} sx={{ fontWeight: 600 }}>
|
||||
{data.member_id}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Label variant="ghost" color="default">
|
||||
{fDateTimesecond(new Date())}
|
||||
</Label>
|
||||
</Card>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* Core
|
||||
* ============================================
|
||||
*/
|
||||
import { useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { Grid } from '@mui/material';
|
||||
|
||||
/**
|
||||
* Components
|
||||
* ============================================
|
||||
*/
|
||||
// - Global -
|
||||
import { FormProvider, RHFTextField } from '@/components/hook-form';
|
||||
// - Local -
|
||||
|
||||
/**
|
||||
* Icon, Utils, Types, Functions
|
||||
* ============================================
|
||||
*/
|
||||
import { Search } from '@mui/icons-material';
|
||||
import { SearchType } from '../Model/Types';
|
||||
|
||||
type Props = {
|
||||
onSubmit: (keyword: string) => void,
|
||||
onEmpty: () => void,
|
||||
};
|
||||
|
||||
const FormCreateSearch = ({ onSubmit, onEmpty }: Props) => {
|
||||
const defaultValuesSearchForm = {
|
||||
keyword: ''
|
||||
};
|
||||
|
||||
const methodsSearchForm = useForm<SearchType>({
|
||||
defaultValues: defaultValuesSearchForm
|
||||
});
|
||||
|
||||
const { handleSubmit, formState: { isDirty } } = methodsSearchForm;
|
||||
|
||||
// search on submit
|
||||
const onSubmitSearch = (data: SearchType ) => {
|
||||
onSubmit(data.keyword);
|
||||
}
|
||||
|
||||
// search on empty
|
||||
useEffect(() => {
|
||||
if (isDirty === false) {
|
||||
onEmpty()
|
||||
}
|
||||
},[isDirty])
|
||||
|
||||
return (
|
||||
<FormProvider methods={methodsSearchForm} onSubmit={handleSubmit(onSubmitSearch)}>
|
||||
<Grid container direction={"row"}>
|
||||
<Grid item xs={12}>
|
||||
<RHFTextField
|
||||
name="keyword"
|
||||
placeholder="Search..."
|
||||
autoComplete='off'
|
||||
fullWidth
|
||||
InputProps={{ startAdornment: <Search /> }}
|
||||
sx={{ input: { paddingLeft: '14px' } }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</FormProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormCreateSearch
|
||||
@@ -0,0 +1,456 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import React, { useRef, useEffect, useMemo, useState } from 'react';
|
||||
import axios from '../../../utils/axios';
|
||||
import { FormProvider, RHFTextField } from '../../../components/hook-form';
|
||||
|
||||
import { makeFormData } from '@/utils/jsonToFormData';
|
||||
import {
|
||||
Autocomplete,
|
||||
Button,
|
||||
Grid,
|
||||
Stack,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
List,
|
||||
ListItem,
|
||||
IconButton,
|
||||
ListItemAvatar,
|
||||
Avatar,
|
||||
ListItemText,
|
||||
Card,
|
||||
InputAdornment,
|
||||
Divider,
|
||||
ButtonBase,
|
||||
Box,
|
||||
} from '@mui/material';
|
||||
import Iconify from '../../../components/Iconify';
|
||||
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import MemberSelectDialog from '../../../components/dialogs/MemberSelectDialog';
|
||||
import { Add, ArrowBackIosNew, DeleteOutline } from '@mui/icons-material';
|
||||
import { ClaimRequest, Files } from '@/@types/claims';
|
||||
import { fDateTimesecond } from '@/utils/formatTime';
|
||||
|
||||
interface FormValuesProps extends Partial<ClaimRequest> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentClaim?: ClaimRequest;
|
||||
};
|
||||
|
||||
export default function FormEdit({ isEdit, currentClaim }: Props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const EditClaimSchema = Yup.object().shape({
|
||||
organization_id: Yup.string().required('Code Provider is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
id: currentClaim?.id || '-',
|
||||
code: currentClaim?.code || '-',
|
||||
member_name: currentClaim?.member?.name || '-',
|
||||
date: currentClaim?.submission_date ? fDateTimesecond(currentClaim?.submission_date) : '-',
|
||||
claim_method: currentClaim?.payment_type || '-',
|
||||
service_type: currentClaim?.service_code || '-',
|
||||
organization_id: currentClaim?.organization?.code || '-',
|
||||
}),
|
||||
[currentClaim]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentClaim) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
// setFileKondisis(currentClaim?.files_by_type?.claim_diagnosis);
|
||||
// setFileDiagnosas(currentClaim?.files_by_type?.claim_diagnosis);
|
||||
setFileHasilPenunjangCurrent(currentClaim?.files_by_type?.claim_result);
|
||||
}, [isEdit, currentClaim]);
|
||||
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(EditClaimSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
const [isCheckingLimit, setIsCheckingLimit] = useState(false);
|
||||
const [isEligible, setIsEligible] = useState(false);
|
||||
const [memberBenefits, setMemberBenefits] = useState([]);
|
||||
const [diagnosisOption, setDiagnosisOption] = useState([]);
|
||||
const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
|
||||
const [member, setMember] = useState({})
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
// Files Result Kondisi
|
||||
const fileKondisiInput = useRef<HTMLInputElement>(null);
|
||||
const [fileKondisis, setFileKondisis] = useState<Files>([]);
|
||||
|
||||
const handleKondisiInputChange = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
setFileKondisis([...fileKondisis, ...event.target.files]);
|
||||
} else {
|
||||
console.log('NO FILE');
|
||||
}
|
||||
};
|
||||
const removeKondisiFiles = (filesState, index) => {
|
||||
setFileKondisis(
|
||||
filesState.filter((file, fileIndex) => {
|
||||
return fileIndex != index;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
// Files Result Diagnosa
|
||||
const fileDiagnosaInput = useRef<HTMLInputElement>(null);
|
||||
const [fileDiagnosas, setFileDiagnosas] = useState([]);
|
||||
|
||||
const handleDiagnosaInputChange = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
setFileDiagnosas([...fileDiagnosas, ...event.target.files]);
|
||||
} else {
|
||||
console.log('NO FILE');
|
||||
}
|
||||
};
|
||||
const removeDiagnosaFiles = (filesState, index) => {
|
||||
setFileDiagnosas(
|
||||
filesState.filter((file, fileIndex) => {
|
||||
return fileIndex != index;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
// Files Result Hasil Penunjang
|
||||
const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
|
||||
const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState([]);
|
||||
const [fileHasilPenunjangsCurrent, setFileHasilPenunjangCurrent] = useState([]);
|
||||
|
||||
const handleResultInputChange = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
setFileHasilPenunjangs([...fileHasilPenunjangs, ...event.target.files]);
|
||||
} else {
|
||||
console.log('NO FILE');
|
||||
}
|
||||
};
|
||||
const removeFiles = (filesState, index) => {
|
||||
setFileHasilPenunjangs(
|
||||
filesState.filter((file, fileIndex) => {
|
||||
return fileIndex != index;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const onSubmit = async (data: FormValuesProps) => {
|
||||
try {
|
||||
// const formData = new FormData();
|
||||
// formData.append('result_files', fileHasilPenunjangs);
|
||||
// formData.append('diagnosa_files', fileDiagnosaInput);
|
||||
// formData.append('kondisi_files', fileKondisiInput);
|
||||
// formData.append('provider_code', data.organization_id);
|
||||
// formData.append('_method', 'PUT');
|
||||
const formData = makeFormData({
|
||||
result_files: fileHasilPenunjangs,
|
||||
diagnosa_files: fileDiagnosas,
|
||||
kondisi_files: fileKondisis,
|
||||
provider_code: data.organization_id,
|
||||
_method: 'PUT'
|
||||
});
|
||||
|
||||
const response = await axios.put(`/claim-requests/${data.id}`, formData);
|
||||
|
||||
reset();
|
||||
enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
|
||||
navigate('/claim-requests');
|
||||
} catch (error: any) {
|
||||
if (error && error.response.status === 422) {
|
||||
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
||||
// setError(key, { message: value[0] });
|
||||
enqueueSnackbar('Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
} else {
|
||||
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center'}}>
|
||||
<IconButton size='large' color='inherit' onClick={() => navigate(`/claim-requests`)} >
|
||||
<ArrowBackIosNew/>
|
||||
</IconButton>
|
||||
|
||||
<Typography variant="h5" sx={{ marginLeft: '24px' }}>
|
||||
{'Edit Claim Requests'}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Card sx={{paddingX:2, paddingY:2}}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={5}>
|
||||
<Typography variant="subtitle1">Code*</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={7}>
|
||||
<Typography variant="subtitle1">Name*</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={5}>
|
||||
<RHFTextField name="code" label="Code" disabled/>
|
||||
</Grid>
|
||||
<Grid item xs={7}>
|
||||
<RHFTextField name="member_name" label="Name" disabled/>
|
||||
</Grid>
|
||||
{/* <input type="hidden" name="id"/> */}
|
||||
|
||||
|
||||
<Grid item xs={12}></Grid>
|
||||
|
||||
<Grid item xs={3}>
|
||||
<Typography variant="subtitle1">Date of Submission*</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<Typography variant="subtitle1">Claim Method*</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<Typography variant="subtitle1">Service Type*</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<Typography variant="subtitle1">Code Provider*</Typography>
|
||||
</Grid>
|
||||
|
||||
|
||||
<Grid item xs={3}>
|
||||
<RHFTextField InputProps={{endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<CalendarTodayIcon />
|
||||
</InputAdornment>
|
||||
), }}
|
||||
name="date" label="Date of Submission" disabled/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<RHFTextField name="claim_method" label="Claim Method" disabled/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<RHFTextField name="service_type" label="Service Type*" disabled/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<RHFTextField name="organization_id" label="Code Provider*"/>
|
||||
</Grid>
|
||||
|
||||
|
||||
{/* -------------------------------Upload Dokumen Kondisi------------------------------- */}
|
||||
<React.Fragment>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant='h6'> Condition Document</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
{fileKondisis &&
|
||||
fileKondisis.map((file, index) => (
|
||||
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
|
||||
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
|
||||
<Iconify
|
||||
icon="eva:trash-2-outline"
|
||||
color={'darkred'}
|
||||
onClick={() => {
|
||||
removeKondisiFiles(fileKondisis, index);
|
||||
}}
|
||||
></Iconify>
|
||||
</Stack>
|
||||
))}
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
|
||||
bgcolor: '#919EAB52',
|
||||
borderRadius: '8px',
|
||||
width: '100%', height: '60px'}} onClick={() => fileKondisiInput.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">
|
||||
Add File
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileKondisiInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={handleKondisiInputChange}
|
||||
accept="application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
{/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
|
||||
<React.Fragment>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant='h6'> Diagnosis Document</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
{fileDiagnosas &&
|
||||
fileDiagnosas.map((file, index) => (
|
||||
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
|
||||
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
|
||||
<Iconify
|
||||
icon="eva:trash-2-outline"
|
||||
color={'darkred'}
|
||||
onClick={() => {
|
||||
removeDiagnosaFiles(fileDiagnosas, index);
|
||||
}}
|
||||
></Iconify>
|
||||
</Stack>
|
||||
))}
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
|
||||
bgcolor: '#919EAB52',
|
||||
borderRadius: '8px',
|
||||
width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.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">
|
||||
Add Result
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileDiagnosaInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={handleDiagnosaInputChange}
|
||||
accept="application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
{/* -------------------------------Upload Result Hasil Penunjang------------------------------- */}
|
||||
<React.Fragment>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant='h6'> Supporting Result Document</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
{fileHasilPenunjangs &&
|
||||
fileHasilPenunjangs.map((file, index) => (
|
||||
<Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
|
||||
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
|
||||
<Iconify
|
||||
icon="eva:trash-2-outline"
|
||||
color={'darkred'}
|
||||
onClick={() => {
|
||||
removeFiles(fileHasilPenunjangs, index);
|
||||
}}
|
||||
></Iconify>
|
||||
</Stack>
|
||||
))}
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
|
||||
bgcolor: '#919EAB52',
|
||||
borderRadius: '8px',
|
||||
width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.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">
|
||||
Add Result
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={fileHasilPenunjangInput}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={handleResultInputChange}
|
||||
accept="application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
|
||||
</Grid>
|
||||
</Card>
|
||||
<Grid container marginTop={3}>
|
||||
<Grid item xs={12} md={12} >
|
||||
<Stack direction="row" alignItems="center" justifyContent="flex-end">
|
||||
<Button
|
||||
sx={{
|
||||
margin: 1
|
||||
}}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
color='inherit'
|
||||
onClick={() => navigate(`/claim-requests`)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<LoadingButton
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
loading={isSubmitting}
|
||||
>
|
||||
Update
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import * as Yup from 'yup';
|
||||
import { Box, IconButton } from '@mui/material';
|
||||
import { ArrowBackIosNew } from '@mui/icons-material';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { Autocomplete, Button, Card, Collapse, Container, Divider, Grid, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
|
||||
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../components/hook-form';
|
||||
import Page from '../../components/Page';
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
|
||||
import { styled } from '@mui/system';
|
||||
import axios from '../../utils/axios';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
import Iconify from '../../components/Iconify';
|
||||
import { ClaimRequest } from '@/@types/claims';
|
||||
import FormEdit from './Components/FormEdit';
|
||||
import FormCreate from './Components/FormCreate';
|
||||
|
||||
export default function ClaimsCreateUpdate() {
|
||||
|
||||
const { themeStretch } = useSettings();
|
||||
const { id } = useParams();
|
||||
|
||||
const isEdit = id ? true : false;
|
||||
|
||||
const [currentClaim, setCurrentClaim] = useState<ClaimRequest>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/claim-requests/' + id).then((res) => {
|
||||
console.log('Yeet', res.data);
|
||||
setCurrentClaim(res.data.data);
|
||||
});
|
||||
|
||||
console.log(currentClaim)
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
|
||||
return (
|
||||
<Page title={isEdit ? `Edit Claim Request` : "Create New Claim"}>
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
{
|
||||
id == undefined
|
||||
?
|
||||
(
|
||||
<FormCreate />
|
||||
)
|
||||
:
|
||||
(
|
||||
<FormEdit isEdit={isEdit} currentClaim={currentClaim} />
|
||||
)
|
||||
}
|
||||
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
306
frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
Normal file
306
frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
// mui
|
||||
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } 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 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';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
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 { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get('/claim-requests/detail/'+id)
|
||||
.then((response) => {
|
||||
setData(response.data);
|
||||
setDataDialog(response.data.data.dialog_submits);
|
||||
setDocument(response.data.data.documents);
|
||||
|
||||
})
|
||||
.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;
|
||||
|
||||
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');
|
||||
|
||||
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>
|
||||
</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>
|
||||
</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>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12}>
|
||||
<DetailTimeline data={data}/>
|
||||
</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>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : ''}
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Stepper from '@mui/material/Stepper';
|
||||
import Step from '@mui/material/Step';
|
||||
import StepLabel from '@mui/material/StepLabel';
|
||||
import { useEffect, useState } from 'react';
|
||||
import ClearIcon from '@mui/icons-material/Clear';
|
||||
|
||||
const steps = [
|
||||
'Request',
|
||||
'Review',
|
||||
'Approval',
|
||||
'Decline',
|
||||
];
|
||||
|
||||
export default function HorizontalLinearAlternativeLabelStepper({data}) {
|
||||
const [active, setActive] = useState(0);
|
||||
const [status, SetStatus] = useState(null);
|
||||
let updatedSteps = [...steps];
|
||||
useEffect(() => {
|
||||
if (data && data.data) {
|
||||
if (data.data.status.status === 'requested') {
|
||||
setActive(1);
|
||||
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
|
||||
}
|
||||
else if (data.data.status.status === 'reviewed') {
|
||||
setActive(2);
|
||||
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
|
||||
}
|
||||
else if (data.data.status.status === 'approved')
|
||||
{
|
||||
setActive(3);
|
||||
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
|
||||
}
|
||||
else if(data.data.status.status === 'declined')
|
||||
{
|
||||
setActive(4)
|
||||
updatedSteps = updatedSteps.filter(step => step !== 'Approval');
|
||||
}
|
||||
}
|
||||
SetStatus(updatedSteps);
|
||||
}, [data]);
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%', marginBottom: 2 }}>
|
||||
<Stepper activeStep={active} alternativeLabel>
|
||||
{status?.map((label) => (
|
||||
<Step key={label}>
|
||||
<StepLabel icon={label==='Decline' ? <ClearIcon sx={{ color: 'white', backgroundColor: 'red', borderRadius: '50%' }} /> : ''}>{label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,426 @@
|
||||
import * as React from 'react';
|
||||
import Timeline from '@mui/lab/Timeline';
|
||||
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
|
||||
import TimelineSeparator from '@mui/lab/TimelineSeparator';
|
||||
import TimelineConnector from '@mui/lab/TimelineConnector';
|
||||
import TimelineContent from '@mui/lab/TimelineContent';
|
||||
import TimelineDot from '@mui/lab/TimelineDot';
|
||||
import {Typography, Card, Stack, ButtonBase, Box, Divider} from '@mui/material';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Button from '@mui/material/Button';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import Iconify from '../../components/Iconify';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
||||
import DescriptionIcon from '@mui/icons-material/Description';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import axios from '../../utils/axios';
|
||||
import { makeFormData } from '@/utils/jsonToFormData';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { useParams} from 'react-router-dom';
|
||||
|
||||
const Item1 = styled(Paper)(({ theme }) => ({
|
||||
...theme.typography.body2,
|
||||
padding: theme.spacing(1),
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#919EAB29',
|
||||
color: '#637381',
|
||||
width: 'fit-content',
|
||||
marginRight: 'auto',
|
||||
}));
|
||||
|
||||
const Item2 = styled(Paper)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
|
||||
...theme.typography.body2,
|
||||
padding: theme.spacing(1),
|
||||
textAlign: 'center',
|
||||
color: theme.palette.text.secondary,
|
||||
width: 'fit-content',
|
||||
marginLeft: 'auto',
|
||||
}));
|
||||
|
||||
export default function NoOppositeContent({data}) {
|
||||
const [timeline, setTimeline] = useState(null);
|
||||
const [requestFile, setRequestFile] = useState(null);
|
||||
const [document, setDocument] = useState(null);
|
||||
useEffect(() => {
|
||||
if (data && data.data) {
|
||||
setTimeline(data.data.timeline);
|
||||
setRequestFile(data.data.request_files);
|
||||
setDocument(data.data.documents);
|
||||
}
|
||||
|
||||
}, [data]);
|
||||
|
||||
// Diagnosis
|
||||
const fileRequestDocumentInputDiagnosis = useRef<HTMLInputElement>(null);
|
||||
const [fileDiagnosis, setFileDiagnosis] = useState([]);
|
||||
const handleRequestDocumentInputChangeDiagnosis = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
setFileDiagnosis([...fileDiagnosis, ...event.target.files]);
|
||||
}
|
||||
};
|
||||
const removeFileDiagnois = (filesState, index) => {
|
||||
setFileDiagnosis(
|
||||
filesState.filter((file, fileIndex) => {
|
||||
return fileIndex != index;
|
||||
})
|
||||
);
|
||||
};
|
||||
// Kondisi
|
||||
const fileRequestDocumentInputKondisi = useRef<HTMLInputElement>(null);
|
||||
const [fileKondisi, setFileKondisi] = useState([]);
|
||||
const handleRequestDocumentInputChangeKondisi = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
setFileKondisi([...fileKondisi, ...event.target.files]);
|
||||
}
|
||||
};
|
||||
const removeFileKondisi = (filesState, index) => {
|
||||
setFileKondisi(
|
||||
filesState.filter((file, fileIndex) => {
|
||||
return fileIndex != index;
|
||||
})
|
||||
);
|
||||
};
|
||||
// Result
|
||||
const fileRequestDocumentInputResult = useRef<HTMLInputElement>(null);
|
||||
const [fileResult, setFileResult] = useState([]);
|
||||
const handleRequestDocumentInputChangeResult = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
setFileResult([...fileResult, ...event.target.files]);
|
||||
}
|
||||
};
|
||||
const removeFileResult = (filesState, index) => {
|
||||
setFileResult(
|
||||
filesState.filter((file, fileIndex) => {
|
||||
return fileIndex != index;
|
||||
})
|
||||
);
|
||||
};
|
||||
const { id } = useParams();
|
||||
const [submitLoading, setSubmitLoading] = useState(false);
|
||||
const submitRequestFiles = () => {
|
||||
setSubmitLoading(true);
|
||||
const formData = makeFormData({
|
||||
fileDiagnosis: fileDiagnosis,
|
||||
fileKondisis: fileKondisi,
|
||||
fileResults: fileResult
|
||||
});
|
||||
axios
|
||||
.post('claim-requests/'+id+'/request-files', formData)
|
||||
.then((response) => {
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
|
||||
});
|
||||
}
|
||||
const submitButton = requestFile?.find((dataRequestFile) => dataRequestFile.check_files === null);
|
||||
return (
|
||||
<>
|
||||
{timeline?.map((dataTimeline, index) => (
|
||||
<Timeline
|
||||
sx={{
|
||||
[`& .${timelineItemClasses.root}:before`]: {
|
||||
flex: 0,
|
||||
padding: 0,
|
||||
},
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<Typography variant="body2" gutterBottom fontWeight="bold">{dataTimeline.date ? format(new Date(dataTimeline.date), "d MMM yyyy") : ''}</Typography>
|
||||
<TimelineItem>
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
<TimelineContent spacing={3}>
|
||||
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
|
||||
<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
|
||||
<Stack direction="row" sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
|
||||
<Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : mm") : ''}</Item1>
|
||||
<Item2 sx={{backgroundColor: dataTimeline.txt_status_backgroundColor, color: dataTimeline.txt_status_color}}>{dataTimeline.txt_status}</Item2>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={2} sx={{marginBottom: 2}}>
|
||||
<Typography variant="body2" gutterBottom>Detail:</Typography>
|
||||
<Typography variant="body2" gutterBottom>{dataTimeline.description}</Typography>
|
||||
</Stack>
|
||||
{dataTimeline.status === 'reviewed' && requestFile ? (
|
||||
<>
|
||||
{submitButton ? (
|
||||
<Typography variant="body2" gutterBottom>Request Document</Typography>
|
||||
) : (
|
||||
<Typography sx={{color: '#19BBBB'}} variant="body2" gutterBottom>Request Document Success Uploaded</Typography>
|
||||
)}
|
||||
{/* Diagnosis */}
|
||||
{requestFile?.map((dataRequestFile, index) => {
|
||||
if(dataRequestFile.type !== 'claim-diagnosis' || dataRequestFile.check_files !== null){
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
|
||||
<Typography variant="body2" gutterBottom fontWeight="bold">
|
||||
Diagnosis
|
||||
</Typography>
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{fileDiagnosis &&
|
||||
fileDiagnosis.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={() => {
|
||||
removeFileDiagnois(fileDiagnosis, index);
|
||||
}}
|
||||
sx={{cursor: 'pointer'}}
|
||||
></Iconify>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<ButtonBase
|
||||
sx={{
|
||||
p: 4,
|
||||
border: '2px dashed #F9FAFB',
|
||||
bgcolor: '#919EAB52',
|
||||
borderRadius: '8px',
|
||||
width: '100%',
|
||||
height: '60px',
|
||||
}}
|
||||
onClick={() => fileRequestDocumentInputDiagnosis.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">
|
||||
Add Result
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id={`file-${index}`}
|
||||
ref={fileRequestDocumentInputDiagnosis}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={(event) => handleRequestDocumentInputChangeDiagnosis(event)}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
{/* Kondisi */}
|
||||
{requestFile?.map((dataRequestFile, index) => {
|
||||
if(dataRequestFile.type !== 'claim-kondisi' || dataRequestFile.check_files !== null){
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
|
||||
<Typography variant="body2" gutterBottom fontWeight="bold">
|
||||
Condition
|
||||
</Typography>
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{fileKondisi &&
|
||||
fileKondisi.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={() => {
|
||||
removeFileKondisi(fileKondisi, index);
|
||||
}}
|
||||
sx={{cursor: 'pointer'}}
|
||||
></Iconify>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<ButtonBase
|
||||
sx={{
|
||||
p: 4,
|
||||
border: '2px dashed #F9FAFB',
|
||||
bgcolor: '#919EAB52',
|
||||
borderRadius: '8px',
|
||||
width: '100%',
|
||||
height: '60px',
|
||||
}}
|
||||
onClick={() => fileRequestDocumentInputKondisi.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">
|
||||
Add Result
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id={`file-${index}`}
|
||||
ref={fileRequestDocumentInputKondisi}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={(event) => handleRequestDocumentInputChangeKondisi(event)}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
{/* Supporting Result */}
|
||||
{requestFile?.map((dataRequestFile, index) => {
|
||||
if(dataRequestFile.type !== 'claim-result' || dataRequestFile.check_files !== null){
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
|
||||
<Typography variant="body2" gutterBottom fontWeight="bold">
|
||||
Supporting Result
|
||||
</Typography>
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{fileResult &&
|
||||
fileResult.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={() => {
|
||||
removeFileResult(fileResult, index);
|
||||
}}
|
||||
sx={{cursor: 'pointer'}}
|
||||
></Iconify>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<ButtonBase
|
||||
sx={{
|
||||
p: 4,
|
||||
border: '2px dashed #F9FAFB',
|
||||
bgcolor: '#919EAB52',
|
||||
borderRadius: '8px',
|
||||
width: '100%',
|
||||
height: '60px',
|
||||
}}
|
||||
onClick={() => fileRequestDocumentInputResult.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">
|
||||
Add Result
|
||||
</Typography>
|
||||
</Box>
|
||||
<input
|
||||
type="file"
|
||||
id={`file-${index}`}
|
||||
ref={fileRequestDocumentInputResult}
|
||||
style={{ display: 'none' }}
|
||||
multiple
|
||||
onChange={(event) => handleRequestDocumentInputChangeResult(event)}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
||||
/>
|
||||
</ButtonBase>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
{submitButton ? (
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
|
||||
onClick={() => {
|
||||
submitRequestFiles();
|
||||
}}
|
||||
loading={submitLoading}
|
||||
>
|
||||
Submit
|
||||
</LoadingButton>
|
||||
) : ''}
|
||||
</>
|
||||
) : ''}
|
||||
</Stack>
|
||||
</Card>
|
||||
{dataTimeline.status === 'requested' ? (
|
||||
<Card sx={{marginTop: 2 }}>
|
||||
<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
|
||||
<Stack direction="row" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }} alignItems="center">
|
||||
<DescriptionIcon />
|
||||
<Typography variant="Subtitle2" sx={{fontWeight: 'bold'}}>Documents</Typography>
|
||||
</Stack>
|
||||
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
||||
{document?.map((dataDocument, index) => (
|
||||
<Stack direction="column" spacing={2} key={index}>
|
||||
<Typography variant="Subtitle2" gutterBottom>
|
||||
{dataDocument.type === 'claim-diagnosis' ?
|
||||
'Diagnosis'
|
||||
: dataDocument.type === 'claim-kondisi' ?
|
||||
'Condition'
|
||||
: dataDocument.type === 'claim-result' ?
|
||||
'Supporting Result'
|
||||
: dataDocument.type === 'claim-invoice' ?
|
||||
'Invoice'
|
||||
: ''}
|
||||
</Typography>
|
||||
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
||||
<InsertDriveFileIcon />
|
||||
<a
|
||||
href={dataDocument.path}
|
||||
style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
|
||||
target="_blank"
|
||||
>
|
||||
<Typography variant="body2" gutterBottom>{dataDocument.original_name ? dataDocument.original_name : '-'}</Typography>
|
||||
</a>
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
) : ''}
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Card, Stack } from "@mui/material";
|
||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||
import Page from "../../../components/Page";
|
||||
import List from "./List";
|
||||
|
||||
|
||||
|
||||
export default function Claims() {
|
||||
|
||||
const pageTitle = 'Claim Request';
|
||||
return (
|
||||
<Page title={ pageTitle } sx={{ mx: 2}}>
|
||||
|
||||
<HeaderBreadcrumbs
|
||||
heading={ pageTitle }
|
||||
links={[
|
||||
{ name: 'Dashboard', href: '/dashboard' },
|
||||
{
|
||||
name: 'Claim Request',
|
||||
href: '/claim-requests',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* <Stack> */}
|
||||
<List />
|
||||
{/* </Stack> */}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
573
frontend/dashboard/src/pages/CustomerService/FinalLog/List.tsx
Normal file
573
frontend/dashboard/src/pages/CustomerService/FinalLog/List.tsx
Normal file
@@ -0,0 +1,573 @@
|
||||
// @mui
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
IconButton,
|
||||
MenuItem,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
Stack,
|
||||
Menu,
|
||||
ButtonGroup,
|
||||
Link,
|
||||
Chip,
|
||||
TableHead,
|
||||
Grid,
|
||||
} from '@mui/material';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
|
||||
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
||||
// hooks
|
||||
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
|
||||
import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import useSettings from '@/hooks/useSettings';
|
||||
// components
|
||||
import axios from '../../../utils/axios';
|
||||
import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../../@types/paginated-data';
|
||||
import DataTable from '../../../components/LaravelTable';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { Divider } from '@mui/material';
|
||||
import Iconify from '@/components/Iconify';
|
||||
import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
|
||||
import { fDateTimesecond } from '@/utils/formatTime';
|
||||
import { capitalizeFirstLetter } from '@/utils/formatString';
|
||||
import Label from '@/components/Label';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
import { Import } from '@/@types/claims';
|
||||
// import LoadingButton from '@/theme/overrides/LoadingButton';
|
||||
|
||||
export default function List() {
|
||||
const { themeColorPresets } = useSettings();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [importResult, setImportResult] = useState<Import>(null);
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
function SearchInput(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? '';
|
||||
setSearchText(newSearchText);
|
||||
};
|
||||
|
||||
const handleSearchSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
props.onSearch({ search: searchText }); // Trigger to Parent
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger First Search
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
value={searchText}
|
||||
placeholder='Search Code or Name...'
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function ImportForm(props: any) {
|
||||
// IMPORT
|
||||
// Create Button Menu
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const createMenu = Boolean(anchorEl);
|
||||
const importForm = useRef<HTMLInputElement>(null);
|
||||
const [currentImportFileName, setCurrentImportFileName] = useState(null);
|
||||
const [importLoading, setImportLoading] = useState(false);
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleImportButton = () => {
|
||||
if (importForm?.current) {
|
||||
handleClose();
|
||||
importForm.current ? importForm.current.click() : console.log('No File selected');
|
||||
} else {
|
||||
alert('No file selected');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelImportButton = () => {
|
||||
importForm.current.value = '';
|
||||
importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
};
|
||||
|
||||
const handleImportChange = (event: any) => {
|
||||
if (event.target.files[0]) {
|
||||
setCurrentImportFileName(event.target.files[0].name);
|
||||
} else {
|
||||
setCurrentImportFileName(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = () => {
|
||||
if (importForm.current?.files.length) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', importForm.current?.files[0]);
|
||||
|
||||
setImportLoading(true);
|
||||
axios
|
||||
.post(`claim-requests/import`, formData)
|
||||
.then((response) => {
|
||||
handleCancelImportButton();
|
||||
loadDataTableData();
|
||||
setImportResult(response.data);
|
||||
// alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
|
||||
setImportLoading(false);
|
||||
})
|
||||
.catch((response) => {
|
||||
enqueueSnackbar(
|
||||
'Looks like something went wrong. Please check your data and try again. ' +
|
||||
response.message,
|
||||
{ variant: 'error' }
|
||||
);
|
||||
setImportLoading(false);
|
||||
});
|
||||
} else {
|
||||
enqueueSnackbar('No File Selected', { variant: 'warning' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleGetTemplate = (type :string) => {
|
||||
axios.get('corporates/import-document-example/' + type)
|
||||
.then((response) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = response.data.data.file_url;
|
||||
link.setAttribute('download', response.data.data.file_name);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
handleClose();
|
||||
})
|
||||
}
|
||||
|
||||
const handleGetData = (type :string) => {
|
||||
axios.get(`corporates/${corporate_id}/data-plan-benefit`)
|
||||
.then((response) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = response.data.data.file_url;
|
||||
link.setAttribute('download', response.data.data.file_name);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
handleClose();
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={importForm}
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleImportChange}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
|
||||
/>
|
||||
{!currentImportFileName && (
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<SearchInput onSearch={applyFilter} />
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<UploadIcon />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
<Menu
|
||||
id="import-button"
|
||||
anchorEl={anchorEl}
|
||||
open={createMenu}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleImportButton}>Import</MenuItem>
|
||||
<MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template</MenuItem>
|
||||
<MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
|
||||
</Menu>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<AddIcon />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={() => {
|
||||
navigate('/claim-requests/create');
|
||||
}}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{currentImportFileName && (
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
||||
<Button onClick={handleImportButton} fullWidth>
|
||||
{currentImportFileName ?? 'No File Selected'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCancelImportButton}
|
||||
size="small"
|
||||
fullWidth={false}
|
||||
sx={{ p: 1.8 }}
|
||||
>
|
||||
<CancelIcon color="error" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<LoadingButton
|
||||
id="upload-button"
|
||||
variant="outlined"
|
||||
startIcon={<UploadIcon />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={handleUpload}
|
||||
loading={importLoading}
|
||||
>
|
||||
Upload
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
)}
|
||||
{importResult && (
|
||||
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
|
||||
<Box sx={{ color: 'text.secondary' }}>
|
||||
Last Import Result Report :{' '}
|
||||
<a href={importResult.result_file?.url ?? '#'}>
|
||||
{importResult.result_file?.name ?? '-'}
|
||||
</a>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Dummy Default Data
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
|
||||
LaravelPaginatedDataDefault
|
||||
);
|
||||
|
||||
const loadDataTableData = async (appliedFilter: any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
const response = await axios.get('/customer-service/request?status=approved', { params: filter });
|
||||
// console.log(response.data);
|
||||
setDataTableLoading(false);
|
||||
|
||||
setDataTableData(response.data);
|
||||
};
|
||||
|
||||
const applyFilter = async (searchFilter: { search: string }) => {
|
||||
await loadDataTableData(searchFilter);
|
||||
setSearchParams(searchFilter);
|
||||
};
|
||||
|
||||
const handlePageChange = (event: ChangeEvent, value: number): void => {
|
||||
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
|
||||
loadDataTableData(filter);
|
||||
setSearchParams(filter);
|
||||
};
|
||||
|
||||
const handleApprove = (claimRequest) => {
|
||||
axios
|
||||
.post(`claim-requests/${claimRequest.id}/approve`)
|
||||
.then((response) => {
|
||||
enqueueSnackbar('Success Approve', { variant: 'success' });
|
||||
loadDataTableData();
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDataTableData();
|
||||
}, []);
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData(data: any): any {
|
||||
return {
|
||||
...data,
|
||||
};
|
||||
}
|
||||
|
||||
{
|
||||
/* ------------------ TABLE ROW ------------------ */
|
||||
}
|
||||
function Row(props: { row: ReturnType<typeof createData> }) {
|
||||
const { row } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [loadingApprove, setLoadingApprove] = React.useState(false);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
|
||||
{/* <TableCell>
|
||||
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
</TableCell> */ }
|
||||
<TableCell align="left">
|
||||
<Typography
|
||||
// onClick={() => {
|
||||
// handleShowClaim(row);
|
||||
// }}
|
||||
>
|
||||
{row.code}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.member?.full_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>
|
||||
<TableCell align="left">
|
||||
{ row.status == "requested" ?
|
||||
(<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status)}</Label>) :
|
||||
(<Label color='success'> {capitalizeFirstLetter(row.status)}</Label>)
|
||||
}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
|
||||
<EditOutlinedIcon />
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
|
||||
<FindInPageOutlinedIcon />
|
||||
Detail
|
||||
</MenuItem>
|
||||
</>
|
||||
} />
|
||||
</TableCell>
|
||||
{/* <TableCell>
|
||||
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
handleShowClaim(row);
|
||||
}}
|
||||
>
|
||||
<Iconify icon="eva:eye-fill" />
|
||||
</IconButton>
|
||||
</TableCell> */}
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box sx={{ borderBottom: 1 }}>
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
<Box>
|
||||
<Typography fontWeight={600}>Berkas Hasil Penunjang</Typography>
|
||||
{/* {row.files_by_type?.claim_kondisi &&
|
||||
row.files_by_type?.claim_kondisi.map((file, index) => (
|
||||
<Stack direction="row" key={index}>
|
||||
<Typography sx={{ marginRight: 2 }}>-</Typography>{' '}
|
||||
<a href={file.url} target="_blank">
|
||||
{file.name}
|
||||
</a>
|
||||
</Stack>
|
||||
))} */}
|
||||
|
||||
{row.files_by_type?.claim_kondisi && (
|
||||
<>
|
||||
<Typography fontWeight={600} sx={{ marginRight: 4 }}> - Kondisi</Typography>
|
||||
{row.files_by_type?.claim_kondisi.map((file, index) => (
|
||||
|
||||
<Stack direction="row" key={index}>
|
||||
<a href={file.url} target="_blank">
|
||||
{file.name}
|
||||
</a>
|
||||
</Stack>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{row.files_by_type?.claim_diagnosis && (
|
||||
<>
|
||||
<Typography fontWeight={600} sx={{ marginRight: 4 }}> - Diagnosa</Typography>
|
||||
{row.files_by_type?.claim_diagnosis.map((file, index) => (
|
||||
|
||||
<Stack direction="row" key={index}>
|
||||
<a href={file.url} target="_blank">
|
||||
{file.name}
|
||||
</a>
|
||||
</Stack>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{row.files_by_type?.claim_result && (
|
||||
<>
|
||||
<Typography fontWeight={600} sx={{ marginRight: 4 }}> - Hasil</Typography>
|
||||
{row.files_by_type?.claim_result.map((file, index) => (
|
||||
|
||||
<Stack direction="row" key={index}>
|
||||
<a href={file.url} target="_blank">
|
||||
{file.name}
|
||||
</a>
|
||||
</Stack>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{(!row.files_by_type?.claim_result && !row.files_by_type?.claim_diagnosis && !row.files_by_type?.claim_kondisi)&& <Typography>Tidak ada berkas</Typography>}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
{
|
||||
/* ------------------ END TABLE ROW ------------------ */
|
||||
}
|
||||
|
||||
function TableContent() {
|
||||
return (
|
||||
<Table aria-label="collapsible table">
|
||||
{/* ------------------ TABLE HEADER ------------------ */}
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{/* <TableCell style={headStyle} align="left" /> */}
|
||||
<TableCell style={headStyle} align="left">
|
||||
Code
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Date of Submission
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Service Type
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Claim Method
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Status
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="right"></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{/* ------------------ END TABLE HEADER ------------------ */}
|
||||
|
||||
{/* ------------------ TABLE ROW ------------------ */}
|
||||
{dataTableIsLoading ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
Loading
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : dataTableData.data.length === 0 ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
No Data
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map((row) => (
|
||||
<Row key={row.id} row={row} />
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
{/* ------------------ END TABLE ROW ------------------ */}
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// Dialog Detail Claim Request
|
||||
const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
|
||||
const [loadingClaimDetail, setLoadingClaimDetail] = useState(true);
|
||||
const [currentClaim, setCurrentClaim] = useState(null);
|
||||
|
||||
function handleShowClaim(claimRequest) {
|
||||
setLoadingClaimDetail(true);
|
||||
setOpenDialogDetailClaim(true);
|
||||
|
||||
axios
|
||||
.get(`/claim-requests/${claimRequest.id}`)
|
||||
.then(({ data }) => {
|
||||
setCurrentClaim(data.data);
|
||||
setLoadingClaimDetail(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
enqueueSnackbar(err.message, { variant: 'error' });
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadLog() {}
|
||||
|
||||
return (
|
||||
<Grid container>
|
||||
<Grid item sm={12}>
|
||||
<ImportForm />
|
||||
</Grid>
|
||||
|
||||
<Grid item sm={12}>
|
||||
<DataTable
|
||||
isLoading={dataTableIsLoading}
|
||||
lastRequest={0}
|
||||
data={dataTableData}
|
||||
handlePageChange={handlePageChange}
|
||||
TableContent={<TableContent />}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item sm={12}>
|
||||
<DialogDetailClaim
|
||||
openDialog={openDialogDetailClaim}
|
||||
setOpenDialog={setOpenDialogDetailClaim}
|
||||
title={{ name: 'Claim Request Detail' }}
|
||||
data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
|
||||
></DialogDetailClaim>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import axios from '@/utils/axios';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { MemberListType } from './Types';
|
||||
import { makeFormData } from '@/utils/jsonToFormData';
|
||||
|
||||
/**
|
||||
* Listing Member
|
||||
*/
|
||||
export const getMemberList = async ( page: number, keyword: string ): Promise<MemberListType[]> => {
|
||||
const response = await axios.get(`/claim-requests/list-member?page=${page}&keyword=${keyword}`)
|
||||
.then((res) =>{
|
||||
return res.data.data.member_list;
|
||||
})
|
||||
.catch((res) => {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
|
||||
return [];
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* Add Claim Request
|
||||
*/
|
||||
export const addClaimRequest = async ( data: MemberListType[] ): Promise<boolean> => {
|
||||
// Mapping
|
||||
const formData = new FormData();
|
||||
|
||||
data.map((row, index) => {
|
||||
formData.append(`member_id[${index}]`, row.id.toString());
|
||||
formData.append(`service_code[${index}]`, row.patien_type??'');
|
||||
|
||||
if (row.file_kondisi != undefined) {
|
||||
row.file_kondisi.forEach((file, file_index) => {
|
||||
console.log(file);
|
||||
|
||||
formData.append(`file_kondisi[member_${row.id}][${file_index}]`, file);
|
||||
});
|
||||
}
|
||||
|
||||
if (row.file_diagnosa != undefined) {
|
||||
row.file_diagnosa.forEach((file, file_index) => {
|
||||
console.log(file);
|
||||
|
||||
formData.append(`file_diagnosa[member_${row.id}][${file_index}]`, file);
|
||||
});
|
||||
}
|
||||
|
||||
if (row.file_penunjang != undefined) {
|
||||
row.file_penunjang.forEach((file, file_index) => {
|
||||
console.log(file);
|
||||
|
||||
formData.append(`file_penunjang[member_${row.id}][${file_index}]`, file);
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
// Axios
|
||||
const response = await axios.post(`/claim-requests`, formData)
|
||||
.then((res) =>{
|
||||
enqueueSnackbar("Berhasil membuat data !", {
|
||||
variant: 'success',
|
||||
});
|
||||
|
||||
return true;
|
||||
})
|
||||
.catch((res) => {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Search Type
|
||||
*/
|
||||
export type SearchType = {
|
||||
keyword: string,
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 ServiceType = {
|
||||
code : string
|
||||
name : string
|
||||
}
|
||||
Reference in New Issue
Block a user