Merge pull request #334 from groombook/uat

promote: uat → main (GRO-778, GRO-773, GRO-766, GRO-743)

apps/api/src/lib/auth.ts

@@ -93,9 +93,12 @@ export async function initAuth(): Promise<void> {
         baseURL: BETTER_AUTH_URL,
         rateLimit: {
           enabled: true,
-          max: 10,
+          max: 100,
-          window: 60,
+          window: 10,
           storage: "memory",
+          customRules: {
+            "/get-session": false,
+          },
         },
         plugins: [
           genericOAuth({
@@ -240,9 +243,12 @@ export async function initAuth(): Promise<void> {
       baseURL: BETTER_AUTH_URL,
       rateLimit: {
         enabled: true,
-        max: 10,
+        max: 100,
-        window: 60,
+        window: 10,
         storage: "memory",
+        customRules: {
+          "/get-session": false,
+        },
       },
       account: {
         storeStateStrategy: "cookie" as const,

apps/api/src/lib/s3.ts

@@ -67,3 +67,22 @@ export async function deleteObject(key: string): Promise<void> {
     })
   );
 }
+
+/** Upload an object directly to S3 (server-side only, not a pre-signed URL). */
+export async function putObject(
+  key: string,
+  body: Buffer | Uint8Array | string,
+  contentType: string,
+  contentLength: number
+): Promise<void> {
+  const client = getS3Client();
+  await client.send(
+    new PutObjectCommand({
+      Bucket: getBucket(),
+      Key: key,
+      Body: body,
+      ContentType: contentType,
+      ContentLength: contentLength,
+    })
+  );
+}

apps/api/src/routes/invoices.ts

@@ -42,6 +42,13 @@ const updateInvoiceSchema = z.object({
   taxCents: z.number().int().nonnegative().optional(),
   tipCents: z.number().int().nonnegative().optional(),
   notes: z.string().max(2000).nullable().optional(),
+  tipSplits: z.array(
+    z.object({
+      staffId: z.string().uuid().nullable(),
+      staffName: z.string().min(1).max(200),
+      sharePct: z.number().min(0).max(100),
+    })
+  ).optional(),
 });
 
 // List invoices
@@ -334,7 +341,30 @@ invoicesRouter.patch(
       }
     }
 
-    const update: Record<string, unknown> = { ...body, updatedAt: new Date() };
+    // Tip split validation when marking as paid with a tip
+    const effectiveTipCents = body.tipCents ?? current.tipCents;
+    if (body.status === "paid" && effectiveTipCents > 0) {
+      if (body.tipSplits !== undefined) {
+        if (body.tipSplits.length === 0) {
+          return c.json({ error: "Tip splits required when tip amount is greater than zero" }, 422);
+        }
+        const totalBps = body.tipSplits.reduce((sum, s) => sum + Math.round(s.sharePct * 100), 0);
+        if (totalBps !== 10000) {
+          return c.json({ error: "Split percentages must sum to 100" }, 422);
+        }
+      } else {
+        const existingSplits = await db
+          .select({ id: invoiceTipSplits.id })
+          .from(invoiceTipSplits)
+          .where(eq(invoiceTipSplits.invoiceId, id));
+        if (existingSplits.length === 0) {
+          return c.json({ error: "Tip splits required when tip amount is greater than zero" }, 422);
+        }
+      }
+    }
+
+    const { tipSplits: incomingTipSplits, ...bodyWithoutSplits } = body;
+    const update: Record<string, unknown> = { ...bodyWithoutSplits, updatedAt: new Date() };
 
     // Auto-set paidAt when marking as paid
     if (body.status === "paid" && !body.paidAt && !current.paidAt) {
@@ -348,11 +378,41 @@ invoicesRouter.patch(
       update.totalCents = current.subtotalCents + newTaxCents + newTipCents;
     }
 
-    const [updated] = await db
+    const [updated] = await db.transaction(async (tx) => {
-      .update(invoices)
+      const [upd] = await tx
-      .set(update)
+        .update(invoices)
-      .where(eq(invoices.id, id))
+        .set(update)
-      .returning();
+        .where(eq(invoices.id, id))
+        .returning();
+
+      // Atomically save tip splits when marking paid with provided splits
+      if (
+        body.status === "paid" &&
+        effectiveTipCents > 0 &&
+        incomingTipSplits !== undefined &&
+        incomingTipSplits.length > 0
+      ) {
+        await tx.delete(invoiceTipSplits).where(eq(invoiceTipSplits.invoiceId, id));
+
+        let remaining = effectiveTipCents;
+        const rows = incomingTipSplits.map((s, i) => {
+          const isLast = i === incomingTipSplits.length - 1;
+          const shareCents = isLast ? remaining : Math.round((s.sharePct / 100) * effectiveTipCents);
+          if (!isLast) remaining -= shareCents;
+          return {
+            invoiceId: id,
+            staffId: s.staffId,
+            staffName: s.staffName,
+            sharePct: s.sharePct.toFixed(2),
+            shareCents,
+          };
+        });
+
+        await tx.insert(invoiceTipSplits).values(rows);
+      }
+
+      return [upd];
+    });
 
     const lineItems = await db
       .select()

apps/api/src/routes/portal.ts

@@ -9,6 +9,68 @@ import type { PortalEnv } from "../middleware/portalSession.js";
 
 export const portalRouter = new Hono<PortalEnv>();
 
+// Dev-mode session creation — must be registered BEFORE the /* middleware so it is
+// NOT subject to validatePortalSession/portalAudit (GRO-778 fix). This endpoint creates
+// the impersonation session and has no X-Impersonation-Session-Id header yet.
+const devSessionSchema = z.object({
+  clientId: z.string().uuid(),
+});
+
+portalRouter.post(
+  "/dev-session",
+  zValidator("json", devSessionSchema),
+  async (c) => {
+    if (process.env.AUTH_DISABLED !== "true") {
+      return c.json({ error: "Not available when auth is enabled" }, 403);
+    }
+
+    const db = getDb();
+    const body = c.req.valid("json");
+
+    const [client] = await db
+      .select()
+      .from(clients)
+      .where(eq(clients.id, body.clientId))
+      .limit(1);
+    if (!client) {
+      return c.json({ error: "Client not found" }, 404);
+    }
+
+    const DEMO_STAFF_ID = "00000000-0000-0000-0000-000000000001";
+
+    let staffId = DEMO_STAFF_ID;
+    const [demoStaff] = await db
+      .select({ id: staff.id })
+      .from(staff)
+      .where(eq(staff.id, DEMO_STAFF_ID))
+      .limit(1);
+
+    if (!demoStaff) {
+      const [firstStaff] = await db
+        .select({ id: staff.id })
+        .from(staff)
+        .where(eq(staff.active, true))
+        .limit(1);
+      if (!firstStaff) {
+        return c.json({ error: "No staff records found. Run the database seed." }, 500);
+      }
+      staffId = firstStaff.id;
+    }
+
+    const [session] = await db
+      .insert(impersonationSessions)
+      .values({
+        staffId,
+        clientId: body.clientId,
+        reason: "dev-mode-client-portal",
+        expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
+      })
+      .returning();
+
+    return c.json(session, 201);
+  }
+);
+
 // Apply middleware to all portal routes
 portalRouter.use("/*", validatePortalSession, portalAudit);
 
@@ -461,72 +523,3 @@ portalRouter.delete("/payment-methods/:id", async (c) => {
   if (!ok) return c.json({ error: "Failed to detach payment method" }, 500);
   return c.json({ ok: true });
 });
-
-// ─── Dev-mode session creation ──────────────────────────────────────────────
-// Allows the dev login selector to vend an impersonation session for a client
-// without requiring manager auth. Only available when AUTH_DISABLED=true.
-
-const devSessionSchema = z.object({
-  clientId: z.string().uuid(),
-});
-
-portalRouter.post(
-  "/dev-session",
-  zValidator("json", devSessionSchema),
-  async (c) => {
-    if (process.env.AUTH_DISABLED !== "true") {
-      return c.json({ error: "Not available when auth is enabled" }, 403);
-    }
-
-    const db = getDb();
-    const body = c.req.valid("json");
-
-    // Verify client exists
-    const [client] = await db
-      .select()
-      .from(clients)
-      .where(eq(clients.id, body.clientId))
-      .limit(1);
-    if (!client) {
-      return c.json({ error: "Client not found" }, 404);
-    }
-
-    // Find a staff record to associate with the dev impersonation session.
-    // Use the demo-manager if it exists (created by seed with known ID),
-    // otherwise fall back to the first active staff record.
-    // This avoids hardcoding a UUID that may not exist in all environments.
-    const DEMO_STAFF_ID = "00000000-0000-0000-0000-000000000001";
-
-    let staffId = DEMO_STAFF_ID;
-    const [demoStaff] = await db
-      .select({ id: staff.id })
-      .from(staff)
-      .where(eq(staff.id, DEMO_STAFF_ID))
-      .limit(1);
-
-    if (!demoStaff) {
-      // Fall back to any active staff member
-      const [firstStaff] = await db
-        .select({ id: staff.id })
-        .from(staff)
-        .where(eq(staff.active, true))
-        .limit(1);
-      if (!firstStaff) {
-        return c.json({ error: "No staff records found. Run the database seed." }, 500);
-      }
-      staffId = firstStaff.id;
-    }
-
-    const [session] = await db
-      .insert(impersonationSessions)
-      .values({
-        staffId,
-        clientId: body.clientId,
-        reason: "dev-mode-client-portal",
-        expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000), // 24 hours
-      })
-      .returning();
-
-    return c.json(session, 201);
-  }
-);

apps/api/src/routes/settings.ts

@@ -2,7 +2,7 @@ import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod/v3";
 import { eq, getDb, businessSettings } from "@groombook/db";
-import { getPresignedUploadUrl, getPresignedGetUrl, deleteObject } from "../lib/s3.js";
+import { getPresignedUploadUrl, getPresignedGetUrl, deleteObject, putObject } from "../lib/s3.js";
 import { requireSuperUser } from "../middleware/rbac.js";
 
 export const settingsRouter = new Hono();
@@ -100,6 +100,77 @@ settingsRouter.post(
   }
 );
 
+/**
+ * POST /api/admin/settings/logo/upload
+ * Proxy upload through the API server to avoid mixed-content issues with
+ * pre-signed URLs that use the internal HTTP endpoint. The file is uploaded
+ * directly to S3 from the server using the internal endpoint.
+ */
+settingsRouter.post("/logo/upload", requireSuperUser(), async (c) => {
+  const db = getDb();
+
+  // Parse multipart form data (file field)
+  const body = await c.req.parseBody({ all: true });
+  const file = body["file"];
+
+  if (!file || !(file instanceof File)) {
+    return c.json({ error: "No file provided" }, 400);
+  }
+
+  const contentType = file.type;
+  if (!ALLOWED_LOGO_TYPES.has(contentType)) {
+    return c.json(
+      {
+        error:
+          "contentType must be one of: image/png, image/svg+xml, image/jpeg, image/webp",
+      },
+      400
+    );
+  }
+
+  const fileSizeBytes = file.size;
+  if (fileSizeBytes > MAX_LOGO_SIZE) {
+    return c.json({ error: "File must not exceed 512 KB" }, 400);
+  }
+
+  const rows = await db.select().from(businessSettings).limit(1);
+  if (!rows[0]) {
+    return c.json({ error: "Settings not found" }, 404);
+  }
+  const settingsId = rows[0].id;
+
+  const ext = contentType.split("/")[1] ?? "png";
+  const key = `logos/${settingsId}/${Date.now()}.${ext}`;
+
+  // Read file into buffer and upload directly to S3 (bypasses pre-signed URL)
+  const arrayBuffer = await file.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+  await putObject(key, buffer, contentType, fileSizeBytes);
+
+  // Delete previous S3 object if any
+  if (rows[0].logoKey) {
+    await deleteObject(rows[0].logoKey);
+  }
+
+  // Update database with new logo key
+  const [updated] = await db
+    .update(businessSettings)
+    .set({
+      logoKey: key,
+      logoBase64: null,
+      logoMimeType: null,
+      updatedAt: new Date(),
+    })
+    .where(eq(businessSettings.id, settingsId))
+    .returning();
+
+  if (!updated) {
+    return c.json({ error: "Settings not found" }, 404);
+  }
+
+  return c.json({ ok: true, logoKey: updated.logoKey });
+});
+
 /**
  * POST /api/admin/settings/logo/confirm
  * Called after the client has successfully uploaded to the presigned URL.

apps/e2e/tests/clients.spec.ts

@@ -63,3 +63,52 @@ test("clicking a client shows their details", async ({ page }) => {
   // Email appears in both the list row and the detail panel once selected
   await expect(page.getByText("alice@example.com")).toHaveCount(2);
 });
+
+test("direct URL navigation to client detail fetches data and renders client name", async ({ page }) => {
+  // Mock individual client fetch for direct navigation
+  await page.route("/api/clients/client-1", (route) =>
+    route.fulfill({ json: MOCK_CLIENTS[0] })
+  );
+  // Mock pets for this client
+  await page.route("/api/pets**", (route) =>
+    route.fulfill({ json: [] })
+  );
+
+  await page.goto("/admin/clients/client-1");
+  // Client name must be visible without any clicking
+  await expect(page.getByText("Alice Johnson")).toBeVisible();
+  // Should show back to list link
+  await expect(page.getByText("← Back to list")).toBeVisible();
+});
+
+test("direct URL navigation shows loading then client", async ({ page }) => {
+  let resolvePets: (value: unknown) => void;
+  const petsPromise = new Promise((resolve) => { resolvePets = resolve; });
+
+  await page.route("/api/clients/client-1", (route) =>
+    route.fulfill({ json: MOCK_CLIENTS[0] })
+  );
+  await page.route("/api/pets**", async (route) => {
+    await petsPromise;
+    await route.fulfill({ json: [] });
+  });
+
+  const navigationPromise = page.goto("/admin/clients/client-1");
+  // Should show loading state briefly
+  await expect(page.getByText("Loading client…")).toBeVisible();
+  // Resolve pets and wait for navigation
+  resolvePets!();
+  await navigationPromise;
+  // After data loads, client name is shown
+  await expect(page.getByText("Alice Johnson")).toBeVisible();
+});
+
+test("direct URL navigation shows error state on failure", async ({ page }) => {
+  await page.route("/api/clients/nonexistent", (route) =>
+    route.fulfill({ status: 404, json: { error: "Client not found" } })
+  );
+
+  await page.goto("/admin/clients/nonexistent");
+  await expect(page.getByText(/client not found/i)).toBeVisible();
+  await expect(page.getByText("← Back to clients")).toBeVisible();
+});

apps/web/src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route, Link, useLocation, Navigate, useNavigate } from "react-r
 import { useEffect, useState } from "react";
 import { AppointmentsPage } from "./pages/Appointments.js";
 import { ClientsPage } from "./pages/Clients.js";
+import { ClientDetailPage } from "./pages/ClientDetailPage.js";
 import { ServicesPage } from "./pages/Services.js";
 import { StaffPage } from "./pages/Staff.js";
 import { InvoicesPage } from "./pages/Invoices.js";
@@ -296,6 +297,7 @@ function AdminLayout() {
         <Routes>
           <Route path="/" element={<AppointmentsPage />} />
           <Route path="/clients" element={<ClientsPage />} />
+          <Route path="/clients/:clientId" element={<ClientDetailPage />} />
           <Route path="/services" element={<ServicesPage />} />
           <Route path="/staff" element={<StaffPage />} />
           <Route path="/invoices" element={<InvoicesPage />} />

apps/web/src/__tests__/Appointments.test.tsx

@@ -93,7 +93,7 @@ describe("CustomerNotesSection", () => {
         "/api/portal/appointments/appt-1/notes",
         expect.objectContaining({
           headers: expect.objectContaining({
-            "Authorization": "Bearer test-session-id",
+            "X-Impersonation-Session-Id": "test-session-id",
           }),
         })
       );
@@ -269,7 +269,7 @@ describe("ConfirmationSection", () => {
         "/api/portal/appointments/appt-1/confirm",
         expect.objectContaining({
           headers: expect.objectContaining({
-            "Authorization": "Bearer test-session-id",
+            "X-Impersonation-Session-Id": "test-session-id",
           }),
         })
       );

apps/web/src/pages/ClientDetailPage.tsx

@@ -0,0 +1,236 @@
+import { useEffect, useState, useCallback } from "react";
+import { useParams, Link } from "react-router-dom";
+import type { Client, GroomingVisitLog, Pet } from "@groombook/types";
+import { PetPhotoDisplay } from "../components/PetPhotoDisplay.js";
+import { PetPhotoUpload } from "../components/PetPhotoUpload.js";
+
+export function ClientDetailPage() {
+  const { clientId } = useParams<{ clientId: string }>();
+  const [client, setClient] = useState<Client | null>(null);
+  const [pets, setPets] = useState<Pet[]>([]);
+  const [visitLogs, setVisitLogs] = useState<Record<string, GroomingVisitLog[]>>({});
+  const [logsLoading, setLogsLoading] = useState<Record<string, boolean>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [photoRevisions, setPhotoRevisions] = useState<Record<string, number>>({});
+
+  const handlePhotoUploaded = useCallback((petId: string) => {
+    setPhotoRevisions((prev) => ({ ...prev, [petId]: (prev[petId] ?? 0) + 1 }));
+  }, []);
+
+  useEffect(() => {
+    if (!clientId) {
+      setError("No client ID provided");
+      setLoading(false);
+      return;
+    }
+
+    async function load() {
+      const id = clientId!;
+      setLoading(true);
+      setError(null);
+      try {
+        const [clientRes, petsRes] = await Promise.all([
+          fetch(`/api/clients/${encodeURIComponent(id)}`),
+          fetch(`/api/pets?clientId=${encodeURIComponent(id)}`),
+        ]);
+
+        if (!clientRes.ok) {
+          const err = await clientRes.json().catch(() => ({})) as { error?: string };
+          throw new Error(err.error ?? `Client fetch failed: ${clientRes.status}`);
+        }
+        if (!petsRes.ok) {
+          throw new Error(`Pets fetch failed: ${petsRes.status}`);
+        }
+
+        setClient(await clientRes.json() as Client);
+        setPets(await petsRes.json() as Pet[]);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to load client");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    void load();
+  }, [clientId]);
+
+  async function loadVisitLogs(petId: string) {
+    setLogsLoading((prev) => ({ ...prev, [petId]: true }));
+    const r = await fetch(`/api/grooming-logs?petId=${encodeURIComponent(petId)}`);
+    if (r.ok) {
+      const logs = await r.json() as GroomingVisitLog[];
+      setVisitLogs((prev) => ({ ...prev, [petId]: logs }));
+    }
+    setLogsLoading((prev) => ({ ...prev, [petId]: false }));
+  }
+
+  if (loading) {
+    return (
+      <div style={{ padding: "2rem", textAlign: "center", color: "#6b7280", fontFamily: "system-ui, sans-serif" }}>
+        Loading client…
+      </div>
+    );
+  }
+
+  if (error || !client) {
+    return (
+      <div style={{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>
+        <div style={{ marginBottom: "1rem" }}>
+          <Link to="/admin/clients" style={{ color: "#4f8a6f", fontSize: 13 }}>← Back to clients</Link>
+        </div>
+        <div style={{ background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 8, padding: "1rem", color: "#991b1b" }}>
+          {error ?? "Client not found"}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif" }}>
+      {/* Header */}
+      <div style={{ display: "flex", alignItems: "flex-start", marginBottom: "1.5rem", gap: "1rem" }}>
+        <div style={{ flex: 1 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "0.25rem" }}>
+            <h1 style={{ margin: 0, fontSize: 22 }}>{client.name}</h1>
+            {client.status === "disabled" && (
+              <span style={{ fontSize: 12, background: "#fef2f2", color: "#dc2626", padding: "0.15rem 0.5rem", borderRadius: 4, fontWeight: 500 }}>
+                Disabled
+              </span>
+            )}
+          </div>
+          {client.email && <div style={{ fontSize: 14, color: "#6b7280" }}>{client.email}</div>}
+          {client.phone && <div style={{ fontSize: 14, color: "#6b7280" }}>{client.phone}</div>}
+          {client.address && <div style={{ fontSize: 13, color: "#6b7280" }}>{client.address}</div>}
+          {client.notes && (
+            <div style={{ fontSize: 13, marginTop: "0.4rem", background: "#fef9c3", padding: "0.4rem 0.6rem", borderRadius: 4, maxWidth: 500 }}>
+              {client.notes}
+            </div>
+          )}
+        </div>
+        <Link
+          to="/admin/clients"
+          style={{
+            padding: "0.4rem 0.85rem",
+            border: "1px solid #d1d5db",
+            borderRadius: 6,
+            background: "#fff",
+            color: "#374151",
+            fontSize: 13,
+            fontWeight: 500,
+            textDecoration: "none",
+            flexShrink: 0,
+          }}
+        >
+          ← Back to list
+        </Link>
+      </div>
+
+      {/* Pets */}
+      <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "0.75rem" }}>
+        <h2 style={{ margin: 0, fontSize: 18 }}>Pets</h2>
+      </div>
+
+      {pets.length === 0 ? (
+        <p style={{ color: "#6b7280", fontSize: 14 }}>No pets on file for this client.</p>
+      ) : (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: "0.75rem" }}>
+          {pets.map((p) => (
+            <div key={p.id} style={{ border: "1px solid #e5e7eb", borderRadius: 10, padding: "0.85rem", background: "#fff", boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)" }}>
+              {/* Photo + header */}
+              <div style={{ display: "flex", gap: "0.75rem", marginBottom: "0.4rem" }}>
+                <PetPhotoDisplay
+                  petId={p.id}
+                  size={56}
+                  key={`${p.id}-photo-${photoRevisions[p.id] ?? 0}`}
+                />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                    <strong style={{ fontSize: 15 }}>{p.name}</strong>
+                  </div>
+                  <div style={{ fontSize: 13, color: "#6b7280", marginTop: "0.15rem" }}>
+                    {p.species}{p.breed ? ` · ${p.breed}` : ""}
+                  </div>
+                  {p.weightKg != null && <div style={{ fontSize: 12, color: "#6b7280" }}>{p.weightKg} kg</div>}
+                  {p.dateOfBirth && <div style={{ fontSize: 12, color: "#6b7280" }}>Born {new Date(p.dateOfBirth).toLocaleDateString()}</div>}
+                  <div style={{ marginTop: "0.3rem" }}>
+                    <PetPhotoUpload petId={p.id} onUploaded={() => handlePhotoUploaded(p.id)} />
+                  </div>
+                </div>
+              </div>
+
+              {p.healthAlerts && (
+                <div style={{ fontSize: 12, marginTop: "0.35rem", background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 4, padding: "0.3rem 0.5rem", color: "#dc2626" }}>
+                  <span style={{ fontWeight: 600 }}>⚠ Health alerts:</span> {p.healthAlerts}
+                </div>
+              )}
+
+              {/* Grooming preferences */}
+              {(p.cutStyle || p.shampooPreference || p.specialCareNotes || p.groomingNotes) && (
+                <div style={{ marginTop: "0.5rem", borderTop: "1px solid #f3f4f6", paddingTop: "0.4rem" }}>
+                  {p.cutStyle && (
+                    <div style={{ fontSize: 12, color: "#374151" }}>
+                      <span style={{ fontWeight: 600 }}>Cut:</span> {p.cutStyle}
+                    </div>
+                  )}
+                  {p.shampooPreference && (
+                    <div style={{ fontSize: 12, color: "#374151" }}>
+                      <span style={{ fontWeight: 600 }}>Shampoo:</span> {p.shampooPreference}
+                    </div>
+                  )}
+                  {p.specialCareNotes && (
+                    <div style={{ fontSize: 12, marginTop: "0.2rem", background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 4, padding: "0.3rem 0.5rem", color: "#92400e" }}>
+                      <span style={{ fontWeight: 600 }}>Special care:</span> {p.specialCareNotes}
+                    </div>
+                  )}
+                  {p.groomingNotes && (
+                    <div style={{ fontSize: 12, marginTop: "0.2rem", color: "#374151" }}>
+                      <span style={{ fontWeight: 600 }}>Notes:</span> {p.groomingNotes}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Visit history */}
+              {(() => {
+                const logs = visitLogs[p.id];
+                const loadingLogs = logsLoading[p.id];
+                return (
+                  <div style={{ marginTop: "0.5rem", borderTop: "1px solid #f3f4f6", paddingTop: "0.4rem" }}>
+                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.25rem" }}>
+                      <div style={{ fontSize: 11, fontWeight: 600, color: "#6b7280" }}>VISIT HISTORY</div>
+                      {!logs && !loadingLogs && (
+                        <button
+                          onClick={() => { void loadVisitLogs(p.id); }}
+                          style={{ fontSize: 11, color: "#4f8a6f", background: "none", border: "none", cursor: "pointer", padding: 0 }}
+                        >
+                          Load history
+                        </button>
+                      )}
+                    </div>
+                    {loadingLogs && <div style={{ fontSize: 11, color: "#9ca3af" }}>Loading…</div>}
+                    {logs && logs.length === 0 && <div style={{ fontSize: 11, color: "#9ca3af" }}>No visits yet</div>}
+                    {logs && logs.length > 0 && (
+                      <>
+                        {logs.slice(0, 3).map((log) => (
+                          <div key={log.id} style={{ fontSize: 11, color: "#374151", marginBottom: "0.2rem", borderLeft: "2px solid #e2e8f0", paddingLeft: "0.4rem" }}>
+                            <span style={{ color: "#6b7280" }}>{new Date(log.groomedAt).toLocaleDateString()}</span>
+                            {log.cutStyle && <span> · {log.cutStyle}</span>}
+                            {log.notes && <span> · {log.notes}</span>}
+                          </div>
+                        ))}
+                        {logs.length > 3 && (
+                          <div style={{ fontSize: 11, color: "#6b7280" }}>+{logs.length - 3} more visits</div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                );
+              })()}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/pages/Clients.tsx

@@ -857,12 +857,56 @@ export function ClientsPage() {
 // ─── Shared UI ───────────────────────────────────────────────────────────────
 
 function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const previouslyFocused = document.activeElement as HTMLElement;
+    const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(focusableSelectors);
+    const firstFocusable = focusableElements?.[0];
+    firstFocusable?.focus();
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      if (!modalRef.current) return;
+      const focusables = modalRef.current.querySelectorAll<HTMLElement>(focusableSelectors);
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previouslyFocused?.focus();
+    };
+  }, [onClose]);
+
   return (
     <div
+      role="dialog"
+      aria-modal="true"
       style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100 }}
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
-      <div style={{ background: "#fff", borderRadius: 8, padding: "1.5rem", maxWidth: 480, width: "calc(100% - 2rem)", maxHeight: "90vh", overflowY: "auto", boxShadow: "0 20px 60px rgba(0,0,0,0.3)" }}>
+      <div
+        ref={modalRef}
+        style={{ background: "#fff", borderRadius: 8, padding: "1.5rem", maxWidth: 480, width: "calc(100% - 2rem)", maxHeight: "90vh", overflowY: "auto", boxShadow: "0 20px 60px rgba(0,0,0,0.3)" }}
+      >
         {children}
       </div>
     </div>

apps/web/src/pages/Invoices.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import type { Invoice, Client, Appointment, Service, Staff, InvoiceTipSplit } from "@groombook/types";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -221,35 +221,31 @@ function InvoiceDetailModal({
       }
     }
     try {
+      const patchBody: {
+        status: string;
+        paymentMethod: string;
+        tipCents: number;
+        tipSplits?: Array<{ staffId: string | null; staffName: string; sharePct: number }>;
+      } = { status: "paid", paymentMethod, tipCents };
+
+      if (showSplits && tipCents > 0 && tipSplits.length > 0) {
+        patchBody.tipSplits = tipSplits.map((r) => ({
+          staffId: r.staffId,
+          staffName: r.staffName,
+          sharePct: r.pct,
+        }));
+      }
+
       const res = await fetch(`/api/invoices/${invoice.id}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ status: "paid", paymentMethod, tipCents }),
+        body: JSON.stringify(patchBody),
       });
       if (!res.ok) {
         const err = (await res.json()) as { error?: string };
         throw new Error(err.error ?? `HTTP ${res.status}`);
       }
 
-      // Save tip splits if applicable and tip > 0
-      if (showSplits && tipCents > 0 && tipSplits.length > 0) {
-        const totalPct = tipSplits.reduce((s, r) => s + r.pct, 0);
-        if (Math.abs(totalPct - 100) < 0.01) {
-          const splitsRes = await fetch(`/api/invoices/${invoice.id}/tip-splits`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              splits: tipSplits.map((r) => ({
-                staffId: r.staffId,
-                staffName: r.staffName,
-                sharePct: r.pct,
-              })),
-            }),
-          });
-          if (!splitsRes.ok) console.warn("Tip split save failed (non-blocking)");
-        }
-      }
-
       onUpdated();
     } catch (e: unknown) {
       setError(e instanceof Error ? e.message : "Failed to update");
@@ -686,19 +682,63 @@ export function InvoicesPage() {
 // ─── Shared UI helpers ────────────────────────────────────────────────────────
 
 function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const previouslyFocused = document.activeElement as HTMLElement;
+    const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(focusableSelectors);
+    const firstFocusable = focusableElements?.[0];
+    firstFocusable?.focus();
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      if (!modalRef.current) return;
+      const focusables = modalRef.current.querySelectorAll<HTMLElement>(focusableSelectors);
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previouslyFocused?.focus();
+    };
+  }, [onClose]);
+
   return (
     <div
+      role="dialog"
+      aria-modal="true"
       style={{
         position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)",
         display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100,
       }}
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
-      <div style={{
+      <div
-        background: "#fff", borderRadius: 8, padding: "1.5rem",
+        ref={modalRef}
-        maxWidth: 520, width: "calc(100% - 2rem)", maxHeight: "90vh", overflowY: "auto",
+        style={{
-        boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
+          background: "#fff", borderRadius: 8, padding: "1.5rem",
-      }}>
+          maxWidth: 520, width: "calc(100% - 2rem)", maxHeight: "90vh", overflowY: "auto",
+          boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
+        }}
+      >
         {children}
       </div>
     </div>

apps/web/src/pages/Settings.tsx

@@ -158,46 +158,28 @@ export function SettingsPage() {
     }
 
     try {
-      // Step 1: Get presigned upload URL
+      // Upload directly through the API server to avoid mixed-content issues
-      const uploadRes = await fetch("/api/admin/settings/logo/upload-url", {
+      // with pre-signed URLs that use the internal HTTP endpoint
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const uploadRes = await fetch("/api/admin/settings/logo/upload", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        body: formData,
-        body: JSON.stringify({ contentType: file.type, fileSizeBytes: file.size }),
       });
       if (!uploadRes.ok) {
         const err = await uploadRes.json().catch(() => null);
-        throw new Error(err?.error ?? "Failed to get upload URL");
+        throw new Error(err?.error ?? "Failed to upload logo");
       }
-      const { uploadUrl, key } = await uploadRes.json();
+      const { logoKey } = await uploadRes.json();
 
-      // Step 2: PUT the file directly to S3
+      // Fetch the presigned GET URL for display
-      const putRes = await fetch(uploadUrl, {
-        method: "PUT",
-        headers: { "Content-Type": file.type },
-        body: file,
-      });
-      if (!putRes.ok) {
-        throw new Error("Failed to upload logo to storage");
-      }
-
-      // Step 3: Confirm the upload
-      const confirmRes = await fetch("/api/admin/settings/logo/confirm", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ key }),
-      });
-      if (!confirmRes.ok) {
-        const err = await confirmRes.json().catch(() => null);
-        throw new Error(err?.error ?? "Failed to confirm logo upload");
-      }
-
-      // Step 4: Fetch the presigned GET URL for display
       const logoRes = await fetch("/api/admin/settings/logo");
       if (logoRes.ok) {
         const logoData = await logoRes.json();
-        setForm((f) => ({ ...f, logoKey: key, logoUrl: logoData.url, logoBase64: null, logoMimeType: null }));
+        setForm((f) => ({ ...f, logoKey, logoUrl: logoData.url, logoBase64: null, logoMimeType: null }));
       } else {
-        setForm((f) => ({ ...f, logoKey: key, logoUrl: null, logoBase64: null, logoMimeType: null }));
+        setForm((f) => ({ ...f, logoKey, logoUrl: null, logoBase64: null, logoMimeType: null }));
       }
       setMessage({ type: "success", text: "Logo uploaded." });
       refresh();

apps/web/src/portal/CustomerPortal.tsx

@@ -326,7 +326,7 @@ export function CustomerPortal() {
         )}
 
         {/* Main Content */}
-        <main className="flex-1 min-h-screen">
+        <main className="flex-1 min-h-screen overflow-x-hidden">
           <div className="hidden md:flex items-center justify-between px-8 py-4 border-b border-stone-200 bg-white">
             <div>
               <h1 className="text-lg font-semibold text-stone-800">
@@ -340,7 +340,7 @@ export function CustomerPortal() {
               </div>
             </div>
           </div>
-          <div className="p-4 md:p-8 max-w-6xl">
+          <div className="p-4 md:p-8 max-w-6xl w-full overflow-hidden">
             {renderSection()}
           </div>
         </main>

apps/web/src/portal/sections/Appointments.tsx

@@ -379,7 +379,7 @@ export function ConfirmationSection({
     try {
       const headers: Record<string, string> = {};
       if (sessionId) {
-        headers['Authorization'] = `Bearer ${sessionId}`;
+        headers['X-Impersonation-Session-Id'] = sessionId ?? '';
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/confirm`, {
         method: 'POST',
@@ -455,7 +455,7 @@ function CancelAppointmentButton({
     try {
       const headers: Record<string, string> = {};
       if (sessionId) {
-        headers['Authorization'] = `Bearer ${sessionId}`;
+        headers['X-Impersonation-Session-Id'] = sessionId ?? '';
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/cancel`, {
         method: 'POST',
@@ -507,7 +507,7 @@ export function CustomerNotesSection({
     try {
       const headers: Record<string, string> = { 'Content-Type': 'application/json' };
       if (sessionId) {
-        headers['Authorization'] = `Bearer ${sessionId}`;
+        headers['X-Impersonation-Session-Id'] = sessionId ?? '';
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/notes`, {
         method: 'PATCH',
@@ -600,7 +600,7 @@ export function RescheduleFlow({
     setError(null);
     try {
       const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-      if (sessionId) headers['Authorization'] = `Bearer ${sessionId}`;
+      if (sessionId) headers['X-Impersonation-Session-Id'] = sessionId ?? '';
       const res = await fetch(`/api/portal/appointments/${appt.id}/reschedule`, {
         method: 'POST',
         headers,
@@ -784,7 +784,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: `Bearer ${sessionId}`,
+          'X-Impersonation-Session-Id': sessionId ?? '',
         },
         body: JSON.stringify({
           petId: selectedPet.id,

apps/web/src/portal/sections/BillingPayments.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { loadStripe } from "@stripe/stripe-js";
 import { Elements, PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js";
 import { CreditCard, DollarSign, Package, Zap } from "lucide-react";
@@ -130,7 +130,7 @@ function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
         </div>
       )}
 
-      <div className="flex gap-2">
+      <div className="flex gap-2 flex-wrap">
         {([
           { id: "invoices" as const, label: "Invoices", icon: DollarSign },
           { id: "payment" as const, label: "Payment Methods", icon: CreditCard },
@@ -356,6 +356,48 @@ function PaymentModal({ sessionId, pending, onClose, onSuccess }: PaymentModalPr
   const [isProcessing, setIsProcessing] = useState(false);
   const [isComplete, setIsComplete] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const completeModalRef = useRef<HTMLDivElement>(null);
+  const paymentModalRef = useRef<HTMLDivElement>(null);
+
+  // Focus trap + Escape-to-close for both inline modals
+  useEffect(() => {
+    const modalRef = isComplete ? completeModalRef.current : paymentModalRef.current;
+    if (!modalRef) return;
+
+    const previouslyFocused = document.activeElement as HTMLElement;
+    const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = modalRef.querySelectorAll<HTMLElement>(focusableSelectors);
+    const firstFocusable = focusableElements[0];
+    firstFocusable?.focus();
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !modalRef) return;
+      const focusables = modalRef.querySelectorAll<HTMLElement>(focusableSelectors);
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previouslyFocused?.focus();
+    };
+  }, [isComplete, onClose]);
 
   const formatCents = (cents: number) =>
     new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(cents / 100);
@@ -420,8 +462,8 @@ function PaymentModal({ sessionId, pending, onClose, onSuccess }: PaymentModalPr
 
   if (isComplete) {
     return (
-      <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+      <div role="dialog" aria-modal="true" className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-        <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 text-center">
+        <div ref={completeModalRef} className="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 text-center">
           <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
             <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
@@ -440,8 +482,8 @@ function PaymentModal({ sessionId, pending, onClose, onSuccess }: PaymentModalPr
   }
 
   return (
-    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+    <div role="dialog" aria-modal="true" className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-      <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6">
+      <div ref={paymentModalRef} className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6">
         <div className="flex items-center justify-between mb-6">
           <h2 className="font-semibold text-stone-800 text-lg">Pay Outstanding Balance</h2>
           <button onClick={onClose} className="text-stone-400 hover:text-stone-600">