update fitur alarm center
This commit is contained in:
@@ -9,9 +9,14 @@ import {
|
||||
Card,
|
||||
Stack,
|
||||
Typography,
|
||||
TableHead,
|
||||
TableCell,
|
||||
TableBody,
|
||||
Table,
|
||||
TableRow,
|
||||
} from '@mui/material';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { Favorite } from '@mui/icons-material';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
import Iconify from '../../components/Iconify';
|
||||
@@ -21,8 +26,15 @@ 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 { fDate } from '../../utils/formatTime';
|
||||
import { fDate, fDateSuffix, fDateTime, fDateTimeSuffix } 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 Select from '../../theme/overrides/Select';
|
||||
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
||||
import { MenuItem } from '@mui/material';
|
||||
// sections
|
||||
// import ListTable from '../../sections/claimreports/ListTable';
|
||||
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
|
||||
@@ -42,7 +54,7 @@ function TabPanel(props: TabPanelProps) {
|
||||
hidden={value !== index}
|
||||
id={`simple-tabpanel-${index}`}
|
||||
aria-labelledby={`simple-tab-${index}`}
|
||||
style={{ backgroundColor: '#F9FAFB' }}
|
||||
// style={{ backgroundColor: '#F9FAFB' }}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
@@ -61,6 +73,8 @@ function a11yProps(index: number) {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
interface StyledTabsProps {
|
||||
children?: React.ReactNode;
|
||||
value: number;
|
||||
@@ -71,7 +85,7 @@ const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
|
||||
'& .MuiTabs-indicator': {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
backgroundColor: '19BBBB',
|
||||
},
|
||||
'& .MuiTabs-indicatorSpan': {
|
||||
maxWidth: 40,
|
||||
@@ -85,27 +99,73 @@ interface StyledTabProps {
|
||||
icon?: string | React.ReactElement;
|
||||
}
|
||||
|
||||
|
||||
const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
|
||||
({ theme }) => ({
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
fontSize: theme.typography.pxToRem(20),
|
||||
color: theme.palette.primary.main,
|
||||
maxWidth: '100%',
|
||||
color: '#637381',
|
||||
maxWidth: '15%',
|
||||
flex: 1,
|
||||
margin: '0 !important',
|
||||
'&.Mui-selected': {
|
||||
color: '#FFF',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: '#212B36',
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
color: '#FFF',
|
||||
color: '#212B36',
|
||||
opacity: 1,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
type Data = {
|
||||
id: number,
|
||||
company_name: string,
|
||||
member_name: string,
|
||||
member_code: string,
|
||||
member_id: number,
|
||||
phone: string,
|
||||
email: string,
|
||||
birth_date: string,
|
||||
symptoms: string,
|
||||
sign: string,
|
||||
main_diagnose: string,
|
||||
main_diagnose_code: string,
|
||||
comparative_diagnosis: string,
|
||||
comparative_diagnosis_code: string,
|
||||
medical_evacuation: string,
|
||||
benefit_name: string,
|
||||
hospital: string,
|
||||
admission_date: string,
|
||||
discharge_date: string,
|
||||
dialy_monitoring: DailyMonitoring[],
|
||||
laboratorium_result: LaboratoriumResult[],
|
||||
|
||||
}
|
||||
|
||||
type DailyMonitoring = {
|
||||
date: string,
|
||||
time: string,
|
||||
status: string,
|
||||
subject_title: string,
|
||||
body_temperature: string,
|
||||
sistole: string,
|
||||
diastole: string,
|
||||
respiration_rate: string,
|
||||
analisis_title: string,
|
||||
Perencanaan: string,
|
||||
|
||||
}
|
||||
|
||||
type LaboratoriumResult = {
|
||||
datetime: string,
|
||||
reimbursement_code: string,
|
||||
examination: string,
|
||||
location: string,
|
||||
files: string,
|
||||
}
|
||||
|
||||
export default function ServiceMonitoring() {
|
||||
const { themeStretch } = useSettings();
|
||||
const navigate = useNavigate();
|
||||
@@ -115,234 +175,436 @@ export default function ServiceMonitoring() {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const [data, setData] = useState({});
|
||||
const [data, setData] = useState<Data | null>(null);
|
||||
const [corporate, setCorporate] = useState();
|
||||
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
const { id } = useParams();
|
||||
const claimId = '2';
|
||||
// console.log('id', id);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
console.log('fetching data...');
|
||||
axios
|
||||
.get('/data/' + id)
|
||||
.then((response) => {
|
||||
// console.log('data fetched...', response.data);
|
||||
setData(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('error fetching data...', error);
|
||||
});
|
||||
(async () => {
|
||||
|
||||
axios
|
||||
.get('/corporate-manage/' + corporateValue)
|
||||
.then((response) => {
|
||||
// console.log('corporate fetched...', response.data);
|
||||
setCorporate(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('error fetching corporate...', error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// console.log('Data:', data);
|
||||
const [encounterData, setEncounterData] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('fetching encounter data...');
|
||||
axios
|
||||
.get('/claims/${claim_id}/encounters')
|
||||
.then((response) => {
|
||||
// console.log('encounter data fetched...', response.data);
|
||||
setEncounterData(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('error fetching encounter data...', error);
|
||||
});
|
||||
}, []);
|
||||
await new Promise((resolve) => setTimeout(resolve, 250));
|
||||
|
||||
const response = await axios.get(`${corporateValue}/service-monitoring/${id}`);
|
||||
setData(response.data.data);
|
||||
})();
|
||||
}, [corporateValue]);
|
||||
|
||||
console.log(data?.laboratorium_result)
|
||||
return (
|
||||
<Page title="Service Monitoring 123456">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
|
||||
<IconButton
|
||||
onClick={() => navigate('/alarm-center')}
|
||||
sx={{ marginRight: '10px', color: '#424242' }}
|
||||
>
|
||||
<Iconify icon="heroicons-outline:arrow-narrow-left" />
|
||||
</IconButton>
|
||||
<Typography variant="h5">Service Monitoring</Typography>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
sx={{
|
||||
backgroundColor: '#DFE3E8',
|
||||
color: '#212B36',
|
||||
paddingX: 2,
|
||||
paddingY: 1,
|
||||
marginLeft: 3,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Iconify icon="akar-icons:check" sx={{ marginRight: 1 }} />
|
||||
<Typography variant="caption">Done</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Grid container spacing={3} sx={{ marginBottom: 5 }}>
|
||||
<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">
|
||||
<ArrowBackIosIcon
|
||||
onClick={() => navigate(`/alarm-center/member/${data.member_id}}`)}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
/>
|
||||
<Typography variant="h5" sx={{ flexGrow: 1 }}>
|
||||
Service Monitoring
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
{/* Item 1 */}
|
||||
<Grid item xs={4} lg={4} md={6}>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Card sx={{ borderRadius: '6px' }}>
|
||||
<Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||
sx={{ paddingY: 2, paddingX: 2, marginTop: 2 }}
|
||||
>
|
||||
<Iconify icon="bxs:user" width={22} height={18} sx={{ marginRight: '10px' }} />
|
||||
<Typography>Employee Profiles</Typography>
|
||||
<Typography variant='h5'>Employee Profiles</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={1} sx={{ paddingY: 2, paddingX: 2 }}>
|
||||
<Grid item xs={6} lg={6} md={6}>
|
||||
<Stack>
|
||||
<Typography variant="inherit">Company Name</Typography>
|
||||
<Typography variant="h6">{data?.company_name}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} md={6}>
|
||||
<Stack>
|
||||
<Typography variant="inherit">Member ID</Typography>
|
||||
<Typography variant="h6">{data?.member_code || 'Loading...'}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||
<Stack spacing={2}>
|
||||
<Grid item xs={6} lg={6} md={6}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Nama perusahaan</Typography>
|
||||
<Typography variant="body2">{corporate?.name}</Typography>
|
||||
<Typography variant="inherit">Full Name</Typography>
|
||||
<Typography variant="h6">{data?.member_name}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} md={6}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Nama Lengkap</Typography>
|
||||
<Typography variant="body2">{data?.name || 'Loading...'}</Typography>
|
||||
<Typography variant="inherit">Date of Birth</Typography>
|
||||
<Typography variant="h6">{data?.birth_date || 'Loading...'}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={1} sx={{ paddingY: 2, paddingX: 2 }}>
|
||||
<Grid item xs={6} lg={6} md={6}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Tanggal lahir</Typography>
|
||||
<Typography variant="body2">
|
||||
{data?.birth_date ? fDate(data?.birth_date) : ''}
|
||||
</Typography>
|
||||
<Typography variant="inherit">Phone Number</Typography>
|
||||
<Typography variant="h6">{data?.phone}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} md={6}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Email</Typography>
|
||||
<Typography variant="body2">{data?.email}</Typography>
|
||||
<Typography variant="inherit">Email</Typography>
|
||||
<Typography variant="h6">{data?.email || 'Loading...'}</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">No telepon</Typography>
|
||||
<Typography variant="body2">{data?.phone}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">ID Karyawan</Typography>
|
||||
<Typography variant="body2">12345678</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/* Item 2 */}
|
||||
<Grid item xs={4} lg={4} md={6}>
|
||||
<Card sx={{ borderRadius: '6px', height: '100%' }}>
|
||||
<Grid item xs={6} lg={6} md={6}>
|
||||
<Card sx={{ borderRadius: '6px', paddingLeft:2 }}>
|
||||
<Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||
sx={{ paddingY: 2, paddingX: 2, marginTop: 2 }}
|
||||
>
|
||||
<Iconify
|
||||
icon="heroicons-solid:clipboard-list"
|
||||
width={22}
|
||||
height={18}
|
||||
sx={{ marginRight: '10px' }}
|
||||
/>
|
||||
<Typography>Diagnose Summary</Typography>
|
||||
<Typography variant='h5'>Diagnose Summary</Typography>
|
||||
</Stack>
|
||||
<Stack spacing={2} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Gejala</Typography>
|
||||
<Typography variant="body2">Nyeri dada</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Tanda</Typography>
|
||||
<Typography variant="body2">Sesak Napas</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Main Diagnose</Typography>
|
||||
<Typography variant="body2">
|
||||
J46 Status asthmaticus, Acute severe asthma
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Diagnosis pembanding</Typography>
|
||||
<Typography variant="body2">K21 Gastro-oesophageal reflux disease</Typography>
|
||||
</Stack>
|
||||
<Stack spacing={3} sx={{ paddingY: 2, paddingX: 2 }}>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Symptoms</Typography>
|
||||
<Typography variant="h6">{data?.symptoms}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Sign</Typography>
|
||||
<Typography variant="h6">{data?.sign || 'Loading...'}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Main Diagnosis</Typography>
|
||||
<Stack direction={'row'}>
|
||||
<Typography variant="h6">{data?.main_diagnose}</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
background: 'rgba(145, 158, 171, 0.16)',
|
||||
color: '#637381',
|
||||
borderRadius: 1,
|
||||
marginLeft: 1,
|
||||
paddingX: 1,
|
||||
paddingY: 1,
|
||||
marginRight: 'auto',
|
||||
}} variant='overline'
|
||||
>{data?.main_diagnose_code}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Comparative Diagnosis</Typography>
|
||||
<Stack direction={'row'}>
|
||||
<Typography variant="h6">{data?.comparative_diagnosis}</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
background: 'rgba(145, 158, 171, 0.16)',
|
||||
color: '#637381',
|
||||
borderRadius: 1,
|
||||
marginLeft: 1,
|
||||
paddingX: 1,
|
||||
paddingY: 1,
|
||||
marginRight: 'auto',
|
||||
}} variant='overline'
|
||||
>{data?.comparative_diagnosis_code}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={8}>
|
||||
<Typography variant="inherit"></Typography>
|
||||
<Typography variant="h6"></Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/* Item 3 */}
|
||||
<Grid item xs={4} lg={4} md={6}>
|
||||
<Card sx={{ borderRadius: '6px', height: '100%' }}>
|
||||
<Grid item xs={6} lg={6} md={6}>
|
||||
<Card sx={{ borderRadius: '6px', paddingLeft:2 }}>
|
||||
<Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||
sx={{ paddingY: 2, paddingX: 2, marginTop: 2 }}
|
||||
>
|
||||
<Iconify
|
||||
icon="iconoir:healthcare"
|
||||
width={22}
|
||||
height={18}
|
||||
sx={{ marginRight: '10px' }}
|
||||
/>
|
||||
<Typography>Services</Typography>
|
||||
<Typography variant='h5'>Services</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Evakuasi medis</Typography>
|
||||
<Typography variant="body2">Land Transportation</Typography>
|
||||
<Stack spacing={3} sx={{ paddingY: 2, paddingX: 2 }}>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Medical Evacuation</Typography>
|
||||
<Typography variant="h6">{data?.medical_evacuation}</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Rumah sakit</Typography>
|
||||
<Typography variant="body2">Primaya Hospital</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Benefit Name</Typography>
|
||||
<Typography variant="h6">{data?.benefit_name || 'Loading...'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={16}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Tanggal mulai</Typography>
|
||||
<Typography variant="body2">17 Aug 2022</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Selesai</Typography>
|
||||
<Typography variant="body2">18 Aug 2022</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Hospital</Typography>
|
||||
<Typography variant="h6">{data?.hospital}</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Daftar layanan</Typography>
|
||||
<Typography variant="body2">
|
||||
Inpatient, Medivac (Medical Evacuation)
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Admission Date</Typography>
|
||||
<Typography variant="h6">{data?.admission_date ? fDateSuffix(data?.admission_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="inherit">Discharge Date</Typography>
|
||||
<Typography variant="h6">{ data?.discharge_date ? fDateSuffix(data?.discharge_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item sm>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
|
||||
<StyledTab icon={<Favorite />} label="Daily Monitoring" {...a11yProps(0)} />
|
||||
<StyledTab
|
||||
icon={<Iconify icon="heroicons-solid:beaker" />}
|
||||
label="Laboratorium Result"
|
||||
{...a11yProps(1)}
|
||||
/>
|
||||
</StyledTabs>
|
||||
</Box>
|
||||
<TabPanel value={value} index={0}>
|
||||
Item One
|
||||
</TabPanel>
|
||||
<TabPanel value={value} index={1}>
|
||||
Item Two
|
||||
</TabPanel>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Card sx={{ borderRadius: '6px' }}>
|
||||
<Box sx={{ margin:5, 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 container>
|
||||
<Grid item xs={12} md={12}>
|
||||
<Timeline sx={{
|
||||
[`& .${timelineItemClasses.root}:before`]: {
|
||||
flex: 0,
|
||||
padding: 0,
|
||||
},
|
||||
}}>
|
||||
{data?.dialy_monitoring.length > 0 ? data?.dialy_monitoring.map((row, index) => (
|
||||
<TimelineItem key={index}>
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
<TimelineConnector sx={{border: '0.5px dashed rgba(145, 158, 171, 0.32)', backgrounSize: '4px 4px' }} />
|
||||
</TimelineSeparator>
|
||||
<TimelineContent>
|
||||
<Typography variant='h5' sx={{marginBottom: 2}}> { fDateSuffix(row.date)}</Typography>
|
||||
<Card sx={{paddinX:2, paddingY:2}} >
|
||||
<Stack direction={'row'} sx={{ alignItems: 'center' }}>
|
||||
<Typography
|
||||
sx={{
|
||||
background: 'rgba(145, 158, 171, 0.16)',
|
||||
color: '#637381',
|
||||
borderRadius: 1,
|
||||
marginLeft: 2,
|
||||
paddingX: 2,
|
||||
paddingY: 1,
|
||||
marginRight: 'auto',
|
||||
}} variant='overline'> {row.time} </Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
background: 'rgba(84, 214, 44, 0.16)',
|
||||
color: '#229A16',
|
||||
borderRadius: 1,
|
||||
marginRight: 2,
|
||||
paddingX: 2,
|
||||
paddingY: 1,
|
||||
}} variant='overline'> {row.status} </Typography>
|
||||
|
||||
</Stack>
|
||||
<hr style={{margin:10, marginLeft:15, marginRight:15, color: 'rgba(145, 158, 171, 0.32)' }}/>
|
||||
<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">{row.subject_title}</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'>{row.body_temperature}</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' >{row.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'>{row.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'>{row.respiration_rate}</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'>{row.analisis_title}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="h6" sx={{ paddingTop: 2}}>Perencanaan</Typography>
|
||||
</Stack>
|
||||
<Stack direction={'row'} spacing={2}>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Stack marginLeft={5}>
|
||||
<ul>
|
||||
{/* {data.} */}
|
||||
<li>test</li>
|
||||
<li>test</li>
|
||||
</ul>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
</Stack>
|
||||
</Card>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
)) :
|
||||
<Typography variant='subtitle1'>
|
||||
No Data Found
|
||||
</Typography>
|
||||
}
|
||||
</Timeline>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</TabPanel>
|
||||
<TabPanel value={value} index={1}>
|
||||
<Grid container>
|
||||
<Grid item xs={12} md={12}>
|
||||
{data?.laboratorium_result.length > 0 ? data?.laboratorium_result.map((row, index) => (
|
||||
|
||||
<Card sx={{paddinX:2, paddingY:2, paddingX:1, marginTop:2 }} key={index} >
|
||||
<Stack paddingX={5}>
|
||||
<Typography variant='subtitle1'>{fDateSuffix(row[index].datetime)}</Typography>
|
||||
|
||||
{row.length > 0 ? row.map((list, i) => (
|
||||
<Card key={i} sx={{marginTop:2, paddingX:2, paddingY:2}}>
|
||||
<Typography
|
||||
sx={{
|
||||
background: 'rgba(145, 158, 171, 0.16)',
|
||||
color: '#637381',
|
||||
borderRadius: 1,
|
||||
marginBottom: 2,
|
||||
paddingX: 2,
|
||||
paddingY: 1,
|
||||
}} variant='overline'> {list.reimbursement_code}
|
||||
</Typography>
|
||||
<Table sx={{marginY:2}}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Date</TableCell>
|
||||
<TableCell>Examination</TableCell>
|
||||
<TableCell>Location</TableCell>
|
||||
<TableCell></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Typography
|
||||
sx={{
|
||||
background: 'rgba(145, 158, 171, 0.16)',
|
||||
color: '#637381',
|
||||
borderRadius: 1,
|
||||
marginBottom: 2,
|
||||
paddingX: 2,
|
||||
paddingY: 1,
|
||||
}} variant='overline'> {fDateTime(list.datetime)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>{list.examination}</TableCell>
|
||||
<TableCell>{list.location}</TableCell>
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => navigate(`${list.files}` )}>
|
||||
<DownloadIcon />
|
||||
Download
|
||||
</MenuItem>
|
||||
</>
|
||||
} />
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
)) : <Typography variant='subtitle1'>Data Not Found</Typography>}
|
||||
</Stack>
|
||||
</Card>
|
||||
)) :
|
||||
<Typography variant='subtitle1'>
|
||||
Data Not Found
|
||||
</Typography>
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user