Merge pull request 'dev/loading-animation-searchbox-mahima' (#4) from dev/loading-animation-searchbox-mahima into main

Reviewed-on: #4

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>
+  );
 }

src/app/pages/entries/EntriesTable.js

@@ -1,4 +1,3 @@
-
 "use client";
 import { useEffect, useState } from "react";
 import { databases, Query } from "../../lib/appwrite";
@@ -6,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();
@@ -14,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);
@@ -24,7 +24,6 @@ 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(
@@ -58,19 +57,13 @@ export default function EntriesTable() {
       return;
     }
 
-    const currentIndex = entries.findIndex(
-      (entry) => entry.status === "booked"
-    );
+    const currentIndex = entries.findIndex((entry) => entry.status === "booked");
     const current = currentIndex >= 0 ? entries[currentIndex] : null;
 
     setCurrentToken(current?.tokenNumber || null);
-    setPreviousToken(
-      currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null
-    );
+    setPreviousToken(currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null);
     setNextToken(
-      currentIndex < entries.length - 1
-        ? entries[currentIndex + 1]?.tokenNumber
-        : null
+      currentIndex < entries.length - 1 ? entries[currentIndex + 1]?.tokenNumber : null
     );
 
     const missed = entries
@@ -99,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 {
@@ -133,32 +121,22 @@ export default function EntriesTable() {
 
   const indexOfLastEntry = currentPage * entriesPerPage;
   const indexOfFirstEntry = indexOfLastEntry - entriesPerPage;
-  const currentEntries = filteredEntries.slice(
-    indexOfFirstEntry,
-    indexOfLastEntry
-  );
+  const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry);
   const totalPages = Math.ceil(filteredEntries.length / entriesPerPage);
 
   if (loading)
     return (
-      <div className="text-center mt-50">
-        <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 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>
@@ -170,129 +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>
   );
 }