Merge pull request 'FixedTheBugOfHeaderInMultiBooking' (#2) from dev/fixTheBugOfHeaderInMultiBooking-sajan into main

Reviewed-on: #2

src/app/dashboard/page.js

@@ -1,5 +1,6 @@
-// src/app/dashboard/page.js
+
 "use client";
+
 import { useRouter } from "next/navigation";
 import { useAuth } from "../context/AuthContext";
 import { useEffect } from "react";
@@ -22,12 +23,16 @@ export default function DashboardPage() {
     return (
       <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
         <div className="text-center">
-          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
+          <div
-            darkMode === true ? 'border-gray-100' : 'border-gray-900'
+            className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
-          }`}></div>
+              darkMode === true ? "border-gray-100" : "border-gray-900"
-          <p className={`mt-4 text-lg font-semibold ${
+            }`}
-            darkMode === true ? 'text-gray-100' : 'text-gray-900'
+          ></div>
-          }`}>
+          <p
+            className={`mt-4 text-lg font-semibold ${
+              darkMode === true ? "text-gray-100" : "text-gray-900"
+            }`}
+          >
             Loading...
           </p>
         </div>
@@ -39,12 +44,28 @@ export default function DashboardPage() {
     return null;
   }
 
+  // Check if user is admin or staff to show entries table
+  const canViewEntries = userRole === "admin" || userRole === "staff";
+
   return (
-    <main className={`min-h-screen transition-colors duration-300 ${
+    <main
-      darkMode ? 'dark bg-gray-900' : 'bg-white'
+      className={`min-h-screen transition-colors duration-300 ${
-    }`}>
+        darkMode ? "dark bg-gray-900" : "bg-white"
+      }`}
+    >
       <div className="p-1">
-        <EntriesTable />
+        {canViewEntries ? (
+          <EntriesTable />
+        ) : (
+          <div className="text-center p-8">
+            <h2 className={`text-2xl font-semibold ${darkMode ? "text-white" : "text-gray-800"}`}>
+              Welcome to your Dashboard
+            </h2>
+            <p className={`mt-4 ${darkMode ? "text-gray-300" : "text-gray-600"}`}>
+              You don't have permission to view entries.
+            </p>
+          </div>
+        )}
       </div>
     </main>
   );

src/app/pages/MultiBooking/page.js

@@ -1,44 +1,126 @@
+
 "use client";
-import { useState } from 'react';
+import { useState, useEffect } from "react";
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
 import Header from "../../components/partials/header";
 import { useTheme } from "../../context/ThemeContext";
+import { databases, Query } from "../../lib/appwrite";
+import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
 
 export default function MultiBooking() {
   const { darkMode } = useTheme();
   const router = useRouter();
-  const [appointmentDate, setAppointmentDate] = useState(new Date().toISOString().split('T')[0]);
+
+  const [appointmentDate, setAppointmentDate] = useState(
+    new Date().toISOString().split("T")[0]
+  );
   const [patients, setPatients] = useState(
-    Array(5).fill().map((_, i) => ({ id: i+1, name: "" }))
+    Array(5)
+      .fill()
+      .map((_, i) => ({ id: i + 1, name: "" }))
   );
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
 
+  // Header related states - matching EntriesTable
+  const [entries, setEntries] = useState([]);
+  const [currentToken, setCurrentToken] = useState(null);
+  const [previousToken, setPreviousToken] = useState(null);
+  const [nextToken, setNextToken] = useState(null);
+  const [missedTokens, setMissedTokens] = useState("");
+  const [dataLoading, setDataLoading] = useState(true);
+
   const handleNameChange = (id, value) => {
-    setPatients(patients.map(p => 
+    setPatients(patients.map((p) => (p.id === id ? { ...p, name: value } : p)));
-      p.id === id ? { ...p, name: value } : p
-    ));
   };
 
+  // Get entries from database - similar to EntriesTable
+  const getEntries = async () => {
+    try {
+      const today = new Date().toISOString().split("T")[0];
+      const response = await databases.listDocuments(
+        DATABASE_ID,
+        COLLECTION_ID,
+        [Query.equal("date", today), Query.orderAsc("tokenNumber")],
+        100
+      );
+      return response.documents;
+    } catch (error) {
+      console.error("Fetch error:", error);
+      throw error;
+    }
+  };
+
+  // Update token information - same as EntriesTable
+  const updateTokenInfo = (entries) => {
+    if (entries.length === 0) {
+      setCurrentToken(null);
+      setPreviousToken(null);
+      setNextToken(null);
+      setMissedTokens("");
+      return;
+    }
+
+    const currentIndex = entries.findIndex(
+      (entry) => entry.status === "booked"
+    );
+    const current = currentIndex >= 0 ? entries[currentIndex] : null;
+
+    setCurrentToken(current?.tokenNumber || null);
+    setPreviousToken(
+      currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null
+    );
+    setNextToken(
+      currentIndex < entries.length - 1
+        ? entries[currentIndex + 1]?.tokenNumber
+        : null
+    );
+
+    const missed = entries
+      .filter((entry) => entry.status === "missed")
+      .map((entry) => entry.tokenNumber)
+      .join(", ");
+    setMissedTokens(missed || "None");
+  };
+
+  // Load token data - similar to EntriesTable
+  useEffect(() => {
+    const loadTokenData = async () => {
+      try {
+        setDataLoading(true);
+        const data = await getEntries();
+        setEntries(data);
+        updateTokenInfo(data);
+      } catch (err) {
+        console.error("Error loading token data:", err);
+      } finally {
+        setDataLoading(false);
+      }
+    };
+
+    loadTokenData();
+  }, []);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
     setError(null);
 
     try {
-      // Filter out empty names and validate
+      const validPatients = patients.filter((p) => p.name.trim() !== "");
-      const validPatients = patients.filter(p => p.name.trim() !== "");
       if (validPatients.length === 0) {
-        throw new Error("Please enter at least one patient name");
+        throw new Error("Please enter at least one patient name.");
       }
 
-      // Store in session to use in MultiBooked page
+      sessionStorage.setItem(
-      sessionStorage.setItem('multiBookingData', JSON.stringify({
+        "multiBookingData",
-        date: appointmentDate,
+        JSON.stringify({
-        patients: validPatients
+          date: appointmentDate,
-      }));
+          patients: validPatients,
+        })
+      );
 
-      router.push('/pages/MultiBooked');
+      router.push("/pages/MultiBooked");
     } catch (error) {
       setError(error.message);
     } finally {
@@ -47,23 +129,32 @@ export default function MultiBooking() {
   };
 
   const addMorePatients = () => {
-    const newId = patients.length > 0 ? 
+    if (patients.length >= 20) return;
-      Math.max(...patients.map(p => p.id)) + 1 : 1;
+    const newId =
+      patients.length > 0 ? Math.max(...patients.map((p) => p.id)) + 1 : 1;
     setPatients([...patients, { id: newId, name: "" }]);
   };
 
   return (
-    <div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : 'bg-white'}`}>
+    <div
-      {/* Content Area */}
+      className={`flex h-screen overflow-hidden ${
+        darkMode ? "dark bg-gray-900" : "bg-white"
+      }`}
+    >
       <div className="relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
-        {/* Sticky Header */}
         <header className="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800">
           <div className="flex items-center justify-between">
-            <Header />
+            {/* Pass the same props to Header as in EntriesTable */}
+            <Header
+              currentToken={currentToken}
+              previousToken={previousToken}
+              nextToken={nextToken}
+              missedTokens={missedTokens}
+              entries={entries}
+            />
           </div>
         </header>
 
-        {/* Main Content */}
         <main className="flex-1 overflow-y-auto scrollbar-hide">
           <div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6 pt-20">
             {error && (
@@ -73,47 +164,72 @@ export default function MultiBooking() {
             )}
 
             <div className="mb-6">
-              <h2 className={`text-2xl mb-2 ${darkMode ? 'text-white' : 'text-black'}`}>
+              <h2
+                className={`text-2xl mb-2 ${
+                  darkMode ? "text-white" : "text-black"
+                }`}
+              >
                 Staff Multi-Booking
               </h2>
               <div className="flex items-center">
-                <label className={`mr-2 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+                <label
+                  className={`mr-2 ${
+                    darkMode ? "text-gray-300" : "text-gray-700"
+                  }`}
+                >
                   Date:
                 </label>
                 <input
                   type="date"
                   value={appointmentDate}
                   onChange={(e) => setAppointmentDate(e.target.value)}
-                  className={`p-1 border rounded ${darkMode ? 'bg-gray-800 text-white border-gray-700' : 'bg-white'}`}
+                  className={`p-1 border rounded ${
+                    darkMode
+                      ? "bg-gray-800 text-white border-gray-700"
+                      : "bg-white"
+                  }`}
                 />
               </div>
             </div>
-            
+
             <form onSubmit={handleSubmit} className="max-w-2xl mx-auto my-8">
               <div className="space-y-4 mb-6">
                 {patients.map((patient) => (
                   <div key={patient.id} className="flex items-center gap-3">
-                    <span className={`w-6 text-right ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+                    <span
+                      className={`w-6 text-right ${
+                        darkMode ? "text-gray-300" : "text-gray-700"
+                      }`}
+                    >
                       {patient.id}.
                     </span>
                     <input
                       type="text"
                       value={patient.name}
-                      onChange={(e) => handleNameChange(patient.id, e.target.value)}
+                      onChange={(e) =>
+                        handleNameChange(patient.id, e.target.value)
+                      }
                       placeholder="Patient name"
                       className={`flex-1 shadow-theme-xs h-11 rounded-lg border px-4 py-2.5 text-sm focus:outline-none focus:ring-2 ${
-                        darkMode ? 
+                        darkMode
-                        'bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:border-blue-800 focus:ring-blue-800/30' : 
+                          ? "bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:border-blue-800 focus:ring-blue-800/30"
-                        'bg-white border-gray-300 text-gray-800 placeholder-gray-400 focus:border-blue-300 focus:ring-blue-500/10'
+                          : "bg-white border-gray-300 text-gray-800 placeholder-gray-400 focus:border-blue-300 focus:ring-blue-500/10"
                       }`}
                     />
                     {patient.id > 5 && (
                       <button
                         type="button"
-                        onClick={() => setPatients(patients.filter(p => p.id !== patient.id))}
+                        onClick={() =>
+                          setPatients(
+                            patients.filter((p) => p.id !== patient.id)
+                          )
+                        }
                         className={`p-2 rounded-full ${
-                          darkMode ? 'text-red-400 hover:bg-gray-700' : 'text-red-500 hover:bg-gray-100'
+                          darkMode
+                            ? "text-red-400 hover:bg-gray-700"
+                            : "text-red-500 hover:bg-gray-100"
                         }`}
+                        title="Remove"
                       >
                         ✕
                       </button>
@@ -122,20 +238,27 @@ export default function MultiBooking() {
                 ))}
               </div>
 
-              <div className="flex flex-wrap gap-3 mb-6">
+              <div className="flex flex-wrap gap-3 mb-6 items-center">
                 <button
                   type="button"
                   onClick={addMorePatients}
+                  disabled={patients.length >= 20}
                   className={`px-4 py-2 rounded-lg text-sm font-medium ${
-                    darkMode ? 
+                    darkMode
-                    'bg-gray-700 text-white hover:bg-gray-600' : 
+                      ? "bg-gray-700 text-white hover:bg-gray-600"
-                    'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                      : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                  } ${
+                    patients.length >= 20 ? "opacity-50 cursor-not-allowed" : ""
                   }`}
                 >
                   + Add More Patients
                 </button>
-                <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                <div
-                  {patients.length} patients entered
+                  className={`text-sm mt-1 ${
+                    darkMode ? "text-gray-400" : "text-gray-600"
+                  }`}
+                >
+                  {patients.length} / 20 patients entered
                 </div>
               </div>
 
@@ -144,34 +267,43 @@ export default function MultiBooking() {
                   type="submit"
                   disabled={loading}
                   className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition w-full ${
-                    loading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-700 hover:bg-blue-600'
+                    loading
+                      ? "bg-blue-400 cursor-not-allowed"
+                      : "bg-blue-700 hover:bg-blue-600"
                   }`}
                 >
-                  {loading ? 'Processing...' : 'Generate Tokens'}
+                  {loading ? "Processing..." : "Generate Tokens"}
                 </button>
                 <button
                   type="button"
-                  onClick={() => router.push('/entries')}
+                  onClick={() => router.push("/entries")}
                   className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium shadow-theme-xs ring-1 ring-inset transition w-full ${
-                    darkMode ? 
+                    darkMode
-                    'bg-gray-800 text-gray-300 ring-gray-700 hover:bg-gray-700' : 
+                      ? "bg-gray-800 text-gray-300 ring-gray-700 hover:bg-gray-700"
-                    'bg-white text-gray-700 ring-gray-300 hover:bg-gray-50'
+                      : "bg-white text-gray-700 ring-gray-300 hover:bg-gray-50"
                   }`}
                 >
                   View All Entries
                 </button>
               </div>
             </form>
-            
+
-            <div className={`text-center mt-8 text-sm ${
+            <div
-              darkMode ? 'text-gray-400' : 'text-gray-600'
+              className={`text-center mt-8 text-sm ${
-            }`}>
+                darkMode ? "text-gray-400" : "text-gray-600"
-              <p>Staff can book multiple tokens at once. All tokens will be assigned for the same date.</p>
+              }`}
-              <p className="mt-1">Minimum 1 patient required. Maximum 20 patients per batch.</p>
+            >
+              <p>
+                Staff can book multiple tokens at once. All tokens will be
+                assigned for the same date.
+              </p>
+              <p className="mt-1">
+                Minimum 1 patient required. Maximum 20 patients per batch.
+              </p>
             </div>
           </div>
         </main>
       </div>
     </div>
   );
-}
+}

src/app/pages/entries/EntriesTable.js

@@ -1,3 +1,4 @@
+
 "use client";
 import { useEffect, useState } from "react";
 import { databases, Query } from "../../lib/appwrite";
@@ -25,21 +26,20 @@ export default function EntriesTable() {
 
   // Calculate waiting time based on position in queue
   const calculateWaitTime = (tokenNumber) => {
-    const bookedEntries = entries.filter(e => e.status === "booked");
+    const bookedEntries = entries.filter((e) => e.status === "booked");
-    const position = bookedEntries.findIndex(e => e.tokenNumber === tokenNumber);
+    const position = bookedEntries.findIndex(
-    return position >= 0 ? (position * avgConsultTime) : 0;
+      (e) => e.tokenNumber === tokenNumber
+    );
+    return position >= 0 ? position * avgConsultTime : 0;
   };
 
   const getEntries = async () => {
     try {
-      const today = new Date().toISOString().split('T')[0];
+      const today = new Date().toISOString().split("T")[0];
       const response = await databases.listDocuments(
         DATABASE_ID,
         COLLECTION_ID,
-        [
+        [Query.equal("date", today), Query.orderAsc("tokenNumber")],
-          Query.equal('date', today),
-          Query.orderAsc('tokenNumber')
-        ],
         100
       );
       return response.documents;
@@ -58,12 +58,20 @@ export default function EntriesTable() {
       return;
     }
 
-    const currentIndex = entries.findIndex((entry) => entry.status === "booked");
+    const currentIndex = entries.findIndex(
+      (entry) => entry.status === "booked"
+    );
     const current = currentIndex >= 0 ? entries[currentIndex] : null;
 
     setCurrentToken(current?.tokenNumber || null);
-    setPreviousToken(currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null);
+    setPreviousToken(
-    setNextToken(currentIndex < entries.length - 1 ? entries[currentIndex + 1]?.tokenNumber : null);
+      currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null
+    );
+    setNextToken(
+      currentIndex < entries.length - 1
+        ? entries[currentIndex + 1]?.tokenNumber
+        : null
+    );
 
     const missed = entries
       .filter((entry) => entry.status === "missed")
@@ -75,12 +83,9 @@ export default function EntriesTable() {
   const updateStatus = async (entryId, newStatus) => {
     try {
       setLoading(true);
-      await databases.updateDocument(
+      await databases.updateDocument(DATABASE_ID, COLLECTION_ID, entryId, {
-        DATABASE_ID,
+        status: newStatus,
-        COLLECTION_ID,
+      });
-        entryId,
-        { status: newStatus }
-      );
       const data = await getEntries();
       setEntries(data);
       setFilteredEntries(data);
@@ -128,20 +133,32 @@ export default function EntriesTable() {
 
   const indexOfLastEntry = currentPage * entriesPerPage;
   const indexOfFirstEntry = indexOfLastEntry - entriesPerPage;
-  const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry);
+  const currentEntries = filteredEntries.slice(
+    indexOfFirstEntry,
+    indexOfLastEntry
+  );
   const totalPages = Math.ceil(filteredEntries.length / entriesPerPage);
 
-  if (loading) return <div className="text-center mt-50">
+  if (loading)
-    <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto`}></div>
+    return (
-    <p className={`mt-4 text-lg font-semibold`}>Loading...</p>
+      <div className="text-center mt-50">
-  </div>;
+        <div
+          className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto`}
+        ></div>
+        <p className={`mt-4 text-lg font-semibold`}>Loading...</p>
+      </div>
+    );
 
   if (error) return <div className="p-4 text-red-500">Error: {error}</div>;
 
   // Check user role and show permission message if patient
   if (userRole === "patient") {
     return (
-      <div className={`min-h-screen w-full ${darkMode ? 'bg-gray-900 text-white' : 'bg-white text-black'}`}>
+      <div
+        className={`min-h-screen w-full ${
+          darkMode ? "bg-gray-900 text-white" : "bg-white text-black"
+        }`}
+      >
         <div className="flex items-center justify-center h-screen">
           <div className="text-center">
             <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
@@ -153,7 +170,11 @@ export default function EntriesTable() {
   }
 
   return (
-    <div className={`min-h-screen w-full ${darkMode ? 'bg-gray-900 text-white' : 'bg-white text-black'}`}>
+    <div
+      className={`min-h-screen w-full ${
+        darkMode ? "bg-gray-900 text-white" : "bg-white text-black"
+      }`}
+    >
       <div className="sticky top-0 z-10 bg-white shadow-md mb-4">
         <Header
           currentToken={currentToken}
@@ -191,7 +212,9 @@ export default function EntriesTable() {
               {currentEntries.map((entry) => (
                 <tr
                   key={entry.$id}
-                  className={`border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}
+                  className={`border ${
+                    darkMode ? "border-gray-700" : "border-gray-200"
+                  }`}
                 >
                   <td className="p-3 font-mono">{entry.tokenNumber}</td>
                   <td className="p-3">{entry.patientName}</td>
@@ -205,12 +228,13 @@ export default function EntriesTable() {
                   </td> */}
                   <td className="p-3">
                     <span
-                      className={`px-2 py-1 rounded-full text-xs ${entry.status === "done"
+                      className={`px-2 py-1 rounded-full text-xs ${
-                        ? "bg-green-100 text-green-800"
+                        entry.status === "done"
-                        : entry.status === "booked"
+                          ? "bg-green-100 text-green-800"
+                          : entry.status === "booked"
                           ? "bg-yellow-100 text-yellow-800"
                           : "bg-red-100 text-red-800"
-                        } font-semibold`}
+                      } font-semibold`}
                     >
                       {entry.status === "booked" ? "In-Queue" : entry.status}
                     </span>
@@ -244,8 +268,11 @@ export default function EntriesTable() {
           </table>
 
           {/* Pagination */}
-          <div className={`flex justify-between items-center mt-4 ${darkMode ? 'text-white' : 'text-gray-700'
+          <div
-            }`}>
+            className={`flex justify-between items-center mt-4 ${
+              darkMode ? "text-white" : "text-gray-700"
+            }`}
+          >
             <button
               disabled={currentPage === 1}
               onClick={() => setCurrentPage((prev) => prev - 1)}
@@ -268,4 +295,4 @@ export default function EntriesTable() {
       )}
     </div>
   );
-}
+}