Merge remote-tracking branch 'origin/staging' into origin/production
This commit is contained in:
Server D3 Linksehat
@@ -5,5 +5,6 @@ PORT=8083
|
||||
REACT_APP_HOST_API_URL="https://aso-api.linksehat.dev/api/client"
|
||||
|
||||
# VITE_API_URL="https://aso-api.linksehat.dev/api/client"
|
||||
VITE_API_URL="https://aso-api.linksehat.dev/api/client"
|
||||
# VITE_API_URL="https://aso-api.linksehat.dev/api/client"
|
||||
|
||||
VITE_API_URL="http://localhost:8000/api/client"
|
||||
116
frontend/client-portal/src/@types/claims.ts
Executable file
116
frontend/client-portal/src/@types/claims.ts
Executable file
@@ -0,0 +1,116 @@
|
||||
import { Benefit } from "./corporates";
|
||||
import { Member } from "./member";
|
||||
|
||||
export type ClaimRequest = {
|
||||
id: number;
|
||||
code: string;
|
||||
name: string;
|
||||
submission_date: string;
|
||||
payment_type: string;
|
||||
service_code: string;
|
||||
claim_method: string;
|
||||
service_type: string;
|
||||
service_name: string;
|
||||
code_provider: string;
|
||||
file_condition: Files;
|
||||
member: Member;
|
||||
claim: {
|
||||
organization: Organizations
|
||||
}
|
||||
provider_code: string,
|
||||
organization: {
|
||||
code: string
|
||||
}
|
||||
};
|
||||
|
||||
export type Claims = {
|
||||
id: number;
|
||||
code: string;
|
||||
plan: Plan;
|
||||
payor_id: string;
|
||||
corporate_id: string;
|
||||
policy_number: string;
|
||||
benefit_desc: string;
|
||||
member: Member;
|
||||
benefit: Benefit | boolean;
|
||||
status: string;
|
||||
claim_request: ClaimRequest;
|
||||
};
|
||||
|
||||
export type ClaimsEdit = {
|
||||
id: number;
|
||||
plan_id: string;
|
||||
payor_id: string;
|
||||
corporate_id: string;
|
||||
policy_number: string;
|
||||
member_id: string;
|
||||
benefit_code: string;
|
||||
benefit_desc: string;
|
||||
amount_incurred: number;
|
||||
amount_approved: number;
|
||||
amount_not_approved: number;
|
||||
excess_paid: number;
|
||||
}
|
||||
|
||||
export type Files = {
|
||||
name: string;
|
||||
url: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
export type Plan = {
|
||||
code: string;
|
||||
}
|
||||
|
||||
export type ClaimHistoryCare = {
|
||||
id: number;
|
||||
claim_id: number;
|
||||
service_code: string;
|
||||
admission_date: string;
|
||||
discharge_date: string;
|
||||
main_diagnosis_id: number;
|
||||
main_diagnosis_name: string;
|
||||
medical_record_number: string;
|
||||
organization_id: number;
|
||||
practitioner_id: number;
|
||||
organization_name: string;
|
||||
practitioner_name: string;
|
||||
secondary_diagnosis_id: number[];
|
||||
sign: string;
|
||||
symptoms: string;
|
||||
name: any;
|
||||
}
|
||||
|
||||
export type Organizations = {
|
||||
id: number;
|
||||
code: string;
|
||||
name: string;
|
||||
address: string;
|
||||
type: string;
|
||||
lat: string;
|
||||
lng: string;
|
||||
phone: string;
|
||||
timezone: string;
|
||||
active: boolean | number;
|
||||
province_id: number;
|
||||
city_id: number;
|
||||
district_id: number;
|
||||
village_id: number;
|
||||
postal_code: string;
|
||||
description: string;
|
||||
technology: string;
|
||||
support_services: string;
|
||||
merchant_code: string;
|
||||
merchant_key: string;
|
||||
image_url: string;
|
||||
region_groups: string;
|
||||
};
|
||||
|
||||
export type Import = {
|
||||
result_file: {
|
||||
url: string,
|
||||
name: string,
|
||||
total_success_row: number,
|
||||
total_failed_row: number
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,457 @@
|
||||
/**
|
||||
* Core
|
||||
* ============================================
|
||||
*/
|
||||
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
|
||||
import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Stack, TextField, Button, Menu, Typography, ButtonGroup, } from "@mui/material";
|
||||
|
||||
/**
|
||||
* Types & Functions
|
||||
* ============================================
|
||||
*/
|
||||
import { getDailyMonitoringList } from "../Model/Functions";
|
||||
import { DailyMonitoringListType } from "../Model/Types";
|
||||
import DailyMonitoringListRow from "./DailyMonitoringListRow";
|
||||
import { LaravelPaginatedData, LaravelPaginatedDataDefault } from "../../../@types/paginated-data";
|
||||
import { Grid } from "@mui/material";
|
||||
import DataTable from '../../../components/LaravelTable';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import { MenuItem } from "@mui/material";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import axios from "../../../utils/axios";
|
||||
import { DesktopDatePicker, LocalizationProvider } from "@mui/x-date-pickers";
|
||||
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
|
||||
import { fDate } from "../../../utils/formatTime";
|
||||
import { LoadingButton } from "@mui/lab";
|
||||
import { Import } from "../../../@types/claims";
|
||||
import { HeadCell, Order } from '../../../@types/table';
|
||||
import { fDateOnly } from "../../../utils/formatTime";
|
||||
|
||||
export default function DailyMonitoringList() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
// State
|
||||
// --------------------
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState<boolean>(true);
|
||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
|
||||
LaravelPaginatedDataDefault
|
||||
);
|
||||
|
||||
// Tabel Style
|
||||
// --------------------
|
||||
const TableHeadStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
|
||||
const [importResult, setImportResult] = useState<Import>(null);
|
||||
// Load Data
|
||||
// -------------------
|
||||
const loadDataTableData = async (appliedFilter: any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
|
||||
const response = await axios.get('/memberlist', {params: filter})
|
||||
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);
|
||||
};
|
||||
|
||||
|
||||
/* ------------------------------ handle params ----------------------------- */
|
||||
const [appliedParams, setAppliedParams] = useState({});
|
||||
|
||||
const params = {
|
||||
searchParams: searchParams,
|
||||
setSearchParams: setSearchParams,
|
||||
appliedParams: appliedParams,
|
||||
setAppliedParams: setAppliedParams,
|
||||
};
|
||||
|
||||
/* ------------------------------ handle order ------------------------------ */
|
||||
const [order, setOrder] = useState<Order>('desc');
|
||||
const [orderBy, setOrderBy] = useState('submission_date');
|
||||
|
||||
const orders = {
|
||||
order: order,
|
||||
setOrder: setOrder,
|
||||
orderBy: orderBy,
|
||||
setOrderBy: setOrderBy,
|
||||
};
|
||||
|
||||
/* ------------------------------- handle sort ------------------------------ */
|
||||
const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
|
||||
const isAsc = orders?.orderBy === property && orders?.order === 'asc';
|
||||
|
||||
orders?.setOrder(isAsc ? 'desc' : 'asc');
|
||||
orders?.setOrderBy(property);
|
||||
const parameters = Object.fromEntries([
|
||||
...(params?.searchParams.entries() as IterableIterator<[string, string]>),
|
||||
['order', isAsc ? 'desc' : 'asc'],
|
||||
['orderBy', property],
|
||||
]);
|
||||
params?.setAppliedParams(parameters);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDataTableData();
|
||||
}, [appliedParams, searchParams, order, orderBy, setSearchParams])
|
||||
|
||||
function SearchInput(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
// Start Date
|
||||
// con
|
||||
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? '';
|
||||
setSearchText(newSearchText);
|
||||
};
|
||||
|
||||
|
||||
const today = new Date(); // Default ke hari ini
|
||||
|
||||
const [startDate, setStartDate] = useState<Date | null>(today);
|
||||
const [endDate, setEndDate] = useState<Date | null>(today);
|
||||
|
||||
useEffect(() => {
|
||||
// Set nilai default saat pertama kali load jika searchParams kosong
|
||||
const paramStartDate = searchParams.get('start_date');
|
||||
const paramEndDate = searchParams.get('end_date');
|
||||
|
||||
if (paramStartDate) {
|
||||
setStartDate(new Date(paramStartDate));
|
||||
}
|
||||
if (paramEndDate) {
|
||||
setEndDate(new Date(paramEndDate));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger First Search
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form style={{ width: '100%' }}>
|
||||
<Grid container spacing={2} >
|
||||
<Grid item md={8}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
// handleSearchSubmit(event);
|
||||
|
||||
const filter = Object.fromEntries([
|
||||
...searchParams.entries(),
|
||||
['search', searchText],
|
||||
]);
|
||||
setSearchParams(filter);
|
||||
loadDataTableData(filter);
|
||||
}
|
||||
}}
|
||||
value={searchText}
|
||||
placeholder='Search Code or Name...'
|
||||
/>
|
||||
</Grid>
|
||||
{/* Start Date */}
|
||||
<Grid item md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
label="Start Date"
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={startDate}
|
||||
onChange={(value) => {
|
||||
if (value) {
|
||||
setStartDate(value);
|
||||
const dateStr = fDateOnly(value);
|
||||
const filter = Object.fromEntries([...searchParams.entries(), ['start_date', dateStr]]);
|
||||
setSearchParams(filter);
|
||||
loadDataTableData(filter);
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} variant="outlined" />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
|
||||
{/* End Date */}
|
||||
<Grid item md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
label="End Date"
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={endDate}
|
||||
onChange={(value) => {
|
||||
if (value) {
|
||||
setEndDate(value);
|
||||
const dateStr = fDateOnly(value);
|
||||
const filter = Object.fromEntries([...searchParams.entries(), ['end_date', dateStr]]);
|
||||
setSearchParams(filter);
|
||||
loadDataTableData(filter);
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} variant="outlined" />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</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(`customer-service/request/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) => {
|
||||
|
||||
}
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
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} />
|
||||
<Menu
|
||||
id="import-button"
|
||||
anchorEl={anchorEl}
|
||||
open={createMenu}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleImportButton}>
|
||||
<Typography variant='body2'>Import</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleGetTemplate('member');
|
||||
}}
|
||||
>
|
||||
<Typography variant='body2'> Download Template</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate(`/daily-monitoring/add_monitoring`)}>
|
||||
<Typography variant='body2'>Tambah</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</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 :{' '}
|
||||
<Box sx={{ color: 'success.main', display: 'inline' }}>
|
||||
{importResult.total_success_row ?? 0}
|
||||
</Box>{' '}
|
||||
Row Processed,{' '}
|
||||
<Box sx={{ color: 'error.main', display: 'inline' }}>
|
||||
{importResult.total_failed_row}
|
||||
</Box>{' '}
|
||||
Failed, Report :{' '}
|
||||
<a href={importResult.result_file?.url ?? '#'}>
|
||||
{importResult.result_file?.name ?? '-'}
|
||||
</a>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TableContent(){
|
||||
return (
|
||||
<Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
|
||||
{/* Head Table */}
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell style={TableHeadStyle} align="left" width={50} />
|
||||
<TableCell style={TableHeadStyle} align="left" width={160}>Code</TableCell>
|
||||
<TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
|
||||
<TableCell style={TableHeadStyle} align="left" width={150}>Member ID</TableCell>
|
||||
<TableCell style={TableHeadStyle} align="left" width={'*'}>Name</TableCell>
|
||||
<TableCell style={TableHeadStyle} align="left" width={160}>Tanggal Lahir</TableCell>
|
||||
<TableCell style={TableHeadStyle} align="left" width={160}>Member Type</TableCell>
|
||||
<TableCell style={TableHeadStyle} align="left" width={160}>Medical Plan</TableCell>
|
||||
<TableCell style={TableHeadStyle} align="left" width={160}>Non Medical Plan</TableCell>
|
||||
<TableCell align="left" width={"10"} />
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
{/* Body Table */}
|
||||
{dataTableIsLoading ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} align="center">Loading</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : dataTableData.data.length == 0 ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} align="center">No Data</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : dataTableData.data && dataTableData.data.length > 0 ? (
|
||||
<TableBody>
|
||||
{dataTableData.data.map((row: DailyMonitoringListType, index) => (
|
||||
<DailyMonitoringListRow key={index} number={index+1} row={row} />
|
||||
))}
|
||||
</TableBody>
|
||||
) : null}
|
||||
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid container>
|
||||
<Grid item sm={12}>
|
||||
<ImportForm />
|
||||
</Grid>
|
||||
|
||||
<Grid item sm={12} marginTop={2}>
|
||||
<DataTable
|
||||
isLoading={dataTableIsLoading}
|
||||
lastRequest={0}
|
||||
data={dataTableData}
|
||||
handlePageChange={handlePageChange}
|
||||
TableContent={<TableContent />}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Core
|
||||
* ============================================
|
||||
*/
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import { Box, Collapse, MenuItem, TableCell, TableRow, Stack } from "@mui/material";
|
||||
import Visibility from '@mui/icons-material/Visibility';
|
||||
|
||||
/**
|
||||
* Component
|
||||
* ============================================
|
||||
*/
|
||||
// - Global -
|
||||
import Label from "../../../components/Label";
|
||||
import TableMoreMenu from '../../../components/table/TableMoreMenu';
|
||||
|
||||
/**
|
||||
* Utils, Types, Functions
|
||||
* ============================================
|
||||
*/
|
||||
import { fDate } from "../../../utils/formatTime";
|
||||
import { DailyMonitoringListType } from "../Model/Types";
|
||||
import { Edit } from "@mui/icons-material";
|
||||
|
||||
type Props = {
|
||||
row: DailyMonitoringListType,
|
||||
number: number
|
||||
}
|
||||
|
||||
export default function DailyMonitoringListRow ({ ...props }: Props) {
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
<TableRow hover sx={{ '& > td': { borderBottom: '1' } }}>
|
||||
<TableCell align="left" />
|
||||
<TableCell align="left">{props.row.code}</TableCell>
|
||||
<TableCell align="left">
|
||||
<Label
|
||||
variant="ghost"
|
||||
color="default"
|
||||
>
|
||||
{props.row.addmision_date ? fDate(props.row.addmision_date) : '-'}
|
||||
</Label>
|
||||
</TableCell>
|
||||
<TableCell align="left">{props.row.member_id}</TableCell>
|
||||
<TableCell align="left">{props.row.name}</TableCell>
|
||||
<TableCell align="left">
|
||||
<Label
|
||||
variant="ghost"
|
||||
color="default"
|
||||
>
|
||||
{props.row.birth_date ? fDate(props.row.birth_date) : '-'}
|
||||
</Label>
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
{props.row.member_type}
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
{props.row.medical_plan}
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
{props.row.non_medical_plan}
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="right" onClick={(e) => e.stopPropagation()}>
|
||||
<Stack direction="row" justifyContent="flex-end" spacing={1}>
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => navigate(`/daily-monitoring/${props.row.member_id}/claims/${props.row.code}/list_monitoring`)}>
|
||||
<Visibility />
|
||||
View
|
||||
</MenuItem>
|
||||
</>
|
||||
} />
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,526 @@
|
||||
/**
|
||||
* Core
|
||||
* ============================================
|
||||
*/
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useFieldArray, useForm } from 'react-hook-form';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { Box, IconButton, Typography, Grid, Card, List, ListItem, Stack, Autocomplete, TextField, Button } from '@mui/material';
|
||||
import { LoadingButton } from "@mui/lab";
|
||||
|
||||
/**
|
||||
* Components
|
||||
* ============================================
|
||||
*/
|
||||
// - Global -
|
||||
import Page from '../../../components/Page';
|
||||
import Label from "../../../components/Label";
|
||||
|
||||
/**
|
||||
* Icon
|
||||
* ============================================
|
||||
*/
|
||||
import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
|
||||
import FiberManualRecord from '@mui/icons-material/FiberManualRecord';
|
||||
|
||||
/**
|
||||
* Utils, Types, Functions
|
||||
* ============================================
|
||||
*/
|
||||
import { fDate, fDateOnly } from '../../../utils/formatTime';
|
||||
import { getMonitoringDetailList } from '../Model/Functions';
|
||||
import { getOrganizationId } from '../Model/Functions';
|
||||
import { DetailMonitoringListType } from '../Model/Types';
|
||||
import TableMoreMenu from '../../../components/table/TableMoreMenu';
|
||||
import { MenuItem } from '@mui/material';
|
||||
import { Delete, DeleteForever, Edit, LoopOutlined } from '@mui/icons-material';
|
||||
import MuiDialog from '../../../components/MuiDialog';
|
||||
import { DialogActions } from '@mui/material';
|
||||
import axios from '../../../utils/axios';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { escape } from 'lodash';
|
||||
|
||||
|
||||
export default function DetailMonitoringList() {
|
||||
const { member_id, claim_code } = useParams();
|
||||
const navigate = useNavigate()
|
||||
const pageTitle = claim_code??'_ _ _ _';
|
||||
|
||||
// State
|
||||
// --------------------
|
||||
const [detailMonitoringList, setDetailMonitoringList] = useState<DetailMonitoringListType[]>();
|
||||
const [organizationId, setOrganizationId] = useState<number|undefined>();
|
||||
|
||||
const [openDialog, setOpenDialog] = useState<boolean>(false)
|
||||
|
||||
// Use Effect
|
||||
// --------------------
|
||||
useEffect(() => {
|
||||
loadDataTableData();
|
||||
}, [])
|
||||
|
||||
// Dialog
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
const [selectedReason, setSelectedReason] = useState({value:'-', label:''});
|
||||
const reason = [
|
||||
{ value: 'Wrong Setting', label: 'Wrong Setting' },
|
||||
{ value: 'Hospital Request', label: 'Hospital Request' }
|
||||
];
|
||||
const [error, setError] = useState('');
|
||||
const [id, setId] = useState<null|number>(null);
|
||||
const [id_file, setIdFile] = useState<null|number>(null);
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialog(false);
|
||||
}
|
||||
const handleDelete = () => {
|
||||
if(selectedReason.value != '-'){
|
||||
const parameters = {
|
||||
'reason' : selectedReason.value
|
||||
}
|
||||
if (id){
|
||||
const response = axios.get(`case_management/daily-monitoring/detail/${id}/delete`, {
|
||||
params: { ...parameters },
|
||||
});
|
||||
|
||||
if (!response.error){
|
||||
enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
|
||||
window.location.reload();
|
||||
setOpenDialog(false)
|
||||
} else {
|
||||
enqueueSnackbar('Claim Request Updated Error!', { variant: 'error' });
|
||||
}
|
||||
|
||||
} else {
|
||||
axios.get(`case_management/daily-monitoring/detail/${id_file}/delete-file`, {
|
||||
params: { ...parameters },
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.error) {
|
||||
enqueueSnackbar('File Successfully deleted!', { variant: 'success' });
|
||||
window.location.reload();
|
||||
setOpenDialog(false);
|
||||
} else {
|
||||
enqueueSnackbar('Deleted File Error!', { variant: 'error' });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
setError('Please select a reason')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleEdit = (id:number|undefined) => {
|
||||
navigate(`/case_management/daily-monitoring/${member_id}/claims/${claim_code}/${id}`)
|
||||
}
|
||||
|
||||
const getContent = () => (
|
||||
<Stack spacing={1} marginTop={2}>
|
||||
<Typography variant="subtitle2">Are you sure to delete this {id_file ? 'File ' : '' } Daily Monitoring ?</Typography>
|
||||
<Grid item xs={12} md={12} marginTop={4}>
|
||||
<Card sx={{padding:2, marginTop:2}} >
|
||||
<Typography variant="subtitle1" marginY={2}>Reason for Delete*</Typography>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Autocomplete
|
||||
options={reason}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={selectedReason}
|
||||
onChange={(event, newValue) => {
|
||||
setSelectedReason(newValue);
|
||||
// Validasi jika newValue adalah null
|
||||
if (!newValue) {
|
||||
setError('Please select a reason');
|
||||
} else {
|
||||
setError('');
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Reason for Delete"
|
||||
variant="outlined"
|
||||
name='reason'
|
||||
error={Boolean(error)} // Menampilkan error jika ada
|
||||
helperText={error} // Menampilkan pesan kesalahan
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
|
||||
<Button color="primary" variant="contained" onClick={() => handleDelete()}>Delete</Button>
|
||||
</DialogActions>
|
||||
</Stack>
|
||||
)
|
||||
|
||||
|
||||
// Load Data
|
||||
// -------------------
|
||||
const loadDataTableData = async () => {
|
||||
const response = await getMonitoringDetailList(claim_code??'');
|
||||
const organization_id = await getOrganizationId(claim_code??'');
|
||||
|
||||
setDetailMonitoringList(response);
|
||||
setOrganizationId(organization_id);
|
||||
}
|
||||
|
||||
function renderHTML(data: string) {
|
||||
return (
|
||||
<div style={{ marginLeft: 20 }}
|
||||
dangerouslySetInnerHTML={{ __html: data }} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title={pageTitle} sx={{ px: 2 }}>
|
||||
<Grid container gap={6}>
|
||||
{/* back button */}
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<IconButton size='large' color='inherit' onClick={() => navigate(`/daily-monitoring`)} >
|
||||
<ArrowBackIosNew/>
|
||||
</IconButton>
|
||||
|
||||
<Typography variant="h5" sx={{ marginLeft: '24px' }}>
|
||||
{pageTitle}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* tabel claims */}
|
||||
<Grid item xs={12}>
|
||||
<Grid container gap={4} sx={{ px: 2 }}>
|
||||
{
|
||||
detailMonitoringList?.map((row, index) => {
|
||||
return (
|
||||
<Grid key={index} item xs={12}>
|
||||
<Card sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '30px', py: '24px'}}>
|
||||
{/* card header */}
|
||||
<Box
|
||||
sx={{
|
||||
pb: '20px',
|
||||
mb: '20px',
|
||||
borderBottom: '1px solid rgba(0,0,0,0.125)',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Label variant="ghost" color="default">
|
||||
{row.submission_date ? fDate(row.submission_date) : '-'}
|
||||
</Label>
|
||||
|
||||
{row.discharge_date ? (
|
||||
<Label
|
||||
variant="ghost"
|
||||
color="success"
|
||||
sx={{ position: 'absolute', top: 0, right: 0 }}
|
||||
>
|
||||
Close Monitoring
|
||||
</Label>
|
||||
) : (
|
||||
<Label
|
||||
variant="ghost"
|
||||
color="warning"
|
||||
sx={{ position: 'absolute', top: 0, right: 0 }}
|
||||
>
|
||||
On Monitoring
|
||||
</Label>
|
||||
)}
|
||||
</Box>
|
||||
{/* card body */}
|
||||
<Grid container gap={4}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container gap={1}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Subject :
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
{renderHTML(row.subject)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container gap={1}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Object :
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} paddingY={2}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
{renderHTML(row.object)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
Body Temperature
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2">
|
||||
{row.body_temperature} Cel
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
Sistole
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2">
|
||||
{row.sistole} mm[Hg]
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
Diastole
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2">
|
||||
{row.diastole} mm[Hg]
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
Respiration Rate
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2">
|
||||
{row.respiration_rate} / min
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container gap={1}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Analysis :
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
{renderHTML(row.analysis)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container gap={1}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Medical Plan :
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<List sx={{ color: 'GrayText' }}>
|
||||
{
|
||||
row.medical_plan?.map((data, index) => {
|
||||
return (
|
||||
<ListItem key={index}>
|
||||
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {renderHTML(data.medical_plan_str)}
|
||||
</ListItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
</List>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container gap={1}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Non Medikamentosa Plan :
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<List sx={{ color: 'GrayText' }}>
|
||||
{
|
||||
row.non_medikamentosa_plan?.map((data, index) => {
|
||||
return (
|
||||
<ListItem key={index}>
|
||||
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {renderHTML(data.non_medikamentosa_plan_str)}
|
||||
</ListItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
</List>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container gap={1}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Laboratorium Result :
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Date
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
{ row.lab_date != null ? fDate(row.lab_date) : '-'}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Location
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
{row.provider != null ? row.provider : '-' }
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Examination
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2" color={"GrayText"}>
|
||||
{row.examination != null ? renderHTML(row.examination) : '-' }
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Document Confirmation Medical Letter:
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<List>
|
||||
{row.document?.map((data, index) => (
|
||||
data.type === 'confirmation-medical-letter' ? (
|
||||
<ListItem key={index} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
|
||||
<a
|
||||
href={data.path}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{data.file_name}
|
||||
</a>
|
||||
</div>
|
||||
</ListItem>
|
||||
) : null
|
||||
))}
|
||||
</List>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Document Medical Action Letter:
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<List>
|
||||
{row.document?.map((data, index) => (
|
||||
data.type === 'medical-action-letter' ? (
|
||||
<ListItem key={index} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
|
||||
<a
|
||||
href={data.path}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{data.file_name}
|
||||
</a>
|
||||
</div>
|
||||
</ListItem>
|
||||
) : null
|
||||
))}
|
||||
</List>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
|
||||
Document Examination Result:
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<List>
|
||||
{row.document?.map((data, index) => (
|
||||
data.type === 'laboratorium-result' ? (
|
||||
<ListItem key={index} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
|
||||
<a
|
||||
href={data.path}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{data.file_name}
|
||||
</a>
|
||||
</div>
|
||||
</ListItem>
|
||||
) : null
|
||||
))}
|
||||
</List>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
|
||||
|
||||
</Grid>
|
||||
</Card>
|
||||
</Grid>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Dialog Delete */}
|
||||
<MuiDialog
|
||||
title={{name: id_file ? "Delete File Daily Monitoring" : "Delete Daily Monitoring"}}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
maxWidth="xs"
|
||||
/>
|
||||
</Grid>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
178
frontend/client-portal/src/pages/DailyMonitoring/Model/Functions.ts
Executable file
178
frontend/client-portal/src/pages/DailyMonitoring/Model/Functions.ts
Executable file
@@ -0,0 +1,178 @@
|
||||
import axios from '../../../utils/axios';
|
||||
import { makeFormData } from '../../../utils/jsonToFormData';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { DailyMonitoringListType, DetailMonitoringListType, ResponseListingClaimType } from "./Types";
|
||||
import { fDate, fDateOnly } from '../../../utils/formatTime';
|
||||
|
||||
/**
|
||||
* Listing Daily Monitoring
|
||||
*/
|
||||
export const getDailyMonitoringList = async ( param: any) => {
|
||||
const response = await axios.get('/case_management/memberlist', {params: param})
|
||||
.then((res) =>{
|
||||
return res.data;
|
||||
})
|
||||
.catch((res) => {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
|
||||
return [];
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* Listing Claim
|
||||
*/
|
||||
export const getClaimList = async ( member_id: string ): Promise<ResponseListingClaimType> => {
|
||||
const response = await axios.get(`/case_management/claimlist/${member_id}`)
|
||||
.then((res) =>{
|
||||
return res.data.data;
|
||||
})
|
||||
.catch((res) => {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* Add Monitoring Detail
|
||||
*/
|
||||
export const AddMonitoringDetail = async ( claim_code: string,data: DetailMonitoringListType ): Promise<boolean> => {
|
||||
data.lab_date = data.lab_date != '' && data.lab_date != null ? fDateOnly(data.lab_date) : '';
|
||||
data.submission_date = data.submission_date != '' && data.submission_date != null ? fDateOnly(data.submission_date) : '';
|
||||
|
||||
const formData = makeFormData({...data});
|
||||
|
||||
const response = await axios.post(`/daily_monitoring/add-request`, formData)
|
||||
.then((res) =>{
|
||||
enqueueSnackbar(res.data.message, {
|
||||
variant: 'success',
|
||||
});
|
||||
|
||||
return true;
|
||||
})
|
||||
.catch((res) => {
|
||||
if (res.response.status == 400) {
|
||||
let arr_message = res.response.data.message;
|
||||
|
||||
for (const key in arr_message) {
|
||||
enqueueSnackbar(arr_message[key][0], {
|
||||
variant: 'warning',
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get Monitoring Detail List
|
||||
*/
|
||||
export const getMonitoringDetailList = async ( claim_code: string ): Promise<DetailMonitoringListType[]> => {
|
||||
const response = await axios.get(`/daily_monitoring/detail/${claim_code}/list`)
|
||||
.then((res) =>{
|
||||
return res.data.data.detail_list;
|
||||
})
|
||||
.catch((res) => {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
|
||||
return [];
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get Monitoring Detail List
|
||||
*/
|
||||
export const getOrganizationId = async ( claim_code: string ): Promise<number> => {
|
||||
const response = await axios.get(`/daily_monitoring/detail/${claim_code}/list`)
|
||||
.then((res) =>{
|
||||
return res.data.data.organization_id;
|
||||
})
|
||||
.catch((res) => {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
|
||||
return [];
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get detail monitoring
|
||||
*/
|
||||
export const getMonitoringDetailById = async ( id: string) => {
|
||||
const response = await axios.get(`/daily_monitoring/detail/${id}/edit`)
|
||||
.then((res) =>{
|
||||
return res.data.data;
|
||||
})
|
||||
.catch((res) => {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
|
||||
return [];
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update detail monitoring
|
||||
*/
|
||||
export const UpdateMonitoringDetail = async (data: DetailMonitoringListType) => {
|
||||
data.lab_date = data.lab_date != '' && data.lab_date != null ? fDateOnly(data.lab_date) : '';
|
||||
data.submission_date = data.submission_date != '' && data.submission_date != null ? fDateOnly(data.submission_date) : '';
|
||||
|
||||
const formData = makeFormData({...data});
|
||||
|
||||
const response = await axios.post(`/daily_monitoring/detail/update-request`, formData)
|
||||
.then((res) =>{
|
||||
enqueueSnackbar(res.data.message, {
|
||||
variant: 'success',
|
||||
});
|
||||
|
||||
return true;
|
||||
})
|
||||
.catch((res) => {
|
||||
if (res.response.status == 400) {
|
||||
let arr_message = res.response.data.message;
|
||||
|
||||
for (const key in arr_message) {
|
||||
enqueueSnackbar(arr_message[key][0], {
|
||||
variant: 'warning',
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
enqueueSnackbar("server error !", {
|
||||
variant: 'error',
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
120
frontend/client-portal/src/pages/DailyMonitoring/Model/Types.ts
Executable file
120
frontend/client-portal/src/pages/DailyMonitoring/Model/Types.ts
Executable file
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* List Daily Monitoring
|
||||
*/
|
||||
export type DailyMonitoringListType = {
|
||||
member_id : string,
|
||||
member_type : string,
|
||||
birth_date : string,
|
||||
name : string,
|
||||
start_date : string,
|
||||
end_date : string,
|
||||
description : string,
|
||||
doctor_1 : string,
|
||||
doctor_2 : string,
|
||||
temp_diagnosis : string,
|
||||
final_diagnosis : string,
|
||||
approval_pendamping : string,
|
||||
note : string,
|
||||
addmision_date : string,
|
||||
provider : string,
|
||||
organization_id : number,
|
||||
medical_plan : string,
|
||||
non_medical_plan : string,
|
||||
}
|
||||
|
||||
/**
|
||||
* Response Listing Claim
|
||||
*/
|
||||
export type ResponseListingClaimType = {
|
||||
member_detail : MemberDetailType,
|
||||
claim_list : ClaimListType[],
|
||||
}
|
||||
|
||||
/**
|
||||
* Member Detail
|
||||
*/
|
||||
export type MemberDetailType = {
|
||||
id : string,
|
||||
member_id : string,
|
||||
name : string,
|
||||
}
|
||||
|
||||
/**
|
||||
* List Claim
|
||||
*/
|
||||
export type ClaimListType = {
|
||||
claim_id : number,
|
||||
admission_date : string,
|
||||
discharge_date : string,
|
||||
claim_code : string,
|
||||
name : string,
|
||||
code : string,
|
||||
service_name : string,
|
||||
claim_status : string,
|
||||
service_type : string,
|
||||
member_id : string
|
||||
}
|
||||
|
||||
/**
|
||||
* Detail Monitoring List
|
||||
*/
|
||||
export type DetailMonitoringListType = {
|
||||
id : number|null,
|
||||
claim_id : string|null,
|
||||
log_code : string|null,
|
||||
request_log_id : string|null,
|
||||
claim_code : string|undefined,
|
||||
doctor_1 : string|undefined,
|
||||
doctor_2 : string|undefined,
|
||||
temp_diagnosis : string|undefined,
|
||||
final_diagnosis : string|undefined,
|
||||
approval_pendamping : string|undefined,
|
||||
keterangan : string|undefined,
|
||||
catatan : string|undefined,
|
||||
description : string|undefined,
|
||||
note : string|undefined,
|
||||
subject : string|undefined,
|
||||
object : string|undefined,
|
||||
objective : string|undefined,
|
||||
body_temperature: string|undefined,
|
||||
respiration_rate: string|undefined,
|
||||
sistole : string|undefined,
|
||||
diastole : string|undefined
|
||||
analysis : string|undefined,
|
||||
complaints : string|undefined,
|
||||
submission_date : string|undefined,
|
||||
discharge_date : string|undefined,
|
||||
lab_date : string|undefined,
|
||||
provider : string|undefined,
|
||||
examination : string|undefined,
|
||||
reason : string|undefined,
|
||||
medical_plan : MedicalPlanStrType[],
|
||||
non_medikamentosa_plan : NonMedikamentosaPlanType[],
|
||||
confirmation_medical_leter : files[],
|
||||
medical_action_letter : files[],
|
||||
result : files[],
|
||||
document : document[],
|
||||
created_at : string|null
|
||||
data : {
|
||||
organization_id : number
|
||||
}
|
||||
}
|
||||
|
||||
export type MedicalPlanStrType = {
|
||||
medical_plan_str: string
|
||||
}
|
||||
|
||||
export type NonMedikamentosaPlanType = {
|
||||
non_medikamentosa_plan_str: string
|
||||
}
|
||||
|
||||
export type files = {
|
||||
file: string
|
||||
}
|
||||
|
||||
export type document = {
|
||||
id: number
|
||||
file_name: string,
|
||||
path: string,
|
||||
type: string
|
||||
}
|
||||
48
frontend/client-portal/src/pages/DailyMonitoring/index.tsx
Executable file
48
frontend/client-portal/src/pages/DailyMonitoring/index.tsx
Executable file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Core
|
||||
* ============================================
|
||||
*/
|
||||
import { Box, Grid } from '@mui/material';
|
||||
|
||||
/**
|
||||
* Components
|
||||
* ============================================
|
||||
*/
|
||||
// - Global -
|
||||
import Page from '../../components/Page';
|
||||
import HeaderBreadcrumbs from "../../components/HeaderBreadcrumbs";
|
||||
// - Local -
|
||||
import DailyMonitoringList from './Components/DailyMonitoringList';
|
||||
|
||||
export default function DailyMonitoring() {
|
||||
const pageTitle = "Daily Monitoring";
|
||||
|
||||
return (
|
||||
<Page title={ pageTitle } sx={{ px: 2 }}>
|
||||
<Grid container>
|
||||
{/* page header */}
|
||||
<Grid item xs={12}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={ pageTitle }
|
||||
sx={{ px: 1 }}
|
||||
links={[
|
||||
{
|
||||
name: 'Dashboard',
|
||||
href: '/dashboard',
|
||||
},
|
||||
{
|
||||
name: pageTitle,
|
||||
href: '/daily_monitoring',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
{/* tabel daily monitoring */}
|
||||
<Grid item xs={12}>
|
||||
<DailyMonitoringList />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -117,7 +117,26 @@ export default function Router() {
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: '/daily-monitoring',
|
||||
element: (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<DashboardLayout />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
element: <DailyMonitoring />,
|
||||
index: true,
|
||||
},
|
||||
{
|
||||
path: ':member_id/claims/:claim_code/list_monitoring',
|
||||
element: <DetailMonitoringList />
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/claim-submit',
|
||||
element: (
|
||||
@@ -463,3 +482,7 @@ const UserRole = Loadable(lazy(() => import('../pages/UserManagement/UserRole/In
|
||||
const UserRoleCreate = Loadable(lazy(() => import('../pages/UserManagement/UserRole/CreateUpdate')));
|
||||
const UserAccess = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/Index')));
|
||||
const UserAccessCreate = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/CreateUpdate')));
|
||||
|
||||
// Daily Monitoring
|
||||
const DailyMonitoring = Loadable(lazy(() => import('../pages/DailyMonitoring/index')))
|
||||
const DetailMonitoringList = Loadable(lazy(() => import('../pages/DailyMonitoring/Components/DetailMonitoringList')))
|
||||
@@ -37,6 +37,10 @@ export function fPostFormat(date: Date | string | number, dateFormat = 'yyyy-MM-
|
||||
return format(new Date(date), dateFormat);
|
||||
}
|
||||
|
||||
export function fDateOnly(date: Date | string | number) {
|
||||
return format(new Date(date), 'yyyy-MM-dd');
|
||||
}
|
||||
|
||||
// export function fDateString(date) {
|
||||
// const dateObj = parseISO(date);
|
||||
// const formattedDate = format(dateObj, 'dd MMMM yyyy');
|
||||
|
||||
@@ -1,66 +1,557 @@
|
||||
// @mui
|
||||
import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
styled,
|
||||
Typography,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Paper,
|
||||
Card,
|
||||
TextField,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Checkbox,
|
||||
|
||||
} from '@mui/material';
|
||||
// hooks
|
||||
import useSettings from '../hooks/useSettings';
|
||||
// components
|
||||
import { PieChart, Pie, Cell, Tooltip, BarChart, Bar, XAxis, YAxis, Legend, ResponsiveContainer } from 'recharts';
|
||||
import Page from '../components/Page';
|
||||
import axios from '../utils/axios';
|
||||
import useAuth from '../hooks/useAuth';
|
||||
import SomethingUsage from '../sections/dashboard/SomethingUsage';
|
||||
import { fCurrency } from '../utils/formatNumber';
|
||||
import dayjs from "dayjs";
|
||||
import {DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { green, red } from "@mui/material/colors";
|
||||
import MuiDialog from '@/components/MuiDialog';
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
const COLORS = ['#229A16', '#919EAB', '#FF4842'];
|
||||
|
||||
// const performaDokterData = [
|
||||
// { name: 'Dr. John', Berhasil: 70, Gagal: 8, Abandon: 4 },
|
||||
// { name: 'Dr. Richard', Berhasil: 68, Gagal: 10, Abandon: 2 },
|
||||
// { name: 'Dr. Harman', Berhasil: 75, Gagal: 5, Abandon: 3 },
|
||||
// { name: 'Dr. Emma', Berhasil: 80, Gagal: 7, Abandon: 1 },
|
||||
// { name: 'Dr. tb', Berhasil: 80, Gagal: 7, Abandon: 1 },
|
||||
// { name: 'Dr. test', Berhasil: 80, Gagal: 7, Abandon: 1 },
|
||||
// { name: 'Dr. yayan', Berhasil: 80, Gagal: 7, Abandon: 1 },
|
||||
// { name: 'Dr. intan', Berhasil: 80, Gagal: 7, Abandon: 1 },
|
||||
// { name: 'Dr. fajri', Berhasil: 80, Gagal: 7, Abandon: 1 },
|
||||
// ];
|
||||
|
||||
// Custom Tooltip
|
||||
const CustomTooltip = ({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
const totalPasien =
|
||||
payload[0].value + payload[1].value + payload[2].value;
|
||||
return (
|
||||
<div style={{ background: "#000", color: "#fff", padding: "10px", borderRadius: "5px" }}>
|
||||
<p>{label}</p>
|
||||
<p>Total Pasien: {totalPasien}</p>
|
||||
<p>Berhasil: {payload[0].value}</p>
|
||||
<p>Gagal: {payload[1].value}</p>
|
||||
<p>Abandon: {payload[2].value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Custom Tooltip
|
||||
const CustomTooltipPie = ({ active, payload, startDate, endDate }) => {
|
||||
if (!active || !payload || payload.length === 0) return null;
|
||||
// Fungsi format tanggal ke "2 Jan 2025"
|
||||
const formatDate = (date) => {
|
||||
if (!date) return "N/A";
|
||||
return new Date(date).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div style={{ background: "#000", color: "#fff", padding: "10px", borderRadius: "5px" }}>
|
||||
<p>{formatDate(startDate)} - {formatDate(endDate)}</p>
|
||||
<p>Status: {payload[0]?.name || "Tidak ada data"}</p>
|
||||
<p>Jumlah Pasien: {payload[0]?.value || 0}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default function Dashboard() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { logout } = useAuth();
|
||||
|
||||
const loadSomething = () => {
|
||||
axios.get('/user')
|
||||
const transaksiDataDefault = [
|
||||
{ name: "Berhasil", value: 0, color: "#4CAF50" },
|
||||
{ name: "Gagal", value: 0, color: "#F44336" },
|
||||
{ name: "Abandon", value: 0, color: "#9E9E9E" },
|
||||
];
|
||||
const { themeStretch } = useSettings();
|
||||
const [startDate, setStartDate] = useState(dayjs().startOf('month').format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [startDateDokter, setStartDateDokter] = useState(dayjs().startOf('month').format('YYYY-MM-DD'));
|
||||
const [endDateDokter, setEndDateDokter] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [transaksiData, setTransaksiData] = useState(transaksiDataDefault);
|
||||
const [transaksiDataBar, setTransaksiDataBar] = useState([]);
|
||||
const [type, setType] = useState(0);
|
||||
const [status, setStatus] = useState(0);
|
||||
const [statusDokter, setStatusDokter] = useState(0);
|
||||
const [view, setView] = useState(["day", "month", "year"]);
|
||||
const [performaDokterData, setListPerformaDoctors] = useState([]);
|
||||
const [doctors, setListDoctors] = useState([]);
|
||||
const [selectedDoctors, setSelectedDoctors] = useState(doctors.map((doctor) => doctor.id)); // State untuk dokter yang dipilih
|
||||
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`dashboard/transaksi`, {
|
||||
params: {
|
||||
start_date: startDate,
|
||||
end_date: endDate,
|
||||
type,
|
||||
status
|
||||
}
|
||||
});
|
||||
if (response.data) {
|
||||
setTransaksiData(response.data);
|
||||
}
|
||||
if (type === 0) {
|
||||
setView(["day", "month", "year"]); // Urutan yang benar: day, month, year
|
||||
} else {
|
||||
setView(["month"]); // Hanya menampilkan bulan & tahun
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaksi data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const DangerCard = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(3),
|
||||
color: theme.palette.error.main,
|
||||
backgroundColor: theme.palette.error.lighter,
|
||||
}));
|
||||
const fetchDataBar = async () => {
|
||||
try {
|
||||
const response = await axios.get(`dashboard/transaksi-bar-chart`, {
|
||||
params: {
|
||||
start_date: startDate,
|
||||
end_date: endDate,
|
||||
type,
|
||||
status
|
||||
}
|
||||
});
|
||||
if (response.data) {
|
||||
setTransaksiDataBar(response.data);
|
||||
}
|
||||
if (type === 0) {
|
||||
setView(["day", "month", "year"]); // Urutan yang benar: day, month, year
|
||||
} else {
|
||||
setView(["month"]); // Hanya menampilkan bulan & tahun
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaksi data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const SuccessCard = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(3),
|
||||
color: theme.palette.success.darker,
|
||||
backgroundColor: theme.palette.success.lighter,
|
||||
}));
|
||||
const fetchListPerfomaDokter = async () => {
|
||||
try {
|
||||
const response = await axios.get(`dashboard/list-performa-dokter`, {
|
||||
params: {
|
||||
start_date: startDateDokter,
|
||||
end_date: endDateDokter,
|
||||
type,
|
||||
statusDokter,
|
||||
nIDDokter: selectedDoctors
|
||||
}
|
||||
} );
|
||||
if (response.data) {
|
||||
setListPerformaDoctors(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaksi data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const fetchListDokter = async () => {
|
||||
try {
|
||||
const response = await axios.get(`dashboard/list-dokter`);
|
||||
if (response.data) {
|
||||
setListDoctors(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaksi data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch data saat pertama kali halaman dimuat dan ketika filter berubah
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
fetchDataBar();
|
||||
// fetchListPerfomaDokter();
|
||||
}, [startDate, endDate, type, status]);
|
||||
|
||||
// Fetch
|
||||
useEffect(() => {
|
||||
fetchListPerfomaDokter();
|
||||
}, [selectedDoctors, startDateDokter, endDateDokter])
|
||||
|
||||
useEffect(() => {
|
||||
fetchListDokter();
|
||||
}, []);
|
||||
|
||||
|
||||
// Performa dokter
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const handleOpen = () => setOpenDialog(true);
|
||||
|
||||
|
||||
const getContent = () => {
|
||||
const [search, setSearch] = useState(""); // State untuk pencarian dokter
|
||||
|
||||
// Filter dokter berdasarkan pencarian
|
||||
const filteredDoctors = doctors.filter((doctor) =>
|
||||
doctor.name.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
// Handle pilih satu dokter
|
||||
const handleSelectDoctor = (id) => {
|
||||
setSelectedDoctors((prev) =>
|
||||
prev.includes(id) ? prev.filter((docId) => docId !== id) : [...prev, id]
|
||||
);
|
||||
};
|
||||
|
||||
// Handle pilih semua dokter
|
||||
const handleSelectAll = () => {
|
||||
if (selectedDoctors.length === doctors.length) {
|
||||
setSelectedDoctors([]);
|
||||
} else {
|
||||
setSelectedDoctors(doctors.map((doctor) => doctor.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialog(false);
|
||||
setSelectedDoctors([]);
|
||||
}
|
||||
|
||||
const handlePilihDokter = () => {
|
||||
setOpenDialog(false);
|
||||
console.log(selectedDoctors);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{/* Search Bar */}
|
||||
<TextField
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
placeholder="Search Doctor"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
InputProps={{
|
||||
endAdornment: <SearchIcon />,
|
||||
}}
|
||||
sx={{ mb: 2, mt:2 }}
|
||||
/>
|
||||
|
||||
{/* Table Dokter */}
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedDoctors.length === doctors.length}
|
||||
onChange={handleSelectAll}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>Kode</TableCell>
|
||||
<TableCell>Nama</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filteredDoctors.map((doctor) => (
|
||||
<TableRow key={doctor.id}>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedDoctors.includes(doctor.id)}
|
||||
onChange={() => handleSelectDoctor(doctor.id)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>{doctor.code}</TableCell>
|
||||
<TableCell>{doctor.name}</TableCell>
|
||||
<TableCell>
|
||||
<Typography
|
||||
sx={{
|
||||
color: doctor.online === 1 ? green[500] : red[500],
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{doctor.online === 1 ? "🟢 Online" : "🔴 Offline"}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
|
||||
<Button color="primary" variant="contained" onClick={handlePilihDokter}>Pilih</Button>
|
||||
|
||||
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Page title="Dashboard">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Container maxWidth="xl">
|
||||
<Typography variant="h3" component="h1" paragraph>
|
||||
Dashboard
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<SomethingUsage />
|
||||
{/* Jumlah Transaksi */}
|
||||
<Card sx={{ p: 3, mb: 3 }}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Jumlah Transaksi
|
||||
</Typography>
|
||||
<Grid container spacing={3}>
|
||||
{/* Pilih */}
|
||||
<Grid item sm={3}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Tipe</InputLabel>
|
||||
<Select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
>
|
||||
<MenuItem value="0">Harian</MenuItem>
|
||||
<MenuItem value="1">Mingguan</MenuItem>
|
||||
<MenuItem value="2">Bulanan</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
label="Start"
|
||||
views={view}
|
||||
value={startDate}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
onChange={(value) => {
|
||||
if (!value) return; // Hindari error jika value null atau undefined
|
||||
if (type == 0) {
|
||||
setStartDate(value);
|
||||
} else {
|
||||
setStartDate(new Date(value.getFullYear(), value.getMonth(), 1));
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} variant="outlined" />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
<Grid item md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
label="End"
|
||||
views={view}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={endDate}
|
||||
onChange={(value) => {
|
||||
if (!value) return; // Hindari error jika value null atau undefined
|
||||
if (type == 0) {
|
||||
setEndDate(value);
|
||||
} else {
|
||||
setEndDate(new Date(value.getFullYear(), value.getMonth(), 1));
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} variant="outlined" />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
{/* Pilih Status */}
|
||||
<Grid item sm={3}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Status</InputLabel>
|
||||
<Select
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
>
|
||||
<MenuItem value="0">Semua</MenuItem>
|
||||
<MenuItem value="1">Berhasil</MenuItem>
|
||||
<MenuItem value="2">Abandon</MenuItem>
|
||||
<MenuItem value="3">Gagal</MenuItem>
|
||||
</Select>
|
||||
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<ResponsiveContainer width="100%" height={350}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={transaksiData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={100}
|
||||
fill="#8884d8"
|
||||
dataKey="value"
|
||||
label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
|
||||
>
|
||||
{transaksiData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip content={<CustomTooltipPie startDate={startDate} endDate={endDate} />} />
|
||||
<Legend />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={8}>
|
||||
<div style={{ width: "100%", overflowX: "auto" }}>
|
||||
<ResponsiveContainer width={1000} height={350}>
|
||||
<BarChart
|
||||
data={transaksiDataBar}
|
||||
margin={{ top: 10, right: 30, left: 10, bottom: 10 }}
|
||||
>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={(date) => date}
|
||||
/>
|
||||
<YAxis />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
<Bar dataKey="Berhasil" fill="#4CAF50" barSize={20} />
|
||||
<Bar dataKey="Gagal" fill="#F44336" barSize={20} />
|
||||
<Bar dataKey="Abandon" fill="#9E9E9E" barSize={20} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<DangerCard>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
||||
<Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
|
||||
<Typography>{fCurrency(15000000)} (57)</Typography>
|
||||
</Stack>
|
||||
</DangerCard>
|
||||
<br />
|
||||
<SuccessCard>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
||||
<Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
|
||||
<Typography>November 2022</Typography>
|
||||
</Stack>
|
||||
</SuccessCard>
|
||||
</Card>
|
||||
|
||||
{/* Performa Dokter */}
|
||||
<Card sx={{ p: 3 }}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Performa Dokter
|
||||
</Typography>
|
||||
<Grid container spacing={3}>
|
||||
{/* Pilih Dokter*/}
|
||||
<Grid item sm={3}>
|
||||
<Button variant="contained" onClick={handleOpen}>
|
||||
Pilih Dokter
|
||||
</Button>
|
||||
</Grid>
|
||||
{/* Pilih */}
|
||||
<Grid item sm={3}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Tipe</InputLabel>
|
||||
<Select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
>
|
||||
<MenuItem value="0">Harian</MenuItem>
|
||||
<MenuItem value="1">Mingguan</MenuItem>
|
||||
<MenuItem value="2">Bulanan</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
label="Start"
|
||||
views={view}
|
||||
value={startDateDokter}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
onChange={(value) => {
|
||||
if (!value) return; // Hindari error jika value null atau undefined
|
||||
if (type == 0) {
|
||||
setStartDateDokter(value);
|
||||
} else {
|
||||
setStartDateDokter(new Date(value.getFullYear(), value.getMonth(), 1));
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} variant="outlined" />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
<Grid item md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
label="End"
|
||||
views={view}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={endDateDokter}
|
||||
onChange={(value) => {
|
||||
if (!value) return; // Hindari error jika value null atau undefined
|
||||
if (type == 0) {
|
||||
setEndDateDokter(value);
|
||||
} else {
|
||||
setEndDateDokter(new Date(value.getFullYear(), value.getMonth(), 1));
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} variant="outlined" />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
{/* Pilih Status */}
|
||||
<Grid item sm={2}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Status</InputLabel>
|
||||
<Select
|
||||
value={statusDokter}
|
||||
onChange={(e) => setStatusDokter(e.target.value)}
|
||||
>
|
||||
<MenuItem value="0">Semua</MenuItem>
|
||||
<MenuItem value="1">Berhasil</MenuItem>
|
||||
<MenuItem value="2">Abandon</MenuItem>
|
||||
<MenuItem value="3">Gagal</MenuItem>
|
||||
</Select>
|
||||
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item sm={12} marginTop={2}>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={performaDokterData}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="Berhasil" fill="#4CAF50" />
|
||||
<Bar dataKey="Gagal" fill="#F44336" />
|
||||
<Bar dataKey="Abandon" fill="#9E9E9E" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Dialog Pilih Dokter */}
|
||||
<MuiDialog
|
||||
title={{name: "Pilih Dokter"}}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
maxWidth="xl"
|
||||
/>
|
||||
|
||||
</Card>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
|
||||
1573
frontend/dashboard/src/pages/InvoicePayment/CreateInvoice.tsx
Normal file
1573
frontend/dashboard/src/pages/InvoicePayment/CreateInvoice.tsx
Normal file
File diff suppressed because it is too large
Load Diff
323
frontend/dashboard/src/pages/InvoicePayment/Detail.tsx
Normal file
323
frontend/dashboard/src/pages/InvoicePayment/Detail.tsx
Normal file
@@ -0,0 +1,323 @@
|
||||
import {
|
||||
Container,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
Card,
|
||||
TableRow,
|
||||
Tab,
|
||||
TableCell,
|
||||
Collapse,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
IconButton,
|
||||
TextField
|
||||
} from '@mui/material';
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
import { Table, TableBody, TableContainer, TableHead, Paper } 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, useMemo } from 'react';
|
||||
import axios from '@/utils/axios';
|
||||
// pages
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
import { fDate, fDateTimesecond, fDateTime } from '@/utils/formatTime';
|
||||
import { Button } from '@mui/material';
|
||||
import Label from '@/components/Label';
|
||||
import { Box } from '@mui/system';
|
||||
import { Accordion } from '@mui/material';
|
||||
import { Delete, EditOutlined, ExpandMore } from '@mui/icons-material';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
|
||||
import MoreMenu from '@/components/MoreMenu';
|
||||
import { MenuItem } from '@mui/material';
|
||||
import { fNumber } from '@/utils/formatNumber';
|
||||
import palette from '@/theme/palette';
|
||||
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
|
||||
import { List, ListItem, Link, Divider } from '@mui/material';
|
||||
|
||||
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function Detail() {
|
||||
const location = useLocation();
|
||||
const queryParams = new URLSearchParams(location.search);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { themeStretch } = useSettings();
|
||||
const [invoicePayment, setInvoicePayment] = useState([]);
|
||||
const [invoicePaymentDetail, setInvoicePaymentDetail] = useState([]);
|
||||
const [invoicePaymentFile, setInvoicePaymentFile] = useState([]);
|
||||
const [statusClaim, setStatusClaim] = useState('');
|
||||
const [dataMember, setDataMember] = useState('');
|
||||
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get('invoice-payment/detail/'+id)
|
||||
.then((response) => {
|
||||
setInvoicePayment(response.data.invoice_payments);
|
||||
setInvoicePaymentDetail(response.data.invoice_payment_details);
|
||||
setInvoicePaymentFile(response.data.files);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
console.log(invoicePayment);
|
||||
console.log(invoicePaymentDetail);
|
||||
console.log(invoicePaymentFile);
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style3 = {
|
||||
color: '#919EAB',
|
||||
width: '35%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
const handleCloseDialogSubmit = () => {
|
||||
setOpenDialogSubmit(false);
|
||||
}
|
||||
|
||||
const [decline, setDeclaine] = useState('');
|
||||
|
||||
// const handleSubmitData = () => {
|
||||
// //approve or decline
|
||||
// if(!reasonDecline && approve == 'decline')
|
||||
// {
|
||||
// enqueueSnackbar('Mohon isi alasan', { variant: 'warning' });
|
||||
// return false;
|
||||
// }
|
||||
// axios
|
||||
// .post('claims/'+id_claim+'/'+approve, {reasonDecline:reasonDecline})
|
||||
// .then((response) => {
|
||||
// enqueueSnackbar('Success '+toTitleCase(approve)+' Claim Request', { variant: 'success' });
|
||||
// setOpenDialogSubmit(false);
|
||||
// // window.location.reload();
|
||||
|
||||
// })
|
||||
// .catch(({ response }) => {
|
||||
// enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
|
||||
// });
|
||||
|
||||
// setTimeout(() =>
|
||||
// {
|
||||
// window.location.reload();
|
||||
// }, 5000);
|
||||
|
||||
// };
|
||||
|
||||
function toTitleCase(str: string | null) {
|
||||
return str.replace(/\w\S*/g, function(txt) {
|
||||
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
});
|
||||
}
|
||||
|
||||
const [reasonDecline, setReasonDecline] = useState('');
|
||||
|
||||
const handleReasonDeclineChange = (event) => {
|
||||
setReasonDecline(event.target.value);
|
||||
// Tambahkan logika yang diperlukan di sini
|
||||
};
|
||||
|
||||
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
||||
const [openDialogEditDetail, setDialogDEditDetail] = useState(false);
|
||||
const [openDialogBenefit, setDialogBenefit] = useState(false);
|
||||
const [openDialogMedicine, setDialogMedicine] = useState(false);
|
||||
|
||||
// Handel Delete Detail Benefit
|
||||
const [idBenefitData, setIdBenefitData] = useState<number>();
|
||||
const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
|
||||
|
||||
const [idMedicineData, setIdMedicineData] = useState<number>();
|
||||
const [openDialogDeleteMedicine, setDialogDeleteMedicine] = useState(false)
|
||||
|
||||
const [approve, setApprove] = useState('')
|
||||
|
||||
// Handle Edit Detail Benefit
|
||||
const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
|
||||
const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
|
||||
|
||||
// Buat total data
|
||||
|
||||
|
||||
// Handle Delete File LOG
|
||||
const [pathFile, setPathFile] = useState('')
|
||||
const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
|
||||
|
||||
// Handle Upload File LOG
|
||||
const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
|
||||
|
||||
const totalAmount = invoicePaymentFile.reduce((sum, payment) => {
|
||||
const num = parseFloat(payment.amount_paid) || 0;
|
||||
return parseFloat(sum) + parseFloat(num);
|
||||
}, 0);
|
||||
const grandTotal = invoicePaymentDetail.reduce((sum, item) => sum + parseFloat(item.tot_bill ? item.tot_bill : 0), 0);
|
||||
|
||||
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 }}>
|
||||
{/* {invoicePayment.length > 0 ? invoicePayment[0].invoice_number : 'Detail'} */}
|
||||
Detail Invoice
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Grid container spacing={2}>
|
||||
{/* Detail */}
|
||||
<Grid item xs={12} md={12}>
|
||||
<Card sx={{padding:2}} >
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant='subtitle1' sx={{ color: '#19BBBB', marginBottom: 4 }} gutterBottom>
|
||||
Detail
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Tanggal Invoice</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? fDate(invoicePayment[0].invoice_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Nomor Invoice </Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? invoicePayment[0].invoice_number : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Periode Pembayaran</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? fDate(invoicePayment[0].start_date) : '-'}-{invoicePayment.length > 0 ? fDate(invoicePayment[0].end_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* Benefit */}
|
||||
<Grid item xs={12} md={12}>
|
||||
<Card sx={{padding:2}} >
|
||||
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Claim</Typography>
|
||||
</Stack>
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Code Claim/Code Log</TableCell>
|
||||
<TableCell>Invoice No</TableCell>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Member ID</TableCell>
|
||||
<TableCell>Policy Number</TableCell>
|
||||
<TableCell>Provider</TableCell>
|
||||
<TableCell>Total Bill</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{invoicePaymentDetail.map((detail) => (
|
||||
<TableRow key={detail.id}>
|
||||
<TableCell>{detail.code} / {detail.code_log}</TableCell>
|
||||
<TableCell>{detail.invoice_no || '-'}</TableCell>
|
||||
<TableCell>{detail.name}</TableCell>
|
||||
<TableCell>{detail.member_id}</TableCell>
|
||||
<TableCell>{detail.corporate_policies}</TableCell>
|
||||
<TableCell>{detail.provider}</TableCell>
|
||||
<TableCell>{fCurrency(detail.tot_bill)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
|
||||
|
||||
|
||||
</Grid>
|
||||
|
||||
{/* Catatan Pembayaran */}
|
||||
<Grid item xs={12} md={12}>
|
||||
<Card sx={{padding:2}} >
|
||||
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Catatan Pembayaran</Typography>
|
||||
|
||||
</Stack>
|
||||
{invoicePaymentFile.map((file, index) => (
|
||||
<Stack key={index.id} spacing={2} width="100%" sx={{ border: "1px solid #ddd", p: 2, borderRadius: 2, mt: 2, pt: 2 }}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="subtitle1">Pembayaran {file.payment_number}</Typography>
|
||||
</Stack>
|
||||
|
||||
{/* Input Jumlah Bayar */}
|
||||
<Stack direction="row" spacing={2} width="100%">
|
||||
<Stack spacing={2} sx={{ width: "50%" }}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Nominal Pembayaran</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{fCurrency(parseFloat(file.amount_paid))}</Typography>
|
||||
</Stack>
|
||||
|
||||
{/* Input File Bukti */}
|
||||
<Stack spacing={2} sx={{ width: "50%" }}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Bukti Pembayaran</Typography>
|
||||
<Stack>
|
||||
<Stack divider={<Divider orientation="horizontal" flexItem />} spacing={1}>
|
||||
{file.files.map((file1, fileIndex) => (
|
||||
<Stack direction="row" justifyContent="space-between" key={fileIndex}>
|
||||
<a
|
||||
href={file1.path}
|
||||
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
||||
target="_blank"
|
||||
>
|
||||
<Typography variant="body2" gutterBottom>{file1.original_name ? file1.original_name : '-'}</Typography>
|
||||
</a>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
<Stack direction="row" justifyContent="space-between" alignContent="center" sx={{ mt: 2, pt: 2}}>
|
||||
<Typography variant='subtitle1' fontWeight="bold">Jumlah Tagihan</Typography>
|
||||
<Typography variant='subtitle1' fontWeight="bold">
|
||||
{fCurrency(grandTotal)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
{/* Total Jumlah Bayar */}
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mt: 2, borderTop: "2px solid #ddd", pt: 2 }}>
|
||||
<Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#19BBBB" }}>Total Dibayar</Typography>
|
||||
<Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#19BBBB" }}>
|
||||
{fCurrency(totalAmount.toString())}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mt: 1, pt: 1 }}>
|
||||
<Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#FF4842" }}>Sisa Pembayaran</Typography>
|
||||
<Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#FF4842" }}>
|
||||
{fCurrency((grandTotal - totalAmount))}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
30
frontend/dashboard/src/pages/InvoicePayment/Index.tsx
Normal file
30
frontend/dashboard/src/pages/InvoicePayment/Index.tsx
Normal file
@@ -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 Invoice() {
|
||||
|
||||
const pageTitle = 'Invoice Management';
|
||||
return (
|
||||
<Page title={ pageTitle } sx={{ mx: 2}}>
|
||||
|
||||
<HeaderBreadcrumbs
|
||||
heading={ pageTitle }
|
||||
links={[
|
||||
{ name: 'Dashboard', href: '/dashboard' },
|
||||
{
|
||||
name: 'Invoice Payment',
|
||||
href: '/invoice-payment',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* <Stack> */}
|
||||
<List />
|
||||
{/* </Stack> */}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
1063
frontend/dashboard/src/pages/InvoicePayment/List.tsx
Normal file
1063
frontend/dashboard/src/pages/InvoicePayment/List.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@@ -26,6 +26,8 @@ import {
|
||||
Autocomplete,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
} from '@mui/material';
|
||||
|
||||
import {
|
||||
@@ -61,6 +63,7 @@ import { RHFDatepicker } from '@/components/hook-form';
|
||||
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { fDateOnly } from '@/utils/formatTime';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -73,7 +76,9 @@ export default function List() {
|
||||
const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
|
||||
const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
|
||||
const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
|
||||
|
||||
const [type, setType] = useState(0);
|
||||
const [view, setView] = useState(["day", "month", "year"]);
|
||||
|
||||
function Filter(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
@@ -91,9 +96,27 @@ export default function List() {
|
||||
props.onSearch(searchText);
|
||||
};
|
||||
|
||||
const handleTypeChange = (value: string) => { // Perbaikan di parameter
|
||||
setType(value); // Mengatur state type dengan nilai baru
|
||||
if (value === "0") {
|
||||
setView(["day", "month", "year"]); // Urutan benar
|
||||
} else {
|
||||
setView(["month"]); // Hanya menampilkan bulan & tahun
|
||||
}
|
||||
|
||||
let entries = [...searchParams.entries(), ['type', value ?? '']];
|
||||
if (!searchParams.get('type')) {
|
||||
entries = [...entries, ['type', value ?? '']];
|
||||
}
|
||||
const filter = Object.fromEntries(entries);
|
||||
|
||||
setSearchParams(filter);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger First Search
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
|
||||
}, []);
|
||||
|
||||
const item = [
|
||||
@@ -107,7 +130,7 @@ export default function List() {
|
||||
return (
|
||||
<form style={{ width: '100%' }}>
|
||||
<Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Grid item xs={12} md={4}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
@@ -130,21 +153,42 @@ export default function List() {
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Tipe</InputLabel>
|
||||
<Select
|
||||
value={type}
|
||||
onChange={(event) => handleTypeChange(event.target.value)} // Perbaikan disini
|
||||
>
|
||||
<MenuItem value="0">Daily</MenuItem>
|
||||
<MenuItem value="1">Monthly</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
views={view}
|
||||
value={searchParams.get('startDate')}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
onChange={(value) => {
|
||||
try {
|
||||
if (value && !!Date.parse(value)) {
|
||||
const date = value ? fDateOnly(value) : '';
|
||||
var entries = [...searchParams.entries(), ['startDate', date ?? '']];
|
||||
let date = fDateOnly(value);
|
||||
|
||||
// Jika view adalah "month", set tanggal ke 1
|
||||
if (view.length === 1 && view.includes("month")) {
|
||||
const dateObj = new Date(value);
|
||||
dateObj.setDate(1);
|
||||
date = fDateOnly(dateObj);
|
||||
}
|
||||
|
||||
let entries = [...searchParams.entries(), ['startDate', date ?? '']];
|
||||
if (!searchParams.get('endDate')) {
|
||||
entries = [...entries, ['endDate', date ?? '']];
|
||||
}
|
||||
const filter = Object.fromEntries(entries);
|
||||
|
||||
|
||||
setSearchParams(filter);
|
||||
loadDataTableData(filter);
|
||||
}
|
||||
@@ -157,18 +201,28 @@ export default function List() {
|
||||
<Grid item xs={12} md={2}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DesktopDatePicker
|
||||
views={view}
|
||||
value={searchParams.get('endDate')}
|
||||
inputFormat="dd/MM/yyyy"
|
||||
onChange={(value) => {
|
||||
try {
|
||||
if (value && !!Date.parse(value)) {
|
||||
const date = fDateOnly(value);
|
||||
var entries = [...searchParams.entries(), ['endDate', date ?? '']];
|
||||
let date = fDateOnly(value);
|
||||
|
||||
// Jika mode monthly, set endDate ke akhir bulan dari startDate
|
||||
if (view.length === 1 && view.includes("month")) {
|
||||
const dateObj = new Date(value);
|
||||
dateObj.setMonth(dateObj.getMonth() + 1); // Pindah ke bulan berikutnya
|
||||
dateObj.setDate(0); // Set ke tanggal terakhir bulan sebelumnya (akhir bulan)
|
||||
date = fDateOnly(dateObj);
|
||||
}
|
||||
|
||||
let entries = [...searchParams.entries(), ['endDate', date ?? '']];
|
||||
if (!searchParams.get('startDate')) {
|
||||
entries = [...entries, ['startDate', date ?? '']];
|
||||
entries = [...entries, ['startDate', date ?? ''] ];
|
||||
}
|
||||
const filter = Object.fromEntries(entries);
|
||||
|
||||
|
||||
setSearchParams(filter);
|
||||
loadDataTableData(filter);
|
||||
}
|
||||
@@ -188,15 +242,25 @@ export default function List() {
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2}>
|
||||
<Button
|
||||
{/* <LoadingButton
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="small"
|
||||
|
||||
|
||||
>
|
||||
{'Save'}
|
||||
</LoadingButton> */}
|
||||
<LoadingButton
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
startIcon={<Add />}
|
||||
sx={{ p: 1.8 }}
|
||||
loading={isSubmitting}
|
||||
onClick={exportExcel}
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
@@ -383,6 +447,7 @@ export default function List() {
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
||||
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
|
||||
current_page: 1,
|
||||
data: [],
|
||||
@@ -411,10 +476,11 @@ export default function List() {
|
||||
|
||||
const exportExcel = async () => {
|
||||
var filter = Object.fromEntries([...searchParams.entries()]);
|
||||
|
||||
setIsSubmitting(true)
|
||||
await axios
|
||||
.get('live-chat/export', { params: filter })
|
||||
.then((res) => {
|
||||
setIsSubmitting(false)
|
||||
enqueueSnackbar('Data berhasil di Export', {
|
||||
variant: 'success',
|
||||
anchorOrigin: { horizontal: 'right', vertical: 'top' },
|
||||
|
||||
@@ -480,6 +480,22 @@ export default function Router() {
|
||||
path: 'report/rujukan',
|
||||
element: <RujukanPasien/>,
|
||||
},
|
||||
{
|
||||
path: 'invoice-payment',
|
||||
element: <InvoicePayments />,
|
||||
},
|
||||
{
|
||||
path: 'invoice-payment/create',
|
||||
element: <CreateInvoicePayments />,
|
||||
},
|
||||
{
|
||||
path: 'invoice-payment/detail/:id',
|
||||
element: <InvoicePaymentsDetail />,
|
||||
},
|
||||
{
|
||||
path: 'invoice-payment/edit/:invoiceID',
|
||||
element: <InvoicePaymentsEdit />,
|
||||
},
|
||||
{
|
||||
path: 'claims',
|
||||
element: <Claims />,
|
||||
@@ -780,6 +796,13 @@ const CorporateHistories = Loadable(
|
||||
|
||||
const Profile = Loadable(lazy(() => import('../pages/Profile/Index')));
|
||||
|
||||
//Invoice_Payments
|
||||
const InvoicePayments = Loadable(lazy(() => import('../pages/InvoicePayment/Index')));
|
||||
const CreateInvoicePayments = Loadable(lazy(() => import('../pages/InvoicePayment/CreateInvoice')));
|
||||
const InvoicePaymentsDetail = Loadable(lazy(() => import('../pages/InvoicePayment/Detail')));
|
||||
const InvoicePaymentsEdit = Loadable(lazy(() => import('../pages/InvoicePayment/CreateInvoice')));
|
||||
|
||||
|
||||
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
|
||||
const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate')));
|
||||
const ClaimsDetail = Loadable(lazy(() => import('../pages/Claims/Detail')));
|
||||
|
||||
Reference in New Issue
Block a user