Atul/PatientProTokenRepository
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Atul:e7d9b6966b637b740466704a7785d74e47e40c5e
Branches Tags
Atul:main
Atul:dev/ui-changes-atul
Atul:dev/TokenTableCachingIssue
Atul:dev/loading-animation-searchbox-mahima
Atul:dev/dashboard-rbac
Atul:dev/fixTheBugOfHeaderInMultiBooking-sajan
Atul:dev/ui-changes-sajan
Atul:dev/ui-changes-mahima
Atul:dev/ui-work
Atul:feature/token-management
...
compare: Atul:3c7ff4cceb0f8d671216c8666fdf5140013d2b16
Branches Tags
Atul:dev/ui-changes-atul
Atul:main
Atul:dev/TokenTableCachingIssue
Atul:dev/loading-animation-searchbox-mahima
Atul:dev/dashboard-rbac
Atul:dev/fixTheBugOfHeaderInMultiBooking-sajan
Atul:dev/ui-changes-sajan
Atul:dev/ui-changes-mahima
Atul:dev/ui-work
Atul:feature/token-management

3 Commits
e7d9b6966b ... 3c7ff4cceb

Author SHA1 Message Date
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
2 changed files with 270 additions and 289 deletions
Show Stats Expand all files Collapse all files

281
src/app/components/TokenTable.jsx
View File

@ -55,15 +55,15 @@ export default function TokenTable({ statusFilter }) {
const applyFilters = (data, search) => { const applyFilters = (data, search) => {
let filtered = data.filter((entry) => { let filtered = data.filter((entry) => {
const matchesSearch = const matchesSearch =
entry.patientName.toLowerCase().includes(search.toLowerCase()) || entry.patientName.toLowerCase().includes(search.toLowerCase()) ||
entry.tokenNumber.toString().includes(search); entry.tokenNumber.toString().includes(search);
const matchesFilter = const matchesFilter =
statusFilter === "all" || statusFilter === "all" ||
entry.status === statusFilter || entry.status === statusFilter ||
(statusFilter === "booked" && entry.status === "booked"); (statusFilter === "booked" && entry.status === "booked");
return matchesSearch && matchesFilter; return matchesSearch && matchesFilter;
}); });
setFilteredEntries(filtered); setFilteredEntries(filtered);
@ -96,162 +96,153 @@ export default function TokenTable({ statusFilter }) {
// Handle theme loading state // Handle theme loading state
if (darkMode === undefined) { if (darkMode === undefined) {
return ( return (
<div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}> <div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
<div className="text-center"> <div className="text-center">
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${ <div
darkMode === true ? 'border-gray-100' : 'border-gray-900' className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${darkMode === true ? "border-gray-100" : "border-blue-400"
}`}></div> }`}
<p className={`mt-4 text-lg font-semibold ${ ></div>
darkMode === true ? 'text-gray-100' : 'text-gray-900' <p className={`mt-4 text-lg font-semibold ${darkMode === true ? 'text-gray-100' : 'text-gray-900'
}`}> }`}>
Loading... Loading...
</p> </p>
</div>
</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> </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 ( if (error) return (
<div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}> <div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}>
Error: {error} Error: {error}
</div> </div>
); );
return ( return (
<div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}> <div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
<input <input
type="text" type="text"
placeholder="Search by token or name" placeholder="Search by token or name"
className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${ className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${darkMode
darkMode ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
? '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' : 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500'
}`} }`}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
{filteredEntries.length === 0 ? ( {filteredEntries.length === 0 ? (
<div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}> <div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}>
No entries found. No entries found.
</div> </div>
) : ( ) : (
<> <>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full border-collapse"> <table className="w-full border-collapse">
<thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}> <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
<tr> <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'}`}>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'}`}>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'}`}>Status</th>
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th> <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{currentEntries.map((entry) => ( {currentEntries.map((entry) => (
<tr <tr
key={entry.$id} key={entry.$id}
className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`} 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 font-mono">{entry.tokenNumber}</td>
<td className="p-3">{entry.patientName}</td> <td className="p-3">{entry.patientName}</td>
<td className="p-3"> <td className="p-3">
<span <span
className={`px-2 py-1 rounded-full text-xs font-semibold ${ className={`px-2 py-1 rounded-full text-xs font-semibold ${entry.status === "done"
entry.status === "done" ? darkMode
? darkMode ? "bg-green-900 text-green-100"
? "bg-green-900 text-green-100"
: "bg-green-100 text-green-800" : "bg-green-100 text-green-800"
: entry.status === "booked" : entry.status === "booked"
? darkMode ? darkMode
? "bg-yellow-900 text-yellow-100" ? "bg-yellow-900 text-yellow-100"
: "bg-yellow-100 text-yellow-800" : "bg-yellow-100 text-yellow-800"
: darkMode : darkMode
? "bg-red-900 text-red-100" ? "bg-red-900 text-red-100"
: "bg-red-100 text-red-800" : "bg-red-100 text-red-800"
}`} }`}
> >
{entry.status === "booked" ? "In-Queue" : entry.status} {entry.status === "booked" ? "In-Queue" : entry.status}
</span> </span>
</td> </td>
<td className="p-3 flex gap-2"> <td className="p-3 flex gap-2">
{entry.status === "booked" && ( {entry.status === "booked" && (
<> <>
<button <button
onClick={() => updateStatus(entry.$id, "done")} onClick={() => updateStatus(entry.$id, "done")}
className={`border rounded-full px-2 py-1 text-xs transition-colors ${ className={`border rounded-full px-2 py-1 text-xs transition-colors ${darkMode
darkMode
? 'border-green-400 text-green-400 hover:bg-green-900' ? 'border-green-400 text-green-400 hover:bg-green-900'
: 'border-green-600 text-green-600 hover:bg-green-50' : 'border-green-600 text-green-600 hover:bg-green-50'
}`} }`}
> >
Done Done
</button> </button>
<button <button
onClick={() => updateStatus(entry.$id, "missed")} onClick={() => updateStatus(entry.$id, "missed")}
className={`border rounded-full px-2 py-1 text-xs transition-colors ${ className={`border rounded-full px-2 py-1 text-xs transition-colors ${darkMode
darkMode
? 'border-red-400 text-red-400 hover:bg-red-900' ? 'border-red-400 text-red-400 hover:bg-red-900'
: 'border-red-600 text-red-600 hover:bg-red-50' : 'border-red-600 text-red-600 hover:bg-red-50'
}`} }`}
> >
Missed Missed
</button> </button>
</> </>
)} )}
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
<div className={`flex justify-between items-center mt-4 p-2 rounded ${ <div className={`flex justify-between items-center mt-4 p-2 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-100'
darkMode ? 'bg-gray-800' : 'bg-gray-100' }`}>
}`}> <button
<button disabled={currentPage === 1}
disabled={currentPage === 1} onClick={() => setCurrentPage((prev) => prev - 1)}
onClick={() => setCurrentPage((prev) => prev - 1)} className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${darkMode
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${ ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
darkMode
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent' : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
}`} }`}
> >
Previous Previous
</button> </button>
<span className="text-sm"> <span className="text-sm">
Page {currentPage} of {totalPages} Page {currentPage} of {totalPages}
</span> </span>
<button <button
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
onClick={() => setCurrentPage((prev) => prev + 1)} onClick={() => setCurrentPage((prev) => prev + 1)}
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${ className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${darkMode
darkMode ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent' : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
}`} }`}
> >
Next Next
</button> </button>
</div> </div>
</> </>
)} )}
</div> </div>
); );
} }

278
src/app/pages/entries/EntriesTable.js
View File

@ -1,4 +1,3 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { databases, Query } from "../../lib/appwrite"; 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 Header from "../../components/partials/header";
import { useTheme } from "../../context/ThemeContext"; import { useTheme } from "../../context/ThemeContext";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import { FaSearch } from 'react-icons/fa';
export default function EntriesTable() { export default function EntriesTable() {
const { userRole } = useAuth(); const { userRole } = useAuth();
@ -14,7 +14,7 @@ export default function EntriesTable() {
const [filteredEntries, setFilteredEntries] = useState([]); const [filteredEntries, setFilteredEntries] = useState([]);
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [avgConsultTime, setAvgConsultTime] = useState(15); // Default 15 mins const [avgConsultTime, setAvgConsultTime] = useState(15);
const entriesPerPage = 20; const entriesPerPage = 20;
const [currentToken, setCurrentToken] = useState(null); const [currentToken, setCurrentToken] = useState(null);
@ -24,7 +24,6 @@ export default function EntriesTable() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
// Calculate waiting time based on position in queue
const calculateWaitTime = (tokenNumber) => { const calculateWaitTime = (tokenNumber) => {
const bookedEntries = entries.filter((e) => e.status === "booked"); const bookedEntries = entries.filter((e) => e.status === "booked");
const position = bookedEntries.findIndex( const position = bookedEntries.findIndex(
@ -58,19 +57,13 @@ export default function EntriesTable() {
return; return;
} }
const currentIndex = entries.findIndex( const currentIndex = entries.findIndex((entry) => entry.status === "booked");
(entry) => entry.status === "booked"
);
const current = currentIndex >= 0 ? entries[currentIndex] : null; const current = currentIndex >= 0 ? entries[currentIndex] : null;
setCurrentToken(current?.tokenNumber || null); setCurrentToken(current?.tokenNumber || null);
setPreviousToken( setPreviousToken(currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null);
currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null
);
setNextToken( setNextToken(
currentIndex < entries.length - 1 currentIndex < entries.length - 1 ? entries[currentIndex + 1]?.tokenNumber : null
? entries[currentIndex + 1]?.tokenNumber
: null
); );
const missed = entries const missed = entries
@ -99,18 +92,13 @@ export default function EntriesTable() {
}; };
useEffect(() => { useEffect(() => {
if (userRole === "patient") return; // Don't load data if patient if (userRole === "patient") return;
const loadData = async () => { const loadData = async () => {
try { try {
const data = await getEntries(); const data = await getEntries();
setEntries(data); setEntries(data);
setFilteredEntries(data); setFilteredEntries(data);
updateTokenInfo(data); updateTokenInfo(data);
// Load settings (avg consultation time)
// const settings = await getSettings();
// setAvgConsultTime(settings?.avgConsultationTime || 15);
} catch (err) { } catch (err) {
setError(err.message); setError(err.message);
} finally { } finally {
@ -133,32 +121,22 @@ export default function EntriesTable() {
const indexOfLastEntry = currentPage * entriesPerPage; const indexOfLastEntry = currentPage * entriesPerPage;
const indexOfFirstEntry = indexOfLastEntry - entriesPerPage; const indexOfFirstEntry = indexOfLastEntry - entriesPerPage;
const currentEntries = filteredEntries.slice( const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry);
indexOfFirstEntry,
indexOfLastEntry
);
const totalPages = Math.ceil(filteredEntries.length / entriesPerPage); const totalPages = Math.ceil(filteredEntries.length / entriesPerPage);
if (loading) if (loading)
return ( return (
<div className="text-center mt-50"> <div className="text-center mt-20">
<div <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto`} <p className="mt-4 text-lg font-semibold">Loading...</p>
></div>
<p className={`mt-4 text-lg font-semibold`}>Loading...</p>
</div> </div>
); );
if (error) return <div className="p-4 text-red-500">Error: {error}</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") { if (userRole === "patient") {
return ( return (
<div <div className={`min-h-screen w-full ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}>
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="flex items-center justify-center h-screen">
<div className="text-center"> <div className="text-center">
<h1 className="text-2xl font-bold mb-4">Access Denied</h1> <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
@ -170,129 +148,141 @@ export default function EntriesTable() {
} }
return ( return (
<div <div className={`min-h-screen w-full ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}>
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"> <div className="sticky top-0 z-10 bg-white shadow-md mb-4">
<Header <Header
currentToken={currentToken} currentToken={currentToken}
previousToken={previousToken} previousToken={previousToken}
nextToken={nextToken} nextToken={nextToken}
missedTokens={missedTokens} missedTokens={missedTokens}
entries={entries} // Pass the entries data entries={entries}
/> />
</div> </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">
<div className="p-4">No entries found for today.</div> <h1 className="text-2xl font-bold mb-4">Today&apos;s Entries</h1>
) : ( <div className={`
<> hidden md:flex items-center gap-[2px]
<table className="w-full border-collapse"> border ${darkMode ? 'border-gray-600 bg-gray-800' : 'border-gray-300 bg-white'}
<thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}> p-2 rounded-lg
<tr> h-[45px] w-[300px] lg:w-[400px] ml-2 mb-6
<th className="p-3 text-left">Token</th> transition-colors duration-300
<th className="p-3 text-left">Name</th> focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-opacity-50
{/* <th className="p-3 text-left">Booked By</th> */} ${darkMode ? 'focus-within:border-gray-500' : 'focus-within:border-blue-500'}
<th className="p-3 text-left">Status</th> `}>
{/* <th className="p-3 text-left">Wait Time</th> */} <div className="relative flex-1">
<th className="p-3 text-left">Actions</th> <FaSearch className={`
</tr> absolute left-3 top-1/2 transform -translate-y-1/2
</thead> ${darkMode ? 'text-gray-400' : 'text-gray-500'}
<tbody> `} />
{currentEntries.map((entry) => ( <input
<tr type="text"
key={entry.$id} placeholder="Search by token or name"
className={`border ${ className={`
darkMode ? "border-gray-700" : "border-gray-200" w-full bg-transparent border-none
}`} pl-10 pr-10 py-2
> focus:outline-none
<td className="p-3 font-mono">{entry.tokenNumber}</td> ${darkMode ? 'text-gray-200 placeholder-gray-500' : 'text-gray-800 placeholder-gray-400'}
<td className="p-3">{entry.patientName}</td> text-sm
{/* <td className="p-3"> `}
<span className={`text-xs px-2 py-1 rounded ${entry.bookedBy === 'staff' ? value={searchQuery}
'bg-purple-100 text-purple-800' : onChange={(e) => setSearchQuery(e.target.value)}
'bg-blue-100 text-blue-800' />
}`}> </div>
{entry.bookedBy} <div className={`
</span> px-2 py-1
</td> */} ${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-500'}
<td className="p-3"> text-xs rounded-md
<span font-mono
className={`px-2 py-1 rounded-full text-xs ${ `}>
entry.status === "done" ⌘K
? "bg-green-100 text-green-800" </div>
: entry.status === "booked" </div>
? "bg-yellow-100 text-yellow-800"
: "bg-red-100 text-red-800" {filteredEntries.length === 0 ? (
} font-semibold`} <div className="p-4">No entries found for today.</div>
> ) : (
{entry.status === "booked" ? "In-Queue" : entry.status} <>
</span> <table className="w-full border-collapse">
</td> <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
{/* <td className="p-3"> <tr>
{entry.status === "booked" ? <th className="p-3 text-left">Token</th>
`~${calculateWaitTime(entry.tokenNumber)} mins` : <th className="p-3 text-left">Name</th>
'-'} <th className="p-3 text-left">Status</th>
</td> */} <th className="p-3 text-left">Actions</th>
<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> </tr>
))} </thead>
</tbody> <tbody>
</table> {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 */} {/* Pagination */}
<div <div
className={`flex justify-between items-center mt-4 ${ className={`flex justify-between items-center mt-6 ${
darkMode ? "text-white" : "text-gray-700" 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
</button> disabled={currentPage === 1}
<span className="text-sm"> onClick={() => setCurrentPage((prev) => prev - 1)}
Page {currentPage} of {totalPages} className="px-3 py-1 border rounded disabled:opacity-50"
</span> >
<button Previous
disabled={currentPage === totalPages} </button>
onClick={() => setCurrentPage((prev) => prev + 1)} <span className="text-sm">
className="px-3 py-1 border rounded disabled:opacity-50" Page {currentPage} of {totalPages}
> </span>
Next <button
</button> disabled={currentPage === totalPages}
</div> onClick={() => setCurrentPage((prev) => prev + 1)}
</> className="px-3 py-1 border rounded disabled:opacity-50"
)} >
Next
</button>
</div>
</>
)}
</div>
</div> </div>
); );
} }