1422 lines
65 KiB
TypeScript
Executable File
1422 lines
65 KiB
TypeScript
Executable File
// mui
|
|
import {
|
|
Box,
|
|
Tabs,
|
|
Tab,
|
|
Grid,
|
|
Card,
|
|
Stack,
|
|
Typography,
|
|
TableHead,
|
|
TableCell,
|
|
TableBody,
|
|
Table,
|
|
TableRow,
|
|
MenuItem,
|
|
Skeleton,
|
|
List,
|
|
ListSubheader,
|
|
ListItem,
|
|
ListItemText,
|
|
ListItemButton,
|
|
Divider,
|
|
CardContent,
|
|
LinearProgress
|
|
} 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';
|
|
import { fCurrency } from '../../utils/formatNumber';
|
|
// 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';
|
|
|
|
import useAuth from '../../hooks/useAuth';
|
|
|
|
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;
|
|
object: string;
|
|
bodyTemperature: number;
|
|
sistole: number;
|
|
diastole: number;
|
|
respirationRate: number;
|
|
analysis: string;
|
|
complaints: string;
|
|
plans: {
|
|
type: number;
|
|
plan: string;
|
|
}[];
|
|
files: {
|
|
type: string;
|
|
name: string;
|
|
original_name: string;
|
|
path: string;
|
|
}[];
|
|
}>
|
|
>;
|
|
laboratoriumResults: Record<
|
|
string,
|
|
Array<{
|
|
code: string;
|
|
date: string;
|
|
examination: string;
|
|
location: string;
|
|
files: {
|
|
type: string;
|
|
name: string;
|
|
original_name: string;
|
|
path: string;
|
|
}[];
|
|
}>
|
|
>;
|
|
keterangan: string;
|
|
catatan: string;
|
|
};
|
|
|
|
export default function ServiceMonitoring() {
|
|
const {user} = useAuth();
|
|
const checkIfNameExists = (name) => {
|
|
return user.user.permissions.some(item => item.name === name);
|
|
};
|
|
|
|
const nameToCheck = 'service-monitoring-limit-client-portal';
|
|
const fileBillingCheck = 'file-billing-client-portal';
|
|
const fileDiagnosisCheck = 'file-diagnosis-client-portal';
|
|
const filePendukungCheck = 'file-pendukung-medis-client-portal';
|
|
const benefitCheck = 'benefit-client-portal';
|
|
|
|
const doesNameExist = checkIfNameExists(nameToCheck);
|
|
const viewfileBilling = checkIfNameExists(fileBillingCheck);
|
|
const viewfileDiagnosis = checkIfNameExists(fileDiagnosisCheck);
|
|
const viewfilePendukungCheck = checkIfNameExists(filePendukungCheck);
|
|
const viewBenefitCheck = checkIfNameExists(benefitCheck);
|
|
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();
|
|
const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0 });
|
|
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);
|
|
}
|
|
|
|
var member_id = response.data.data.member_id;
|
|
const fetchDepositData = async () => {
|
|
try {
|
|
const response = await axios.get(`${corporateValue}/get-limits/${member_id}`);
|
|
setDepositData(response.data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch deposit data:', error);
|
|
}
|
|
};
|
|
|
|
fetchDepositData();
|
|
} catch (error: any) {
|
|
console.error('Error fetching data:', error.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [corporateValue]);
|
|
|
|
|
|
const renderHTML = (data:string) => {
|
|
return (
|
|
<div style={{marginLeft: 20}}
|
|
dangerouslySetInnerHTML={{__html: data}}
|
|
/>
|
|
);
|
|
}
|
|
const formatNumber = (number) => {
|
|
return new Intl.NumberFormat('id-ID').format(number);
|
|
};
|
|
|
|
console.log(viewfileBilling, 'test')
|
|
const LimitPlanCard = ({ title, current, total }) => (
|
|
<Card variant="outlined" sx={{ minWidth: 200, m: 1 }}>
|
|
<CardContent>
|
|
<Typography variant="h6" component="div">
|
|
{title}
|
|
</Typography>
|
|
<Typography variant="subtitle2" color="text.secondary">
|
|
Yearly Limits
|
|
</Typography>
|
|
<Typography variant="subtitle1">
|
|
{formatNumber(current)} / {formatNumber(total)}
|
|
</Typography>
|
|
<LinearProgress variant="determinate" value={(current / total) * 100} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
const plans = [
|
|
{ title: 'Outpatient', current: 200000, total: 1000000 },
|
|
{ title: 'Inpatient', current: 1000000, total: 5000000 },
|
|
{ title: 'Dental', current: 250000, total: 1000000 },
|
|
{ title: 'Maternity', current: 0, total: 3000000 },
|
|
];
|
|
|
|
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 container spacing={3}>
|
|
<Grid item container xs={12} md={6} spacing={1.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}>
|
|
<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 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 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 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 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 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 item container xs={12} md={6} spacing={1.5}>
|
|
{doesNameExist ? (
|
|
<Stack direction="column" style={{width:'100%'}}>
|
|
<Box flexWrap="wrap" justifyContent="left">
|
|
<Card variant="outlined" sx={{ minWidth: 200, marginBottom: 1, borderRadius: 2, padding: 0 }}>
|
|
<CardContent>
|
|
<Typography variant="h6" component="div">
|
|
Total Limit
|
|
</Typography>
|
|
<Typography variant="subtitle2" color="text.secondary">
|
|
Yearly Limits
|
|
</Typography>
|
|
<Typography variant="subtitle1">
|
|
{formatNumber(depositData.usage)} / {formatNumber(depositData.deposit)}
|
|
</Typography>
|
|
<LinearProgress variant="determinate" value={(depositData.usage / depositData.deposit) * 100} />
|
|
</CardContent>
|
|
</Card>
|
|
</Box>
|
|
<Card sx={{ borderRadius: 2, padding: 3 }}>
|
|
<Typography component={'h6'} fontWeight={700} fontSize={18}>
|
|
Limit Plan
|
|
</Typography>
|
|
<Box display="flex" flexWrap="wrap" justifyContent="left">
|
|
{depositData.services?.map((plan) => (
|
|
<LimitPlanCard
|
|
key={plan.title}
|
|
title={plan.title}
|
|
current={plan.current}
|
|
total={plan.total}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Card>
|
|
</Stack>
|
|
) : ''}
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12} paddingY={2}>
|
|
<Typography component={'h6'} fontWeight={700} fontSize={18}>
|
|
{loading ? <Skeleton animation="wave" width={175} /> : 'Detail Letter Of Guarante'}
|
|
</Typography>
|
|
</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 Documentation'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
{loading ? (
|
|
<Skeleton animation="wave" width={300} />
|
|
) : data && data.files && data.files.result.length > 0 ?
|
|
(
|
|
data.files.result.map((file, index) =>
|
|
(
|
|
file.type == 'final-log-result' && viewfilePendukungCheck ?
|
|
(
|
|
<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>
|
|
) :
|
|
file.type == 'final-log-diagnosis' && viewfileDiagnosis ?
|
|
(
|
|
<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>
|
|
) :
|
|
file.type == 'final-log-kondisi' && viewfileBilling ?
|
|
(
|
|
<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>
|
|
{/* Keterangan */}
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Keterangan'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.keterangan ? (
|
|
data.keterangan
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
{/* Catatan */}
|
|
<Grid item container xs={12} spacing={1.5}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color={'grey.600'}>
|
|
{loading ? <Skeleton animation={'wave'} width={200} /> : 'Catatan'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle1" color={'grey.800'}>
|
|
{loading ? (
|
|
<Skeleton animation={'wave'} width={300} />
|
|
) : data && data.catatan ? (
|
|
data.catatan
|
|
) : (
|
|
'-'
|
|
)}
|
|
</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>
|
|
{viewBenefitCheck ? (
|
|
<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>
|
|
|
|
) : ('')
|
|
}
|
|
|
|
{viewBenefitCheck ? (
|
|
<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> */}
|
|
{data?.serviceCode === 'IP' ? (
|
|
<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="Pemeriksaan Penunjang" {...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
|
|
? renderHTML(dailyMonitoring.subject)
|
|
: '-'}
|
|
</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={12} lg={12} md={12}>
|
|
<Stack spacing={1} sx={{ paddingBottom: 2 }}>
|
|
<Typography variant="h6">
|
|
Objektif
|
|
</Typography>
|
|
<Typography variant="inherit">
|
|
{dailyMonitoring.object
|
|
? renderHTML(dailyMonitoring.object)
|
|
: '-'}
|
|
</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 > 0
|
|
? dailyMonitoring.bodyTemperature + ' Cel'
|
|
: '-'}
|
|
</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 > 0
|
|
? dailyMonitoring.sistole + ' mm[Hg]'
|
|
: '-'}
|
|
</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 > 0
|
|
? dailyMonitoring.diastole + ' mm[Hg]'
|
|
: '-'}
|
|
</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 > 0
|
|
? dailyMonitoring.respirationRate + ' / min'
|
|
: '-'}
|
|
</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
|
|
? renderHTML(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}>{renderHTML(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}>{renderHTML(plan.plan)}</li>
|
|
) : null
|
|
)
|
|
) : (
|
|
<li>No plans available</li>
|
|
)}
|
|
</ul>
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Stack>
|
|
|
|
</Grid>
|
|
</Stack>
|
|
|
|
<Stack spacing={1}>
|
|
<Typography variant="h6" sx={{ paddingTop: 2 }}>
|
|
File Documentation :
|
|
</Typography>
|
|
</Stack>
|
|
<Stack direction={'row'} spacing={2}>
|
|
<Stack marginLeft={5}>
|
|
{data.dailyMonitorings ? (
|
|
<ul style={{ listStyleType: 'disc' }}>
|
|
{dailyMonitoring.files.length > 0 ? (
|
|
dailyMonitoring.files.map((file, fileIndex) =>
|
|
(
|
|
<li key={fileIndex}>
|
|
<a
|
|
href={file.path}
|
|
download={file.original_name ? file.original_name : 'test'}
|
|
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
|
target="_blank"
|
|
>
|
|
{file.original_name}
|
|
</a>
|
|
</li>
|
|
)
|
|
)
|
|
) : (
|
|
<li>-</li>
|
|
)}
|
|
</ul>
|
|
) : (
|
|
<span>-</span>
|
|
)}
|
|
</Stack>
|
|
</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.laboratoriumResults).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 || '-'}</Label>
|
|
<Table sx={{ marginY: 2 }}>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Date</TableCell>
|
|
<TableCell>Examination</TableCell>
|
|
<TableCell>Location</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell><Label>{laboratoriumResult.date || '-'}</Label></TableCell>
|
|
<TableCell>{laboratoriumResult.examination || '-'}</TableCell>
|
|
<TableCell>{laboratoriumResult.location || '-'}</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>
|
|
{data.dailyMonitorings ? (
|
|
<ul style={{ listStyleType: 'disc' }}>
|
|
{laboratoriumResult.files.length > 0 ? (
|
|
laboratoriumResult.files.map((file, fileIndex) =>
|
|
(
|
|
<li key={fileIndex}>
|
|
<a
|
|
href={file.path}
|
|
download={file.original_name ? file.original_name : 'test'}
|
|
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
|
target="_blank"
|
|
>
|
|
{file.original_name}
|
|
</a>
|
|
</li>
|
|
)
|
|
)
|
|
) : (
|
|
<li>-</li>
|
|
)}
|
|
</ul>
|
|
) : (
|
|
<span>-</span>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</Card>
|
|
))}
|
|
</Stack>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<Typography padding={3} variant="subtitle1" textAlign={'center'}>
|
|
No Data Found
|
|
</Typography>
|
|
)}
|
|
</Grid>
|
|
</TabPanel>
|
|
</Card>
|
|
)}
|
|
</Grid>
|
|
) : null}
|
|
</Grid>
|
|
</Page>
|
|
);
|
|
}
|