Compare commits
No commits in common. "53600eb5e3b30d1556286d0e04784c59a3d0b92c" and "950442ba3e5eed8912af532ae97e559b45ef74a0" have entirely different histories.
53600eb5e3
...
950442ba3e
@ -5,253 +5,191 @@ import { DATABASE_ID, COLLECTION_ID } from "../lib/api";
|
|||||||
import { useTheme } from "../context/ThemeContext";
|
import { useTheme } from "../context/ThemeContext";
|
||||||
|
|
||||||
export default function TokenTable({ statusFilter }) {
|
export default function TokenTable({ statusFilter }) {
|
||||||
const { darkMode } = useTheme();
|
// ... (keep all your existing state and functions)
|
||||||
const [entries, setEntries] = useState([]);
|
|
||||||
const [filteredEntries, setFilteredEntries] = useState([]);
|
|
||||||
const [searchQuery, setSearchQuery] = useState("");
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const entriesPerPage = 20;
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState(null);
|
|
||||||
|
|
||||||
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 updateStatus = async (entryId, newStatus) => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
await databases.updateDocument(
|
|
||||||
DATABASE_ID,
|
|
||||||
COLLECTION_ID,
|
|
||||||
entryId,
|
|
||||||
{ status: newStatus }
|
|
||||||
);
|
|
||||||
const data = await getEntries();
|
|
||||||
setEntries(data);
|
|
||||||
applyFilters(data, searchQuery);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Update error:", error);
|
|
||||||
setError(error.message);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const applyFilters = (data, search) => {
|
|
||||||
let filtered = data.filter((entry) => {
|
|
||||||
const matchesSearch =
|
|
||||||
entry.patientName.toLowerCase().includes(search.toLowerCase()) ||
|
|
||||||
entry.tokenNumber.toString().includes(search);
|
|
||||||
|
|
||||||
const matchesFilter =
|
|
||||||
statusFilter === "all" ||
|
|
||||||
entry.status === statusFilter ||
|
|
||||||
(statusFilter === "booked" && entry.status === "booked");
|
|
||||||
|
|
||||||
return matchesSearch && matchesFilter;
|
|
||||||
});
|
|
||||||
setFilteredEntries(filtered);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const loadData = async () => {
|
|
||||||
try {
|
|
||||||
const data = await getEntries();
|
|
||||||
setEntries(data);
|
|
||||||
applyFilters(data, searchQuery);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err.message);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
loadData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
applyFilters(entries, searchQuery);
|
|
||||||
setCurrentPage(1);
|
|
||||||
}, [searchQuery, statusFilter, entries]);
|
|
||||||
|
|
||||||
const indexOfLastEntry = currentPage * entriesPerPage;
|
|
||||||
const indexOfFirstEntry = indexOfLastEntry - entriesPerPage;
|
|
||||||
const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry);
|
|
||||||
const totalPages = Math.ceil(filteredEntries.length / entriesPerPage);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Handle theme loading state
|
|
||||||
if (darkMode === undefined) {
|
|
||||||
return (
|
return (
|
||||||
<div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
|
<div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
|
||||||
<div className="text-center">
|
<input
|
||||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
|
type="text"
|
||||||
darkMode === true ? 'border-gray-100' : 'border-gray-900'
|
placeholder="Search by token or name"
|
||||||
}`}></div>
|
className={`mb-4 p-2 border rounded w-full transition-colors ${
|
||||||
<p className={`mt-4 text-lg font-semibold ${
|
darkMode
|
||||||
darkMode === true ? 'text-gray-100' : 'text-gray-900'
|
? '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'
|
||||||
Loading...
|
}`}
|
||||||
</p>
|
value={searchQuery}
|
||||||
</div>
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
</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 (
|
{filteredEntries.length === 0 ? (
|
||||||
<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-gray-800' : 'bg-gray-50'}`}>
|
||||||
Error: {error}
|
No entries found.
|
||||||
</div>
|
</div>
|
||||||
);
|
) : (
|
||||||
|
<>
|
||||||
return (
|
{/* Mobile View (Cards) */}
|
||||||
<div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
|
<div className="lg:hidden space-y-3">
|
||||||
<input
|
{currentEntries.map((entry) => (
|
||||||
type="text"
|
<div
|
||||||
placeholder="Search by token or name"
|
key={entry.$id}
|
||||||
className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${
|
className={`p-4 rounded-lg border ${
|
||||||
darkMode
|
darkMode ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'
|
||||||
? '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'
|
>
|
||||||
}`}
|
<div className="flex justify-between items-start mb-2">
|
||||||
value={searchQuery}
|
<div>
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
<p className="font-semibold">Token: {entry.tokenNumber}</p>
|
||||||
/>
|
<p className="text-sm">{entry.patientName}</p>
|
||||||
|
</div>
|
||||||
{filteredEntries.length === 0 ? (
|
<span
|
||||||
<div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}>
|
className={`px-2 py-1 rounded-full text-xs font-semibold ${
|
||||||
No entries found.
|
entry.status === "done"
|
||||||
</div>
|
? darkMode
|
||||||
) : (
|
? "bg-green-900 text-green-100"
|
||||||
<>
|
: "bg-green-100 text-green-800"
|
||||||
<div className="overflow-x-auto">
|
: entry.status === "booked"
|
||||||
<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
|
? darkMode
|
||||||
? "bg-green-900 text-green-100"
|
? "bg-yellow-900 text-yellow-100"
|
||||||
: "bg-green-100 text-green-800"
|
: "bg-yellow-100 text-yellow-800"
|
||||||
: entry.status === "booked"
|
: darkMode
|
||||||
? darkMode
|
? "bg-red-900 text-red-100"
|
||||||
? "bg-yellow-900 text-yellow-100"
|
: "bg-red-100 text-red-800"
|
||||||
: "bg-yellow-100 text-yellow-800"
|
}`}
|
||||||
: darkMode
|
>
|
||||||
? "bg-red-900 text-red-100"
|
{entry.status === "booked" ? "In-Queue" : entry.status}
|
||||||
: "bg-red-100 text-red-800"
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{entry.status === "booked" && (
|
||||||
|
<div className="flex gap-2 mt-3">
|
||||||
|
<button
|
||||||
|
onClick={() => updateStatus(entry.$id, "done")}
|
||||||
|
className={`border rounded-full px-3 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'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{entry.status === "booked" ? "In-Queue" : entry.status}
|
Done
|
||||||
</span>
|
</button>
|
||||||
</td>
|
<button
|
||||||
<td className="p-3 flex gap-2">
|
onClick={() => updateStatus(entry.$id, "missed")}
|
||||||
{entry.status === "booked" && (
|
className={`border rounded-full px-3 py-1 text-xs transition-colors ${
|
||||||
<>
|
darkMode
|
||||||
<button
|
? 'border-red-400 text-red-400 hover:bg-red-900'
|
||||||
onClick={() => updateStatus(entry.$id, "done")}
|
: 'border-red-600 text-red-600 hover:bg-red-50'
|
||||||
className={`border rounded-full px-2 py-1 text-xs transition-colors ${
|
}`}
|
||||||
darkMode
|
>
|
||||||
? 'border-green-400 text-green-400 hover:bg-green-900'
|
Missed
|
||||||
: 'border-green-600 text-green-600 hover:bg-green-50'
|
</button>
|
||||||
}`}
|
</div>
|
||||||
>
|
)}
|
||||||
Done
|
</div>
|
||||||
</button>
|
))}
|
||||||
<button
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
<div className={`flex justify-between items-center mt-4 p-2 rounded ${
|
{/* Desktop View (Table) */}
|
||||||
darkMode ? 'bg-gray-800' : 'bg-gray-100'
|
<div className="hidden lg:block overflow-x-auto">
|
||||||
}`}>
|
<table className="w-full border-collapse">
|
||||||
<button
|
<thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
|
||||||
disabled={currentPage === 1}
|
<tr>
|
||||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Token</th>
|
||||||
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
|
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Name</th>
|
||||||
darkMode
|
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Status</th>
|
||||||
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
|
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th>
|
||||||
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
|
</tr>
|
||||||
}`}
|
</thead>
|
||||||
>
|
<tbody>
|
||||||
Previous
|
{currentEntries.map((entry) => (
|
||||||
</button>
|
<tr
|
||||||
<span className="text-sm">
|
key={entry.$id}
|
||||||
Page {currentPage} of {totalPages}
|
className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
|
||||||
</span>
|
>
|
||||||
<button
|
<td className="p-3 font-mono">{entry.tokenNumber}</td>
|
||||||
disabled={currentPage === totalPages}
|
<td className="p-3">{entry.patientName}</td>
|
||||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
<td className="p-3">
|
||||||
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
|
<span
|
||||||
darkMode
|
className={`px-2 py-1 rounded-full text-xs font-semibold ${
|
||||||
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
|
entry.status === "done"
|
||||||
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
|
? darkMode
|
||||||
}`}
|
? "bg-green-900 text-green-100"
|
||||||
>
|
: "bg-green-100 text-green-800"
|
||||||
Next
|
: entry.status === "booked"
|
||||||
</button>
|
? darkMode
|
||||||
</div>
|
? "bg-yellow-900 text-yellow-100"
|
||||||
</>
|
: "bg-yellow-100 text-yellow-800"
|
||||||
)}
|
: darkMode
|
||||||
</div>
|
? "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
|
||||||
|
? '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
|
||||||
|
? '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>
|
||||||
|
|
||||||
|
{/* Pagination (Works for both views) */}
|
||||||
|
<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'
|
||||||
|
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user