Updated Dashboard

src/app/dashboard/page.js

@@ -4,6 +4,7 @@ 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() {
@@ -37,105 +38,7 @@ export default function DashboardPage() {
 
   return (
     <div className="min-h-screen bg-white dark:bg-gray-900 p-6">
-      <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>
+      <EntriesTable />
     </div>
   );
 }

src/app/pages/entries/EntriesTable.js

@@ -0,0 +1,270 @@
+"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>
+  );
+}