apps/web/src/pages/Appointments.tsx

@@ -131,9 +131,18 @@ export function AppointmentsPage() {
     setError(null);
     Promise.all([
       loadAppointments(),
-      fetch("/api/clients").then((r) => r.json() as Promise<Client[]>).then(setClients),
-      fetch("/api/services").then((r) => r.json() as Promise<Service[]>).then(setServices),
-      fetch("/api/staff").then((r) => r.json() as Promise<Staff[]>).then(setStaff),
+      fetch("/api/clients").then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json() as Promise<Client[]>;
+      }).then(setClients),
+      fetch("/api/services").then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json() as Promise<Service[]>;
+      }).then(setServices),
+      fetch("/api/staff").then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json() as Promise<Staff[]>;
+      }).then(setStaff),
     ])
       .catch((e: unknown) => setError(e instanceof Error ? e.message : "Unknown error"))
       .finally(() => setLoading(false));

apps/web/src/pages/DevLoginSelector.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 
 interface StaffUser {
   id: string;
+  userId: string | null;
   name: string;
   email: string;
   role: string;
@@ -66,7 +67,7 @@ export function DevLoginSelector() {
           {staff.map((s) => (
             <button
               key={s.id}
-              onClick={() => selectUser("staff", s.id, s.name)}
+              onClick={() => selectUser("staff", s.userId ?? s.id, s.name)}
               style={userButtonStyle}
             >
               <div style={{ fontWeight: 600, fontSize: 14 }}>{s.name}</div>