diff --git a/apps/api/src/routes/portal.ts b/apps/api/src/routes/portal.ts index 7003a43..bad0fa2 100644 --- a/apps/api/src/routes/portal.ts +++ b/apps/api/src/routes/portal.ts @@ -212,6 +212,105 @@ portalRouter.post("/appointments/:id/cancel", async (c) => { }); }); +// ─── Appointment reschedule ────────────────────────────────────────────────── + +const rescheduleSchema = z.object({ + startTime: z.string().datetime(), +}); + +portalRouter.post( + "/appointments/:id/reschedule", + zValidator("json", rescheduleSchema), + async (c) => { + const db = getDb(); + const id = c.req.param("id"); + const body = c.req.valid("json"); + + const sessionId = c.req.header("X-Impersonation-Session-Id"); + if (!sessionId) { + return c.json({ error: "Unauthorized" }, 401); + } + + const [session] = await db + .select() + .from(impersonationSessions) + .where( + and( + eq(impersonationSessions.id, sessionId), + eq(impersonationSessions.status, "active") + ) + ) + .limit(1); + + if (!session || session.expiresAt <= new Date()) { + return c.json({ error: "Unauthorized" }, 401); + } + + const [appt] = await db + .select() + .from(appointments) + .where(eq(appointments.id, id)) + .limit(1); + + if (!appt) { + return c.json({ error: "Not found" }, 404); + } + + if (appt.clientId !== session.clientId) { + return c.json({ error: "Forbidden" }, 403); + } + + if (appt.startTime <= new Date()) { + return c.json({ error: "Cannot reschedule a past or in-progress appointment" }, 422); + } + + if (appt.status === "cancelled" || appt.status === "completed") { + return c.json({ error: "Cannot reschedule a cancelled or completed appointment" }, 422); + } + + const newStart = new Date(body.startTime); + const durationMs = appt.endTime.getTime() - appt.startTime.getTime(); + const newEnd = new Date(newStart.getTime() + durationMs); + + const [existingConflict] = await db + .select({ id: appointments.id }) + .from(appointments) + .where( + and( + eq(appointments.staffId, appt.staffId), + lt(appointments.startTime, newEnd), + gt(appointments.endTime, newStart), + ne(appointments.status, "cancelled"), + ne(appointments.status, "no_show"), + ne(appointments.id, id) + ) + ) + .limit(1); + + if (existingConflict) { + return c.json({ error: "The selected time slot is no longer available" }, 409); + } + + const [updated] = await db + .update(appointments) + .set({ startTime: newStart, endTime: newEnd, updatedAt: new Date() }) + .where(eq(appointments.id, id)) + .returning(); + + if (!updated) { + return c.json({ error: "Not found" }, 404); + } + + return c.json({ + id: updated.id, + startTime: updated.startTime, + endTime: updated.endTime, + status: updated.status, + updatedAt: updated.updatedAt, + }); + } +); + // ─── Client-facing waitlist routes ─────────────────────────────────────────── const createWaitlistEntrySchema = z.object({ diff --git a/apps/web/src/portal/CustomerPortal.tsx b/apps/web/src/portal/CustomerPortal.tsx index 65a17e3..575cd37 100644 --- a/apps/web/src/portal/CustomerPortal.tsx +++ b/apps/web/src/portal/CustomerPortal.tsx @@ -5,7 +5,7 @@ import { Settings, LogOut, Shield, } from "lucide-react"; import { Dashboard } from "./sections/Dashboard.js"; -import { AppointmentsSection } from "./sections/Appointments.js"; +import { AppointmentsSection, RescheduleFlow } from "./sections/Appointments.js"; import { PetProfiles } from "./sections/PetProfiles.js"; import { ReportCards } from "./sections/ReportCards.js"; import { BillingPayments } from "./sections/BillingPayments.js"; @@ -33,6 +33,8 @@ export function CustomerPortal() { const [activeSection, setActiveSection] = useState
("dashboard"); const [mobileNavOpen, setMobileNavOpen] = useState(false); const [showAuditLog, setShowAuditLog] = useState(false); + const [showReschedule, setShowReschedule] = useState(false); + const [rescheduleAppointment, setRescheduleAppointment] = useState | null>(null); const [session, setSession] = useState(null); const [sessionExtended, setSessionExtended] = useState(false); const { branding } = useBranding(); @@ -107,12 +109,17 @@ export function CustomerPortal() { } }; + const handleReschedule = useCallback((appointment: Record) => { + setRescheduleAppointment(appointment); + setShowReschedule(true); + }, []); + const isReadOnly = session?.status === "active"; const renderSection = () => { switch (activeSection) { case "dashboard": - return ; + return ; case "appointments": return ; case "pets": @@ -158,6 +165,15 @@ export function CustomerPortal() { /> )} + {showReschedule && rescheduleAppointment && ( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + { setShowReschedule(false); setRescheduleAppointment(null); }} + sessionId={session?.id ?? null} + /> + )} + {/* Mobile Header */}
@@ -372,6 +383,133 @@ export function CustomerNotesSection({ appointment: appt, sessionId }: { appoint ); } +export function RescheduleFlow({ + appointment: appt, + onClose, + sessionId, +}: { + appointment: Appointment; + onClose: () => void; + sessionId?: string | null; +}) { + const [selectedDate, setSelectedDate] = useState(""); + const [selectedTime, setSelectedTime] = useState(""); + const [submitting, setSubmitting] = useState(false); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(false); + + const availableTimes = ["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"]; + + async function handleSubmit() { + if (!selectedDate || !selectedTime) return; + + const [hoursMinutes = "", period = ""] = selectedTime.split(" "); + const [hoursStr = "0", minutesStr = "0"] = hoursMinutes.split(":"); + let hours = parseInt(hoursStr, 10); + const minutes = parseInt(minutesStr ?? "0", 10); + if (period === "PM" && hours !== 12) hours += 12; + if (period === "AM" && hours === 12) hours = 0; + const isoTime = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:00`; + const startTime = new Date(`${selectedDate}T${isoTime}`).toISOString(); + + setSubmitting(true); + setError(null); + try { + const headers: Record = { "Content-Type": "application/json" }; + if (sessionId) headers["X-Impersonation-Session-Id"] = sessionId; + const res = await fetch(`/api/portal/appointments/${appt.id}/reschedule`, { + method: "POST", + headers, + body: JSON.stringify({ startTime }), + }); + if (!res.ok) { + const err = await res.json().catch(() => ({ error: "Failed to reschedule" })); + throw new Error(err.error || `HTTP ${res.status}`); + } + setSuccess(true); + setTimeout(() => { window.location.reload(); }, 1500); + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to reschedule"); + setSubmitting(false); + } + } + + return ( +
+
+
+

Reschedule Appointment

+ +
+ +
+ {success ? ( +
+
✅
+

Appointment Rescheduled!

+

Redirecting...

+
+ ) : ( + <> + {/* Current appointment summary */} +
+

{appt.petName} — {appt.services.join(", ")}

+

+ {formatDate(appt.date)} at {appt.time} with {appt.groomerName} +

+
+ +

Pick a New Date & Time

+ setSelectedDate(e.target.value)} + min={new Date().toISOString().split("T")[0]} + className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-3" + /> + {selectedDate && ( +
+ {availableTimes.map(time => ( + + ))} +
+ )} + + {error &&

{error}

} + +
+ + +
+ + )} +
+
+
+ ); +} + function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boolean }) { const [step, setStep] = useState(1); const [selectedPet, setSelectedPet] = useState(null); diff --git a/apps/web/src/portal/sections/Dashboard.tsx b/apps/web/src/portal/sections/Dashboard.tsx index 2f82cc7..23b6387 100644 --- a/apps/web/src/portal/sections/Dashboard.tsx +++ b/apps/web/src/portal/sections/Dashboard.tsx @@ -1,9 +1,12 @@ import { Calendar, Clock, PawPrint, CreditCard, Star, ChevronRight, AlertTriangle } from "lucide-react"; import { PETS, UPCOMING_APPOINTMENTS, PAST_APPOINTMENTS, INVOICES, LOYALTY, BUSINESS_NAME } from "../mockData.js"; +import type { Appointment } from "../mockData.js"; interface Props { onNavigate: (section: "appointments" | "pets" | "billing" | "reports") => void; readOnly: boolean; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onReschedule?: (appointment: any) => void; } function daysUntil(dateStr: string): number { @@ -18,7 +21,7 @@ function formatDate(dateStr: string): string { return new Date(dateStr).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }); } -export function Dashboard({ onNavigate, readOnly }: Props) { +export function Dashboard({ onNavigate, readOnly, onReschedule }: Props) { const nextAppt = UPCOMING_APPOINTMENTS[0]; const outstanding = INVOICES.filter(i => i.status === "outstanding").reduce((sum, i) => sum + i.amount, 0); const recentEvents = [ @@ -77,7 +80,10 @@ export function Dashboard({ onNavigate, readOnly }: Props) { {!readOnly && (
-