Added Booking Pages To Sidebar

src/app/dashboard/page.js

@@ -4,7 +4,6 @@ import { useRouter } from "next/navigation";
 import { useAuth } from "../context/AuthContext";
 import { useEffect } from "react";
 import { useTheme } from "../context/ThemeContext";
-import EntriesTable from "../pages/entries/EntriesTable";
 
 
 export default function DashboardPage() {
@@ -38,7 +37,105 @@ export default function DashboardPage() {
 
   return (
     <div className="min-h-screen bg-white dark:bg-gray-900 p-6">
-      <EntriesTable />
+      <h1 className={`text-3xl font-bold mb-6 ${darkMode ? 'text-white' : 'text-gray-900'}`}>
+        Dashboard
+      </h1>
+  {/* -------------user role-------------- */}
+  <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
+  User Profile
+</h2>
+<div className="flex items-center space-x-4">
+  <div className={`w-16 h-16 rounded-full ${darkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
+  <div>
+    <p className={`font-medium ${darkMode ? 'text-white' : 'text-gray-800'}`}>John Doe</p>
+    <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>john@example.com</p>
+    <p className={`text-xs mt-1 ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>Role: {userRole}</p> {/* 👈 Added */}
+  </div>
+</div>
+{/*  */}
+
+      {/* 2x2 Grid Layout */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        {/* Box 1 - User Profile */}
+        <div className={`p-6 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
+          <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
+            User Profile
+          </h2>
+          <div className="flex items-center space-x-4">
+            <div className={`w-16 h-16 rounded-full ${darkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
+            <div>
+              <p className={`font-medium ${darkMode ? 'text-white' : 'text-gray-800'}`}>John Doe</p>
+              <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>john@example.com</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Box 2 - Statistics */}
+        <div className={`p-6 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
+          <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
+            Statistics
+          </h2>
+          <div className="grid grid-cols-2 gap-4">
+            <div className={`p-3 rounded ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
+              <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Projects</p>
+              <p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-gray-800'}`}>12</p>
+            </div>
+            <div className={`p-3 rounded ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
+              <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Tasks</p>
+              <p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-gray-800'}`}>24</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Box 3 - Recent Activity */}
+        <div className={`p-6 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
+          <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
+            Recent Activity
+          </h2>
+          <div className="space-y-3">
+            <div className="flex items-start">
+              <div className={`w-2 h-2 mt-2 rounded-full ${darkMode ? 'bg-blue-400' : 'bg-blue-500'}`}></div>
+              <div className="ml-3">
+                <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Logged in</p>
+                <p className={`text-xs ${darkMode ? 'text-gray-500' : 'text-gray-400'}`}>2 minutes ago</p>
+              </div>
+            </div>
+            <div className="flex items-start">
+              <div className={`w-2 h-2 mt-2 rounded-full ${darkMode ? 'bg-green-400' : 'bg-green-500'}`}></div>
+              <div className="ml-3">
+                <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Project created</p>
+                <p className={`text-xs ${darkMode ? 'text-gray-500' : 'text-gray-400'}`}>15 minutes ago</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Box 4 - Quick Actions */}
+        <div className={`p-6 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
+          <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
+            Quick Actions
+          </h2>
+          <div className="grid grid-cols-2 gap-3">
+            <button className={`py-2 px-3 rounded-md text-sm font-medium ${darkMode ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-blue-100 hover:bg-blue-200 text-blue-800'}`}>
+              New Project
+            </button>
+            <button className={`py-2 px-3 rounded-md text-sm font-medium ${darkMode ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-green-100 hover:bg-green-200 text-green-800'}`}>
+              Add Task
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Additional content can go here */}
+      <div className={`mt-6 p-6 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
+        <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
+          Welcome to Your Dashboard
+        </h2>
+        <p className={darkMode ? 'text-gray-300' : 'text-gray-600'}>
+          This is a simple dashboard layout with four main components arranged in a 2x2 grid.
+          You can easily add more components or modify these boxes as needed.
+        </p>
+      </div>
     </div>
   );
 }

src/app/layout.js

@@ -5,7 +5,7 @@ import { AuthProvider } from "./context/AuthContext";
 import ClientLayout from "./ClientLayout";
 
 export const metadata = {
-  title: "PatientPro",
+  title: "Report Management System",
   description: "Generated by create next app",
 };
 

src/app/not-found.js

@@ -1,66 +0,0 @@
-// app/not-found.js (not in a 'page.js' file)
-"use client"; // Add this since you're using client-side features
-
-import Link from "next/link";
-import Image from "next/image";
-import { useEffect } from "react";
-
-export default function NotFound() {
-  useEffect(() => {
-    // Client-side dark mode initialization
-    const darkMode = JSON.parse(localStorage.getItem('darkMode'));
-    if (darkMode) {
-      document.documentElement.classList.add('dark');
-      document.documentElement.classList.add('bg-gray-900');
-    }
-  }, []);
-
-  return (
-    <div className="relative z-1 flex min-h-screen flex-col items-center justify-center overflow-hidden p-6">
-      {/* Metadata - App Router style */}
-      <title>404 Error Page | TailAdmin</title>
-      <meta name="description" content="Page not found" />
-
-      {/* Centered Content */}
-      <div className="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
-        <h1 className="mb-8 text-4xl font-bold text-gray-800 dark:text-white/90">
-          ERROR
-        </h1>
-
-        {/* Optimized Images */}
-        <Image
-          src="/images/error/404.svg"
-          alt="404"
-          width={400}
-          height={300}
-          className="dark:hidden mx-auto"
-          priority
-        />
-        <Image
-          src="/images/error/404-dark.svg"
-          alt="404"
-          width={400}
-          height={300}
-          className="hidden dark:block mx-auto"
-          priority
-        />
-
-        <p className="mb-6 mt-10 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
-          We can&#39;t seem to find the page you are looking for!
-        </p>
-
-        <Link
-          href="/"
-          className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
-        >
-          Back to Home Page
-        </Link>
-      </div>
-
-      {/* Footer */}
-      <p className="absolute bottom-6 left-1/2 -translate-x-1/2 text-center text-sm text-gray-500 dark:text-gray-400">
-        &copy; {new Date().getFullYear()} - TailAdmin
-      </p>
-    </div>
-  );
-}

src/app/not-found/page.js

@@ -0,0 +1,74 @@
+import Link from "next/link";
+import Head from "next/head";
+import Image from "next/image";
+
+export default function NotFound() {
+  return (
+    <>
+      <Head>
+        <title>404 Error Page | TailAdmin</title>
+        <meta charSet="UTF-8" />
+        <meta
+          name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+        />
+      </Head>
+
+      <div className="relative z-1 flex min-h-screen flex-col items-center justify-center overflow-hidden p-6">
+        {/* Centered Content */}
+        <div className="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
+          <h1 className="mb-8 text-4xl font-bold text-gray-800 dark:text-white/90">
+            ERROR
+          </h1>
+
+          {/* Optimized Images */}
+          <Image
+            src="/images/error/404.svg"
+            alt="404"
+            width={400}
+            height={300}
+            className="dark:hidden mx-auto"
+          />
+          <Image
+            src="/images/error/404-dark.svg"
+            alt="404"
+            width={400}
+            height={300}
+            className="hidden dark:block mx-auto"
+          />
+
+          <p className="mb-6 mt-10 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
+            We can&#39;t seem to find the page you are looking for!
+          </p>
+
+          <Link
+            href="/"
+            className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
+          >
+            Back to Home Page
+          </Link>
+        </div>
+
+        {/* Footer */}
+        <p className="absolute bottom-6 left-1/2 -translate-x-1/2 text-center text-sm text-gray-500 dark:text-gray-400">
+          &copy; {new Date().getFullYear()} - TailAdmin
+        </p>
+      </div>
+
+      {/* Initialize dark mode with vanilla JS */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+          document.addEventListener('DOMContentLoaded', () => {
+            const darkMode = JSON.parse(localStorage.getItem('darkMode'));
+            if (darkMode) {
+              document.documentElement.classList.add('dark');
+              document.documentElement.classList.add('bg-gray-900');
+            }
+          });
+        `,
+        }}
+      />
+    </>
+  );
+}

src/app/pages/MultiBooked/page.js

@@ -166,7 +166,7 @@ const createEntries = async () => {
                 >
                   {loading ? 'Creating Tokens...' : 'Create Tokens'}
                 </button>
-                <a href="/pages/entries" className="w-full">
+                <a href="pages/entries" className="w-full">
                   <button
                     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' :

src/app/pages/SingleBooked/page.js

@@ -1,13 +1,12 @@
 "use client";
-import { Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { useEffect, useState, useRef } from 'react';
-import { databases, ID, Query } from "../../lib/appwrite";
+import { useEffect, useState, useRef  } from 'react';
+import { databases, ID, Query } from "../../lib/appwrite"; // Added Query import
 import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
 import Header from '../../components/partials/header';
 import Link from 'next/link';
 
-function SingleBookedContent() {
+export default function SingleBooked() {
   const searchParams = useSearchParams();
   const nameParam = searchParams.get('name');
   const dateParam = searchParams.get('date');
@@ -21,6 +20,7 @@ function SingleBookedContent() {
 
   const generateTokenNumber = async (date) => {
     try {
+      // Get the highest token number for the date
       const response = await databases.listDocuments(
         DATABASE_ID,
         COLLECTION_ID,
@@ -35,45 +35,45 @@ function SingleBookedContent() {
       return (parseInt(lastToken) + 1).toString().padStart(3, '0');
     } catch (error) {
       console.error("Token generation error:", error);
-      return "001";
+      return "001"; // Fallback token number
+    }
+  };
+
+  const createBooking = async () => {
+    if (bookingCreated.current) return; // Prevent duplicate calls
+    
+    try {
+      bookingCreated.current = true; // Mark as created
+      setLoading(true);
+      setError(null);
+
+      const generatedToken = await generateTokenNumber(appointmentDate);
+
+      await databases.createDocument(
+        DATABASE_ID,
+        COLLECTION_ID,
+        ID.unique(),
+        {
+          tokenNumber: generatedToken,
+          date: appointmentDate,
+          patientName: name,
+          status: "booked",
+          bookedBy: "staff",
+          patientId: ID.unique(),
+        }
+      );
+
+      setToken(generatedToken);
+    } catch (error) {
+      console.error("Booking error:", error);
+      setError(error.message);
+      bookingCreated.current = false; // Reset on error to allow retry
+    } finally {
+      setLoading(false);
     }
   };
 
   useEffect(() => {
-    const createBooking = async () => {
-      if (bookingCreated.current) return;
-      
-      try {
-        bookingCreated.current = true;
-        setLoading(true);
-        setError(null);
-  
-        const generatedToken = await generateTokenNumber(appointmentDate);
-  
-        await databases.createDocument(
-          DATABASE_ID,
-          COLLECTION_ID,
-          ID.unique(),
-          {
-            tokenNumber: generatedToken,
-            date: appointmentDate,
-            patientName: name,
-            status: "booked",
-            bookedBy: "staff",
-            patientId: ID.unique(),
-          }
-        );
-  
-        setToken(generatedToken);
-      } catch (error) {
-        console.error("Booking error:", error);
-        setError(error.message);
-        bookingCreated.current = false;
-      } finally {
-        setLoading(false);
-      }
-    };
-  
     if (name && appointmentDate) {
       createBooking();
     }
@@ -125,12 +125,4 @@ function SingleBookedContent() {
       </div>
     </div>
   );
-}
-
-export default function SingleBooked() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <SingleBookedContent />
-    </Suspense>
-  );
 }

src/app/pages/SingleBooking/page.js

@@ -36,7 +36,7 @@ export default function SingleBooking() {
     // Get current date in YYYY-MM-DD format
     const today = new Date();
     const appointmentDate = today.toISOString().split('T')[0];
-
+    
     // Navigate to confirmation page with name and current date as query params
     router.push(`/pages/SingleBooked?name=${encodeURIComponent(name)}&date=${encodeURIComponent(appointmentDate)}`);
   };
@@ -93,7 +93,7 @@ export default function SingleBooking() {
               </form>
 
               <div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-300">
-                Note: Token booking is available for today&apos;s date only.
+                Note: Token booking is available for today's date only.
               </div>
             </div>
           </main>

src/app/pages/StaffBooking/page.js

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { databases, Query } from "../../lib/appwrite";
+import { databases,Query } from "../../lib/appwrite";
 import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
 import Header from "../../components/partials/header";
 import { useTheme } from "../../context/ThemeContext";
@@ -68,7 +68,7 @@ export default function StaffBooking() {
                         {/* Statistics Overview */}
                         <div className={`mb-8 p-6 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-gray-50'} border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
                             <h3 className={`text-lg font-medium mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
-                                Today&apos;s Overview
+                                Today's Overview
                             </h3>
                             <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                                 <div className={`p-4 rounded-lg text-center ${darkMode ? 'bg-gray-700' : 'bg-white'} border ${darkMode ? 'border-gray-600' : 'border-gray-200'}`}>
@@ -95,8 +95,8 @@ export default function StaffBooking() {
                                 <div
                                     onClick={() => router.push('/pages/SingleBooking')}
                                     className={`p-6 cursor-pointer rounded-lg border transition-all hover:shadow-md ${darkMode ?
-                                        'bg-gray-800 border-gray-700 hover:border-blue-600 hover:bg-gray-700' :
-                                        'bg-white border-gray-200 hover:border-blue-500 hover:bg-blue-50'
+                                            'bg-gray-800 border-gray-700 hover:border-blue-600 hover:bg-gray-700' :
+                                            'bg-white border-gray-200 hover:border-blue-500 hover:bg-blue-50'
                                         }`}
                                 >
                                     <div className="flex items-center gap-4">
@@ -117,8 +117,8 @@ export default function StaffBooking() {
                                 <div
                                     onClick={() => router.push('/pages/MultiBooking')}
                                     className={`p-6 cursor-pointer rounded-lg border transition-all hover:shadow-md ${darkMode ?
-                                        'bg-gray-800 border-gray-700 hover:border-blue-600 hover:bg-gray-700' :
-                                        'bg-white border-gray-200 hover:border-blue-500 hover:bg-blue-50'
+                                            'bg-gray-800 border-gray-700 hover:border-blue-600 hover:bg-gray-700' :
+                                            'bg-white border-gray-200 hover:border-blue-500 hover:bg-blue-50'
                                         }`}
                                 >
                                     <div className="flex items-center gap-4">

src/app/pages/entries/EntriesTable.js

@@ -1,270 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import { databases, Query } from "../../lib/appwrite";
-import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
-import Header from "../../components/partials/header";
-import { useTheme } from "../../context/ThemeContext";
-import { useAuth } from "../../context/AuthContext";
-
-export default function EntriesTable() {
-  const { userRole } = useAuth();
-  const { darkMode } = useTheme();
-  const [entries, setEntries] = useState([]);
-  const [filteredEntries, setFilteredEntries] = useState([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
-  const [avgConsultTime, setAvgConsultTime] = useState(15); // Default 15 mins
-  const entriesPerPage = 20;
-
-  const [currentToken, setCurrentToken] = useState(null);
-  const [previousToken, setPreviousToken] = useState(null);
-  const [nextToken, setNextToken] = useState(null);
-  const [missedTokens, setMissedTokens] = useState("");
-  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 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;
-    }
-  };
-
-  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");
-  };
-
-  const updateStatus = async (entryId, newStatus) => {
-    try {
-      setLoading(true);
-      await databases.updateDocument(
-        DATABASE_ID,
-        COLLECTION_ID,
-        entryId,
-        { status: newStatus }
-      );
-      const data = await getEntries();
-      setEntries(data);
-      setFilteredEntries(data);
-      updateTokenInfo(data);
-    } catch (error) {
-      console.error("Update error:", error);
-      setError(error.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (userRole === "patient") return; // Don't load data if patient
-
-    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 {
-        setLoading(false);
-      }
-    };
-    loadData();
-  }, [userRole]);
-
-  useEffect(() => {
-    const filtered = entries.filter((entry) => {
-      return (
-        entry.patientName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        entry.tokenNumber.toString().includes(searchQuery)
-      );
-    });
-    setFilteredEntries(filtered);
-    setCurrentPage(1);
-  }, [searchQuery, entries]);
-
-  const indexOfLastEntry = currentPage * entriesPerPage;
-  const indexOfFirstEntry = indexOfLastEntry - entriesPerPage;
-  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 (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="flex items-center justify-center h-screen">
-          <div className="text-center">
-            <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
-            <p>You don&apos;t have permission to view this page.</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <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}
-        />
-      </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>
-                </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"
-            >
-              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>
-  );
-}

src/app/pages/entries/page.js

@@ -95,14 +95,14 @@ export default function EntriesTable() {
 
   useEffect(() => {
     if (userRole === "patient") return; // Don't load data if patient
-
+    
     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);
@@ -145,7 +145,7 @@ export default function EntriesTable() {
         <div className="flex items-center justify-center h-screen">
           <div className="text-center">
             <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
-            <p>You don&apos;t have permission to view this page.</p>
+            <p>You don't have permission to view this page.</p>
           </div>
         </div>
       </div>
@@ -162,7 +162,8 @@ export default function EntriesTable() {
           missedTokens={missedTokens}
         />
       </div>
-      <h1 className="text-2xl font-bold mb-4">Today&apos;s Entries</h1>
+      <h1 className="text-2xl font-bold mb-4">Today's Entries</h1>
+
       <input
         type="text"
         placeholder="Search by token or name"
@@ -182,43 +183,45 @@ export default function EntriesTable() {
                 <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">Wait Time</th>
                 <th className="p-3 text-left">Actions</th>
               </tr>
             </thead>
             <tbody>
               {currentEntries.map((entry) => (
-                <tr
-                  key={entry.$id}
+                <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'
-                      }`}>
+                    <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"
+                      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`}
+                      } font-semibold`}
                     >
-                      {entry.status === "booked" ? "In-Queue" : entry.status}
+                      {entry.status}
                     </span>
                   </td>
-                  {/* <td className="p-3">
-                    {entry.status === "booked" ?
-                      `~${calculateWaitTime(entry.tokenNumber)} mins` :
+                  <td className="p-3">
+                    {entry.status === "booked" ? 
+                      `~${calculateWaitTime(entry.tokenNumber)} mins` : 
                       '-'}
-                  </td> */}
+                  </td>
                   <td className="p-3 flex gap-2">
                     {entry.status === "booked" && (
                       <>
@@ -243,8 +246,9 @@ 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)}