finished dokter / admin almost done

components/admin/appBar.js

@@ -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>
+    </>
   )
 }
 

components/admin/dialogEditPasien.js

@@ -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;

components/admin/tabelDokter.js

@@ -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;

components/admin/tabelJadwalDokter.js

@@ -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

components/before_login/appBar.js

@@ -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>

components/before_login/body.js

@@ -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){
+  if (errornya == true) {
-     MySwal.fire({
+    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;
+    let http_server = process.env.HTTP_URL + "/api/login?username=" + username + "&password=" + md5(password) + "&role=" + role;
-      // console.log(http_server);
+    // console.log(http_server);
-      const response = await fetch(http_server, {
+    const response = await fetch(http_server, {
-        method: 'GET',
+      method: 'GET',
-        headers: {
+      headers: {
-          'Content-Type': 'application/json',
+        'Content-Type': 'application/json',
-          'allow-cors-origin': '*',
+        'allow-cors-origin': '*',
-          'crossDomain': true,
+        'crossDomain': true,
-        }
+      }
-      });
+    });
-      const data = await response.json();
+    const data = await response.json();
-      // console.log(response);
+    // console.log(response);
-      if(response.status == 200){
+    if (response.status == 200) {
-        console.log(data);
+      console.log(data);
-        toast.success("Login Success")
+      toast.success("Login Success")
-        // pause 2 seconds
+      // pause 2 seconds
 
-        setTimeout( async function(){
+      setTimeout(async function () {
-          // put data to local storage
+        // // put data to local storage
-          
-          await localStorage.setItem('user_data', JSON.stringify(data));
-          // localStorage.removeItem('user_data');
-          document.cookie = data;
-          
 
-          
+        // 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 (role == 'Dokter') {
-      }else if(response.status == 400){
+          // redirect to dashboard
-        // console.log(data);
+          await router.replace('/dokter');
-        toast.warning(data.message);
+        }
-        // focus on username input
+
-        usernameInputRef.current.focus();
+
-      }else{
+
-        toast.error("Server Error");
+
-      }
+      }, 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={{
+                <Box sx={{ padding: "5px" }}></Box>
-                  padding: "15px",
+                <TableContainer sx={{
+                  maxHeight: 500,
+                  minWidth: 500,
+                  // padding: "15px",
+                  paddingLeft: "15px",
+                  paddingRight: "15px",
+                  paddingBottom: "15px",
                 }}>
-                  <Table  aria-label="simple table" sx={{
+                  <Table stickyHeader aria-label="sticky table" sx={{
-                    minWidth: 650,
                     boxShadow: 3,
                     "& .MuiTableCell-root": {
                       borderLeft: "1px solid rgba(224, 224, 224, 1)"
                     }
                   }}>
                     <TableHead>
-                      <TableRow>
+                      <TableRow hover>
-                        <StyledTableCell>Dessert (100g serving)</StyledTableCell>
+                        <StyledTableCell>Nama</StyledTableCell>
-                        <StyledTableCell align="right">Calories</StyledTableCell>
+                        <StyledTableCell>Spesialis</StyledTableCell>
-
+                        <StyledTableCell>Jam Mulai</StyledTableCell>
+                        <StyledTableCell>Jam Selesai</StyledTableCell>
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {rows.map((row) => (
+                      {
-                        <TableRow
+                        props.jadwal_dokter.map((jadwal, index) => {
-                          key={row.name}
+                          return (
-
+                            <TableRow key={index}>
-                        >
+                              <TableCell>{jadwal.tb_dokter.nama}</TableCell>
-                          <TableCell component="th" scope="row">
+                              <TableCell>{jadwal.tb_dokter.spesialis}</TableCell>
-                            {row.name}
+                              <TableCell>{jadwal.jam_mulai}</TableCell>
-                          </TableCell>
+                              <TableCell>{jadwal.jam_selesai}</TableCell>
-                          <TableCell align="right">{row.calories}</TableCell>
+                            </TableRow>
-
+                          )
-                        </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}>

components/dokter/appBar.js

@@ -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}>
+      <AppBar position="fixed" open={open} >
-          <Toolbar>
+        <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,
+                cursor: (!props.backdrop && !props.sweetalertload) ? 'pointer' : 'default'
-                ...(open && { display: 'none' }),
               }}
             >
-              <MenuIcon />
+              <AccountCircle />
             </IconButton>
-            <Typography variant="h6" noWrap component="div">
+          </Box>
-              Mini variant drawer
+        </Toolbar>
-            </Typography>
+      </AppBar>
-            
+
-            <Box sx={{ flexGrow: 1 }} />
+      {renderMenu}
-            <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>        
+          </IconButton>
         </DrawerHeader>
         <Divider />
         <List>
-          <ListItemButton
+          {
-            key={"text"}
+            listmenu.map((menu, index) => (
-            onClick={null}
+              <ListItemButton
-            // disableElevation
+                key={index}
-            disableRipple
+                // onClick={handleMenuRoute("hehe")}
-            sx={{
+                // onClick={() => props.handleMenuRoute(menu.router)}
-              minHeight: 48,
+                onClick={(!props.backdrop && !props.sweetalertload && props.menu) ? () => handleMenuRoute(menu.router) : null}
-              justifyContent: open ? 'initial' : 'center',
+                // disableElevation
-              px: 2.5,
+                // disableRipple
-              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,
+                  minHeight: 48,
-                  mr: open ? 3 : 'auto',
+                  justifyContent: open ? 'initial' : 'center',
-                  justifyContent: '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
-              </ListItemIcon>
+                  sx={{
-              <ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
+                    color: (props.menu == menu.name) ? "white" : "grey", // ini
-            </ListItemButton>
+                    minWidth: 0,
-          ))}
+                    mr: open ? 3 : 'auto',
-        
+                    justifyContent: 'center',
+                  }}
+                >
+                  {
+                    menu.icon
+                  }
+                </ListItemIcon>
+                <ListItemText primary={menu.name2} sx={{ opacity: open ? 1 : 0 }} />
+              </ListItemButton>
+            ))
+          }
+
+
         </List>
 
-        
+
-          
+
       </Drawer>
     </div>
   )

components/dokter/selectedObat.js

@@ -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

components/dokter/tabelJadwalDokter.js

@@ -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

components/dokter/tableJadwalRekamMedis.js

@@ -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

function/all_function.js

@@ -79,5 +79,211 @@ module.exports = {
     } catch (error) {
       return false
     }
+  },
+  dokter_all : async function() {
+    try {
+      let http_server = process.env.HTTP_URL+"/api/admin/dokter";
+      // 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
+    }
+  },
+  pasien_all : async function() {
+    try {
+      let http_server = process.env.HTTP_URL+"/api/admin/pasien";
+      // 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
+    }
+  },
+  jadwal_dokter_today : async function(){
+    try {
+      // return hari_ini
+      let http_server = process.env.HTTP_URL+"/api/admin/jadwal_dokter";
+      // 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
+    }
+  },
+  jadwal_pasien_today : async function(){
+    try {
+      // return hari_ini
+      let http_server = process.env.HTTP_URL+"/api/admin/jadwal_pasien";
+      // 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
+    }
+  },
+  jadwal_dokter_today_home : async function(){
+    try {
+      // return hari_ini
+      let http_server = process.env.HTTP_URL+"/api/login/jadwal_dokter";
+      // 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
+    }
+  },
+  get_jadwal_dokter : async function(id){
+    try {
+      // return hari_ini
+      let http_server = process.env.HTTP_URL+"/api/dokter/jadwal_dokter?id="+id;
+      // 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
+    }
+  },
+  jadwal_ini_hari : async function(id){
+    try {
+      // return hari_ini
+      let http_server = process.env.HTTP_URL+"/api/dokter/jadwal_ini_hari?id="+id;
+      // 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
+    }
+  },
+  cek_data_rekam_medis : async function(id,id_dokter){
+    try {
+      // return hari_ini
+      let http_server = process.env.HTTP_URL+"/api/dokter/cek_data_rekam_medis?id="+id+"&id_dokter="+id_dokter;
+      // 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
+    }
   }
 }

package.json

@@ -17,12 +17,14 @@
     "@mui/x-date-pickers": "^5.0.0-alpha.1",
     "cors": "^2.8.5",
     "date-fns": "^2.28.0",
+    "date-fns-tz": "^1.3.4",
     "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",
+    "moment": "^2.29.3",
     "mysql2": "^2.3.3",
     "next": "12.1.5",
     "nextjs-progressbar": "0.0.14",
@@ -36,6 +38,7 @@
     "sweetalert2": "^11.4.9",
     "sweetalert2-react-content": "^5.0.0",
     "typescript": "^4.6.3",
+    "underscore": "^1.13.3",
     "webpack": "^5.72.0"
   },
   "devDependencies": {

pages/admin/data-dokter.js

@@ -1,10 +1,11 @@
-import * as React from 'react';
+import { useRef, useState, forwardRef } 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 Divider from '@mui/material/Divider';
 import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -27,18 +28,64 @@ import TableRow from '@mui/material/TableRow';
 
 import AppBarAdmin from '../../components/admin/appBar';
 
-function createData(name, calories, fat, carbs, protein) {
+// backdrop
-  return { name, calories, fat, carbs, protein };
+import Backdrop from '@mui/material/Backdrop';
-}
+import CircularProgress from '@mui/material/CircularProgress';
 
-const rows = [
+// toast
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+import { ToastContainer, toast, Zoom, Bounce } from 'react-toastify'
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+import 'react-toastify/dist/ReactToastify.css';
-  createData('Eclair', 262, 16.0, 24, 6.0),
+
-  createData('Cupcake', 305, 3.7, 67, 4.3),
+// sweet alert
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
+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";
+
+// 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';
+
+// this is for number format
+import NumberFormat from 'react-number-format';
+
+
+
+import TabelDokterAll from '../../components/admin/tabelDokter'
+
+// for select jadwal
+import OutlinedInput from '@mui/material/OutlinedInput';
+import ListItemText from '@mui/material/ListItemText';
+import Checkbox from '@mui/material/Checkbox';
+import Chip from '@mui/material/Chip';
+import { Edit } from '@mui/icons-material';
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+const hari = [
+  'Senin',
+  'Selasa',
+  'Rabu',
+  'Kamis',
+  'Jumat',
+  'Sabtu',
+  'Minggu',
 ];
 
+
+
+
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
     backgroundColor: theme.palette.primary.main,
@@ -57,23 +104,289 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   ...theme.mixins.toolbar,
 }));
 
-function DataDokterPage() {
+// ini untuk number
-  const [age, setAge] = React.useState('');
+const NumberFormatCustom = forwardRef(function NumberFormatCustom(props, ref) {
-
+  const { onChange, ...other } = props;
-  const handleChange = (event) => {
-    setAge(event.target.value);
-  };
 
   return (
-    <div>
+    <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"
+    />
+  );
+});
+
+
+
+
+function DataDokterPage(props) {
+  const url = process.env.HTTP_URL + "/api/admin/dokter"; // ini url
+
+  // for loading table
+  const [dataDokterAll, setDataDokterAll] = useState();
+  const [awal, setAwal] = useState(false);
+
+  const [backdrop, setBackdrop] = useState(false); //this is for backdrop
+  const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
+  const nikInputRef = useRef();
+  const [nik, setNik] = useState('');
+  const namaInputRef = useRef();
+  const alamatInputRef = useRef();
+  const noTelpInputRef = useRef();
+  const [noTelp, setNoTelp] = useState('');
+  const [spesialis, setSpesialis] = useState('');
+
+  // for select jadwal
+  const [jadwal, setJadwal] = useState([]);
+
+  // for time select
+  const jamMulaiInputRef = useRef();
+  const jamSelesaiInputRef = useRef();
+  const [jamMulai, setJamMulai] = useState(null);
+  const [jamSelesai, setJamSelesai] = useState(null);
+
+
+
+  // before add dokter
+  const beforeTambahDokter = async (e) => {
+    e.preventDefault();
+    const nama = namaInputRef.current.value;
+    const alamat = alamatInputRef.current.value;
+    let no_telp = "08" + noTelp
+    console.log(no_telp.length);
+    if (nik.length < 16) {
+      toast.error('NIK harus 16 digit')
+      // focus to nik
+      nikInputRef.current.focus();
+    } else if (no_telp.length < 11) {
+      toast.error('No Telpon minimal harus 11 digit')
+      // focus to nik
+      noTelpInputRef.current.focus();
+    }
+    else if (jamMulai == null) {
+      toast.error('Jam harus diisi')
+      // focus to jam mulai
+      jamMulaiInputRef.current.focus();
+    } else if (jamSelesai == null) {
+      toast.error('Jam harus diisi')
+      // focus to jam mulai
+      jamSelesaiInputRef.current.focus();
+    } else if (jamMulai >= jamSelesai) {
+      toast.error('Jam mulai harus lebih kecil dari jam selesai')
+      // focus to jam mulai
+      jamSelesaiInputRef.current.focus();
+    } else {
+      console.log(nik, nama, alamat, noTelp, spesialis, jamMulai, jamSelesai, jadwal, "sini adalah datanya dokter");
+      setSweetAlertLoading(true);
+      await MySwal.fire({
+        title: 'Yakin ?',
+        text: `Dokter ${nama} akan ditambahkan`,
+        icon: 'info',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Ya, tambahkan!'
+      }).then(async (result) => {
+        if (result.value) {
+          setBackdrop(true);
+          // await 4 second
+          // await new Promise(resolve => setTimeout(resolve, 4000));
+          // create a new let jam_mulai_converted , and jam_selesai_converted, and only get the time. etc 08:00:00
+          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" });
+
+          let data = {
+            nik,
+            nama,
+            alamat,
+            no_telp,
+            spesialis,
+            jam_mulai: jam_mulai_converted,
+            jam_selesai: jam_selesai_converted,
+            jadwal
+          }
+
+          // console.log(data.data)
+          let response = await tambah_dokter(data);
+          // co
+          if (!response) {
+            // await 1 second
+            await new Promise(resolve => setTimeout(resolve, 500));
+            setAwal(true);
+            nikInputRef.current.focus();
+          } else {
+            // clear input
+            setAwal(false);
+            setNik("");
+            setNoTelp("");
+            setSpesialis("");
+            setJamMulai(null);
+            setJamSelesai(null);
+            setJadwal([]);
+            namaInputRef.current.value = "";
+            alamatInputRef.current.value = "";
+            Router.replace(Router.asPath);
+          }
+
+        }
+      })
+      setBackdrop(false);
+      setSweetAlertLoading(false);
+    }
+
+
+  }
+
+  // add dokter
+  async function tambah_dokter(datanya) {
+    // console.log(datanya, "ini datanya");
+    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(
+          datanya
+        )
+      })
+      // get response
+      const data = await response.json()
+      // console.log(data, "ini data dari cek dokter")
+      if (response.status === 200) {
+        // create toast
+
+        toast.success(data.message)
+        return true
+      } else if (response.status === 400) {
+        setDataDokterAll(data.data)
+
+        return false
+      } else {
+        // create toast
+
+        toast.error(data.message)
+        return false
+      }
+    } catch (err) {
+      toast.error("Terjadi kesalahan pada server")
+      return false
+    }
+  }
+
+  // before edit dokter
+  const beforeEditDokter = async (nik, datanya) => {
+    // console.log(datanya, "ini datanya");
+    // console.log(nik, "ini nik");
+    // create sweet alert
+    setSweetAlertLoading(true);
+    await MySwal.fire({
+      title: 'Yakin ?',
+      text: `Dokter dengan NIK ${nik} akan diubah`,
+      icon: 'info',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText: 'Ya, ubah!'
+    }).then(async (result) => {
+      if (result.value) {
+        setBackdrop(true);
+        // await 4 second
+        await edit_data_dokter(nik, datanya);
+      }
+    })
+
+    setBackdrop(false);
+    setSweetAlertLoading(false);
+  }
+
+  // edit dokter
+  async function edit_data_dokter(nik, datanya) {
+    console.log(nik, datanya, "ini nik dan datanya");
+    // await 4 sec
+    try {
+      let urlnya = `${url}?nik=${nik}&detail=datanya`;
+      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(
+          datanya
+        )
+      })
+
+      // get response
+      const data = await response.json()
+      console.log(data, "ini data dari cek dokter")
+      if (response.status === 200) {
+        // create toast
+        toast.success(data.message)
+        setAwal(false);
+        Router.replace(Router.asPath);
+      } else {
+        toast.error(data.message)
+      }
+    } catch (error) {
+      toast.error("Terjadi kesalahan pada server")
+    }
+  }
+
+  return (
+    <>
+      <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="Dokter" />
+        <AppBarAdmin menu="Dokter" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
-        <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <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 }}>
+              <Card component="form" align="center" sx={{ margin: "auto", maxWidth: 700, minHeight: 210, boxShadow: 10 }}
+                onSubmit={beforeTambahDokter}
+              >
                 <Typography variant="h6" gutterBottom sx={{
                   fontWeight: 'bold',
                   textAlign: 'left',
@@ -84,6 +397,28 @@ function DataDokterPage() {
                 }}>Tambah Dokter</Typography>
                 <Box sx={{ padding: "5px" }}></Box>
                 <TextField
+                  required
+                  inputRef={nikInputRef}
+                  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
+                  required
+                  inputRef={namaInputRef}
                   id="namaTextField"
                   label="Nama"
                   placeholder="Masukkan Nama"
@@ -91,6 +426,8 @@ function DataDokterPage() {
                 />
                 <Box sx={{ padding: "10px" }}></Box>
                 <TextField
+                  required
+                  inputRef={alamatInputRef}
                   id="alamatTextField"
                   label="Alamat"
                   placeholder="Masukkan Alamat"
@@ -98,53 +435,117 @@ function DataDokterPage() {
                 />
                 <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={age}
+                    value={spesialis}
                     label="Jenis"
-                    onChange={handleChange}
+                    onChange={
+                      (e) => { setSpesialis(e.target.value) }
+                    }
                   >
-                    <MenuItem value="">
+                    <MenuItem value="" selected disabled>
                       <em>None</em>
                     </MenuItem>
-                    <MenuItem value={10}>Ten</MenuItem>
+                    <MenuItem value={"Spesialis 1"}>Spesialis 1</MenuItem>
-                    <MenuItem value={20}>Twenty</MenuItem>
+                    <MenuItem value={"Spesialis 2"}>Spesialis 2</MenuItem>
-                    <MenuItem value={30}>Thirty</MenuItem>
+                    <MenuItem value={"Spesialis 3"}>Spesialis 3</MenuItem>
                   </Select>
                 </FormControl>
                 <Box sx={{ padding: "10px" }}></Box>
-                <TextField
+                <Divider />
-                  id="usernameTextField"
-                  label="Username"
-                  placeholder="Masukkan Username"
-                  sx={{ width: "85%", boxShadow: 10 }}
-                />
                 <Box sx={{ padding: "10px" }}></Box>
-                <TextField
+                <FormControl sx={{ width: "85%", boxShadow: 10 }}>
-                  id="passwordTextField"
+                  <InputLabel id="demo-multiple-checkbox-label">Jadwal Hari</InputLabel>
-                  label="Password"
+                  <Select
-                  placeholder="Masukkan Password"
+                    required
-                  sx={{ width: "85%", boxShadow: 10 }}
+                    labelId="demo-multiple-checkbox-label"
-                />
+                    id="demo-multiple-checkbox"
+                    multiple
+                    value={jadwal}
+                    onChange={
+                      (e) => {
+                        const {
+                          target: { value },
+                        } = e;
+                        setJadwal(
+                          // On autofill we get a stringified value.
+                          typeof value === 'string' ? value.split(',') : value,
+                        );
+                      }
+                    }
+                    input={<OutlinedInput label="Tag" />}
+                    renderValue={(selected) => (
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                        {selected.map((value) => (
+                          <Chip key={value} label={value} />
+                        ))}
+                      </Box>
+                    )}
+                    MenuProps={MenuProps}
+                  >
+                    {hari.map((name) => (
+                      <MenuItem key={name} value={name}>
+                        <Checkbox checked={jadwal.indexOf(name) > -1} />
+                        <ListItemText primary={name} />
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
                 <Box sx={{ padding: "10px" }}></Box>
-                <TextField
+                <FormControl sx={{ width: "85%", boxShadow: 10 }}>
-                  id="konfirmasiPasswordTextField"
+                  <LocalizationProvider dateAdapter={AdapterDateFns}>
-                  label="Konfirmasi Password"
+                    <TimePicker
-                  placeholder="Masukkan Konfirmasi Password"
+                      inputRef={jamMulaiInputRef}
-                  sx={{ width: "85%", boxShadow: 10 }}
+                      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>
                 <Box sx={{ padding: "10px" }}></Box>
                 <Box textAlign="center">
-                  <Button variant="contained">Tambah</Button>
+                  <Button variant="contained" type="submit">Tambah</Button>
                 </Box>
                 <Box sx={{ padding: "10px" }}></Box>
               </Card>
@@ -164,40 +565,59 @@ function DataDokterPage() {
                   padding: "15px",
                 }}>
                   <Table aria-label="simple table" sx={{
-                    minWidth: 650,
+                    minWidth: 500,
                     boxShadow: 3,
+                    "& .MuiTableCell-root": {
+                      borderLeft: "1px solid rgba(224, 224, 224, 1)"
+                    }
                   }}>
                     <TableHead>
                       <TableRow>
-                        <StyledTableCell>Dessert (100g serving)</StyledTableCell>
+                        <StyledTableCell>NIK</StyledTableCell>
-                        <StyledTableCell align="right">Calories</StyledTableCell>
+                        <StyledTableCell>Nama</StyledTableCell>
-                        <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
+                        <StyledTableCell>Spesialis</StyledTableCell>
-                        <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
+                        <StyledTableCell>Telepon</StyledTableCell>
-                        <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
+                        <StyledTableCell width={"10%"}>Status</StyledTableCell>
+                        <StyledTableCell>Aksi</StyledTableCell>
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {rows.map((row) => (
+                      <TabelDokterAll
-                        <TableRow
+                        dataDokterAll={!awal ? props.dokter : dataDokterAll}
-                          key={row.name}
+                        toastnya={
-                          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                          (pesan, stat) => {
-                        >
+                            if (stat) {
-                          <TableCell component="th" scope="row">
+                              toast.success(pesan)
-                            {row.name}
+                            } else {
-                          </TableCell>
+                              toast.error(pesan)
-                          <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>
+                        setAwal={
-                      ))}
+                          (data) => {
+                            setAwal(data)
+                          }
+                        }
+                        editDokter={beforeEditDokter}
+                        backdropnya={
+                          (stat) => {
+                            setBackdrop(stat)
+                          }
+                        }
+                        sweetAlertLoadingnya={
+                          (stat)=>{
+                            setSweetAlertLoading(stat)
+                          }
+                        }
+                      />
                     </TableBody>
                   </Table>
                 </TableContainer>
-                <Box sx={{ padding: "5px" }}></Box>
+                {/* <Box sx={{ padding: "5px" }}></Box>
                 <Box textAlign="center">
                   <Button variant="contained">Cetak</Button>
-                </Box>
+                </Box> */}
                 <Box sx={{ padding: "10px" }}></Box>
               </Card>
             </Grid>
@@ -205,8 +625,56 @@ function DataDokterPage() {
           </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)
+    if (!user) {
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
+
+
+    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_dokter = await all_function.dokter_all();
+    console.log(all_dokter, "ini all dokter");
+
+    return {
+      props: {
+        user: req.session.user,
+        dokter: all_dokter
+      },
+      // 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 DataDokterPage;

pages/admin/data-obat.js

@@ -74,13 +74,6 @@ 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} />;
 });
@@ -932,6 +925,14 @@ export const getServerSideProps = withIronSessionSsr(
     const user = req.session.user;
     console.log(user, "sini di server side props");
     // console.log(req.query)
+    if (!user) {
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
 
     let cek_user = await all_function.cek_user(user.username, user.password, user.role)
     console.log(cek_user, "cek user")

pages/admin/data-tindakan.js

@@ -325,6 +325,14 @@ function TindakanPage(props) {
 export const getServerSideProps = withIronSessionSsr(
   async function getServerSideProps({ req }) {
     const user = req.session.user;
+    if (!user) {
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
     console.log(user, "sini di server side props");
     // console.log(req.query)
 

pages/admin/index.js

@@ -1,4 +1,4 @@
-import {  useState } from "react";
+import { useState } from "react";
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -65,7 +65,7 @@ function AdminIndexPage() {
   //   }
   // }
   // cek_user()
-  
+
   return (
     <div>
       {/* <ThemeProvider theme={theme}>  */}
@@ -199,8 +199,42 @@ function AdminIndexPage() {
 export const getServerSideProps = withIronSessionSsr(
   async function getServerSideProps({ req }) {
     const user = req.session.user;
+    if (!user) {
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
     console.log(user, "sini di server side props");
-    // console.log(req.query)
+    console.log(user.role , "ini rolenya")
+
+    if (user.role != "Admin") {
+      try {
+        console.log("jalankannya ini di admin")
+        const url = process.env.HTTP_URL + "/api/login/logout";
+        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}`)
+          },
+        })
+        
+      } catch (err) {
+
+      }
+
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
 
     let cek_user = await all_function.cek_user(user.username, user.password, user.role)
     console.log(cek_user, "cek user")

pages/dokter/index.js

@@ -1,16 +1,11 @@
-import * as React from 'react';
+import { useState, useRef } 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 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';
@@ -20,24 +15,97 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 
-// clock picker
+// 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";
+
+// for add dialog
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+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';
+
+// for time select
 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 { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import TextField from '@mui/material/TextField';
+import FormControl from '@mui/material/FormControl';
+
+import moment from "moment"; //for converting date and time
+
 
 import AppBarDokter from '../../components/dokter/appBar';
 
-function createData(name, calories, fat, carbs, protein) {
+import TabelJadwalDokter from '../../components/dokter/tabelJadwalDokter';
-  return { name, calories, fat, carbs, protein };
+
-}
+
+// for add dialog
+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,
+};
+
+const mingguan = [
+  "Senin",
+  "Selasa",
+  "Rabu",
+  "Kamis",
+  "Jumat",
+  "Sabtu",
+  "Minggu"
+]
 
-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}`]: {
@@ -59,89 +127,337 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   ...theme.mixins.toolbar,
 }));
 
-export default function DokterIndexPage() {
+function DokterIndexPage(props) {
+  // console.log(props)
+  const url = process.env.HTTP_URL + "/api/dokter"; // ini url
 
-  const [age, setAge] = React.useState('');
+  const [backdrop, setBackdrop] = useState(false); //this is for backdrop
+  const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
 
-  const handleChange = (event) => {
+  const [openAddDialog, setOpenAddDialog] = useState(false);
-    setAge(event.target.value);
-  };
 
-  // clock picker
+  const [titleDialog, setTitleDialog] = useState('');
-  const [value, setValue] = React.useState(null);
+  const [jam_mulai, setJamMulai] = useState(null);
+  const [jam_selesai, setJamSelesai] = useState(null);
+  const jam_mulaiInputRef = useRef(null);
+  const jam_selesaiInputRef = useRef(null);
+  const [hari, setHari] = useState('');
+  const [idnya, setIdnya] = useState('');
+  const [dataEdit, setDataEdit] = useState(null);
+
+  // open add dialog
+  async function before_add_jadwal(hari) {
+    setTitleDialog(`Tambah Jadwal Hari ${hari}`);
+    setHari(hari);
+    setJamMulai(null);
+    setJamSelesai(null);
+    setIdnya('tambah');
+    setOpenAddDialog(true);
+  }
+
+  // before tambah jadwal with dialog and time checker
+  async function tambah_jadwal(stat) {
+    // console.log(jam_mulai, jam_selesai, hari, "ini cek data tambah")
+    if (jam_mulai == null) {
+      jam_mulaiInputRef.current.focus();
+      toast.error("Jam mulai harus diisi")
+      return false;
+    } else if (jam_selesai == null) {
+      jam_selesaiInputRef.current.focus();
+      toast.error("Jam selesai harus diisi")
+      return false;
+    } else if (jam_mulai >= jam_selesai) {
+      jam_mulaiInputRef.current.focus();
+      toast.error("Jam mulai harus lebih kecil dari jam selesai")
+      return false;
+    } else {
+      setOpenAddDialog(false);
+      setSweetAlertLoading(true);
+      if (stat == 'tambah') {
+        console.log(jam_mulai, jam_selesai, hari, "ini jalankan data tambah")
+
+        await MySwal.fire({
+          title: 'Yakin ?',
+          text: `Jadwal Baru Pada Hari ${hari} Akan Ditambahkan`,
+          icon: 'info',
+          showCancelButton: true,
+          confirmButtonColor: '#3085d6',
+          cancelButtonColor: '#d33',
+          confirmButtonText: 'Ya, tambah!'
+        }).then(async (result) => {
+          if (result.value) {
+            setBackdrop(true);
+            // await 4 second
+            // await new Promise(resolve => setTimeout(resolve, 4000));
+            // await edit_data_dokter(nik,datanya);
+            // clear hari ,jam_mulai,jam_selesai
+            await confirm_tambah_jadwal(hari, jam_mulai, jam_selesai);
+            setHari('');
+            setJamMulai(null);
+            setJamSelesai(null);
+          } else {
+            setOpenAddDialog(true);
+          }
+        })
+      } else if (stat == 'edit') {
+        if (dataEdit.jam_mulai == jam_mulai && dataEdit.jam_selesai == jam_selesai) {
+          toast.error("Jadwal tidak berubah")
+          // open dialog
+          setOpenAddDialog(true);
+          // focus to jam_mulai
+          jam_mulaiInputRef.current.focus();
+          return false;
+        }
+
+        await MySwal.fire({
+          title: 'Yakin ?',
+          text: `Jadwal  Pada Hari ${hari} Akan Diedit`,
+          icon: 'info',
+          showCancelButton: true,
+          confirmButtonColor: '#3085d6',
+          cancelButtonColor: '#d33',
+          confirmButtonText: 'Ya, edit!'
+        }).then(async (result) => {
+          if (result.value) {
+            setBackdrop(true);
+            // await 4 second
+            // await new Promise(resolve => setTimeout(resolve, 4000));
+            console.log(hari, "ini hari")
+            await confirm_edit_jadwal(hari, jam_mulai, jam_selesai);
+
+            setHari('');
+            setJamMulai(null);
+            setJamSelesai(null);
+          } else {
+            setOpenAddDialog(true);
+          }
+        })
+      }
+
+      setBackdrop(false);
+      setSweetAlertLoading(false);
+    }
+  }
+
+  // confirm tambah jadwal
+  async function confirm_tambah_jadwal(hari, jam_mulai, jam_selesai) {
+    try {
+      // moment format jam_mulai to only hour and minute
+      jam_mulai = moment(jam_mulai).format("HH:mm");
+      jam_selesai = moment(jam_selesai).format("HH:mm");
+      // console.log(url)
+      const urlnya = url + "/jadwal_dokter";
+      const response = await fetch(urlnya, {
+        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(
+          {
+            hari,
+            jam_mulai,
+            jam_selesai,
+            nik: props.user
+          }
+        )
+      })
+      // get response
+      const data = await response.json()
+      console.log(data, "ini data tambah jadwal")
+      if (response.status === 200) {
+        // create toast
+
+        toast.success(data.message)
+        Router.replace(Router.asPath);
+        return true
+      } else if (response.status === 400) {
+
+        toast.success(data.message)
+        return false
+      } else {
+        // create toast
+
+        toast.error(data.message)
+        return false
+      }
+    } catch (err) {
+      toast.error("Terjadi kesalahan pada server")
+      return false
+    }
+  }
+
+  // confirm edit jadwal
+  async function confirm_edit_jadwal(hari, jam_mulai, jam_selesai) {
+    try {
+      // moment format jam_mulai to only hour and minute
+      jam_mulai = moment(jam_mulai).format("HH:mm");
+      jam_selesai = moment(jam_selesai).format("HH:mm");
+      // console.log(url)
+      const urlnya = url + "/jadwal_dokter?id=" + props.user;
+      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(
+          {
+            hari,
+            jam_mulai,
+            jam_selesai
+          }
+        )
+      })
+      // get response
+      const data = await response.json()
+      console.log(data, "ini data edit jadwal")
+      if (response.status === 200) {
+        // create toast
+
+        toast.success(data.message)
+        Router.replace(Router.asPath);
+        return true
+      } else if (response.status === 400) {
+
+        toast.success(data.message)
+        return false
+      } else {
+        // create toast
+
+        toast.error(data.message)
+        return false
+      }
+    } catch (err) {
+      toast.error("Terjadi kesalahan pada server")
+      return false
+    }
+  }
+
+  // confirm hapus jadwal
+  async function confirm_hapus_jadwal(hari) {
+    try {
+      // moment format jam_mulai to only hour and minute
+      // console.log(url)
+      const urlnya = url + "/jadwal_dokter?id=" + props.user;
+      const response = await fetch(urlnya, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          'allow-cors-origin': '*',
+          'crossDomain': true,
+          'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
+        },
+        body: JSON.stringify(
+          {
+            hari
+          }
+        )
+      })
+      // get response
+      const data = await response.json()
+      console.log(data, "ini data hapus jadwal")
+      if (response.status === 200) {
+        // create toast
+
+        toast.success(data.message)
+        Router.replace(Router.asPath);
+        return true
+      } else if (response.status === 400) {
+
+        toast.success(data.message)
+        return false
+      } else {
+        // create toast
+
+        toast.error(data.message)
+        return false
+      }
+    } catch (err) {
+      toast.error("Terjadi kesalahan pada server")
+      return false
+    }
+  }
 
   return (
-    <div>
+    <>
+      <BootstrapDialog
+        onClose={
+          (event, reason) => {
+            if (reason && reason == "backdropClick")
+              return;
+            setOpenAddDialog(false)
+          }
+        }
+        aria-labelledby="customized-dialog-title"
+        open={openAddDialog}
+        fullWidth={true}
+      >
+        <BootstrapDialogTitle id="customized-dialog-title" onClose={
+          (event, reason) => {
+            if (reason && reason == "backdropClick")
+              return;
+            setOpenAddDialog(false)
+          }
+        }>
+          {titleDialog}
+        </BootstrapDialogTitle>
+        <DialogContent dividers align="center">
+          <FormControl sx={{ width: "85%", boxShadow: 10 }}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <TimePicker
+                inputRef={jam_mulaiInputRef}
+                required
+                label="Jam Mulai"
+                value={jam_mulai}
+                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={jam_selesaiInputRef}
+                required
+                label="Jam Selesai"
+                value={jam_selesai}
+                onChange={(newValue) => {
+                  setJamSelesai(newValue);
+                }}
+                renderInput={(params) => <TextField {...params} />}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={
+            () => {
+              tambah_jadwal(idnya)
+            }
+          } variant="outlined" >
+            {idnya === 'tambah' ? 'Tambah Jadwal' : 'Edit Jadwal'}
+          </Button>
+        </DialogActions>
+      </BootstrapDialog>
+
+
+      <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 />
-        <AppBarDokter />
+        <AppBarDokter menu="Home" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
         <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
           <DrawerHeader />
           <Grid container spacing={2}>
-            <Grid item xs={12} md={4} >
+            <Grid item xs={12} md={2} ></Grid>
-              <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={{
@@ -151,52 +467,175 @@ export default function DokterIndexPage() {
                   paddingTop: "10px",
                   paddingBottom: "10px",
                   backgroundColor: "silver",
-                }}> List Tindakan</Typography>
+                }}>List Jadwal</Typography>
                 <TableContainer component={Box} sx={{
                   padding: "15px",
                 }}>
                   <Table aria-label="simple table" sx={{
-                    minWidth: 650,
+                    minWidth: 500,
                     boxShadow: 3,
                   }}>
                     <TableHead>
                       <TableRow>
-                        <StyledTableCell>Dessert (100g serving)</StyledTableCell>
+                        <StyledTableCell>Hari</StyledTableCell>
-                        <StyledTableCell align="right">Calories</StyledTableCell>
+                        <StyledTableCell>Jam Mulai</StyledTableCell>
-                        <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
+                        <StyledTableCell>Jam Selesai</StyledTableCell>
-                        <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
+                        <StyledTableCell>Aksi</StyledTableCell>
-                        <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {rows.map((row) => (
+                      <TabelJadwalDokter harinya={mingguan} dataJadwal={props.data_jadwal}
-                        <TableRow
+                        add={
-                          key={row.name}
+                          (hari) => {
-                          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                            // console.log(hari,jam_mulai,jam_selesai, "ini data add nya")
-                        >
+                            before_add_jadwal(hari)
-                          <TableCell component="th" scope="row">
+                          }
-                            {row.name}
+                        }
-                          </TableCell>
+                        edit={
-                          <TableCell align="right">{row.calories}</TableCell>
+                          (hari, jam_mulai, jam_selesai) => {
-                          <TableCell align="right">{row.fat}</TableCell>
+                            setTitleDialog("Edit Jadwal Hari " + hari)
-                          <TableCell align="right">{row.carbs}</TableCell>
+
-                          <TableCell align="right">{row.protein}</TableCell>
+                            //get hours and minutes
-                        </TableRow>
+                            let jamMulaiGetHours = jam_mulai[0] + jam_mulai[1]
-                      ))}
+                            let jamMulaiGetMinutes = jam_mulai[3] + jam_mulai[4]
+
+                            // convert to GMT String
+                            let jam_mulai_baru = new Date()
+                            jam_mulai_baru.setHours(jamMulaiGetHours)
+                            jam_mulai_baru.setMinutes(jamMulaiGetMinutes)
+                            jam_mulai_baru.setSeconds(0)
+                            jam_mulai_baru.toString()
+
+                            // get hours and minutes
+                            let jamSelesaiGetHours = jam_selesai[0] + jam_selesai[1]
+                            let jamSelesaiGetMinutes = jam_selesai[3] + jam_selesai[4]
+
+                            // convert to GMT String
+                            let jam_selesai_baru = new Date()
+                            jam_selesai_baru.setHours(jamSelesaiGetHours)
+                            jam_selesai_baru.setMinutes(jamSelesaiGetMinutes)
+                            jam_selesai_baru.setSeconds(0)
+                            jam_selesai_baru.toString()
+
+                            setDataEdit(
+                              {
+                                jam_mulai: jam_mulai_baru,
+                                jam_selesai: jam_selesai_baru,
+                              }
+                            )
+
+                            setHari(hari)
+                            setJamMulai(jam_mulai_baru)
+                            setJamSelesai(jam_selesai_baru)
+                            setIdnya("edit")
+                            setOpenAddDialog(true);
+                          }
+                        }
+                        delete={
+                          (hari) => {
+                            // create sweetalert
+                            MySwal.fire({
+                              title: 'Yakin?',
+                              text: "Jadwal Hari " + hari + " Akan dihapus",
+                              icon: 'warning',
+                              showCancelButton: true,
+                              confirmButtonColor: '#3085d6',
+                              cancelButtonColor: '#d33',
+                              confirmButtonText: 'Ya, Hapus!'
+                            }).then((result) => {
+                              if (result.value) {
+                                // console.log(hari, "ini data delete nya")
+                                confirm_hapus_jadwal(hari)
+                              }
+                            })
+                          }
+                        }
+                      />
                     </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={2} ></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)
+    if (!user) {
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
+
+    if (user.role != "Dokter") {
+      try {
+        console.log("jalankannya ini di dokter")
+        const url = process.env.HTTP_URL + "/api/login/logout";
+        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}`)
+          },
+        })
+
+      } catch (err) {
+
+      }
+
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
+
+    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,
+        }
+      };
+    }
+
+    const data_jadwal = await all_function.get_jadwal_dokter(user.nik)
+    console.log(data_jadwal, "ini data jadwal")
+    return {
+      props: {
+        user: user.nik,
+        data_jadwal: data_jadwal,
+      },
+      // 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 DokterIndexPage;

pages/dokter/rekam-medis/data.js

@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
+import Router from 'next/router'
-import * as React from 'react';
+import { useState, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -9,12 +9,51 @@ 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 FormHelperText from '@mui/material/FormHelperText';
+
+// 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";
+
+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';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
 
 import AppBarDokter from '../../../components/dokter/appBar';
+import RekamMedisSelectedObat from '../../../components/dokter/selectedObat';
 
 const DrawerHeader = styled('div')(({ theme }) => ({
   display: 'flex',
@@ -25,22 +64,134 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   ...theme.mixins.toolbar,
 }));
 
-const Post = () => {
-  const router = useRouter() // ini untuk get query dari url
 
 
-  
+const DataRekamMedisPage = (props) => {
-  
+  // console.log(props)
+  const [backdrop, setBackdrop] = useState(false); //this is for backdrop
+  const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
+
+  const keluhanInputRef = useRef(null);
+  const diagnosaInputRef = useRef(null);
+  const keterangannInputRef = useRef(null);
+
+
+  const dataPasien = props.data_rekam_medis.tb_pasien;
+  const tindakan_all = props.tindakan_all;
+  const [tindakan_selected, setTindakanSelected] = useState([]);
+  const [tindakan_selected_id, setTindakanSelectedId] = useState([]);
+  const obat_all = props.obat_all;
+  const [obat_selected, setObatSelected] = useState([]);
+  const [obat_selected_id, setObatSelectedId] = useState([]);
+
+  const [data_obat, setDataObat] = useState([]);
+
+  async function add_rekam_medis(e) {
+    e.preventDefault();
+    const id_rekam_medis = props.data_rekam_medis.id_rekam_medis;
+    const keluhan = keluhanInputRef.current.value;
+    const diagnosa = diagnosaInputRef.current.value;
+    const keterangan = keterangannInputRef.current.value;
+    const tindakan = tindakan_selected_id;
+    const obat = data_obat;
+    console.log(obat)
+
+    let cek_error = false
+
+    if(obat.length > 0) {
+      //loop obat using for and check in jumlah if null
+      for(let i = 0; i < obat.length; i++) {
+        if(obat[i].jumlah == null) {
+          cek_error = true
+          break;
+        }
+      }
+
+      if(cek_error) {
+        toast.error('Jumlah obat tidak boleh kosong')
+        return ;
+      }
+    }
+
+    setSweetAlertLoading(true);
+    await MySwal.fire({
+      title: 'Yakin ?',
+      text: `Rekam medis pasien ${props.data_rekam_medis.tb_pasien.nama} akan disimpan`,
+      icon: 'info',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText: 'Ya, simpan!'
+    }).then(async (result) => {
+      if (result.value) {
+        setBackdrop(true);
+
+        
+
+        //  await 4 sec
+        // await new Promise(resolve => setTimeout(resolve, 4000));
+        let data_all = {
+          keluhan,
+          diagnosa,
+          keterangan,
+          tindakan,
+          obat,
+        }
+
+        await confirm_add_rekam_medis(id_rekam_medis, data_all)
+
+      }
+    })
+    setBackdrop(false);
+    setSweetAlertLoading(false);
+
+  }
+
+  async function confirm_add_rekam_medis(id_rekam_medis, data_all) {
+    try {
+      let url = process.env.HTTP_URL + "/api/dokter/rekam_medis_update?id_rekam_medis=" + id_rekam_medis + "&id_dokter=" + props.user;
+      let data = 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(data_all)
+      })
+      // let data_json = await data.json();
+      // console.log(data, "ini data dari cek dokter")
+      if (data.status === 200) {
+        // create toast
+        toast.success('Rekam medis berhasil disimpan')
+        Router.push('/')
+        return true
+      }else{
+        toast.error('Rekam medis gagal disimpan')
+        return false
+      }
+    }catch(err) {
+      toast.error('Rekam medis gagal disimpan')
+      return false
+    }
+  }
+
+
   return (
-    <div>
+    <>
-      <Box sx={{ display: 'flex' }}>
+      <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>
+      <Card sx={{ display: 'flex' }} onSubmit={add_rekam_medis} component="form">
         <CssBaseline />
-        <AppBarDokter />
+        <AppBarDokter menu="Rekam Medis" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
-        <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <Box component="main" sx={{ flexGrow: 1, p: 3 }} >
           <DrawerHeader />
-          <Grid container spacing={2}>
+          <Grid container spacing={2}
+
+          >
             <Grid item xs={12} md={7} >
-              <Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
+              <Card align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
                 <Typography variant="h6" gutterBottom sx={{
                   fontWeight: 'bold',
                   textAlign: 'left',
@@ -50,21 +201,36 @@ const Post = () => {
                   backgroundColor: "silver",
                 }}>Tambah Jadwal</Typography>
                 <Box sx={{ padding: "5px" }}></Box>
+                <TextField
+                  id="nikPasienTextField"
+                  label="NIK Pasien"
+                  // placeholder="Masukkan Nama Pasien"
+                  value={dataPasien.nik}
+                  disabled
+                  sx={{ width: "90%", boxShadow: 10 }}
+                />
+                <Box sx={{ padding: "10px" }}></Box>
                 <TextField
                   id="namaPasienTextField"
                   label="Nama Pasien"
-                  placeholder="Masukkan Nama Pasien"
+                  // placeholder="Masukkan Nama Pasien"
+                  disabled
+                  value={dataPasien.nama}
                   sx={{ width: "90%", boxShadow: 10 }}
                 />
                 <Box sx={{ padding: "10px" }}></Box>
                 <TextField
                   id="tanggalPeriksaTextField"
-                  label="Tanggal Periksa"
+                  label="Tanggal Daftar"
-                  placeholder="Masukkan Tanggal Periksa"
+                  // placeholder="Masukkan Tanggal Periksa"
+                  disabled
+                  value={formatInTimeZone(new Date(dataPasien.createdAt), 'Asia/Kuala_Lumpur', 'yyyy-MM-dd | HH:mm:ss')}
                   sx={{ width: "90%", boxShadow: 10 }}
                 />
                 <Box sx={{ padding: "10px" }}></Box>
                 <TextField
+                  required
+                  inputRef={keluhanInputRef}
                   id="keluhanPasienTextField"
                   label="Keluhan Pasien"
                   placeholder="Masukkan Keluhan Pasien"
@@ -75,6 +241,8 @@ const Post = () => {
                 />
                 <Box sx={{ padding: "10px" }}></Box>
                 <TextField
+                  required
+                  inputRef={diagnosaInputRef}
                   id="diagnosaTextField"
                   label="Diagnosa"
                   placeholder="Masukkan Diagnosa"
@@ -84,14 +252,24 @@ const Post = () => {
                   sx={{ width: "90%", boxShadow: 10 }}
                 />
                 <Box sx={{ padding: "10px" }}></Box>
-                <Box textAlign="center">
+                <TextField
-                  <Button variant="contained">Tambah</Button>
+                  required
-                </Box>
+                  inputRef={keterangannInputRef}
+                  id="keteranganTextField"
+                  label="Keterangan"
+                  placeholder="Masukkan Keterangan"
+                  multiline
+                  rows={6}
+                  // maxRows={6}
+                  sx={{ width: "90%", boxShadow: 10 }}
+                />
+
                 <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 }}>
+
+              <Card align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 100, boxShadow: 10 }}>
                 <Typography variant="h6" gutterBottom sx={{
                   fontWeight: 'bold',
                   textAlign: 'left',
@@ -99,28 +277,241 @@ const Post = () => {
                   paddingTop: "10px",
                   paddingBottom: "10px",
                   backgroundColor: "silver",
-                }}> List Tindakan</Typography>
+                }}> Daftar Tindakan</Typography>
-                
+                <FormControl sx={{ m: 1, width: "85%" }}>
-                <Box sx={{ padding: "5px" }}></Box>
+                  <InputLabel id="demo-multiple-checkbox-label">Tindakan</InputLabel>
-                <Box textAlign="center">
+                  <Select
-                  <Button variant="contained">Cetak</Button>
+                    labelId="demo-multiple-checkbox-label"
-                </Box>
+                    id="demo-multiple-checkbox"
+                    multiple
+                    value={tindakan_selected}
+                    onChange={
+                      (event) => {
+                        setTindakanSelected(event.target.value);
+                        let data_selected = event.target.value
+                        let datanya = []
+                        for (let i = 0; i < data_selected.length; i++) {
+                          datanya.push(data_selected[i].split('-')[0])
+                        }
+                        setTindakanSelectedId(datanya)
+                      }
+                    }
+                    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.split("-")[0]} label={value.split("-")[1]} />
+                        ))}
+                      </Box>
+                    )}
+                    MenuProps={MenuProps}
+                  >
+                    {tindakan_all.map((name) => (
+                      <MenuItem key={name.id_tindakan} value={name.id_tindakan + "-" + name.nama_tindakan}>
+                        <Checkbox checked={tindakan_selected.indexOf(name.id_tindakan + "-" + name.nama_tindakan) > -1} />
+                        <ListItemText primary={name.nama_tindakan} />
+                      </MenuItem>
+                    ))}
+                  </Select>
+                  <FormHelperText>Kosongkan Jika Tiada Tindakan</FormHelperText>
+                </FormControl>
                 <Box sx={{ padding: "10px" }}></Box>
               </Card>
+              <Box sx={{ padding: "15px" }}></Box>
+              <Card align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 100, boxShadow: 10 }}>
+                <Typography variant="h6" gutterBottom sx={{
+                  fontWeight: 'bold',
+                  textAlign: 'left',
+                  paddingLeft: '3%',
+                  paddingTop: "10px",
+                  paddingBottom: "10px",
+                  backgroundColor: "silver",
+                }}>Daftar Obat</Typography>
+                <FormControl sx={{ m: 1, width: "85%" }}>
+                  <InputLabel id="demo-multiple-checkbox-label">Obat</InputLabel>
+                  <Select
+                    labelId="demo-multiple-checkbox-label"
+                    id="demo-multiple-checkbox"
+                    multiple
+                    value={obat_selected}
+                    onChange={
+                      (event) => {
+                        setObatSelected(event.target.value);
+                        let data_selected = event.target.value
+                        let datanya = []
+                        let data_obat = []
+                        for (let i = 0; i < data_selected.length; i++) {
+                          datanya.push(data_selected[i].split('-')[0])
+                          // push to data_obat id:data_selected[i].split('-')[0] and jumlah:null
+                          data_obat.push({ id_obat: data_selected[i].split('-')[0], jumlah: null })
+                        }
+                        setObatSelectedId(datanya)
+                        setDataObat(data_obat)
+
+                      }
+                    }
+                    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 split by '-'
+                            value.split('-')[0]
+                          } label={value.split('-')[1]} />
+                        ))}
+                      </Box>
+                    )}
+                    MenuProps={MenuProps}
+                  >
+                    {obat_all.map((name) => (
+                      <MenuItem key={name.id_obat + "-" + name.nama_obat} value={name.id_obat + "-" + name.nama_obat}>
+                        <Checkbox checked={obat_selected.indexOf(name.id_obat + "-" + name.nama_obat) > -1} />
+                        <ListItemText primary={name.nama_obat} />
+                      </MenuItem>
+                    ))}
+                  </Select>
+                  <FormHelperText>Kosongkan Jika Tiada Obat</FormHelperText>
+                </FormControl>
+                <Box sx={{ padding: "10px" }}></Box>
+                <RekamMedisSelectedObat obat={obat_selected}
+                  datanya={
+                    (data) => {
+                      console.log(data)
+                      setDataObat(data)
+                    }
+                  }
+                  errornya={
+                    (message) => {
+                      toast.error(message)
+                    }
+                  }
+                />
+              </Card>
+              <Box sx={{ padding: "10px" }}></Box>
+              <Box sx={{ padding: "10px", maxWidth: "100%" }} textAlign="center">
+                <Button variant="contained" color="primary" sx={{ width: 100 }} type="submit">
+                  Simpan
+                </Button>
+              </Box>
             </Grid>
 
           </Grid>
         </Box>
-      </Box>
+      </Card>
-    </div>
+    </>
   );
 }
 
 
-// ini untuk get query dari url
+// // ini untuk get query dari url
-Post.getInitialProps = async ({ query }) => {
+// DataRekamMedisPage.getInitialProps = async ({ query }) => {
-  // console.log(query)
+//   // console.log(query)
-  return {query }
+//   return {query }
-}
+// }
 
-export default Post
+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)
+    if (!user) {
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
+    if (user.role != "Dokter") {
+      try {
+        const url = process.env.HTTP_URL + "/api/login/logout";
+        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}`)
+          },
+        })
+      } catch (err) {
+
+      }
+
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
+
+    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,
+        }
+      };
+    }
+
+    const id = req.query.id;
+    if (!id) {
+      return {
+        redirect: {
+          destination: '/dokter/rekam-medis',
+          permanent: false,
+        }
+      };
+    }
+    console.log(id, "ini idnya")
+    const cek_data_rekam_medis = await all_function.cek_data_rekam_medis(id, user.nik)
+    
+    // if(ce)
+    if(!cek_data_rekam_medis){
+      return {
+        redirect: {
+          destination: '/dokter/rekam-medis',
+          permanent: false,
+        }
+      };
+    }
+
+    if(cek_data_rekam_medis.diagnosa != null && cek_data_rekam_medis.diagnosa != '' && cek_data_rekam_medis.keluhan != null && cek_data_rekam_medis.keluhan != ''){
+      return {
+        redirect: {
+          destination: '/dokter/rekam-medis',
+          permanent: false,
+        }
+      };
+    }
+
+    const tindakan_all = await all_function.tindakan_all()
+    const obat_all = await all_function.obat_all()
+
+    
+
+    return {
+      props: {
+        user: user.nik,
+        data_rekam_medis: cek_data_rekam_medis,
+        tindakan_all: tindakan_all,
+        obat_all: obat_all,
+      },
+      // 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 DataRekamMedisPage

pages/dokter/rekam-medis/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -17,21 +17,36 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 
+// 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";
 
 import AppBarDokter from '../../../components/dokter/appBar';
+import TabelJadwalRekamMedis from '../../../components/dokter/tableJadwalRekamMedis';
+
+let date = new Date();
+let year = date.getFullYear();
+let month = date.getMonth() + 1;
+let day = date.getDate();
+month = month < 10 ? '0' + month : month;
+day = day < 10 ? '0' + day : day;
+let today_date = year + '-' + month + '-' + day;
+
 
-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}`]: {
@@ -53,19 +68,70 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   ...theme.mixins.toolbar,
 }));
 
-export default function RekamMedisPage() {
+function RekamMedisPage(props) {
+  console.log(props, "ini propsnya")
+  const [backdrop, setBackdrop] = useState(false); //this is for backdrop
+  const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
+
+  const [tanggal, setTanggal] = useState(today_date);
+
+  const headerAwal = " Tanggal : " + tanggal
+  const [header, setHeader] = useState(headerAwal);
+
+  const dataAwal = (props.jadwal_ini_hari)
+
+  const [data, setData] = useState(dataAwal);
+
+  const inputanInputRef = useRef(null);
+
+  const cariData = async (e) => {
+    e.preventDefault();
+    const inputan = inputanInputRef.current.value;
+    const inputan_lower = inputan.toLowerCase();
+
+    try {
+      const url = process.env.HTTP_URL + "/api/dokter/cari_rekam_medis?data=" + inputan_lower + "&data2=" + inputan_lower + "&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();
+      // console.log(data, "ini data cari data")
+      if (response.status === 200) {
+        setHeader(" Pencarian : " + inputan);
+        setData(data.data);
+      } else {
+        toast.error("Data tidak ditemukan")
+      }
+    } catch (err) {
+      toast.error("Terjadi kesalahan saat mengambil data")
+    }
+
+
+  }
 
   return (
-    <div>
+    <>
+      <ToastContainer position={toast.POSITION.TOP_CENTER} transition={Zoom} autoClose={2000} Bounce={Bounce} theme="colored" style={{ textAlign: 'center' }} />
+      <Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBarDokter />
+        <AppBarDokter menu="Rekam Medis" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
         <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 }}>
+              <Card component="form" align="center"
+                sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}
+                onSubmit={cariData}
+              >
                 <Typography variant="h6" gutterBottom sx={{
                   fontWeight: 'bold',
                   textAlign: 'left',
@@ -73,22 +139,32 @@ export default function RekamMedisPage() {
                   paddingTop: "10px",
                   paddingBottom: "10px",
                   backgroundColor: "silver",
-                }}>Rekam Medis</Typography>
+                }}>Rekam Medis {header}</Typography>
-                <Grid container spacing={1} sx={{paddingTop:2}}>
+                <Grid container spacing={1} sx={{ paddingTop: 2 }}>
                   <Grid item xs={1} md={3}></Grid>
                   <Grid item xs={10} md={6}>
                     <TextField
+                      required
+                      inputRef={inputanInputRef}
                       id="namaTextField"
                       label="NIK, Nama Pasien"
                       placeholder="Masukkan NIK, Nama Pasien"
                       sx={{ width: "85%", boxShadow: 10 }}
+                      onChange={
+                        () => {
+                          if (inputanInputRef.current.value === "") {
+                            setHeader(headerAwal);
+                            setData(dataAwal);
+                          }
+                        }
+                      }
                     />
                   </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>
+                  <Button variant="contained" type="submit">Cari</Button>
                 </Box>
                 <Box sx={{ padding: "5px" }}></Box>
                 <Divider />
@@ -96,33 +172,38 @@ export default function RekamMedisPage() {
                   padding: "15px",
                 }}>
                   <Table aria-label="simple table" sx={{
-                    minWidth: 650,
+                    minWidth: 500,
                     boxShadow: 3,
+                    "& .MuiTableCell-root": {
+                      borderLeft: "1px solid rgba(224, 224, 224, 1)"
+                    }
                   }}>
                     <TableHead>
                       <TableRow>
-                        <StyledTableCell>Dessert (100g serving)</StyledTableCell>
+                        <StyledTableCell>No</StyledTableCell>
-                        <StyledTableCell align="right">Calories</StyledTableCell>
+                        <StyledTableCell>NIK</StyledTableCell>
-                        <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
+                        <StyledTableCell>Nama</StyledTableCell>
-                        <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
+                        <StyledTableCell>Waktu Periksa</StyledTableCell>
-                        <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
+                        <StyledTableCell>Umur</StyledTableCell>
+                        <StyledTableCell>Golongan Darah</StyledTableCell>
+                        <StyledTableCell>Status</StyledTableCell>
+                        <StyledTableCell>Aksi</StyledTableCell>
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {rows.map((row) => (
+                      <TabelJadwalRekamMedis data={data}
-                        <TableRow
+                        errornya={
-                          key={row.name}
+                          (message) => {
-                          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                            toast.error(message)
-                        >
+                          }
-                          <TableCell component="th" scope="row">
+                        }
-                            {row.name}
+                        user={props.user}
-                          </TableCell>
+                        backdropnya={
-                          <TableCell align="right">{row.calories}</TableCell>
+                          (status) => {
-                          <TableCell align="right">{row.fat}</TableCell>
+                            setBackdrop(status)
-                          <TableCell align="right">{row.carbs}</TableCell>
+                          }
-                          <TableCell align="right">{row.protein}</TableCell>
+                        }
-                        </TableRow>
+                      />
-                      ))}
                     </TableBody>
                   </Table>
                 </TableContainer>
@@ -137,6 +218,82 @@ export default function RekamMedisPage() {
           </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)
+    if (!user) {
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
+    if (user.role != "Dokter") {
+      try {
+        const url = process.env.HTTP_URL + "/api/login/logout";
+        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}`)
+          },
+        })
+      } catch (err) {
+
+      }
+
+      return {
+        redirect: {
+          destination: '/?error=true',
+          permanent: false,
+        }
+      };
+    }
+
+    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 jadwal_ini_hari = await all_function.jadwal_ini_hari(user.nik)
+    // const tindakan_all = await all_function.tindakan_all()
+    // const obat_all = await all_function.obat_all()
+    // console.log(user.nik, "ini niknya")
+    return {
+      props: {
+        user: user.nik,
+        jadwal_ini_hari: jadwal_ini_hari,
+        // tindakan_all: tindakan_all,
+        // obat_all: obat_all,
+      },
+      // 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 RekamMedisPage;

pages/index.js

@@ -1,25 +1,70 @@
+// import Router from 'next/router'
+import { useRouter } from 'next/router'
+import { useEffect , useState } from 'react';
+
+
 import ResponsiveAppBarIndex from "../components/before_login/appBar"
 import GridIndex from "../components/before_login/body"
 
+let all_function = require('../function/all_function.js')
+
  function Home(props) {
-  //  console.log(props, "sini di home");
+  // const router = useRouter();
+  // // const error = !props.query.error ? false : true
+  console.log(props)
+
+
+  // useEffect(() => {
+  //   if(!router.isReady) return;
+  //   const query = router.query;
+  // }, [router.isReady, router.query]);
+  
+
+  // let cekError;
+  // if(router.query.error){
+  //   cekError = true
+  // }else{
+  //   cekError = false
+  // }
+  
   return (
     <div>
       <ResponsiveAppBarIndex />
-      <div><GridIndex errornya={props.error} /></div>
+      <div><GridIndex errornya={props.query.error ? true : false}  jadwal_dokter={props.jadwal_dokter_today}/></div>
+      {/* <div><GridIndex errornya={false} /></div> */}
       
     </div>
   )
 }
 
-export async function getServerSideProps({req}) {
+// export async function getServerSideProps({req}) {
-  // console.log(req.query.error)
+//   // console.log(req.query.error)
-  // if
+//   // if
-  return {
+//   return {
-    props: {
+//     props: {
-      error: (req.query.error == 'true') ? true : false,
+//       error: (req.query.error == 'true') ? true : false,
-    }
+//     }
-  }
+//   }
+// }
+
+// export async function getStaticProps() {
+//   let jadwal_dokter_today = await all_function.jadwal_dokter_today_home();
+//   return {
+//     props: {
+//       jadwal_dokter_today: jadwal_dokter_today,
+//     },
+//     revalidate: 10, 
+//   }
+// }
+
+
+// ini untuk get query dari url
+Home.getInitialProps = async ({ query }) => {
+  // console.log(query)
+  let jadwal_dokter_today = await all_function.jadwal_dokter_today_home();
+  // const hehe = "ini dia"
+
+  return {query, jadwal_dokter_today : jadwal_dokter_today }
 }
 
 export default Home

server/database/index.js

@@ -3,13 +3,14 @@ const Sequelize = require('sequelize');
 const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
   host: dbConfig.HOST,
   dialect: dbConfig.dialect,
-  operatorsAliases: false,
+  operatorsAliases: 0,
   pool: {
     max: dbConfig.pool.max,
     min: dbConfig.pool.min,
     acquire: dbConfig.pool.acquire,
     idle: dbConfig.pool.idle
-  }
+  },
+  timezone: '+08:00'
 })
 const db = {}
 db.Sequelize = Sequelize
@@ -23,6 +24,7 @@ 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)
+db.jadwal_dokter = require('./model/jadwal_dokter.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'})
@@ -33,12 +35,16 @@ db.dokter.hasOne(db.login, {foreignKey: {name: 'id_dokter', allowNull: true}}, {
 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.pasien.hasMany(db.rekam_medis, {foreignKey: {name: 'id_pasien', allowNull: true}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
-db.rekam_medis.belongsTo(db.pasien, {foreignKey: {name: 'id_pasien', allowNull: false}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
+db.rekam_medis.belongsTo(db.pasien, {foreignKey: {name: 'id_pasien', allowNull: true}}, {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.dokter.hasMany(db.rekam_medis, {foreignKey: {name: 'id_dokter', allowNull: true}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
-db.rekam_medis.belongsTo(db.dokter, {foreignKey: {name: 'id_dokter', allowNull: false}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
+db.rekam_medis.belongsTo(db.dokter, {foreignKey: {name: 'id_dokter', allowNull: true}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
+
+// create one to many relations between dokter and jadwal_dokter
+db.dokter.hasMany(db.jadwal_dokter, {foreignKey: {name: 'id_dokter', allowNull: false}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
+db.jadwal_dokter.belongsTo(db.dokter, {foreignKey: {name: 'id_dokter', allowNull: false}}, {onDelete: 'CASCADE' , hooks: true , onUpdate: 'CASCADE'})
 
 
 module.exports = db

server/database/model/dokter.model.js

@@ -22,8 +22,9 @@ module.exports = (sequelize, Sequelize) => {
       type: Sequelize.STRING,
       allowNull: false
     },
-    jam_kerja:{
+    status : {
-      type: Sequelize.TEXT('long'),
+      type: Sequelize.STRING,
+      allowNull: false
     }
   },{
     freezeTableName: true,

server/database/model/jadwal_dokter.model.js

@@ -0,0 +1,27 @@
+module.exports = (sequelize, Sequelize) => {
+  const jadwal_dokter = sequelize.define('tb_jadwal_dokter', {
+    id_jadwal: {
+      type: Sequelize.INTEGER,
+      primaryKey: true,
+      autoIncrement: true
+    },
+    hari : {
+      type: Sequelize.STRING,
+      allowNull: false
+    },
+    jam_mulai : {
+      type: Sequelize.STRING,
+      allowNull: false
+    },
+    jam_selesai : {
+      type: Sequelize.STRING,
+      allowNull: false
+    }
+  }, {
+    timestamps: false,
+    freezeTableName: true,
+    tableName: 'tb_jadwal_dokter'
+  })
+
+  return jadwal_dokter
+}

server/database/model/pasien.model.js

@@ -15,7 +15,7 @@ module.exports = (sequelize, Sequelize) => {
       allowNull: false
     },
     tgl_lahir:{
-      type: Sequelize.DATE,
+      type: Sequelize.DATEONLY,
       allowNull: false
     },
     alamat:{

server/database/model/rekam_medis.model.js

@@ -6,29 +6,38 @@ module.exports = (sequelize, Sequelize) => {
       primaryKey: true,
       autoIncrement: true
     },
-    tanggal_perikas:{
+    tanggal_periksa:{
-      type: Sequelize.DATE,
+      type: Sequelize.DATEONLY,
+      allowNull: false
+    },
+    jam_periksa:{
+      type: Sequelize.TIME,
       allowNull: false
     },
     diagnosa:{
       type: Sequelize.TEXT("tiny"),
-      allowNull: false
+      allowNull: true,
+      defaultValue: null
     },
     keluhan:{
       type: Sequelize.TEXT("tiny"),
-      allowNull: false
+      allowNull: true,
+      defaultValue: null
     },
     keterangan:{
       type: Sequelize.TEXT("tiny"),
-      allowNull: false
+      allowNull: true,
+      defaultValue: null
     },
     tindakan:{
       type: Sequelize.TEXT("tiny"),
-      allowNull: false
+      allowNull: true,
+      defaultValue: null
     },
     obat : {
       type: Sequelize.TEXT("tiny"),
-      allowNull: false
+      allowNull: true,
+      defaultValue: null
     }
   },{
     freezeTableName: true,

server/index.js

@@ -46,10 +46,12 @@ app.prepare().then(() => {
   // import routes
   const login_router = require('./routes/login_router');
   const admin_router = require('./routes/admin_router');
+  const dokter_router = require('./routes/dokter_router');
 
   // use routes
   server.use('/api/login', login_router);
   server.use('/api/admin', admin_router);
+  server.use('/api/dokter', dokter_router);
 
   
 

server/routes/admin_router.js

@@ -1,14 +1,20 @@
 const express = require('express');
 const router = express.Router()
 const db = require('../database/index.js')
-const tb_admin = db.admin
+const md5 = require('md5');
+// const tb_admin = db.admin
 const tb_dokter = db.dokter
-// const tb_login = db.login
+const tb_login = db.login
+const tb_pasien = db.pasien
 const tb_tindakan = db.tindakan
 const tb_obat = db.obat
+const tb_jadwal_dokter = db.jadwal_dokter
+const tb_rekam_medis = db.rekam_medis
 const Op = db.Sequelize.Op
 
-const app = require('express')()
+var _ = require('underscore');
+
+// const app = require('express')()
 const basicAuth = require('express-basic-auth')
 
 const basicAuthMiddleware = basicAuth({
@@ -150,7 +156,7 @@ router.get('/obat', basicAuthMiddleware, async (req, res) => {
 
       obat = JSON.parse(obat.dataValues.history)
 
-      res.status(200).send({ status: true, data: obat})
+      res.status(200).send({ status: true, data: obat })
     } else {
       // console.log("ambil all obat")
       let obat = await tb_obat.findAll()
@@ -207,5 +213,523 @@ router.put('/obat', basicAuthMiddleware, async (req, res) => {
 })
 
 
+// create /dokter post request
+router.post('/dokter', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk dokter post")
+  try {
+    const nik = req.body.nik
+    let cek_dokter = await tb_dokter.findOne({
+      where: {
+        nik: nik
+      }
+    })
+
+    if (cek_dokter) {
+      return res.status(400).send({ status: false, message: `Dokter dengan NIK ${nik} sudah ada`, data: [cek_dokter.dataValues] })
+    }
+
+
+    // create dokter
+    const new_dokter = await tb_dokter.create({
+      nik: nik,
+      nama: req.body.nama,
+      alamat: req.body.alamat,
+      no_telp: req.body.no_telp,
+      status: "Aktif",
+      spesialis: req.body.spesialis,
+    })
+
+    await tb_login.create({
+      username: nik,
+      password: md5(nik),
+      role: "dokter",
+      id_dokter: nik
+    })
+
+    const jadwals = req.body.jadwal
+    // console.log(jadwal)
+    // loop the jadwal
+    for (let jadwal of jadwals) {
+      // console.log(jadwal)
+      await tb_jadwal_dokter.create({
+        id_dokter: nik,
+        hari: jadwal,
+        jam_mulai: req.body.jam_mulai,
+        jam_selesai: req.body.jam_selesai
+      })
+    }
+
+
+    res.status(200).send({ status: true, message: `Dokter ${req.body.nama} berhasil ditambahkan` })
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+
+// create /dokter get request
+router.get('/dokter', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk dokter get")
+  try {
+    let nik = req.query.nik
+    // if id is not null
+    if (nik) {
+      let dokter = await tb_dokter.findOne({
+        where: {
+          nik: nik
+        }
+      })
+
+      if (!dokter) {
+        return res.status(400).send({ status: false, message: `Dokter dengan NIK ${nik} tidak ditemukan` })
+      }
+
+      let data
+      if (req.query.detail == "jadwal") {
+        data = await tb_jadwal_dokter.findAll({
+          where: {
+            id_dokter: nik
+          }
+        })
+
+      } else {
+        data = dokter.dataValues
+      }
+
+      res.status(200).send({ status: true, data: data })
+    } else {
+      // console.log("ambil all dokter")
+      let dokter = await tb_dokter.findAll()
+      res.status(200).send({ status: true, data: dokter })
+    }
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+
+// create /dokter put request
+router.put('/dokter', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk dokter put")
+  try {
+    const nik = req.query.nik
+    const detail = req.query.detail
+    let dokter = await tb_dokter.findOne({
+      where: {
+        nik: nik
+      }
+    })
+
+    if (!dokter) {
+      return res.status(400).send({ status: false, message: `Dokter dengan NIK ${nik} tidak ditemukan` })
+    }
+
+    if (!detail || detail != "datanya") {
+      return res.status(400).send({ status: false, message: `Detail Tidak Diketahui` })
+    }
+
+    let message
+    if (detail == 'datanya') {
+      await dokter.update({
+        nama: req.body.nama,
+        alamat: req.body.alamat,
+        no_telp: req.body.no_telp,
+        spesialis: req.body.spesialis,
+      })
+      message = `Detail Dokter dengan ${nik} berhasil diedit`
+    }
+
+
+    res.status(200).send({ status: true, message: message })
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+// create /cek_jadwal get request
+router.get('/cek_jadwal', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk cek_jadwal get")
+  try {
+    const hari = req.query.hari
+    const jam = req.query.jam
+
+    if (!hari || !jam) {
+      return res.status(400).send({ status: false, message: `Hari dan Jam tidak diketahui` })
+    }
+
+    let jadwal = await tb_jadwal_dokter.findAll({
+      where: {
+        hari: hari,
+        jam_mulai: {
+          [Op.lte]: jam
+        },
+        jam_selesai: {
+          [Op.gte]: jam
+        }
+      },
+      include: {
+        model: tb_dokter,
+        attributes: ['nama', 'spesialis']
+      }
+    })
+    console.log(hari)
+    console.log(jam)
+    // cek if jadwal is empty
+    if (jadwal.length == 0) {
+      return res.status(400).send({ status: false, message: `Tidak ada jadwal pada hari ${hari} pada jam ${jam}`, data: [] })
+    }
+
+    console.log(jadwal, "ini jadwalnya")
+
+
+    res.status(200).send({ status: true, data: jadwal })
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+// create /pasien post request
+router.post('/pasien', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk pasien post")
+  try {
+    const nik = req.body.nik
+    const nama = req.body.nama
+    const jenis_kelamin = req.body.jenis_kelamin
+    const tgl_lahir = req.body.tgl_lahir
+    const alamat = req.body.alamat
+    const pekerjaan = req.body.pekerjaan
+    const golongan_darah = req.body.golongan_darah
+    const pendidikan = req.body.pendidikan
+    const no_telp = req.body.no_telp
+    const status_pernikahan = req.body.status_pernikahan
+    const nama_orang_tua_wali = req.body.nama_orang_tua_wali
+    const nama_pasangan = req.body.nama_pasangan
+
+    if (!nik || !nama || !jenis_kelamin || !tgl_lahir || !alamat || !pekerjaan || !golongan_darah || !pendidikan || !no_telp || !status_pernikahan || !nama_orang_tua_wali || !nama_pasangan) {
+      return res.status(400).send({ status: false, message: `Data tidak lengkap` })
+    }
+
+    let pasien = await tb_pasien.findOne({
+      where: {
+        nik: nik
+      }
+    })
+
+    if (pasien) {
+      return res.status(400).send({ status: false, message: `Pasien dengan NIK ${nik} sudah terdaftar`, data: [pasien.dataValues] })
+    }
+
+    let tanggal_periksa = req.body.tanggal_periksa
+    let id_dokter = req.body.id_dokter
+    let jam_periksa = req.body.jam_periksa
+
+    let data_all = req.body
+    let data_pasien, data_jadwal
+    // remove tanggal_periksa,  id_dokter, jam_periksa from req.body
+    data_pasien = _.omit(data_all, ['tanggal_periksa', 'id_dokter', 'jam_periksa'])
+    data_jadwal = _.omit(data_all, ['nik', 'nama', 'jenis_kelamin', 'tgl_lahir', 'alamat', 'pekerjaan', 'golongan_darah', 'pendidikan', 'no_telp', 'status_pernikahan', 'nama_orang_tua_wali', 'nama_pasangan'])
+
+
+    let new_pasien = await tb_pasien.create(data_pasien)
+    // add pasien nik to data_jadwal
+    data_jadwal.id_pasien = new_pasien.nik
+
+    await tb_rekam_medis.create(data_jadwal)
+    // console.log(data_pasien, "ini data pasien")
+    // console.log(data_jadwal, "ini data jadwal")
+
+    res.status(200).send({ status: true, message: `Pasien dengan NIK ${nik} berhasil ditambahkan\nDan tanggal pemeriksaan berhasil ditambahkan` })
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+
+})
+
+// create /pasien get request
+router.get('/pasien', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk pasien get")
+  try {
+    const cariannya = req.query.cariannya
+    const jadwal = req.query.jadwal
+    let response
+    if(jadwal && jadwal =="jadwal"){
+      const id = req.query.id
+      if(!id){
+        return res.status(400).send({ status: false, message: `id tidak diketahui` })
+      }
+      let cek_pasien = await tb_pasien.findOne({
+        where: {
+          nik: id
+        }
+      })
+      if(!cek_pasien){
+        return res.status(400).send({ status: false, message: `Pasien dengan id ${id} tidak ditemukan` })
+      }
+
+      response = await tb_rekam_medis.findAll({
+        where: {
+          id_pasien: id
+        },
+        include: [
+          {
+            model: tb_dokter,
+          },
+          {
+            model: tb_pasien,
+          }
+        ]
+      })
+
+
+    }
+    else if (cariannya) {
+      response = await tb_pasien.findAll({
+        where: {
+          // 
+          [Op.or]: [
+            {
+              nama: {
+                [Op.or]: [
+                  { [Op.like]: '%' + cariannya + '%' },
+                ]
+              }
+            },
+            {
+              nik:{
+                [Op.or]: [
+                  { [Op.like]: '%' + cariannya + '%' },
+                ]
+              }
+            }
+          ]
+        }
+      })
+    } else {
+      response = await tb_pasien.findAll()
+    }
+
+
+    res.status(200).send({ status: true, data: response })
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+// create /pasien put request
+router.put('/pasien', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk pasien put")
+  try {
+    const nik = req.query.nik
+
+    if (!nik || !req.body.nama || !req.body.jenis_kelamin || !req.body.tgl_lahir || !req.body.alamat || !req.body.pekerjaan || !req.body.golongan_darah || !req.body.pendidikan || !req.body.no_telp || !req.body.status_pernikahan || !req.body.nama_orang_tua_wali || !req.body.nama_pasangan) {
+      return res.status(400).send({ status: false, message: `Data tidak lengkap` })
+    }
+
+    let pasien = await tb_pasien.findOne({
+      where: {
+        nik: nik
+      }
+    })
+
+    if (!pasien) {
+      return res.status(400).send({ status: false, message: `Pasien dengan NIK ${nik} tidak terdaftar` })
+    }
+    
+    let datanya = req.body
+    // remove nik from datanya
+    datanya = _.omit(datanya, ['nik'])
+    // console.log(datanya, "ini data yang akan di update")
+    await tb_pasien.update(datanya, {
+      where: {
+        nik: nik
+      }
+    })
+
+    res.status(200).send({ status: true, message: `Data pasien dengan NIK ${nik} berhasil diubah` })
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+// create /jadwal_dokter get request
+router.get('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk jadwal get")
+  try {
+    let today_date = new Date();
+    let days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+    let hari_ini = days[today_date.getDay()];
+    let all_jadwal = await tb_jadwal_dokter.findAll({
+      where: {
+        hari: hari_ini
+      },
+      include: {
+        model: tb_dokter,
+        attributes: ['nama', 'spesialis']
+      }
+    })
+
+    res.status(200).send({ status: true, data: all_jadwal })
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+// create /jadwal_dokter post request
+router.post('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
+  try{
+    const data_jadwal = req.body
+    if(!data_jadwal.id_dokter || !data_jadwal.hari || !data_jadwal.jam_mulai || !data_jadwal.jam_selesai){
+      return res.status(400).send({ status: false, message: `Data tidak lengkap` })
+    }
+    let cek_dokter = await tb_dokter.findOne({
+      where: {
+        nik: data_jadwal.id_dokter
+      }
+    })
+    if(!cek_dokter){
+      return res.status(400).send({ status: false, message: `Dokter dengan id ${data_jadwal.id_dokter} tidak ditemukan` })
+    }
+    await tb_jadwal_dokter.create(data_jadwal)
+    res.status(200).send({ status: true, message: `Jadwal dokter dengan id ${data_jadwal.id_dokter} berhasil ditambahkan` })
+  }catch(err){
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+// create /jadwal_pasien get request
+router.get('/jadwal_pasien', basicAuthMiddleware, async (req, res) => {
+  console.log("sini untuk jadwal get")
+  try {
+    let today_date = new Date();
+    let dd = today_date.getDate();
+    let mm = today_date.getMonth() + 1;
+    let yyyy = today_date.getFullYear();
+    dd = dd < 10 ? '0' + dd : dd;
+    mm = mm < 10 ? '0' + mm : mm;
+    let today_date_format = yyyy + '-' + mm + '-' + dd;
+    let all_jadwal = await tb_rekam_medis.findAll({
+      where: {
+        tanggal_periksa: today_date_format
+      },
+      include: [
+        {
+          model: tb_dokter,
+          // attributes: ['nama', 'spesialis']
+        },
+        {
+          model: tb_pasien,
+          // attributes: ['nama', 'nik', 'tgl_lahir', 'golongan_darah']
+        }
+      ],
+      // attributes: ['tanggal_periksa', 'jam_periksa', "id_pasien"]
+    })
+
+    // calculate age
+
+    res.status(200).send({ status: true, data: all_jadwal })
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+// create /jadwal_pasien post request
+router.post('/jadwal_pasien', basicAuthMiddleware, async (req, res) => {
+  try {
+    const data = req.body
+    // console.log(data, "ini datanya")
+    if(!data.id_pasien && !data.tanggal_periksa && !data.jam_periksa && !data.id_dokter){
+      return res.status(400).send({ status: false, message: `Data tidak lengkap` })
+    }
+    // calculate age
+    await tb_rekam_medis.create(data)
+
+    let response = await tb_rekam_medis.findAll({
+      where: {
+        id_pasien : data.id_pasien
+      },
+      include: [
+        {
+          model: tb_pasien,
+        },
+        {
+          model: tb_dokter,
+        }
+      ]
+    })
+
+    res.status(200).send({ status: true, data: response })
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
+// create /jadwal_pasien put request
+router.put('/jadwal_pasien', basicAuthMiddleware, async (req, res) => {
+  try {
+    const id_rekam_medis = req.query.id
+
+    if (!id_rekam_medis || !req.body.id_pasien || !req.body.tanggal_periksa || !req.body.jam_periksa || !req.body.id_dokter) {
+      return res.status(400).send({ status: false, message: `Data tidak lengkap` })
+    }
+
+    let pasien = await tb_rekam_medis.findOne({
+      where: {
+        id_rekam_medis: id_rekam_medis
+      }
+    })
+
+    if (!pasien) {
+      return res.status(400).send({ status: false, message: `Data dengan id ${id_rekam_medis} tidak ada` })
+    }
+
+    let datanya = req.body
+    // remove id_pasien from datanya
+    datanya = _.omit(datanya, ['id_pasien'])
+    // console.log(datanya, "ini data yang akan di update")
+    await tb_rekam_medis.update(datanya, {
+      where: {
+        id_rekam_medis: id_rekam_medis
+      }
+    })
+
+    let response = await tb_rekam_medis.findAll({
+      where: {
+        id_pasien : req.body.id_pasien
+      },
+      include: [
+        {
+          model: tb_pasien,
+        },
+        {
+          model: tb_dokter,
+        }
+      ]
+    })
+
+    res.status(200).send({ status: true, message: `Data pasien dengan id ${id_rekam_medis} berhasil diubah` ,data : response})
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
 
 module.exports = router

server/routes/dokter_router.js

@@ -0,0 +1,374 @@
+const express = require('express');
+const router = express.Router()
+const db = require('../database/index.js')
+const md5 = require('md5');
+// const tb_admin = db.admin
+const tb_dokter = db.dokter
+const tb_login = db.login
+const tb_pasien = db.pasien
+const tb_tindakan = db.tindakan
+const tb_obat = db.obat
+const tb_jadwal_dokter = db.jadwal_dokter
+const tb_rekam_medis = db.rekam_medis
+const Op = db.Sequelize.Op
+var _ = require('underscore');
+
+const basicAuth = require('express-basic-auth');
+const { obat } = require('../database/index.js');
+
+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';
+}
+
+router.get('/', basicAuthMiddleware, async (req, res) => {
+  res.send({ status: true, message: 'connected to dokter' })
+})
+
+// create /jadwal_dokter get request
+router.get('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
+  try {
+    id = req.query.id
+
+    if (!id) {
+      return res.status(400).send({ status: false, message: 'id tidak boleh kosong' })
+    }
+
+    const response = await tb_jadwal_dokter.findAll({
+      where: {
+        id_dokter: id
+      }
+    })
+
+    res.send({ status: true, data: response })
+  } catch (error) {
+    res.send({ status: false, message: 'error' })
+  }
+})
+
+// create /jadwal_dokter post request
+router.post('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
+  try {
+    id = req.body.nik
+    hari = req.body.hari
+    jam_mulai = req.body.jam_mulai
+    jam_selesai = req.body.jam_selesai
+
+    if (!id || !hari || !jam_mulai || !jam_selesai) {
+      return res.status(400).send({ status: false, message: 'id, hari, jam_mulai, jam_selesai tidak boleh kosong' })
+    }
+
+    const cek_jadwal = await tb_jadwal_dokter.findOne({
+      where: {
+        id_dokter: id,
+        hari: hari
+      }
+    })
+
+    if (cek_jadwal) {
+      return res.status(400).send({ status: false, message: 'Jadwal sudah ada' })
+    }
+
+
+
+    const response = await tb_jadwal_dokter.create({
+      id_dokter: id,
+      hari: hari,
+      jam_mulai: jam_mulai,
+      jam_selesai: jam_selesai
+    })
+
+    res.send({ status: true, message: "Jadwal pada hari " + hari + " telah ditambahkan" })
+  } catch (error) {
+    res.send({ status: false, message: 'error' })
+  }
+})
+
+// create /jadwal_dokter put request
+router.put('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
+  try {
+    id = req.query.id
+    hari = req.body.hari
+    jam_mulai = req.body.jam_mulai
+    jam_selesai = req.body.jam_selesai
+
+    if (!id || !hari || !jam_mulai || !jam_selesai) {
+      return res.status(400).send({ status: false, message: 'id, hari, jam_mulai, jam_selesai tidak boleh kosong' })
+    }
+
+    const cek_data = await tb_jadwal_dokter.findOne({
+      where: {
+        id_dokter: id,
+        hari: hari
+      }
+    })
+
+    if (!cek_data) {
+      return res.status(400).send({ status: false, message: 'Jadwal tidak ditemukan' })
+    }
+
+    await tb_jadwal_dokter.update({
+      id_dokter: id,
+      hari: hari,
+      jam_mulai: jam_mulai,
+      jam_selesai: jam_selesai
+    }, {
+      where: {
+        hari: hari,
+      }
+    })
+    // console.log(id , hari, jam_mulai, jam_selesai, "ini id hari jam_mulai jam_selesai")
+
+    res.send({ status: true, message: `Jadwal pada hari ${hari} telah diubah` })
+  } catch (error) {
+    res.send({ status: false, message: 'error' })
+  }
+})
+
+// create /jadwal_dokter delete request
+router.delete('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
+  try {
+    id = req.query.id
+    hari = req.body.hari
+
+    if (!id || !hari) {
+      return res.status(400).send({ status: false, message: 'id, hari tidak boleh kosong' })
+    }
+
+    const cek_data = await tb_jadwal_dokter.findOne({
+      where: {
+        id_dokter: id,
+        hari: hari
+      }
+    })
+
+    if (!cek_data) {
+      return res.status(400).send({ status: false, message: 'Jadwal tidak ditemukan' })
+    }
+
+    await tb_jadwal_dokter.destroy({
+      where: {
+        id_dokter: id,
+        hari: hari,
+      }
+    })
+
+    res.send({ status: true, message: `Jadwal pada hari ${hari} telah dihapus` })
+  } catch (error) {
+    res.send({ status: false, message: 'error' })
+  }
+})
+
+// create /jadwal_ini_hari get request
+router.get('/jadwal_ini_hari', basicAuthMiddleware, async (req, res) => {
+  try {
+    id = req.query.id
+    let today_date = new Date();
+    let dd = today_date.getDate();
+    let mm = today_date.getMonth() + 1;
+    let yyyy = today_date.getFullYear();
+    dd = dd < 10 ? '0' + dd : dd;
+    mm = mm < 10 ? '0' + mm : mm;
+    let today_date_format = yyyy + '-' + mm + '-' + dd;
+
+    if (!id) {
+      return res.status(400).send({ status: false, message: 'id tidak boleh kosong' })
+    }
+    // console.log(today_date_format , "ini today_date_format");
+    const response = await tb_rekam_medis.findAll({
+      where: {
+        id_dokter: id,
+        tanggal_periksa: today_date_format
+      },
+      include: [
+        {
+          model: tb_pasien,
+        }
+      ]
+    })
+    // console.log(response , "ini response");
+
+    // res.send({ status: true, data: "ini rekam medis" })
+    res.send({ status: true, data: response })
+  } catch (error) {
+    res.send({ status: false, message: 'error' })
+  }
+})
+
+// create /cek_data_rekam_medis get request
+router.get('/cek_data_rekam_medis', basicAuthMiddleware, async (req, res) => {
+  try {
+    id = req.query.id
+    id_dokter = req.query.id_dokter
+    if (!id) {
+      return res.status(400).send({ status: false, message: 'id tidak boleh kosong' })
+    }
+    if (!id_dokter) {
+      return res.status(400).send({ status: false, message: 'id_dokter tidak boleh kosong' })
+    }
+
+    const response = await tb_rekam_medis.findOne({
+      where: {
+        id_rekam_medis: id,
+        id_dokter: id_dokter
+      },
+      include: [
+        {
+          model: tb_pasien,
+        },
+        {
+          model: tb_dokter,
+        }
+      ]
+    })
+
+    res.send({ status: true, data: response })
+  } catch (error) {
+    res.status(500).send({ status: false, message: 'error' })
+  }
+})
+
+// create /cek_obat get request
+router.get('/cek_obat', basicAuthMiddleware, async (req, res) => {
+  try {
+    id = req.query.id
+    if (!id) {
+      return res.status(400).send({ status: false, message: 'id tidak boleh kosong' })
+    }
+
+    const response = await tb_obat.findOne({
+      where: {
+        id_obat: id
+      }
+    })
+
+    res.send({ status: true, data: response })
+  } catch (error) {
+    res.status(500).send({ status: false, message: 'error' })
+  }
+})
+
+// create /rekam_medis_update put request
+router.put('/rekam_medis_update', basicAuthMiddleware, async (req, res) => {
+  try {
+    let id = req.query.id_rekam_medis
+    let id_dokter = req.query.id_dokter
+    let keluhan = req.body.keluhan
+    let diagnosa = req.body.diagnosa
+    let keterangan = req.body.keterangan
+    let obat = req.body.obat
+    let tindakan = req.body.tindakan
+
+    if (!id) {
+      return res.status(400).send({ status: false, message: 'id tidak boleh kosong' })
+    }
+    if (!id_dokter) {
+      return res.status(400).send({ status: false, message: 'id_dokter tidak boleh kosong' })
+    }
+
+    if (!keluhan && !diagnosa && !keterangan && !obat && !tindakan) {
+      return res.status(400).send({ status: false, message: 'keluhan, diagnosa, keterangan, obat, tindakan tidak boleh kosong' })
+    }
+
+    await tb_rekam_medis.update(
+      {
+        keluhan: keluhan,
+        diagnosa: diagnosa,
+        keterangan: keterangan,
+        obat: JSON.stringify(obat),
+        tindakan: JSON.stringify(tindakan)
+      },
+      {
+        where: {
+          id_rekam_medis: id,
+          id_dokter: id_dokter
+        }
+      }
+    )
+
+    res.status(200).send({ status: true, message: 'data berhasil diupdate' })
+
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({ status: false, message: 'error' })
+  }
+})
+
+// create /cari_rekam_medis get request
+router.get('/cari_rekam_medis', basicAuthMiddleware, async (req, res) => {
+  try {
+    data1 = req.query.data
+    data2 = req.query.data2
+    id_dokter = req.query.id_dokter
+    if (!data1 && !data2 && !id_dokter) {
+      return res.status(400).send({ status: false, message: 'data tidak boleh kosong' })
+    }
+
+    const response = await tb_rekam_medis.findAll({
+      where: {
+        id_dokter: id_dokter,
+      },
+      include: [
+        {
+          model: tb_pasien,
+          where: {
+            [Op.or]: [
+              {
+                nama: {
+                  [Op.or]: [
+                    { [Op.like]: '%' + data1 + '%' },
+                    { [Op.like]: '%' + data2 + '%' }
+                  ]
+                }
+              },
+              {
+                nik:{
+                  [Op.or]: [
+                    { [Op.like]: '%' + data1 + '%' },
+                    { [Op.like]: '%' + data2 + '%' }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    })
+
+    res.status(200).send({ status: true, data: response })
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({ status: false, message: 'error' })
+  }
+})
+
+// create /tindakan get request
+router.get('/tindakan', basicAuthMiddleware, async (req, res) => {
+  try {
+    id = req.query.id
+    if (!id) {
+      return res.status(400).send({ status: false, message: 'id tidak boleh kosong' })
+    }
+    
+    const response = await tb_tindakan.findOne({
+      where: {
+        id_tindakan: id
+      }
+    })
+
+    // console.log(response, " ini tindakannya");
+    res.send({ status: true, data: response })
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({ status: false, message: 'error' })
+  }
+})
+
+module.exports = router

server/routes/login_router.js

@@ -5,6 +5,7 @@ const db = require('../database/index.js')
 const tb_admin = db.admin
 const tb_dokter = db.dokter
 const tb_login = db.login
+const tb_jadwal_dokter = db.jadwal_dokter
 const Op = db.Sequelize.Op
 
 var ironSession = require("iron-session/express").ironSession;
@@ -116,4 +117,39 @@ router.get('/', session, async (req, res) => {
   }
 })
 
+// create /logout get request
+router.get('/logout', session, async (req, res) => {
+  try {
+    // console.log(req.session.user);
+    req.session.destroy();
+    res.send({ status: true, message: "logout success" })
+  } catch (error) {
+    res.status(500).send({ status: false, message: error.message })
+  }
+})
+
+// create /jadwal_dokter get request
+router.get('/jadwal_dokter',  async (req, res) => {
+  console.log("sini untuk jadwal get")
+  try {
+    let today_date = new Date();
+    let days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+    let hari_ini = days[today_date.getDay()];
+    let all_jadwal = await tb_jadwal_dokter.findAll({
+      where: {
+        hari: hari_ini
+      },
+      include: {
+        model: tb_dokter,
+        attributes: ['nama', 'spesialis']
+      }
+    })
+
+    res.status(200).send({ status: true, data: all_jadwal })
+
+  } catch (err) {
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
 module.exports = router