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

dialog component, dash & service-monitoring slice

Browse Source
This commit is contained in:
Muhammad Fajar
2022-11-17 11:09:31 +07:00
parent e8a9ee2ae9
commit b36603833b
11 changed files with 1158 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx Executable file
View File

@@ -0,0 +1,291 @@
// mui
import {
Button,
Box,
Tabs,
Tab,
IconButton,
Container,
Grid,
Card,
Stack,
Typography,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { Favorite } from '@mui/icons-material';
// components
import Page from '../../components/Page';
import Iconify from '../../components/Iconify';
// utils
import useSettings from '../../hooks/useSettings';
import { useRef, useState, SyntheticEvent } from 'react';
// sections
// import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
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}`}
style={{ backgroundColor: '#F9FAFB' }}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</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: 'transparent',
},
'& .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 }) => ({
textTransform: 'none',
fontWeight: 500,
fontSize: theme.typography.pxToRem(20),
color: theme.palette.primary.main,
maxWidth: '100%',
flex: 1,
margin: '0 !important',
'&.Mui-selected': {
color: '#FFF',
backgroundColor: theme.palette.primary.main,
},
'&:hover': {
backgroundColor: theme.palette.primary.dark,
color: '#FFF',
opacity: 1,
},
})
);
export default function Drugs() {
const { themeStretch } = useSettings();
const [value, setValue] = useState(0);
const handleChange = (event: SyntheticEvent, newValue: number) => {
setValue(newValue);
};
return (
<Page title="Service Monitoring 123456">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
<IconButton 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 }}>
{/* Item 1 */}
<Grid item xs={4} lg={4} md={6}>
<Card sx={{ borderRadius: '6px' }}>
<Stack>
<Stack
direction="row"
alignItems="center"
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
>
<Iconify icon="bxs:user" width={22} height={18} sx={{ marginRight: '10px' }} />
<Typography>Employee Profiles</Typography>
</Stack>
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
<Stack spacing={2}>
<Stack>
<Typography variant="caption">Nama perusahaan</Typography>
<Typography variant="body2">PT. Amman Mineral</Typography>
</Stack>
<Stack>
<Typography variant="caption">Nama Lengkap</Typography>
<Typography variant="body2">Stephen kuow</Typography>
</Stack>
<Stack>
<Typography variant="caption">Tanggal lahir</Typography>
<Typography variant="body2">09 Aug 1980</Typography>
</Stack>
<Stack>
<Typography variant="caption">Email</Typography>
<Typography variant="body2">Stephen.uow@gmal.com</Typography>
</Stack>
<Stack>
<Typography variant="caption">No telepon</Typography>
<Typography variant="body2">+62 821-8123-2323</Typography>
</Stack>
</Stack>
<Stack>
<Typography variant="caption">ID Karyawan</Typography>
<Typography variant="body2">12345678</Typography>
</Stack>
</Stack>
</Stack>
</Card>
</Grid>
{/* Item 2 */}
<Grid item xs={4} lg={4} md={6}>
<Card sx={{ borderRadius: '6px', height: '100%' }}>
<Stack>
<Stack
direction="row"
alignItems="center"
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
>
<Iconify
icon="heroicons-solid:clipboard-list"
width={22}
height={18}
sx={{ marginRight: '10px' }}
/>
<Typography>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>
</Stack>
</Card>
</Grid>
{/* Item 3 */}
<Grid item xs={4} lg={4} md={6}>
<Card sx={{ borderRadius: '6px', height: '100%' }}>
<Stack>
<Stack
direction="row"
alignItems="center"
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
>
<Iconify
icon="iconoir:healthcare"
width={22}
height={18}
sx={{ marginRight: '10px' }}
/>
<Typography>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>
<Stack>
<Typography variant="caption">Rumah sakit</Typography>
<Typography variant="body2">Primaya Hospital</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>
</Stack>
<Stack>
<Typography variant="caption">Daftar layanan</Typography>
<Typography variant="body2">
Inpatient, Medivac (Medical Evacuation)
</Typography>
</Stack>
</Stack>
</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="Item Two"
{...a11yProps(1)}
/>
</StyledTabs>
</Box>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
</Grid>
</Grid>
</Container>
</Page>
);
}