fix(gro-817): guard appointments.past and map API pet field names

- Guard appointments.past with fallback: apptsData?.upcoming || [],
  apptsData?.past || [] to prevent TypeError when API returns unexpected shape
- Map API fields (weightKg, dateOfBirth, photoKey, groomingNotes) to
  interface fields (weight, birthDate, photoUrl, notes) expected by UI

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/api/src/index.ts

@@ -19,7 +19,7 @@ import { impersonationRouter } from "./routes/impersonation.js";
 import { settingsRouter } from "./routes/settings.js";
 import { authProviderRouter } from "./routes/authProvider.js";
 import { searchRouter } from "./routes/search.js";
-import { getObject } from "./lib/s3.js";
+import { getPresignedGetUrl } from "./lib/s3.js";
 import { calendarRouter } from "./routes/calendar.js";
 import { setupRouter } from "./routes/setup.js";
 import { getDb, businessSettings, eq, staff } from "@groombook/db";
@@ -126,31 +126,20 @@ function validateLogoMagicBytes(
   }
 }
 
-// Public logo proxy — no auth required, streams logo from S3 so browser never sees raw S3 URL
-app.get("/api/branding/logo", async (c) => {
-  const db = getDb();
-  const [row] = await db.select().from(businessSettings).limit(1);
-  if (!row) return c.json({ error: "Settings not found" }, 404);
-  if (!row.logoKey) return c.json({ error: "No logo on file" }, 404);
-
-  const { body, contentType } = await getObject(row.logoKey);
-  return new Response(Buffer.from(body), {
-    status: 200,
-    headers: {
-      "Content-Type": contentType,
-      "Cache-Control": "public, max-age=86400",
-    },
-  });
-});
-
 // Public branding endpoint — no auth required, returns business name/colors/logo
 app.get("/api/branding", async (c) => {
   const db = getDb();
   const [row] = await db.select().from(businessSettings).limit(1);
   const settings = row ?? { businessName: "GroomBook", primaryColor: "#4f8a6f", accentColor: "#8b7355", logoBase64: null, logoMimeType: null, logoKey: null };
 
-  // Return the public proxy path so browser never sees a raw S3 URL
+  let logoUrl: string | null = null;
-  const logoUrl = settings.logoKey ? "/api/branding/logo" : null;
+  if (settings.logoKey) {
+    try {
+      logoUrl = await getPresignedGetUrl(settings.logoKey);
+    } catch {
+      // If S3 URL generation fails, fall back to legacy base64
+    }
+  }
 
   // Defensive: validate magic bytes to prevent MIME type confusion attacks
   // via the legacy base64 logo fields

apps/api/src/lib/s3.ts

@@ -68,25 +68,6 @@ export async function deleteObject(key: string): Promise<void> {
   );
 }
 
-/** Read an object from S3 and return its body buffer and content type. */
-export async function getObject(key: string): Promise<{ body: Buffer; contentType: string }> {
-  const client = getS3Client();
-  const response = await client.send(
-    new GetObjectCommand({
-      Bucket: getBucket(),
-      Key: key,
-    })
-  );
-  const chunks: Uint8Array[] = [];
-  // response.Body is a Readable stream; collect chunks into a buffer
-  for await (const chunk of response.Body as AsyncIterable<Uint8Array>) {
-    chunks.push(chunk);
-  }
-  const body = Buffer.concat(chunks);
-  const contentType = response.ContentType ?? "application/octet-stream";
-  return { body, contentType };
-}
-
 /** Upload an object directly to S3 (server-side only, not a pre-signed URL). */
 export async function putObject(
   key: string,

apps/api/src/routes/invoices.ts

@@ -101,8 +101,6 @@ invoicesRouter.get(
         paymentMethod: invoices.paymentMethod,
         paidAt: invoices.paidAt,
         notes: invoices.notes,
-        stripePaymentIntentId: invoices.stripePaymentIntentId,
-        stripeRefundId: invoices.stripeRefundId,
         createdAt: invoices.createdAt,
         updatedAt: invoices.updatedAt,
       })
@@ -482,50 +480,40 @@ invoicesRouter.post(
 
 // Payment stats for admin dashboard
 invoicesRouter.get("/stats/summary", async (c) => {
-  try {
+  const db = getDb();
-    const db = getDb();
+  const now = new Date();
-    const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
 
-    const [revenueResult] = await db
+  const [revenueResult] = await db
-      .select({ total: sql<number>`coalesce(sum(total_cents), 0)` })
+    .select({ total: sql<number>`coalesce(sum(total_cents), 0)` })
-      .from(invoices)
+    .from(invoices)
-      .where(and(eq(invoices.status, "paid"), sql`${invoices.paidAt} >= ${startOfMonth}`));
+    .where(and(eq(invoices.status, "paid"), sql`${invoices.paidAt} >= ${startOfMonth}`));
 
-    const [outstandingResult] = await db
+  const [outstandingResult] = await db
-      .select({ total: sql<number>`coalesce(sum(total_cents), 0)` })
+    .select({ total: sql<number>`coalesce(sum(total_cents), 0)` })
-      .from(invoices)
+    .from(invoices)
-      .where(eq(invoices.status, "pending"));
+    .where(eq(invoices.status, "pending"));
 
-    const [refundsResult] = await db
+  const [refundsResult] = await db
-      .select({ total: sql<number>`coalesce(sum(amount_cents), 0)` })
+    .select({ total: sql<number>`coalesce(sum(amount_cents), 0)` })
-      .from(refunds)
+    .from(refunds)
-      .where(sql`${refunds.createdAt} >= ${startOfMonth}`);
+    .where(sql`${refunds.createdAt} >= ${startOfMonth}`);
 
-    const methodBreakdown = await db
+  const methodBreakdown = await db
-      .select({
+    .select({
-        method: invoices.paymentMethod,
+      method: invoices.paymentMethod,
-        total: sql<number>`count(*)`,
+      total: sql<number>`count(*)`,
-      })
+    })
-      .from(invoices)
+    .from(invoices)
-      .where(and(eq(invoices.status, "paid"), sql`${invoices.paidAt} >= ${startOfMonth}`))
+    .where(and(eq(invoices.status, "paid"), sql`${invoices.paidAt} >= ${startOfMonth}`))
-      .groupBy(invoices.paymentMethod);
+    .groupBy(invoices.paymentMethod);
 
-    return c.json({
+  return c.json({
-      revenueThisMonth: revenueResult?.total ?? 0,
+    revenueThisMonth: revenueResult?.total ?? 0,
-      outstanding: outstandingResult?.total ?? 0,
+    outstanding: outstandingResult?.total ?? 0,
-      refundsThisMonth: refundsResult?.total ?? 0,
+    refundsThisMonth: refundsResult?.total ?? 0,
-      methodBreakdown,
+    methodBreakdown,
-    });
+  });
-  } catch (err) {
-    console.error("stats/summary error:", err);
-    return c.json({
-      revenueThisMonth: 0,
-      outstanding: 0,
-      refundsThisMonth: 0,
-      methodBreakdown: [],
-    });
-  }
 });
 
 // Get Stripe payment details for an invoice (card last4, payment status, refund status)

apps/api/src/routes/portal.ts

@@ -102,6 +102,7 @@ portalRouter.get("/appointments", async (c) => {
   const db = getDb();
   const clientId = c.get("portalClientId");
 
+  const now = new Date();
   const allAppts = await db
     .select({
       id: appointments.id,
@@ -141,7 +142,10 @@ portalRouter.get("/appointments", async (c) => {
     staff: a.staffId ? { id: staffMap[a.staffId]?.id, name: staffMap[a.staffId]?.name } : null,
   }));
 
-  return c.json({ appointments: appts });
+  const upcoming = appts.filter(a => a.startTime > now && a.status !== "cancelled");
+  const past = appts.filter(a => a.startTime <= now || a.status === "cancelled");
+
+  return c.json({ upcoming, past });
 });
 
 portalRouter.get("/pets", async (c) => {
@@ -149,7 +153,7 @@ portalRouter.get("/pets", async (c) => {
   const clientId = c.get("portalClientId");
 
   const clientPets = await db.select().from(pets).where(eq(pets.clientId, clientId));
-  return c.json(clientPets.map(p => ({ id: p.id, name: p.name, breed: p.breed, weight: p.weightKg, birthDate: p.dateOfBirth, photoUrl: p.photoKey, notes: p.groomingNotes })));
+  return c.json(clientPets.map(p => ({ id: p.id, name: p.name, breed: p.breed, weightKg: p.weightKg, dateOfBirth: p.dateOfBirth, photoKey: p.photoKey, groomingNotes: p.groomingNotes })));
 });
 
 portalRouter.get("/invoices", async (c) => {

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, deleteObject, putObject, getObject } from "../lib/s3.js";
+import { getPresignedUploadUrl, getPresignedGetUrl, deleteObject, putObject } from "../lib/s3.js";
 import { requireSuperUser } from "../middleware/rbac.js";
 
 export const settingsRouter = new Hono();
@@ -215,8 +215,7 @@ settingsRouter.post(
 
 /**
  * GET /api/admin/settings/logo
- * Proxies the logo from S3 so the browser never sees an S3 URL.
+ * Returns a presigned GET URL for the logo.
- * Returns the image bytes with proper Content-Type.
  */
 settingsRouter.get("/logo", async (c) => {
   const db = getDb();
@@ -225,14 +224,8 @@ settingsRouter.get("/logo", async (c) => {
   if (!row) return c.json({ error: "Settings not found" }, 404);
   if (!row.logoKey) return c.json({ error: "No logo on file" }, 404);
 
-  const { body, contentType } = await getObject(row.logoKey);
+  const url = await getPresignedGetUrl(row.logoKey);
-  return new Response(Buffer.from(body), {
+  return c.json({ url, logoKey: row.logoKey });
-    status: 200,
-    headers: {
-      "Content-Type": contentType,
-      "Cache-Control": "public, max-age=86400",
-    },
-  });
 });
 
 /**

apps/api/src/routes/setup.ts

@@ -9,8 +9,8 @@ const RATE_LIMIT_MAX = 10;
 const rateLimitMap = new Map<string, { count: number; resetAt: number }>();
 
 function rateLimitByIp(ip: string): { allowed: boolean; remaining: number } {
-  const entry = rateLimitMap.get(ip);
   const now = Date.now();
+  const entry = rateLimitMap.get(ip);
   if (!entry || now > entry.resetAt) {
     rateLimitMap.set(ip, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS });
     return { allowed: true, remaining: RATE_LIMIT_MAX - 1 };

apps/e2e/tests/navigation.spec.ts

@@ -44,16 +44,6 @@ test.beforeEach(async ({ page }) => {
         json: { newClients: [], activeInPeriodCount: 0, churnRisk: [], churnRiskTotal: 0 },
       });
     }
-    if (url.includes("/api/invoices/stats/summary")) {
-      return route.fulfill({
-        json: {
-          revenueThisMonth: 0,
-          outstanding: 0,
-          refundsThisMonth: 0,
-          methodBreakdown: [],
-        },
-      });
-    }
     if (url.includes("/api/invoices")) {
       return route.fulfill({ json: { data: [], total: 0 } });
     }

apps/web/src/pages/Appointments.tsx

@@ -112,17 +112,9 @@ export function AppointmentsPage() {
   const [viewMode, setViewMode] = useState<"status" | "groomer">("status");
   // null key = unassigned; staffId string = that groomer; undefined set = all visible
   const [hiddenGroomers, setHiddenGroomers] = useState<Set<string | null>>(new Set());
-  const [paymentStats, setPaymentStats] = useState<{ revenueThisMonth: number; outstanding: number; refundsThisMonth: number; methodBreakdown: { method: string | null; total: number }[] } | null>(null);
 
   const weekEnd = addDays(weekStart, 6);
 
-  useEffect(() => {
-    fetch("/api/invoices/stats/summary")
-      .then((r) => r.ok ? r.json() : null)
-      .then((data) => { if (data) setPaymentStats(data); })
-      .catch(() => {});
-  }, []);
-
   const loadAppointments = useCallback(() => {
     const from = weekStart.toISOString();
     const to = addDays(weekStart, 7).toISOString();
@@ -322,24 +314,6 @@ export function AppointmentsPage() {
         </button>
       </div>
 
-      {/* Payment Stats Summary */}
-      {paymentStats && (
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "0.75rem", marginBottom: "1.25rem" }}>
-          <div style={{ background: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: 8, padding: "0.75rem 1rem" }}>
-            <div style={{ fontSize: 12, color: "#166534", fontWeight: 600, marginBottom: "0.25rem" }}>Revenue (paid)</div>
-            <div style={{ fontSize: 20, fontWeight: 700, color: "#15803d" }}>${(paymentStats.revenueThisMonth / 100).toFixed(2)}</div>
-          </div>
-          <div style={{ background: "#fefce8", border: "1px solid #fde047", borderRadius: 8, padding: "0.75rem 1rem" }}>
-            <div style={{ fontSize: 12, color: "#854d0e", fontWeight: 600, marginBottom: "0.25rem" }}>Outstanding</div>
-            <div style={{ fontSize: 20, fontWeight: 700, color: "#a16207" }}>${(paymentStats.outstanding / 100).toFixed(2)}</div>
-          </div>
-          <div style={{ background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 8, padding: "0.75rem 1rem" }}>
-            <div style={{ fontSize: 12, color: "#991b1b", fontWeight: 600, marginBottom: "0.25rem" }}>Refunds (this mo.)</div>
-            <div style={{ fontSize: 20, fontWeight: 700, color: "#dc2626" }}>${(paymentStats.refundsThisMonth / 100).toFixed(2)}</div>
-          </div>
-        </div>
-      )}
-
       {/* ── View Mode + Groomer Filters ── */}
       <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }}>
         <span style={{ fontSize: 13, fontWeight: 600, color: "#374151" }}>Color by:</span>

apps/web/src/pages/Invoices.tsx

@@ -173,21 +173,22 @@ function InvoiceDetailModal({
   const [error, setError] = useState<string | null>(null);
   const [tipStr, setTipStr] = useState((invoice.tipCents / 100).toFixed(2));
   const [paymentMethod, setPaymentMethod] = useState<string>(invoice.paymentMethod ?? "cash");
-const [showRefundDialog, setShowRefundDialog] = useState(false);
+  const [showRefundDialog, setShowRefundDialog] = useState(false);
   const [refundType, setRefundType] = useState<"full" | "partial">("full");
-  const [refundAmount, setRefundAmount] = useState("");
+  const [partialAmount, setPartialAmount] = useState("");
-  const [refundError, setRefundError] = useState<string | null>(null);
+  const [stripeDetails, setStripeDetails] = useState<{ cardLast4: string | null; paymentStatus: string | null; stripeRefundId: string | null } | null>(null);
-  const [refunding, setRefunding] = useState(false);
 
-  // Fetch current staff role to determine manager access
+  // Fetch Stripe details when modal opens for paid invoices with a payment intent
-  const [staffMe, setStaffMe] = useState<{ role: string; isSuperUser: boolean } | null>(null);
   useEffect(() => {
-    fetch("/api/staff/me")
+    if (invoice.status === "paid" && invoice.stripePaymentIntentId) {
-      .then((r) => r.json())
+      fetch(`/api/invoices/${invoice.id}/stripe-details`)
-      .then((d) => setStaffMe(d))
+        .then((r) => r.ok ? r.json() : null)
-      .catch(() => setStaffMe(null));
+        .then((data) => { if (data) setStripeDetails(data); })
-  }, []);
+        .catch(() => {});
-  const isManager = staffMe && (staffMe.role === "manager" || staffMe.isSuperUser);
+    } else {
+      setStripeDetails(null);
+    }
+  }, [invoice.id, invoice.status, invoice.stripePaymentIntentId]);
 
   // Tip split state: array of {staffId, staffName, pct}
   const linkedAppt = invoice.appointmentId
@@ -291,6 +292,35 @@ const [showRefundDialog, setShowRefundDialog] = useState(false);
     }
   }
 
+  async function issueRefund() {
+    const amountCents = refundType === "partial"
+      ? Math.round(parseFloat(partialAmount) * 100)
+      : undefined;
+    if (refundType === "partial" && (!amountCents || amountCents <= 0)) {
+      setError("Enter a valid refund amount");
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/invoices/${invoice.id}/refund`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(amountCents ? { amountCents } : {}),
+      });
+      if (!res.ok) {
+        const err = (await res.json()) as { error?: string };
+        throw new Error(err.error ?? `HTTP ${res.status}`);
+      }
+      setShowRefundDialog(false);
+      onUpdated();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "Failed to issue refund");
+    } finally {
+      setSaving(false);
+    }
+  }
+
   if (loading) return <Modal onClose={onClose}><p style={{ padding: "1rem" }}>Loading…</p></Modal>;
 
   const tipCentsCalc = Math.round(parseFloat(tipStr) * 100) || 0;
@@ -350,15 +380,15 @@ const [showRefundDialog, setShowRefundDialog] = useState(false);
         />
         {invoice.paidAt && <SummaryRow label="Paid on" value={fmtDate(invoice.paidAt)} />}
         {invoice.paymentMethod && <SummaryRow label="Payment" value={invoice.paymentMethod} />}
-        {invoice.stripePaymentIntentId && (
+        {stripeDetails && (
           <>
-            {invoice.cardLast4 && (
+            {stripeDetails.cardLast4 && (
-              <SummaryRow label="Card" value={`•••• ${invoice.cardLast4}`} />
+              <SummaryRow label="Card" value={`•••• ${stripeDetails.cardLast4}`} />
             )}
-            {invoice.paymentStatus && (
+            {stripeDetails.paymentStatus && (
-              <SummaryRow label="Stripe status" value={invoice.paymentStatus} />
+              <SummaryRow label="Stripe status" value={stripeDetails.paymentStatus} />
             )}
-            {invoice.stripeRefundId && (
+            {stripeDetails.stripeRefundId && (
               <SummaryRow label="Refund" value="Refunded" />
             )}
           </>
@@ -480,85 +510,77 @@ const [showRefundDialog, setShowRefundDialog] = useState(false);
         </div>
       )}
       {(invoice.status === "paid" || invoice.status === "void") && (
-        <div style={{ marginTop: "1rem", borderTop: "1px solid #e2e8f0", paddingTop: "1rem" }}>
+        <div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-          {invoice.stripeRefundId && (
+          {invoice.status === "paid" && invoice.stripePaymentIntentId && (
-            <div style={{ marginBottom: "0.75rem", display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <button
-              <span style={{ background: "#fef3c7", color: "#92400e", padding: "0.2rem 0.6rem", borderRadius: 4, fontSize: 13, fontWeight: 600 }}>Refunded</span>
+              onClick={() => setShowRefundDialog(true)}
-            </div>
+              style={{ ...btnStyle, color: "#b45309", borderColor: "#b45309" }}
+            >
+              Refund
+            </button>
           )}
-          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
+          <button onClick={onClose} style={btnStyle}>Close</button>
-            {invoice.status === "paid" && invoice.stripePaymentIntentId && !invoice.stripeRefundId && isManager && (
-              <button onClick={() => setShowRefundDialog(true)} style={{ ...btnStyle, color: "#fff", backgroundColor: "#7c3aed", borderColor: "#7c3aed" }}>
-                Refund
-              </button>
-            )}
-            <button onClick={onClose} style={btnStyle}>Close</button>
-          </div>
         </div>
       )}
 
+      {/* Refund Dialog */}
       {showRefundDialog && (
-        <div style={{ marginTop: "1rem", border: "1px solid #e2e8f0", borderRadius: 8, padding: "1rem", background: "#f9fafb" }}>
+        <Modal onClose={() => setShowRefundDialog(false)}>
-          <p style={{ fontWeight: 600, margin: "0 0 0.75rem" }}>Process Refund</p>
+          <h2 style={{ marginTop: 0 }}>Issue Refund</h2>
-          <div style={{ display: "flex", gap: "0.75rem", marginBottom: "0.75rem" }}>
+          <p style={{ fontSize: 14, color: "#6b7280", marginBottom: "1rem" }}>
-            <label style={{ display: "flex", alignItems: "center", gap: "0.25rem", cursor: "pointer" }}>
+            Invoice total: <strong>{fmtMoney(invoice.totalCents)}</strong>
-              <input type="radio" checked={refundType === "full"} onChange={() => setRefundType("full")} />
+          </p>
+          <div style={{ marginBottom: "0.75rem" }}>
+            <label style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontWeight: 600, marginBottom: "0.5rem" }}>
+              <input
+                type="radio"
+                name="refundType"
+                value="full"
+                checked={refundType === "full"}
+                onChange={() => setRefundType("full")}
+              />
               Full refund
             </label>
-            <label style={{ display: "flex", alignItems: "center", gap: "0.25rem", cursor: "pointer" }}>
+            <label style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontWeight: 600 }}>
-              <input type="radio" checked={refundType === "partial"} onChange={() => setRefundType("partial")} />
+              <input
+                type="radio"
+                name="refundType"
+                value="partial"
+                checked={refundType === "partial"}
+                onChange={() => setRefundType("partial")}
+              />
               Partial refund
             </label>
           </div>
           {refundType === "partial" && (
-            <div style={{ marginBottom: "0.75rem" }}>
+            <div style={{ marginBottom: "1rem" }}>
               <input
                 type="number"
                 min="0.01"
                 step="0.01"
-                placeholder="Amount ($)"
+                placeholder="0.00"
-                value={refundAmount}
+                value={partialAmount}
-                onChange={(e) => setRefundAmount(e.target.value)}
+                onChange={(e) => setPartialAmount(e.target.value)}
-                style={{ ...inputStyle, width: 100 }}
+                style={{ ...inputStyle, width: 120 }}
               />
             </div>
           )}
-          {refundError && <p style={{ color: "red", margin: "0 0 0.5rem", fontSize: 13 }}>{refundError}</p>}
+          {error && <p style={{ color: "red", margin: "0.5rem 0" }}>{error}</p>}
-          <div style={{ display: "flex", gap: "0.5rem" }}>
+          <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.75rem" }}>
             <button
-              onClick={async () => {
+              onClick={issueRefund}
-                setRefunding(true);
+              disabled={saving}
-                setRefundError(null);
+              style={{ ...btnStyle, backgroundColor: "#b45309", color: "#fff", borderColor: "#b45309" }}
-                try {
-                  const body = refundType === "partial" ? { amountCents: Math.round(parseFloat(refundAmount) * 100) } : {};
-                  const res = await fetch(`/api/invoices/${invoice.id}/refund`, {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify(body),
-                  });
-                  if (!res.ok) {
-                    const err = (await res.json()) as { error?: string };
-                    throw new Error(err.error ?? `HTTP ${res.status}`);
-                  }
-                  setShowRefundDialog(false);
-                  onUpdated();
-                } catch (e: unknown) {
-                  setRefundError(e instanceof Error ? e.message : "Refund failed");
-                } finally {
-                  setRefunding(false);
-                }
-              }}
-              disabled={refunding}
-              style={{ ...btnStyle, color: "#fff", backgroundColor: "#7c3aed", borderColor: "#7c3aed" }}
             >
-              {refunding ? "Processing…" : "Process Refund"}
+              {saving ? "Processing…" : "Issue Refund"}
+            </button>
+            <button onClick={() => setShowRefundDialog(false)} style={btnStyle}>
+              Cancel
             </button>
-            <button onClick={() => { setShowRefundDialog(false); setRefundError(null); }} style={btnStyle}>Cancel</button>
           </div>
-        </div>
+        </Modal>
       )}
-
+    </Modal>
-          </Modal>
   );
 }
 

apps/web/src/pages/Settings.tsx

@@ -89,14 +89,24 @@ export function SettingsPage() {
     fetch("/api/admin/settings")
       .then((r) => r.json())
       .then(async (data) => {
-        // The logo is now proxied through the API server so the browser
+        let logoUrl: string | null = null;
-        // never receives an S3 URL — use the proxy path directly as the src.
+        if (data.logoKey) {
+          try {
+            const logoRes = await fetch("/api/admin/settings/logo");
+            if (logoRes.ok) {
+              const logoData = await logoRes.json();
+              logoUrl = logoData.url;
+            }
+          } catch {
+            // ignore
+          }
+        }
         setForm({
           businessName: data.businessName ?? "GroomBook",
           primaryColor: data.primaryColor ?? "#4f8a6f",
           accentColor: data.accentColor ?? "#8b7355",
           logoKey: data.logoKey ?? null,
-          logoUrl: data.logoKey ? "/api/admin/settings/logo" : null,
+          logoUrl,
           logoBase64: data.logoBase64 ?? null,
           logoMimeType: data.logoMimeType ?? null,
         });
@@ -162,7 +172,15 @@ export function SettingsPage() {
         throw new Error(err?.error ?? "Failed to upload logo");
       }
       const { logoKey } = await uploadRes.json();
-      setForm((f) => ({ ...f, logoKey, logoUrl: `/api/admin/settings/logo?t=${Date.now()}`, logoBase64: null, logoMimeType: null }));
+
+      // 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, logoUrl: logoData.url, logoBase64: null, logoMimeType: null }));
+      } else {
+        setForm((f) => ({ ...f, logoKey, logoUrl: null, logoBase64: null, logoMimeType: null }));
+      }
       setMessage({ type: "success", text: "Logo uploaded." });
       refresh();
     } catch (err: unknown) {

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

@@ -27,7 +27,8 @@ interface Appointment {
 }
 
 interface AppointmentsResponse {
-  appointments: Appointment[];
+  upcoming: Appointment[];
+  past: Appointment[];
 }
 
 interface Props {
@@ -45,7 +46,7 @@ function buildHeaders(sessionId: string | null): Record<string, string> {
 
 export function PetProfiles({ sessionId, readOnly }: Props) {
   const [pets, setPets] = useState<Pet[]>([]);
-  const [appointments, setAppointments] = useState<AppointmentsResponse>({ appointments: [] });
+  const [appointments, setAppointments] = useState<AppointmentsResponse>({ upcoming: [], past: [] });
   const [selectedPetId, setSelectedPetId] = useState<string>("");
   const [activeTab, setActiveTab] = useState<"info" | "medical" | "grooming" | "history">("info");
   const [editingPetId, setEditingPetId] = useState<string | null>(null);
@@ -70,10 +71,18 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
         }
 
         const petsData = await petsRes.json();
-        const apptsData: AppointmentsResponse = await apptsRes.json();
+        const apptsData = await apptsRes.json();
 
-        setPets(petsData);
+        setPets(petsData.map((p: { id: string; name: string; breed: string; weightKg: number; dateOfBirth: string; photoKey: string | null; groomingNotes: string | null }) => ({
-        setAppointments(apptsData);
+          id: p.id,
+          name: p.name,
+          breed: p.breed,
+          weight: p.weightKg,
+          birthDate: p.dateOfBirth,
+          photoUrl: p.photoKey ?? null,
+          notes: p.groomingNotes ?? null,
+        })));
+        setAppointments({ upcoming: apptsData?.upcoming || [], past: apptsData?.past || [] });
 
         if (petsData.length > 0 && !selectedPetId) {
           setSelectedPetId(petsData[0].id);
@@ -89,7 +98,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
   }, [sessionId]);
 
   const selectedPet = pets.find(p => p.id === selectedPetId) ?? null;
-  const petHistory = appointments.appointments.filter(a => a.pet?.id === selectedPetId && new Date(a.startTime) <= new Date());
+  const petHistory = appointments.past.filter(a => a.pet?.id === selectedPetId);
   const editingPet = editingPetId ? pets.find(p => p.id === editingPetId) ?? null : null;
 
   function handlePetSave(updatedPet: Pet) {