feat(GRO-609): admin refund handling and payment stats dashboard

- Add refund button to invoice detail modal (paid Stripe invoices only)
- Full refund (default) and partial refund via confirmation dialog
- Call POST /api/invoices/:id/refund on confirmation
- Display Stripe payment info (card last4, brand, payment status)
- Show refund status when invoice has been refunded
- Add payment stats section to InvoicesPage (revenue, outstanding, refunds, method breakdown)
- Add GET /api/invoices/:id/stripe-payment endpoint for card details
- Add GET /api/invoices/stats endpoint for monthly payment stats
- Extend Invoice type with Stripe fields (stripePaymentIntentId, stripeRefundId)

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

.dockerignore

@@ -7,3 +7,5 @@ apps/web/dist
 apps/api/dist
 packages/db/dist
 packages/types/dist
+.turbo
+screenshots/

.github/workflows/ci.yml

@@ -20,6 +20,8 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
+        with:
+          version: '9.15.4'
 
       - uses: actions/setup-node@v4
         with:
@@ -42,6 +44,8 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
+        with:
+          version: '9.15.4'
 
       - uses: actions/setup-node@v4
         with:
@@ -62,6 +66,8 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
+        with:
+          version: '9.15.4'
 
       - uses: actions/setup-node@v4
         with:
@@ -101,6 +107,8 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
+        with:
+          version: '9.15.4'
 
       - uses: actions/setup-node@v4
         with:
@@ -238,7 +246,6 @@ jobs:
           echo "Deploying images tagged $TAG to groombook-dev..."
 
           # Run migration with PR image
-          kubectl delete job migrate-schema -n groombook-dev --ignore-not-found
           kubectl delete job "migrate-pr-$PR_NUM" -n groombook-dev --ignore-not-found
           cat <<EOF | kubectl apply -n groombook-dev -f -
           apiVersion: batch/v1
@@ -303,6 +310,8 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
+        with:
+          version: '9.15.4'
 
       - uses: actions/setup-node@v4
         with:
@@ -409,11 +418,17 @@ jobs:
 
           git push -u origin "chore/update-image-tags-${TAG}"
 
-          # Create PR and merge immediately (no required checks on groombook/infra)
-          PR_URL=$(gh pr create \
-            --repo groombook/infra \
-            --base main \
-            --head "chore/update-image-tags-${TAG}" \
-            --title "chore: deploy ${TAG} to dev" \
-            --body "[GRO-178](/GRO/issues/GRO-178) — automated image tag update from main merge")
-          gh pr merge "$PR_URL" --merge
+          # Check if PR already exists for this branch
+          EXISTING_PR=$(gh pr list --repo groombook/infra --head "chore/update-image-tags-${TAG}" --state open --json number -q '.[0].number' || true)
+          if [ -n "$EXISTING_PR" ]; then
+            echo "PR #$EXISTING_PR already exists for this tag, merging existing PR"
+            gh pr merge "$EXISTING_PR" --repo groombook/infra --merge
+          else
+            PR_URL=$(gh pr create \
+              --repo groombook/infra \
+              --base main \
+              --head "chore/update-image-tags-${TAG}" \
+              --title "chore: deploy ${TAG} to dev" \
+              --body "[GRO-178](/GRO/issues/GRO-178) — automated image tag update from main merge")
+            gh pr merge "$PR_URL" --merge
+          fi

apps/api/Dockerfile

@@ -12,6 +12,7 @@ RUN pnpm install --frozen-lockfile
 
 # Build
 FROM deps AS builder
+RUN mkdir -p /home/node/.cache/node/corepack
 COPY packages/ packages/
 COPY apps/api/ apps/api/
 RUN pnpm --filter @groombook/types build && \
@@ -34,6 +35,9 @@ COPY --from=builder /app/packages/types/dist packages/types/dist
 RUN pnpm install --frozen-lockfile --prod
 
 EXPOSE 3000
+RUN apk add --no-cache curl
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD curl -f http://localhost:3000/health || exit 1
 CMD ["node", "apps/api/dist/index.js"]
 
 # Migrate stage — runs drizzle-kit migrate against the database
@@ -46,4 +50,4 @@ CMD ["pnpm", "db:seed"]
 
 # Reset stage — drops all tables, re-runs migrations, and re-seeds
 FROM builder AS reset
-CMD ["pnpm", "db:reset"]
+CMD ["pnpm", "db:reset"]

apps/api/src/routes/appointmentGroups.ts

@@ -16,8 +16,9 @@ import {
   services,
   staff,
 } from "@groombook/db";
+import type { AppEnv } from "../middleware/rbac.js";
 
-export const appointmentGroupsRouter = new Hono();
+export const appointmentGroupsRouter = new Hono<AppEnv>();
 
 // ─── Schemas ──────────────────────────────────────────────────────────────────
 
@@ -49,6 +50,8 @@ appointmentGroupsRouter.get("/", async (c) => {
   const clientId = c.req.query("clientId");
   const from = c.req.query("from");
   const to = c.req.query("to");
+  const staffRow = c.get("staff");
+  const isGroomer = staffRow?.role === "groomer";
 
   const groupConditions = clientId
     ? [eq(appointmentGroups.clientId, clientId)]
@@ -88,6 +91,16 @@ appointmentGroupsRouter.get("/", async (c) => {
     }))
     .filter((g) => !from || g.appointments.length > 0);
 
+  if (isGroomer) {
+    return c.json(
+      result.filter((g) =>
+        g.appointments.some(
+          (a) => a.staffId === staffRow.id || a.batherStaffId === staffRow.id
+        )
+      )
+    );
+  }
+
   return c.json(result);
 });
 
@@ -96,6 +109,8 @@ appointmentGroupsRouter.get("/", async (c) => {
 appointmentGroupsRouter.get("/:id", async (c) => {
   const db = getDb();
   const id = c.req.param("id");
+  const staffRow = c.get("staff");
+  const isGroomer = staffRow?.role === "groomer";
 
   const [group] = await db
     .select()
@@ -111,6 +126,7 @@ appointmentGroupsRouter.get("/:id", async (c) => {
       serviceId: appointments.serviceId,
       serviceName: services.name,
       staffId: appointments.staffId,
+      batherStaffId: appointments.batherStaffId,
       staffName: staff.name,
       status: appointments.status,
       startTime: appointments.startTime,
@@ -125,6 +141,15 @@ appointmentGroupsRouter.get("/:id", async (c) => {
     .where(eq(appointments.groupId, id))
     .orderBy(appointments.startTime);
 
+  if (
+    isGroomer &&
+    !groupAppts.some(
+      (a) => a.staffId === staffRow.id || a.batherStaffId === staffRow.id
+    )
+  ) {
+    return c.json({ error: "Forbidden" }, 403);
+  }
+
   const [client] = await db
     .select({ name: clients.name, email: clients.email })
     .from(clients)
@@ -140,6 +165,13 @@ appointmentGroupsRouter.post(
   zValidator("json", createGroupSchema),
   async (c) => {
     const db = getDb();
+    const staffRow = c.get("staff");
+    if (staffRow?.role === "groomer") {
+      return c.json(
+        { error: "Forbidden: groomers cannot create group bookings" },
+        403
+      );
+    }
     const body = c.req.valid("json");
     const startTime = new Date(body.startTime);
 
@@ -244,6 +276,28 @@ appointmentGroupsRouter.patch(
     const db = getDb();
     const id = c.req.param("id");
     const body = c.req.valid("json");
+    const staffRow = c.get("staff");
+    const isGroomer = staffRow?.role === "groomer";
+
+    const [group] = await db
+      .select({ id: appointmentGroups.id })
+      .from(appointmentGroups)
+      .where(eq(appointmentGroups.id, id));
+    if (!group) return c.json({ error: "Not found" }, 404);
+
+    if (isGroomer) {
+      const groupAppts = await db
+        .select({ staffId: appointments.staffId, batherStaffId: appointments.batherStaffId })
+        .from(appointments)
+        .where(eq(appointments.groupId, id));
+      if (
+        !groupAppts.some(
+          (a) => a.staffId === staffRow.id || a.batherStaffId === staffRow.id
+        )
+      ) {
+        return c.json({ error: "Forbidden" }, 403);
+      }
+    }
 
     const [updated] = await db
       .update(appointmentGroups)
@@ -261,6 +315,8 @@ appointmentGroupsRouter.patch(
 appointmentGroupsRouter.delete("/:id", async (c) => {
   const db = getDb();
   const id = c.req.param("id");
+  const staffRow = c.get("staff");
+  const isGroomer = staffRow?.role === "groomer";
 
   const [group] = await db
     .select({ id: appointmentGroups.id })
@@ -268,6 +324,20 @@ appointmentGroupsRouter.delete("/:id", async (c) => {
     .where(eq(appointmentGroups.id, id));
   if (!group) return c.json({ error: "Not found" }, 404);
 
+  if (isGroomer) {
+    const groupAppts = await db
+      .select({ staffId: appointments.staffId, batherStaffId: appointments.batherStaffId })
+      .from(appointments)
+      .where(eq(appointments.groupId, id));
+    if (
+      !groupAppts.some(
+        (a) => a.staffId === staffRow.id || a.batherStaffId === staffRow.id
+      )
+    ) {
+      return c.json({ error: "Forbidden" }, 403);
+    }
+  }
+
   await db
     .update(appointments)
     .set({ status: "cancelled", updatedAt: new Date() })

apps/api/src/routes/appointments.ts

@@ -163,6 +163,28 @@ appointmentsRouter.post(
           }
         }
 
+        if (apptFields.batherStaffId) {
+          const bathConflicts = await tx
+            .select({ id: appointments.id })
+            .from(appointments)
+            .where(
+              and(
+                or(
+                  eq(appointments.staffId, apptFields.batherStaffId),
+                  eq(appointments.batherStaffId, apptFields.batherStaffId)
+                ),
+                lt(appointments.startTime, end),
+                gte(appointments.endTime, start),
+                ne(appointments.status, "cancelled"),
+                ne(appointments.status, "no_show"),
+              )
+            )
+            .limit(1);
+          if (bathConflicts.length > 0) {
+            throw Object.assign(new Error("conflict"), { statusCode: 409 });
+          }
+        }
+
         if (!recurrence) {
           // Single appointment
           const [inserted] = await tx
@@ -398,7 +420,8 @@ appointmentsRouter.patch(
     const needsConflictCheck =
       updateFields.startTime !== undefined ||
       updateFields.endTime !== undefined ||
-      updateFields.staffId !== undefined;
+      updateFields.staffId !== undefined ||
+      updateFields.batherStaffId !== undefined;
 
     const update: Record<string, unknown> = {
       ...updateFields,
@@ -434,6 +457,11 @@ appointmentsRouter.patch(
             updateFields.staffId !== undefined
               ? updateFields.staffId
               : current.staffId;
+          // Use provided batherStaffId (may be null to unassign); fall back to existing
+          const batherStaffId =
+            updateFields.batherStaffId !== undefined
+              ? updateFields.batherStaffId
+              : current.batherStaffId;
 
           if (end <= start) {
             throw Object.assign(new Error("end before start"), {
@@ -461,6 +489,29 @@ appointmentsRouter.patch(
             }
           }
 
+          if (batherStaffId) {
+            const bathConflicts = await tx
+              .select({ id: appointments.id })
+              .from(appointments)
+              .where(
+                and(
+                  or(
+                    eq(appointments.staffId, batherStaffId),
+                    eq(appointments.batherStaffId, batherStaffId)
+                  ),
+                  lt(appointments.startTime, end),
+                  gte(appointments.endTime, start),
+                  ne(appointments.status, "cancelled"),
+                  ne(appointments.status, "no_show"),
+                  ne(appointments.id, id),
+                )
+              )
+              .limit(1);
+            if (bathConflicts.length > 0) {
+              throw Object.assign(new Error("conflict"), { statusCode: 409 });
+            }
+          }
+
           const [updated] = await tx
             .update(appointments)
             .set(update)

apps/api/src/routes/groomingLogs.ts

@@ -1,9 +1,10 @@
 import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod/v3";
-import { desc, eq, getDb, groomingVisitLogs } from "@groombook/db";
+import { and, desc, eq, getDb, groomingVisitLogs, appointments, or } from "@groombook/db";
+import type { AppEnv } from "../middleware/rbac.js";
 
-export const groomingLogsRouter = new Hono();
+export const groomingLogsRouter = new Hono<AppEnv>();
 
 const createLogSchema = z.object({
   petId: z.string().uuid(),
@@ -20,6 +21,26 @@ groomingLogsRouter.get("/", async (c) => {
   const db = getDb();
   const petId = c.req.query("petId");
   if (!petId) return c.json({ error: "petId is required" }, 400);
+  const staffRow = c.get("staff");
+  const isGroomer = staffRow?.role === "groomer";
+
+  if (isGroomer) {
+    const [appt] = await db
+      .select({ id: appointments.id })
+      .from(appointments)
+      .where(
+        and(
+          eq(appointments.petId, petId),
+          or(
+            eq(appointments.staffId, staffRow.id),
+            eq(appointments.batherStaffId, staffRow.id)
+          )
+        )
+      )
+      .limit(1);
+    if (!appt) return c.json({ error: "Forbidden" }, 403);
+  }
+
   const rows = await db
     .select()
     .from(groomingVisitLogs)
@@ -33,11 +54,50 @@ groomingLogsRouter.post(
   zValidator("json", createLogSchema),
   async (c) => {
     const db = getDb();
-    const { groomedAt, ...rest } = c.req.valid("json");
+    const { groomedAt, petId, appointmentId, ...rest } = c.req.valid("json");
+    const staffRow = c.get("staff");
+    const isGroomer = staffRow?.role === "groomer";
+
+    if (isGroomer) {
+      if (appointmentId) {
+        const [appt] = await db
+          .select({ id: appointments.id })
+          .from(appointments)
+          .where(
+            and(
+              eq(appointments.id, appointmentId),
+              or(
+                eq(appointments.staffId, staffRow.id),
+                eq(appointments.batherStaffId, staffRow.id)
+              )
+            )
+          )
+          .limit(1);
+        if (!appt) return c.json({ error: "Forbidden" }, 403);
+      } else {
+        const [appt] = await db
+          .select({ id: appointments.id })
+          .from(appointments)
+          .where(
+            and(
+              eq(appointments.petId, petId),
+              or(
+                eq(appointments.staffId, staffRow.id),
+                eq(appointments.batherStaffId, staffRow.id)
+              )
+            )
+          )
+          .limit(1);
+        if (!appt) return c.json({ error: "Forbidden" }, 403);
+      }
+    }
+
     const [row] = await db
       .insert(groomingVisitLogs)
       .values({
         ...rest,
+        petId,
+        appointmentId: appointmentId ?? null,
         groomedAt: groomedAt ? new Date(groomedAt) : new Date(),
       })
       .returning();
@@ -47,10 +107,37 @@ groomingLogsRouter.post(
 
 groomingLogsRouter.delete("/:id", async (c) => {
   const db = getDb();
-  const [row] = await db
+  const id = c.req.param("id");
+  const staffRow = c.get("staff");
+  const isGroomer = staffRow?.role === "groomer";
+
+  const [log] = await db
+    .select()
+    .from(groomingVisitLogs)
+    .where(eq(groomingVisitLogs.id, id))
+    .limit(1);
+  if (!log) return c.json({ error: "Not found" }, 404);
+
+  if (isGroomer) {
+    const [appt] = await db
+      .select({ id: appointments.id })
+      .from(appointments)
+      .where(
+        and(
+          eq(appointments.petId, log.petId),
+          or(
+            eq(appointments.staffId, staffRow.id),
+            eq(appointments.batherStaffId, staffRow.id)
+          )
+        )
+      )
+      .limit(1);
+    if (!appt) return c.json({ error: "Forbidden" }, 403);
+  }
+
+  await db
     .delete(groomingVisitLogs)
-    .where(eq(groomingVisitLogs.id, c.req.param("id")))
+    .where(eq(groomingVisitLogs.id, id))
     .returning();
-  if (!row) return c.json({ error: "Not found" }, 404);
   return c.json({ ok: true });
 });

apps/api/src/routes/invoices.ts

@@ -4,6 +4,7 @@ import { z } from "zod/v3";
 import {
   and,
   eq,
+  gte,
   getDb,
   invoices,
   invoiceLineItems,
@@ -377,3 +378,106 @@ invoicesRouter.post(
     return c.json({ refundId: result.refundId });
   }
 );
+
+// ─── Stripe Payment Info ───────────────────────────────────────────────────────
+
+import { getStripeClient } from "../services/payment.js";
+
+invoicesRouter.get("/:id/stripe-payment", async (c) => {
+  const db = getDb();
+  const id = c.req.param("id");
+
+  const [invoice] = await db.select().from(invoices).where(eq(invoices.id, id));
+  if (!invoice) return c.json({ error: "Not found" }, 404);
+
+  if (!invoice.stripePaymentIntentId) {
+    return c.json({ error: "No Stripe payment found for this invoice" }, 404);
+  }
+
+  const stripe = getStripeClient();
+  if (!stripe) return c.json({ error: "Stripe not configured" }, 503);
+
+  try {
+    const paymentIntent = await stripe.paymentIntents.retrieve(invoice.stripePaymentIntentId);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cardDetails = (paymentIntent as any).payment_details?.card;
+    const refundStatus = invoice.stripeRefundId
+      ? await stripe.refunds.retrieve(invoice.stripeRefundId).then((r) => r.status).catch(() => null)
+      : null;
+
+    return c.json({
+      paymentIntentId: invoice.stripePaymentIntentId,
+      amountPaidCents: paymentIntent.amount_received,
+      status: paymentIntent.status,
+      cardLast4: cardDetails?.last4 ?? null,
+      cardBrand: cardDetails?.brand ?? null,
+      refundId: invoice.stripeRefundId,
+      refundStatus,
+    });
+  } catch {
+    return c.json({ error: "Failed to retrieve Stripe payment info" }, 500);
+  }
+});
+
+// ─── Payment Stats ─────────────────────────────────────────────────────────────
+
+invoicesRouter.get("/stats", async (c) => {
+  const db = getDb();
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  const thisMonthInvoices = await db
+    .select()
+    .from(invoices)
+    .where(
+      and(
+        gte(invoices.createdAt, startOfMonth),
+        eq(invoices.status, "paid")
+      )
+    );
+
+  const revenueCents = thisMonthInvoices.reduce((sum, inv) => sum + inv.totalCents, 0);
+
+  const pendingInvoices = await db
+    .select({ totalCents: invoices.totalCents })
+    .from(invoices)
+    .where(eq(invoices.status, "pending"));
+
+  const outstandingCents = pendingInvoices.reduce((sum, inv) => sum + inv.totalCents, 0);
+
+  const refundedInvoices = await db
+    .select()
+    .from(invoices)
+    .where(
+      and(
+        gte(invoices.createdAt, startOfMonth),
+        sql`${invoices.stripeRefundId} IS NOT NULL`
+      )
+    );
+
+  const refundsCents = refundedInvoices.reduce((sum, inv) => sum + inv.totalCents, 0);
+
+  const paymentMethodBreakdown = await db
+    .select({
+      paymentMethod: invoices.paymentMethod,
+      count: sql<number>`count(*)`,
+      totalCents: sql<number>`sum(${invoices.totalCents})`,
+    })
+    .from(invoices)
+    .where(
+      and(
+        gte(invoices.createdAt, startOfMonth),
+        sql`${invoices.paymentMethod} IS NOT NULL`
+      )
+    )
+    .groupBy(invoices.paymentMethod);
+
+  return c.json({
+    revenueCents,
+    outstandingCents,
+    refundsCents,
+    revenueCount: thisMonthInvoices.length,
+    refundCount: refundedInvoices.length,
+    paymentMethodBreakdown,
+  });
+});

apps/api/src/routes/reports.ts

@@ -286,6 +286,10 @@ reportsRouter.get("/clients", async (c) => {
   ninetyDaysAgo.setUTCDate(ninetyDaysAgo.getUTCDate() - 90);
   const ninetyDaysAgoISO = ninetyDaysAgo.toISOString();
 
+  const page = Math.max(1, parseInt(c.req.query("page") ?? "1", 10) || 1);
+  const limit = Math.min(100, Math.max(1, parseInt(c.req.query("limit") ?? "20", 10) || 20));
+  const offset = (page - 1) * limit;
+
   const churnRisk = await db
     .select({
       clientId: clients.id,
@@ -298,15 +302,34 @@ reportsRouter.get("/clients", async (c) => {
     .having(
       sql`MAX(${appointments.startTime}) < ${ninetyDaysAgoISO}::timestamptz OR MAX(${appointments.startTime}) IS NULL`
     )
-    .orderBy(sql`MAX(${appointments.startTime}) ASC NULLS FIRST`);
+    .orderBy(sql`MAX(${appointments.startTime}) ASC NULLS FIRST`)
+    .limit(limit)
+    .offset(offset);
+
+  const [churnCountRow] = await db
+    .select({ total: sql<number>`count(*)::int` })
+    .from(
+      db
+        .select({ id: clients.id })
+        .from(clients)
+        .leftJoin(appointments, eq(appointments.clientId, clients.id))
+        .groupBy(clients.id)
+        .having(
+          sql`MAX(${appointments.startTime}) < ${ninetyDaysAgoISO}::timestamptz OR MAX(${appointments.startTime}) IS NULL`
+        )
+        .as("churn_count")
+    );
+  const churnRiskTotal = churnCountRow?.total ?? 0;
 
   return c.json({
     from: from.toISOString(),
     to: to.toISOString(),
     newClients,
     activeInPeriodCount: activeInPeriod.length,
-    churnRisk: churnRisk.slice(0, 20), // top 20 at-risk clients
-    churnRiskTotal: churnRisk.length,
+    churnRisk,
+    churnRiskTotal,
+    page,
+    limit,
   });
 });
 

apps/web/Dockerfile

@@ -20,3 +20,5 @@ FROM nginx:alpine AS runner
 COPY apps/web/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=builder /app/apps/web/dist /usr/share/nginx/html
 EXPOSE 80
+HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
+  CMD curl -f http://localhost:80/ || exit 1

apps/web/src/pages/Invoices.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import type { Invoice, Client, Appointment, Service, Staff, InvoiceTipSplit } from "@groombook/types";
+import type { Invoice, Client, Appointment, Service, Staff, InvoiceTipSplit, StripePaymentInfo, PaymentStats } from "@groombook/types";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -173,6 +173,23 @@ 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 [stripeInfo, setStripeInfo] = useState<StripePaymentInfo | null>(null);
+  const [stripeLoading, setStripeLoading] = useState(false);
+  const [showRefundDialog, setShowRefundDialog] = useState(false);
+  const [refundType, setRefundType] = useState<"full" | "partial">("full");
+  const [refundAmountStr, setRefundAmountStr] = useState("");
+  const [refunding, setRefunding] = useState(false);
+
+  useEffect(() => {
+    if (invoice.status === "paid" && invoice.stripePaymentIntentId) {
+      setStripeLoading(true);
+      fetch(`/api/invoices/${invoice.id}/stripe-payment`)
+        .then((r) => r.json())
+        .then((data: StripePaymentInfo) => setStripeInfo(data))
+        .catch(() => { /* non-blocking */ })
+        .finally(() => setStripeLoading(false));
+    }
+  }, [invoice.id, invoice.status, invoice.stripePaymentIntentId]);
 
   // Tip split state: array of {staffId, staffName, pct}
   const linkedAppt = invoice.appointmentId
@@ -271,6 +288,31 @@ function InvoiceDetailModal({
     }
   }
 
+  async function submitRefund() {
+    setRefunding(true);
+    setError(null);
+    const amountCents = refundType === "partial"
+      ? Math.round(parseFloat(refundAmountStr) * 100)
+      : undefined;
+    try {
+      const res = await fetch(`/api/invoices/${invoice.id}/refund`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ 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 : "Refund failed");
+    } finally {
+      setRefunding(false);
+    }
+  }
+
   if (loading) return <Modal onClose={onClose}><p style={{ padding: "1rem" }}>Loading…</p></Modal>;
 
   const tipCentsCalc = Math.round(parseFloat(tipStr) * 100) || 0;
@@ -330,6 +372,18 @@ function InvoiceDetailModal({
         />
         {invoice.paidAt && <SummaryRow label="Paid on" value={fmtDate(invoice.paidAt)} />}
         {invoice.paymentMethod && <SummaryRow label="Payment" value={invoice.paymentMethod} />}
+        {stripeLoading && <SummaryRow label="Stripe" value="Loading…" />}
+        {stripeInfo && (
+          <>
+            {stripeInfo.cardLast4 && (
+              <SummaryRow label="Card" value={`${stripeInfo.cardBrand ?? "Card"} •••• ${stripeInfo.cardLast4}`} />
+            )}
+            <SummaryRow label="Stripe status" value={stripeInfo.status} />
+            {invoice.stripeRefundId && stripeInfo.refundStatus && (
+              <SummaryRow label="Refund status" value={stripeInfo.refundStatus === "succeeded" ? "Refunded" : stripeInfo.refundStatus} />
+            )}
+          </>
+        )}
       </div>
 
       {/* ── Tip Distribution ── */}
@@ -447,10 +501,101 @@ function InvoiceDetailModal({
         </div>
       )}
       {(invoice.status === "paid" || invoice.status === "void") && (
-        <div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end" }}>
+        <div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
+          {invoice.status === "paid" && invoice.stripePaymentIntentId && !invoice.stripeRefundId && (
+            <button
+              onClick={() => {
+                setRefundType("full");
+                setRefundAmountStr("");
+                setShowRefundDialog(true);
+              }}
+              style={{ ...btnStyle, color: "#dc2626", borderColor: "#dc2626" }}
+            >
+              Refund
+            </button>
+          )}
           <button onClick={onClose} style={btnStyle}>Close</button>
         </div>
       )}
+
+      {showRefundDialog && (
+        <div style={{
+          position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)",
+          display: "flex", alignItems: "center", justifyContent: "center", zIndex: 110,
+        }}
+          onClick={(e) => { if (e.target === e.currentTarget) setShowRefundDialog(false); }}
+        >
+          <div style={{
+            background: "#fff", borderRadius: 8, padding: "1.5rem",
+            maxWidth: 400, width: "calc(100% - 2rem)",
+            boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
+          }}>
+            <h3 style={{ margin: "0 0 1rem" }}>Process Refund</h3>
+            <p style={{ fontSize: 14, color: "#6b7280", marginBottom: "1rem" }}>
+              Invoice total: {fmtMoney(invoice.totalCents)}
+            </p>
+            <div style={{ marginBottom: "1rem" }}>
+              <label style={{ display: "block", fontWeight: 600, marginBottom: "0.25rem", fontSize: 13 }}>
+                Refund type
+              </label>
+              <div style={{ display: "flex", gap: "0.5rem" }}>
+                <button
+                  onClick={() => setRefundType("full")}
+                  style={{
+                    ...btnStyle,
+                    backgroundColor: refundType === "full" ? "var(--color-primary)" : "#fff",
+                    color: refundType === "full" ? "#fff" : "#374151",
+                    borderColor: refundType === "full" ? "var(--color-primary)" : "#d1d5db",
+                  }}
+                >
+                  Full refund
+                </button>
+                <button
+                  onClick={() => { setRefundType("partial"); setRefundAmountStr((invoice.totalCents / 100).toFixed(2)); }}
+                  style={{
+                    ...btnStyle,
+                    backgroundColor: refundType === "partial" ? "var(--color-primary)" : "#fff",
+                    color: refundType === "partial" ? "#fff" : "#374151",
+                    borderColor: refundType === "partial" ? "var(--color-primary)" : "#d1d5db",
+                  }}
+                >
+                  Partial refund
+                </button>
+              </div>
+            </div>
+            {refundType === "partial" && (
+              <div style={{ marginBottom: "1rem" }}>
+                <label style={{ display: "block", fontWeight: 600, marginBottom: "0.25rem", fontSize: 13 }}>
+                  Refund amount
+                </label>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                  <span style={{ color: "#6b7280" }}>$</span>
+                  <input
+                    type="number"
+                    min="0.01"
+                    max={(invoice.totalCents / 100).toFixed(2)}
+                    step="0.01"
+                    value={refundAmountStr}
+                    onChange={(e) => setRefundAmountStr(e.target.value)}
+                    style={{ ...inputStyle, width: 100 }}
+                  />
+                </div>
+              </div>
+            )}
+            {error && <p style={{ color: "red", margin: "0.5rem 0" }}>{error}</p>}
+            <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
+              <button onClick={() => setShowRefundDialog(false)} style={btnStyle}>Cancel</button>
+              <button
+                onClick={submitRefund}
+                disabled={refunding || (refundType === "partial" && (!refundAmountStr || parseFloat(refundAmountStr) <= 0))}
+                style={{ ...btnStyle, backgroundColor: "#dc2626", color: "#fff", borderColor: "#dc2626" }}
+              >
+                {refunding ? "Refunding…" : "Refund"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </Modal>
   );
 }
@@ -492,6 +637,8 @@ export function InvoicesPage() {
   const [createLoading, setCreateLoading] = useState(false);
   const [detailData, setDetailData] = useState<{ staff: Staff[]; appointments: Appointment[] } | null>(null);
   const [detailLoading, setDetailLoading] = useState(false);
+  const [stats, setStats] = useState<PaymentStats | null>(null);
+  const [statsLoading, setStatsLoading] = useState(true);
 
   const LIMIT = 50;
 
@@ -513,6 +660,15 @@ export function InvoicesPage() {
       .finally(() => setLoading(false));
   }, [statusFilter]);
 
+  useEffect(() => {
+    setStatsLoading(true);
+    fetch("/api/invoices/stats")
+      .then((r) => r.json())
+      .then((data: PaymentStats) => setStats(data))
+      .catch(() => { /* non-blocking */ })
+      .finally(() => setStatsLoading(false));
+  }, []);
+
   function loadCreateData() {
     if (createData) return Promise.resolve();
     setCreateLoading(true);
@@ -573,6 +729,36 @@ export function InvoicesPage() {
         </button>
       </div>
 
+      {!statsLoading && stats && (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "0.75rem", marginBottom: "1rem" }}>
+          <div style={{ background: "#fff", borderRadius: 8, border: "1px solid #e5e7eb", padding: "0.875rem 1rem" }}>
+            <div style={{ fontSize: 12, color: "#6b7280", fontWeight: 500, marginBottom: "0.25rem" }}>Revenue this month</div>
+            <div style={{ fontSize: 20, fontWeight: 700, color: "#065f46" }}>{fmtMoney(stats.revenueCents)}</div>
+            <div style={{ fontSize: 12, color: "#9ca3af" }}>{stats.revenueCount} paid</div>
+          </div>
+          <div style={{ background: "#fff", borderRadius: 8, border: "1px solid #e5e7eb", padding: "0.875rem 1rem" }}>
+            <div style={{ fontSize: 12, color: "#6b7280", fontWeight: 500, marginBottom: "0.25rem" }}>Outstanding</div>
+            <div style={{ fontSize: 20, fontWeight: 700, color: "#92400e" }}>{fmtMoney(stats.outstandingCents)}</div>
+          </div>
+          <div style={{ background: "#fff", borderRadius: 8, border: "1px solid #e5e7eb", padding: "0.875rem 1rem" }}>
+            <div style={{ fontSize: 12, color: "#6b7280", fontWeight: 500, marginBottom: "0.25rem" }}>Refunds this month</div>
+            <div style={{ fontSize: 20, fontWeight: 700, color: "#991b1b" }}>{fmtMoney(stats.refundsCents)}</div>
+            <div style={{ fontSize: 12, color: "#9ca3af" }}>{stats.refundCount} refunds</div>
+          </div>
+          {stats.paymentMethodBreakdown.length > 0 && (
+            <div style={{ background: "#fff", borderRadius: 8, border: "1px solid #e5e7eb", padding: "0.875rem 1rem" }}>
+              <div style={{ fontSize: 12, color: "#6b7280", fontWeight: 500, marginBottom: "0.25rem" }}>By payment method</div>
+              {stats.paymentMethodBreakdown.map((b) => (
+                <div key={b.paymentMethod} style={{ fontSize: 13, display: "flex", justifyContent: "space-between", marginTop: "0.2rem" }}>
+                  <span style={{ textTransform: "capitalize" }}>{b.paymentMethod}</span>
+                  <span style={{ fontWeight: 600 }}>{fmtMoney(b.totalCents)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
       {invoiceList.length === 0 ? (
         <p style={{ color: "#6b7280" }}>
           No invoices yet. Create one from a completed appointment.

packages/db/src/seed.ts

@@ -567,7 +567,7 @@ async function seed() {
 
   // ── Staff ──
   const managerStaff = Array.from({ length: cfg.staffCount.manager }, (_, i) =>
-    ({ id: uuid(), name: `Manager ${i + 1}`, email: `manager${i + 1}@groombook.dev`, role: "manager" as const, isSuperUser: false })
+    ({ id: uuid(), name: `Manager ${i + 1}`, email: `manager${i + 1}@groombook.dev`, role: "manager" as const, isSuperUser: profile === "uat" && i === 0 })
   );
   const receptionistStaff = Array.from({ length: cfg.staffCount.receptionist }, (_, i) =>
     ({ id: uuid(), name: `Receptionist ${i + 1}`, email: `receptionist${i + 1}@groombook.dev`, role: "receptionist" as const, isSuperUser: false })

packages/types/src/index.ts

@@ -153,10 +153,38 @@ export interface Invoice {
   notes: string | null;
   createdAt: string;
   updatedAt: string;
+  stripePaymentIntentId?: string | null;
+  stripeRefundId?: string | null;
+  paymentFailureReason?: string | null;
   lineItems?: InvoiceLineItem[];
   tipSplits?: InvoiceTipSplit[];
 }
 
+export interface StripePaymentInfo {
+  paymentIntentId: string;
+  amountPaidCents: number;
+  status: string;
+  cardLast4: string | null;
+  cardBrand: string | null;
+  refundId: string | null;
+  refundStatus: string | null;
+}
+
+export interface PaymentMethodBreakdown {
+  paymentMethod: PaymentMethod;
+  count: number;
+  totalCents: number;
+}
+
+export interface PaymentStats {
+  revenueCents: number;
+  outstandingCents: number;
+  refundsCents: number;
+  revenueCount: number;
+  refundCount: number;
+  paymentMethodBreakdown: PaymentMethodBreakdown[];
+}
+
 // ─── Impersonation ──────────────────────────────────────────────────────────
 
 export type ImpersonationSessionStatus = "active" | "ended" | "expired";