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

Merge pull request 'FixedTheBugOfHeaderInMultiBooking' (#2) from dev/fixTheBugOfHeaderInMultiBooking-sajan into main

Browse Source 
Reviewed-on: #2
This commit is contained in:
ATUL GUNJAL 2025-05-13 06:40:20 +00:00
commit f9ea8901d5
3 changed files with 276 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/dashboard/page.js
View File

@ -1,5 +1,6 @@
// src/app/dashboard/page.js
"use client";
import { useRouter } from "next/navigation";
import { useAuth } from "../context/AuthContext";
import { useEffect } from "react";
@ -22,12 +23,16 @@ export default function DashboardPage() {
return (
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
<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'
}`}>
<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>
</div>
@ -39,12 +44,28 @@ export default function DashboardPage() {
return null;
}
// Check if user is admin or staff to show entries table
const canViewEntries = userRole === "admin" || userRole === "staff";
return (
<main className={`min-h-screen transition-colors duration-300 ${
darkMode ? 'dark bg-gray-900' : 'bg-white'
}`}>
<main
className={`min-h-screen transition-colors duration-300 ${
darkMode ? "dark bg-gray-900" : "bg-white"
}`}
>
<div className="p-1">
<EntriesTable />
{canViewEntries ? (
<EntriesTable />
) : (
<div className="text-center p-8">
<h2 className={`text-2xl font-semibold ${darkMode ? "text-white" : "text-gray-800"}`}>
Welcome to your Dashboard
</h2>
<p className={`mt-4 ${darkMode ? "text-gray-300" : "text-gray-600"}`}>
You don't have permission to view entries.
</p>
</div>
)}
</div>
</main>
);

238
src/app/pages/MultiBooking/page.js
View File

@ -1,44 +1,126 @@
"use client";
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Header from "../../components/partials/header";
import { useTheme } from "../../context/ThemeContext";
import { databases, Query } from "../../lib/appwrite";
import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
export default function MultiBooking() {
const { darkMode } = useTheme();
const router = useRouter();
const [appointmentDate, setAppointmentDate] = useState(new Date().toISOString().split('T')[0]);
const [appointmentDate, setAppointmentDate] = useState(
new Date().toISOString().split("T")[0]
);
const [patients, setPatients] = useState(
Array(5).fill().map((_, i) => ({ id: i+1, name: "" }))
Array(5)
.fill()
.map((_, i) => ({ id: i + 1, name: "" }))
);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// Header related states - matching EntriesTable
const [entries, setEntries] = useState([]);
const [currentToken, setCurrentToken] = useState(null);
const [previousToken, setPreviousToken] = useState(null);
const [nextToken, setNextToken] = useState(null);
const [missedTokens, setMissedTokens] = useState("");
const [dataLoading, setDataLoading] = useState(true);
const handleNameChange = (id, value) => {
setPatients(patients.map(p =>
p.id === id ? { ...p, name: value } : p
));
setPatients(patients.map((p) => (p.id === id ? { ...p, name: value } : p)));
};
// Get entries from database - similar to EntriesTable
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;
}
};
// Update token information - same as EntriesTable
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");
};
// Load token data - similar to EntriesTable
useEffect(() => {
const loadTokenData = async () => {
try {
setDataLoading(true);
const data = await getEntries();
setEntries(data);
updateTokenInfo(data);
} catch (err) {
console.error("Error loading token data:", err);
} finally {
setDataLoading(false);
}
};
loadTokenData();
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError(null);
try {
// Filter out empty names and validate
const validPatients = patients.filter(p => p.name.trim() !== "");
const validPatients = patients.filter((p) => p.name.trim() !== "");
if (validPatients.length === 0) {
throw new Error("Please enter at least one patient name");
throw new Error("Please enter at least one patient name.");
}
// Store in session to use in MultiBooked page
sessionStorage.setItem('multiBookingData', JSON.stringify({
date: appointmentDate,
patients: validPatients
}));
sessionStorage.setItem(
"multiBookingData",
JSON.stringify({
date: appointmentDate,
patients: validPatients,
})
);
router.push('/pages/MultiBooked');
router.push("/pages/MultiBooked");
} catch (error) {
setError(error.message);
} finally {
@ -47,23 +129,32 @@ export default function MultiBooking() {
};
const addMorePatients = () => {
const newId = patients.length > 0 ?
Math.max(...patients.map(p => p.id)) + 1 : 1;
if (patients.length >= 20) return;
const newId =
patients.length > 0 ? Math.max(...patients.map((p) => p.id)) + 1 : 1;
setPatients([...patients, { id: newId, name: "" }]);
};
return (
<div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : 'bg-white'}`}>
{/* Content Area */}
<div
className={`flex h-screen overflow-hidden ${
darkMode ? "dark bg-gray-900" : "bg-white"
}`}
>
<div className="relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
{/* Sticky Header */}
<header className="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800">
<div className="flex items-center justify-between">
<Header />
{/* Pass the same props to Header as in EntriesTable */}
<Header
currentToken={currentToken}
previousToken={previousToken}
nextToken={nextToken}
missedTokens={missedTokens}
entries={entries}
/>
</div>
</header>
{/* Main Content */}
<main className="flex-1 overflow-y-auto scrollbar-hide">
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6 pt-20">
{error && (
@ -73,47 +164,72 @@ export default function MultiBooking() {
)}
<div className="mb-6">
<h2 className={`text-2xl mb-2 ${darkMode ? 'text-white' : 'text-black'}`}>
<h2
className={`text-2xl mb-2 ${
darkMode ? "text-white" : "text-black"
}`}
>
Staff Multi-Booking
</h2>
<div className="flex items-center">
<label className={`mr-2 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
<label
className={`mr-2 ${
darkMode ? "text-gray-300" : "text-gray-700"
}`}
>
Date:
</label>
<input
type="date"
value={appointmentDate}
onChange={(e) => setAppointmentDate(e.target.value)}
className={`p-1 border rounded ${darkMode ? 'bg-gray-800 text-white border-gray-700' : 'bg-white'}`}
className={`p-1 border rounded ${
darkMode
? "bg-gray-800 text-white border-gray-700"
: "bg-white"
}`}
/>
</div>
</div>
<form onSubmit={handleSubmit} className="max-w-2xl mx-auto my-8">
<div className="space-y-4 mb-6">
{patients.map((patient) => (
<div key={patient.id} className="flex items-center gap-3">
<span className={`w-6 text-right ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
<span
className={`w-6 text-right ${
darkMode ? "text-gray-300" : "text-gray-700"
}`}
>
{patient.id}.
</span>
<input
type="text"
value={patient.name}
onChange={(e) => handleNameChange(patient.id, e.target.value)}
onChange={(e) =>
handleNameChange(patient.id, e.target.value)
}
placeholder="Patient name"
className={`flex-1 shadow-theme-xs h-11 rounded-lg border px-4 py-2.5 text-sm focus:outline-none focus:ring-2 ${
darkMode ?
'bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:border-blue-800 focus:ring-blue-800/30' :
'bg-white border-gray-300 text-gray-800 placeholder-gray-400 focus:border-blue-300 focus:ring-blue-500/10'
darkMode
? "bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:border-blue-800 focus:ring-blue-800/30"
: "bg-white border-gray-300 text-gray-800 placeholder-gray-400 focus:border-blue-300 focus:ring-blue-500/10"
}`}
/>
{patient.id > 5 && (
<button
type="button"
onClick={() => setPatients(patients.filter(p => p.id !== patient.id))}
onClick={() =>
setPatients(
patients.filter((p) => p.id !== patient.id)
)
}
className={`p-2 rounded-full ${
darkMode ? 'text-red-400 hover:bg-gray-700' : 'text-red-500 hover:bg-gray-100'
darkMode
? "text-red-400 hover:bg-gray-700"
: "text-red-500 hover:bg-gray-100"
}`}
title="Remove"
>
✕
</button>
@ -122,20 +238,27 @@ export default function MultiBooking() {
))}
</div>
<div className="flex flex-wrap gap-3 mb-6">
<div className="flex flex-wrap gap-3 mb-6 items-center">
<button
type="button"
onClick={addMorePatients}
disabled={patients.length >= 20}
className={`px-4 py-2 rounded-lg text-sm font-medium ${
darkMode ?
'bg-gray-700 text-white hover:bg-gray-600' :
'bg-gray-200 text-gray-700 hover:bg-gray-300'
darkMode
? "bg-gray-700 text-white hover:bg-gray-600"
: "bg-gray-200 text-gray-700 hover:bg-gray-300"
} ${
patients.length >= 20 ? "opacity-50 cursor-not-allowed" : ""
}`}
>
+ Add More Patients
</button>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
{patients.length} patients entered
<div
className={`text-sm mt-1 ${
darkMode ? "text-gray-400" : "text-gray-600"
}`}
>
{patients.length} / 20 patients entered
</div>
</div>
@ -144,34 +267,43 @@ export default function MultiBooking() {
type="submit"
disabled={loading}
className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition w-full ${
loading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-700 hover:bg-blue-600'
loading
? "bg-blue-400 cursor-not-allowed"
: "bg-blue-700 hover:bg-blue-600"
}`}
>
{loading ? 'Processing...' : 'Generate Tokens'}
{loading ? "Processing..." : "Generate Tokens"}
</button>
<button
type="button"
onClick={() => router.push('/entries')}
onClick={() => router.push("/entries")}
className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium shadow-theme-xs ring-1 ring-inset transition w-full ${
darkMode ?
'bg-gray-800 text-gray-300 ring-gray-700 hover:bg-gray-700' :
'bg-white text-gray-700 ring-gray-300 hover:bg-gray-50'
darkMode
? "bg-gray-800 text-gray-300 ring-gray-700 hover:bg-gray-700"
: "bg-white text-gray-700 ring-gray-300 hover:bg-gray-50"
}`}
>
View All Entries
</button>
</div>
</form>
<div className={`text-center mt-8 text-sm ${
darkMode ? 'text-gray-400' : 'text-gray-600'
}`}>
<p>Staff can book multiple tokens at once. All tokens will be assigned for the same date.</p>
<p className="mt-1">Minimum 1 patient required. Maximum 20 patients per batch.</p>
<div
className={`text-center mt-8 text-sm ${
darkMode ? "text-gray-400" : "text-gray-600"
}`}
>
<p>
Staff can book multiple tokens at once. All tokens will be
assigned for the same date.
</p>
<p className="mt-1">
Minimum 1 patient required. Maximum 20 patients per batch.
</p>
</div>
</div>
</main>
</div>
</div>
);
}
}

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

@ -1,3 +1,4 @@
"use client";
import { useEffect, useState } from "react";
import { databases, Query } from "../../lib/appwrite";
@ -25,21 +26,20 @@ export default function EntriesTable() {
// 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 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 today = new Date().toISOString().split("T")[0];
const response = await databases.listDocuments(
DATABASE_ID,
COLLECTION_ID,
[
Query.equal('date', today),
Query.orderAsc('tokenNumber')
],
[Query.equal("date", today), Query.orderAsc("tokenNumber")],
100
);
return response.documents;
@ -58,12 +58,20 @@ 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);
setNextToken(currentIndex < entries.length - 1 ? entries[currentIndex + 1]?.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")
@ -75,12 +83,9 @@ export default function EntriesTable() {
const updateStatus = async (entryId, newStatus) => {
try {
setLoading(true);
await databases.updateDocument(
DATABASE_ID,
COLLECTION_ID,
entryId,
{ status: newStatus }
);
await databases.updateDocument(DATABASE_ID, COLLECTION_ID, entryId, {
status: newStatus,
});
const data = await getEntries();
setEntries(data);
setFilteredEntries(data);
@ -128,20 +133,32 @@ 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>;
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={`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>
@ -153,7 +170,11 @@ 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}
@ -191,7 +212,9 @@ export default function EntriesTable() {
{currentEntries.map((entry) => (
<tr
key={entry.$id}
className={`border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}
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>
@ -205,12 +228,13 @@ export default function EntriesTable() {
</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"
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`}
} font-semibold`}
>
{entry.status === "booked" ? "In-Queue" : entry.status}
</span>
@ -244,8 +268,11 @@ export default function EntriesTable() {
</table>
{/* Pagination */}
<div className={`flex justify-between items-center mt-4 ${darkMode ? 'text-white' : 'text-gray-700'
}`}>
<div
className={`flex justify-between items-center mt-4 ${
darkMode ? "text-white" : "text-gray-700"
}`}
>
<button
disabled={currentPage === 1}
onClick={() => setCurrentPage((prev) => prev - 1)}
@ -268,4 +295,4 @@ export default function EntriesTable() {
)}
</div>
);
}
}