"use client"; 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 [patients, setPatients] = useState( 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))); }; // 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 { const validPatients = patients.filter((p) => p.name.trim() !== ""); if (validPatients.length === 0) { throw new Error("Please enter at least one patient name."); } sessionStorage.setItem( "multiBookingData", JSON.stringify({ date: appointmentDate, patients: validPatients, }) ); router.push("/pages/MultiBooked"); } catch (error) { setError(error.message); } finally { setLoading(false); } }; const addMorePatients = () => { 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 (
{/* Pass the same props to Header as in EntriesTable */}
{error && (
{error}
)}

Staff Multi-Booking

setAppointmentDate(e.target.value)} className={`p-1 border rounded ${ darkMode ? "bg-gray-800 text-white border-gray-700" : "bg-white" }`} />
{patients.map((patient) => (
{patient.id}. 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" }`} /> {patient.id > 5 && ( )}
))}
{patients.length} / 20 patients entered

Staff can book multiple tokens at once. All tokens will be assigned for the same date.

Minimum 1 patient required. Maximum 20 patients per batch.

); }