Merge pull request #14 from GesangPJ/test

Refactor codes, add more pages protection

Author: GesangPJ

.env.example

@@ -9,7 +9,7 @@ NEXTAUTH_SECRET= #use openssl to generate key, base64 recomended
 BASEPATH=
 NEXT_PUBLIC_APP_URL=http://localhost:3000${BASEPATH}
 
-# PRISMA MYSQL CONNECTION
+# PRISMA CONNECTION
 DATABASE_URL=  #<mysql or postgresql>://<account name>:<password>@localhost:<port>/<databasename>
 
 #Vercel PostgreSQL
@@ -22,3 +22,6 @@ POSTGRES_USER=
 POSTGRES_HOST=
 POSTGRES_PASSWORD=
 POSTGRES_DATABASE=
+
+#Admin KEY
+ADMIN_KEY=

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "Kasbon-Manager",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "license": "Commercial",
   "private": true,
   "scripts": {

package.json

@@ -1,8 +1,29 @@
+'use client'
 
-import StatusBayar from "@/views/status-bayar/StatusBayar"
+import { useEffect } from "react"
+
+import { useRouter } from "next/navigation"
 
+import { useSession } from "next-auth/react"
+
+import StatusBayar from "@/views/status-bayar/StatusBayar"
 
 const BayarKasbon = () =>{
+  const {data: session, status} = useSession()
+  const router = useRouter()
+
+  useEffect(()=>{
+    if(status==='loading') return
+
+    if(!session){
+      router.push('/error/401')
+    }
+  },[session, status, router])
+
+  if(!session){
+    return null
+  }
+
   return(
     <div>
       <h1>Halaman Status Bayar Kasbon</h1>

src/app/dashboard/account-settings/page.jsx

@@ -1,8 +1,29 @@
+'use client'
 
+import { useEffect } from "react"
+
+import { useRouter } from "next/navigation"
+
+import { useSession } from "next-auth/react"
 
 import PrintLaporan from "@/views/print-laporan/PrintLaporan"
 
 const CetakKasbon = () =>{
+  const {data:session, status} = useSession()
+  const router = useRouter()
+
+  useEffect(()=>{
+    if (status === 'loading') return
+
+    if(!session){
+      router.push('/error/401')
+    }
+  }, [session, status, router])
+
+  if(!session){
+    return null
+  }
+
   return(
     <div>
       <div>

src/app/dashboard/bayar/page.jsx

@@ -1,22 +1,40 @@
-import dynamic from 'next/dynamic'
+'use client'
 
-import TabelAkunAdmin from '@/views/tabel-akun/TabelAdmin'
+import { useEffect } from "react"
+
+import { useRouter } from "next/navigation"
 
-//Membuat komponen yang diimport menjadi dynamic page
-const TabelAkun = dynamic(()=>import('@views/tabel-akun/TabelAkun'),  {ssr:false})
+import { useSession } from "next-auth/react"
+
+import TabelAkunAdmin from '@/views/tabel-akun/TabelAdmin'
 
+import TabelAkun from "@/views/tabel-akun/TabelAkun"
 
 const DaftarAkun = () => {
+  const {data: session, status} = useSession()
+  const router = useRouter()
+
+  useEffect(()=>{
+    if (status === 'loading') return
+
+    if(!session){
+      router.push('/error/401')
+    }
+  }, [session, status, router])
+
+  if(!session){
+    return null
+  }
 
   return (
-<div className="">
+<div>
       <h1>Tabel Daftar Akun</h1>
       <br />
-      <div className="">
+      <div>
         <TabelAkun/>
       </div>
       <br />
-      <div className="">
+      <div>
         <TabelAkunAdmin/>
       </div>
       <br />

src/app/dashboard/cetak/page.jsx

@@ -2,6 +2,10 @@
 
 import { useState, useEffect, useRef } from 'react'
 
+import { useRouter } from 'next/navigation'
+
+import { useSession } from 'next-auth/react'
+
 import Card from '@mui/material/Card'
 import Grid from '@mui/material/Grid'
 import Button from '@mui/material/Button'
@@ -15,20 +19,32 @@ import FormControl from '@mui/material/FormControl'
 import Alert from '@mui/material/Alert'
 
 const RegistrasiAkun = () => {
-  const [status, setStatus] = useState(null)
+  const {data: session, status} = useSession()
+  const [alert, setAlert] = useState(null)
   const [message, setMessage] = useState('')
   const formRef = useRef(null)
+  const router = useRouter()
 
   useEffect(() => {
-    if (status) {
+    if (status === 'loading') return // Jangan lakukan apa pun saat sesi sedang dimuat
+
+    if (!session) {
+      router.push('/error/401')
+    }
+
+    if (alert) {
       const timer = setTimeout(() => {
-        setStatus(null)
+        setAlert(null)
         setMessage('')
       }, 5000)
 
       return () => clearTimeout(timer)
     }
-  }, [status])
+  }, [session, status, router, alert])
+
+  if (!session) {
+    return null
+  }
 
   const handleSubmit = async (event) => {
     event.preventDefault()
@@ -53,15 +69,15 @@ const RegistrasiAkun = () => {
       const result = await response.json()
 
       if (response.ok) {
-        setStatus('success')
+        setAlert('success')
         setMessage('Akun berhasil didaftarkan!')
         formRef.current.reset() // Kosongkan form setelah berhasil didaftarkan
       } else {
-        setStatus('error')
+        setAlert('error')
         setMessage(result.error || 'Terjadi kesalahan saat mendaftarkan akun.')
       }
     } catch (error) {
-      setStatus('error')
+      setAlert('error')
       setMessage('Terjadi kesalahan saat mendaftarkan akun.')
     }
   }
@@ -71,8 +87,8 @@ const RegistrasiAkun = () => {
       <Card>
         <CardHeader title='Registrasi Akun' />
         <CardContent>
-          {status && (
-            <Alert severity={status} style={{ marginBottom: '1rem' }}>
+          {alert && (
+            <Alert severity={alert} style={{ marginBottom: '1rem' }}>
               {message}
             </Alert>
           )}

src/app/dashboard/daftar-akun/page.jsx

@@ -1,7 +1,29 @@
+'use client'
+
+import { useEffect } from "react"
+
+import { useRouter } from "next/navigation"
+
+import { useSession } from "next-auth/react"
 
 import StatusRequest from "@/views/status-request/StatusRequest"
 
 const RequestKasbon = () =>{
+  const {data:session,status} = useSession()
+  const router = useRouter()
+
+  useEffect(()=>{
+    if(status === 'loading') return
+
+    if(!session){
+      router.push('/error/401')
+    }
+  },[session,status,router])
+
+  if(!session){
+    return null
+  }
+
   return(
     <div>
       <h1>Status Request Kasbon</h1>

src/app/dashboard/kasbon/page.jsx

@@ -9,7 +9,6 @@ import { useSession } from 'next-auth/react'
 import ResetPasswordKaryawan from "@/views/reset-password/resetpassword-karyawan"
 import ResetPasswordAdmin from '@/views/reset-password/resetpassword-admin'
 
-
 const ResetPasswordAkun = () =>{
   const { data: session, status } = useSession()
   const router = useRouter()

src/app/dashboard/laporan/page.jsx

@@ -2,6 +2,8 @@
 
 import { useState, useEffect, useRef } from 'react'
 
+import { useRouter } from 'next/navigation'
+
 import { useSession } from 'next-auth/react'
 
 import Card from '@mui/material/Card'
@@ -17,29 +19,40 @@ import InputLabel from '@mui/material/InputLabel'
 import FormControl from '@mui/material/FormControl'
 
 const TambahKasbon = () =>{
-  const { data: session } = useSession()
-  const [status, setStatus] = useState(null)
+  const { data: session, status } = useSession()
+  const [alert, setAlert] = useState(null)
   const [message, setMessage] = useState('')
   const formRef = useRef(null)
+  const router = useRouter()
 
   useEffect(() => {
-    if (status) {
+    if(status === 'loading') return
+
+    if(!session){
+      router.push('/error/401')
+    }
+
+    if (alert) {
       const timer = setTimeout(() => {
-        setStatus(null)
+        setAlert(null)
         setMessage('')
       }, 5000)
 
       return () => clearTimeout(timer)
     }
-  }, [status])
+  }, [alert, session, status, router])
+
+  if(!session){
+    return null
+  }
 
   const handleSubmit = async (event) => {
     event.preventDefault()
     const data = new FormData(event.target)
 
     // Validasi form sebelum mengirimkan
   if (!data.get('jumlah') || !data.get('keterangan') || !data.get('metode')) {
-    setStatus('error')
+    setAlert('error')
     setMessage('Semua bidang harus diisi.')
 
     return
@@ -64,15 +77,15 @@ const TambahKasbon = () =>{
       const result = await response.json()
 
       if (response.ok) {
-        setStatus('success')
+        setAlert('success')
         setMessage('Permintaan Kasbon berhasil dikirim!')
         formRef.current.reset() // Kosongkan form setelah berhasil didaftarkan
       } else {
-        setStatus('error')
+        setAlert('error')
         setMessage(result.error || 'Terjadi kesalahan saat mengirim data permintaan kasbon.')
       }
     } catch (error) {
-      setStatus('error')
+      setAlert('error')
       setMessage('Terjadi kesalahan saat mengirim data.')
     }
   }
@@ -82,8 +95,8 @@ const TambahKasbon = () =>{
       <Card>
         <CardHeader title='Form Permintaan Kasbon' />
         <CardContent>
-          {status && (
-            <Alert severity={status} style={{ marginBottom: '1rem' }}>
+          {alert && (
+            <Alert severity={alert} style={{ marginBottom: '1rem' }}>
               {message}
             </Alert>
           )}