Environment setup

Dockerfile

@@ -17,7 +17,7 @@ FROM base AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-RUN npm run build
+RUN npm run build:prod
 
 # 3. Production image, copy all the files and run next
 FROM base AS runner

loadEnv.js

@@ -0,0 +1,16 @@
+const fs = require('fs');
+const dotenv = require('dotenv');
+const env = process.argv[2] || 'production'; // Default to production
+
+const envFilePath = `.env.${env}`;
+const localEnvFilePath = `${envFilePath}.local`;
+
+if (fs.existsSync(localEnvFilePath)) {
+  console.log(`Loading environment variables from ${localEnvFilePath}`);
+  dotenv.config({ path: localEnvFilePath });
+} else if (fs.existsSync(envFilePath)) {
+  console.log(`Loading environment variables from ${envFilePath}`);
+  dotenv.config({ path: envFilePath });
+} else {
+  console.error(`No environment file found for ${env}`);
+}

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build:prod": "node loadEnv.js production && next build",
+    "build:dev": "node loadEnv.js development && next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -20,7 +21,9 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cookies-next": "^4.2.1",
+    "cross-env": "^7.0.3",
     "date-fns": "^3.6.0",
+    "dotenv": "^16.4.5",
     "next": "14.1.3",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",

src/app/(navbar)/patient/visit/[id]/page.js

@@ -24,7 +24,7 @@ export default function VisitUser({params}){
     return ()=> {
       isMounted = false;
     }
-  },[])
+  },[id])
   return (
     <div className="flex flex-col text-left p-4 space-y-3 bg-primary dark:bg-dark rounded-md">
       <h2 className="text-left mt-2">Update Visit Detail Page</h2>

src/components/MainNavbar.js

@@ -26,7 +26,6 @@ export default function MainNavbar(){
         const username = user?.content?.clinicUsername
         setUser({username: username, role: user?.content?.role})
       }catch(error){
-        await handleLogout()
         alert(error.message)
         router.push('/login')
       }

src/components/SessionChecker.js

@@ -1,7 +1,7 @@
 "use client"
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { getCookie } from 'cookies-next';
+import { deleteCookie, getCookie } from 'cookies-next';
 import { getUserLogin } from '@/actions/formSubmit';
 
 const SessionChecker = () => {
@@ -10,15 +10,20 @@ const SessionChecker = () => {
   useEffect(() => {
     const interval = setInterval(() => {
       const checkValidSession = async()=> {
-        const sessionId = getCookie("JSESSIONID" || "");
-        const user = await getUserLogin(sessionId)
-        if (!user?.content) {
-          alert("Session Expired")
-          router.push('/login');
+        try{
+          const sessionId = getCookie("JSESSIONID" || "");
+          const user = await getUserLogin(sessionId)
+          if (!user?.content) {
+            deleteCookie("JSESSIONID")
+            router.push('/login');
+            throw new Error("Session Expired")
+          }
+        }catch(error){
+          alert(error.message)
         }
       }
       checkValidSession()
-    }, 6000); // Check every 6 sec
+    }, 30000); // Check every 10 min
     return () => clearInterval(interval);
   }, [router]);
 

src/components/employee/ManagerForm.js

@@ -1,10 +1,12 @@
 "use client"
 import { formManagerRegister } from "@/actions/formSubmit";
-import {ButtonForm, UserNameForm, InputForm, SelectForm} from "../form";
-import { useRef, useState } from "react"
+import { ButtonForm, UserNameForm, InputForm, SelectForm } from "../form";
+import { useRef, useState, useEffect } from "react"
+import { Alert } from "@mui/material"
 
 export default function ManagerForm(){
   const [role, setRole] = useState('Doctor');
+  const [message,setMessage] = useState(null)
   const formRef = useRef(null);
   const handleRoleChange = (event) => {
     setRole(event.target.value);
@@ -17,34 +19,55 @@ export default function ManagerForm(){
       const managerRegister =await formManagerRegister(formData);
       formRef.current.reset()
       if(managerRegister.error) throw new Error(managerRegister.error)
-      alert(managerRegister?.success)
+      setMessage(managerRegister?.success)
     }catch(error){
-      console.log(error.message)
-      alert(error.message)
+      setMessage({error:error.message})
     }
   }
+  useEffect(()=>{
+    const messageTimeout = setTimeout(()=>{
+      setMessage(null)
+    },1500)
+    return ()=> clearTimeout(messageTimeout)
+  },[message])
   return (
-    <form onSubmit={handleSubmit} ref={formRef} className="form" onChange={handleRoleChange}>
-      <UserNameForm />
-      {/* <InputForm props={{unique: "SIP", title: "No SIP"}} /> */}
-      <InputForm props={{unique: "DOB", title: "Date of Birth", type: "Date"}} />
-      <SelectForm props={{unique: "gender", title: "Gender", details: ["Male","Female"], required:true}} />
-      <InputForm props={{unique: "email", type:"email", title: "Email", required:true}} />
-      <SelectForm props={{unique: "status", title: "Status", details: [ "ACTIVE","INACTIVE"], required:true}} />
-      <SelectForm props={{unique: "role", title: "Role", details: ["Doctor","Admin"], required:true}} />
-      <InputForm props={{unique: "pass", type:"password", title: "Password", required:true}} />
-      <InputForm props={{unique: "address", title: "Address"}} />
-      {/* <SelectForm props={{unique: "type", title: "Type", details: role === 'Admin' ? ["Contract", "Permanent"] : ["Specialist", "Standard"]}} /> */}
-      {/* <InputForm props={{unique: "practice_lisence", title: "Practice Lisence", required:true}} /> */}
-      {/* <InputForm props={{unique: "doctor_number", title: "Doctor Number"}} /> */}
-      {/* <InputForm props={{unique: "province", title: "Provinsi"}} />
-      <InputForm props={{unique: "city", title: "City"}} />
-      <InputForm props={{unique: "district", title: "District"}} />
-      <InputForm props={{unique: "village", title: "Village"}} />
-      <InputForm props={{unique: "RT", title: "RT"}} />
-      <InputForm props={{unique: "RW", title: "RW"}} /> */}
-      <InputForm props={{unique: "phoneNumber", title: "Phone"}} />
-      <ButtonForm />
-    </form>
+    <>
+      {
+        message?.success && (
+          <Alert className="fixed top-0 right-0 text-primary dark:text-dark bg-primary dark:bg-dark" severity="success" onClose={() => setMessage(null)}>
+            {message?.success}
+          </Alert>
+        )
+      }
+      {
+        message?.error && (
+          <Alert className="fixed top-0 right-0 text-primary dark:text-dark bg-primary dark:bg-dark" severity="error" onClose={() => setMessage(null)}>
+            {message?.error}
+          </Alert>
+        )
+      }
+      <form onSubmit={handleSubmit} ref={formRef} className="form" onChange={handleRoleChange}>
+        <UserNameForm />
+        {/* <InputForm props={{unique: "SIP", title: "No SIP"}} /> */}
+        <InputForm props={{unique: "DOB", title: "Date of Birth", type: "Date"}} />
+        <SelectForm props={{unique: "gender", title: "Gender", details: ["Male","Female"], required:true}} />
+        <InputForm props={{unique: "email", type:"email", title: "Email", required:true}} />
+        <SelectForm props={{unique: "status", title: "Status", details: [ "ACTIVE","INACTIVE"], required:true}} />
+        <SelectForm props={{unique: "role", title: "Role", details: ["Doctor","Admin"], required:true}} />
+        <InputForm props={{unique: "pass", type:"password", title: "Password", required:true}} />
+        <InputForm props={{unique: "address", title: "Address"}} />
+        {/* <SelectForm props={{unique: "type", title: "Type", details: role === 'Admin' ? ["Contract", "Permanent"] : ["Specialist", "Standard"]}} /> */}
+        {/* <InputForm props={{unique: "practice_lisence", title: "Practice Lisence", required:true}} /> */}
+        {/* <InputForm props={{unique: "doctor_number", title: "Doctor Number"}} /> */}
+        {/* <InputForm props={{unique: "province", title: "Provinsi"}} />
+        <InputForm props={{unique: "city", title: "City"}} />
+        <InputForm props={{unique: "district", title: "District"}} />
+        <InputForm props={{unique: "village", title: "Village"}} />
+        <InputForm props={{unique: "RT", title: "RT"}} />
+        <InputForm props={{unique: "RW", title: "RW"}} /> */}
+        <InputForm props={{unique: "phoneNumber", title: "Phone"}} />
+        <ButtonForm />
+      </form>
+    </>
   )
 }

src/components/form/LoginForm.js

@@ -1,25 +1,22 @@
 "use client"
 import InputForm from "./InputForm";
 import ButtonForm from "./ButtonForm";  
-import { formLogin } from "@/actions/formSubmit";
+import { formLogin, getUserLogin } from "@/actions/formSubmit";
 import { useRef,useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import { hasCookie,setCookie } from "cookies-next";
+import { deleteCookie, getCookie, hasCookie,setCookie } from "cookies-next";
 import Image from "next/image";
 
 export default function LoginForm(){
   const formRef = useRef(null);
   const router = useRouter();
-  const [loading, setLoading] = useState(false)
   const handleSubmit = async(e) => {
     e.preventDefault()
     try {
       const formData = new FormData(formRef.current)
       formRef.current.reset()
-      setLoading(true)
       const session = await formLogin(formData);
-      console.log(session)
-      if(session){
+      if(session?.sessionId){
         setCookie("JSESSIONID", session.sessionId)
       }else{
         alert("Session Not Founded, Bad Credentials")
@@ -32,7 +29,10 @@ export default function LoginForm(){
     }
   }
   useEffect(()=>{
-    if(hasCookie("JSESSIONID")){
+    const userLogin = getUserLogin(getCookie("JSESSIONID"));
+    if(!userLogin){
+      deleteCookie("JSESSIONID")
+    }else {
       router.push('/dashboard')
     }
   },[router])