kicap/rekam_medis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished dokter / admin almost done

Browse Source
This commit is contained in:
kicap1992
2022-05-04 00:44:09 +08:00
parent c147175e52
commit 099f9fe155
35 changed files with 16329 additions and 612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/admin/appBar.js
View File

@ -158,7 +158,41 @@ function AppBarAdmin(props) {
};
async function logout(){
try{
const url = process.env.HTTP_URL + "/api/login/logout";
const response = await fetch(url, {
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_response = await response.json()
console.log(data_response, "ini data response")
// console.log(data, "ini data dari cek dokter")
if (response.status === 200) {
// create toast
Router.push('/')
return true
} else if (response.status === 400) {
Router.push('/')
return false
} else {
// create toast
Router.push('/')
return false
}
}catch (err){
Router.push('/')
console.log(err)
}
}
const renderMenu = (
<Menu
@ -177,7 +211,12 @@ function AppBarAdmin(props) {
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
<MenuItem onClick={
() => {
logout()
handleMenuClose()
}
}>Logout</MenuItem>
</Menu>
);
@ -188,8 +227,8 @@ function AppBarAdmin(props) {
return (
<div>
<>
<AppBar position="fixed" open={open} >
<Toolbar>
<IconButton
@ -296,7 +335,7 @@ function AppBarAdmin(props) {
</Drawer>
</div>
</>
)
}

658
components/admin/dialogEditPasien.js Normal file
View File

@ -0,0 +1,658 @@
import { useRef, useState, forwardRef, useEffect } from 'react'
import Router from 'next/router';
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
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 IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
// this is for number format
import NumberFormat from 'react-number-format';
import moment from "moment"; //for converting date and time
// 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';
// ini untuk date time picker
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
// sweet alert
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
const MySwal = withReactContent(Swal)
// ini untuk number
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="08"
/>
);
});
const NumberFormatCustomNIK = 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="08"
/>
);
});
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialogContent-root': {
padding: theme.spacing(2),
},
'& .MuiDialogActions-root': {
padding: theme.spacing(1),
},
}));
const BootstrapDialogTitle = (props) => {
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 = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
};
function DialogEditPasien(props) {
// console.log(props, "sini dialog edit pasien");
// create new let no and remove index 0 and 1 from props.dataPasien.no_telp
// let no =
// const ini_nik = props.openit ? props.dataPasien.nik : '';
const [datanya, setData] = useState({});
const nikInputRef = useRef();
const no_telpInputRef = useRef();
useEffect(() => {
setData(props.dataPasienPeriksa);
},[props.dataPasienPeriksa])
const updatePasien = async (e) => {
e.preventDefault();
// let no_telpBaru = "08" + datanya.no_telp
if (datanya.nik.length < 16) {
props.toastnya('NIK harus 16 digit', false)
// focus to nik
nikInputRef.current.focus();
} else if (datanya.no_telp.length < 11) {
props.toastnya('No Telpon minimal harus 11 digit', false)
// focus to nik
no_telpInputRef.current.focus();
}else if(datanya.no_telp[0] != "0" && datanya.no_telp[0] != "8"){
props.toastnya('No Telpon harus diawali dengan 08 atau 0', false)
// focus to nik
no_telpInputRef.current.focus();
}
else{
// props.toastnya('HEHEHEH LAMANYA', true)
props.setClose(datanya,true)
props.sweetalertnya(true);
await MySwal.fire({
title: 'Yakin ?',
text: `Detail pasien dengan nik ${datanya.nik} akan diedit`,
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, edit!'
}).then(async (result) => {
if (result.value) {
props.backdropnya(true);
// await 4 second
// await new Promise(resolve => setTimeout(resolve, 4000));
await confirm_update_data();
}else{
props.setOpenAgain()
}
})
props.backdropnya(false);
props.sweetalertnya(false);
}
}
async function confirm_update_data(){
try{
const url = process.env.HTTP_URL + "/api/admin/pasien?nik=" + datanya.nik;
const response = await fetch(url, {
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(datanya)
})
const data = await response.json();
if(response.status == 200){
props.toastnya('Data pasien berhasil diupdate', true)
Router.replace(Router.asPath);
}else{
props.toastnya('Terjadi kesalahan, coba lagi', false)
props.setOpenAgain()
}
}catch(err){
console.log(err)
props.toastnya('Terjadi kesalahan, coba lagi', false)
props.setOpenAgain()
}
}
// console.log(datanya, "ini data yang di edit");
return (
<>
<BootstrapDialog
onClose={
() => {
props.setClose()
}
}
aria-labelledby="customized-dialog-title"
open={props.openit}
fullWidth={true}
component="form"
onSubmit={
updatePasien
}
>
<BootstrapDialogTitle id="customized-dialog-title" onClose={
() => {
props.setClose()
}
}>
Data Pasien
</BootstrapDialogTitle>
<DialogContent dividers align="center"
>
<TextField
disabled
inputRef={nikInputRef}
value={datanya.nik}
onChange={
(e) => {
setData({
...datanya,
nik: e.target.value,
})
}
}
id="nikTextField"
label="NIK"
placeholder="Masukkan NIK"
sx={{ width: "85%", boxShadow: 10 }}
InputProps={{
inputComponent: NumberFormatCustomNIK,
inputProps: {
maxLength: 16,
minLength: 16,
}
}}
/>
<Box sx={{ padding: "10px" }}></Box>
<>
<TextField
required
value={
datanya.nama
}
onChange={
(e) => {
setData({
...datanya,
nama: e.target.value,
})
}
}
id="namaEditTextField"
label="Nama"
placeholder="Masukkan Nama"
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
required
labelId="demo-simple-select-helper-label"
id="jenisKelaminSelectEdit"
value={
datanya.jenis_kelamin
}
label="Jenis"
onChange={
(e) => {
setData({
...datanya,
jenis_kelamin: e.target.value,
})
}
}
>
<MenuItem value="" disabled>
<em>None</em>
</MenuItem>
<MenuItem value={"Laki-Laki"} selected={
(datanya.jenis_kelamin === "Laki-Laki")
?
true
:
false
}>Laki-Laki</MenuItem>
<MenuItem value={"Perempuan"} selected={
(datanya.jenis_kelamin == "Perempuan")
?
true
:
false
}>Perempuan</MenuItem>
</Select>
</FormControl>
<Box sx={{ padding: "10px" }}></Box>
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
maxDate={new Date()}
label="Tanggal Lahir"
value={
datanya.tgl_lahir
}
onChange={(newValue) => {
console.log(newValue);
setData({
...datanya,
tgl_lahir: moment(newValue).format('YYYY-MM-DD'),
})
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</FormControl>
<Box sx={{ padding: "10px" }}></Box>
<TextField
required
value={
datanya.alamat
}
onChange={
(e) => {
setData({
...datanya,
alamat: e.target.value,
})
}
}
id="alamatTextFieldEdit"
label="Alamat"
placeholder="Masukkan Alamat"
sx={{ width: "85%", boxShadow: 10 }}
/>
</>
<>
<Box sx={{ padding: "10px" }}></Box>
<TextField
required
value={
datanya.pekerjaan
}
onChange={
(e) => {
setData({
...datanya,
pekerjaan: e.target.value,
})
}
}
id="pekerjaanTextFieldEdit"
label="Pekerjaan"
placeholder="Masukkan Pekerjaan"
sx={{ width: "85%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
<InputLabel id="demo-simple-select-helper-label">Golongan Darah</InputLabel>
<Select
required
labelId="demo-simple-select-helper-label"
id="golonganDarahSelect"
value={
datanya.golongan_darah
}
label="Jenis"
onChange={
(e) => {
setData({
...datanya,
golongan_darah: e.target.value,
})
}
}
>
<MenuItem value="" disabled>
<em>None</em>
</MenuItem>
<MenuItem value={"O+"} selected={
(datanya.golongan_darah == "O+")
?
true
:
false
}>O+</MenuItem>
<MenuItem value={"O-"} selected={
(datanya.golongan_darah == "O-")
?
true
:
false
}>O-</MenuItem>
<MenuItem value={"A+"} selected={
(datanya.golongan_darah == "A+")
?
true
:
false
}>A+</MenuItem>
<MenuItem value={"A-"} selected={
(datanya.golongan_darah == "A-")
?
true
:
false
}>A-</MenuItem>
<MenuItem value={"B+"} selected={
(datanya.golongan_darah == "B+")
?
true
:
false
}>B+</MenuItem>
<MenuItem value={"B-"} selected={
(datanya.golongan_darah == "B-")
?
true
:
false
}>B-</MenuItem>
<MenuItem value={"AB+"} selected={
(datanya.golongan_darah == "AB+")
?
true
:
false
}>AB+</MenuItem>
<MenuItem value={"AB-"} selected={
(datanya.golongan_darah == "AB-")
?
true
:
false
}>AB-</MenuItem>
</Select>
</FormControl>
<Box sx={{ padding: "10px" }}></Box>
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
<InputLabel id="demo-simple-select-helper-label">Pendidikan</InputLabel>
<Select
required
labelId="demo-simple-select-helper-label"
id="pendidikanSelect"
value={
datanya.pendidikan
}
label="Jenis"
onChange={
(e) => {
setData({
...datanya,
pendidikan: e.target.value,
})
}
}
>
<MenuItem value="" selected disabled>
<em>None</em>
</MenuItem>
<MenuItem value={"Tiada"} selected={
(datanya.pendidikan == "Tiada")
?
true
:
false
}>Tiada</MenuItem>
<MenuItem value={"SD"} selected={
(datanya.pendidikan == "SD")
?
true
:
false
}>SD</MenuItem>
<MenuItem value={"SMP"} selected={
(datanya.pendidikan == "SMP")
?
true
:
false
}>SMP</MenuItem>
<MenuItem value={"SMA"} selected={
(datanya.pendidikan == "SMA")
?
true
:
false
}>SMA</MenuItem>
<MenuItem value={"Perguruan Tinggi"} selected={
(datanya.pendidikan == "Perguruan Tinggi")
?
true
:
false
}>Perguruan Tinggi</MenuItem>
</Select>
</FormControl>
<Box sx={{ padding: "10px" }}></Box>
<TextField
inputRef={no_telpInputRef}
required
value={
datanya.no_telp
}
onChange={
(e) => {
setData({
...datanya,
no_telp: e.target.value,
})
}
}
id="NoTelpTextField"
label="No Telpon"
placeholder="Masukkan No Telpon"
sx={{ width: "85%", boxShadow: 10 }}
InputProps={{
inputComponent: NumberFormatCustom,
inputProps: {
maxLength: 13,
minLength: 11,
}
}}
/>
<Box sx={{ padding: "10px" }}></Box>
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
<InputLabel id="demo-simple-select-helper-label">Status Pernikahan</InputLabel>
<Select
required
labelId="demo-simple-select-helper-label"
id="statusPernikahanSelect"
value={
datanya.status_pernikahan
}
label="Jenis"
onChange={
(e) => {
setData({
...datanya,
status_pernikahan: e.target.value,
})
}
}
>
<MenuItem value="" disabled>
<em>None</em>
</MenuItem>
<MenuItem value={"Bujang"} selected={
(datanya.status_pernikahan == "Bujang")
?
true
:
false
}>Bujang</MenuItem>
<MenuItem value={"Telah Menikah"} selected={
(datanya.status_pernikahan == "Telah Menikah")
?
true
:
false
}>Telah Menikah</MenuItem>
<MenuItem value={"Duda"} selected={
(datanya.status_pernikahan == "Duda")
?
true
:
false
}>Duda</MenuItem>
<MenuItem value={"Janda"} selected={
(datanya.status_pernikahan == "Janda")
?
true
:
false
}>Janda</MenuItem>
</Select>
</FormControl>
<Box sx={{ padding: "10px" }}></Box>
<TextField
required
value={
datanya.nama_orang_tua_wali
}
onChange={
(e) => {
setData({
...datanya,
nama_orang_tua_wali: e.target.value,
})
}
}
id="namaOrangTuaWaliTextField"
label="Nama Orang Tua / Wali"
placeholder="Masukkan Nama Orang Tua / Wali"
sx={{ width: "85%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<TextField
required
value={
datanya.nama_pasangan
}
onChange={
(e) => {
setData({
...datanya,
nama_pasangan: e.target.value,
})
}
}
id="namaPasanganTextField"
label="Nama Pasangan"
placeholder="Masukkan Nama Pasangan"
sx={{ width: "85%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
</>
</DialogContent>
<DialogActions>
<Button type="submit" variant="outlined" color="primary">
Save changes
</Button>
</DialogActions>
</BootstrapDialog>
</>
)
}
export default DialogEditPasien;

1116
components/admin/dialogLihatJadwalPasien.js Normal file
View File

File diff suppressed because it is too large Load Diff

601
components/admin/tabelDokter.js Normal file
View File

@ -0,0 +1,601 @@
import { useState, useRef, forwardRef } from 'react';
// import { useTheme } from '@mui/material';
import { useTheme } from '@mui/system';
import { useMediaQuery } from '@mui/material';
// for table
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
// button icon
import IconButton from '@mui/material/IconButton';
import ModeEditIcon from '@mui/icons-material/ModeEdit';
import DisabledByDefaultIcon from '@mui/icons-material/DisabledByDefault';
import EventAvailableIcon from '@mui/icons-material/EventAvailable';
// for dialog box
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
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';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
// this is for number format
import NumberFormat from 'react-number-format';
// this is for circular progress
import CircularProgress from '@mui/material/CircularProgress';
// for edit jadwal dialog
import DialogContentText from '@mui/material/DialogContentText';
// for table
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
}
}));
// this for dialog jadwal
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Slide from '@mui/material/Slide';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import TabelJadwalDokter from './tabelJadwalDokter';
const Transition = forwardRef(function Transition(props, ref) { // for modal history
return <Slide direction="up" ref={ref} {...props} />;
});
// ini untuk number
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="08"
/>
);
});
const NumberFormatCustomNIK = 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="08"
/>
);
});
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>
);
};
function TabelDokterAll(props) {
// console.log(props.dataDokterAll, "ini di bagian tabel all");
const url = process.env.HTTP_URL + "/api/admin/dokter"; // ini url
const namaInputRef = useRef();
const [nik, setNik] = useState('');
const [nama, setNama] = useState('');
const [alamat, setAlamat] = useState('');
const noTelpInputRef = useRef();
const [noTelp, setNoTelp] = useState('');
const [spesialis, setSpesialis] = useState('');
// for dialog box
const [dataDokterEdit, setDataDokterEdit] = useState({});
const [headerDialog, setHeaderDialog] = useState('');
const [openModalEdit, setOpenModalEdit] = useState(false);
const [isGet, setIsGet] = useState(false);
const handleClickOpenModalEdit = () => {
setOpenModalEdit(true);
};
const handleCloseModalEdit = (event, reason) => {
if (reason && reason == "backdropClick")
return;
setOpenModalEdit(false);
};
// for dialog jadwal
const [dataJadwal, setDataJadwal] = useState([]);
const [openJadwalModal, setOpenJadwalModal] = useState(false);
const handleCloseModalJadwal = () => {
setBukaJadwal(false)
setOpenJadwalModal(false);
setHariTambahEdit('');
setJamMulaiTambahEdit(null);
setJamSelesaiTambahEdit(null);
};
const handleClickOpenModalJadwal = async (id) => {
setIsLoadingDataJadwal
console.log(id)
setNik(id);
setOpenJadwalModal(true);
// await 3 sec
// await new Promise(resolve => setTimeout(resolve, 3000));
await cekJadwal(id);
// setOpenEditJadwal(true);
};
// Edit Jadwal Dialog
const harinya = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"];
const [openEditJadwal, setOpenEditJadwal] = useState(false);
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
const [isLoadingDataJadwal, setIsLoadingDataJadwal] = useState(false);
const [bukaJadwal, setBukaJadwal] = useState(false);
const [hariTambahEdit, setHariTambahEdit] = useState('');
const [jamMulaiTambahEdit, setJamMulaiTambahEdit] = useState(null);
const [jamSelesaiTambahEdit, setJamSelesaiTambahEdit] = useState(null);
const handleClickOpenEditJadwal = () => {
setOpenEditJadwal(true);
};
const handleCloseEditJadwal = () => {
setOpenEditJadwal(false);
};
async function edit_dokter(id) {
setIsGet(false);
try {
const urlnya = `${url}?nik=${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.data, "ini data dokter");
// props.toastnya("Berhasil mengambil data dokter");
if (response.status === 200) {
let theData = data.data
// console.log(theData, "ini data dokter");
setDataDokterEdit(theData);
setHeaderDialog(theData.nama)
setNik(theData.nik);
setNama(theData.nama);
setAlamat(theData.alamat);
setNoTelp(theData.no_telp);
setSpesialis(theData.spesialis);
setIsGet(true);
setOpenModalEdit(true);
} else {
props.toastnya("Data dokter tidak ditemukan");
}
} catch (error) {
props.toastnya("Terjadi kesalahan");
}
handleClickOpenModalEdit();
}
const beforeEditDokter = async () => {
if (nama == dataDokterEdit.nama && alamat == dataDokterEdit.alamat && noTelp == dataDokterEdit.no_telp && spesialis == dataDokterEdit.spesialis) {
props.toastnya("Tidak ada perubahan");
} else {
let datanya = {
nama,
alamat,
no_telp: noTelp,
spesialis
}
handleCloseModalEdit()
await props.editDokter(nik, datanya);
}
// console.log(nik, nama, alamat, noTelp, spesialis, dataDokterEdit, "ini data dokter");
}
async function cekJadwal(id) {
try {
let urlnya = `${url}?nik=${id}&detail=jadwal`;
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.data, "ini data dokter");
setDataJadwal(data.data);
// console.log(dataJadwal, "ini data jadwal");
} catch (error) {
console.log(error)
}
}
return (
<>
<Dialog
fullScreen={fullScreen}
open={openEditJadwal}
onClose={handleCloseEditJadwal}
aria-labelledby="responsive-dialog-title"
>
<DialogTitle id="responsive-dialog-title">
{"Use Google's location service?"}
</DialogTitle>
<DialogContent>
<DialogContentText>
Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleCloseEditJadwal}>
Disagree
</Button>
<Button onClick={handleCloseEditJadwal} autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
<Dialog
fullScreen
open={openJadwalModal}
onClose={handleCloseModalJadwal}
TransitionComponent={Transition}
>
<AppBar sx={{ position: 'relative' }}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={handleCloseModalJadwal}
aria-label="close"
>
<CloseIcon />
</IconButton>
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
Jadwal Dokter NIK {nik}
</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}>
{
isLoadingDataJadwal ?
<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>Hari</StyledTableCell>
<StyledTableCell>Jam Masuk</StyledTableCell>
<StyledTableCell>Jam Keluar</StyledTableCell>
<StyledTableCell>Aksi</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
<TabelJadwalDokter dataJadwal={dataJadwal} harinya={harinya} niknya={nik}
toastnya={
(message, stat) => {
props.toastnya(message, stat)
}
}
closeJadwal={handleCloseModalJadwal}
backdropnya={
(stat) => {
props.backdropnya(stat)
}
}
sweetAlertLoadingnya={
(stat) => {
props.sweetAlertLoadingnya(stat)
}
}
openback={
async (nik, hari, jam_mulai, jam_selesai,stat) => {
// await 500 milisec
await new Promise(resolve => setTimeout(resolve, 500));
handleClickOpenModalJadwal(nik)
setHariTambahEdit(hari)
setJamMulaiTambahEdit(jam_mulai)
setJamSelesaiTambahEdit(jam_selesai)
if(stat){
setBukaJadwal(true)
}else{
setBukaJadwal(false)
}
}
}
bukaJadwal={
bukaJadwal
}
jam_mulainya={jamMulaiTambahEdit}
jam_selesainya={jamSelesaiTambahEdit}
hari_nya={hariTambahEdit}
/>
</TableBody>
</Table>
</TableContainer>
</div>
}
<Box sx={{ padding: "5px" }}></Box>
<Box textAlign="center">
<Button variant="contained" onClick={handleCloseModalJadwal}>Close Jadwal</Button>
</Box>
<Box sx={{ padding: "10px" }}></Box>
</Grid>
<Grid item md={2}></Grid>
</Grid>
</Box>
</Dialog>
<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()
beforeEditDokter()
}
}
>
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleCloseModalEdit}>
Edit Detail {isGet ? headerDialog : null}
</BootstrapDialogTitle>
<DialogContent dividers>
<Box sx={{ padding: "5px" }}></Box>
{
isGet ?
<>
<TextField
disabled
id="nikTextField"
label="NIK"
placeholder="Masukkan NIK"
sx={{ width: "85%", boxShadow: 10 }}
onChange={(e) => setNik(e.target.value)}
InputProps={{
inputComponent: NumberFormatCustomNIK,
inputProps: {
maxLength: 16,
minLength: 16,
}
}}
value={nik}
name="nik"
/>
<Box sx={{ padding: "10px" }}></Box>
<TextField
inputRef={namaInputRef}
value={nama}
onChange={(e) => setNama(e.target.value)}
required
id="namaTextField"
label="Nama"
placeholder="Masukkan Nama"
sx={{ width: "85%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<TextField
value={alamat}
onChange={(e) => setAlamat(e.target.value)}
required
id="alamatTextField"
label="Alamat"
placeholder="Masukkan Alamat"
sx={{ width: "85%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<TextField
required
inputRef={noTelpInputRef}
onChange={(e) => setNoTelp(e.target.value)}
id="NoTelpTextField"
label="No Telpon"
placeholder="Masukkan No Telpon"
sx={{ width: "85%", boxShadow: 10 }}
InputProps={{
inputComponent: NumberFormatCustom,
inputProps: {
maxLength: 13,
minLength: 11,
}
}}
value={noTelp}
name="jumlah"
/>
<Box sx={{ padding: "10px" }}></Box>
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
<InputLabel id="demo-simple-select-helper-label">Spesialis</InputLabel>
<Select
required
labelId="demo-simple-select-helper-label"
id="jenisSelect"
value={spesialis}
label="Jenis"
onChange={
(e) => { setSpesialis(e.target.value) }
}
>
<MenuItem value="" selected disabled>
<em>None</em>
</MenuItem>
<MenuItem value={"Spesialis 1"}>Spesialis 1</MenuItem>
<MenuItem value={"Spesialis 2"}>Spesialis 2</MenuItem>
<MenuItem value={"Spesialis 3"}>Spesialis 3</MenuItem>
</Select>
</FormControl>
</>
:
<>
<Box align="center">
<CircularProgress color="inherit" />
</Box>
</>
}
<Box sx={{ padding: "5px" }}></Box>
</DialogContent>
{
isGet ?
<>
<DialogActions>
<Button autoFocus variant="outlined" type='submit'>
Simpan Perubahan
</Button>
</DialogActions>
</>
: <></>
}
</BootstrapDialog>
{props.dataDokterAll.map((row, index) => (
<TableRow
key={"tablerowdokter" + index}
>
<TableCell component="th" scope="row">
{row.nik}
</TableCell>
<TableCell>{row.nama}</TableCell>
<TableCell>{row.spesialis}</TableCell>
<TableCell>{row.no_telp}</TableCell>
<TableCell>{row.status}</TableCell>
<TableCell>
<IconButton size="small" color="primary" onClick={() => edit_dokter(row.nik)}>
<ModeEditIcon />
</IconButton>
<IconButton size="small" color="success" onClick={
() => { handleClickOpenModalJadwal(row.nik) }
}>
<EventAvailableIcon />
</IconButton>
<IconButton size="small" color="error">
<DisabledByDefaultIcon />
</IconButton>
</TableCell>
</TableRow>
))}
</>
)
}
export default TabelDokterAll;

310
components/admin/tabelJadwalDokter.js Normal file
View File

@ -0,0 +1,310 @@
import { useState, useEffect, useRef } from 'react';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
// button icon
import IconButton from '@mui/material/IconButton';
import ModeEditIcon from '@mui/icons-material/ModeEdit';
import DisabledByDefaultIcon from '@mui/icons-material/DisabledByDefault';
// for dialog
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
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';
// import Typography from '@mui/material/Typography';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
// for time select
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
// sweet alert
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
const MySwal = withReactContent(Swal)
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialogContent-root': {
padding: theme.spacing(2),
},
'& .MuiDialogActions-root': {
padding: theme.spacing(1),
},
}));
const BootstrapDialogTitle = (props) => {
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 = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
};
function TabelJadwalDokter(props) {
// console.log(props, "ini props di dalam jadwal")
const [nik, setNik] = useState('');
// const [bukaJadwal , setBukaJadwal] = useState(false);
const [openDialog, setOpenDialog] = useState(false);
useEffect(() => {
setNik(props.niknya)
}, [props.niknya]);
async function inbukajadwal() {
await new Promise(resolve => setTimeout(resolve, 500));
setOpenDialog(true)
}
useEffect(() => {
if (props.bukaJadwal) {
inbukajadwal()
}
}, [props.bukaJadwal])
const [hari, setHari] = useState('');
// for time select
const jamMulaiInputRef = useRef();
const jamSelesaiInputRef = useRef();
const [jamMulai, setJamMulai] = useState(null);
const [jamSelesai, setJamSelesai] = useState(null);
useEffect(() => {
setHari(props.hari_nya)
setJamMulai(props.jam_mulainya)
setJamSelesai(props.jam_selesainya)
}, [props.hari_nya, props.jam_mulainya, props.jam_selesainya])
const tambahJadwal = async (e) => {
e.preventDefault();
if (jamMulai == null) {
props.toastnya("Jam Mulai Harus Terisi")
// focus jam mulai
jamMulaiInputRef.current.focus();
} else if (jamSelesai == null) {
props.toastnya("Jam Selesai Harus Terisi")
// focus jam selesai
jamSelesaiInputRef.current.focus();
} else if (jamMulai > jamSelesai) {
props.toastnya("Jam Mulai Harus Lebih Kecil Dari Jam Selesai")
// focus jam selesai
jamSelesaiInputRef.current.focus();
} else {
let jam_mulai_converted = jamMulai.toLocaleTimeString('en-US', { hour12: false, hour: "numeric", minute: "numeric" });
let jam_selesai_converted = jamSelesai.toLocaleTimeString('en-US', { hour12: false, hour: "numeric", minute: "numeric" });
console.log(jam_mulai_converted, jam_selesai_converted, hari, nik, "ini data yang akan dikirim")
let data = {
jam_mulai: jam_mulai_converted,
jam_selesai: jam_selesai_converted,
hari: hari,
id_dokter: nik
}
props.closeJadwal()
props.sweetAlertLoadingnya(true)
await MySwal.fire({
title: 'Yakin ?',
text: `Jadwal Pada Hari ${hari} akan ditambahkan ke dokter dengan nik ${nik}`,
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, tambahkan!'
}).then(async (result) => {
if (result.value) {
props.backdropnya(true);
try {
const url = process.env.HTTP_URL + "/api/admin/jadwal_dokter";
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(
data
)
})
const json = await response.json();
if(response.status === 200){
props.toastnya(json.message,true)
await props.openback(nik, "", null, null, false)
}else{
props.toastnya(json.message,false)
await props.openback(nik, hari, jamMulai, jamSelesai, true)
}
} catch {
await props.openback(nik, hari, jamMulai, jamSelesai, true)
props.toastnya("Terjadi Kesalahan, Coba Lagi Nanti",false)
}
// await props.openback(nik, "", null, null, false)
} else {
await props.openback(nik, hari, jamMulai, jamSelesai, true)
}
})
props.backdropnya(false);
props.sweetAlertLoadingnya(false);
// props.closeJadwal()
}
}
let component = []
for (let i = 0; i < props.harinya.length; i++) {
// clear component
let componentnya = [
<TableRow key={i}>
<TableCell>{props.harinya[i]}</TableCell>
<TableCell>-</TableCell>
<TableCell>-</TableCell>
<TableCell>
<IconButton color="primary" onClick={
() => {
setHari(props.harinya[i])
setOpenDialog(true)
}
}>
<ModeEditIcon />
</IconButton>
</TableCell>
</TableRow>
]
for (let j = 0; j < props.dataJadwal.length; j++) {
if (props.dataJadwal[j].hari == props.harinya[i]) {
// clear componentnya
componentnya = [<TableRow key={i}>
<TableCell>{props.harinya[i]}</TableCell>
<TableCell>{props.dataJadwal[j].jam_mulai}</TableCell>
<TableCell>{props.dataJadwal[j].jam_selesai}</TableCell>
<TableCell>
<IconButton color="success">
<ModeEditIcon />
</IconButton>
<IconButton color="error">
<DisabledByDefaultIcon />
</IconButton>
</TableCell>
</TableRow>]
// push jam mulai dan jam selesai
break;
}
}
// push componentnya to component
component.push(componentnya)
}
// console.log(component, "ini component")
return (
<>
<BootstrapDialog
aria-labelledby="customized-dialog-title"
open={openDialog}
component="form"
onSubmit={tambahJadwal}
>
<BootstrapDialogTitle id="customized-dialog-title" onClose={
() => {
setOpenDialog(false)
setJamMulai(null)
setJamSelesai(null)
}
}>
Jadwal Hari {hari}
</BootstrapDialogTitle>
<DialogContent dividers align="center">
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<TimePicker
inputRef={jamMulaiInputRef}
required
label="Jam Mulai"
value={jamMulai}
onChange={(newValue) => {
setJamMulai(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</FormControl>
<Box sx={{ padding: "10px" }}></Box>
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<TimePicker
inputRef={jamSelesaiInputRef}
required
label="Jam Selesai"
value={jamSelesai}
onChange={(newValue) => {
setJamSelesai(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</FormControl>
</DialogContent>
<DialogActions>
<Button variant="outlined" type="submit" color="primary">
Tambah
</Button>
</DialogActions>
</BootstrapDialog>
{component}
</>
)
}
export default TabelJadwalDokter

2
components/before_login/appBar.js
View File

@ -39,7 +39,7 @@ const ResponsiveAppBarIndex = () => {
<Box sx={{ flexGrow: 0 }}>
<Tooltip title="No User">
<Avatar alt="Remy Sharp" src="https://kicap-karan.com/assets/img/me.jpg" />
<Avatar alt="Remy Sharp" src="/logo1.png" />
</Tooltip>
</Box>

136
components/before_login/body.js
View File

@ -26,7 +26,7 @@ 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 { ToastContainer, toast, Zoom, Bounce } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css';
// sweet alert
@ -65,16 +65,17 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
// });
export default function GridIndex(props) {
const [cekError, setCekError] = useState(props.errornya);
// console.log(props)
const [errornya , setError] = useState(props.errornya)
if(cekError == true){
MySwal.fire({
if (errornya == true) {
MySwal.fire({
title: `<strong>Error</strong>`,
html: "Anda Harus Login Terlebih Dahulu",
icon: 'error',
showConfirmButton: false,
})
setCekError(false)
setError(false)
}
const usernameInputRef = useRef();
const passwordInputRef = useRef();
@ -94,44 +95,49 @@ export default function GridIndex(props) {
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
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;
setTimeout(async function () {
// // put data to local storage
// await localStorage.setItem('user_data', JSON.stringify(data));
// // localStorage.removeItem('user_data');
// document.cookie = data;
if (role == 'Admin') {
// 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");
}
}else if (role == 'Dokter') {
// redirect to dashboard
await router.replace('/dokter');
}
}, 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)
// }
@ -142,7 +148,7 @@ export default function GridIndex(props) {
// const classes = useStyles();
return (
<div >
<ToastContainer position={toast.POSITION.TOP_CENTER} transition={Zoom} autoClose={2000} Bounce={Bounce} theme="colored" />
<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 }}>
@ -158,44 +164,50 @@ export default function GridIndex(props) {
paddingBottom: "10px",
backgroundColor: "silver",
}}>Jadwal Praktek Hari :</Typography>
<TableContainer component={Box} sx={{
padding: "15px",
<Box sx={{ padding: "5px" }}></Box>
<TableContainer sx={{
maxHeight: 500,
minWidth: 500,
// padding: "15px",
paddingLeft: "15px",
paddingRight: "15px",
paddingBottom: "15px",
}}>
<Table aria-label="simple table" sx={{
minWidth: 650,
<Table stickyHeader aria-label="sticky table" sx={{
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 hover>
<StyledTableCell>Nama</StyledTableCell>
<StyledTableCell>Spesialis</StyledTableCell>
<StyledTableCell>Jam Mulai</StyledTableCell>
<StyledTableCell>Jam Selesai</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>
))}
{
props.jadwal_dokter.map((jadwal, index) => {
return (
<TableRow key={index}>
<TableCell>{jadwal.tb_dokter.nama}</TableCell>
<TableCell>{jadwal.tb_dokter.spesialis}</TableCell>
<TableCell>{jadwal.jam_mulai}</TableCell>
<TableCell>{jadwal.jam_selesai}</TableCell>
</TableRow>
)
})
}
</TableBody>
</Table>
</TableContainer>
<Box sx={{ padding: "5px" }}></Box>
{/* <Box sx={{ padding: "5px" }}></Box>
<Box textAlign="center">
<Button variant="contained">Cetak</Button>
</Box>
<Box sx={{ padding: "10px" }}></Box>
<Box sx={{ padding: "10px" }}></Box> */}
</Card>
</Grid>
<Grid item xs={12} md={4}>

242
components/dokter/appBar.js
View File

@ -1,5 +1,5 @@
import * as React from 'react';
// import { styled, useTheme } from '@mui/material/styles';
import Router from 'next/router';
import { styled, useTheme, alpha } from '@mui/material/styles';
import MuiDrawer from '@mui/material/Drawer';
import MuiAppBar from '@mui/material/AppBar';
@ -19,6 +19,7 @@ import ListItemText from '@mui/material/ListItemText';
import HomeIcon from '@mui/icons-material/Home';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
import MedicationIcon from '@mui/icons-material/Medication';
// coba
import Box from '@mui/material/Box';
@ -26,6 +27,23 @@ import AccountCircle from '@mui/icons-material/AccountCircle';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';
const listmenu = [
{
name: 'Home',
name2: 'Halaman Utama',
icon: <HomeIcon />,
router: '/dokter',
},
{
name: 'Rekam Medis',
name2: 'Halaman Rekam Medis',
icon: <MedicationIcon />,
router: '/dokter/rekam-medis',
},
]
@ -96,7 +114,7 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
}),
);
function AppBarDokter() {
function AppBarDokter(props) {
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () => {
@ -119,7 +137,7 @@ function AppBarDokter() {
setAnchorEl(null);
};
const renderMenu = (
<Menu
@ -138,120 +156,164 @@ function AppBarDokter() {
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
<MenuItem
onClick={
() => {
logout()
handleMenuClose()
}
}
>Logout</MenuItem>
</Menu>
);
function handleMenuRoute(menu) {
// console.log(menu + " sini menunya di appbar")
Router.push(menu)
}
async function logout() {
try {
const url = process.env.HTTP_URL + "/api/login/logout";
const response = await fetch(url, {
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_response = await response.json()
console.log(data_response, "ini data response")
// console.log(data, "ini data dari cek dokter")
if (response.status === 200) {
// create toast
Router.push('/')
return true
} else if (response.status === 400) {
Router.push('/')
return false
} else {
// create toast
Router.push('/')
return false
}
} catch (err) {
Router.push('/')
console.log(err)
}
}
return (
<div>
<AppBar position="fixed" open={open}>
<Toolbar>
<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"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{
marginRight: 5,
...(open && { display: 'none' }),
cursor: (!props.backdrop && !props.sweetalertload) ? 'pointer' : 'default'
}}
>
<MenuIcon />
<AccountCircle />
</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>
</Box>
</Toolbar>
</AppBar>
{renderMenu}
{renderMenu}
<Drawer variant="permanent" open={open}>
<DrawerHeader>
<Typography variant="h6" noWrap>Rekam Medis</Typography>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</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
{
listmenu.map((menu, index) => (
<ListItemButton
key={index}
// onClick={handleMenuRoute("hehe")}
// onClick={() => props.handleMenuRoute(menu.router)}
onClick={(!props.backdrop && !props.sweetalertload && props.menu) ? () => handleMenuRoute(menu.router) : null}
// disableElevation
// disableRipple
sx={{
minWidth: 0,
mr: open ? 3 : 'auto',
justifyContent: 'center',
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) ? 'default' : "pointer",
// cursor: "alias",
}}
>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
))}
<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>
)

127
components/dokter/selectedObat.js Normal file
View File

@ -0,0 +1,127 @@
import {forwardRef} from 'react'
import { Divider } from "@mui/material"
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
// this is for number format
import NumberFormat from 'react-number-format';
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="08"
/>
);
});
function RekamMedisSelectedObat(props) {
const url = process.env.HTTP_URL + "/api/dokter";
async function cek_obat(jumlah ,id){
try{
let urlnya= url + "/cek_obat?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}`)
},
})
const data = await response.json();
let jumlahnya = data.data.jumlah;
let hitung = jumlahnya - jumlah;
if(response.status == 200){
if(hitung >= 0){
return true;
}else{
props.errornya("Jumlah Obat Tidak Mencukupi");
return false;
}
}else{
return false;
}
}catch(error){
console.log(error);
return false;
}
}
if (props.obat.length == 0) {
return (
<div>
<Divider />
<div style={{ marginTop: 20 }}>
<p>Tidak ada obat yang dipilih</p>
</div>
</div>
)
} else {
let data = []
for (let i = 0; i < props.obat.length; i++) {
// push to data id = props.obat[i].split('-')[0] and jumlah = null
data.push({
id: props.obat[i].split('-')[0],
jumlah: null
})
}
let divider =<Divider key="hehe" />
let box = <Box sx={{ padding: "10px" }} key="haha"></Box>
let component = []
component.push(divider)
component.push(box)
for (let i = 0; i < props.obat.length; i++) {
component.push(
<div key={i}>
<TextField
id={props.obat[i].id_obat + "TextField"}
label={"Jumlah " + props.obat[i].split("-")[1]}
placeholder={"Masukkan Jumlah " + props.obat[i].split("-")[1]}
sx={{ width: "90%", boxShadow: 10 }}
onChange={(e) => {
data[i].jumlah = e.target.value
cek_obat(e.target.value, props.obat[i].split("-")[0])
props.datanya(data)
}}
InputProps={{
inputComponent: NumberFormatCustom,
inputProps: {
maxLength: 3,
minLength: 1,
}
}}
/>
<Box sx={{ padding: "10px" }}></Box>
</div>
)
}
return (
<>
{component}
</>
)
}
}
export default RekamMedisSelectedObat

82
components/dokter/tabelJadwalDokter.js Normal file
View File

@ -0,0 +1,82 @@
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
// button icon
import IconButton from '@mui/material/IconButton';
import ModeEditIcon from '@mui/icons-material/ModeEdit';
import DisabledByDefaultIcon from '@mui/icons-material/DisabledByDefault';
// import EventAvailableIcon from '@mui/icons-material/EventAvailable';
function TabelJadwalDokter(props) {
let component = []
for (let i = 0; i < props.harinya.length; i++) {
// clear component
let componentnya = [
<TableRow key={i}>
<TableCell>{props.harinya[i]}</TableCell>
<TableCell>-</TableCell>
<TableCell>-</TableCell>
<TableCell>
<IconButton color="primary" onClick={
() => {
props.add(props.harinya[i])
}
}>
<ModeEditIcon />
</IconButton>
</TableCell>
</TableRow>
]
for (let j = 0; j < props.dataJadwal.length; j++) {
if (props.dataJadwal[j].hari == props.harinya[i]) {
// clear componentnya
componentnya = [<TableRow key={i}>
<TableCell>{props.harinya[i]}</TableCell>
<TableCell>{props.dataJadwal[j].jam_mulai}</TableCell>
<TableCell>{props.dataJadwal[j].jam_selesai}</TableCell>
<TableCell>
<IconButton color="success"
onClick={
() => {
props.edit(props.harinya[i], props.dataJadwal[j].jam_mulai, props.dataJadwal[j].jam_selesai)
}
}
>
<ModeEditIcon />
</IconButton>
<IconButton color="error"
onClick={
() => {
props.delete(props.harinya[i])
}
}
>
<DisabledByDefaultIcon />
</IconButton>
</TableCell>
</TableRow>]
// push jam mulai dan jam selesai
break;
}
}
// push componentnya to component
component.push(componentnya)
}
// console.log(component, "ini component")
return (
<>
{component}
</>
)
}
export default TabelJadwalDokter

565
components/dokter/tableJadwalRekamMedis.js Normal file
View File

@ -0,0 +1,565 @@
import Router from 'next/router';
import { useState } from 'react';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
// button icon
import IconButton from '@mui/material/IconButton';
// import EventAvailableIcon from '@mui/icons-material/EventAvailable';
import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import InfoIcon from '@mui/icons-material/Info';
// for dialog
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
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';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import { formatInTimeZone } from 'date-fns-tz' // format timezone
// for tindakan select
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import ListItemText from '@mui/material/ListItemText';
import Select from '@mui/material/Select';
import Checkbox from '@mui/material/Checkbox';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
// for dialog
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialogContent-root': {
padding: theme.spacing(2),
},
'& .MuiDialogActions-root': {
padding: theme.spacing(1),
},
}));
const CustomDisableInput = styled(TextField)(() => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000"
},
// change the mui textfield border color
".MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline": {
borderColor: "#339AFF"
},
// change the label color
".MuiInputLabel-root.Mui-disabled": {
color: "#339AFF"
}
}));
const BootstrapDialogTitle = (props) => {
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>
);
};
// ini untuk select
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const PenjumlahanObat = (props) => {
let datanya = props.listObat;
let component = [];
for (let i = 0; i < datanya.length; i++) {
component.push(
<div key={i}>
<CustomDisableInput
id={datanya[i].nama_obat}
label={`Jumlah ${datanya[i].nama_obat}`}
// placeholder="Masukkan Nama Pasien"
value={datanya[i].jumlah}
disabled
sx={{ width: "90%", boxShadow: 10 }}
/>
</div>
)
}
return (
<>
{component}
</>
)
}
function Umur(props) {
let umur = props.tgl_lahir;
let tahun = new Date().getFullYear();
let tahun_lahir = umur.substr(0, 4);
let umur_ini = tahun - tahun_lahir;
return (
<>
{umur_ini}
</>
)
}
function TabelJadwalRekamMedis(props) {
let component = [];
const [openDialog, setOpenDialog] = useState(false);
const [dataRekamMedis, setDataRekamMedis] = useState(null);
const [selectedTindakan, setSelectedTindakan] = useState([]);
const [selectedObat, setSelectedObat] = useState([]);
const [listObat, setListObat] = useState([]);
const preview_rekam_medis = async (id_rekam_medis) => {
props.backdropnya(true)
setDataRekamMedis(null)
setSelectedTindakan([])
setSelectedObat([])
try {
const url = process.env.HTTP_URL + "/api/dokter/cek_data_rekam_medis?id=" + id_rekam_medis + "&id_dokter=" + props.user;
const response = await fetch(url, {
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();
if (response.status === 200) {
setDataRekamMedis(data.data);
const tindakan = JSON.parse(data.data.tindakan);
if (tindakan.length > 0) {
await cek_tindakan(tindakan);
}
const obat = JSON.parse(data.data.obat);
if (obat.length > 0) {
await cek_obat(obat);
}
// setSelectedTindakan(tindakan);
// console.log(tindakan, "ini tindakan");
setOpenDialog(true);
} else {
props.errornya(data.message);
}
} catch (err) {
console.log(err)
props.errornya("Terjadi kesalahan saat mengambil data rekam medis")
}
props.backdropnya(false)
}
const cek_tindakan = async (data) => {
// console.log(data, "ini data tindakan");
try {
let tindakan_array = [];
for (let i = 0; i < data.length; i++) {
let url = process.env.HTTP_URL + "/api/dokter/tindakan?id=" + data[i];
const response = await fetch(url, {
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_tindakan = await response.json();
// console.log(data_tindakan, "ini data tindakan");
if (response.status === 200) {
// tindakan_array.push();
let ini_tindakan = data_tindakan.data.nama_tindakan;
tindakan_array.push(ini_tindakan);
}
}
setSelectedTindakan(tindakan_array);
console.log(tindakan_array, "ini tindakan array");
} catch (err) {
console.log(err)
}
}
const cek_obat = async (data) => {
try {
let list_obat = [];
let selected_obat = [];
for (let i = 0; i < data.length; i++) {
let url = process.env.HTTP_URL + "/api/dokter/cek_obat?id=" + data[i].id;
const response = await fetch(url, {
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_obat = await response.json();
console.log(data_obat, "ini data obat");
if (response.status === 200) {
// tindakan_array.push();
let nama_obat = data_obat.data.nama_obat;
list_obat.push({
nama_obat: nama_obat,
jumlah: data[i].jumlah,
});
selected_obat.push(nama_obat);
}
}
setListObat(list_obat);
setSelectedObat(selected_obat);
} catch (err) {
console.log(err)
}
}
if (props.data.length == 0) {
component = (
<TableRow>
<TableCell colSpan={8} align="center">
Tiada Data
</TableCell>
</TableRow>
)
} else {
for (let i = 0; i < props.data.length; i++) {
let ii = 0;
ii = i + 1;
component.push(
<TableRow key={i}>
<TableCell>{ii}</TableCell>
<TableCell>{props.data[i].tb_pasien.nik}</TableCell>
<TableCell>{props.data[i].tb_pasien.nama}</TableCell>
<TableCell>{props.data[i].tanggal_periksa} | {props.data[i].jam_periksa}</TableCell>
<TableCell><Umur tgl_lahir={props.data[i].tb_pasien.tgl_lahir} /></TableCell>
<TableCell>{props.data[i].tb_pasien.golongan_darah}</TableCell>
<TableCell>
{
(props.data[i].diagnosa == '' || props.data[i].diagnosa == null) ?
<>
<IconButton color="error" title="Belum Diperiksa">
<HelpOutlineIcon />
</IconButton>
</> :
<>
<IconButton color="success" title="Sudah Diperiksa"
onClick={
() => {
preview_rekam_medis(props.data[i].id_rekam_medis)
}
}
>
<CheckCircleOutlineIcon />
</IconButton>
</>
}
</TableCell>
<TableCell>
{
(props.data[i].diagnosa == '' || props.data[i].diagnosa == null) ?
<>
<IconButton color="primary"
onClick={
() => {
Router.push('/dokter/rekam-medis/data?id=' + props.data[i].id_rekam_medis)
}
}
>
<QuestionAnswerIcon />
</IconButton>
</> :
<>
<IconButton color="success" onClick={
() => {
preview_rekam_medis(props.data[i].id_rekam_medis)
}
}>
<InfoIcon />
</IconButton>
</>
}
</TableCell>
</TableRow>
)
}
}
return (
<>
<BootstrapDialog
onClose={
() => {
setOpenDialog(false)
}
}
aria-labelledby="customized-dialog-title"
open={openDialog}
fullWidth={true}
>
<BootstrapDialogTitle id="customized-dialog-title" onClose={
() => {
setOpenDialog(false)
}
}>
Detail Rekam Medis
</BootstrapDialogTitle>
<DialogContent dividers align="center">
<CustomDisableInput
id="nikPasienTextField"
label="NIK Pasien"
// placeholder="Masukkan Nama Pasien"
value={
(dataRekamMedis != null) ?
dataRekamMedis.tb_pasien.nik :
""
}
disabled
sx={{
width: "90%", boxShadow: 10,
"&.MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000"
}
}}
/>
<Box sx={{ padding: "10px" }}></Box>
<CustomDisableInput
id="namaPasienTextField"
label="Nama Pasien"
// placeholder="Masukkan Nama Pasien"
value={
(dataRekamMedis != null) ?
dataRekamMedis.tb_pasien.nama :
""
}
disabled
sx={{ width: "90%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<CustomDisableInput
id="tanggalDaftarTextField"
label="Tanggal Daftar"
// placeholder="Masukkan Nama Pasien"
value={
(dataRekamMedis != null)
?
formatInTimeZone(new Date(dataRekamMedis.createdAt), 'Asia/Kuala_Lumpur', 'yyyy-MM-dd | HH:mm:ss')
:
""
}
disabled
sx={{ width: "90%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<CustomDisableInput
id="tanggalPeriksaTextField"
label="Tanggal Periksa"
// placeholder="Masukkan Nama Pasien"
value={
(dataRekamMedis != null)
?
formatInTimeZone(new Date(dataRekamMedis.updatedAt), 'Asia/Kuala_Lumpur', 'yyyy-MM-dd | HH:mm:ss')
:
""
}
disabled
sx={{ width: "90%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<CustomDisableInput
disabled
id="keluhanPasienTextField"
label="Keluhan Pasien"
// placeholder="Masukkan Keluhan Pasien"
value={
(dataRekamMedis != null) ?
dataRekamMedis.keluhan :
""
}
multiline
rows={6}
// maxRows={6}
sx={{ width: "90%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<CustomDisableInput
disabled
id="diagnosaTextField"
label="Diagnosa"
// placeholder="Masukkan Diagnosa"
value={
(dataRekamMedis != null) ?
dataRekamMedis.diagnosa :
""
}
multiline
rows={6}
// maxRows={6}
sx={{ width: "90%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<CustomDisableInput
disabled
id="keteranganTextField"
label="Keterangan"
placeholder="Masukkan Keterangan"
multiline
rows={6}
// maxRows={6}
value={
(dataRekamMedis != null) ?
dataRekamMedis.keterangan :
""
}
sx={{ width: "90%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<Divider />
<Box sx={{ padding: "10px" }}></Box>
{
(selectedTindakan.length > 0)
?
<FormControl sx={{ m: 1, width: "90%" }}>
<InputLabel id="demo-multiple-checkbox-label">Tindakan</InputLabel>
<Select
disabled
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={selectedTindakan}
placeholder="Tiada Tindakan"
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
MenuProps={MenuProps}
>
{selectedTindakan.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={selectedTindakan.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
:
<Box align="center">Tiada Tindakan</Box>
}
<Box sx={{ padding: "10px" }}></Box>
<Divider />
<Box sx={{ padding: "10px" }}></Box>
{
(selectedTindakan.length > 0)
?
<>
<FormControl sx={{ m: 1, width: "90%" }}>
<InputLabel id="demo-multiple-checkbox-label">Obat</InputLabel>
<Select
disabled
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={selectedObat}
// placeholder="Tiada Tindakan"
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
MenuProps={MenuProps}
>
{selectedObat.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={selectedObat.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
<Box sx={{ padding: "10px" }}></Box>
<PenjumlahanObat listObat={listObat} />
</>
:
<Box align="center">Tiada Tindakan</Box>
}
</DialogContent>
<DialogActions>
<Button autoFocus onClick={
() => {
setOpenDialog(false)
}
} variant="outlined">
Tutup
</Button>
</DialogActions>
</BootstrapDialog>
{component}
</>
)
}
export default TabelJadwalRekamMedis