1188 lines
52 KiB
TypeScript
1188 lines
52 KiB
TypeScript
// mui
|
|
import {
|
|
Box,
|
|
Tabs,
|
|
Tab,
|
|
Grid,
|
|
Card,
|
|
Stack,
|
|
Typography,
|
|
TableHead,
|
|
TableCell,
|
|
TableBody,
|
|
Table,
|
|
TableRow,
|
|
MenuItem,
|
|
Skeleton,
|
|
List,
|
|
ListSubheader,
|
|
ListItem,
|
|
ListItemText,
|
|
ListItemButton,
|
|
Divider,
|
|
} from '@mui/material';
|
|
import { styled } from '@mui/material/styles';
|
|
import { Download as DownloadIcon, Circle as CircleIcon, TableView } from '@mui/icons-material';
|
|
// components
|
|
import Page from '../../components/Page';
|
|
// utils
|
|
import { useState, SyntheticEvent, useContext, useEffect } from 'react';
|
|
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import axios from '../../utils/axios';
|
|
import { fDateBirth, fDateSuffix, fDateTime } from '../../utils/formatTime';
|
|
|
|
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
|
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
|
|
import {
|
|
Timeline,
|
|
TimelineConnector,
|
|
TimelineContent,
|
|
TimelineDot,
|
|
TimelineSeparator,
|
|
} from '@mui/lab';
|
|
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
|
import Label from '../../components/Label';
|
|
import { fSplit } from '../../utils/formatNumber';
|
|
|
|
interface TabPanelProps {
|
|
children?: React.ReactNode;
|
|
index: number;
|
|
value: number;
|
|
}
|
|
|
|
function TabPanel(props: TabPanelProps) {
|
|
const { children, value, index, ...other } = props;
|
|
|
|
return (
|
|
<div
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
id={`simple-tabpanel-${index}`}
|
|
aria-labelledby={`simple-tab-${index}`}
|
|
{...other}
|
|
>
|
|
{value === index && children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function a11yProps(index: number) {
|
|
return {
|
|
id: `simple-tab-${index}`,
|
|
'aria-controls': `simple-tabpanel-${index}`,
|
|
};
|
|
}
|
|
|
|
interface StyledTabsProps {
|
|
children?: React.ReactNode;
|
|
value: number;
|
|
onChange: (event: React.SyntheticEvent, newValue: number) => void;
|
|
}
|
|
|
|
const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
|
|
'& .MuiTabs-indicator': {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
backgroundColor: '19BBBB',
|
|
},
|
|
'& .MuiTabs-indicatorSpan': {
|
|
maxWidth: 40,
|
|
width: '100%',
|
|
backgroundColor: '#635ee7',
|
|
},
|
|
});
|
|
|
|
interface StyledTabProps {
|
|
label: string;
|
|
icon?: string | React.ReactElement;
|
|
}
|
|
|
|
const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
|
|
({ theme }) => ({
|
|
fontWeight: 600,
|
|
fontSize: '14px',
|
|
color: theme.palette.grey[600],
|
|
maxWidth: '15%',
|
|
flex: 1,
|
|
margin: '0 !important',
|
|
'&.Mui-selected': {
|
|
color: theme.palette.grey[900],
|
|
},
|
|
'&:hover': {
|
|
color: theme.palette.grey[900],
|
|
opacity: 1,
|
|
},
|
|
})
|
|
);
|
|
|
|
type ServiceMonitoringProps = {
|
|
companyName: string;
|
|
serviceCode: string;
|
|
memberId: string;
|
|
fullName: string;
|
|
dateOfBirth: string;
|
|
phoneNumber: string;
|
|
email: string;
|
|
symptoms: string;
|
|
sign: string;
|
|
mainDiagnose: string;
|
|
comparativeDiagnosis: string;
|
|
serviceName: string;
|
|
files: {
|
|
result: {
|
|
type: string;
|
|
original_name: string;
|
|
url: string;
|
|
}[];
|
|
diagnosis: {
|
|
type: string;
|
|
original_name: string;
|
|
url: string;
|
|
}[];
|
|
kondisi: {
|
|
type: string;
|
|
original_name: string;
|
|
url: string;
|
|
}[];
|
|
};
|
|
benefits: {
|
|
amountIncurred: number;
|
|
amountApproved: number;
|
|
amountNotAprroved: number;
|
|
excessPaid: number;
|
|
description: string;
|
|
name: string;
|
|
}[];
|
|
benefitTotal: {
|
|
totalIncurred: number;
|
|
totalApprove: number;
|
|
totalNotApprove: number;
|
|
totalExcess: number;
|
|
};
|
|
hospital: string;
|
|
admissionDate: string;
|
|
dischargeDate: string;
|
|
dailyMonitorings: Record<
|
|
string,
|
|
Array<{
|
|
time: string;
|
|
status: string;
|
|
subject: string;
|
|
bodyTemperature: string;
|
|
sistole: string;
|
|
diastole: string;
|
|
respirationRate: string;
|
|
analysis: string;
|
|
complaints: string;
|
|
plans: {
|
|
type: number;
|
|
plan: string;
|
|
}[];
|
|
}>
|
|
>;
|
|
laboratoriumResults: Record<
|
|
string,
|
|
Array<{
|
|
code: string;
|
|
date: string;
|
|
examination: string;
|
|
location: string;
|
|
}>
|
|
>;
|
|
};
|
|
|
|
export default function ServiceMonitoring() {
|
|
const navigate = useNavigate();
|
|
const controller = new AbortController();
|
|
|
|
const [value, setValue] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
const handleChange = (event: SyntheticEvent, newValue: number) => {
|
|
setValue(newValue);
|
|
};
|
|
|
|
const [data, setData] = useState<ServiceMonitoringProps | null>(null);
|
|
|
|
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
|
const { memberId, requestLogId } = useParams();
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
const response = await axios.get(`${corporateValue}/service-monitoring/${requestLogId}`, {
|
|
signal: controller.signal,
|
|
});
|
|
|
|
setData(response.data.data);
|
|
|
|
if (response.data.data.serviceCode !== 'IP') {
|
|
setValue(1);
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Error fetching data:', error.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [corporateValue]);
|
|
|
|
return (
|
|
<Page title="Service Monitoring">
|
|
<Grid container spacing={3} paddingX={2} sx={{ marginBottom: 5, marginTop: 1 }}>
|
|
<Grid item xs={12} paddingX="24px">
|
|
<Stack direction="row" alignItems="center" gap={3} marginLeft={1.5}>
|
|
<ArrowBackIosIcon
|
|
onClick={() => navigate(`/alarm-center/member/${memberId}}`)}
|
|
sx={{ cursor: 'pointer' }}
|
|
/>
|
|
<Typography variant="h5" sx={{ flexGrow: 1 }}>
|
|
Service Monitoring
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
|
|
{/* Item 1 */}
|
|
<Grid item xs={12}>
|
|
<Card sx={{ borderRadius: 2, padding: 3 }}>
|
|
<Grid container spacing={5}>
|
|
<Grid item xs={12}>
|
|
<Typography component={'h6'} fontWeight={700} fontSize={18}>
|
|
{loading ? <Skeleton animation="wave" width={175} /> : 'Employee Profile'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} container spacing={3}>
|
|
<Grid item container xs={12} md={6} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Company Name'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.companyName ? (
|
|
data.companyName
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} md={6} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Member ID'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.memberId ? (
|
|
data.memberId
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} md={6} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Full Name'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.fullName ? (
|
|
data.fullName
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} md={6} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Date of Birth'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.dateOfBirth ? (
|
|
fDateBirth(data.dateOfBirth)
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} md={6} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Phone Number'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.phoneNumber ? (
|
|
data.phoneNumber
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} md={6} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Email'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.email ? (
|
|
data.email
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item container xs={12} spacing={5}>
|
|
<Grid item container xs={12} md={6}>
|
|
<Card sx={{ borderRadius: 2, padding: 3 }}>
|
|
<Grid container spacing={5}>
|
|
<Grid item xs={12}>
|
|
<Typography component={'h6'} fontWeight={700} fontSize={18}>
|
|
{loading ? <Skeleton animation="wave" width={175} /> : 'Diagnose Summary'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} container spacing={3}>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Symptoms'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.symptoms ? (
|
|
data.symptoms
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Sign'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.sign ? (
|
|
data.sign
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Main Diagnose'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.mainDiagnose ? (
|
|
data.mainDiagnose
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={200} />
|
|
) : (
|
|
'Comparative Diagnosis'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.comparativeDiagnosis ? (
|
|
data.comparativeDiagnosis
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={200} />
|
|
) : (
|
|
'Files Result'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
{loading ? (
|
|
<Skeleton animation="wave" width={300} />
|
|
) : data && data.files && data.files.result.length > 0 ?
|
|
(
|
|
data.files.result.map((file, index) =>
|
|
(
|
|
(
|
|
<Stack direction="column" spacing={2} key={index}>
|
|
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
|
<a
|
|
href={file.url}
|
|
download={file.original_name ? file.original_name : 'test'}
|
|
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
|
target="_blank"
|
|
>
|
|
<Typography variant="body2" gutterBottom>{file.original_name ? file.original_name : '-'}</Typography>
|
|
</a>
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
)
|
|
)
|
|
) : (
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
-
|
|
</Typography>
|
|
)}
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={200} />
|
|
) : (
|
|
'Files Diagnosis'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
{loading ? (
|
|
<Skeleton animation="wave" width={300} />
|
|
) : data && data.files && data.files.diagnosis.length > 0 ?
|
|
(
|
|
data.files.diagnosis.map((file, index) =>
|
|
(
|
|
(
|
|
<Stack direction="column" spacing={2} key={index}>
|
|
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
|
<a
|
|
href={file.url}
|
|
download={file.original_name ? file.original_name : 'test'}
|
|
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
|
target="_blank"
|
|
>
|
|
<Typography variant="body2" gutterBottom>{file.original_name ? file.original_name : '-'}</Typography>
|
|
</a>
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
)
|
|
)
|
|
) : (
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
-
|
|
</Typography>
|
|
)}
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={200} />
|
|
) : (
|
|
'Files Kondisi'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
{loading ? (
|
|
<Skeleton animation="wave" width={300} />
|
|
) : data && data.files && data.files.kondisi.length > 0 ?
|
|
(
|
|
data.files.kondisi.map((file, index) =>
|
|
(
|
|
(
|
|
<Stack direction="column" spacing={2} key={index}>
|
|
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
|
<a
|
|
href={file.url}
|
|
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
|
target="_blank"
|
|
>
|
|
<Typography variant="body2" gutterBottom>{file.original_name ? file.original_name : '-'}</Typography>
|
|
</a>
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
)
|
|
)
|
|
) : (
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
-
|
|
</Typography>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Grid>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item container xs={12} md={6}>
|
|
<Card sx={{ borderRadius: 2, padding: 3 }}>
|
|
<Grid container spacing={5}>
|
|
<Grid item xs={12}>
|
|
<Typography component={'h6'} fontWeight={700} fontSize={18}>
|
|
{loading ? <Skeleton animation="wave" width={175} /> : 'Services'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} container spacing={3}>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Service Name'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.serviceName ? (
|
|
data.serviceName
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container spacing={1.5}>
|
|
<Grid item>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Benefits'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item container>
|
|
<Grid item>
|
|
{loading ? (
|
|
<Skeleton animation="wave" width={300} />
|
|
) : data && data.benefits && data.benefits.length > 0 ? (
|
|
data.benefits.map((benefitValue, benefitIndex) => (
|
|
<List
|
|
subheader={
|
|
<ListSubheader>
|
|
<Typography variant="subtitle2" color={'grey.700'}>
|
|
{benefitIndex + 1 + `. ` + benefitValue.name}
|
|
</Typography>
|
|
</ListSubheader>
|
|
}
|
|
key={benefitIndex}
|
|
>
|
|
<ListItem sx={{ paddingLeft: 4 }}>
|
|
<ListItemText>
|
|
<Typography
|
|
variant="subtitle2"
|
|
color={'grey.900'}
|
|
component={'div'}
|
|
display="flex"
|
|
alignItems={'center'}
|
|
gap={1}
|
|
>
|
|
<CircleIcon sx={{ width: 8 }} />
|
|
Amount Incurred : Rp {fSplit(benefitValue.amountApproved)}
|
|
</Typography>
|
|
</ListItemText>
|
|
</ListItem>
|
|
<ListItem sx={{ paddingLeft: 4 }}>
|
|
<ListItemText>
|
|
<Typography
|
|
variant="subtitle2"
|
|
color={'grey.900'}
|
|
component={'div'}
|
|
display="flex"
|
|
alignItems={'center'}
|
|
gap={1}
|
|
>
|
|
<CircleIcon sx={{ width: 8 }} />
|
|
Amount Approved : Rp {fSplit(benefitValue.amountApproved)}
|
|
</Typography>
|
|
</ListItemText>
|
|
</ListItem>
|
|
<ListItem sx={{ paddingLeft: 4 }}>
|
|
<ListItemText>
|
|
<Typography
|
|
variant="subtitle2"
|
|
color={'grey.900'}
|
|
component={'div'}
|
|
display="flex"
|
|
alignItems={'center'}
|
|
gap={1}
|
|
>
|
|
<CircleIcon sx={{ width: 8 }} />
|
|
Amount Not Approved : Rp {fSplit(benefitValue.amountNotAprroved)}
|
|
</Typography>
|
|
</ListItemText>
|
|
</ListItem>
|
|
<ListItem sx={{ paddingLeft: 4 }}>
|
|
<ListItemText>
|
|
<Typography
|
|
variant="subtitle2"
|
|
color={'grey.900'}
|
|
component={'div'}
|
|
display="flex"
|
|
alignItems={'center'}
|
|
gap={1}
|
|
>
|
|
<CircleIcon sx={{ width: 8 }} />
|
|
Excess Paid : Rp {fSplit(benefitValue.excessPaid)}
|
|
</Typography>
|
|
</ListItemText>
|
|
</ListItem>
|
|
<ListItem sx={{ paddingLeft: 4 }}>
|
|
<ListItemText>
|
|
<Typography
|
|
variant="subtitle2"
|
|
color={'grey.900'}
|
|
component={'div'}
|
|
display="flex"
|
|
alignItems={'center'}
|
|
gap={1}
|
|
>
|
|
<CircleIcon sx={{ width: 8 }} />
|
|
Description : {benefitValue.description}
|
|
</Typography>
|
|
</ListItemText>
|
|
</ListItem>
|
|
</List>
|
|
))
|
|
) : (
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
-
|
|
</Typography>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container spacing={1.5}>
|
|
<Grid item>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Benefits Total'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Incurred : Rp. '}
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.benefitTotal ? (
|
|
fSplit(data.benefitTotal.totalIncurred)
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Approve : Rp. '}
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.benefitTotal ? (
|
|
fSplit(data.benefitTotal.totalApprove)
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Not Approve : Rp.'}
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.benefitTotal ? (
|
|
fSplit(data.benefitTotal.totalNotApprove)
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Excess : Rp.'}
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.benefitTotal ? (
|
|
fSplit(data.benefitTotal.totalExcess)
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Hospital'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.hospital ? (
|
|
data.hospital
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Admission Date'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.admissionDate ? (
|
|
fDateSuffix(data.admissionDate)
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Discharge Date'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.dischargeDate ? (
|
|
fDateSuffix(data.dischargeDate)
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Card>
|
|
</Grid>
|
|
</Grid>
|
|
{/* <Grid item xs={12} lg={12} md={12}>
|
|
<Card sx={{ borderRadius: '16px', padding: '24px' }}>
|
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
<Typography>Benefit Item</Typography>
|
|
</Box>
|
|
</Card>
|
|
|
|
</Grid> */}
|
|
<Grid item xs={12} lg={12} md={12}>
|
|
{loading ? (
|
|
<Card sx={{ borderRadius: '16px', padding: '24px' }}>
|
|
<Grid container>
|
|
<Grid item xs={2}>
|
|
<Skeleton animation="wave" sx={{ width: 'calc(100% - 24px)' }} />
|
|
</Grid>
|
|
<Grid item xs={2}>
|
|
<Skeleton animation="wave" sx={{ width: 'calc(100% - 24px)' }} />
|
|
</Grid>
|
|
<Grid item xs={12} paddingTop={2}>
|
|
<Skeleton animation="wave" sx={{ width: 'calc(100% - 24px)' }} />
|
|
</Grid>
|
|
</Grid>
|
|
</Card>
|
|
) : (
|
|
<Card sx={{ borderRadius: '16px', padding: '24px' }}>
|
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
<StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
|
|
<StyledTab label="Daily Monitoring" {...a11yProps(0)} />
|
|
<StyledTab label="Laboratorium Result" {...a11yProps(1)} />
|
|
</StyledTabs>
|
|
</Box>
|
|
<TabPanel value={value} index={0}>
|
|
<Grid item xs={12} md={12} padding={data && data.dailyMonitorings ? 0 : 3}>
|
|
{data && data.dailyMonitorings ? (
|
|
<Timeline
|
|
sx={{
|
|
gap: 2,
|
|
paddingY: 2,
|
|
paddingX: 1.5,
|
|
[`& .${timelineItemClasses.root}:before`]: {
|
|
flex: 0,
|
|
padding: 0,
|
|
},
|
|
}}
|
|
>
|
|
{data &&
|
|
data.dailyMonitorings &&
|
|
Object.keys(data.dailyMonitorings).length > 0 &&
|
|
Object.keys(data.dailyMonitorings).map((date, dateIndex) => (
|
|
<TimelineItem key={dateIndex}>
|
|
<TimelineSeparator>
|
|
<TimelineDot />
|
|
<TimelineConnector />
|
|
</TimelineSeparator>
|
|
<TimelineContent
|
|
sx={{
|
|
'&.MuiTimelineContent-root': {
|
|
paddingX: 2,
|
|
},
|
|
}}
|
|
>
|
|
<Typography variant="subtitle1" marginBottom={2}>
|
|
{date ? date : '-'}
|
|
</Typography>
|
|
{data.dailyMonitorings[date].map(
|
|
(dailyMonitoring, dailyMonitoringIndex) => (
|
|
<Card
|
|
key={dailyMonitoringIndex}
|
|
sx={{
|
|
padding: 3,
|
|
marginBottom:
|
|
dailyMonitoringIndex !==
|
|
data.dailyMonitorings[date].length - 1
|
|
? 2
|
|
: 0,
|
|
}}
|
|
>
|
|
<Stack
|
|
direction={'row'}
|
|
sx={{
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<Label>
|
|
{dailyMonitoring.time ? dailyMonitoring.time : '-'}
|
|
</Label>
|
|
<Label color="success" sx={{ marginRight: 0 }}>
|
|
{dailyMonitoring.status ? dailyMonitoring.status : '-'}
|
|
</Label>
|
|
</Stack>
|
|
<Divider sx={{ marginY: 2 }} />
|
|
<Stack spacing={3} sx={{ paddingY: 1, paddingX: 3 }}>
|
|
<Grid item xs={12} lg={12} md={12}>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h6">Subject</Typography>
|
|
<Typography variant="inherit">
|
|
{dailyMonitoring.subject
|
|
? dailyMonitoring.subject
|
|
: '-'}
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={12} lg={12} md={12}>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h6" sx={{ paddingBottom: 2 }}>
|
|
Objektif
|
|
</Typography>
|
|
</Stack>
|
|
<Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="inherit">
|
|
Body Temperature
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="subtitle1">
|
|
{dailyMonitoring.bodyTemperature
|
|
? dailyMonitoring.bodyTemperature
|
|
: '-'}
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
</Stack>
|
|
<Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="inherit">Sistole</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="subtitle1">
|
|
{dailyMonitoring.sistole
|
|
? dailyMonitoring.sistole
|
|
: '-'}
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
</Stack>
|
|
<Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="inherit">Diastole</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="subtitle1">
|
|
{dailyMonitoring.diastole
|
|
? dailyMonitoring.diastole
|
|
: '-'}
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
</Stack>
|
|
<Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="inherit">
|
|
Respiration Rate
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="subtitle1">
|
|
{dailyMonitoring.respirationRate
|
|
? dailyMonitoring.respirationRate
|
|
: '-'}
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
</Stack>
|
|
<Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="inherit">Complaints</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={6} lg={6} md={6}>
|
|
<Stack>
|
|
<Typography variant="subtitle1">
|
|
{dailyMonitoring.complaints
|
|
? dailyMonitoring.complaints
|
|
: '-'}
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
</Stack>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h6" sx={{ paddingTop: 2 }}>
|
|
Analysis
|
|
</Typography>
|
|
</Stack>
|
|
<Stack direction={'row'} sx={{ paddingY: 2 }} spacing={2}>
|
|
<Grid item xs={12} lg={12} md={12}>
|
|
<Stack>
|
|
<Typography variant="inherit">
|
|
{dailyMonitoring.analysis
|
|
? dailyMonitoring.analysis
|
|
: '-'}
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
</Stack>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h6" sx={{ paddingTop: 2 }}>
|
|
Medical Plan :
|
|
</Typography>
|
|
</Stack>
|
|
<Stack direction={'row'} spacing={2}>
|
|
<Grid item xs={12} lg={12} md={12}>
|
|
<Stack marginLeft={5}>
|
|
{data.dailyMonitorings ? (
|
|
<ul style={{ listStyleType: 'disc' }}>
|
|
{dailyMonitoring.plans.length > 0 ? (
|
|
dailyMonitoring.plans.map((plan, planIndex) =>
|
|
plan.type === 1 ? (
|
|
<li key={planIndex}>{plan.plan}</li>
|
|
) : null
|
|
)
|
|
) : (
|
|
<li>No plans available</li>
|
|
)}
|
|
</ul>
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Stack>
|
|
|
|
</Grid>
|
|
</Stack>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h6" sx={{ paddingTop: 2 }}>
|
|
Non Medikamentosa Plan :
|
|
</Typography>
|
|
</Stack>
|
|
<Stack direction={'row'} spacing={2}>
|
|
<Grid item xs={12} lg={12} md={12}>
|
|
<Stack marginLeft={5}>
|
|
{data.dailyMonitorings ? (
|
|
<ul style={{ listStyleType: 'disc' }}>
|
|
{dailyMonitoring.plans.length > 0 ? (
|
|
dailyMonitoring.plans.map((plan, planIndex) =>
|
|
plan.type === 2 ? (
|
|
<li key={planIndex}>{plan.plan}</li>
|
|
) : null
|
|
)
|
|
) : (
|
|
<li>No plans available</li>
|
|
)}
|
|
</ul>
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Stack>
|
|
|
|
</Grid>
|
|
</Stack>
|
|
</Grid>
|
|
</Stack>
|
|
</Card>
|
|
)
|
|
)}
|
|
</TimelineContent>
|
|
</TimelineItem>
|
|
))}
|
|
</Timeline>
|
|
) : (
|
|
<Typography variant="subtitle1" textAlign={'center'}>
|
|
No Data Found
|
|
</Typography>
|
|
)}
|
|
</Grid>
|
|
</TabPanel>
|
|
|
|
<TabPanel value={value} index={1}>
|
|
<Grid item xs={12} padding={data && data.laboratoriumResults ? 0 : 3}>
|
|
{data &&
|
|
data.laboratoriumResults &&
|
|
Object.keys(data.laboratoriumResults).length > 0 ? (
|
|
Object.keys(data.dailyMonitorings).map((date, dateIndex) => (
|
|
<Card
|
|
sx={{
|
|
padding: 3,
|
|
border: '1px solid #919EAB52',
|
|
boxShadow: 'none',
|
|
marginTop: 5,
|
|
}}
|
|
key={dateIndex}
|
|
>
|
|
<Stack>
|
|
<Typography variant="subtitle1">{date ? date : '-'}</Typography>
|
|
{data.laboratoriumResults[date].map(
|
|
(laboratoriumResult, laboratoriumResultIndex) => (
|
|
<Card
|
|
key={laboratoriumResultIndex}
|
|
sx={{ marginTop: 3, paddingX: 2.5, paddingY: 2 }}
|
|
>
|
|
<Label>
|
|
{laboratoriumResult.code ? laboratoriumResult.code : '-'}
|
|
</Label>
|
|
<Table sx={{ marginY: 2 }}>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Date</TableCell>
|
|
<TableCell>Examination</TableCell>
|
|
<TableCell>Location</TableCell>
|
|
{/* <TableCell /> */}
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell>
|
|
<Label>
|
|
{laboratoriumResult.date ? laboratoriumResult.date : '-'}
|
|
</Label>
|
|
</TableCell>
|
|
<TableCell>
|
|
{laboratoriumResult.examination
|
|
? laboratoriumResult.examination
|
|
: '-'}
|
|
</TableCell>
|
|
<TableCell>
|
|
{laboratoriumResult.location
|
|
? laboratoriumResult.location
|
|
: '-'}
|
|
</TableCell>
|
|
{/* <TableMoreMenu
|
|
actions={
|
|
<>
|
|
<MenuItem
|
|
onClick={() => handleDownloadClick(laboratoriumResult.file)}
|
|
>
|
|
<DownloadIcon />
|
|
Download
|
|
</MenuItem>
|
|
</>
|
|
}
|
|
/> */}
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</Card>
|
|
)
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<Typography padding={3} variant="subtitle1" textAlign={'center'}>
|
|
No Data Found
|
|
</Typography>
|
|
)}
|
|
</Grid>
|
|
</TabPanel>
|
|
</Card>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
</Page>
|
|
);
|
|
}
|