Updated search box style in entries table to match navbar and Same loading animation on all pages
This commit is contained in:
Mahima Sonwane
parent
e7d9b6966b
commit
71a0ebef34
@ -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-500"
|
||||
}`}
|
||||
></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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user