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

Update Claim, Final LOG, Request LOG

Browse Source
This commit is contained in:
ivan-sim
2023-12-20 16:27:57 +07:00
parent 40371bd53a
commit 4defd4fa2f
28 changed files with 2779 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/hospital-portal/src/sections/dashboard/DialogMember.tsx
View File

@@ -1,7 +1,22 @@
// mui
import { styled } from '@mui/material/styles';
import { LoadingButton, TabPanel } from "@mui/lab";
import { Button, Card, Divider, Grid, LinearProgress, linearProgressClasses, Typography } from "@mui/material";
import {
Button,
Card,
Divider,
Grid,
LinearProgress,
linearProgressClasses,
Typography,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Collapse, } from "@mui/material";
import { Tab, Tabs } from "@mui/material";
import { Box, Stack } from "@mui/material";
import React, { useEffect, useState, useContext } from "react";
@@ -10,12 +25,15 @@ import { fPostFormat } from '@/utils/formatTime';
import { Avatar } from '@mui/material';
import Iconify from '@/components/Iconify';
import FormRequestClaim from './FormRequestClaim';
import FormRequestLog from './FormRequestLog';
import { LanguageContext } from '@/contexts/LanguageContext';
import { format } from 'date-fns';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
export default function DialogMember(member, handleSubmitSuccess) {
const { localeData } = useContext(LanguageContext);
const [currentTab, setCurrentTab] = useState('request')
export default function DialogMember(member:any, handleSubmitSuccess:() => void) {
const { localeData }: any = useContext(LanguageContext);
const [currentTab, setCurrentTab] = useState('request');
// ----------------------------------------------------------------------
@@ -41,7 +59,7 @@ export default function DialogMember(member, handleSubmitSuccess) {
},
}));
function TabPanel(props) {
function TabPanel(props:any) {
const { children, value, index, ...other } = props;
return (
<div
@@ -59,6 +77,15 @@ export default function DialogMember(member, handleSubmitSuccess) {
</div>
);
}
const [openRows, setOpenRows] = useState<any>({});
const handleRowToggle = (index:number) => {
setOpenRows((prevOpenRows:any) => ({
...prevOpenRows,
[index]: !prevOpenRows[index],
}));
};
return (
<div>
@@ -69,8 +96,10 @@ export default function DialogMember(member, handleSubmitSuccess) {
aria-label="wrapped label tabs example"
>
<Tab value="detail" label={localeData.txtDialogMember3} />
<Tab value="benefit" label={localeData.txtDialogMember1} />
<Tab value="request" label={localeData.txtDialogMember2} />
<Tab value="service" label={localeData.txtDialogMember1} />
{member?.type !== 'view' ? (
<Tab value="request" label={localeData.txtDialogMember2} />
) : ''}
</Tabs>
<TabPanel value={currentTab} index={'detail'}>
@@ -96,19 +125,19 @@ export default function DialogMember(member, handleSubmitSuccess) {
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.email ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Date of Birth</Typography>
<Typography sx={{width:'50%'}} variant="body2">{localeData.txtDateBirth}</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.birth_date ? format(new Date(member.members.birth_date), "d MMM yyyy") : '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Gender</Typography>
<Typography sx={{width:'50%'}} variant="body2">{localeData.txtGender}</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.gender ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Marital Status</Typography>
<Typography sx={{width:'50%'}} variant="body2">{localeData.txtMaritalStatus}</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.marital_status ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Language</Typography>
<Typography sx={{width:'50%'}} variant="body2">{localeData.txtLanguage}</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.language ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
@@ -116,29 +145,51 @@ export default function DialogMember(member, handleSubmitSuccess) {
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.race ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Relationship</Typography>
<Typography sx={{width:'50%'}} variant="body2">{localeData.txtRelationship}</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.relation_with_principal != '' ? member?.members.relation_with_principal : '-'}</Typography>
</Stack>
</Stack>
</TabPanel>
<TabPanel value={currentTab} index={'benefit'}>
<Grid container spacing={2}>
{ member && member?.benefits?.map((corporateBenefit, index) => {return (
<Grid item sm={6} key={index}>
<Card sx={{p: 2}}>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{corporateBenefit.description}</Typography>
<Typography variant="body2" sx={{color: '#919EAB'}}>{corporateBenefit.code}</Typography>
</Card>
</Grid>
)})}
</Grid>
<TabPanel value={currentTab} index={'service'}>
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
{member && member.groupServices && Object.keys(member.groupServices).map((serviceCode, index) => (
<TableBody key={index}>
<TableRow sx={{backgroundColor: '#FFFFFF', borderBottom: openRows[index] ? '' : '1px solid #e0e0e0'}}>
<TableCell align="left" sx={{fontWeight: 'bold', width: '95%'}}><Typography variant="subtitle1">{serviceCode}</Typography></TableCell>
<TableCell align="left" sx={{width: '5%'}}>
{openRows[index] ? (
<KeyboardArrowDownIcon sx={{ cursor: 'pointer' }} onClick={() => handleRowToggle(index)} />
) : (
<KeyboardArrowRightIcon sx={{ cursor: 'pointer' }} onClick={() => handleRowToggle(index)} />
)}
</TableCell>
</TableRow>
<TableRow sx={{display: openRows[index] ? '' : 'none', borderBottom: openRows[index] ? '1px solid #e0e0e0' : ''}}>
<TableCell colSpan={2}>
{/* COLLAPSIBLE ROW */}
<Collapse in={openRows[index]} timeout="auto" unmountOnExit>
<Grid container spacing={2}>
{/* Loop through the array for the current serviceCode */}
{member.groupServices[serviceCode].map((item:any, innerIndex:number) => (
<Grid item sm={6} key={innerIndex}>
<Card sx={{ p: 2 }}>
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>{item.description}</Typography>
<Typography variant="body2" sx={{ color: '#919EAB' }}>{item.code}</Typography>
</Card>
</Grid>
))}
</Grid>
</Collapse>
</TableCell>
</TableRow>
</TableBody>
))}
</Table>
</TableContainer>
</TabPanel>
<TabPanel value={currentTab} index={'request'}>
<FormRequestClaim member={member} handleSubmitSuccess={handleSubmitSuccess} />
<FormRequestLog member={member} handleSubmitSuccess={handleSubmitSuccess} />
</TabPanel>
</Box>
</div>