first commit
This commit is contained in:
kicap1992
303
components/admin/appBar.js
Normal file
303
components/admin/appBar.js
Normal file
@ -0,0 +1,303 @@
|
||||
import * as React from 'react';
|
||||
import Router from 'next/router';
|
||||
// import { styled, useTheme } from '@mui/material/styles';
|
||||
import { styled, useTheme, alpha } from '@mui/material/styles';
|
||||
import MuiDrawer from '@mui/material/Drawer';
|
||||
import MuiAppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import List from '@mui/material/List';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
|
||||
// icon
|
||||
import HomeIcon from '@mui/icons-material/Home';
|
||||
import SickIcon from '@mui/icons-material/Sick';
|
||||
import MedicationIcon from '@mui/icons-material/Medication';
|
||||
import VaccinesIcon from '@mui/icons-material/Vaccines';
|
||||
import AddAlertIcon from '@mui/icons-material/AddAlert';
|
||||
|
||||
// coba
|
||||
import Box from '@mui/material/Box';
|
||||
import AccountCircle from '@mui/icons-material/AccountCircle';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Menu from '@mui/material/Menu';
|
||||
|
||||
// import Link from "next/link";
|
||||
|
||||
const listmenu = [
|
||||
{
|
||||
name: 'Home',
|
||||
name2 : 'Halaman Utama',
|
||||
icon: <HomeIcon />,
|
||||
router: '/admin',
|
||||
},
|
||||
{
|
||||
name: 'Dokter',
|
||||
name2 : 'Halaman Dokter',
|
||||
icon: <MedicationIcon />,
|
||||
router: '/admin/data-dokter',
|
||||
},
|
||||
{
|
||||
name: 'Pasien',
|
||||
name2 : 'Halaman Pasien',
|
||||
icon: <SickIcon />,
|
||||
router: '/admin/data-pasien',
|
||||
},
|
||||
{
|
||||
name: 'Obat',
|
||||
name2 : 'Halaman Obat',
|
||||
icon: <VaccinesIcon />,
|
||||
router: '/admin/data-obat',
|
||||
},
|
||||
{
|
||||
name: 'Tindakan',
|
||||
name2 : 'Halaman Tindakan',
|
||||
icon: <AddAlertIcon />,
|
||||
router: '/admin/data-tindakan',
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const DrawerHeader = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
}));
|
||||
|
||||
const AppBar = styled(MuiAppBar, {
|
||||
shouldForwardProp: (prop) => prop !== 'open',
|
||||
})(({ theme, open }) => ({
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
...(open && {
|
||||
marginLeft: drawerWidth,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
|
||||
const openedMixin = (theme) => ({
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
});
|
||||
|
||||
const closedMixin = (theme) => ({
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
width: `calc(${theme.spacing(7)} + 1px)`,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: `calc(${theme.spacing(8)} + 1px)`,
|
||||
},
|
||||
});
|
||||
|
||||
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
|
||||
({ theme, open }) => ({
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
boxSizing: 'border-box',
|
||||
...(open && {
|
||||
...openedMixin(theme),
|
||||
'& .MuiDrawer-paper': openedMixin(theme),
|
||||
}),
|
||||
...(!open && {
|
||||
...closedMixin(theme),
|
||||
'& .MuiDrawer-paper': closedMixin(theme),
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
function AppBarAdmin(props) {
|
||||
// const router = useRouter();
|
||||
// console.log(props)
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
// coba
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const isMenuOpen = Boolean(anchorEl);
|
||||
const menuId = 'primary-search-account-menu';
|
||||
const handleProfileMenuOpen = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const renderMenu = (
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
id={menuId}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
open={isMenuOpen}
|
||||
onClose={handleMenuClose}
|
||||
>
|
||||
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
|
||||
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
function handleMenuRoute(menu){
|
||||
// console.log(menu + " sini menunya di appbar")
|
||||
Router.push(menu)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<AppBar position="fixed" open={open} >
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
// onClick={handleDrawerOpen}
|
||||
onClick={(!props.backdrop && !props.sweetalertload) ? handleDrawerOpen : null}
|
||||
edge="start"
|
||||
sx={{
|
||||
marginRight: 5,
|
||||
...(open && { display: 'none' }),
|
||||
cursor : (!props.backdrop && !props.sweetalertload) ? 'pointer' : 'default'
|
||||
}}
|
||||
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap component="div">
|
||||
{/* check the listmenu name if same as props.menu then load the listmenu.name2 */}
|
||||
{
|
||||
listmenu.map((listmenu, index) => {
|
||||
if(listmenu.name === props.menu){
|
||||
return listmenu.name2
|
||||
}
|
||||
})
|
||||
}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
<Box sx={{ display: { xs: "flex", md: 'flex' } }}>
|
||||
|
||||
<IconButton
|
||||
size="large"
|
||||
edge="end"
|
||||
aria-label="account of current user"
|
||||
aria-controls={menuId}
|
||||
aria-haspopup="true"
|
||||
onClick={(!props.backdrop && !props.sweetalertload) ? handleProfileMenuOpen : null}
|
||||
color="inherit"
|
||||
sx={{
|
||||
cursor : (!props.backdrop && !props.sweetalertload) ? 'pointer' : 'default'
|
||||
}}
|
||||
>
|
||||
<AccountCircle />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
{renderMenu}
|
||||
|
||||
<Drawer variant="permanent" open={open}>
|
||||
<DrawerHeader>
|
||||
<Typography variant="h6" noWrap>Rekam Medis</Typography>
|
||||
<IconButton onClick={handleDrawerClose}>
|
||||
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
<Divider />
|
||||
<List>
|
||||
{/*
|
||||
loop listmenu and render
|
||||
*/}
|
||||
{
|
||||
listmenu.map((menu, index) => (
|
||||
<ListItemButton
|
||||
key={index}
|
||||
// onClick={handleMenuRoute("hehe")}
|
||||
// onClick={() => props.handleMenuRoute(menu.router)}
|
||||
onClick={ (!props.backdrop && !props.sweetalertload && props.menu != menu.name) ? () => handleMenuRoute(menu.router) : null}
|
||||
// disableElevation
|
||||
// disableRipple
|
||||
sx={{
|
||||
minHeight: 48,
|
||||
justifyContent: open ? 'initial' : 'center',
|
||||
px: 2.5,
|
||||
backgroundColor: (props.menu == menu.name) ? theme.palette.primary.main : null, // ini
|
||||
color: (props.menu == menu.name) ? "white" : "grey", // ini
|
||||
'&:hover': {
|
||||
background: (props.menu == menu.name) ? theme.palette.primary.main : null, // ini
|
||||
},
|
||||
cursor: (props.backdrop || props.sweetalertload || props.menu == menu.name) ? 'default' : "pointer",
|
||||
// cursor: "alias",
|
||||
}}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
color: (props.menu == menu.name) ? "white" : "grey", // ini
|
||||
minWidth: 0,
|
||||
mr: open ? 3 : 'auto',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{
|
||||
menu.icon
|
||||
}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={menu.name2} sx={{ opacity: open ? 1 : 0 }} />
|
||||
</ListItemButton>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
|
||||
|
||||
|
||||
</Drawer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppBarAdmin;
|
||||
51
components/before_login/appBar.js
Normal file
51
components/before_login/appBar.js
Normal file
@ -0,0 +1,51 @@
|
||||
// import * as React from 'react';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
|
||||
|
||||
const ResponsiveAppBarIndex = () => {
|
||||
|
||||
return (
|
||||
<AppBar position="static">
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="div"
|
||||
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
|
||||
>
|
||||
Rekam Medis
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="div"
|
||||
|
||||
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
|
||||
>
|
||||
Rekam Medis
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="No User">
|
||||
<Avatar alt="Remy Sharp" src="https://kicap-karan.com/assets/img/me.jpg" />
|
||||
</Tooltip>
|
||||
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
export default ResponsiveAppBarIndex;
|
||||
257
components/before_login/body.js
Normal file
257
components/before_login/body.js
Normal file
@ -0,0 +1,257 @@
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
|
||||
import Card from '@mui/material/Card';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
|
||||
import { styled } from '@mui/material/styles';
|
||||
// import { makeStyles } from '@mui/styles';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
|
||||
import { ToastContainer ,toast , Zoom , Bounce } from 'react-toastify'
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
// sweet alert
|
||||
import Swal from 'sweetalert2'
|
||||
import withReactContent from 'sweetalert2-react-content'
|
||||
const MySwal = withReactContent(Swal)
|
||||
|
||||
const md5 = require('md5');
|
||||
|
||||
function createData(name, calories) {
|
||||
return { name, calories };
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData('Frozen yoghurt', 159),
|
||||
createData('Ice cream sandwich', 237),
|
||||
createData('Eclair', 262),
|
||||
createData('Cupcake', 305),
|
||||
createData('Gingerbread', 356),
|
||||
];
|
||||
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.common.white,
|
||||
}
|
||||
}));
|
||||
|
||||
// const useStyles = makeStyles({
|
||||
// table: {
|
||||
// minWidth: 650,
|
||||
// "& .MuiTableCell-root": {
|
||||
// borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
export default function GridIndex(props) {
|
||||
const [cekError, setCekError] = useState(props.errornya);
|
||||
|
||||
if(cekError == true){
|
||||
MySwal.fire({
|
||||
title: `<strong>Error</strong>`,
|
||||
html: "Anda Harus Login Terlebih Dahulu",
|
||||
icon: 'error',
|
||||
showConfirmButton: false,
|
||||
})
|
||||
setCekError(false)
|
||||
}
|
||||
const usernameInputRef = useRef();
|
||||
const passwordInputRef = useRef();
|
||||
|
||||
const [role, setRole] = useState('');
|
||||
const [backdrop, setBackdrop] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const roleHandleChange = (event) => {
|
||||
setRole(event.target.value);
|
||||
};
|
||||
|
||||
async function submitHandler(event) {
|
||||
event.preventDefault();
|
||||
const username = usernameInputRef.current.value;
|
||||
const password = passwordInputRef.current.value;
|
||||
setBackdrop(true);
|
||||
// try {
|
||||
let http_server = process.env.HTTP_URL+"/api/login?username="+username+"&password="+md5(password)+"&role="+role;
|
||||
// console.log(http_server);
|
||||
const response = await fetch(http_server, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'allow-cors-origin': '*',
|
||||
'crossDomain': true,
|
||||
}
|
||||
});
|
||||
const data = await response.json();
|
||||
// console.log(response);
|
||||
if(response.status == 200){
|
||||
console.log(data);
|
||||
toast.success("Login Success")
|
||||
// pause 2 seconds
|
||||
|
||||
setTimeout( async function(){
|
||||
// put data to local storage
|
||||
|
||||
await localStorage.setItem('user_data', JSON.stringify(data));
|
||||
// localStorage.removeItem('user_data');
|
||||
document.cookie = data;
|
||||
|
||||
|
||||
|
||||
|
||||
// redirect to dashboard
|
||||
await router.replace('/admin');
|
||||
}, 2000);
|
||||
}else if(response.status == 400){
|
||||
// console.log(data);
|
||||
toast.warning(data.message);
|
||||
// focus on username input
|
||||
usernameInputRef.current.focus();
|
||||
}else{
|
||||
toast.error("Server Error");
|
||||
}
|
||||
// } catch (error) {
|
||||
// console.log(error)
|
||||
// }
|
||||
setBackdrop(false);
|
||||
}
|
||||
|
||||
|
||||
// const classes = useStyles();
|
||||
return (
|
||||
<div >
|
||||
<ToastContainer position={toast.POSITION.TOP_CENTER} transition={Zoom} autoClose={2000} Bounce={Bounce} theme="colored" />
|
||||
<Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
|
||||
<div style={{ maxWidth: "100%", padding: 30 }}>
|
||||
<div sx={{ flexGrow: 1, p: 3 }}>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={12} md={8}>
|
||||
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||
<Typography variant="h6" gutterBottom sx={{
|
||||
fontSize: '1rem',
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'left',
|
||||
paddingLeft: '3%',
|
||||
paddingTop: "10px",
|
||||
paddingBottom: "10px",
|
||||
backgroundColor: "silver",
|
||||
}}>Jadwal Praktek Hari :</Typography>
|
||||
<TableContainer component={Box} sx={{
|
||||
padding: "15px",
|
||||
}}>
|
||||
<Table aria-label="simple table" sx={{
|
||||
minWidth: 650,
|
||||
boxShadow: 3,
|
||||
"& .MuiTableCell-root": {
|
||||
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
||||
}
|
||||
}}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
||||
<StyledTableCell align="right">Calories</StyledTableCell>
|
||||
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
|
||||
>
|
||||
<TableCell component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell align="right">{row.calories}</TableCell>
|
||||
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<Box sx={{ padding: "5px" }}></Box>
|
||||
<Box textAlign="center">
|
||||
<Button variant="contained">Cetak</Button>
|
||||
</Box>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
{/* <form onSubmit={submitHandler}> */}
|
||||
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 400, paddingTop: 1, boxShadow: 10 }} onSubmit={submitHandler}>
|
||||
<h2>Login Form</h2>
|
||||
<TextField
|
||||
inputRef={usernameInputRef}
|
||||
id="usernameTextField"
|
||||
label="Username"
|
||||
placeholder="Masukkan Username"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
required
|
||||
/>
|
||||
<br /><br />
|
||||
<TextField
|
||||
inputRef={passwordInputRef}
|
||||
id="passwordTextField"
|
||||
type="password"
|
||||
label="Password"
|
||||
placeholder="Masukkan Password"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
required
|
||||
/>
|
||||
<br /> <br />
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<InputLabel id="demo-simple-select-helper-label">Role</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-helper-label"
|
||||
id="demo-simple-select-helper"
|
||||
value={role}
|
||||
label="Role"
|
||||
onChange={roleHandleChange}
|
||||
required
|
||||
>
|
||||
<MenuItem value="" disabled selected>
|
||||
<em>-Pilih Role</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Admin"}>Admin</MenuItem>
|
||||
<MenuItem value={"Dokter"}>Dokter</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<br /> <br />
|
||||
<Box textAlign="center">
|
||||
<Button variant="contained" type="submit"
|
||||
>Login</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
{/* </form> */}
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
260
components/dokter/appBar.js
Normal file
260
components/dokter/appBar.js
Normal file
@ -0,0 +1,260 @@
|
||||
import * as React from 'react';
|
||||
// import { styled, useTheme } from '@mui/material/styles';
|
||||
import { styled, useTheme, alpha } from '@mui/material/styles';
|
||||
import MuiDrawer from '@mui/material/Drawer';
|
||||
import MuiAppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import List from '@mui/material/List';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
|
||||
// icon
|
||||
import HomeIcon from '@mui/icons-material/Home';
|
||||
import InboxIcon from '@mui/icons-material/MoveToInbox';
|
||||
import MailIcon from '@mui/icons-material/Mail';
|
||||
|
||||
// coba
|
||||
import Box from '@mui/material/Box';
|
||||
import AccountCircle from '@mui/icons-material/AccountCircle';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Menu from '@mui/material/Menu';
|
||||
|
||||
|
||||
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const DrawerHeader = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
}));
|
||||
|
||||
const AppBar = styled(MuiAppBar, {
|
||||
shouldForwardProp: (prop) => prop !== 'open',
|
||||
})(({ theme, open }) => ({
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
...(open && {
|
||||
marginLeft: drawerWidth,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
|
||||
const openedMixin = (theme) => ({
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
});
|
||||
|
||||
const closedMixin = (theme) => ({
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
width: `calc(${theme.spacing(7)} + 1px)`,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: `calc(${theme.spacing(8)} + 1px)`,
|
||||
},
|
||||
});
|
||||
|
||||
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
|
||||
({ theme, open }) => ({
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
boxSizing: 'border-box',
|
||||
...(open && {
|
||||
...openedMixin(theme),
|
||||
'& .MuiDrawer-paper': openedMixin(theme),
|
||||
}),
|
||||
...(!open && {
|
||||
...closedMixin(theme),
|
||||
'& .MuiDrawer-paper': closedMixin(theme),
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
function AppBarDokter() {
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
// coba
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const isMenuOpen = Boolean(anchorEl);
|
||||
const menuId = 'primary-search-account-menu';
|
||||
const handleProfileMenuOpen = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const renderMenu = (
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
id={menuId}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
open={isMenuOpen}
|
||||
onClose={handleMenuClose}
|
||||
>
|
||||
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
|
||||
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<AppBar position="fixed" open={open}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={handleDrawerOpen}
|
||||
edge="start"
|
||||
sx={{
|
||||
marginRight: 5,
|
||||
...(open && { display: 'none' }),
|
||||
}}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap component="div">
|
||||
Mini variant drawer
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
<Box sx={{ display: { xs: "flex", md: 'flex' } }}>
|
||||
|
||||
<IconButton
|
||||
size="large"
|
||||
edge="end"
|
||||
aria-label="account of current user"
|
||||
aria-controls={menuId}
|
||||
aria-haspopup="true"
|
||||
onClick={handleProfileMenuOpen}
|
||||
color="inherit"
|
||||
>
|
||||
<AccountCircle />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
{renderMenu}
|
||||
|
||||
<Drawer variant="permanent" open={open}>
|
||||
<DrawerHeader>
|
||||
<Typography variant="h6" noWrap>Rekam Medis</Typography>
|
||||
<IconButton onClick={handleDrawerClose}>
|
||||
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItemButton
|
||||
key={"text"}
|
||||
onClick={null}
|
||||
// disableElevation
|
||||
disableRipple
|
||||
sx={{
|
||||
minHeight: 48,
|
||||
justifyContent: open ? 'initial' : 'center',
|
||||
px: 2.5,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: "white",
|
||||
'&:hover': {
|
||||
background: theme.palette.primary.main,
|
||||
},
|
||||
cursor: 'default',
|
||||
}}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
// color: "white",
|
||||
minWidth: 0,
|
||||
mr: open ? 3 : 'auto',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<HomeIcon sx={{
|
||||
color: "white",
|
||||
}} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Menu Utama" sx={{ opacity: open ? 1 : 0 }} />
|
||||
</ListItemButton>
|
||||
{['All mail', 'Trash', 'Spam'].map((text, index) => (
|
||||
<ListItemButton
|
||||
key={text}
|
||||
sx={{
|
||||
minHeight: 48,
|
||||
justifyContent: open ? 'initial' : 'center',
|
||||
px: 2.5,
|
||||
}}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: 0,
|
||||
mr: open ? 3 : 'auto',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
|
||||
</ListItemButton>
|
||||
))}
|
||||
|
||||
</List>
|
||||
|
||||
|
||||
|
||||
</Drawer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppBarDokter;
|
||||
Reference in New Issue
Block a user