tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

progress feature/laboratorium-result

Browse Source
This commit is contained in:
korospace
2023-10-27 18:09:27 +07:00
parent 08cf8b5c9b
commit b6095f1301
12 changed files with 547 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
View File

@@ -76,6 +76,7 @@ const navConfig = [
title: 'CASE MANAGEMENT',
children: [
{ title: 'Daily Monitoring', path: '/case_management/daily_monitoring' },
{ title: 'Laboratorium Result', path: '/case_management/laboratorium_result' },
],
},
{

1
frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/ClaimList.tsx
View File

@@ -2,7 +2,6 @@
* Core
* ============================================
*/
import { useEffect, useState } from "react";
import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
/**

2
frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/index.tsx
View File

@@ -31,7 +31,7 @@ export default function DailyMonitoring() {
href: '/dashboard',
},
{
name: 'Daily Monitoring',
name: pageTitle,
href: '/case_management/daily_monitoring',
},
]}

73
frontend/dashboard/src/pages/CaseManagement/LaboratoriumResult/Claim.tsx Normal file
View File

@@ -0,0 +1,73 @@
/**
* Core
* ============================================
*/
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Box, Grid, IconButton, Typography } from '@mui/material';
import { ArrowBackIosNew } from '@mui/icons-material';
/**
* Components
* ============================================
*/
// - Global -
import Page from '../../../components/Page';
// - Local -
/**
* Utils, Types, Functions
* ============================================
*/
import { getClaimList } from './Model/Functions';
import { ClaimListType, MemberDetailType } from './Model/Types';
import ClaimList from './Components/ClaimList';
export default function Claim() {
const navigate = useNavigate()
const { member_id } = useParams();
// State
// --------------------
const [memberDetail, setMemberDetail] = useState<MemberDetailType>();
const [claimList, setClaimList] = useState<ClaimListType[]>();
// Use Effect
// --------------------
useEffect(() => {
loadDataTableData();
}, [])
// Load Data
// -------------------
const loadDataTableData = async () => {
const response = await getClaimList(member_id??'');
setMemberDetail(response.member_detail);
setClaimList(response.claim_list);
}
return (
<Page title={ `claims | ${memberDetail?.name??'_ _ _'}` } 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(`/case_management/laboratorium_result`)} >
<ArrowBackIosNew/>
</IconButton>
<Typography variant="h5" sx={{ marginLeft: '24px' }}>
{memberDetail?.name??'_ _ _'}
</Typography>
</Box>
</Grid>
{/* tabel claims */}
<Grid item xs={12}>
<ClaimList claim_list={claimList??null} />
</Grid>
</Grid>
</Page>
);
}

79
frontend/dashboard/src/pages/CaseManagement/LaboratoriumResult/Components/ClaimList.tsx Normal file
View File

@@ -0,0 +1,79 @@
/**
* Core
* ============================================
*/
import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
/**
* Component
* ============================================
*/
import ClaimListRow from "./ClaimListRow";
/**
* Types & Functions
* ============================================
*/
import { ClaimListType } from "../Model/Types";
type Props = {
claim_list: ClaimListType[] | null,
}
export default function ClaimList({ ...props }: Props) {
// Tabel Style
// --------------------
const TableHeadStyle = {
fontWeight: 'bold',
};
return (
<Box>
<TableContainer component={Paper}>
<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}>Admission Date</TableCell>
<TableCell style={TableHeadStyle} align="left" width={160}>Discharge Date</TableCell>
<TableCell style={TableHeadStyle} align="left" width={200}>Code</TableCell>
<TableCell style={TableHeadStyle} align="left" width={'*'}>Service Type</TableCell>
<TableCell style={TableHeadStyle} align="left" width={200}>Status</TableCell>
<TableCell align="left" width={"10"} />
</TableRow>
</TableHead>
{/* Body Table */}
{props.claim_list == null ?
(
<TableBody>
<TableRow>
<TableCell colSpan={7} align="center">Loading</TableCell>
</TableRow>
</TableBody>
)
:
(
props.claim_list.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={7} align="center">No Data</TableCell>
</TableRow>
</TableBody>
)
:
(
<TableBody>
{props.claim_list.map((row: ClaimListType, index) => (
<ClaimListRow key={index} number={index+1} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
</Box>
)
}

88
frontend/dashboard/src/pages/CaseManagement/LaboratoriumResult/Components/ClaimListRow.tsx Normal file
View File

@@ -0,0 +1,88 @@
/**
* 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';
import AddIcon from '@mui/icons-material/Add';
/**
* Component
* ============================================
*/
// - Global -
import Label from "@/components/Label";
import TableMoreMenu from '@/components/table/TableMoreMenu';
/**
* Utils, Types, Functions
* ============================================
*/
import { fDate } from "@/utils/formatTime";
import { ClaimListType } from "../Model/Types";
type Props = {
row: ClaimListType,
number: number
}
export default function ClaimListRow ({ ...props }: Props) {
const navigate = useNavigate()
return (
<React.Fragment>
<TableRow hover sx={{ '& > td': { borderBottom: '1' } }}>
<TableCell align="left" />
<TableCell align="left">
{props.row.admission_dates == "0000-00-00 00:00:00" ?
('-')
:
(
<Label
variant="ghost"
color="default"
>
{fDate(props.row.admission_dates)}
</Label>
)}
</TableCell>
<TableCell align="left">
{props.row.discharge_dates == "0000-00-00 00:00:00" ?
('-')
:
(
<Label
variant="ghost"
color="default"
>
{fDate(props.row.discharge_dates)}
</Label>
)}
</TableCell>
<TableCell align="left">{props.row.claim_code}</TableCell>
<TableCell align="left">{props.row.service_type}</TableCell>
<TableCell align="left">{props.row.claim_status}</TableCell>
<TableCell align="right" onClick={(e) => e.stopPropagation()}>
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate(`/case_management/laboratorium_result/${props.row.member_id}/claims/${props.row.claim_code}/list_lab_result`)}>
<Visibility />
View
</MenuItem>
<MenuItem onClick={() => navigate(`/case_management/laboratorium_result/${props.row.member_id}/claims/${props.row.claim_code}/add_lab_result`)}>
<AddIcon />
Daily Monitoring
</MenuItem>
</>
} />
</Stack>
</TableCell>
</TableRow>
</React.Fragment>
);
}

93
frontend/dashboard/src/pages/CaseManagement/LaboratoriumResult/Components/LaboratoriumResultList.tsx Normal file
View File

@@ -0,0 +1,93 @@
/**
* Core
* ============================================
*/
import { useEffect, useState } from "react";
import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
/**
* Types & Functions
* ============================================
*/
import { getDailyMonitoringList } from "../Model/Functions";
import { LaboratoriumResultListType } from "../Model/Types";
import LaboratoriumListRow from "./LaboratoriumResultListRow";
export default function LaboratoriumResultList() {
// State
// --------------------
const [dataTableIsLoading, setDataTableLoading] = useState<boolean>(true);
const [dataTableData, setDataTableData] = useState<LaboratoriumResultListType[]>([]);
// Tabel Style
// --------------------
const TableHeadStyle = {
fontWeight: 'bold',
};
// Use Effect
// --------------------
useEffect(() => {
loadDataTableData();
}, [])
// Load Data
// -------------------
const loadDataTableData = async () => {
setDataTableLoading(true);
const response = await getDailyMonitoringList();
setDataTableLoading(false);
setDataTableData(response);
}
return (
<Box>
<TableContainer component={Paper}>
<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={150}>Member ID</TableCell>
<TableCell style={TableHeadStyle} align="left" width={'*'}>Name</TableCell>
<TableCell style={TableHeadStyle} align="left" width={160}>Start Date</TableCell>
<TableCell style={TableHeadStyle} align="left" width={160}>End Date</TableCell>
<TableCell align="left" width={"10"} />
</TableRow>
</TableHead>
{/* Body Table */}
{dataTableIsLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={6} align="center">Loading</TableCell>
</TableRow>
</TableBody>
)
:
(
dataTableData.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={6} align="center">No Data</TableCell>
</TableRow>
</TableBody>
)
:
(
<TableBody>
{dataTableData.map((row: LaboratoriumResultListType, index) => (
<LaboratoriumListRow key={index} number={index+1} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
</Box>
)
}

72
frontend/dashboard/src/pages/CaseManagement/LaboratoriumResult/Components/LaboratoriumResultListRow.tsx Normal file
View File

@@ -0,0 +1,72 @@
/**
* 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 { LaboratoriumResultListType } from "../Model/Types";
type Props = {
row: LaboratoriumResultListType,
number: number
}
export default function LaboratoriumResultListRow ({ ...props }: Props) {
const navigate = useNavigate()
return (
<React.Fragment>
<TableRow hover sx={{ '& > td': { borderBottom: '1' } }}>
<TableCell align="left" />
<TableCell align="left">{props.row.member_id}</TableCell>
<TableCell align="left">{props.row.name}</TableCell>
<TableCell align="left">
<Label
variant="ghost"
color="default"
>
{fDate(props.row.startdate)}
</Label>
</TableCell>
<TableCell align="left">
<Label
variant="ghost"
color="default"
>
{fDate(props.row.enddate)}
</Label>
</TableCell>
<TableCell align="right" onClick={(e) => e.stopPropagation()}>
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate(`/case_management/laboratorium_result/${props.row.member_id}/claims`)}>
<Visibility />
View
</MenuItem>
</>
} />
</Stack>
</TableCell>
</TableRow>
</React.Fragment>
);
}

41
frontend/dashboard/src/pages/CaseManagement/LaboratoriumResult/Model/Functions.ts Normal file
View File

@@ -0,0 +1,41 @@
import axios from '@/utils/axios';
import { enqueueSnackbar } from 'notistack';
import { LaboratoriumResultListType, ResponseListingClaimType } from "./Types";
/**
* Listing Daily Monitoring
*/
export const getDailyMonitoringList = async ( ): Promise<LaboratoriumResultListType[]> => {
const response = await axios.get('/case_management/daily_monitoring/memberlist')
.then((res) =>{
return res.data.data.member_list;
})
.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/daily_monitoring/claimlist/${member_id}`)
.then((res) =>{
return res.data.data;
})
.catch((res) => {
enqueueSnackbar("server error !", {
variant: 'error',
});
return null;
});
return response;
};

39
frontend/dashboard/src/pages/CaseManagement/LaboratoriumResult/Model/Types.ts Normal file
View File

@@ -0,0 +1,39 @@
/**
* List Laboratorium
*/
export type LaboratoriumResultListType = {
member_id : string,
name : string,
startdate : string,
enddate : 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_dates : string,
discharge_dates : string,
claim_code : string,
claim_status : string,
service_type : string,
member_id : string
}

48
frontend/dashboard/src/pages/CaseManagement/LaboratoriumResult/index.tsx Normal file
View 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 LaboratoriumResultList from './Components/LaboratoriumResultList';
export default function LaboratoriumResult() {
const pageTitle = "Laboratorium Result";
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: '/case_management/laboratorium_result',
},
]}
/>
</Grid>
{/* tabel daily monitoring */}
<Grid item xs={12}>
<LaboratoriumResultList />
</Grid>
</Grid>
</Page>
);
}

13
frontend/dashboard/src/routes/index.tsx
View File

@@ -221,7 +221,7 @@ export default function Router() {
element: '',
children: [
{
path: 'daily_monitoring',
path: 'daily_monitoring', // Daily Monitoring
element: <DailyMonitoring />
},
{
@@ -236,6 +236,14 @@ export default function Router() {
path: 'daily_monitoring/:member_id/claims/:claim_code/list_monitoring',
element: <DetailMonitoringList />
},
{
path: 'laboratorium_result', // Laboratorium Result
element: <LaboratoriumResult />
},
{
path: 'laboratorium_result/:member_id/claims',
element: <LaboratoriumResultClaims />
},
]
},
{
@@ -561,6 +569,9 @@ const DailyMonitoring = Loadable(lazy(() => import('../pages/CaseManagemen
const DailyMonitoringClaims = Loadable(lazy(() => import('../pages/CaseManagement/DailyMonitoring/Claim')))
const DetailMonitoringForm = Loadable(lazy(() => import('../pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringForm')))
const DetailMonitoringList = Loadable(lazy(() => import('../pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringList')))
// Laboratorium Result
const LaboratoriumResult = Loadable(lazy(() => import('../pages/CaseManagement/LaboratoriumResult/index')))
const LaboratoriumResultClaims = Loadable(lazy(() => import('../pages/CaseManagement/LaboratoriumResult/Claim')))
const MasterDiagnosisTemplate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/Index')));
const MasterDiagnosisTemplateCreate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/CreateUpdate')));