Merge pull request 'Token table caching issue resolved' (#5 ) from dev/TokenTableCachingIssue into main

Reviewed-on: #5
Token table caching issue resolved
2025-05-19 06:10:16 +00:00 · 2025-05-19 11:39:00 +05:30 · 2025-05-13 12:00:30 +00:00 · 2025-05-13 17:01:28 +05:30 · 2025-05-13 16:59:36 +05:30 · 2025-05-13 16:43:31 +05:30
13 changed files with 554 additions and 369 deletions
--- a/.env.local
+++ b/.env.local
@ -1,5 +1,5 @@
 NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
 NEXT_PUBLIC_APPWRITE_PROJECT_ID=67e1445400053dca1d9b
 NEXT_PUBLIC_APPWRITE_DATABASE_ID=67e1452b00016444b37f
-NEXT_PUBLIC_APPWRITE_COLLECTION_ID=67fe4029000f7e0a7b92
-NEXT_PUBLIC_APPWRITE_USERS_COLLECTION_ID=67ff72bd00370366ae3e
+NEXT_PUBLIC_APPWRITE_COLLECTION_ID=681c367b0016f9ba0e8e
+NEXT_PUBLIC_APPWRITE_USERS_COLLECTION_ID=681c35690038f9798152
--- a/src/app/components/Sidebar.jsx
+++ b/src/app/components/Sidebar.jsx
@ -2,9 +2,9 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { FileText, Moon, Sun } from "lucide-react";
-import { FaLock, FaChevronDown, FaChevronUp } from "react-icons/fa";
+import { FileText } from "lucide-react";
 import { useTheme } from "../context/ThemeContext";
+import { account } from "../lib/appwrite";

 const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
  const pathname = usePathname();
@ -25,10 +25,17 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
      setSidebarOpen(false);
    }
  };
-  const handleLogout = () => {
-    localStorage.removeItem("token"); // or account.deleteSession("current") if using Appwrite
-    router.push("/signup");
+  const handleLogout = async () => {
+    try {
+      await account.deleteSession("current");
+      localStorage.removeItem("token");
+      // Force a full page reload to reset all state
+      window.location.href = "/";
+    } catch (error) {
+      console.error("Logout failed:", error);
+    }
  };
+
  // ---------------logo handling in dark mode-----------------------
  // Create a separate LogoImage component for better error handling
  function LogoImage({ darkSrc, lightSrc, darkMode, className, alt }) {
@ -71,7 +78,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
    >
      <div className="h-full flex flex-col border-r border-gray-200 p-4 overflow-y-auto scrollbar-hide">
        {/* Logo Section */}
-        
+

        {/* MENU section - Only show when not collapsed */}
        {!isCollapsed && (
@ -87,12 +94,12 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
          <Link
            href="/dashboard"
            className={`flex items-center gap-2 p-3 rounded-md text-sm font-semibold transition-colors ${isActive("/dashboard")
-                ? darkMode
-                  ? "bg-blue-900 text-blue-200"
-                  : "bg-blue-100 text-blue-800"
-                : darkMode
-                  ? "hover:bg-gray-700 text-gray-200"
-                  : "hover:bg-gray-200"
+              ? darkMode
+                ? "bg-blue-900 text-blue-200"
+                : "bg-blue-100 text-blue-800"
+              : darkMode
+                ? "hover:bg-gray-700 text-gray-200"
+                : "hover:bg-gray-200"
              } ${isCollapsed ? 'justify-center' : ''}`}
            onClick={closeSidebarOnMobile}
          >
--- a/src/app/components/TokenTable.jsx
+++ b/src/app/components/TokenTable.jsx
@ -55,15 +55,15 @@ export default function TokenTable({ statusFilter }) {

  const applyFilters = (data, search) => {
    let filtered = data.filter((entry) => {
-      const matchesSearch = 
+      const matchesSearch =
        entry.patientName.toLowerCase().includes(search.toLowerCase()) ||
        entry.tokenNumber.toString().includes(search);
-      
-      const matchesFilter = 
-        statusFilter === "all" || 
+
+      const matchesFilter =
+        statusFilter === "all" ||
        entry.status === statusFilter ||
        (statusFilter === "booked" && entry.status === "booked");
-      
+
      return matchesSearch && matchesFilter;
    });
    setFilteredEntries(filtered);
@ -96,162 +96,153 @@ export default function TokenTable({ statusFilter }) {



-// Handle theme loading state
-if (darkMode === undefined) {
-  return (
-    <div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
-      <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 ${
-          darkMode === true ? 'border-gray-100' : 'border-gray-900'
-        }`}></div>
-        <p className={`mt-4 text-lg font-semibold ${
-          darkMode === true ? 'text-gray-100' : 'text-gray-900'
-        }`}>
-          Loading...
-        </p>
+  // Handle theme loading state
+  if (darkMode === undefined) {
+    return (
+      <div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
+        <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 ${darkMode === true ? "border-gray-100" : "border-blue-400"
+              }`}
+          ></div>
+          <p className={`mt-4 text-lg font-semibold ${darkMode === true ? 'text-gray-100' : 'text-gray-900'
+            }`}>
+            Loading...
+          </p>
+        </div>
      </div>
+    );
+  }
+  if (loading) return (
+    <div className={`text-center py-10 ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
+      <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 mx-auto ${darkMode ? 'border-gray-100' : 'border-blue-400'
+        }`}></div>
+      <p className={`mt-4 text-lg font-semibold ${darkMode ? 'text-gray-100' : 'text-gray-900'
+        }`}>
+        Loading...
+      </p>
    </div>
  );
-}
-if (loading) return (
-  <div className={`text-center py-10 ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
-    <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 mx-auto ${
-      darkMode ? 'border-gray-100' : 'border-gray-900'
-    }`}></div>
-    <p className={`mt-4 text-lg font-semibold ${
-      darkMode ? 'text-gray-100' : 'text-gray-900'
-    }`}>
-      Loading...
-    </p>
-  </div>
-);

-if (error) return (
-  <div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}>
-    Error: {error}
-  </div>
-);
+  if (error) return (
+    <div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}>
+      Error: {error}
+    </div>
+  );

-return (
-  <div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
-    <input
-      type="text"
-      placeholder="Search by token or name"
-      className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${
-        darkMode 
-          ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500' 
+  return (
+    <div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
+      <input
+        type="text"
+        placeholder="Search by token or name"
+        className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${darkMode
+          ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
          : 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500'
-      }`}
-      value={searchQuery}
-      onChange={(e) => setSearchQuery(e.target.value)}
-    />
+          }`}
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />

-    {filteredEntries.length === 0 ? (
-      <div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}>
-        No entries found.
-      </div>
-    ) : (
-      <>
-        <div className="overflow-x-auto">
-          <table className="w-full border-collapse">
-            <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
-              <tr>
-                <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Token</th>
-                <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Name</th>
-                <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Status</th>
-                <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {currentEntries.map((entry) => (
-                <tr
-                  key={entry.$id}
-                  className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
-                >
-                  <td className="p-3 font-mono">{entry.tokenNumber}</td>
-                  <td className="p-3">{entry.patientName}</td>
-                  <td className="p-3">
-                    <span
-                      className={`px-2 py-1 rounded-full text-xs font-semibold ${
-                        entry.status === "done"
-                          ? darkMode 
-                            ? "bg-green-900 text-green-100" 
+      {filteredEntries.length === 0 ? (
+        <div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}>
+          No entries found.
+        </div>
+      ) : (
+        <>
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse">
+              <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
+                <tr>
+                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Token</th>
+                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Name</th>
+                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Status</th>
+                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {currentEntries.map((entry) => (
+                  <tr
+                    key={entry.$id}
+                    className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
+                  >
+                    <td className="p-3 font-mono">{entry.tokenNumber}</td>
+                    <td className="p-3">{entry.patientName}</td>
+                    <td className="p-3">
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-semibold ${entry.status === "done"
+                          ? darkMode
+                            ? "bg-green-900 text-green-100"
                            : "bg-green-100 text-green-800"
                          : entry.status === "booked"
-                            ? darkMode 
-                              ? "bg-yellow-900 text-yellow-100" 
+                            ? darkMode
+                              ? "bg-yellow-900 text-yellow-100"
                              : "bg-yellow-100 text-yellow-800"
-                            : darkMode 
-                              ? "bg-red-900 text-red-100" 
+                            : darkMode
+                              ? "bg-red-900 text-red-100"
                              : "bg-red-100 text-red-800"
-                      }`}
-                    >
-                      {entry.status === "booked" ? "In-Queue" : entry.status}
-                    </span>
-                  </td>
-                  <td className="p-3 flex gap-2">
-                    {entry.status === "booked" && (
-                      <>
-                        <button
-                          onClick={() => updateStatus(entry.$id, "done")}
-                          className={`border rounded-full px-2 py-1 text-xs transition-colors ${
-                            darkMode
+                          }`}
+                      >
+                        {entry.status === "booked" ? "In-Queue" : entry.status}
+                      </span>
+                    </td>
+                    <td className="p-3 flex gap-2">
+                      {entry.status === "booked" && (
+                        <>
+                          <button
+                            onClick={() => updateStatus(entry.$id, "done")}
+                            className={`border rounded-full px-2 py-1 text-xs transition-colors ${darkMode
                              ? 'border-green-400 text-green-400 hover:bg-green-900'
                              : 'border-green-600 text-green-600 hover:bg-green-50'
-                          }`}
-                        >
-                          Done
-                        </button>
-                        <button
-                          onClick={() => updateStatus(entry.$id, "missed")}
-                          className={`border rounded-full px-2 py-1 text-xs transition-colors ${
-                            darkMode
+                              }`}
+                          >
+                            Done
+                          </button>
+                          <button
+                            onClick={() => updateStatus(entry.$id, "missed")}
+                            className={`border rounded-full px-2 py-1 text-xs transition-colors ${darkMode
                              ? 'border-red-400 text-red-400 hover:bg-red-900'
                              : 'border-red-600 text-red-600 hover:bg-red-50'
-                          }`}
-                        >
-                          Missed
-                        </button>
-                      </>
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+                              }`}
+                          >
+                            Missed
+                          </button>
+                        </>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>

-        <div className={`flex justify-between items-center mt-4 p-2 rounded ${
-          darkMode ? 'bg-gray-800' : 'bg-gray-100'
-        }`}>
-          <button
-            disabled={currentPage === 1}
-            onClick={() => setCurrentPage((prev) => prev - 1)}
-            className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
-              darkMode 
-                ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' 
+          <div className={`flex justify-between items-center mt-4 p-2 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-100'
+            }`}>
+            <button
+              disabled={currentPage === 1}
+              onClick={() => setCurrentPage((prev) => prev - 1)}
+              className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${darkMode
+                ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
                : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
-            }`}
-          >
-            Previous
-          </button>
-          <span className="text-sm">
-            Page {currentPage} of {totalPages}
-          </span>
-          <button
-            disabled={currentPage === totalPages}
-            onClick={() => setCurrentPage((prev) => prev + 1)}
-            className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
-              darkMode 
-                ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' 
+                }`}
+            >
+              Previous
+            </button>
+            <span className="text-sm">
+              Page {currentPage} of {totalPages}
+            </span>
+            <button
+              disabled={currentPage === totalPages}
+              onClick={() => setCurrentPage((prev) => prev + 1)}
+              className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${darkMode
+                ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
                : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
-            }`}
-          >
-            Next
-          </button>
-        </div>
-      </>
-    )}
-  </div>
-);
+                }`}
+            >
+              Next
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
 }
--- a/src/app/dashboard/page.js
+++ b/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 ${
-            darkMode === true ? 'border-gray-100' : 'border-gray-900'
-          }`}></div>
-          <p className={`mt-4 text-lg font-semibold ${
-            darkMode === true ? 'text-gray-100' : 'text-gray-900'
-          }`}>
+          <div
+            className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
+              darkMode === true ? "border-gray-100" : "border-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 ${
-      darkMode ? 'dark bg-gray-900' : 'bg-white'
-    }`}>
+    <main
+      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>
  );
--- a/src/app/lib/config.js
+++ b/src/app/lib/config.js
@ -6,6 +6,6 @@

 // lib/config.js
 export const DATABASE_ID = "67e1452b00016444b37f";
-export const COLLECTION_ID = "67fe4029000f7e0a7b92";
+export const COLLECTION_ID = "681c367b0016f9ba0e8e";
 export const SETTINGS_COLLECTION_ID = "settings";
 export const AVG_CONSULTATION_KEY = "avg_consultation";
--- a/src/app/page.js
+++ b/src/app/page.js
@ -84,13 +84,13 @@ export default function AuthPage() {
        loginData.email,
        loginData.password
      );
-      
+
      if (session) {
        const user = await account.get();
        if (user) {
          localStorage.setItem("isLoggedIn", "true");
          setIsAuthenticated(true);
-          router.push("/dashboard");
+          window.location.href = '/dashboard';
        }
      }
    } catch (error) {
@ -167,8 +167,8 @@ export default function AuthPage() {
              {isLoginForm ? "Sign In" : "Sign Up"}
            </h1>
            <p className="text-sm text-gray-500 dark:text-gray-400">
-              {isLoginForm 
-                ? "Enter your email and password to sign In!" 
+              {isLoginForm
+                ? "Enter your email and password to sign In!"
                : "Enter your deatils to create an account!"}
            </p>
          </div>
--- a/src/app/pages/MultiBooked/page.js
+++ b/src/app/pages/MultiBooked/page.js
@ -82,7 +82,7 @@ const createEntries = async () => {
    }

    setBookings(updatedBookings);
-    alert(`${validBookings.length} tokens created successfully!`);
+    // alert(`${validBookings.length} tokens created successfully!`);
  } catch (error) {
    console.error("Creation error:", error);
    setError(error.message);
--- a/src/app/pages/MultiBooking/page.js
+++ b/src/app/pages/MultiBooking/page.js
@ -1,44 +1,126 @@
+
 "use client";
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useEffect } from "react";
+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 => 
-      p.id === id ? { ...p, name: value } : p
-    ));
+    setPatients(patients.map((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('multiBookingData', JSON.stringify({
-        date: appointmentDate,
-        patients: validPatients
-      }));
+      sessionStorage.setItem(
+        "multiBookingData",
+        JSON.stringify({
+          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 ? 
-      Math.max(...patients.map(p => p.id)) + 1 : 1;
+    if (patients.length >= 20) return;
+    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'}`}>
-      {/* Content Area */}
+    <div
+      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 ? 
-                        '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'
+                        darkMode
+                          ? "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"
                      }`}
                    />
                    {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 ? 
-                    'bg-gray-700 text-white hover:bg-gray-600' : 
-                    'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                    darkMode
+                      ? "bg-gray-700 text-white hover:bg-gray-600"
+                      : "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">
-                  {patients.length} patients entered
+                <div
+                  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 ? 
-                    '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'
+                    darkMode
+                      ? "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"
                  }`}
                >
                  View All Entries
                </button>
              </div>
            </form>
-            
-            <div 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>
+
+            <div
+              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>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
-}
+}
--- a/src/app/pages/ResetPasswordPage/page.js
+++ b/src/app/pages/ResetPasswordPage/page.js
@ -17,16 +17,24 @@ export default function ResetPasswordPage() {
  const { darkMode, toggleDarkMode } = useTheme();
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState({ text: "", type: "" }); // type can be "success" or "error"

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
+    setMessage({ text: "", type: "" });
    try {
      await account.createRecovery(email, "http://localhost:3000/reset-password");
-      alert("Password reset link sent to your email!");
+      setMessage({ 
+        text: "Password reset link sent to your email!", 
+        type: "success" 
+      });
    } catch (error) {
      console.error("Error:", error);
-      alert(`Failed to send reset link: ${error.message}`);
+      setMessage({ 
+        text: `Failed to send reset link: ${error.message}`, 
+        type: "error" 
+      });
    } finally {
      setLoading(false);
    }
@ -53,6 +61,15 @@ export default function ResetPasswordPage() {
              <p className="text-sm text-gray-500 dark:text-gray-400">
                Enter your email address linked to your account, and we&apos;ll send you a link to reset your password.
              </p>
+              {message.text && (
+                <div className={`mt-4 p-3 rounded-md ${
+                  message.type === "success" 
+                    ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200" 
+                    : "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200"
+                }`}>
+                  {message.text}
+                </div>
+              )}
              <form onSubmit={handleSubmit}>
                <div className="space-y-5">
                  <div>
@ -85,4 +102,4 @@ export default function ResetPasswordPage() {
      </div>
    </div>
  );
-}
+}
--- a/src/app/pages/SignInPage/page.js
+++ b/src/app/pages/SignInPage/page.js
@ -87,7 +87,7 @@ export default function SignInPage() {
      {/* Left Side - Form */}
      <div className="w-full  flex flex-col justify-center p-6 sm:p-12 lg:p-16">
        <div className="w-full max-w-md mx-auto">
-          <Link
+          {/* <Link
            href="/dashboard"
            className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mb-10"
          >
@ -108,7 +108,7 @@ export default function SignInPage() {
              />
            </svg>
            Back to dashboard
-          </Link>
+          </Link> */}

          <div className="mb-8">
            <h1 className="mb-2 text-2xl font-bold text-gray-800 dark:text-white/90 sm:text-3xl">
--- a/src/app/pages/SignUpPage/page.js
+++ b/src/app/pages/SignUpPage/page.js
@ -86,7 +86,7 @@ export default function SignUpPage() {
        {/* Form */}
        <div className="flex flex-col flex-1 w-full">
          <div className="w-full max-w-md pt-5 mx-auto sm:py-10">
-            <Link
+            {/* <Link
              href="/dashboard"
              className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
            >
@ -107,7 +107,7 @@ export default function SignUpPage() {
                />
              </svg>
              Back to dashboard
-            </Link>
+            </Link> */}
          </div>
          <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
            <div className="mb-5 sm:mb-8">
--- a/src/app/pages/entries/EntriesTable.js
+++ b/src/app/pages/entries/EntriesTable.js
@ -5,6 +5,7 @@ import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
 import Header from "../../components/partials/header";
 import { useTheme } from "../../context/ThemeContext";
 import { useAuth } from "../../context/AuthContext";
+import { FaSearch } from 'react-icons/fa';

 export default function EntriesTable() {
  const { userRole } = useAuth();
@ -13,7 +14,7 @@ export default function EntriesTable() {
  const [filteredEntries, setFilteredEntries] = useState([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
-  const [avgConsultTime, setAvgConsultTime] = useState(15); // Default 15 mins
+  const [avgConsultTime, setAvgConsultTime] = useState(15);
  const entriesPerPage = 20;

  const [currentToken, setCurrentToken] = useState(null);
@ -23,23 +24,21 @@ export default function EntriesTable() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

-  // Calculate waiting time based on position in queue
  const calculateWaitTime = (tokenNumber) => {
-    const bookedEntries = entries.filter(e => e.status === "booked");
-    const position = bookedEntries.findIndex(e => e.tokenNumber === tokenNumber);
-    return position >= 0 ? (position * avgConsultTime) : 0;
+    const bookedEntries = entries.filter((e) => e.status === "booked");
+    const position = bookedEntries.findIndex(
+      (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;
@ -63,7 +62,9 @@ export default function EntriesTable() {

    setCurrentToken(current?.tokenNumber || null);
    setPreviousToken(currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null);
-    setNextToken(currentIndex < entries.length - 1 ? 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 +76,9 @@ export default function EntriesTable() {
  const updateStatus = async (entryId, newStatus) => {
    try {
      setLoading(true);
-      await databases.updateDocument(
-        DATABASE_ID,
-        COLLECTION_ID,
-        entryId,
-        { status: newStatus }
-      );
+      await databases.updateDocument(DATABASE_ID, COLLECTION_ID, entryId, {
+        status: newStatus,
+      });
      const data = await getEntries();
      setEntries(data);
      setFilteredEntries(data);
@ -94,18 +92,13 @@ export default function EntriesTable() {
  };

  useEffect(() => {
-    if (userRole === "patient") return; // Don't load data if patient
-
+    if (userRole === "patient") return;
    const loadData = async () => {
      try {
        const data = await getEntries();
        setEntries(data);
        setFilteredEntries(data);
        updateTokenInfo(data);
-
-        // Load settings (avg consultation time)
-        // const settings = await getSettings();
-        // setAvgConsultTime(settings?.avgConsultationTime || 15);
      } catch (err) {
        setError(err.message);
      } finally {
@ -131,17 +124,19 @@ export default function EntriesTable() {
  const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry);
  const totalPages = Math.ceil(filteredEntries.length / entriesPerPage);

-  if (loading) return <div className="text-center mt-50">
-    <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 (loading)
+    return (
+      <div className="text-center mt-20">
+        <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,119 +148,141 @@ 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}
          previousToken={previousToken}
          nextToken={nextToken}
          missedTokens={missedTokens}
-          entries={entries} // Pass the entries data
+          entries={entries}
        />
      </div>
-      <h1 className="text-2xl font-bold mb-4">Today&apos;s Entries</h1>
-      <input
-        type="text"
-        placeholder="Search by token or name"
-        className="mb-4 p-2 border rounded bg-white w-full max-w-sm"
-        value={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
-      />

-      {filteredEntries.length === 0 ? (
-        <div className="p-4">No entries found for today.</div>
-      ) : (
-        <>
-          <table className="w-full border-collapse">
-            <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
-              <tr>
-                <th className="p-3 text-left">Token</th>
-                <th className="p-3 text-left">Name</th>
-                {/* <th className="p-3 text-left">Booked By</th> */}
-                <th className="p-3 text-left">Status</th>
-                {/* <th className="p-3 text-left">Wait Time</th> */}
-                <th className="p-3 text-left">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {currentEntries.map((entry) => (
-                <tr
-                  key={entry.$id}
-                  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>
-                  {/* <td className="p-3">
-                    <span className={`text-xs px-2 py-1 rounded ${entry.bookedBy === 'staff' ?
-                      'bg-purple-100 text-purple-800' :
-                      'bg-blue-100 text-blue-800'
-                      }`}>
-                      {entry.bookedBy}
-                    </span>
-                  </td> */}
-                  <td className="p-3">
-                    <span
-                      className={`px-2 py-1 rounded-full text-xs ${entry.status === "done"
-                        ? "bg-green-100 text-green-800"
-                        : entry.status === "booked"
-                          ? "bg-yellow-100 text-yellow-800"
-                          : "bg-red-100 text-red-800"
-                        } font-semibold`}
-                    >
-                      {entry.status === "booked" ? "In-Queue" : entry.status}
-                    </span>
-                  </td>
-                  {/* <td className="p-3">
-                    {entry.status === "booked" ?
-                      `~${calculateWaitTime(entry.tokenNumber)} mins` :
-                      '-'}
-                  </td> */}
-                  <td className="p-3 flex gap-2">
-                    {entry.status === "booked" && (
-                      <>
-                        <button
-                          onClick={() => updateStatus(entry.$id, "done")}
-                          className="border border-green-600 text-green-600 rounded-full px-2 py-1 text-xs hover:bg-green-50"
-                        >
-                          Done
-                        </button>
-                        <button
-                          onClick={() => updateStatus(entry.$id, "missed")}
-                          className="border border-red-600 text-red-600 rounded-full px-2 py-1 text-xs hover:bg-red-50"
-                        >
-                          Missed
-                        </button>
-                      </>
-                    )}
-                  </td>
+      <div className="p-4">
+        <h1 className="text-2xl font-bold mb-4">Today&apos;s Entries</h1>
+       <div className={`
+  hidden md:flex items-center gap-[2px] 
+  border ${darkMode ? 'border-gray-600 bg-gray-800' : 'border-gray-300 bg-white'}
+  p-2 rounded-lg 
+  h-[45px] w-[300px] lg:w-[400px] ml-2 mb-6
+  transition-colors duration-300
+  focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-opacity-50
+  ${darkMode ? 'focus-within:border-gray-500' : 'focus-within:border-blue-500'}
+`}>
+  <div className="relative flex-1">
+    <FaSearch className={`
+      absolute left-3 top-1/2 transform -translate-y-1/2 
+      ${darkMode ? 'text-gray-400' : 'text-gray-500'}
+    `} />
+    <input
+      type="text"
+      placeholder="Search by token or name"
+      className={`
+        w-full bg-transparent border-none 
+        pl-10 pr-10 py-2 
+        focus:outline-none 
+        ${darkMode ? 'text-gray-200 placeholder-gray-500' : 'text-gray-800 placeholder-gray-400'}
+        text-sm
+      `}
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+    />
+  </div>
+  <div className={`
+    px-2 py-1 
+    ${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-500'}
+    text-xs rounded-md 
+    font-mono
+  `}>
+    ⌘K
+  </div>
+</div>
+
+        {filteredEntries.length === 0 ? (
+          <div className="p-4">No entries found for today.</div>
+        ) : (
+          <>
+            <table className="w-full border-collapse">
+              <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
+                <tr>
+                  <th className="p-3 text-left">Token</th>
+                  <th className="p-3 text-left">Name</th>
+                  <th className="p-3 text-left">Status</th>
+                  <th className="p-3 text-left">Actions</th>
                </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {currentEntries.map((entry) => (
+                  <tr
+                    key={entry.$id}
+                    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>
+                    <td className="p-3">
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                          entry.status === "done"
+                            ? "bg-green-100 text-green-800"
+                            : entry.status === "booked"
+                            ? "bg-yellow-100 text-yellow-800"
+                            : "bg-red-100 text-red-800"
+                        }`}
+                      >
+                        {entry.status === "booked" ? "In-Queue" : entry.status}
+                      </span>
+                    </td>
+                    <td className="p-3 flex gap-2">
+                      {entry.status === "booked" && (
+                        <>
+                          <button
+                            onClick={() => updateStatus(entry.$id, "done")}
+                            className="border border-green-600 text-green-600 rounded-full px-2 py-1 text-xs hover:bg-green-50"
+                          >
+                            Done
+                          </button>
+                          <button
+                            onClick={() => updateStatus(entry.$id, "missed")}
+                            className="border border-red-600 text-red-600 rounded-full px-2 py-1 text-xs hover:bg-red-50"
+                          >
+                            Missed
+                          </button>
+                        </>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>

-          {/* Pagination */}
-          <div className={`flex justify-between items-center mt-4 ${darkMode ? 'text-white' : 'text-gray-700'
-            }`}>
-            <button
-              disabled={currentPage === 1}
-              onClick={() => setCurrentPage((prev) => prev - 1)}
-              className="px-3 py-1 border rounded disabled:opacity-50"
+            {/* Pagination */}
+            <div
+              className={`flex justify-between items-center mt-6 ${
+                darkMode ? "text-white" : "text-gray-700"
+              }`}
            >
-              Previous
-            </button>
-            <span className="text-sm">
-              Page {currentPage} of {totalPages}
-            </span>
-            <button
-              disabled={currentPage === totalPages}
-              onClick={() => setCurrentPage((prev) => prev + 1)}
-              className="px-3 py-1 border rounded disabled:opacity-50"
-            >
-              Next
-            </button>
-          </div>
-        </>
-      )}
+              <button
+                disabled={currentPage === 1}
+                onClick={() => setCurrentPage((prev) => prev - 1)}
+                className="px-3 py-1 border rounded disabled:opacity-50"
+              >
+                Previous
+              </button>
+              <span className="text-sm">
+                Page {currentPage} of {totalPages}
+              </span>
+              <button
+                disabled={currentPage === totalPages}
+                onClick={() => setCurrentPage((prev) => prev + 1)}
+                className="px-3 py-1 border rounded disabled:opacity-50"
+              >
+                Next
+              </button>
+            </div>
+          </>
+        )}
+      </div>
    </div>
  );
-}
+}
--- a/src/app/signup/page.js
+++ b/src/app/signup/page.js
@ -107,7 +107,7 @@ export default function SignUpPage() {
        {/* Left side - Form */}
        <div className="lg:w-1/2 w-full flex flex-col items-center justify-center p-4">
          <div className="w-full max-w-md">
-            <div className="w-full max-w-md pt-5 mx-auto sm:py-10">
+            {/* <div className="w-full max-w-md pt-5 mx-auto sm:py-10">
              <Link
                href="/dashboard"
                className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@ -130,7 +130,7 @@ export default function SignUpPage() {
                </svg>
                Back to dashboard
              </Link>
-            </div>
+            </div> */}
            
            <div className="mb-5 sm:mb-8">
              <h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
Author	SHA1	Message	Date
ATUL GUNJAL	a30cf6fd60	Merge pull request 'Token table caching issue resolved' (#5 ) from dev/TokenTableCachingIssue into main Reviewed-on: #5	2025-05-19 06:10:16 +00:00
Atul Gunjal	febea32de8	Token table caching issue resolved	2025-05-19 11:39:00 +05:30
ATUL GUNJAL	2d9b89fdd8	Merge pull request 'dev/loading-animation-searchbox-mahima' (#4 ) from dev/loading-animation-searchbox-mahima into main Reviewed-on: #4	2025-05-13 12:00:30 +00:00
Mahima Sonwane	3c7ff4cceb	Delete Unwanted Sigup Signin Folders	2025-05-13 17:01:28 +05:30
Mahima Sonwane	82a05e5c6d	Same loading animation on all pages and Updated search box style in entries table to match navbar	2025-05-13 16:59:36 +05:30
Mahima Sonwane	71a0ebef34	Updated search box style in entries table to match navbar and Same loading animation on all pages	2025-05-13 16:43:31 +05:30
ATUL GUNJAL	e7d9b6966b	Merge pull request 'Bug fixed Logout Sidebar' (#3 ) from dev/dashboard-rbac into main Reviewed-on: #3	2025-05-13 07:02:47 +00:00
Mahima Sonwane	50484287f2	Bug fixed Logout Sidebar	2025-05-13 12:27:24 +05:30
ATUL GUNJAL	f9ea8901d5	Merge pull request 'FixedTheBugOfHeaderInMultiBooking' (#2 ) from dev/fixTheBugOfHeaderInMultiBooking-sajan into main Reviewed-on: #2	2025-05-13 06:40:20 +00:00
sajan moon	7c3e0dad13	FixedTheBugOfHeaderInMultiBooking	2025-05-13 12:00:55 +05:30
ATUL GUNJAL	34a4d7b05a	Merge pull request 'dev/ui-changes-atul' (#1 ) from dev/ui-changes-atul into main Reviewed-on: #1	2025-05-08 07:56:39 +00:00
Atul Gunjal	3f96a8203d	recovered collection, removed "alert" & "back to dashboard"	2025-05-08 13:04:43 +05:30