first commit
This commit is contained in:
kicap1992
15
.env
Normal file
15
.env
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
PORT_HTTP = 3005
|
||||||
|
PORT_HTTPS = 3006
|
||||||
|
|
||||||
|
DB_HOST = 'localhost'
|
||||||
|
DB_USER = 'root'
|
||||||
|
DB_PASS = ''
|
||||||
|
DB_NAME = 'db_rekam_medis'
|
||||||
|
|
||||||
|
HTTP_URL = 'http://localhost:3005'
|
||||||
|
HTTPS_URL = 'https://localhost:3006'
|
||||||
|
|
||||||
|
SECRET_COOKIE_PASSWORD = 'complex_password_at_least_32_characters_long'
|
||||||
|
|
||||||
|
ADMIN_AUTH = 'kicapkaran_admin'
|
||||||
|
ADMIN_PASSWORD = 'karan456_admin'
|
||||||
7
.gitignore
vendored
7
.gitignore
vendored
@ -30,3 +30,10 @@ yarn-error.log*
|
|||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
|
|
||||||
|
# googlekey.json
|
||||||
|
googlekey.json*
|
||||||
|
|
||||||
|
# cert
|
||||||
|
cert.crt
|
||||||
|
cert.key
|
||||||
|
|||||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"sqltools.connections": []
|
||||||
|
}
|
||||||
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;
|
||||||
83
function/all_function.js
Normal file
83
function/all_function.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
|
||||||
|
// const md5 = require('md5');
|
||||||
|
module.exports = {
|
||||||
|
thousandSeparator: function (num) {
|
||||||
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||||
|
},
|
||||||
|
cek_user : async function cek_user(username, password, role) {
|
||||||
|
// console.log(username, password, role, "sini di cek user");
|
||||||
|
try {
|
||||||
|
let http_server = process.env.HTTP_URL+"/api/login?username="+username+"&password="+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 , "ini response");
|
||||||
|
if(response.status == 200){
|
||||||
|
// console.log(data , "ini data");
|
||||||
|
return true;
|
||||||
|
}else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
tindakan_all : async function tindakan_all() {
|
||||||
|
try {
|
||||||
|
let http_server = process.env.HTTP_URL+"/api/admin/tindakan";
|
||||||
|
// console.log(http_server);
|
||||||
|
const response = await fetch(http_server, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'allow-cors-origin': '*',
|
||||||
|
'crossDomain': true,
|
||||||
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
// console.log(response , "ini response");
|
||||||
|
if(response.status == 200){
|
||||||
|
// console.log(data , "ini data");
|
||||||
|
return data.data;
|
||||||
|
}else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
obat_all : async function obat_all() {
|
||||||
|
try {
|
||||||
|
let http_server = process.env.HTTP_URL+"/api/admin/obat";
|
||||||
|
// console.log(http_server);
|
||||||
|
const response = await fetch(http_server, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'allow-cors-origin': '*',
|
||||||
|
'crossDomain': true,
|
||||||
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
// console.log(response , "ini response");
|
||||||
|
if(response.status == 200){
|
||||||
|
// console.log(data , "ini data");
|
||||||
|
return data.data;
|
||||||
|
}else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,6 +1,21 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
reactStrictMode: true,
|
reactStrictMode: true,
|
||||||
|
// compiler : {
|
||||||
|
// // Enables the styled-components SWC transform
|
||||||
|
// styledComponents: true
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = nextConfig
|
const webpack = require('webpack');
|
||||||
|
const {parsed : myEnv} = require('dotenv').config();
|
||||||
|
|
||||||
|
// module.exports = nextConfig
|
||||||
|
module.exports = {
|
||||||
|
webpack: (config) => {
|
||||||
|
config.plugins.push(new webpack.EnvironmentPlugin(myEnv));
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
nextConfig
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
6
nodemon.json
Normal file
6
nodemon.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"verbose": true,
|
||||||
|
"ignore": [ "node_modules", ".next" ],
|
||||||
|
"watch": ["server/**/*" , "index.js"],
|
||||||
|
"ext": "js json jsx ts tsx "
|
||||||
|
}
|
||||||
4898
package-lock.json
generated
Normal file
4898
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
package.json
29
package.json
@ -3,15 +3,40 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "nodemon server/index.js",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@babel/core": "^7.17.9",
|
||||||
|
"@emotion/react": "^11.9.0",
|
||||||
|
"@emotion/styled": "^11.8.1",
|
||||||
|
"@mui/icons-material": "^5.6.2",
|
||||||
|
"@mui/material": "^5.6.2",
|
||||||
|
"@mui/x-date-pickers": "^5.0.0-alpha.1",
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"date-fns": "^2.28.0",
|
||||||
|
"dotenv": "^16.0.0",
|
||||||
|
"express": "^4.17.3",
|
||||||
|
"express-basic-auth": "^1.2.1",
|
||||||
|
"express-form-data": "^2.0.18",
|
||||||
|
"iron-session": "^6.1.3",
|
||||||
|
"md5": "^2.3.0",
|
||||||
|
"mysql2": "^2.3.3",
|
||||||
"next": "12.1.5",
|
"next": "12.1.5",
|
||||||
|
"nextjs-progressbar": "0.0.14",
|
||||||
|
"nodemon": "^2.0.15",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
"react": "18.0.0",
|
"react": "18.0.0",
|
||||||
"react-dom": "18.0.0"
|
"react-dom": "18.0.0",
|
||||||
|
"react-number-format": "^4.9.3",
|
||||||
|
"react-toastify": "^8.2.0",
|
||||||
|
"sequelize": "^6.19.0",
|
||||||
|
"sweetalert2": "^11.4.9",
|
||||||
|
"sweetalert2-react-content": "^5.0.0",
|
||||||
|
"typescript": "^4.6.3",
|
||||||
|
"webpack": "^5.72.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"eslint": "8.13.0",
|
"eslint": "8.13.0",
|
||||||
|
|||||||
@ -1,7 +1,13 @@
|
|||||||
import '../styles/globals.css'
|
import '../styles/globals.css'
|
||||||
|
import NextNProgress from "nextjs-progressbar";
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
return <Component {...pageProps} />
|
return (
|
||||||
|
<>
|
||||||
|
<NextNProgress />
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyApp
|
export default MyApp
|
||||||
|
|||||||
212
pages/admin/data-dokter.js
Normal file
212
pages/admin/data-dokter.js
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
// import Paper from '@mui/material/Paper';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
|
||||||
|
// select
|
||||||
|
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 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 Paper from '@mui/material/Paper';
|
||||||
|
|
||||||
|
|
||||||
|
import AppBarAdmin from '../../components/admin/appBar';
|
||||||
|
|
||||||
|
function createData(name, calories, fat, carbs, protein) {
|
||||||
|
return { name, calories, fat, carbs, protein };
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
||||||
|
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
||||||
|
createData('Eclair', 262, 16.0, 24, 6.0),
|
||||||
|
createData('Cupcake', 305, 3.7, 67, 4.3),
|
||||||
|
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
||||||
|
];
|
||||||
|
|
||||||
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
|
[`&.${tableCellClasses.head}`]: {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.common.white,
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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,
|
||||||
|
}));
|
||||||
|
|
||||||
|
function DataDokterPage() {
|
||||||
|
const [age, setAge] = React.useState('');
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
setAge(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarAdmin menu="Dokter" />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
<Grid item xs={12} md={5}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '8%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>Tambah Dokter</Typography>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="namaTextField"
|
||||||
|
label="Nama"
|
||||||
|
placeholder="Masukkan Nama"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="alamatTextField"
|
||||||
|
label="Alamat"
|
||||||
|
placeholder="Masukkan Alamat"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="NoTelpTextField"
|
||||||
|
label="No Telpon"
|
||||||
|
placeholder="Masukkan No Telpon"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<InputLabel id="demo-simple-select-helper-label">Spesialis</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="demo-simple-select-helper-label"
|
||||||
|
id="jenisSelect"
|
||||||
|
value={age}
|
||||||
|
label="Jenis"
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<MenuItem value="">
|
||||||
|
<em>None</em>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value={10}>Ten</MenuItem>
|
||||||
|
<MenuItem value={20}>Twenty</MenuItem>
|
||||||
|
<MenuItem value={30}>Thirty</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="usernameTextField"
|
||||||
|
label="Username"
|
||||||
|
placeholder="Masukkan Username"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="passwordTextField"
|
||||||
|
label="Password"
|
||||||
|
placeholder="Masukkan Password"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="konfirmasiPasswordTextField"
|
||||||
|
label="Konfirmasi Password"
|
||||||
|
placeholder="Masukkan Konfirmasi Password"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained">Tambah</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={7}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '3%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}> List Dokter</Typography>
|
||||||
|
<TableContainer component={Box} sx={{
|
||||||
|
padding: "15px",
|
||||||
|
}}>
|
||||||
|
<Table aria-label="simple table" sx={{
|
||||||
|
minWidth: 650,
|
||||||
|
boxShadow: 3,
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Calories</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.name}
|
||||||
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||||
|
>
|
||||||
|
<TableCell component="th" scope="row">
|
||||||
|
{row.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align="right">{row.calories}</TableCell>
|
||||||
|
<TableCell align="right">{row.fat}</TableCell>
|
||||||
|
<TableCell align="right">{row.carbs}</TableCell>
|
||||||
|
<TableCell align="right">{row.protein}</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>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataDokterPage;
|
||||||
969
pages/admin/data-obat.js
Normal file
969
pages/admin/data-obat.js
Normal file
@ -0,0 +1,969 @@
|
|||||||
|
import { useState, useRef, forwardRef, Fragment } from 'react';
|
||||||
|
import Router from 'next/router';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
// import Paper from '@mui/material/Paper';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
|
||||||
|
// select
|
||||||
|
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 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 Paper from '@mui/material/Paper';
|
||||||
|
|
||||||
|
|
||||||
|
import AppBarAdmin from '../../components/admin/appBar';
|
||||||
|
|
||||||
|
// backdrop
|
||||||
|
import Backdrop from '@mui/material/Backdrop';
|
||||||
|
import CircularProgress from '@mui/material/CircularProgress';
|
||||||
|
|
||||||
|
// toast
|
||||||
|
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)
|
||||||
|
|
||||||
|
// this for check session
|
||||||
|
let all_function = require('../../function/all_function.js')
|
||||||
|
import { withIronSessionSsr } from "iron-session/next";
|
||||||
|
|
||||||
|
// this is for number format
|
||||||
|
import NumberFormat from 'react-number-format';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
// button icon
|
||||||
|
import IconButton from '@mui/material/IconButton';
|
||||||
|
import ModeEditIcon from '@mui/icons-material/ModeEdit';
|
||||||
|
// import AddCircleIcon from '@mui/icons-material/AddCircle';
|
||||||
|
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
|
||||||
|
|
||||||
|
// for modal edit
|
||||||
|
import Dialog from '@mui/material/Dialog';
|
||||||
|
import DialogTitle from '@mui/material/DialogTitle';
|
||||||
|
import DialogContent from '@mui/material/DialogContent';
|
||||||
|
import DialogActions from '@mui/material/DialogActions';
|
||||||
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
|
|
||||||
|
// for modal history
|
||||||
|
import AppBar from '@mui/material/AppBar';
|
||||||
|
import Toolbar from '@mui/material/Toolbar';
|
||||||
|
import Slide from '@mui/material/Slide';
|
||||||
|
|
||||||
|
// colapsing table
|
||||||
|
import Collapse from '@mui/material/Collapse';
|
||||||
|
import Paper from '@mui/material/Paper';
|
||||||
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||||
|
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const Transition = forwardRef(function Transition(props, ref) { // for modal history
|
||||||
|
return <Slide direction="up" ref={ref} {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const BootstrapDialog = styled(Dialog)(({ theme }) => ({ // for modal edit
|
||||||
|
'& .MuiDialogContent-root': {
|
||||||
|
padding: theme.spacing(2),
|
||||||
|
},
|
||||||
|
'& .MuiDialogActions-root': {
|
||||||
|
padding: theme.spacing(1),
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
const BootstrapDialogTitle = (props) => { // for modal edit
|
||||||
|
const { children, onClose, ...other } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
||||||
|
{children}
|
||||||
|
{onClose ? (
|
||||||
|
<IconButton
|
||||||
|
aria-label="close"
|
||||||
|
onClick={onClose}
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
color: (theme) => theme.palette.grey[500],
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
) : null}
|
||||||
|
</DialogTitle>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapDialogTitle.propTypes = { // for modal edit
|
||||||
|
children: PropTypes.node,
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
|
[`&.${tableCellClasses.head}`]: {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.common.white,
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
function Row(props) {
|
||||||
|
const { row } = props;
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
let tableCell, tableCellDetail
|
||||||
|
|
||||||
|
if (row.keterangan == 'Input Obat Baru') {
|
||||||
|
tableCell = (
|
||||||
|
<>
|
||||||
|
<StyledTableCell>Obat</StyledTableCell>
|
||||||
|
<StyledTableCell>Harga</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Jenis</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Jumlah</StyledTableCell>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
tableCellDetail = (
|
||||||
|
<>
|
||||||
|
<TableCell>{row.detail.obat}</TableCell>
|
||||||
|
<TableCell>{"Rp. " + all_function.thousandSeparator(row.detail.harga)}</TableCell>
|
||||||
|
<TableCell align="right">{row.detail.jenis}</TableCell>
|
||||||
|
<TableCell align="right">{row.detail.jumlah}</TableCell>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
tableCell = (
|
||||||
|
<>
|
||||||
|
{(row.detail.obat_lama != row.detail.obat_baru) ? <><StyledTableCell>Nama Lama</StyledTableCell><StyledTableCell>Nama Baru</StyledTableCell></> : <></>}
|
||||||
|
|
||||||
|
{(row.detail.harga_lama != row.detail.harga_baru) ? <><StyledTableCell>Harga Lama</StyledTableCell><StyledTableCell>Harga Baru</StyledTableCell></> : <></>}
|
||||||
|
|
||||||
|
{(row.detail.jenis_lama != row.detail.jenis_baru) ? <><StyledTableCell>Jenis Lama</StyledTableCell><StyledTableCell>Jenis Baru</StyledTableCell></> : <></>}
|
||||||
|
|
||||||
|
{(row.detail.jumlah_lama != row.detail.jumlah_baru) ? <><StyledTableCell>Jumlah Lama</StyledTableCell><StyledTableCell>Jumlah Baru</StyledTableCell></> : <></>}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
tableCellDetail = (
|
||||||
|
<>
|
||||||
|
{(row.detail.obat_lama != row.detail.obat_baru) ? <><TableCell>{row.detail.obat_lama}</TableCell><TableCell>{row.detail.obat_baru}</TableCell></> : <></>}
|
||||||
|
|
||||||
|
{(row.detail.harga_lama != row.detail.harga_baru) ? <><TableCell>{"Rp. " + all_function.thousandSeparator(row.detail.harga_lama)}</TableCell><TableCell>{"Rp. " + all_function.thousandSeparator(row.detail.harga_baru)}</TableCell></> : <></>}
|
||||||
|
|
||||||
|
{(row.detail.jenis_lama != row.detail.jenis_baru) ? <><TableCell>{row.detail.jenis_lama}</TableCell><TableCell>{row.detail.jenis_baru}</TableCell></> : <></>}
|
||||||
|
|
||||||
|
{(row.detail.jumlah_lama != row.detail.jumlah_baru) ? <><TableCell>{row.detail.jumlah_lama}</TableCell><TableCell>{row.detail.jumlah_baru}</TableCell></> : <></>}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
|
||||||
|
<StyledTableCell>
|
||||||
|
<IconButton
|
||||||
|
aria-label="expand row"
|
||||||
|
size="small"
|
||||||
|
onClick={() => setOpen(!open)}
|
||||||
|
>
|
||||||
|
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
|
||||||
|
</IconButton>
|
||||||
|
</StyledTableCell>
|
||||||
|
<StyledTableCell component="th" scope="row">
|
||||||
|
{row.waktu}
|
||||||
|
</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">{row.keterangan}</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">{row.waktu}</StyledTableCell>
|
||||||
|
</TableRow>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
|
||||||
|
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||||
|
<Box sx={{ margin: 1 }}>
|
||||||
|
<Typography variant="h6" gutterBottom component="div">
|
||||||
|
Detail History
|
||||||
|
</Typography>
|
||||||
|
<Table size="small" aria-label="purchases" sx={{
|
||||||
|
boxShadow: 3,
|
||||||
|
"& .MuiTableCell-root": {
|
||||||
|
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
{tableCell}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
<TableRow >
|
||||||
|
{tableCellDetail}
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</Box>
|
||||||
|
</Collapse>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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 NumberFormatCustom = forwardRef(function NumberFormatCustom(props, ref) {
|
||||||
|
const { onChange, ...other } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NumberFormat
|
||||||
|
{...other}
|
||||||
|
getInputRef={ref}
|
||||||
|
onValueChange={(values) => {
|
||||||
|
onChange({
|
||||||
|
target: {
|
||||||
|
name: props.name,
|
||||||
|
value: values.value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
thousandSeparator
|
||||||
|
isNumericString
|
||||||
|
prefix="Rp. "
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
NumberFormatCustom.propTypes = {
|
||||||
|
name: PropTypes.string.isRequired,
|
||||||
|
onChange: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
function DataObatPage(props) {
|
||||||
|
const obatInputRef = useRef();
|
||||||
|
const jumlahInputRef = useRef();
|
||||||
|
// const hargaInputRef = useRef();
|
||||||
|
|
||||||
|
const url = process.env.HTTP_URL + "/api/admin/obat"
|
||||||
|
|
||||||
|
const [backdrop, setBackdrop] = useState(false); //this is for backdrop
|
||||||
|
const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
|
||||||
|
|
||||||
|
const [jenis, setJenis] = useState('');
|
||||||
|
|
||||||
|
const jenisHandleChange = (event) => {
|
||||||
|
setJenis(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const [harga, setHarga] = useState('');
|
||||||
|
|
||||||
|
const hargaHandleChange = (event) => {
|
||||||
|
// console.log(event.target.value)
|
||||||
|
setHarga(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// for modal edit obat
|
||||||
|
const [headerModalEdit, setHeaderModalEdit] = useState('');
|
||||||
|
const [idObatModalEdit, setIdObatModalEdit] = useState('');
|
||||||
|
const obatEditInputRef = useRef();
|
||||||
|
const [obatEdit, setObatEdit] = useState('');
|
||||||
|
const [jumlahEdit, setJumlahEdit] = useState('');
|
||||||
|
const [jenisEdit, setJenisEdit] = useState('');
|
||||||
|
const [hargaEdit, setHargaEdit] = useState('');
|
||||||
|
//
|
||||||
|
const [dataObatEdit, setDataObatEdit] = useState({});
|
||||||
|
const [openModalEdit, setOpenModalEdit] = useState(false);
|
||||||
|
const handleClickOpenModalEdit = (id, obat, jenis, jumlah, harga) => {
|
||||||
|
console.log(id, obat, jenis, jumlah, harga, "sini buka modal edit")
|
||||||
|
setHeaderModalEdit(obat)
|
||||||
|
setIdObatModalEdit(id)
|
||||||
|
setObatEdit(obat)
|
||||||
|
setJumlahEdit(jumlah)
|
||||||
|
setJenisEdit(jenis)
|
||||||
|
setHargaEdit(harga)
|
||||||
|
setDataObatEdit({
|
||||||
|
id: id,
|
||||||
|
obat: obat,
|
||||||
|
jenis: jenis,
|
||||||
|
jumlah: jumlah,
|
||||||
|
harga: harga
|
||||||
|
})
|
||||||
|
setOpenModalEdit(true);
|
||||||
|
};
|
||||||
|
const handleCloseModalEdit = (event, reason) => {
|
||||||
|
if (reason && reason == "backdropClick")
|
||||||
|
return;
|
||||||
|
setOpenModalEdit(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// for modal history obat
|
||||||
|
const [headerModalHistory, setHeaderModalHistory] = useState('');
|
||||||
|
const [dataObatHistory, setDataObatHistory] = useState([]);
|
||||||
|
const [isLoadingDataHistory, setIsLoadingDataHistory] = useState(false);
|
||||||
|
|
||||||
|
|
||||||
|
const [openHistoryModal, setOpenHistoryModal] = useState(false);
|
||||||
|
const handleClickOpenModalHistory = async (id, nama) => {
|
||||||
|
console.log(id, nama, "sini buka modal history")
|
||||||
|
setOpenHistoryModal(true);
|
||||||
|
setHeaderModalHistory(nama)
|
||||||
|
setIsLoadingDataHistory(true)
|
||||||
|
// await 5 sec
|
||||||
|
// await new Promise(resolve => setTimeout(resolve, 1000));
|
||||||
|
try {
|
||||||
|
let urlnya = `${url}?id=${id}`
|
||||||
|
const response = await fetch(urlnya, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'allow-cors-origin': '*',
|
||||||
|
'crossDomain': true,
|
||||||
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// get response
|
||||||
|
const data = await response.json()
|
||||||
|
console.log(data, "ini data dari cek tindakan")
|
||||||
|
if (response.status === 200) {
|
||||||
|
setDataObatHistory(data.data)
|
||||||
|
|
||||||
|
} else {
|
||||||
|
console.log("error")
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
setIsLoadingDataHistory(false)
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseModalHistory = () => {
|
||||||
|
setOpenHistoryModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// before tambah obat
|
||||||
|
async function beforeTambahObat(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const obat = obatInputRef.current.value;
|
||||||
|
const jumlah = jumlahInputRef.current.value;
|
||||||
|
console.log(harga, "sini dalam sebelum add")
|
||||||
|
// remove Rp. and , from harga
|
||||||
|
// let harga = harga;
|
||||||
|
|
||||||
|
const history = [{
|
||||||
|
admin: props.user.nik,
|
||||||
|
keterangan: "Input Obat Baru",
|
||||||
|
waktu: new Date().toLocaleString(),
|
||||||
|
detail: {
|
||||||
|
obat: obat,
|
||||||
|
jumlah: jumlah,
|
||||||
|
harga: harga,
|
||||||
|
jenis: jenis
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
setSweetAlertLoading(true);
|
||||||
|
|
||||||
|
// create sweet alert
|
||||||
|
await MySwal.fire({
|
||||||
|
title: 'Yakin ?',
|
||||||
|
text: `Anda akan menambahkan obat ${obat} dengan jumlah ${jumlah} dan harga ${harga}`,
|
||||||
|
icon: 'info',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonColor: '#3085d6',
|
||||||
|
cancelButtonColor: '#d33',
|
||||||
|
confirmButtonText: 'Ya, Tambahkan!',
|
||||||
|
cancelButtonText: 'Batal',
|
||||||
|
}).then(async (result) => {
|
||||||
|
if (result.value) {
|
||||||
|
let data = {
|
||||||
|
obat: obat,
|
||||||
|
jumlah: jumlah,
|
||||||
|
harga: harga,
|
||||||
|
jenis: jenis,
|
||||||
|
history: history
|
||||||
|
}
|
||||||
|
setBackdrop(true);
|
||||||
|
// await 4 second
|
||||||
|
let response = await tambahObat(data);
|
||||||
|
if (!response) {
|
||||||
|
// focus to input
|
||||||
|
obatInputRef.current.focus();
|
||||||
|
} else {
|
||||||
|
// clear all input and select
|
||||||
|
obatInputRef.current.value = '';
|
||||||
|
jumlahInputRef.current.value = '';
|
||||||
|
// hargaInputRef.current.value = '';
|
||||||
|
setJenis('');
|
||||||
|
setHarga('');
|
||||||
|
|
||||||
|
// clear input in textfield id hargaTextField
|
||||||
|
|
||||||
|
Router.replace(Router.asPath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
setBackdrop(false);
|
||||||
|
setSweetAlertLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// tambah obat
|
||||||
|
async function tambahObat(datanya) {
|
||||||
|
console.log(datanya, " ini data di tambah obat");
|
||||||
|
// console.log(props.user)
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(url)
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'allow-cors-origin': '*',
|
||||||
|
'crossDomain': true,
|
||||||
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
obat: datanya.obat,
|
||||||
|
jumlah: datanya.jumlah,
|
||||||
|
harga: datanya.harga,
|
||||||
|
jenis: datanya.jenis,
|
||||||
|
history: datanya.history
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// get response
|
||||||
|
const data = await response.json()
|
||||||
|
console.log(data, "ini data dari cek tindakan")
|
||||||
|
if (response.status === 200) {
|
||||||
|
// create toast
|
||||||
|
toast.success(data.message)
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
// create toast
|
||||||
|
toast.error(data.message)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
toast.error("Terjadi kesalahan pada server")
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// before edit obat
|
||||||
|
async function beforeEditObat() {
|
||||||
|
|
||||||
|
if (obatEdit == dataObatEdit.obat && jenisEdit == dataObatEdit.jenis && hargaEdit == dataObatEdit.harga && jumlahEdit == dataObatEdit.jumlah) {
|
||||||
|
toast.error("Tidak ada perubahan data")
|
||||||
|
handleClickOpenModalEdit(idObatModalEdit, obatEdit, jenisEdit, jumlahEdit, hargaEdit)
|
||||||
|
// return false
|
||||||
|
} else {
|
||||||
|
setSweetAlertLoading(true);
|
||||||
|
await MySwal.fire({
|
||||||
|
title: 'Yakin ?',
|
||||||
|
text: `Anda akan mengubah detail obat ${headerModalEdit}`,
|
||||||
|
icon: 'info',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonColor: '#3085d6',
|
||||||
|
cancelButtonColor: '#d33',
|
||||||
|
confirmButtonText: 'Ya, Ubah!',
|
||||||
|
cancelButtonText: 'Batal',
|
||||||
|
}).then(async (result) => {
|
||||||
|
if (result.value) {
|
||||||
|
// run handleCloseModalEdit
|
||||||
|
let history = {
|
||||||
|
admin: props.user.nik,
|
||||||
|
keterangan: "Edit Obat",
|
||||||
|
waktu: new Date().toLocaleString(),
|
||||||
|
detail: {
|
||||||
|
obat_lama: dataObatEdit.obat,
|
||||||
|
jumlah_lama: dataObatEdit.jumlah,
|
||||||
|
harga_lama: dataObatEdit.harga,
|
||||||
|
jenis_lama: dataObatEdit.jenis,
|
||||||
|
obat_baru: obatEdit,
|
||||||
|
jumlah_baru: jumlahEdit,
|
||||||
|
harga_baru: hargaEdit,
|
||||||
|
jenis_baru: jenisEdit
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let data = {
|
||||||
|
id: idObatModalEdit,
|
||||||
|
obat: obatEdit,
|
||||||
|
jumlah: jumlahEdit,
|
||||||
|
harga: hargaEdit,
|
||||||
|
jenis: jenisEdit,
|
||||||
|
history: history
|
||||||
|
}
|
||||||
|
setBackdrop(true);
|
||||||
|
// await 4 second
|
||||||
|
|
||||||
|
let response = await editObat(data);
|
||||||
|
if (!response) {
|
||||||
|
// focus to input
|
||||||
|
obatInputRef.current.focus();
|
||||||
|
} else {
|
||||||
|
Router.replace(Router.asPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// run handleClickOpenModalEdit
|
||||||
|
handleClickOpenModalEdit(idObatModalEdit, obatEdit, jenisEdit, jumlahEdit, hargaEdit)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
setBackdrop(false);
|
||||||
|
setSweetAlertLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// edit obat
|
||||||
|
async function editObat(datanya) {
|
||||||
|
console.log(datanya, " ini data di edit obat");
|
||||||
|
// console.log(props.user)
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(url)
|
||||||
|
let urlnya = `${url}?id=${datanya.id}&detail=edit_data`
|
||||||
|
// console.log(urlnya)
|
||||||
|
const response = await fetch(urlnya, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'allow-cors-origin': '*',
|
||||||
|
'crossDomain': true,
|
||||||
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
// id: datanya.id,
|
||||||
|
obat: datanya.obat,
|
||||||
|
jumlah: datanya.jumlah,
|
||||||
|
harga: datanya.harga,
|
||||||
|
jenis: datanya.jenis,
|
||||||
|
history: datanya.history
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// get response
|
||||||
|
const data = await response.json()
|
||||||
|
console.log(data, "ini data dari cek tindakan")
|
||||||
|
if (response.status === 200) {
|
||||||
|
// create toast
|
||||||
|
toast.success(data.message)
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
// create toast
|
||||||
|
toast.error(data.message)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
toast.error("Terjadi kesalahan pada server")
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<BootstrapDialog
|
||||||
|
onClose={handleCloseModalEdit}
|
||||||
|
aria-labelledby="customized-dialog-title"
|
||||||
|
open={openModalEdit}
|
||||||
|
align="center"
|
||||||
|
// maxWidth="lg"
|
||||||
|
fullWidth={true}
|
||||||
|
component="form"
|
||||||
|
onSubmit={
|
||||||
|
async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
await handleCloseModalEdit()
|
||||||
|
beforeEditObat()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleCloseModalEdit}>
|
||||||
|
Edit Detail {headerModalEdit}
|
||||||
|
</BootstrapDialogTitle>
|
||||||
|
<DialogContent dividers>
|
||||||
|
{/* <Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }} onSubmit={beforeTambahObat} > */}
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
inputRef={obatEditInputRef}
|
||||||
|
id="obatEditTextField"
|
||||||
|
label="Obat"
|
||||||
|
placeholder="Masukkan Obat"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
required
|
||||||
|
value={obatEdit}
|
||||||
|
onChange={(e) => setObatEdit(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<InputLabel id="demo-simple-select-helper-label">Jenis</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="demo-simple-select-helper-label"
|
||||||
|
id="jenisEditSelect"
|
||||||
|
value={jenisEdit}
|
||||||
|
label="Jenis"
|
||||||
|
onChange={(e) => setJenisEdit(e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<MenuItem value="" disabled >
|
||||||
|
<em>-Pilih Jenis Obat</em>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value={"Jenis 1"} selected={
|
||||||
|
jenisEdit === "Jenis 1"
|
||||||
|
}>Jenis 1</MenuItem>
|
||||||
|
<MenuItem value={"Jenis 2"} selected={
|
||||||
|
jenisEdit === "Jenis 2"
|
||||||
|
}>Jenis 2</MenuItem>
|
||||||
|
<MenuItem value={"Jenis 3"} selected={
|
||||||
|
jenisEdit === "Jenis 3"
|
||||||
|
}>Jenis 3</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
type="number"
|
||||||
|
id="jumlahEditTextField"
|
||||||
|
label="Jumlah"
|
||||||
|
placeholder="Masukkan Jumlah"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
// inputRef={jumlahEditInputRef}
|
||||||
|
required
|
||||||
|
value={jumlahEdit}
|
||||||
|
onChange={(e) => setJumlahEdit(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
// inputRef={hargaInputRef}
|
||||||
|
onChange={(e) => setHargaEdit(e.target.value)}
|
||||||
|
required
|
||||||
|
id="hargaEditTextField"
|
||||||
|
label="Harga"
|
||||||
|
placeholder="Masukkan Harga"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
InputProps={{
|
||||||
|
inputComponent: NumberFormatCustom,
|
||||||
|
}}
|
||||||
|
name="harga"
|
||||||
|
value={hargaEdit}
|
||||||
|
/>
|
||||||
|
{/* <Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained" type="submit">Tambah</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box> */}
|
||||||
|
{/* </Card> */}
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
{/* <Button autoFocus onClick={
|
||||||
|
async () => {
|
||||||
|
await handleCloseModalEdit()
|
||||||
|
beforeEditObat()
|
||||||
|
}
|
||||||
|
} variant="outlined"> */}
|
||||||
|
<Button autoFocus variant="outlined" type='submit'>
|
||||||
|
Simpan Perubahan
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</BootstrapDialog>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
fullScreen
|
||||||
|
open={openHistoryModal}
|
||||||
|
onClose={handleCloseModalHistory}
|
||||||
|
TransitionComponent={Transition}
|
||||||
|
>
|
||||||
|
<AppBar sx={{ position: 'relative' }}>
|
||||||
|
<Toolbar>
|
||||||
|
<IconButton
|
||||||
|
edge="start"
|
||||||
|
color="inherit"
|
||||||
|
onClick={handleCloseModalHistory}
|
||||||
|
aria-label="close"
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||||||
|
History Log {headerModalHistory}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
|
||||||
|
<Box component="main" sx={{ flexGrow: 0, p: 2 }}>
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
<Grid item md={2}></Grid>
|
||||||
|
<Grid item xs={12} md={8}>
|
||||||
|
{
|
||||||
|
isLoadingDataHistory ?
|
||||||
|
<Box textAlign="center" sx={{ paddingBottom: 7 }}><CircularProgress color="inherit" /></Box>
|
||||||
|
: <div>
|
||||||
|
<TableContainer component={Paper}>
|
||||||
|
<Table aria-label="collapsible table" sx={{
|
||||||
|
boxShadow: 3,
|
||||||
|
"& .MuiTableCell-root": {
|
||||||
|
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<StyledTableCell />
|
||||||
|
<StyledTableCell>Waktu</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Keterangan</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Jumlah</StyledTableCell>
|
||||||
|
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{dataObatHistory.map((row, index) => (
|
||||||
|
<Row key={index} row={row} />
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained" onClick={handleCloseModalHistory}>Close History</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Grid>
|
||||||
|
<Grid item md={2}></Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarAdmin menu="Obat" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
<Grid item xs={12} md={5}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }} onSubmit={beforeTambahObat} >
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '8%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>Tambah Obat</Typography>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
inputRef={obatInputRef}
|
||||||
|
id="obatTextField"
|
||||||
|
label="Obat"
|
||||||
|
placeholder="Masukkan Obat"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<InputLabel id="demo-simple-select-helper-label">Jenis</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="demo-simple-select-helper-label"
|
||||||
|
id="jenisSelect"
|
||||||
|
value={jenis}
|
||||||
|
label="Jenis"
|
||||||
|
onChange={jenisHandleChange}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<MenuItem value="" disabled selected>
|
||||||
|
<em>-Pilih Jenis Obat</em>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value={"Jenis 1"}>Jenis 1</MenuItem>
|
||||||
|
<MenuItem value={"Jenis 2"}>Jenis 2</MenuItem>
|
||||||
|
<MenuItem value={"Jenis 3"}>Jenis 3</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
type="number"
|
||||||
|
id="jumlahTextField"
|
||||||
|
label="Jumlah"
|
||||||
|
placeholder="Masukkan Jumlah"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
inputRef={jumlahInputRef}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
// inputRef={hargaInputRef}
|
||||||
|
onChange={hargaHandleChange}
|
||||||
|
required
|
||||||
|
id="hargaTextField"
|
||||||
|
label="Harga"
|
||||||
|
placeholder="Masukkan Harga"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
InputProps={{
|
||||||
|
inputComponent: NumberFormatCustom,
|
||||||
|
}}
|
||||||
|
name="harga"
|
||||||
|
value={harga}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained" type="submit">Tambah</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={7}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '3%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}> List Tindakan</Typography>
|
||||||
|
<TableContainer component={Box} sx={{
|
||||||
|
padding: "15px",
|
||||||
|
}}>
|
||||||
|
<Table aria-label="simple table" sx={{
|
||||||
|
minWidth: 400,
|
||||||
|
boxShadow: 3,
|
||||||
|
"& .MuiTableCell-root": {
|
||||||
|
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<StyledTableCell>Obat</StyledTableCell>
|
||||||
|
<StyledTableCell>Jenis</StyledTableCell>
|
||||||
|
<StyledTableCell>Jumlah</StyledTableCell>
|
||||||
|
<StyledTableCell>Harga</StyledTableCell>
|
||||||
|
<StyledTableCell>Aksi</StyledTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{props.obat.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id_obat}
|
||||||
|
>
|
||||||
|
<TableCell component="th" scope="row">
|
||||||
|
{row.nama_obat}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{row.jenis}</TableCell>
|
||||||
|
<TableCell>{row.jumlah}</TableCell>
|
||||||
|
<TableCell>{"Rp. " + all_function.thousandSeparator(row.harga)}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<IconButton size="small" color="primary" title="Edit Detail" onClick={
|
||||||
|
() => { handleClickOpenModalEdit(row.id_obat, row.nama_obat, row.jenis, row.jumlah, row.harga) }
|
||||||
|
}>
|
||||||
|
<ModeEditIcon />
|
||||||
|
</IconButton>
|
||||||
|
{/* <IconButton size="small" color="success" title="Tambah Jumlah">
|
||||||
|
<AddCircleIcon />
|
||||||
|
</IconButton> */}
|
||||||
|
<IconButton size="small" color="info" title="Lihat Log History" onClick={
|
||||||
|
() => { handleClickOpenModalHistory(row.id_obat, row.nama_obat) }
|
||||||
|
}>
|
||||||
|
<ManageSearchIcon />
|
||||||
|
</IconButton>
|
||||||
|
</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>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getServerSideProps = withIronSessionSsr(
|
||||||
|
async function getServerSideProps({ req }) {
|
||||||
|
const user = req.session.user;
|
||||||
|
console.log(user, "sini di server side props");
|
||||||
|
// console.log(req.query)
|
||||||
|
|
||||||
|
let cek_user = await all_function.cek_user(user.username, user.password, user.role)
|
||||||
|
console.log(cek_user, "cek user")
|
||||||
|
|
||||||
|
if (cek_user !== true) {
|
||||||
|
return {
|
||||||
|
redirect: {
|
||||||
|
destination: '/?error=true',
|
||||||
|
permanent: false,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let all_obat = await all_function.obat_all();
|
||||||
|
console.log(all_obat, "ini all obat");
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
user: req.session.user,
|
||||||
|
obat: all_obat
|
||||||
|
},
|
||||||
|
// revalidate: 10
|
||||||
|
};
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cookieName: "myapp_cookiename",
|
||||||
|
password: "complex_password_at_least_32_characters_long",
|
||||||
|
// secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
|
||||||
|
cookieOptions: {
|
||||||
|
secure: process.env.NODE_ENV === "production",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export default DataObatPage;
|
||||||
234
pages/admin/data-pasien.js
Normal file
234
pages/admin/data-pasien.js
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
// import Paper from '@mui/material/Paper';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
|
||||||
|
// select
|
||||||
|
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 Divider from '@mui/material/Divider';
|
||||||
|
|
||||||
|
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 Paper from '@mui/material/Paper';
|
||||||
|
|
||||||
|
|
||||||
|
import AppBarAdmin from '../../components/admin/appBar';
|
||||||
|
|
||||||
|
function createData(name, calories, fat, carbs, protein) {
|
||||||
|
return { name, calories, fat, carbs, protein };
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
||||||
|
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
||||||
|
createData('Eclair', 262, 16.0, 24, 6.0),
|
||||||
|
createData('Cupcake', 305, 3.7, 67, 4.3),
|
||||||
|
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
||||||
|
];
|
||||||
|
|
||||||
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
|
[`&.${tableCellClasses.head}`]: {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.common.white,
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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,
|
||||||
|
}));
|
||||||
|
|
||||||
|
function DataPasienPage() {
|
||||||
|
const [age, setAge] = React.useState('');
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
setAge(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarAdmin menu="Pasien" />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
<Grid item xs={12} md={5}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '8%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>Pasien Baru</Typography>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="nikTextField"
|
||||||
|
label="NIK"
|
||||||
|
placeholder="Masukkan NIK"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="namaTextField"
|
||||||
|
label="Nama"
|
||||||
|
placeholder="Masukkan Nama"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="alamatTextField"
|
||||||
|
label="Alamat"
|
||||||
|
placeholder="Masukkan Alamat"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="NoTelpTextField"
|
||||||
|
label="No Telpon"
|
||||||
|
placeholder="Masukkan No Telpon"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<InputLabel id="demo-simple-select-helper-label">Jenis Kelamin</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="demo-simple-select-helper-label"
|
||||||
|
id="jenisKelaminSelect"
|
||||||
|
value={age}
|
||||||
|
label="Jenis"
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<MenuItem value="">
|
||||||
|
<em>None</em>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value={10}>Ten</MenuItem>
|
||||||
|
<MenuItem value={20}>Twenty</MenuItem>
|
||||||
|
<MenuItem value={30}>Thirty</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Divider />
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="tanggalPeriksaTextField"
|
||||||
|
label="Tanggal Periksa"
|
||||||
|
placeholder="Masukkan Tanggal Periksa"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<InputLabel id="demo-simple-select-helper-label">Dokter</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="demo-simple-select-helper-label"
|
||||||
|
id="jenisKelaminSelect"
|
||||||
|
value={age}
|
||||||
|
label="Jenis"
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<MenuItem value="">
|
||||||
|
<em>None</em>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value={10}>Ten</MenuItem>
|
||||||
|
<MenuItem value={20}>Twenty</MenuItem>
|
||||||
|
<MenuItem value={30}>Thirty</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="penyakitTextField"
|
||||||
|
label="Penyakit"
|
||||||
|
placeholder="Masukkan Penyakit"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained">Tambah</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={7}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '3%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>List Pasien</Typography>
|
||||||
|
<TableContainer component={Box} sx={{
|
||||||
|
padding: "15px",
|
||||||
|
}}>
|
||||||
|
<Table aria-label="simple table" sx={{
|
||||||
|
minWidth: 650,
|
||||||
|
boxShadow: 3,
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Calories</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.name}
|
||||||
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||||
|
>
|
||||||
|
<TableCell component="th" scope="row">
|
||||||
|
{row.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align="right">{row.calories}</TableCell>
|
||||||
|
<TableCell align="right">{row.fat}</TableCell>
|
||||||
|
<TableCell align="right">{row.carbs}</TableCell>
|
||||||
|
<TableCell align="right">{row.protein}</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>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataPasienPage;
|
||||||
364
pages/admin/data-tindakan.js
Normal file
364
pages/admin/data-tindakan.js
Normal file
@ -0,0 +1,364 @@
|
|||||||
|
import { useRef, useState } from 'react';
|
||||||
|
import Router from 'next/router';
|
||||||
|
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
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 Paper from '@mui/material/Paper';
|
||||||
|
|
||||||
|
|
||||||
|
import AppBarAdmin from '../../components/admin/appBar';
|
||||||
|
|
||||||
|
// backdrop
|
||||||
|
import Backdrop from '@mui/material/Backdrop';
|
||||||
|
import CircularProgress from '@mui/material/CircularProgress';
|
||||||
|
|
||||||
|
// toast
|
||||||
|
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)
|
||||||
|
|
||||||
|
// this for check session
|
||||||
|
let all_function = require('../../function/all_function.js')
|
||||||
|
import { withIronSessionSsr } from "iron-session/next";
|
||||||
|
|
||||||
|
// button icon
|
||||||
|
import IconButton from '@mui/material/IconButton';
|
||||||
|
import ModeEditIcon from '@mui/icons-material/ModeEdit';
|
||||||
|
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
|
||||||
|
|
||||||
|
|
||||||
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
|
[`&.${tableCellClasses.head}`]: {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.common.white,
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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,
|
||||||
|
}));
|
||||||
|
|
||||||
|
function TindakanPage(props) {
|
||||||
|
// console.log(props, 'ini di props')
|
||||||
|
const tindakanInputRef = useRef();
|
||||||
|
|
||||||
|
const [backdrop, setBackdrop] = useState(false); //this is for backdrop
|
||||||
|
const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
|
||||||
|
|
||||||
|
// check if exist before add tindakan
|
||||||
|
async function cek_tindakan(tindakan) {
|
||||||
|
// console.log(cek_tindakan, "disini proses untuk cek tindakan")
|
||||||
|
// return false
|
||||||
|
|
||||||
|
try {
|
||||||
|
const url = process.env.HTTP_URL + "/api/admin/tindakan"
|
||||||
|
// create fetch post request
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'allow-cors-origin': '*',
|
||||||
|
'crossDomain': true,
|
||||||
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
tindakan: tindakan,
|
||||||
|
username: props.user.username,
|
||||||
|
role: props.user.role,
|
||||||
|
password: props.user.password
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// get response
|
||||||
|
const data = await response.json()
|
||||||
|
|
||||||
|
console.log(data, "ini data dari cek tindakan")
|
||||||
|
if (response.status === 200) {
|
||||||
|
// create toast
|
||||||
|
toast.success(data.message)
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
// create toast
|
||||||
|
toast.error(data.message)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
// console.log(err)
|
||||||
|
toast.error("Terjadi kesalahan pada server")
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete tindakan
|
||||||
|
async function delete_tindakan(id) {
|
||||||
|
// console.log(id, "ini id yang akan di delete")
|
||||||
|
try{
|
||||||
|
const url = process.env.HTTP_URL + "/api/admin/tindakan?id=" + id
|
||||||
|
console.log(url, "ini url yang akan di delete")
|
||||||
|
// create fetch post request
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'allow-cors-origin': '*',
|
||||||
|
'crossDomain': true,
|
||||||
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
// get response
|
||||||
|
const data = await response.json()
|
||||||
|
|
||||||
|
console.log(data, "ini data dari delete tindakan")
|
||||||
|
if (response.status === 200) {
|
||||||
|
// create toast
|
||||||
|
toast.success(data.message)
|
||||||
|
Router.replace(Router.asPath)
|
||||||
|
// return true
|
||||||
|
}else{
|
||||||
|
// create toast
|
||||||
|
toast.error(data.message)
|
||||||
|
// return false
|
||||||
|
}
|
||||||
|
}catch(err){
|
||||||
|
console.log(err)
|
||||||
|
toast.error("Terjadi kesalahan pada server")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// before add tindakan
|
||||||
|
async function tambahTindakanBaru(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
// inidia();
|
||||||
|
await setSweetAlertLoading(true);
|
||||||
|
|
||||||
|
const tindakan = await tindakanInputRef.current.value;
|
||||||
|
|
||||||
|
// create swal yakin untuk tambah tindakan
|
||||||
|
await MySwal.fire({
|
||||||
|
title: 'Yakin ?',
|
||||||
|
text: `Tindakan ${tindakan} akan ditambahkan`,
|
||||||
|
icon: 'info',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonColor: '#3085d6',
|
||||||
|
cancelButtonColor: '#d33',
|
||||||
|
confirmButtonText: 'Ya, tambahkan!'
|
||||||
|
}).then(async (result) => {
|
||||||
|
if (result.value) {
|
||||||
|
setBackdrop(true);
|
||||||
|
// console.log(tindakan)
|
||||||
|
let response = await cek_tindakan(tindakan);
|
||||||
|
if (!response) {
|
||||||
|
// focus to input
|
||||||
|
tindakanInputRef.current.focus();
|
||||||
|
}else{
|
||||||
|
// clear input
|
||||||
|
tindakanInputRef.current.value = "";
|
||||||
|
Router.replace(Router.asPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
await setBackdrop(false);
|
||||||
|
await setSweetAlertLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// before delete tindakan
|
||||||
|
async function deleteTindakan(id,nama){
|
||||||
|
console.log(id, "ini id yang akan di hapus")
|
||||||
|
await setSweetAlertLoading(true);
|
||||||
|
await MySwal.fire({
|
||||||
|
title: 'Yakin ?',
|
||||||
|
text: `Tindakan ${nama} akan dihapus`,
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonColor: '#3085d6',
|
||||||
|
cancelButtonColor: '#d33',
|
||||||
|
confirmButtonText: 'Ya, hapus!'
|
||||||
|
}).then(async (result) => {
|
||||||
|
if (result.value) {
|
||||||
|
await setBackdrop(true);
|
||||||
|
// console.log(tindakan)
|
||||||
|
await delete_tindakan(id);
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
await setBackdrop(false);
|
||||||
|
await setSweetAlertLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarAdmin menu="Tindakan" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={12} md={4} sm={4}>
|
||||||
|
{/* <Item> */}
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }} onSubmit={tambahTindakanBaru}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '8%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>Tambah Tindakan</Typography>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="tindakanTextField"
|
||||||
|
inputRef={tindakanInputRef}
|
||||||
|
label="Tindakan Baru"
|
||||||
|
placeholder="Masukkan Tindakan Baru"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained" type='submit'>Tambah</Button>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
{/* </Item> */}
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={8} sm={8}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '3%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}> List Tindakan</Typography>
|
||||||
|
<TableContainer component={Box} sx={{
|
||||||
|
padding: "15px",
|
||||||
|
}}>
|
||||||
|
<Table aria-label="simple table" sx={{
|
||||||
|
minWidth: 300,
|
||||||
|
boxShadow: 3,
|
||||||
|
"& .MuiTableCell-root": {
|
||||||
|
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<StyledTableCell>Tindakan</StyledTableCell>
|
||||||
|
<StyledTableCell sx={{
|
||||||
|
width: "30%",
|
||||||
|
}}>Aksi</StyledTableCell>
|
||||||
|
{/* <StyledTableCell align="right">Fat (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Protein (g)</StyledTableCell> */}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{props.tindakan.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id_tindakan}
|
||||||
|
// sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||||
|
>
|
||||||
|
<TableCell component="th" scope="row">
|
||||||
|
{row.nama_tindakan}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<IconButton size="small" color="primary">
|
||||||
|
<ModeEditIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton size="small" color="error" onClick={
|
||||||
|
() => {
|
||||||
|
deleteTindakan(row.id_tindakan, row.nama_tindakan)
|
||||||
|
}
|
||||||
|
} >
|
||||||
|
<DeleteForeverIcon />
|
||||||
|
</IconButton>
|
||||||
|
</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>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getServerSideProps = withIronSessionSsr(
|
||||||
|
async function getServerSideProps({ req }) {
|
||||||
|
const user = req.session.user;
|
||||||
|
console.log(user, "sini di server side props");
|
||||||
|
// console.log(req.query)
|
||||||
|
|
||||||
|
let cek_user = await all_function.cek_user(user.username, user.password, user.role)
|
||||||
|
console.log(cek_user, "cek user")
|
||||||
|
|
||||||
|
if (cek_user !== true) {
|
||||||
|
return {
|
||||||
|
redirect: {
|
||||||
|
destination: '/?error=true',
|
||||||
|
permanent: false,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let all_tindakan = await all_function.tindakan_all();
|
||||||
|
console.log(all_tindakan, "ini all tindakan");
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
user: req.session.user,
|
||||||
|
tindakan: all_tindakan
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cookieName: "myapp_cookiename",
|
||||||
|
password: "complex_password_at_least_32_characters_long",
|
||||||
|
// secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
|
||||||
|
cookieOptions: {
|
||||||
|
secure: process.env.NODE_ENV === "production",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
export default TindakanPage;
|
||||||
192
pages/admin/data-user.js
Normal file
192
pages/admin/data-user.js
Normal file
@ -0,0 +1,192 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
// import Paper from '@mui/material/Paper';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
|
||||||
|
// select
|
||||||
|
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 Divider from '@mui/material/Divider';
|
||||||
|
|
||||||
|
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 Paper from '@mui/material/Paper';
|
||||||
|
|
||||||
|
|
||||||
|
import AppBarAdmin from '../../components/admin/appBar';
|
||||||
|
|
||||||
|
function createData(name, calories, fat, carbs, protein) {
|
||||||
|
return { name, calories, fat, carbs, protein };
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
||||||
|
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
||||||
|
createData('Eclair', 262, 16.0, 24, 6.0),
|
||||||
|
createData('Cupcake', 305, 3.7, 67, 4.3),
|
||||||
|
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
||||||
|
];
|
||||||
|
|
||||||
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
|
[`&.${tableCellClasses.head}`]: {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.common.white,
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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,
|
||||||
|
}));
|
||||||
|
|
||||||
|
function DataPasienPage() {
|
||||||
|
const [age, setAge] = React.useState('');
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
setAge(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarAdmin />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
<Grid item xs={12} md={5}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '8%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>Admin Baru</Typography>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<InputLabel id="demo-simple-select-helper-label">Role</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="demo-simple-select-helper-label"
|
||||||
|
id="jenisKelaminSelect"
|
||||||
|
value={age}
|
||||||
|
label="Jenis"
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<MenuItem value="">
|
||||||
|
<em>None</em>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value={10}>Ten</MenuItem>
|
||||||
|
<MenuItem value={20}>Twenty</MenuItem>
|
||||||
|
<MenuItem value={30}>Thirty</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="usernameTextField"
|
||||||
|
label="Username"
|
||||||
|
placeholder="Masukkan Username"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="passwordTextField"
|
||||||
|
label="Password"
|
||||||
|
placeholder="Masukkan Password"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="konfirmasiPasswordTextField"
|
||||||
|
label="Konfirmasi Password"
|
||||||
|
placeholder="Masukkan Konfirmasi Password"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained">Tambah</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={7}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '3%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>List Admin</Typography>
|
||||||
|
<TableContainer component={Box} sx={{
|
||||||
|
padding: "15px",
|
||||||
|
}}>
|
||||||
|
<Table aria-label="simple table" sx={{
|
||||||
|
minWidth: 650,
|
||||||
|
boxShadow: 3,
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Calories</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.name}
|
||||||
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||||
|
>
|
||||||
|
<TableCell component="th" scope="row">
|
||||||
|
{row.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align="right">{row.calories}</TableCell>
|
||||||
|
<TableCell align="right">{row.fat}</TableCell>
|
||||||
|
<TableCell align="right">{row.carbs}</TableCell>
|
||||||
|
<TableCell align="right">{row.protein}</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>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataPasienPage;
|
||||||
235
pages/admin/index.js
Normal file
235
pages/admin/index.js
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
import Paper from '@mui/material/Paper';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
|
||||||
|
|
||||||
|
// icon
|
||||||
|
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';
|
||||||
|
|
||||||
|
import AppBarAdmin from '../../components/admin/appBar';
|
||||||
|
|
||||||
|
import Backdrop from '@mui/material/Backdrop';
|
||||||
|
import CircularProgress from '@mui/material/CircularProgress';
|
||||||
|
|
||||||
|
// this for check session
|
||||||
|
let all_function = require('../../function/all_function.js')
|
||||||
|
import { withIronSessionSsr } from "iron-session/next";
|
||||||
|
|
||||||
|
// import { createTheme, ThemeProvider } from '@mui/material/styles'; // for custom theme
|
||||||
|
|
||||||
|
// for theme
|
||||||
|
// const theme = createTheme({
|
||||||
|
// fontFamily: '"Arial", "Times New Roman"',
|
||||||
|
// typography: {
|
||||||
|
// "fontFamily": '"Arial", "Times New Roman"',
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
|
const Item = styled(Paper)(({ theme }) => ({
|
||||||
|
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
|
||||||
|
...theme.typography.body2,
|
||||||
|
padding: theme.spacing(1),
|
||||||
|
textAlign: 'center',
|
||||||
|
color: theme.palette.text.secondary,
|
||||||
|
'&:hover': {
|
||||||
|
opacity: 0.7,
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
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,
|
||||||
|
}));
|
||||||
|
|
||||||
|
function AdminIndexPage() {
|
||||||
|
// console.log(localStorage.getItem("user_data"))
|
||||||
|
const [backdrop, setBackdrop] = useState(false);
|
||||||
|
|
||||||
|
// async function cek_user(){
|
||||||
|
// setBackdrop(true);
|
||||||
|
// let response = await all_function.cek_user("kicap92", "5c188ab394811451656f8c7f33680127", "admin")
|
||||||
|
// if(response == true){
|
||||||
|
// setBackdrop(false);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// cek_user()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* <ThemeProvider theme={theme}> */}
|
||||||
|
<Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarAdmin menu="Home" />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={6} md={3} >
|
||||||
|
<Item
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'yellow',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid container spacing={1}>
|
||||||
|
<Grid item xs={12} md={3} >
|
||||||
|
<SickIcon sx={{
|
||||||
|
fontSize: 60,
|
||||||
|
}} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={9} >
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}>
|
||||||
|
Pasien
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="p" gutterBottom sx={{
|
||||||
|
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}>Jumlah : 101</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Item>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={3}>
|
||||||
|
<Item
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'aqua',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid container spacing={1}>
|
||||||
|
<Grid item xs={12} md={3} >
|
||||||
|
<MedicationIcon sx={{
|
||||||
|
fontSize: 60,
|
||||||
|
}} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={9} >
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}>
|
||||||
|
Dokter
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="p" gutterBottom sx={{
|
||||||
|
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}>Jumlah : 30</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Item>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={3}>
|
||||||
|
<Item
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'lime',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid container spacing={1}>
|
||||||
|
<Grid item xs={12} md={3} >
|
||||||
|
<VaccinesIcon sx={{
|
||||||
|
fontSize: 60,
|
||||||
|
}} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={9} >
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}>
|
||||||
|
Obat
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="p" gutterBottom sx={{
|
||||||
|
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}>Jumlah : 30</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Item>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={3}>
|
||||||
|
<Item
|
||||||
|
sx={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
backgroundColor: 'silver',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid container spacing={1}>
|
||||||
|
<Grid item xs={12} md={3} >
|
||||||
|
<AddAlertIcon sx={{
|
||||||
|
fontSize: 60,
|
||||||
|
}} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={9} >
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}>
|
||||||
|
Tindakan
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="p" gutterBottom sx={{
|
||||||
|
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}>Jumlah : 30</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Item>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
{/* </ThemeProvider> */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getServerSideProps = withIronSessionSsr(
|
||||||
|
async function getServerSideProps({ req }) {
|
||||||
|
const user = req.session.user;
|
||||||
|
console.log(user, "sini di server side props");
|
||||||
|
// console.log(req.query)
|
||||||
|
|
||||||
|
let cek_user = await all_function.cek_user(user.username, user.password, user.role)
|
||||||
|
console.log(cek_user, "cek user")
|
||||||
|
|
||||||
|
if (cek_user !== true) {
|
||||||
|
return {
|
||||||
|
redirect: {
|
||||||
|
destination: '/?error=true',
|
||||||
|
permanent: false,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
user: req.session.user,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cookieName: "myapp_cookiename",
|
||||||
|
password: "complex_password_at_least_32_characters_long",
|
||||||
|
// secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
|
||||||
|
cookieOptions: {
|
||||||
|
secure: process.env.NODE_ENV === "production",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default AdminIndexPage;
|
||||||
@ -1,5 +0,0 @@
|
|||||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
|
||||||
|
|
||||||
export default function handler(req, res) {
|
|
||||||
res.status(200).json({ name: 'John Doe' })
|
|
||||||
}
|
|
||||||
202
pages/dokter/index.js
Normal file
202
pages/dokter/index.js
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
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 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 Typography from '@mui/material/Typography';
|
||||||
|
|
||||||
|
// clock picker
|
||||||
|
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||||
|
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||||
|
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
|
||||||
|
|
||||||
|
import AppBarDokter from '../../components/dokter/appBar';
|
||||||
|
|
||||||
|
function createData(name, calories, fat, carbs, protein) {
|
||||||
|
return { name, calories, fat, carbs, protein };
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
||||||
|
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
||||||
|
createData('Eclair', 262, 16.0, 24, 6.0),
|
||||||
|
createData('Cupcake', 305, 3.7, 67, 4.3),
|
||||||
|
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
||||||
|
];
|
||||||
|
|
||||||
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
|
[`&.${tableCellClasses.head}`]: {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.common.white,
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function DokterIndexPage() {
|
||||||
|
|
||||||
|
const [age, setAge] = React.useState('');
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
setAge(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// clock picker
|
||||||
|
const [value, setValue] = React.useState(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarDokter />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={12} md={4} >
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '8%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>Tambah Jadwal</Typography>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<InputLabel id="demo-simple-select-helper-label">Hari</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="demo-simple-select-helper-label"
|
||||||
|
id="jenisSelect"
|
||||||
|
value={age}
|
||||||
|
label="Jenis"
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<MenuItem value="">
|
||||||
|
<em>None</em>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value={10}>Ten</MenuItem>
|
||||||
|
<MenuItem value={20}>Twenty</MenuItem>
|
||||||
|
<MenuItem value={30}>Thirty</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<LocalizationProvider dateAdapter={AdapterDateFns} >
|
||||||
|
<MobileTimePicker
|
||||||
|
|
||||||
|
label="Jam Mulai"
|
||||||
|
value={value}
|
||||||
|
onChange={(newValue) => {
|
||||||
|
setValue(newValue);
|
||||||
|
}}
|
||||||
|
renderInput={(params) => <TextField {...params} />}
|
||||||
|
/>
|
||||||
|
</LocalizationProvider>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||||
|
<LocalizationProvider dateAdapter={AdapterDateFns} >
|
||||||
|
<MobileTimePicker
|
||||||
|
|
||||||
|
label="Jam Selesai"
|
||||||
|
value={value}
|
||||||
|
onChange={(newValue) => {
|
||||||
|
setValue(newValue);
|
||||||
|
}}
|
||||||
|
renderInput={(params) => <TextField {...params} />}
|
||||||
|
/>
|
||||||
|
</LocalizationProvider>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained">Tambah</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<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={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '3%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}> List Tindakan</Typography>
|
||||||
|
<TableContainer component={Box} sx={{
|
||||||
|
padding: "15px",
|
||||||
|
}}>
|
||||||
|
<Table aria-label="simple table" sx={{
|
||||||
|
minWidth: 650,
|
||||||
|
boxShadow: 3,
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Calories</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.name}
|
||||||
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||||
|
>
|
||||||
|
<TableCell component="th" scope="row">
|
||||||
|
{row.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align="right">{row.calories}</TableCell>
|
||||||
|
<TableCell align="right">{row.fat}</TableCell>
|
||||||
|
<TableCell align="right">{row.carbs}</TableCell>
|
||||||
|
<TableCell align="right">{row.protein}</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>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
126
pages/dokter/rekam-medis/data.js
Normal file
126
pages/dokter/rekam-medis/data.js
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import * as React from 'react';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
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 AppBarDokter from '../../../components/dokter/appBar';
|
||||||
|
|
||||||
|
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 Post = () => {
|
||||||
|
const router = useRouter() // ini untuk get query dari url
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarDokter />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={12} md={7} >
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '8%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>Tambah Jadwal</Typography>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="namaPasienTextField"
|
||||||
|
label="Nama Pasien"
|
||||||
|
placeholder="Masukkan Nama Pasien"
|
||||||
|
sx={{ width: "90%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="tanggalPeriksaTextField"
|
||||||
|
label="Tanggal Periksa"
|
||||||
|
placeholder="Masukkan Tanggal Periksa"
|
||||||
|
sx={{ width: "90%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="keluhanPasienTextField"
|
||||||
|
label="Keluhan Pasien"
|
||||||
|
placeholder="Masukkan Keluhan Pasien"
|
||||||
|
multiline
|
||||||
|
rows={6}
|
||||||
|
// maxRows={6}
|
||||||
|
sx={{ width: "90%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<TextField
|
||||||
|
id="diagnosaTextField"
|
||||||
|
label="Diagnosa"
|
||||||
|
placeholder="Masukkan Diagnosa"
|
||||||
|
multiline
|
||||||
|
rows={6}
|
||||||
|
// maxRows={6}
|
||||||
|
sx={{ width: "90%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained">Tambah</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={5}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '3%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}> List Tindakan</Typography>
|
||||||
|
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
<Button variant="contained">Cetak</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ini untuk get query dari url
|
||||||
|
Post.getInitialProps = async ({ query }) => {
|
||||||
|
// console.log(query)
|
||||||
|
return {query }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Post
|
||||||
142
pages/dokter/rekam-medis/index.js
Normal file
142
pages/dokter/rekam-medis/index.js
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
import Divider from '@mui/material/Divider';
|
||||||
|
|
||||||
|
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 Typography from '@mui/material/Typography';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import AppBarDokter from '../../../components/dokter/appBar';
|
||||||
|
|
||||||
|
function createData(name, calories, fat, carbs, protein) {
|
||||||
|
return { name, calories, fat, carbs, protein };
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
||||||
|
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
||||||
|
createData('Eclair', 262, 16.0, 24, 6.0),
|
||||||
|
createData('Cupcake', 305, 3.7, 67, 4.3),
|
||||||
|
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
||||||
|
];
|
||||||
|
|
||||||
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
|
[`&.${tableCellClasses.head}`]: {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.common.white,
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function RekamMedisPage() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBarDokter />
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||||
|
<DrawerHeader />
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={12}>
|
||||||
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||||
|
<Typography variant="h6" gutterBottom sx={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingLeft: '3%',
|
||||||
|
paddingTop: "10px",
|
||||||
|
paddingBottom: "10px",
|
||||||
|
backgroundColor: "silver",
|
||||||
|
}}>Rekam Medis</Typography>
|
||||||
|
<Grid container spacing={1} sx={{paddingTop:2}}>
|
||||||
|
<Grid item xs={1} md={3}></Grid>
|
||||||
|
<Grid item xs={10} md={6}>
|
||||||
|
<TextField
|
||||||
|
id="namaTextField"
|
||||||
|
label="NIK, Nama Pasien"
|
||||||
|
placeholder="Masukkan NIK, Nama Pasien"
|
||||||
|
sx={{ width: "85%", boxShadow: 10 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={1} md={3}></Grid>
|
||||||
|
</Grid>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
<Box sx={{ maxWidth: "100%", textAlign: "center" }}>
|
||||||
|
<Button variant="contained">Cari</Button>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<Divider />
|
||||||
|
<TableContainer component={Box} sx={{
|
||||||
|
padding: "15px",
|
||||||
|
}}>
|
||||||
|
<Table aria-label="simple table" sx={{
|
||||||
|
minWidth: 650,
|
||||||
|
boxShadow: 3,
|
||||||
|
}}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Calories</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
||||||
|
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.name}
|
||||||
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||||
|
>
|
||||||
|
<TableCell component="th" scope="row">
|
||||||
|
{row.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align="right">{row.calories}</TableCell>
|
||||||
|
<TableCell align="right">{row.fat}</TableCell>
|
||||||
|
<TableCell align="right">{row.carbs}</TableCell>
|
||||||
|
<TableCell align="right">{row.protein}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
<Box sx={{ padding: "5px" }}></Box>
|
||||||
|
<Box textAlign="center">
|
||||||
|
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ padding: "10px" }}></Box>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,69 +1,25 @@
|
|||||||
import Head from 'next/head'
|
import ResponsiveAppBarIndex from "../components/before_login/appBar"
|
||||||
import Image from 'next/image'
|
import GridIndex from "../components/before_login/body"
|
||||||
import styles from '../styles/Home.module.css'
|
|
||||||
|
|
||||||
export default function Home() {
|
function Home(props) {
|
||||||
|
// console.log(props, "sini di home");
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div>
|
||||||
<Head>
|
<ResponsiveAppBarIndex />
|
||||||
<title>Create Next App</title>
|
<div><GridIndex errornya={props.error} /></div>
|
||||||
<meta name="description" content="Generated by create next app" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<main className={styles.main}>
|
|
||||||
<h1 className={styles.title}>
|
|
||||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className={styles.description}>
|
|
||||||
Get started by editing{' '}
|
|
||||||
<code className={styles.code}>pages/index.js</code>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className={styles.grid}>
|
|
||||||
<a href="https://nextjs.org/docs" className={styles.card}>
|
|
||||||
<h2>Documentation →</h2>
|
|
||||||
<p>Find in-depth information about Next.js features and API.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="https://nextjs.org/learn" className={styles.card}>
|
|
||||||
<h2>Learn →</h2>
|
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://github.com/vercel/next.js/tree/canary/examples"
|
|
||||||
className={styles.card}
|
|
||||||
>
|
|
||||||
<h2>Examples →</h2>
|
|
||||||
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
>
|
|
||||||
<h2>Deploy →</h2>
|
|
||||||
<p>
|
|
||||||
Instantly deploy your Next.js site to a public URL with Vercel.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer className={styles.footer}>
|
|
||||||
<a
|
|
||||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Powered by{' '}
|
|
||||||
<span className={styles.logo}>
|
|
||||||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getServerSideProps({req}) {
|
||||||
|
// console.log(req.query.error)
|
||||||
|
// if
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
error: (req.query.error == 'true') ? true : false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home
|
||||||
15
server/database/db.config.js
Normal file
15
server/database/db.config.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
require("dotenv").config();
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
HOST: process.env.DB_HOST,
|
||||||
|
USER: process.env.DB_USER,
|
||||||
|
PASSWORD: process.env.DB_PASS,
|
||||||
|
DB: process.env.DB_NAME,
|
||||||
|
dialect: "mysql",
|
||||||
|
pool: {
|
||||||
|
max: 5,
|
||||||
|
min: 0,
|
||||||
|
acquire: 30000,
|
||||||
|
idle: 10000
|
||||||
|
}
|
||||||
|
};
|
||||||
45
server/database/index.js
Normal file
45
server/database/index.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
const dbConfig = require('./db.config.js');
|
||||||
|
const Sequelize = require('sequelize');
|
||||||
|
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
|
||||||
|
host: dbConfig.HOST,
|
||||||
|
dialect: dbConfig.dialect,
|
||||||
|
operatorsAliases: false,
|
||||||
|
pool: {
|
||||||
|
max: dbConfig.pool.max,
|
||||||
|
min: dbConfig.pool.min,
|
||||||
|
acquire: dbConfig.pool.acquire,
|
||||||
|
idle: dbConfig.pool.idle
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const db = {}
|
||||||
|
db.Sequelize = Sequelize
|
||||||
|
db.sequelize = sequelize
|
||||||
|
|
||||||
|
// load models
|
||||||
|
db.admin = require('./model/admin.model.js')(sequelize, Sequelize)
|
||||||
|
db.login = require('./model/login_user.model.js')(sequelize, Sequelize)
|
||||||
|
db.obat = require('./model/obat.model.js')(sequelize, Sequelize)
|
||||||
|
db.dokter = require('./model/dokter.model.js')(sequelize, Sequelize)
|
||||||
|
db.pasien = require('./model/pasien.model.js')(sequelize, Sequelize)
|
||||||
|
db.tindakan = require('./model/tindakan.model.js')(sequelize, Sequelize)
|
||||||
|
db.rekam_medis = require('./model/rekam_medis.model.js')(sequelize, Sequelize)
|
||||||
|
|
||||||
|
// create one to one relations between admin and login
|
||||||
|
db.admin.hasOne(db.login, {foreignKey: {name: 'id_admin', allowNull: true}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
|
||||||
|
db.login.belongsTo(db.admin, {foreignKey: {name: 'id_admin', allowNull: true}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
|
||||||
|
|
||||||
|
// create one to one relations between doker and login
|
||||||
|
db.dokter.hasOne(db.login, {foreignKey: {name: 'id_dokter', allowNull: true}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
|
||||||
|
db.login.belongsTo(db.dokter, {foreignKey: {name: 'id_dokter', allowNull: true}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
|
||||||
|
|
||||||
|
// create one to many relations between pasien and rekam_medis
|
||||||
|
db.pasien.hasMany(db.rekam_medis, {foreignKey: {name: 'id_pasien', allowNull: false}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
|
||||||
|
db.rekam_medis.belongsTo(db.pasien, {foreignKey: {name: 'id_pasien', allowNull: false}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
|
||||||
|
|
||||||
|
// create one to many relations between dokter and rekam_medis
|
||||||
|
db.dokter.hasMany(db.rekam_medis, {foreignKey: {name: 'id_dokter', allowNull: false}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
|
||||||
|
db.rekam_medis.belongsTo(db.dokter, {foreignKey: {name: 'id_dokter', allowNull: false}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = db
|
||||||
|
// CRS-y5Vv-Xa5P-FTxTA
|
||||||
26
server/database/model/admin.model.js
Normal file
26
server/database/model/admin.model.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
module.exports = (sequalize, Sequelize) => {
|
||||||
|
const Admin = sequalize.define("tb_admin", {
|
||||||
|
nik: {
|
||||||
|
type: Sequelize.STRING(16),
|
||||||
|
primaryKey: true,
|
||||||
|
allowNull: false,
|
||||||
|
unique: true,
|
||||||
|
},
|
||||||
|
nama:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
// hehe :{
|
||||||
|
// type: Sequelize.STRING,
|
||||||
|
// },
|
||||||
|
role: {
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
freezeTableName: true,
|
||||||
|
tableName: 'tb_admin',
|
||||||
|
});
|
||||||
|
|
||||||
|
return Admin;
|
||||||
|
}
|
||||||
34
server/database/model/dokter.model.js
Normal file
34
server/database/model/dokter.model.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
module.exports = (sequelize, Sequelize) => {
|
||||||
|
const Dokter = sequelize.define("tb_dokter", {
|
||||||
|
nik:{
|
||||||
|
type: Sequelize.STRING(16),
|
||||||
|
allowNull: false,
|
||||||
|
primaryKey: true,
|
||||||
|
unique: true,
|
||||||
|
},
|
||||||
|
nama:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
alamat:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
no_telp:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
spesialis:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
jam_kerja:{
|
||||||
|
type: Sequelize.TEXT('long'),
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
freezeTableName: true,
|
||||||
|
tableName: 'tb_dokter',
|
||||||
|
})
|
||||||
|
|
||||||
|
return Dokter
|
||||||
|
}
|
||||||
26
server/database/model/login_user.model.js
Normal file
26
server/database/model/login_user.model.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
module.exports = (sequelize, Sequelize) => {
|
||||||
|
const Login = sequelize.define("tb_login", {
|
||||||
|
id: {
|
||||||
|
type: Sequelize.INTEGER,
|
||||||
|
primaryKey: true,
|
||||||
|
autoIncrement: true
|
||||||
|
},
|
||||||
|
username: {
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
role : {
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
},{
|
||||||
|
freezeTableName: true,
|
||||||
|
tableName: 'tb_login',
|
||||||
|
})
|
||||||
|
|
||||||
|
return Login;
|
||||||
|
}
|
||||||
35
server/database/model/obat.model.js
Normal file
35
server/database/model/obat.model.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
module.exports = (sequelize, Sequelize) => {
|
||||||
|
const Obat = sequelize.define("tb_obat", {
|
||||||
|
id_obat:{
|
||||||
|
type: Sequelize.INTEGER,
|
||||||
|
allowNull: false,
|
||||||
|
primaryKey: true,
|
||||||
|
autoIncrement: true
|
||||||
|
},
|
||||||
|
nama_obat:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
jenis:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
jumlah:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
harga:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
history:{
|
||||||
|
type: Sequelize.TEXT("long"),
|
||||||
|
allowNull: false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
freezeTableName: true,
|
||||||
|
tableName: 'tb_obat',
|
||||||
|
})
|
||||||
|
|
||||||
|
return Obat
|
||||||
|
}
|
||||||
54
server/database/model/pasien.model.js
Normal file
54
server/database/model/pasien.model.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
module.exports = (sequelize, Sequelize) => {
|
||||||
|
const Pasien = sequelize.define("tb_pasien", {
|
||||||
|
nik:{
|
||||||
|
type: Sequelize.STRING(16),
|
||||||
|
allowNull: false,
|
||||||
|
primaryKey: true,
|
||||||
|
unique: true,
|
||||||
|
},
|
||||||
|
nama:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
jenis_kelamin:{
|
||||||
|
type: Sequelize.STRING(10),
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
tgl_lahir:{
|
||||||
|
type: Sequelize.DATE,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
alamat:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
pekerjaan:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
golongan_darah:{
|
||||||
|
type: Sequelize.STRING(3),
|
||||||
|
},
|
||||||
|
pendidikan:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
},
|
||||||
|
no_telp:{
|
||||||
|
type: Sequelize.STRING(13),
|
||||||
|
},
|
||||||
|
status_pernikahan:{
|
||||||
|
type: Sequelize.STRING(15),
|
||||||
|
},
|
||||||
|
nama_orang_tua_wali:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
},
|
||||||
|
nama_pasangan:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
}
|
||||||
|
|
||||||
|
},{
|
||||||
|
freezeTableName: true,
|
||||||
|
tableName: 'tb_pasien',
|
||||||
|
});
|
||||||
|
|
||||||
|
return Pasien;
|
||||||
|
}
|
||||||
39
server/database/model/rekam_medis.model.js
Normal file
39
server/database/model/rekam_medis.model.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
module.exports = (sequelize, Sequelize) => {
|
||||||
|
const RekamMedis = sequelize.define("tb_rekam_medis", {
|
||||||
|
id_rekam_medis:{
|
||||||
|
type: Sequelize.INTEGER,
|
||||||
|
allowNull: false,
|
||||||
|
primaryKey: true,
|
||||||
|
autoIncrement: true
|
||||||
|
},
|
||||||
|
tanggal_perikas:{
|
||||||
|
type: Sequelize.DATE,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
diagnosa:{
|
||||||
|
type: Sequelize.TEXT("tiny"),
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
keluhan:{
|
||||||
|
type: Sequelize.TEXT("tiny"),
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
keterangan:{
|
||||||
|
type: Sequelize.TEXT("tiny"),
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
tindakan:{
|
||||||
|
type: Sequelize.TEXT("tiny"),
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
obat : {
|
||||||
|
type: Sequelize.TEXT("tiny"),
|
||||||
|
allowNull: false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
freezeTableName: true,
|
||||||
|
tableName: 'tb_rekam_medis',
|
||||||
|
});
|
||||||
|
|
||||||
|
return RekamMedis
|
||||||
|
}
|
||||||
19
server/database/model/tindakan.model.js
Normal file
19
server/database/model/tindakan.model.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
module.exports = (sequelize, Sequelize) => {
|
||||||
|
const Tindakan = sequelize.define("tb_tindakan", {
|
||||||
|
id_tindakan:{
|
||||||
|
type: Sequelize.INTEGER,
|
||||||
|
allowNull: false,
|
||||||
|
primaryKey: true,
|
||||||
|
autoIncrement: true
|
||||||
|
},
|
||||||
|
nama_tindakan:{
|
||||||
|
type: Sequelize.STRING,
|
||||||
|
allowNull: false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
freezeTableName: true,
|
||||||
|
tableName: 'tb_tindakan',
|
||||||
|
})
|
||||||
|
|
||||||
|
return Tindakan
|
||||||
|
}
|
||||||
78
server/index.js
Normal file
78
server/index.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
const express = require('express')
|
||||||
|
const next = require('next')
|
||||||
|
require("dotenv").config();
|
||||||
|
|
||||||
|
const formData = require('express-form-data');
|
||||||
|
const cors = require('cors');
|
||||||
|
|
||||||
|
|
||||||
|
const port_http = parseInt(process.env.PORT_HTTP) || 3007
|
||||||
|
const port_https = parseInt(process.env.PORT_HTTPS) || 3008
|
||||||
|
const dev = process.env.NODE_ENV !== 'production'
|
||||||
|
const app = next({ dev })
|
||||||
|
const handle = app.getRequestHandler()
|
||||||
|
|
||||||
|
// database
|
||||||
|
const db = require('./database/index.js');
|
||||||
|
|
||||||
|
|
||||||
|
app.prepare().then(() => {
|
||||||
|
const server = express()
|
||||||
|
const http = require('http')
|
||||||
|
const https = require('https')
|
||||||
|
const fs = require('fs')
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
key: fs.readFileSync('./server/cert.key'),
|
||||||
|
cert: fs.readFileSync('./server/cert.crt')
|
||||||
|
}
|
||||||
|
|
||||||
|
// database
|
||||||
|
db.sequelize.authenticate({ force: false }).then(() => { // if want to alter table, set alter: true after sync , if dont want to create table in start, set sync to authenticate or otherwise
|
||||||
|
console.log('Database connected')
|
||||||
|
// db.dokter.sync({ alter : true }) // alter table specific
|
||||||
|
}).catch (err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// middleware
|
||||||
|
server.use(formData.parse());
|
||||||
|
server.use(express.json());
|
||||||
|
server.use(express.urlencoded({ extended: true }));
|
||||||
|
server.options('*', cors());
|
||||||
|
server.use(cors());
|
||||||
|
|
||||||
|
// import routes
|
||||||
|
const login_router = require('./routes/login_router');
|
||||||
|
const admin_router = require('./routes/admin_router');
|
||||||
|
|
||||||
|
// use routes
|
||||||
|
server.use('/api/login', login_router);
|
||||||
|
server.use('/api/admin', admin_router);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
server.get('/api', (req, res) => {
|
||||||
|
console.log("ada org request");
|
||||||
|
return res.status(200).send({ status : true, message : 'connected to api'})
|
||||||
|
});
|
||||||
|
|
||||||
|
server.all('*', (req, res) => {
|
||||||
|
return handle(req, res)
|
||||||
|
})
|
||||||
|
|
||||||
|
http.createServer(server).listen(port_http, (err) => {
|
||||||
|
if (err) throw err
|
||||||
|
|
||||||
|
// console.log(`ini dia ${process.env.DB_CONNECTION}`)
|
||||||
|
console.log(`> Ready on http://localhost:${port_http}`)
|
||||||
|
})
|
||||||
|
|
||||||
|
https.createServer (options, server).listen(port_https, (err) => {
|
||||||
|
if (err) throw err
|
||||||
|
|
||||||
|
// console.log(`ini dia ${process.env.DB_CONNECTION}`)
|
||||||
|
console.log(`> Ready on https://localhost:${port_https}`)
|
||||||
|
})
|
||||||
|
})
|
||||||
211
server/routes/admin_router.js
Normal file
211
server/routes/admin_router.js
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const router = express.Router()
|
||||||
|
const db = require('../database/index.js')
|
||||||
|
const tb_admin = db.admin
|
||||||
|
const tb_dokter = db.dokter
|
||||||
|
// const tb_login = db.login
|
||||||
|
const tb_tindakan = db.tindakan
|
||||||
|
const tb_obat = db.obat
|
||||||
|
const Op = db.Sequelize.Op
|
||||||
|
|
||||||
|
const app = require('express')()
|
||||||
|
const basicAuth = require('express-basic-auth')
|
||||||
|
|
||||||
|
const basicAuthMiddleware = basicAuth({
|
||||||
|
users: { 'kicapkaran_admin': 'karan456_admin' },
|
||||||
|
challenge: true,
|
||||||
|
unauthorizedResponse: getUnauthenticatedResponse
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
function getUnauthenticatedResponse(req) {
|
||||||
|
const { user } = req.auth?.user ?? {}
|
||||||
|
return user ? `invalid credentials for user '${user}'` : 'no credentials provided';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// create / get request
|
||||||
|
router.get('/', basicAuthMiddleware, async (req, res) => {
|
||||||
|
res.send({ status: true, message: 'connected to admin' })
|
||||||
|
})
|
||||||
|
|
||||||
|
// create /tindakan post request
|
||||||
|
router.post('/tindakan', basicAuthMiddleware, async (req, res) => {
|
||||||
|
console.log("sini untuk tambah tindakan")
|
||||||
|
try {
|
||||||
|
const tindakan = req.body.tindakan
|
||||||
|
let cek_tindakan = await tb_tindakan.findOne({
|
||||||
|
where: {
|
||||||
|
nama_tindakan: tindakan
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// if()
|
||||||
|
|
||||||
|
if (cek_tindakan) {
|
||||||
|
return res.status(400).send({ status: false, message: `Tindakan ${tindakan} sudah ada` })
|
||||||
|
}
|
||||||
|
|
||||||
|
// create tindakan
|
||||||
|
const new_tindakan = await tb_tindakan.create({
|
||||||
|
nama_tindakan: tindakan
|
||||||
|
})
|
||||||
|
|
||||||
|
res.status(200).send({ status: true, message: `Tindakan ${tindakan} berhasil ditambahkan` })
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
res.status(500).send({ status: false, message: "internal server error" })
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
// create /tindaakan get request
|
||||||
|
router.get('/tindakan', basicAuthMiddleware, async (req, res) => {
|
||||||
|
console.log("sini untuk tindakan get")
|
||||||
|
try {
|
||||||
|
console.log("ambil all tinakan")
|
||||||
|
let tindakan = await tb_tindakan.findAll()
|
||||||
|
res.status(200).send({ status: true, data: tindakan })
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
res.status(500).send({ status: false, message: "internal server error" })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// create /tindakan delete request
|
||||||
|
router.delete('/tindakan', basicAuthMiddleware, async (req, res) => {
|
||||||
|
console.log("sini untuk tindakan delete")
|
||||||
|
try {
|
||||||
|
const id = req.query.id
|
||||||
|
// console.log(id, "ini idnya di delete")
|
||||||
|
let tindakan = await tb_tindakan.findOne({
|
||||||
|
where: {
|
||||||
|
id_tindakan: id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!tindakan) {
|
||||||
|
return res.status(400).send({ status: false, message: `Tindakan dengan id ${id} tidak ditemukan` })
|
||||||
|
}
|
||||||
|
|
||||||
|
await tindakan.destroy()
|
||||||
|
|
||||||
|
res.status(200).send({ status: true, message: `Tindakan dengan id ${id} berhasil dihapus` })
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
res.status(500).send({ status: false, message: "internal server error" })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// create /obat post request
|
||||||
|
router.post('/obat', basicAuthMiddleware, async (req, res) => {
|
||||||
|
console.log("sini untuk obat post")
|
||||||
|
try {
|
||||||
|
const obat = req.body.obat
|
||||||
|
let cek_obat = await tb_obat.findOne({
|
||||||
|
where: {
|
||||||
|
nama_obat: obat
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (cek_obat) {
|
||||||
|
return res.status(400).send({ status: false, message: `Obat ${obat} sudah ada` })
|
||||||
|
}
|
||||||
|
|
||||||
|
// create obat
|
||||||
|
const new_obat = await tb_obat.create({
|
||||||
|
nama_obat: obat,
|
||||||
|
jenis: req.body.jenis,
|
||||||
|
jumlah: req.body.jumlah,
|
||||||
|
harga: req.body.harga,
|
||||||
|
history: JSON.stringify(req.body.history)
|
||||||
|
})
|
||||||
|
|
||||||
|
res.status(200).send({ status: true, message: `Obat ${obat} berhasil ditambahkan` })
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
res.status(500).send({ status: false, message: "internal server error" })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// create /obat get request
|
||||||
|
router.get('/obat', basicAuthMiddleware, async (req, res) => {
|
||||||
|
// console.log("sini untuk obat get")
|
||||||
|
try {
|
||||||
|
let id = req.query.id
|
||||||
|
// if id is not null
|
||||||
|
if (id) {
|
||||||
|
let obat = await tb_obat.findOne({
|
||||||
|
where: {
|
||||||
|
id_obat: id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!obat) {
|
||||||
|
return res.status(400).send({ status: false, message: `Obat dengan id ${id} tidak ditemukan` })
|
||||||
|
}
|
||||||
|
|
||||||
|
obat = JSON.parse(obat.dataValues.history)
|
||||||
|
|
||||||
|
res.status(200).send({ status: true, data: obat})
|
||||||
|
} else {
|
||||||
|
// console.log("ambil all obat")
|
||||||
|
let obat = await tb_obat.findAll()
|
||||||
|
res.status(200).send({ status: true, data: obat })
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
res.status(500).send({ status: false, message: "internal server error" })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// create /obat put request
|
||||||
|
router.put('/obat', basicAuthMiddleware, async (req, res) => {
|
||||||
|
console.log("sini untuk obat put")
|
||||||
|
try {
|
||||||
|
const id = req.query.id
|
||||||
|
const detail = req.query.detail
|
||||||
|
let obat = await tb_obat.findOne({
|
||||||
|
where: {
|
||||||
|
id_obat: id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!obat) {
|
||||||
|
return res.status(400).send({ status: false, message: `Obat dengan id ${id} tidak ditemukan` })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!detail || detail != "edit_data") {
|
||||||
|
return res.status(400).send({ status: false, message: `Detail Tidak Diketahui` })
|
||||||
|
}
|
||||||
|
|
||||||
|
// get the history from obat
|
||||||
|
|
||||||
|
let history = JSON.parse(obat.dataValues.history)
|
||||||
|
// add the req.body.history to the history
|
||||||
|
history.push(req.body.history)
|
||||||
|
// console.log(history)
|
||||||
|
|
||||||
|
await obat.update({
|
||||||
|
nama_obat: req.body.obat,
|
||||||
|
jenis: req.body.jenis,
|
||||||
|
jumlah: req.body.jumlah,
|
||||||
|
harga: req.body.harga,
|
||||||
|
history: JSON.stringify(history)
|
||||||
|
})
|
||||||
|
|
||||||
|
res.status(200).send({ status: true, message: `Obat dengan id ${id} berhasil diupdate` })
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
res.status(500).send({ status: false, message: "internal server error" })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = router
|
||||||
119
server/routes/login_router.js
Normal file
119
server/routes/login_router.js
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
// create express router
|
||||||
|
const express = require('express');
|
||||||
|
const router = express.Router()
|
||||||
|
const db = require('../database/index.js')
|
||||||
|
const tb_admin = db.admin
|
||||||
|
const tb_dokter = db.dokter
|
||||||
|
const tb_login = db.login
|
||||||
|
const Op = db.Sequelize.Op
|
||||||
|
|
||||||
|
var ironSession = require("iron-session/express").ironSession;
|
||||||
|
var session = ironSession({
|
||||||
|
cookieName: "myapp_cookiename",
|
||||||
|
// password: process.env.SECRET_COOKIE_PASSWORD,
|
||||||
|
password: 'complex_password_at_least_32_characters_long',
|
||||||
|
cookieOptions: {
|
||||||
|
secure: process.env.NODE_ENV === "production",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// create get request
|
||||||
|
// router.get('/', async (req, res) => {
|
||||||
|
|
||||||
|
// try {
|
||||||
|
// const admin = {
|
||||||
|
// nik: 214280224,
|
||||||
|
// nama: "aran",
|
||||||
|
// role: 'admin'
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // find if admin with nik exists
|
||||||
|
// const admin_exist = await tb_admin.findByPk(admin.nik)
|
||||||
|
|
||||||
|
// console.log(admin_exist);
|
||||||
|
// // if admin exist
|
||||||
|
// if (admin_exist) {
|
||||||
|
// return res.status(400).send({status: false, message: `Admin dengan nik ${admin.nik} sudah ada`})
|
||||||
|
// }
|
||||||
|
|
||||||
|
// after_create_admin = await tb_admin.create(admin)
|
||||||
|
|
||||||
|
|
||||||
|
// const login = {
|
||||||
|
// username: 'kicap92',
|
||||||
|
// password: '5c188ab394811451656f8c7f33680127',
|
||||||
|
// role: 'admin',
|
||||||
|
// id_admin: 214280224
|
||||||
|
// }
|
||||||
|
// await tb_login.create(login)
|
||||||
|
|
||||||
|
// res.send({ status: true, message: "ini login get router" })
|
||||||
|
// } catch (error) {
|
||||||
|
// res.status(500).send({ status: false, message: error.message })
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// })
|
||||||
|
|
||||||
|
// create get request
|
||||||
|
router.get('/', session, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const username = req.query.username
|
||||||
|
const password = req.query.password
|
||||||
|
const role = req.query.role
|
||||||
|
|
||||||
|
// console.log(username, password, role);
|
||||||
|
let cek_login = await tb_login.findOne({
|
||||||
|
where: {
|
||||||
|
username: username,
|
||||||
|
password: password,
|
||||||
|
role: role
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// console.log(cek_login);
|
||||||
|
if (!cek_login) {
|
||||||
|
return res.status(400).send({ status: false, message: 'Username dan password salah' })
|
||||||
|
}
|
||||||
|
|
||||||
|
let cek_data;
|
||||||
|
|
||||||
|
if (role == 'Admin') {
|
||||||
|
cek_data = await tb_admin.findOne({
|
||||||
|
where: {
|
||||||
|
nik: cek_login.id_admin
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
} else if (role == 'Dokter') {
|
||||||
|
cek_data = await tb_dokter.findOne({
|
||||||
|
where: {
|
||||||
|
nik: cek_login.id_dokter
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// add role to cek_data
|
||||||
|
// cek_data.role = role;
|
||||||
|
cek_data = cek_data.dataValues;
|
||||||
|
// console.log(req.session.user);
|
||||||
|
|
||||||
|
|
||||||
|
// session data
|
||||||
|
req.session.user = {
|
||||||
|
username: username,
|
||||||
|
password: password,
|
||||||
|
role: role,
|
||||||
|
nik: cek_data.nik,
|
||||||
|
};
|
||||||
|
await req.session.save();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
res.send({ status: true, message: "ini login post router", data: cek_data })
|
||||||
|
} catch (error) {
|
||||||
|
res.status(500).send({ status: false, message: error.message })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
module.exports = router
|
||||||
@ -1,116 +0,0 @@
|
|||||||
.container {
|
|
||||||
padding: 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 4rem 0;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
padding: 2rem 0;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title a {
|
|
||||||
color: #0070f3;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title a:hover,
|
|
||||||
.title a:focus,
|
|
||||||
.title a:active {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.15;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title,
|
|
||||||
.description {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
margin: 4rem 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
|
||||||
background: #fafafa;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0.75rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
|
||||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin: 1rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
text-align: left;
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: color 0.15s ease, border-color 0.15s ease;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover,
|
|
||||||
.card:focus,
|
|
||||||
.card:active {
|
|
||||||
color: #0070f3;
|
|
||||||
border-color: #0070f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card h2 {
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 1em;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.grid {
|
|
||||||
width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user