complete changes on admin and slight changes on page routes loading

components/admin/appBar.js

@@ -222,6 +222,7 @@ function AppBarAdmin(props) {
 
   function handleMenuRoute(menu){
     // console.log(menu + " sini menunya di appbar")
+    props.toRoute()
     Router.push(menu)
   }
 

components/admin/tabelJadwalDokter.js

@@ -103,6 +103,7 @@ function TabelJadwalDokter(props) {
   const jamSelesaiInputRef = useRef();
   const [jamMulai, setJamMulai] = useState(null);
   const [jamSelesai, setJamSelesai] = useState(null);
+  const [status, setStatus] = useState('');
 
   useEffect(() => {
     setHari(props.hari_nya)
@@ -141,20 +142,22 @@ function TabelJadwalDokter(props) {
 
       await MySwal.fire({
         title: 'Yakin ?',
-        text: `Jadwal Pada Hari ${hari} akan ditambahkan ke dokter dengan nik ${nik}`,
+        text: (status == 'tambah') ? `Jadwal Pada Hari ${hari} akan ditambahkan ke dokter dengan nik ${nik}` : `Jadwal Pada Hari ${hari} akan diubah ke dokter dengan nik ${nik}`,
         icon: 'info',
         showCancelButton: true,
         confirmButtonColor: '#3085d6',
         cancelButtonColor: '#d33',
-        confirmButtonText: 'Ya, tambahkan!'
+        confirmButtonText: (status == 'tambah') ? 'Ya, tambahkan!' : 'Ya, ubah!',
       }).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',
+              method: (status == 'tambah') ? 'POST' : 'PUT',
               headers: {
                 'Content-Type': 'application/json',
                 'allow-cors-origin': '*',
@@ -210,6 +213,7 @@ function TabelJadwalDokter(props) {
             () => {
               setHari(props.harinya[i])
               setOpenDialog(true)
+              setStatus("tambah")
             }
           }>
             <ModeEditIcon />
@@ -226,7 +230,21 @@ function TabelJadwalDokter(props) {
           <TableCell>{props.dataJadwal[j].jam_mulai}</TableCell>
           <TableCell>{props.dataJadwal[j].jam_selesai}</TableCell>
           <TableCell>
-            <IconButton color="success">
+            <IconButton color="success" 
+              onClick={
+                () => {
+                  setHari(props.harinya[i])
+                  let today = new Date()
+                  let jam_mulai_new = new Date(today.getFullYear(), today.getMonth(), today.getDate(), props.dataJadwal[j].jam_mulai.split(":")[0], props.dataJadwal[j].jam_mulai.split(":")[1])
+                  let jam_selesai_new = new Date(today.getFullYear(), today.getMonth(), today.getDate(), props.dataJadwal[j].jam_selesai.split(":")[0], props.dataJadwal[j].jam_selesai.split(":")[1])
+                  
+                  setJamMulai(jam_mulai_new)
+                  setJamSelesai(jam_selesai_new)
+                  setOpenDialog(true)
+                  setStatus("edit")
+                }
+              }
+            >
               <ModeEditIcon />
             </IconButton>
             <IconButton color="error">
@@ -272,6 +290,7 @@ function TabelJadwalDokter(props) {
                 label="Jam Mulai"
                 value={jamMulai}
                 onChange={(newValue) => {
+                  console.log(newValue, "ini new value")
                   setJamMulai(newValue);
                 }}
                 renderInput={(params) => <TextField {...params} />}
@@ -296,7 +315,9 @@ function TabelJadwalDokter(props) {
         </DialogContent>
         <DialogActions>
           <Button variant="outlined" type="submit" color="primary">
-            Tambah
+            {
+              status == "tambah" ? "Tambah" : "Edit"
+            }
           </Button>
 
         </DialogActions>

components/before_login/body.js

@@ -1,5 +1,5 @@
 
-import { useRef, useState } from "react";
+import { useRef, useState ,useEffect } from "react";
 import { useRouter } from "next/router";
 
 
@@ -55,18 +55,15 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
   }
 }));
 
-// const useStyles = makeStyles({
-//   table: {
-//     minWidth: 650,
-//     "& .MuiTableCell-root": {
-//       borderLeft: "1px solid rgba(224, 224, 224, 1)"
-//     }
-//   }
-// });
 
 export default function GridIndex(props) {
-  // console.log(props)
+  console.log(props)
-  const [errornya , setError] = useState(props.errornya)
+  const [errornya, setError] = useState(props.errornya)
+  const [jadwal_dokter, setJadwalDokter] = useState(false);
+
+  useEffect(() => {
+    setJadwalDokter(props.jadwal_dokter)
+  },[props.jadwal_dokter])
 
   if (errornya == true) {
     MySwal.fire({
@@ -121,7 +118,7 @@ export default function GridIndex(props) {
         if (role == 'Admin') {
           // redirect to dashboard
           await router.replace('/admin');
-        }else if (role == 'Dokter') {
+        } else if (role == 'Dokter') {
           // redirect to dashboard
           await router.replace('/dokter');
         }
@@ -189,16 +186,32 @@ export default function GridIndex(props) {
                     </TableHead>
                     <TableBody>
                       {
-                        props.jadwal_dokter.map((jadwal, index) => {
+                        // (jadwal_dokter == false)
-                          return (
+                        //   ?
-                            <TableRow key={index}>
+                        //   <TableRow>
-                              <TableCell>{jadwal.tb_dokter.nama}</TableCell>
+                        //     <TableCell colSpan={4} align="center">
-                              <TableCell>{jadwal.tb_dokter.spesialis}</TableCell>
+                        //       Masalah Dengan Server
-                              <TableCell>{jadwal.jam_mulai}</TableCell>
+                        //     </TableCell>
-                              <TableCell>{jadwal.jam_selesai}</TableCell>
+                        //   </TableRow>
+                        //   :
+                          (jadwal_dokter.length > 0)
+                            ?
+                            jadwal_dokter.map((jadwal, index) => {
+                              return (
+                                <TableRow key={index}>
+                                  <TableCell>{jadwal.tb_dokter.nama}</TableCell>
+                                  <TableCell>{jadwal.tb_dokter.spesialis}</TableCell>
+                                  <TableCell>{jadwal.jam_mulai}</TableCell>
+                                  <TableCell>{jadwal.jam_selesai}</TableCell>
+                                </TableRow>
+                              )
+                            })
+                            :
+                            <TableRow>
+                              <TableCell colSpan={4} align="center">
+                                Tidak Ada Jadwal Praktek
+                              </TableCell>
                             </TableRow>
-                          )
-                        })
                       }
                     </TableBody>
                   </Table>

pages/admin/data-dokter.js

@@ -379,7 +379,13 @@ function DataDokterPage(props) {
       <Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBarAdmin menu="Dokter" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
+        <AppBarAdmin menu="Dokter" backdrop={backdrop} sweetalertload={sweetAlertLoading} 
+          toRoute={
+            () => {
+              setBackdrop(true);
+            }
+          }
+        />
         <Box component="main" sx={{ flexGrow: 1, p: 3 }} >
           <DrawerHeader />
           <Grid container spacing={4}>

pages/admin/data-obat.js

@@ -593,7 +593,7 @@ function DataObatPage(props) {
   }
 
   return (
-    <div>
+    <>
       <BootstrapDialog
         onClose={handleCloseModalEdit}
         aria-labelledby="customized-dialog-title"
@@ -770,7 +770,13 @@ function DataObatPage(props) {
       <Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBarAdmin menu="Obat" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
+        <AppBarAdmin menu="Obat" backdrop={backdrop} sweetalertload={sweetAlertLoading} 
+          toRoute={
+            () => {
+              setBackdrop(true);
+            }
+          }
+        />
         <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
           <DrawerHeader />
           <Grid container spacing={4}>
@@ -916,7 +922,7 @@ function DataObatPage(props) {
           </Grid>
         </Box>
       </Box>
-    </div>
+    </>
   );
 }
 

pages/admin/data-pasien.js

@@ -641,7 +641,13 @@ function DataPasienPage(props) {
 
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBarAdmin menu="Pasien" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
+        <AppBarAdmin menu="Pasien" backdrop={backdrop} sweetalertload={sweetAlertLoading} 
+          toRoute={
+            () => {
+              setBackdrop(true);
+            }
+          }
+        />
         <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
           <DrawerHeader />
           <Grid container spacing={4}>
@@ -1184,7 +1190,7 @@ function DataPasienPage(props) {
                             })
                             :
                             <TableRow>
-                              <TableCell colSpan={5} align="center">
+                              <TableCell colSpan={7} align="center">
                                 Tiada Jadwal Pasien
                               </TableCell>
                             </TableRow>

pages/admin/data-tindakan.js

@@ -44,6 +44,52 @@ import IconButton from '@mui/material/IconButton';
 import ModeEditIcon from '@mui/icons-material/ModeEdit';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 
+// for dialog
+import PropTypes from 'prop-types';
+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';
+
+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 StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -116,7 +162,7 @@ function TindakanPage(props) {
   // delete tindakan
   async function delete_tindakan(id) {
     // console.log(id, "ini id yang akan di delete")
-    try{
+    try {
       const url = process.env.HTTP_URL + "/api/admin/tindakan?id=" + id
       console.log(url, "ini url yang akan di delete")
       // create fetch post request
@@ -128,7 +174,7 @@ function TindakanPage(props) {
           'crossDomain': true,
           'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
         },
-        
+
       })
       // get response
       const data = await response.json()
@@ -139,12 +185,12 @@ function TindakanPage(props) {
         toast.success(data.message)
         Router.replace(Router.asPath)
         // return true
-      }else{
+      } else {
         // create toast
         toast.error(data.message)
         // return false
       }
-    }catch(err){
+    } catch (err) {
       console.log(err)
       toast.error("Terjadi kesalahan pada server")
     }
@@ -175,7 +221,7 @@ function TindakanPage(props) {
         if (!response) {
           // focus to input
           tindakanInputRef.current.focus();
-        }else{
+        } else {
           // clear input
           tindakanInputRef.current.value = "";
           Router.replace(Router.asPath);
@@ -188,7 +234,7 @@ function TindakanPage(props) {
   }
 
   // before delete tindakan
-  async function deleteTindakan(id,nama){
+  async function deleteTindakan(id, nama) {
     console.log(id, "ini id yang akan di hapus")
     await setSweetAlertLoading(true);
     await MySwal.fire({
@@ -212,13 +258,132 @@ function TindakanPage(props) {
     await setSweetAlertLoading(false);
   }
 
+  const [openDialog, setOpenDialog] = useState(false);
+  const [idEdit, setIdEdit] = useState(null);
+  const tindakanEditInputRef = useRef();
+  const [tindakanEdit, setTindakanEdit] = useState(null);
+  const [periksaTindakanEdit, setPeriksaTindakanEdit] = useState(null);
+
+  const editTindakan = async (e) => {
+    e.preventDefault();
+    if(tindakanEdit == periksaTindakanEdit){
+      toast.error("Tiada Perubahan")
+      // focus input
+      tindakanEditInputRef.current.focus();
+      return
+    }else{
+      setSweetAlertLoading(true);
+      setOpenDialog(false);
+      await MySwal.fire({
+        title: 'Yakin ?',
+        text: `Anda akan mengubah detail Tindakan ${periksaTindakanEdit} ke ${tindakanEdit}`,
+        icon: 'info',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Ya, Ubah!',
+        cancelButtonText: 'Batal',
+      }).then(async (result) => {
+        if (result.value) {
+          setBackdrop(true);
+          // await 4 sec
+          try {
+            const url = process.env.HTTP_URL + "/api/admin/tindakan?id=" + idEdit
+            // create fetch post request
+            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({
+                tindakan: tindakanEdit
+              })
+            })
+
+            // get response
+            const data = await response.json()
+            if( response.status === 200 ){
+              // create toast
+              toast.success(data.message)
+              Router.replace(Router.asPath)
+            }else{
+              // create toast
+              toast.error(data.message)
+            }
+
+          } catch (error) {
+            toast.error("Terjadi kesalahan pada server")
+            console.log(error)
+          }
+
+        } else {
+          setOpenDialog(true);
+        }
+      })
+
+      setBackdrop(false);
+      setSweetAlertLoading(false);
+    }
+  }
+
   return (
-    <div>
+    <>
       <ToastContainer position={toast.POSITION.TOP_CENTER} transition={Zoom} autoClose={2000} Bounce={Bounce} theme="colored" />
       <Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
+
+      <BootstrapDialog
+        aria-labelledby="customized-dialog-title"
+        open={openDialog}
+        component="form"
+        onSubmit={editTindakan}
+        fullWidth={true}
+      >
+        <BootstrapDialogTitle id="customized-dialog-title"
+          onClose={
+            () => {
+              setOpenDialog(false);
+            }
+          }
+        >
+          Edit Tindakan
+        </BootstrapDialogTitle>
+        <DialogContent dividers align="center">
+          <TextField
+            id="tindakanEditTextField"
+            value={tindakanEdit}
+            inputRef={tindakanEditInputRef}
+            label="Tindakan "
+            onChange={(e) => {
+              setTindakanEdit(e.target.value);
+            }}
+            placeholder="Masukkan Tindakan "
+            sx={{ width: "85%", boxShadow: 10 }}
+            required
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button 
+            variant="outlined"
+            color="primary"
+            type="submit"
+          >
+            Simpan Perubahan
+          </Button>
+        </DialogActions>
+      </BootstrapDialog>
+
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBarAdmin menu="Tindakan" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
+        <AppBarAdmin menu="Tindakan" backdrop={backdrop} sweetalertload={sweetAlertLoading}
+          toRoute={
+            () => {
+              setBackdrop(true);
+            }
+          }
+        />
         <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
           <DrawerHeader />
           <Grid container spacing={2}>
@@ -276,34 +441,50 @@ function TindakanPage(props) {
                         <StyledTableCell sx={{
                           width: "30%",
                         }}>Aksi</StyledTableCell>
-                        {/* <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
-                        <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
-                        <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell> */}
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {props.tindakan.map((row) => (
+                      {
-                        <TableRow
+                        (props.tindakan.length > 0)
-                          key={row.id_tindakan}
+                          ?
-                        // sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                          props.tindakan.map((row) => (
-                        >
+                            <TableRow
-                          <TableCell component="th" scope="row">
+                              key={row.id_tindakan}
-                            {row.nama_tindakan}
+                            // sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                          </TableCell>
+                            >
-                          <TableCell>
+                              <TableCell component="th" scope="row">
-                            <IconButton  size="small"  color="primary"> 
+                                {row.nama_tindakan}
-                              <ModeEditIcon />
+                              </TableCell>
-                            </IconButton>
+                              <TableCell>
-                            <IconButton  size="small" color="error" onClick={
+                                <IconButton size="small" color="primary"
-                              () => {
+                                  onClick={
-                                deleteTindakan(row.id_tindakan, row.nama_tindakan)
+                                    () => {
-                              }
+                                      setOpenDialog(true);
-                            } > 
+                                      setIdEdit(row.id_tindakan);
-                              <DeleteForeverIcon />
+                                      setTindakanEdit(row.nama_tindakan);
-                            </IconButton>
+                                      setPeriksaTindakanEdit(row.nama_tindakan);
-                          </TableCell>
+                                    }
-                        </TableRow>
+                                  }
-                      ))}
+                                >
+                                  <ModeEditIcon />
+                                </IconButton>
+                                <IconButton size="small" color="error" onClick={
+                                  () => {
+                                    deleteTindakan(row.id_tindakan, row.nama_tindakan)
+                                  }
+                                } >
+                                  <DeleteForeverIcon />
+                                </IconButton>
+                              </TableCell>
+                            </TableRow>
+                          ))
+                          :
+                          <TableRow>
+                            <TableCell colSpan={2}>
+                              Tiada Data
+                            </TableCell>
+                          </TableRow>
+                      }
                     </TableBody>
                   </Table>
                 </TableContainer>
@@ -318,7 +499,7 @@ function TindakanPage(props) {
           </Grid>
         </Box>
       </Box>
-    </div>
+    </>
   );
 }
 

pages/admin/index.js

@@ -18,6 +18,11 @@ import AppBarAdmin from '../../components/admin/appBar';
 import Backdrop from '@mui/material/Backdrop';
 import CircularProgress from '@mui/material/CircularProgress';
 
+// 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";
@@ -55,7 +60,9 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 
 function AdminIndexPage() {
   // console.log(localStorage.getItem("user_data"))
-  const [backdrop, setBackdrop] = useState(false);
+
+  const [backdrop, setBackdrop] = useState(false); //this is for backdrop
+  const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
 
   // async function cek_user(){
   //   setBackdrop(true);
@@ -67,12 +74,18 @@ function AdminIndexPage() {
   // cek_user()
 
   return (
-    <div>
+    <>
       {/* <ThemeProvider theme={theme}>  */}
       <Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBarAdmin menu="Home" />
+        <AppBarAdmin menu="Home" backdrop={backdrop} sweetalertload={sweetAlertLoading} 
+          toRoute={
+            () => {
+              setBackdrop(true);
+            }
+          }
+        />
         <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
           <DrawerHeader />
           <Grid container spacing={2}>
@@ -192,7 +205,7 @@ function AdminIndexPage() {
         </Box>
       </Box>
       {/* </ThemeProvider> */}
-    </div>
+    </>
   );
 }
 

server/routes/admin_router.js

@@ -105,6 +105,37 @@ router.delete('/tindakan', basicAuthMiddleware, async (req, res) => {
   }
 })
 
+// create /tindakan put request
+router.put('/tindakan', basicAuthMiddleware, async (req, res) => {
+  try{
+    const id = req.query.id
+    const tindakan = req.body.tindakan
+    if (!id) {
+      return res.status(400).send({ status: false, message: `id tidak boleh kosong` })
+    }
+
+    let cek_tindakan = await tb_tindakan.findOne({
+      where: {
+        id_tindakan: id
+      }
+    })
+
+    if (!cek_tindakan) {
+      return res.status(400).send({ status: false, message: `Tindakan dengan id ${id} tidak ditemukan` })
+    }
+
+    await cek_tindakan.update({
+      nama_tindakan: tindakan
+    })
+
+    res.status(200).send({ status: true, message: `Tindakan dengan id ${id} berhasil diubah` })
+
+  }catch(err){
+    console.log(err)
+    res.status(500).send({ status: false, message: "internal server error" })
+  }
+})
+
 // create /obat post request
 router.post('/obat', basicAuthMiddleware, async (req, res) => {
   console.log("sini untuk obat post")
@@ -611,6 +642,34 @@ router.post('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
   }
 })
 
+// create /jadwal_dokter put request
+router.put('/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.update(data_jadwal, {
+      where: {
+        id_dokter: data_jadwal.id_dokter,
+        hari: data_jadwal.hari
+      }
+    })
+    res.status(200).send({ status: true, message: `Jadwal dokter dengan NIK ${data_jadwal.id_dokter} berhasil diubah` })
+  }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")