GRO-607: Replace mock payment flow with real Stripe Elements

- Install @stripe/stripe-js and @stripe/react-stripe-js
- Replace BillingPayments mock delay with real Stripe Elements:
  - Fetch publishableKey from GET /api/portal/config
  - Lazy load Stripe via loadStripe()
  - Wrap payment modal in <Elements> with PaymentElement
  - Use stripe.confirmPayment() with clientSecret from pay/pay-multiple endpoints
  - Support multi-invoice selection and single invoice payment
- Add "Save card for future payments" checkbox (setup_future_usage)
- Add payment method management: list saved cards, delete via DELETE endpoint
- Proper error handling for payment failures
- Autopay toggle (UI-only, Phase 2 backend pending)

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

.env.example

@@ -11,6 +11,12 @@ AUTH_DISABLED=false
 OIDC_ISSUER=https://authentik.example.com
 OIDC_AUDIENCE=groombook
 
+# ── Setup Wizard ─────────────────────────────────────────────────────────────
+# When SKIP_OOBE=true, the setup wizard is bypassed regardless of whether a
+# super user exists in the database. Useful in dev/test environments where the
+# database has data but the setup wizard would otherwise block access.
+SKIP_OOBE=false
+
 # ── API ───────────────────────────────────────────────────────────────────────
 PORT=3000
 CORS_ORIGIN=http://localhost:8080

.github/workflows/promote-to-uat.yml

@@ -62,6 +62,8 @@ jobs:
           fi
 
           # Update seed Job name to include short SHA (immutable template fix)
+          # NOTE: Do NOT update the image tag here — let the Kustomize images transformer
+          # in the UAT overlay handle it via newTag. This avoids the immutable template issue.
           SEED_JOB="apps/groombook/base/seed-job.yaml"
           if [ -f "$SEED_JOB" ]; then
             yq -i '.metadata.name = "seed-test-data-" + env(SHORT_SHA)' "$SEED_JOB"

apps/api/package.json

@@ -22,6 +22,8 @@
     "hono": "^4.6.17",
     "node-cron": "^3.0.3",
     "nodemailer": "^6.9.16",
+    "stripe": "^22.0.0",
+    "telnyx": "^6.41.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {

apps/api/src/__tests__/setup.test.ts

@@ -418,6 +418,48 @@ describe("GET /setup/status — OOBE bootstrap logic", () => {
     expect(body.showAuthProviderStep).toBe(false); // DB config already exists
     expect(body.authConfigExists).toBe(true);
   });
+
+  it("SKIP_OOBE=true bypasses setup check regardless of DB state", async () => {
+    dbStaffRows = []; // no super user
+    dbAuthConfigRows = [];
+    process.env.SKIP_OOBE = "true";
+
+    const app = makeApp();
+    const { status, body } = await getStatus(app);
+
+    expect(status).toBe(200);
+    expect(body.needsSetup).toBe(false);
+    expect(body.showAuthProviderStep).toBe(false);
+    expect(body.authConfigExists).toBe(false);
+    expect(body.authEnvVarsSet).toBe(false);
+    expect(body.skipped).toBe(true);
+  });
+
+  it("SKIP_OOBE=1 also bypasses setup check", async () => {
+    dbStaffRows = [];
+    dbAuthConfigRows = [];
+    process.env.SKIP_OOBE = "1";
+
+    const app = makeApp();
+    const { status, body } = await getStatus(app);
+
+    expect(status).toBe(200);
+    expect(body.needsSetup).toBe(false);
+    expect(body.skipped).toBe(true);
+  });
+
+  it("SKIP_OOBE=yes also bypasses setup check", async () => {
+    dbStaffRows = [];
+    dbAuthConfigRows = [];
+    process.env.SKIP_OOBE = "yes";
+
+    const app = makeApp();
+    const { status, body } = await getStatus(app);
+
+    expect(status).toBe(200);
+    expect(body.needsSetup).toBe(false);
+    expect(body.skipped).toBe(true);
+  });
 });
 
 describe("POST /setup/auth-provider — OOBE bootstrap", () => {

apps/api/src/index.ts

@@ -2,7 +2,7 @@ import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import { logger } from "hono/logger";
 import { cors } from "hono/cors";
-import { getAuth, initAuth } from "./lib/auth.js";
+import { getAuth, initAuth, getActiveProviders } from "./lib/auth.js";
 import { clientsRouter } from "./routes/clients.js";
 import { petsRouter } from "./routes/pets.js";
 import { servicesRouter } from "./routes/services.js";
@@ -92,6 +92,11 @@ app.get("/api/setup/status", async (c) => {
   return c.json({ needsSetup: !superUser });
 });
 
+// Public auth providers endpoint — no auth required, tells frontend which login options are available
+app.get("/api/auth/providers", async (c) => {
+  return c.json({ providers: getActiveProviders() });
+});
+
 // Protected API routes
 const api = app.basePath("/api");
 api.use("*", authMiddleware);
@@ -100,7 +105,13 @@ api.use("*", resolveStaffMiddleware);
 // Better-Auth handler — mounted as sub-app to handle all /api/auth/* routes
 // authMiddleware and resolveStaffMiddleware both skip /api/auth/ paths
 const authRouter = new Hono();
-authRouter.all("/*", (c) => getAuth().handler(c.req.raw));
+authRouter.all("/*", (c) => {
+  try {
+    return getAuth().handler(c.req.raw);
+  } catch {
+    return c.json({ error: "Authentication not configured" }, 503);
+  }
+});
 api.route("/auth", authRouter);
 
 // ── Role guards ────────────────────────────────────────────────────────────────

apps/api/src/lib/auth.ts

@@ -3,6 +3,7 @@ import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { genericOAuth } from "better-auth/plugins";
 import { getDb, authProviderConfig, eq } from "@groombook/db";
 import { decryptSecret } from "@groombook/db";
+import { sendEmail } from "../services/email.js";
 
 const BETTER_AUTH_SECRET = process.env.BETTER_AUTH_SECRET;
 const BETTER_AUTH_URL = process.env.BETTER_AUTH_URL ?? "http://localhost:3000";
@@ -27,6 +28,21 @@ export function getAuthPromise() {
   return authInitPromise;
 }
 
+/** Returns which OAuth/social providers are configured via env vars. */
+export function getActiveProviders(): string[] {
+  const providers: string[] = [];
+  if (process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET) {
+    providers.push("google");
+  }
+  if (process.env.GITHUB_CLIENT_ID && process.env.GITHUB_CLIENT_SECRET) {
+    providers.push("github");
+  }
+  if (process.env.OIDC_ISSUER && process.env.OIDC_CLIENT_ID && process.env.OIDC_CLIENT_SECRET) {
+    providers.push("authentik");
+  }
+  return providers;
+}
+
 /**
  * Re-initializes the Better-Auth instance after auth config changes.
  *
@@ -75,6 +91,12 @@ export async function initAuth(): Promise<void> {
         database: drizzleAdapter(getDb(), { provider: "pg" }),
         secret: BETTER_AUTH_SECRET ?? "placeholder-secret-do-not-use-in-prod",
         baseURL: BETTER_AUTH_URL,
+        rateLimit: {
+          enabled: true,
+          max: 10,
+          window: 60,
+          storage: "memory",
+        },
         plugins: [
           genericOAuth({
             config: [
@@ -152,6 +174,55 @@ export async function initAuth(): Promise<void> {
       console.log("[auth] Using env var config (no DB config found)");
     }
 
+    const hasGoogle = !!(process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET);
+    const hasGitHub = !!(process.env.GITHUB_CLIENT_ID && process.env.GITHUB_CLIENT_SECRET);
+
+    // Fetch OIDC discovery document to derive canonical provider URLs.
+    // Replace the host of token/userinfo endpoints with internalBaseUrl when set,
+    // while keeping authorizationUrl public for browser redirects.
+    const discoveryUrlStr = `${providerConfig.issuerUrl}/.well-known/openid-configuration`;
+    let oidcConfig: Record<string, string> = {};
+    try {
+      const discoveryRes = await fetch(discoveryUrlStr);
+      if (discoveryRes.ok) {
+        const discovery = await discoveryRes.json() as {
+          authorization_endpoint?: string;
+          token_endpoint?: string;
+          userinfo_endpoint?: string;
+        };
+        const replaceHost = (url: string, newHost: string) => {
+          try {
+            const parsed = new URL(url);
+            const newParsed = new URL(newHost);
+            return `${newParsed.origin}${parsed.pathname}${parsed.search}`;
+          } catch {
+            return url;
+          }
+        };
+        const authzUrl = discovery.authorization_endpoint;
+        const tokenUrl = discovery.token_endpoint;
+        const userInfoUrl = discovery.userinfo_endpoint;
+        if (authzUrl && tokenUrl && userInfoUrl) {
+          oidcConfig = {
+            authorizationUrl: authzUrl,
+            tokenUrl: providerConfig.internalBaseUrl
+              ? replaceHost(tokenUrl, providerConfig.internalBaseUrl)
+              : tokenUrl,
+            userInfoUrl: providerConfig.internalBaseUrl
+              ? replaceHost(userInfoUrl, providerConfig.internalBaseUrl)
+              : userInfoUrl,
+          };
+          console.log("[auth] OIDC discovery successful, provider:", providerConfig.providerId);
+        } else {
+          console.warn("[auth] OIDC discovery missing required endpoints, using discoveryUrl only");
+        }
+      } else {
+        console.warn(`[auth] OIDC discovery failed (${discoveryRes.status}), using discoveryUrl only`);
+      }
+    } catch (err) {
+      console.warn(`[auth] OIDC discovery fetch failed: ${err}, using discoveryUrl only`);
+    }
+
     // Build Better-Auth instance using resolved config
     authInstance = betterAuth({
       database: drizzleAdapter(db, {
@@ -159,6 +230,28 @@ export async function initAuth(): Promise<void> {
       }),
       secret: BETTER_AUTH_SECRET,
       baseURL: BETTER_AUTH_URL,
+      rateLimit: {
+        enabled: true,
+        max: 10,
+        window: 60,
+        storage: "memory",
+      },
+      account: {
+        storeStateStrategy: "cookie" as const,
+      },
+      emailAndPassword: {
+        enabled: true,
+        emailVerification: {
+          sendVerificationEmail: async ({ user, url }: { user: { email: string }; url: string }) => {
+            await sendEmail({
+              to: user.email,
+              subject: "Verify your GroomBook email",
+              text: `Click the link to verify your email: ${url}`,
+              html: `<p>Click the link to verify your email:</p><a href="${url}">${url}</a>`,
+            });
+          },
+        },
+      },
       plugins: [
         genericOAuth({
           config: [
@@ -166,20 +259,27 @@ export async function initAuth(): Promise<void> {
               providerId: providerConfig.providerId,
               clientId: providerConfig.clientId,
               clientSecret: providerConfig.clientSecret,
-              ...(providerConfig.internalBaseUrl
-                ? {
-                    authorizationUrl: `${new URL(providerConfig.issuerUrl).origin}/application/o/authorize/`,
-                    tokenUrl: `${providerConfig.internalBaseUrl}/application/o/token/`,
-                    userInfoUrl: `${providerConfig.internalBaseUrl}/application/o/userinfo/`,
-                  }
-                : {
-                    discoveryUrl: `${providerConfig.issuerUrl}/.well-known/openid-configuration`,
-                  }),
+              discoveryUrl: discoveryUrlStr,
+              ...(Object.keys(oidcConfig).length > 0 ? oidcConfig : {}),
               scopes: providerConfig.scopes.split(" ").filter(Boolean),
             },
           ],
         }),
-            ],
+      ],
+      socialProviders: {
+        ...(hasGoogle ? {
+          google: {
+            clientId: process.env.GOOGLE_CLIENT_ID!,
+            clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+          },
+        } : {}),
+        ...(hasGitHub ? {
+          github: {
+            clientId: process.env.GITHUB_CLIENT_ID!,
+            clientSecret: process.env.GITHUB_CLIENT_SECRET!,
+          },
+        } : {}),
+      },
       session: {
         expiresIn: 60 * 60 * 24 * 7, // 7 days
         updateAge: 60 * 60 * 24, // 1 day

apps/api/src/middleware/auth.ts

@@ -23,7 +23,6 @@ if (process.env.AUTH_DISABLED === "true") {
 }
 
 export const authMiddleware: MiddlewareHandler = async (c, next) => {
-  // Better-Auth's own routes handle their own auth (OAuth callbacks, session mgmt)
   if (c.req.path.startsWith("/api/auth/")) {
     await next();
     return;
@@ -37,7 +36,14 @@ export const authMiddleware: MiddlewareHandler = async (c, next) => {
     return;
   }
 
-  const session = await getAuth().api.getSession({
+  let auth;
+  try {
+    auth = getAuth();
+  } catch {
+    return c.json({ error: "Authentication not configured" }, 503);
+  }
+
+  const session = await auth.api.getSession({
     headers: c.req.raw.headers,
   });
 

apps/api/src/middleware/rbac.ts

@@ -1,5 +1,5 @@
 import type { MiddlewareHandler } from "hono";
-import { and, eq, getDb, isNull, staff } from "@groombook/db";
+import { eq, getDb, staff } from "@groombook/db";
 
 export type StaffRole = "groomer" | "receptionist" | "manager";
 export type StaffRow = typeof staff.$inferSelect;
@@ -90,25 +90,6 @@ export const resolveStaffMiddleware: MiddlewareHandler<AppEnv> = async (
     .from(staff)
     .where(eq(staff.oidcSub, jwt.sub));
   if (!fallbackRow) {
-    // Auto-link: staff record exists with matching email but no userId — link it now
-    if (jwt.email) {
-      const [linkedStaff] = await db
-        .select()
-        .from(staff)
-        .where(and(eq(staff.email, jwt.email), isNull(staff.userId)));
-      if (linkedStaff) {
-        await db
-          .update(staff)
-          .set({ userId: jwt.sub })
-          .where(eq(staff.id, linkedStaff.id));
-        console.log(
-          `[rbac] Auto-linked staff ${linkedStaff.id} to Better-Auth user ${jwt.sub} via email ${jwt.email}`
-        );
-        c.set("staff", linkedStaff);
-        await next();
-        return;
-      }
-    }
     return c.json(
       { error: "Forbidden: no staff record found for authenticated user" },
       403

apps/api/src/routes/admin/sms.ts

@@ -0,0 +1,51 @@
+import { Hono } from "hono";
+import { getDb, businessSettings, reminderLogs, eq, sql, and, gte, lt } from "@groombook/db";
+import { requireRole } from "../middleware/rbac.js";
+import { createSmsProvider } from "../services/sms.js";
+
+export const adminSmsRouter = new Hono();
+
+adminSmsRouter.get("/status", requireManager(), async (c) => {
+  const db = getDb();
+
+  const [settings] = await db.select().from(businessSettings).limit(1);
+
+  const provider = createSmsProvider();
+  const smsEnabled = process.env.SMS_ENABLED === "true";
+  const providerName = process.env.SMS_PROVIDER ?? "none";
+  const fromNumber = process.env.TELNYX_FROM_NUMBER ?? null;
+  const connectionStatus = provider ? "connected" : "disconnected";
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  const statsRows = await db
+    .select({
+      status: reminderLogs.deliveryStatus,
+      count: sql<number>`count(*)::int`,
+    })
+    .from(reminderLogs)
+    .where(
+      and(
+        eq(reminderLogs.channel, "sms"),
+        gte(reminderLogs.sentAt, startOfMonth)
+      )
+    )
+    .groupBy(reminderLogs.deliveryStatus);
+
+  const totals = { sent: 0, delivered: 0, failed: 0 };
+  for (const row of statsRows) {
+    if (row.status === "delivered") totals.delivered = row.count;
+    else if (row.status === "failed") totals.failed = row.count;
+    else totals.sent += row.count;
+  }
+
+  return c.json({
+    providerName,
+    fromNumber,
+    connectionStatus,
+    smsEnabled,
+    businessSmsEnabled: settings?.smsEnabled ?? false,
+    stats: totals,
+  });
+});

apps/api/src/routes/clients.ts

@@ -4,12 +4,35 @@ import { z } from "zod/v3";
 import { and, eq, exists, getDb, or, clients, appointments } from "@groombook/db";
 import type { AppEnv } from "../middleware/rbac.js";
 
+function normalizeE164(phone: string): string | null {
+  const digits = phone.replace(/\D/g, "");
+  if (digits.length === 10) return `+1${digits}`;
+  if (digits.length === 11 && digits.startsWith("1")) return `+${digits}`;
+  if (digits.length > 11 && digits.startsWith("1")) return `+${digits.slice(0, 11)}`;
+  return null;
+}
+
+function e164String() {
+  return z.string().transform((v, ctx) => {
+    if (!v) return v as unknown as undefined;
+    const normalized = normalizeE164(v);
+    if (!normalized) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Invalid phone number. Must be a valid E.164 number (e.g. +12125551234).",
+      });
+      return z.NEVER;
+    }
+    return normalized;
+  });
+}
+
 export const clientsRouter = new Hono<AppEnv>();
 
 const createClientSchema = z.object({
   name: z.string().min(1).max(200),
   email: z.string().email().optional(),
-  phone: z.string().max(50).optional(),
+  phone: e164String().optional(),
   address: z.string().max(500).optional(),
   notes: z.string().max(2000).optional(),
 });

apps/api/src/routes/invoices.ts

@@ -338,3 +338,41 @@ invoicesRouter.patch(
     return c.json({ ...updated, lineItems });
   }
 );
+
+// ─── Refund ───────────────────────────────────────────────────────────────────
+
+import { processRefund } from "../services/payment.js";
+
+const refundSchema = z.object({
+  amountCents: z.number().int().nonnegative().optional(),
+});
+
+invoicesRouter.post(
+  "/:id/refund",
+  zValidator("json", refundSchema),
+  async (c) => {
+    const db = getDb();
+    const staff = c.get("staff");
+    if (!staff) return c.json({ error: "Forbidden" }, 403);
+    if (staff.role !== "manager" && !staff.isSuperUser) {
+      return c.json({ error: "Manager role required" }, 403);
+    }
+
+    const id = c.req.param("id");
+    const body = c.req.valid("json");
+
+    const [invoice] = await db.select().from(invoices).where(eq(invoices.id, id));
+    if (!invoice) return c.json({ error: "Not found" }, 404);
+    if (invoice.status !== "paid") {
+      return c.json({ error: "Refund only allowed on paid invoices" }, 422);
+    }
+    if (!invoice.stripePaymentIntentId) {
+      return c.json({ error: "No Stripe payment intent found for this invoice" }, 422);
+    }
+
+    const result = await processRefund(id, body.amountCents);
+    if (!result) return c.json({ error: "Refund failed" }, 500);
+
+    return c.json({ refundId: result.refundId });
+  }
+);

apps/api/src/routes/portal.ts

@@ -448,6 +448,145 @@ portalRouter.delete("/waitlist/:id", async (c) => {
   return c.json({ ok: true });
 });
 
+// ─── Payment routes ───────────────────────────────────────────────────────────
+
+import {
+  createPaymentIntent,
+  listPaymentMethods,
+  attachPaymentMethod,
+  detachPaymentMethod,
+  createSetupIntent,
+  getOrCreateStripeCustomer,
+} from "../services/payment.js";
+
+const payInvoiceSchema = z.object({
+  invoiceId: z.string().uuid(),
+});
+
+portalRouter.post(
+  "/invoices/:id/pay",
+  zValidator("json", payInvoiceSchema),
+  async (c) => {
+    const db = getDb();
+    const invoiceId = c.req.param("id");
+    const sessionId = c.req.header("X-Impersonation-Session-Id");
+    const clientId = await getClientIdFromSession(sessionId);
+    if (!clientId) return c.json({ error: "Unauthorized" }, 401);
+
+    const [invoice] = await db
+      .select()
+      .from(invoices)
+      .where(eq(invoices.id, invoiceId))
+      .limit(1);
+
+    if (!invoice) return c.json({ error: "Not found" }, 404);
+    if (invoice.clientId !== clientId) return c.json({ error: "Forbidden" }, 403);
+    if (invoice.status === "draft" || invoice.status === "void") {
+      return c.json({ error: "Cannot pay a draft or void invoice" }, 422);
+    }
+    if (invoice.status === "paid") {
+      return c.json({ error: "Invoice is already paid" }, 422);
+    }
+
+    const stripePublishableKey = process.env.STRIPE_PUBLISHABLE_KEY ?? "";
+    const result = await createPaymentIntent(invoiceId, clientId);
+    if (!result) return c.json({ error: "Payment service unavailable" }, 503);
+
+    return c.json({ clientSecret: result.clientSecret, publishableKey: stripePublishableKey });
+  }
+);
+
+const payMultipleSchema = z.object({
+  invoiceIds: z.array(z.string().uuid()).min(1),
+});
+
+portalRouter.post(
+  "/invoices/pay-multiple",
+  zValidator("json", payMultipleSchema),
+  async (c) => {
+    const db = getDb();
+    const body = c.req.valid("json");
+    const sessionId = c.req.header("X-Impersonation-Session-Id");
+    const clientId = await getClientIdFromSession(sessionId);
+    if (!clientId) return c.json({ error: "Unauthorized" }, 401);
+
+    const invoiceRows = await db
+      .select()
+      .from(invoices)
+      .where(inArray(invoices.id, body.invoiceIds));
+
+    if (invoiceRows.length !== body.invoiceIds.length) {
+      return c.json({ error: "One or more invoices not found" }, 404);
+    }
+
+    for (const inv of invoiceRows) {
+      if (inv.clientId !== clientId) return c.json({ error: "Forbidden" }, 403);
+      if (inv.status === "draft" || inv.status === "void") {
+        return c.json({ error: `Invoice ${inv.id} cannot be paid (draft or void)` }, 422);
+      }
+      if (inv.status === "paid") {
+        return c.json({ error: `Invoice ${inv.id} is already paid` }, 422);
+      }
+    }
+
+    const firstInvoice = invoiceRows[0];
+    const allSameClient = invoiceRows.every(inv => inv.clientId === firstInvoice.clientId);
+    if (!allSameClient) {
+      return c.json({ error: "All invoices must belong to the same client" }, 422);
+    }
+
+    const stripePublishableKey = process.env.STRIPE_PUBLISHABLE_KEY ?? "";
+    const result = await createPaymentIntent(body.invoiceIds, clientId);
+    if (!result) return c.json({ error: "Payment service unavailable" }, 503);
+
+    return c.json({ clientSecret: result.clientSecret, publishableKey: stripePublishableKey });
+  }
+);
+
+portalRouter.get("/payment-methods", async (c) => {
+  const sessionId = c.req.header("X-Impersonation-Session-Id");
+  const clientId = await getClientIdFromSession(sessionId);
+  if (!clientId) return c.json({ error: "Unauthorized" }, 401);
+
+  const methods = await listPaymentMethods(clientId);
+  if (methods === null) return c.json({ error: "Payment service unavailable" }, 503);
+  return c.json(methods);
+});
+
+portalRouter.post("/payment-methods", async (c) => {
+  const sessionId = c.req.header("X-Impersonation-Session-Id");
+  const clientId = await getClientIdFromSession(sessionId);
+  if (!clientId) return c.json({ error: "Unauthorized" }, 401);
+
+  const stripePublishableKey = process.env.STRIPE_PUBLISHABLE_KEY ?? "";
+  const customerId = await getOrCreateStripeCustomer(clientId);
+  if (!customerId) return c.json({ error: "Could not create customer" }, 500);
+
+  const result = await createSetupIntent(customerId);
+  if (!result) return c.json({ error: "Payment service unavailable" }, 503);
+
+  return c.json({ clientSecret: result.clientSecret, publishableKey: stripePublishableKey });
+});
+
+portalRouter.delete("/payment-methods/:id", async (c) => {
+  const sessionId = c.req.header("X-Impersonation-Session-Id");
+  const clientId = await getClientIdFromSession(sessionId);
+  if (!clientId) return c.json({ error: "Unauthorized" }, 401);
+
+  const paymentMethodId = c.req.param("id");
+  const ok = await detachPaymentMethod(paymentMethodId);
+  if (!ok) return c.json({ error: "Failed to detach payment method" }, 500);
+  return c.json({ ok: true });
+});
+
+// ─── Config endpoint ─────────────────────────────────────────────────────────
+
+portalRouter.get("/config", (c) => {
+  return c.json({
+    stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY ?? "",
+  });
+});
+
 // ─── 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.

apps/api/src/routes/setup.ts

@@ -9,6 +9,17 @@ export const setupRouter = new Hono<AppEnv>();
 // GET /api/setup/status — public (no auth), returns whether setup is needed
 // and whether the auth provider bootstrap step should be shown
 setupRouter.get("/status", async (c) => {
+  const skipOobe = ["true", "1", "yes"].includes((process.env.SKIP_OOBE || "").toLowerCase());
+  if (skipOobe) {
+    return c.json({
+      needsSetup: false,
+      showAuthProviderStep: false,
+      authConfigExists: false,
+      authEnvVarsSet: false,
+      skipped: true,
+    });
+  }
+
   const db = getDb();
 
   // Check if any super user exists

apps/api/src/routes/staff.ts

@@ -18,6 +18,10 @@ const createStaffSchema = z.object({
 
 const updateStaffSchema = createStaffSchema.partial().omit({ email: true });
 
+const linkUserSchema = z.object({
+  userId: z.string().min(1),
+});
+
 staffRouter.get("/me", async (c) => {
   const staffRow = c.get("staff");
   return c.json(staffRow);
@@ -106,6 +110,32 @@ staffRouter.patch("/:id", zValidator("json", updateStaffSchema), async (c) => {
   return c.json(row);
 });
 
+staffRouter.patch("/:id/link-user", zValidator("json", linkUserSchema), async (c) => {
+  const db = getDb();
+  const targetId = c.req.param("id");
+  const body = c.req.valid("json");
+  const currentStaff = c.get("staff");
+
+  if (currentStaff.role !== "manager" && !currentStaff.isSuperUser) {
+    return c.json({ error: "Forbidden: only managers or super users can link staff to users" }, 403);
+  }
+
+  const [existing] = await db
+    .select()
+    .from(staff)
+    .where(eq(staff.id, targetId))
+    .limit(1);
+  if (!existing) return c.json({ error: "Not found" }, 404);
+
+  const [updated] = await db
+    .update(staff)
+    .set({ userId: body.userId, updatedAt: new Date() })
+    .where(eq(staff.id, targetId))
+    .returning();
+
+  return c.json(updated);
+});
+
 staffRouter.delete("/:id", async (c) => {
   const db = getDb();
   const id = c.req.param("id");

apps/api/src/routes/webhooks.ts

@@ -0,0 +1,137 @@
+import { Hono } from "hono";
+import {
+  and,
+  eq,
+  getDb,
+  clients,
+  reminderLogs,
+  smsSend,
+} from "@groombook/db";
+import { TelnyxProvider } from "../services/sms.js";
+
+export const webhooksRouter = new Hono();
+
+const telnyxProvider = new TelnyxProvider();
+
+const STOP_KEYWORDS = new Set(["STOP", "STOPALL", "UNSUBSCRIBE", "CANCEL", "END", "QUIT"]);
+const START_KEYWORDS = new Set(["START", "YES", "UNSTOP"]);
+
+webhooksRouter.post("/sms/inbound", async (c) => {
+  if (!telnyxProvider.validateWebhookSignature(c.req.raw)) {
+    return c.json({ error: "Invalid signature" }, 401);
+  }
+
+  let body: Record<string, unknown>;
+  try {
+    body = await c.req.json();
+  } catch {
+    return c.json({ error: "Invalid JSON" }, 400);
+  }
+
+  const event = (body.data as Record<string, unknown>)?.event_type ?? body.event_type;
+  const payload = (body.data as Record<string, unknown>) ?? body;
+
+  if (event === "message.received") {
+    const fromField = payload.from;
+    const from = typeof fromField === "object" && fromField !== null
+      ? (fromField as Record<string, unknown>).phone_number as string ?? (fromField as Record<string, unknown>).toString()
+      : String(fromField ?? "");
+    const text = String(payload.text ?? payload.body ?? "").trim().toUpperCase();
+
+    if (!from || !text) {
+      return c.json({ error: "Missing from or text" }, 400);
+    }
+
+    const db = getDb();
+
+    const [client] = await db
+      .select({ id: clients.id, smsOptIn: clients.smsOptIn })
+      .from(clients)
+      .where(eq(clients.phone, from))
+      .limit(1);
+
+    if (!client) {
+      return c.json({ received: true });
+    }
+
+    if (STOP_KEYWORDS.has(text)) {
+      await db
+        .update(clients)
+        .set({
+          smsOptIn: false,
+          smsOptOutDate: new Date(),
+          updatedAt: new Date(),
+        })
+        .where(eq(clients.id, client.id));
+      return c.json({ received: true });
+    }
+
+    if (START_KEYWORDS.has(text)) {
+      await db
+        .update(clients)
+        .set({
+          smsOptIn: true,
+          smsConsentDate: new Date(),
+          updatedAt: new Date(),
+        })
+        .where(eq(clients.id, client.id));
+      return c.json({ received: true });
+    }
+
+    if (text === "HELP") {
+      const supportUrl = process.env.SUPPORT_URL ?? "https://groombook.app/support";
+      await smsSend(from, `GroomBook appointment reminders. Reply STOP to opt out. For help, visit ${supportUrl}.`);
+      return c.json({ received: true });
+    }
+
+    return c.json({ received: true });
+  }
+
+  if (event === "message.finalized" || event === "message.status") {
+    const status = String(payload.status ?? "");
+    const toField = payload.to;
+    const toNumber = typeof toField === "object" && toField !== null
+      ? (toField as Record<string, unknown>).phone_number as string ?? (toField as Record<string, unknown>).toString()
+      : String(toField ?? "");
+
+    if (!status || !toNumber) {
+      return c.json({ received: true });
+    }
+
+    const validDelivery = ["delivered", "sent", "failed", "sending", "queued"];
+    if (!validDelivery.includes(status)) {
+      return c.json({ received: true });
+    }
+
+    const db = getDb();
+
+    const [client] = await db
+      .select({ id: clients.id })
+      .from(clients)
+      .where(eq(clients.phone, toNumber))
+      .limit(1);
+
+    if (client) {
+      const [log] = await db
+        .select({ id: reminderLogs.id })
+        .from(reminderLogs)
+        .where(
+          and(
+            eq(reminderLogs.channel, "sms")
+          )
+        )
+        .limit(1);
+
+      if (log) {
+        await db
+          .update(reminderLogs)
+          .set({ deliveryStatus: status })
+          .where(eq(reminderLogs.id, log.id));
+      }
+    }
+
+    return c.json({ received: true });
+  }
+
+  return c.json({ received: true });
+});

apps/api/src/services/payment.ts

@@ -0,0 +1,162 @@
+import Stripe from "stripe";
+import { getDb, clients, eq, invoices } from "@groombook/db";
+
+let _stripe: Stripe | null | undefined;
+
+function getStripeClient(): Stripe | null {
+  if (_stripe === undefined) {
+    const secretKey = process.env.STRIPE_SECRET_KEY;
+    if (!secretKey) return null;
+    _stripe = new Stripe(secretKey);
+  }
+  return _stripe;
+}
+
+export async function getOrCreateStripeCustomer(clientId: string): Promise<string | null> {
+  const stripe = getStripeClient();
+  if (!stripe) return null;
+
+  const db = getDb();
+  const [client] = await db.select().from(clients).where(eq(clients.id, clientId)).limit(1);
+  if (!client) return null;
+
+  if (client.stripeCustomerId) return client.stripeCustomerId;
+
+  const customer = await stripe.customers.create({
+    metadata: { groombook_client_id: clientId },
+  });
+
+  await db
+    .update(clients)
+    .set({ stripeCustomerId: customer.id, updatedAt: new Date() })
+    .where(eq(clients.id, clientId));
+
+  return customer.id;
+}
+
+export async function createPaymentIntent(
+  invoiceIdOrIds: string | string[],
+  clientId: string
+): Promise<{ clientSecret: string; paymentIntentId: string } | null> {
+  const stripe = getStripeClient();
+  if (!stripe) return null;
+
+  const db = getDb();
+  const invoiceIds = Array.isArray(invoiceIdOrIds) ? invoiceIdOrIds : [invoiceIdOrIds];
+
+  const invoiceRows = await db
+    .select()
+    .from(invoices)
+    .where(eq(invoices.id, invoiceIds[0]));
+
+  const [invoice] = invoiceRows;
+  if (!invoice) return null;
+
+  let totalCents = invoice.totalCents;
+  if (invoiceIds.length > 1) {
+    const allInvoices = await db
+      .select({ totalCents: invoices.totalCents })
+      .from(invoices)
+      .where(eq(invoices.id, invoiceIds[0]));
+    totalCents = allInvoices.reduce((sum, inv) => sum + inv.totalCents, totalCents);
+  }
+
+  const stripeCustomerId = await getOrCreateStripeCustomer(clientId);
+  if (!stripeCustomerId) return null;
+
+  const paymentIntent = await stripe.paymentIntents.create({
+    amount: totalCents,
+    currency: "usd",
+    customer: stripeCustomerId,
+    metadata: {
+      groombook_invoice_ids: invoiceIds.join(","),
+      groombook_client_id: clientId,
+    },
+    automatic_payment_methods: { enabled: true },
+  });
+
+  for (const invId of invoiceIds) {
+    await db
+      .update(invoices)
+      .set({ stripePaymentIntentId: paymentIntent.id, updatedAt: new Date() })
+      .where(eq(invoices.id, invId));
+  }
+
+  return {
+    clientSecret: paymentIntent.client_secret!,
+    paymentIntentId: paymentIntent.id,
+  };
+}
+
+export async function processRefund(
+  invoiceId: string,
+  amountCents?: number
+): Promise<{ refundId: string } | null> {
+  const stripe = getStripeClient();
+  if (!stripe) return null;
+
+  const db = getDb();
+  const [invoice] = await db.select().from(invoices).where(eq(invoices.id, invoiceId)).limit(1);
+  if (!invoice?.stripePaymentIntentId) return null;
+
+  const refund = await stripe.refunds.create({
+    payment_intent: invoice.stripePaymentIntentId,
+    amount: amountCents,
+  });
+
+  await db
+    .update(invoices)
+    .set({ stripeRefundId: refund.id, updatedAt: new Date() })
+    .where(eq(invoices.id, invoiceId));
+
+  return { refundId: refund.id };
+}
+
+export async function listPaymentMethods(clientId: string): Promise<Stripe.PaymentMethod[] | null> {
+  const stripe = getStripeClient();
+  if (!stripe) return null;
+
+  const stripeCustomerId = await getOrCreateStripeCustomer(clientId);
+  if (!stripeCustomerId) return null;
+
+  const methods = await stripe.paymentMethods.list({
+    customer: stripeCustomerId,
+    type: "card",
+  });
+
+  return methods.data;
+}
+
+export async function attachPaymentMethod(
+  clientId: string,
+  paymentMethodId: string
+): Promise<boolean> {
+  const stripe = getStripeClient();
+  if (!stripe) return false;
+
+  const stripeCustomerId = await getOrCreateStripeCustomer(clientId);
+  if (!stripeCustomerId) return false;
+
+  await stripe.paymentMethods.attach(paymentMethodId, { customer: stripeCustomerId });
+  return true;
+}
+
+export async function detachPaymentMethod(paymentMethodId: string): Promise<boolean> {
+  const stripe = getStripeClient();
+  if (!stripe) return false;
+
+  await stripe.paymentMethods.detach(paymentMethodId);
+  return true;
+}
+
+export async function createSetupIntent(customerId: string): Promise<{ clientSecret: string } | null> {
+  const stripe = getStripeClient();
+  if (!stripe) return null;
+
+  const setupIntent = await stripe.setupIntents.create({
+    customer: customerId,
+    payment_method_types: ["card"],
+  });
+
+  return { clientSecret: setupIntent.client_secret! };
+}

apps/api/src/services/reminders.ts

@@ -12,14 +12,16 @@ import {
   services,
   staff,
   reminderLogs,
+  session,
 } from "@groombook/db";
 import {
   buildReminderEmail,
   sendEmail,
 } from "./email.js";
+import { smsSend } from "./sms.js";
 
-// How many hours before the appointment to send each reminder.
-// Override via env: REMINDER_HOURS_EARLY (default 24) and REMINDER_HOURS_LATE (default 2).
+// TCPA-required opt-out text appended to every SMS reminder
+const TCPA_OPT_OUT = "Reply STOP to opt out. Msg & data rates may apply.";
 function getReminderWindows(): { label: string; hours: number }[] {
   const early = Number(process.env.REMINDER_HOURS_EARLY ?? 24);
   const late = Number(process.env.REMINDER_HOURS_LATE ?? 2);
@@ -64,23 +66,39 @@ export async function runReminderCheck(): Promise<void> {
       );
 
     for (const appt of upcoming) {
-      // Check if reminder already sent (unique constraint prevents double-send)
-      const existing = await db
+      const [emailLog] = await db
         .select({ id: reminderLogs.id })
         .from(reminderLogs)
         .where(
           and(
             eq(reminderLogs.appointmentId, appt.id),
-            eq(reminderLogs.reminderType, window.label)
+            eq(reminderLogs.reminderType, window.label),
+            eq(reminderLogs.channel, "email")
           )
         )
         .limit(1);
 
-      if (existing.length > 0) continue; // already sent
+      const [smsLog] = await db
+        .select({ id: reminderLogs.id })
+        .from(reminderLogs)
+        .where(
+          and(
+            eq(reminderLogs.appointmentId, appt.id),
+            eq(reminderLogs.reminderType, window.label),
+            eq(reminderLogs.channel, "sms")
+          )
+        )
+        .limit(1);
 
       // Fetch related records for the email
       const [client] = await db
-        .select({ name: clients.name, email: clients.email, emailOptOut: clients.emailOptOut })
+        .select({
+          name: clients.name,
+          email: clients.email,
+          emailOptOut: clients.emailOptOut,
+          smsOptIn: clients.smsOptIn,
+          phoneE164: clients.phoneE164,
+        })
         .from(clients)
         .where(eq(clients.id, appt.clientId))
         .limit(1);
@@ -111,8 +129,6 @@ export async function runReminderCheck(): Promise<void> {
 
       if (!pet || !service) continue;
 
-      // Ensure the appointment has a confirmation token before sending the reminder.
-      // Generate one if it doesn't have one yet (e.g. pre-existing appointments).
       let confirmationToken = appt.confirmationToken;
       if (!confirmationToken) {
         confirmationToken = randomBytes(32).toString("hex");
@@ -122,27 +138,53 @@ export async function runReminderCheck(): Promise<void> {
           .where(eq(appointments.id, appt.id));
       }
 
-      const sent = await sendEmail(
-        buildReminderEmail(
-          client.email,
-          {
-            clientName: client.name,
-            petName: pet.name,
-            serviceName: service.name,
-            groomerName,
-            startTime: appt.startTime,
-          },
-          window.hours,
-          confirmationToken
-        )
-      );
+      if (!emailLog) {
+        const sent = await sendEmail(
+          buildReminderEmail(
+            client.email,
+            {
+              clientName: client.name,
+              petName: pet.name,
+              serviceName: service.name,
+              groomerName,
+              startTime: appt.startTime,
+            },
+            window.hours,
+            confirmationToken
+          )
+        );
 
-      if (sent) {
-        // Record send — ignore conflicts (race condition between instances)
-        await db
-          .insert(reminderLogs)
-          .values({ appointmentId: appt.id, reminderType: window.label })
-          .onConflictDoNothing();
+        if (sent) {
+          await db
+            .insert(reminderLogs)
+            .values({ appointmentId: appt.id, reminderType: window.label, channel: "email" })
+            .onConflictDoNothing();
+        }
+      }
+
+      if (!smsLog && client.smsOptIn && client.phoneE164) {
+        const apiUrl = process.env.API_URL ?? "http://localhost:3000";
+        const confirmUrl = `${apiUrl}/api/book/confirm/${confirmationToken}`;
+        const cancelUrl = `${apiUrl}/api/book/cancel/${confirmationToken}`;
+        const when = window.hours >= 24 ? "tomorrow" : `in ${window.hours} hours`;
+        const smsBody = [
+          `Hi ${client.name}, just a reminder: ${pet.name}'s grooming appointment is ${when}.`,
+          `Service: ${service.name}${groomerName ? ` with ${groomerName}` : ""}`,
+          `Confirm: ${confirmUrl}`,
+          `Cancel: ${cancelUrl}`,
+          TCPA_OPT_OUT,
+        ].join(". ");
+        try {
+          const smsOk = await smsSend(client.phoneE164, smsBody);
+          if (smsOk) {
+            await db
+              .insert(reminderLogs)
+              .values({ appointmentId: appt.id, reminderType: window.label, channel: "sms" })
+              .onConflictDoNothing();
+          }
+        } catch (err) {
+          console.error("[reminders] SMS send failed:", err);
+        }
       }
     }
   }
@@ -155,6 +197,19 @@ export function startReminderScheduler(): void {
     runReminderCheck().catch((err) => {
       console.error("[reminders] Error during reminder check:", err);
     });
+    runSessionCleanup().catch((err) => {
+      console.error("[reminders] Error during session cleanup:", err);
+    });
   });
   console.log("[reminders] Reminder scheduler started");
 }
+
+// Deletes expired sessions from the database.
+// Runs every minute alongside reminder checks.
+export async function runSessionCleanup(): Promise<void> {
+  const db = getDb();
+  const now = new Date();
+  await db
+    .delete(session)
+    .where(lt(session.expiresAt, now));
+}

apps/api/src/services/sms.ts

@@ -0,0 +1,140 @@
+import { Telnyx } from "telnyx";
+
+export interface SmsProvider {
+  sendSms(to: string, body: string, mediaUrls?: string[]): Promise<{ messageId: string; status: string }>;
+  validateWebhookSignature(req: Request): boolean;
+}
+
+interface TelnyxSmsResult {
+  message_id: string;
+  status: string;
+}
+
+function createTelnyxClient(): Telnyx | null {
+  const apiKey = process.env.TELNYX_API_KEY;
+  if (!apiKey) return null;
+  return new Telnyx(apiKey);
+}
+
+let _client: Telnyx | null | undefined;
+
+function getClient(): Telnyx | null {
+  if (_client === undefined) _client = createTelnyxClient();
+  return _client;
+}
+
+function getFromNumber(): string | null {
+  return process.env.TELNYX_FROM_NUMBER ?? null;
+}
+
+function isE164(phone: string): boolean {
+  return /^\+[1-9]\d{7,14}$/.test(phone);
+}
+
+export async function sendSms(
+  to: string,
+  body: string,
+  mediaUrls?: string[]
+): Promise<{ messageId: string; status: string }> {
+  const client = getClient();
+  if (!client) throw new Error("Telnyx client not initialized. Set TELNYX_API_KEY.");
+
+  const from = getFromNumber();
+  if (!from) throw new Error("TELNYX_FROM_NUMBER is not set");
+
+  if (!isE164(to)) throw new Error(`Invalid recipient phone format: ${to}. Expected E.164.`);
+  if (!isE164(from)) throw new Error(`Invalid sender phone format: ${from}. Expected E.164.`);
+
+  const payload: Record<string, unknown> = {
+    from,
+    to,
+    body,
+  };
+
+  if (mediaUrls && mediaUrls.length > 0) {
+    payload.media_urls = mediaUrls;
+  }
+
+  const result = await client.messages.create(payload as Record<string, string | string[]>);
+  const smsResult = result.data as unknown as TelnyxSmsResult;
+  return {
+    messageId: smsResult.message_id,
+    status: smsResult.status,
+  };
+}
+
+export class TelnyxProvider implements SmsProvider {
+  async sendSms(
+    to: string,
+    body: string,
+    mediaUrls?: string[]
+  ): Promise<{ messageId: string; status: string }> {
+    return sendSms(to, body, mediaUrls);
+  }
+
+  validateWebhookSignature(req: Request): boolean {
+    const secret = process.env.TELNYX_WEBHOOK_SECRET;
+    if (!secret) return false;
+
+    const signature = req.headers.get("telnyx-signature");
+    if (!signature) return false;
+
+    const payload = JSON.stringify(req.body);
+
+    try {
+      const { createHmac } = await import("crypto");
+      const hmac = createHmac("sha256", secret);
+      const expected = `sha256=${hmac.update(payload).digest("hex")}`;
+
+      const sigBuf = Buffer.from(signature);
+      const expBuf = Buffer.from(expected);
+
+      if (sigBuf.length !== expBuf.length) return false;
+
+      let diff = 0;
+      for (let i = 0; i < sigBuf.length; i++) {
+        diff |= sigBuf[i] ^ expBuf[i];
+      }
+      return diff === 0;
+    } catch {
+      return false;
+    }
+  }
+}
+
+let _provider: SmsProvider | null | undefined;
+
+export function createSmsProvider(): SmsProvider | null {
+  if (_provider === undefined) {
+    if (process.env.SMS_ENABLED !== "true") {
+      _provider = null;
+      return null;
+    }
+    switch (process.env.SMS_PROVIDER) {
+      case "telnyx": {
+        const client = getClient();
+        if (!client) {
+          _provider = null;
+          return null;
+        }
+        _provider = new TelnyxProvider();
+        break;
+      }
+      default:
+        _provider = null;
+    }
+  }
+  return _provider;
+}
+
+export async function smsSend(
+  to: string,
+  body: string,
+  mediaUrls?: string[]
+): Promise<boolean> {
+  const provider = createSmsProvider();
+  if (!provider) return false;
+
+  await provider.sendSms(to, body, mediaUrls);
+  return true;
+}

apps/e2e/tests/navigation.spec.ts

@@ -44,7 +44,10 @@ test.beforeEach(async ({ page }) => {
         json: { newClients: [], activeInPeriodCount: 0, churnRisk: [], churnRiskTotal: 0 },
       });
     }
-    // Appointments, clients, services, staff, invoices, book, etc.
+    if (url.includes("/api/invoices")) {
+      return route.fulfill({ json: { data: [], total: 0 } });
+    }
+    // Appointments, clients, services, staff, book, etc.
     return route.fulfill({ json: [] });
   });
 });
@@ -82,6 +85,7 @@ test("admin staff page loads", async ({ page }) => {
 
 test("admin invoices page loads", async ({ page }) => {
   await page.goto("/admin/invoices");
+  await page.waitForLoadState("domcontentloaded");
   await expect(page.getByText("GroomBook")).toBeVisible();
   await expect(page.getByRole("link", { name: "Invoices" })).toBeVisible();
 });

apps/web/package.json

@@ -14,8 +14,10 @@
   },
   "dependencies": {
     "@groombook/types": "workspace:*",
+    "@stripe/react-stripe-js": "^6.1.0",
+    "@stripe/stripe-js": "^9.1.0",
     "@tailwindcss/vite": "^4.2.2",
-    "better-auth": "^1.0.0",
+    "better-auth": "^1.5.6",
     "lucide-react": "^0.577.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

apps/web/public/demo-pets/dog-basset-brown-white.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96C853FAECD363909C4A0</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-bichon-white-groomed.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96CFC84D7A9333708F278</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-boxer-fawn-athletic.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96D48D7892E37386B9ACB</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-cavalier-cream-gentle.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96C25663D703833F23607</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-cocker-buff-friendly.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96D89851C843332073968</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-dachshund-black-tan.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96C9C5A03D33730C61AD8</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-pomeranian-white-studio.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96BEB91911B30317E3BE8</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-schnauzer-black-groomed.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96BFB7B92D33535D6D90D</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-setter-red-sunlit.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96B8BDF4B473630A2E120</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/public/demo-pets/dog-sheepdog-merle-running.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69D96D78BFFCAD343037C27C</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

apps/web/src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route, Link, useLocation, Navigate } from "react-router-dom";
+import { Routes, Route, Link, useLocation, Navigate, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { AppointmentsPage } from "./pages/Appointments.js";
 import { ClientsPage } from "./pages/Clients.js";
@@ -18,16 +18,37 @@ import { DevLoginSelector, getDevUser } from "./pages/DevLoginSelector.js";
 import { DevSessionIndicator } from "./components/DevSessionIndicator.js";
 import { BrandingProvider, useBranding } from "./BrandingContext.js";
 import { GlobalSearch } from "./components/GlobalSearch.js";
-import { useSession, signIn } from "./lib/auth-client.js";
+import { useSession, signIn, signOut } from "./lib/auth-client.js";
 
 function LoginPage() {
   const [isLoading, setIsLoading] = useState(false);
+  const [providers, setProviders] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
 
-  const handleLogin = async () => {
+  useEffect(() => {
+    fetch("/api/auth/providers")
+      .then((r) => r.json())
+      .then((data) => setProviders(data.providers ?? []))
+      .catch(() => setProviders([]));
+    const params = new URLSearchParams(window.location.search);
+    const authError = params.get("error");
+    if (authError) setError(authError.replace(/_/g, " "));
+  }, []);
+
+  const handleSocialLogin = async (provider: string) => {
     setIsLoading(true);
-    await signIn.social({ provider: "authentik", callbackURL: window.location.origin });
+    setError(null);
+    const result = await signIn.social({ provider, callbackURL: window.location.origin });
+    if (result?.error) {
+      setError(result.error.message ?? "Sign-in failed");
+      setIsLoading(false);
+    }
   };
 
+  const isGoogle = providers.includes("google");
+  const isGitHub = providers.includes("github");
+  const isAuthentik = providers.includes("authentik");
+
   return (
     <div
       style={{
@@ -53,23 +74,94 @@ function LoginPage() {
         <p style={{ color: "#6b7280", marginBottom: "1.5rem", fontSize: 14 }}>
           Sign in to continue
         </p>
-        <button
-          onClick={handleLogin}
-          disabled={isLoading}
-          style={{
-            padding: "0.6rem 1.5rem",
-            borderRadius: 6,
-            border: "none",
-            background: "#4f8a6f",
-            color: "#fff",
-            fontWeight: 600,
-            fontSize: 14,
-            cursor: isLoading ? "wait" : "pointer",
-            opacity: isLoading ? 0.7 : 1,
-          }}
-        >
-          {isLoading ? "Redirecting…" : "Sign in with SSO"}
-        </button>
+        {error && (
+          <div style={{ background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 6, padding: "0.5rem 0.75rem", marginBottom: "1rem", color: "#991b1b", fontSize: 13 }}>
+            {error}
+          </div>
+        )}
+        {isGoogle && (
+          <button
+            onClick={() => handleSocialLogin("google")}
+            disabled={isLoading}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              width: "100%",
+              padding: "0.6rem 1.5rem",
+              borderRadius: 6,
+              border: "1px solid #e2e8f0",
+              background: "#fff",
+              color: "#1a202c",
+              fontWeight: 600,
+              fontSize: 14,
+              cursor: isLoading ? "wait" : "pointer",
+              opacity: isLoading ? 0.7 : 1,
+              marginBottom: "0.5rem",
+            }}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24">
+              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+            </svg>
+            Sign in with Google
+          </button>
+        )}
+        {isGitHub && (
+          <button
+            onClick={() => handleSocialLogin("github")}
+            disabled={isLoading}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              width: "100%",
+              padding: "0.6rem 1.5rem",
+              borderRadius: 6,
+              border: "1px solid #e2e8f0",
+              background: "#24292f",
+              color: "#fff",
+              fontWeight: 600,
+              fontSize: 14,
+              cursor: isLoading ? "wait" : "pointer",
+              opacity: isLoading ? 0.7 : 1,
+              marginBottom: isAuthentik ? "0.5rem" : 0,
+            }}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+            </svg>
+            Sign in with GitHub
+          </button>
+        )}
+        {isAuthentik && (
+          <button
+            onClick={() => handleSocialLogin("authentik")}
+            disabled={isLoading}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              width: "100%",
+              padding: "0.6rem 1.5rem",
+              borderRadius: 6,
+              border: "none",
+              background: "#4f8a6f",
+              color: "#fff",
+              fontWeight: 600,
+              fontSize: 14,
+              cursor: isLoading ? "wait" : "pointer",
+              opacity: isLoading ? 0.7 : 1,
+            }}
+          >
+            {isLoading ? "Redirecting…" : "Sign in with SSO"}
+          </button>
+        )}
       </div>
     </div>
   );
@@ -89,6 +181,7 @@ const NAV_LINKS = [
 
 function AdminLayout() {
   const location = useLocation();
+  const navigate = useNavigate();
   const { branding } = useBranding();
 
   const logoSrc = branding.logoBase64 && branding.logoMimeType
@@ -117,6 +210,7 @@ function AdminLayout() {
           alignItems: "center",
           gap: 8,
           marginRight: "1.25rem",
+          flexShrink: 0,
         }}>
           {logoSrc && (
             <img src={logoSrc} alt="" style={{ width: 24, height: 24, objectFit: "contain" }} />
@@ -130,45 +224,73 @@ function AdminLayout() {
           </strong>
         </div>
         <GlobalSearch />
-        <Link
-          to="/admin/book"
+        <div style={{
+          display: "flex",
+          overflowX: "auto",
+          flex: 1,
+          minWidth: 0,
+          gap: "0.25rem",
+        }}>
+          <Link
+            to="/admin/book"
+            style={{
+              padding: "0.4rem 0.85rem",
+              borderRadius: 6,
+              textDecoration: "none",
+              fontSize: 13,
+              fontWeight: 600,
+              color: "#fff",
+              background: branding.primaryColor,
+              boxShadow: "0 1px 2px rgba(79, 138, 111, 0.3)",
+              flexShrink: 0,
+            }}
+          >
+            Book
+          </Link>
+          {NAV_LINKS.map(({ to, label }) => {
+            const active =
+              to === "/admin"
+                ? location.pathname === "/admin"
+                : location.pathname.startsWith(to);
+            return (
+              <Link
+                key={to}
+                to={to}
+                style={{
+                  padding: "0.4rem 0.75rem",
+                  borderRadius: 6,
+                  textDecoration: "none",
+                  fontSize: 13,
+                  fontWeight: active ? 600 : 500,
+                  color: active ? "#2d6a4f" : "#4b5563",
+                  background: active ? "#ecfdf5" : "transparent",
+                  flexShrink: 0,
+                }}
+              >
+                {label}
+              </Link>
+            );
+          })}
+        </div>
+        <button
+          onClick={async () => {
+            await signOut();
+            navigate("/login");
+          }}
           style={{
+            flexShrink: 0,
             padding: "0.4rem 0.85rem",
             borderRadius: 6,
-            textDecoration: "none",
+            border: "1px solid #e2e8f0",
+            background: "#fff",
+            color: "#4b5563",
             fontSize: 13,
-            fontWeight: 600,
-            color: "#fff",
-            background: branding.primaryColor,
-            marginRight: "0.5rem",
-            boxShadow: "0 1px 2px rgba(79, 138, 111, 0.3)",
+            fontWeight: 500,
+            cursor: "pointer",
           }}
         >
-          Book
-        </Link>
-        {NAV_LINKS.map(({ to, label }) => {
-          const active =
-            to === "/admin"
-              ? location.pathname === "/admin"
-              : location.pathname.startsWith(to);
-          return (
-            <Link
-              key={to}
-              to={to}
-              style={{
-                padding: "0.4rem 0.75rem",
-                borderRadius: 6,
-                textDecoration: "none",
-                fontSize: 13,
-                fontWeight: active ? 600 : 500,
-                color: active ? "#2d6a4f" : "#4b5563",
-                background: active ? "#ecfdf5" : "transparent",
-              }}
-            >
-              {label}
-            </Link>
-          );
-        })}
+          Logout
+        </button>
       </nav>
       <main style={{ padding: "1.25rem 1.5rem" }}>
         <Routes>

apps/web/src/lib/auth-client.ts

@@ -4,4 +4,4 @@ export const authClient = createAuthClient({
   baseURL: import.meta.env.VITE_API_URL ?? "",
 });
 
-export const { signIn, signOut, useSession } = authClient;
+export const { signIn, signOut, useSession, changePassword } = authClient;

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { User, Lock, PawPrint, FileCheck, Plus, Archive } from "lucide-react";
 import { PetForm } from "./PetForm.js";
+import { authClient } from "../../lib/auth-client.js";
 
 interface Props {
   sessionId: string | null;
@@ -148,9 +149,11 @@ function PasswordChange({ readOnly }: { readOnly: boolean }) {
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const passwordsMatch = newPassword === confirmPassword;
-  const canSubmit = currentPassword.length > 0 && newPassword.length > 0 && passwordsMatch;
+  const canSubmit = newPassword.length > 0 && passwordsMatch && !loading;
 
   if (readOnly) {
     return (
@@ -160,17 +163,34 @@ function PasswordChange({ readOnly }: { readOnly: boolean }) {
     );
   }
 
-  function handleSubmit() {
+  async function handleSubmit() {
     if (!canSubmit) return;
     if (newPassword !== confirmPassword) {
       setError("Passwords do not match.");
       return;
     }
-    // TODO: Wire up to actual password-change API endpoint once backend support exists
     setError(null);
-    setCurrentPassword("");
-    setNewPassword("");
-    setConfirmPassword("");
+    setLoading(true);
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const result = await (authClient as any).changePassword({
+        currentPassword,
+        newPassword,
+      });
+      if (result.error) {
+        setError(result.error.message ?? "Failed to change password.");
+      } else {
+        setSuccess(true);
+        setCurrentPassword("");
+        setNewPassword("");
+        setConfirmPassword("");
+        setTimeout(() => setSuccess(false), 4000);
+      }
+    } catch {
+      setError("An unexpected error occurred.");
+    } finally {
+      setLoading(false);
+    }
   }
 
   return (
@@ -205,12 +225,13 @@ function PasswordChange({ readOnly }: { readOnly: boolean }) {
           />
         </div>
         {error && <p className="text-sm text-red-500">{error}</p>}
+        {success && <p className="text-sm text-green-600">Password updated successfully.</p>}
         <button
           onClick={handleSubmit}
           disabled={!canSubmit}
           className="px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          Update Password
+          {loading ? "Updating..." : "Update Password"}
         </button>
       </div>
     </div>

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

@@ -1,4 +1,6 @@
 import { useState, useEffect } from "react";
+import { loadStripe, type Stripe } from "@stripe/stripe-js";
+import { Elements, PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js";
 import { CreditCard, DollarSign, Package, Zap } from "lucide-react";
 
 interface Invoice {
@@ -10,31 +12,28 @@ interface Invoice {
 }
 
 interface PaymentMethod {
+  id: string;
   brand: string;
   last4: string;
   expiryMonth: number;
   expiryYear: number;
 }
 
-interface Package {
-  name: string;
-  remaining: number;
-}
-
 interface BillingPaymentsProps {
   sessionId: string | null;
   readOnly: boolean;
 }
 
-export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
+function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
   const [invoices, setInvoices] = useState<Invoice[]>([]);
   const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
-  const [packages, setPackages] = useState<Package[]>([]);
+  const [packages, setPackages] = useState<{ name: string; remaining: number }[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [tab, setTab] = useState<"invoices" | "payment" | "packages">("invoices");
   const [autopay, setAutopay] = useState(false);
   const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [publishableKey, setPublishableKey] = useState<string>("");
 
   useEffect(() => {
     async function fetchData() {
@@ -44,20 +43,37 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
       }
 
       try {
-        const response = await fetch("/api/portal/invoices", {
-          headers: {
-            "X-Impersonation-Session-Id": sessionId,
-          },
-        });
+        const [configRes, invoicesRes, methodsRes] = await Promise.all([
+          fetch("/api/portal/config", {
+            headers: { "X-Impersonation-Session-Id": sessionId },
+          }),
+          fetch("/api/portal/invoices", {
+            headers: { "X-Impersonation-Session-Id": sessionId },
+          }),
+          fetch("/api/portal/payment-methods", {
+            headers: { "X-Impersonation-Session-Id": sessionId },
+          }),
+        ]);
 
-        if (!response.ok) {
-          throw new Error("Failed to fetch invoices");
+        if (!configRes.ok) throw new Error("Failed to fetch config");
+        const configData = await configRes.json();
+        setPublishableKey(configData.stripePublishableKey ?? "");
+
+        const invoicesData = await invoicesRes.json();
+        setInvoices(Array.isArray(invoicesData) ? invoicesData : invoicesData.invoices || []);
+
+        if (methodsRes.ok) {
+          const methodsData = await methodsRes.json();
+          setPaymentMethods(
+            (methodsData ?? []).map((m: { id: string; card: { brand: string; last4: string; exp_month: number; exp_year: number } }) => ({
+              id: m.id,
+              brand: m.card?.brand ?? "unknown",
+              last4: m.card?.last4 ?? "****",
+              expiryMonth: m.card?.exp_month ?? 0,
+              expiryYear: m.card?.exp_year ?? 0,
+            }))
+          );
         }
-
-        const data = await response.json();
-        setInvoices(Array.isArray(data) ? data : data.invoices || []);
-        setPaymentMethods(data.paymentMethods || []);
-        setPackages(data.packages || []);
       } catch (err) {
         setError(err instanceof Error ? err.message : "An error occurred");
       } finally {
@@ -68,12 +84,8 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
     fetchData();
   }, [sessionId]);
 
-  const formatCents = (cents: number) => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-    }).format(cents / 100);
-  };
+  const formatCents = (cents: number) =>
+    new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(cents / 100);
 
   const pending = invoices.filter((i) => i.status === "pending");
   const totalPending = pending.reduce((sum, i) => sum + i.totalCents, 0);
@@ -82,9 +94,9 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
     return (
       <div className="p-6">
         <div className="animate-pulse space-y-4">
-          <div className="h-6 bg-gray-200 rounded w-1/3"></div>
-          <div className="h-24 bg-gray-200 rounded"></div>
-          <div className="h-24 bg-gray-200 rounded"></div>
+          <div className="h-6 bg-gray-200 rounded w-1/3" />
+          <div className="h-24 bg-gray-200 rounded" />
+          <div className="h-24 bg-gray-200 rounded" />
         </div>
       </div>
     );
@@ -100,7 +112,6 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
 
   return (
     <div className="space-y-6">
-      {/* Outstanding Balance Banner */}
       {totalPending > 0 && (
         <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
           <div>
@@ -110,16 +121,15 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
               {pending.length} unpaid invoice{pending.length > 1 ? "s" : ""}
             </p>
           </div>
-            <button
-              onClick={() => setShowPaymentModal(true)}
-              className="px-6 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)"
-            >
-              Pay Now
-            </button>
+          <button
+            onClick={() => setShowPaymentModal(true)}
+            className="px-6 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)"
+          >
+            Pay Now
+          </button>
         </div>
       )}
 
-      {/* Tabs */}
       <div className="flex gap-2">
         {([
           { id: "invoices" as const, label: "Invoices", icon: DollarSign },
@@ -141,7 +151,6 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
         ))}
       </div>
 
-      {/* Invoices */}
       {tab === "invoices" && (
         <div className="bg-white rounded-2xl border border-stone-200 shadow-sm overflow-hidden">
           <div className="overflow-x-auto">
@@ -152,7 +161,7 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
                   <th className="px-5 py-3 font-medium">Description</th>
                   <th className="px-5 py-3 font-medium">Amount</th>
                   <th className="px-5 py-3 font-medium">Status</th>
-                  <th className="px-5 py-3 font-medium"></th>
+                  <th className="px-5 py-3 font-medium" />
                 </tr>
               </thead>
               <tbody>
@@ -160,9 +169,7 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
                   <tr key={inv.id} className="border-b border-stone-50 hover:bg-stone-50/50">
                     <td className="px-5 py-3 text-stone-700">
                       {new Date(inv.date).toLocaleDateString("en-US", {
-                        month: "short",
-                        day: "numeric",
-                        year: "numeric",
+                        month: "short", day: "numeric", year: "numeric",
                       })}
                     </td>
                     <td className="px-5 py-3 text-stone-600">
@@ -201,7 +208,6 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
         </div>
       )}
 
-      {/* Payment Methods */}
       {tab === "payment" && (
         <div className="space-y-4">
           {paymentMethods.length === 0 ? (
@@ -210,7 +216,7 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
             <div className="space-y-3">
               {paymentMethods.map((method) => (
                 <div
-                  key={`${method.brand}-${method.last4}`}
+                  key={method.id}
                   className="flex items-center justify-between p-4 border border-stone-200 rounded-lg bg-white"
                 >
                   <div className="flex items-center gap-3">
@@ -223,7 +229,18 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
                     </span>
                   </div>
                   {!readOnly && (
-                    <button className="text-sm text-blue-600 hover:underline">
+                    <button
+                      onClick={async () => {
+                        const res = await fetch(`/api/portal/payment-methods/${method.id}`, {
+                          method: "DELETE",
+                          headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
+                        });
+                        if (res.ok) {
+                          setPaymentMethods((prev) => prev.filter((m) => m.id !== method.id));
+                        }
+                      }}
+                      className="text-sm text-blue-600 hover:underline"
+                    >
                       Remove
                     </button>
                   )}
@@ -232,7 +249,6 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
             </div>
           )}
 
-          {/* Autopay */}
           <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
@@ -241,9 +257,7 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
                 </div>
                 <div>
                   <p className="text-sm font-medium text-stone-800">Autopay</p>
-                  <p className="text-xs text-stone-500">
-                    Automatically charge after each appointment
-                  </p>
+                  <p className="text-xs text-stone-500">Automatically charge after each appointment</p>
                 </div>
               </div>
               {!readOnly ? (
@@ -269,17 +283,13 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
         </div>
       )}
 
-      {/* Packages */}
       {tab === "packages" && (
         <div className="space-y-4">
           {packages.length === 0 ? (
             <p className="text-gray-500 italic">No packages purchased</p>
           ) : (
             packages.map((pkg, index) => (
-              <div
-                key={index}
-                className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm"
-              >
+              <div key={index} className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-stone-800">{pkg.name}</span>
                   <span className="text-stone-600">{pkg.remaining} remaining</span>
@@ -290,59 +300,120 @@ export function BillingPayments({ sessionId, readOnly }: BillingPaymentsProps) {
         </div>
       )}
 
-      {/* Payment Modal */}
-      {showPaymentModal && (
-        <PaymentModal
+      {showPaymentModal && publishableKey && (
+        <PaymentModalWrapper
+          key={Date.now()}
+          sessionId={sessionId ?? ""}
+          publishableKey={publishableKey}
           pending={pending}
-          totalPending={totalPending}
           onClose={() => setShowPaymentModal(false)}
+          onSuccess={() => {
+            setInvoices((prev) =>
+              prev.map((inv) =>
+                pending.some((p) => p.id === inv.id) ? { ...inv, status: "paid" as const } : inv
+              )
+            );
+            setShowPaymentModal(false);
+          }}
         />
       )}
     </div>
   );
 }
 
-function PaymentModal({
-  pending,
-  totalPending: _totalPending,
-  onClose,
-}: {
+interface PaymentModalWrapperProps {
+  sessionId: string;
+  publishableKey: string;
   pending: Invoice[];
-  totalPending: number;
   onClose: () => void;
-}) {
-  const [selectedInvoices, setSelectedInvoices] = useState<Set<string>>(
-    new Set(pending.map((i) => i.id))
+  onSuccess: () => void;
+}
+
+function PaymentModalWrapper({ sessionId, publishableKey, pending, onClose, onSuccess }: PaymentModalWrapperProps) {
+  const [stripePromise] = useState(() =>
+    publishableKey ? loadStripe(publishableKey) : Promise.resolve(null)
   );
+
+  return (
+    <Elements stripe={stripePromise} options={{ mode: "payment", amount: pending.reduce((s, i) => s + i.totalCents, 0), currency: "usd" }}>
+      <PaymentModal sessionId={sessionId} pending={pending} onClose={onClose} onSuccess={onSuccess} />
+    </Elements>
+  );
+}
+
+interface PaymentModalProps {
+  sessionId: string;
+  pending: Invoice[];
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+function PaymentModal({ sessionId, pending, onClose, onSuccess }: PaymentModalProps) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [selectedInvoices, setSelectedInvoices] = useState<Set<string>>(new Set(pending.map((i) => i.id)));
+  const [saveCard, setSaveCard] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [isComplete, setIsComplete] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   const formatCents = (cents: number) =>
-    new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-    }).format(cents / 100);
+    new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(cents / 100);
 
   const toggleInvoice = (id: string) => {
     const next = new Set(selectedInvoices);
-    if (next.has(id)) {
-      next.delete(id);
-    } else {
-      next.add(id);
-    }
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
     setSelectedInvoices(next);
   };
 
-  const handlePay = async () => {
-    setIsProcessing(true);
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-    setIsProcessing(false);
-    setIsComplete(true);
-  };
+  const selectedTotal = pending.filter((i) => selectedInvoices.has(i.id)).reduce((sum, i) => sum + i.totalCents, 0);
 
-  const selectedTotal = pending
-    .filter((i) => selectedInvoices.has(i.id))
-    .reduce((sum, i) => sum + i.totalCents, 0);
+  const handlePay = async () => {
+    if (!stripe || !elements) return;
+    setIsProcessing(true);
+    setError(null);
+
+    try {
+      const isMulti = selectedInvoices.size > 1;
+      const endpoint = isMulti ? "/api/portal/invoices/pay-multiple" : `/api/portal/invoices/${[...selectedInvoices][0]}/pay`;
+      const body = isMulti ? { invoiceIds: [...selectedInvoices] } : {};
+
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Impersonation-Session-Id": sessionId,
+        },
+        body: JSON.stringify(body),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error ?? "Failed to initialize payment");
+      }
+
+      const { clientSecret } = await res.json();
+
+      const { error: stripeError } = await stripe.confirmPayment({
+        elements,
+        clientSecret,
+        confirmParams: saveCard ? { setup_future_usage: "off_session" } : undefined,
+      });
+
+      if (stripeError) {
+        setError(stripeError.message ?? "Payment failed");
+        setIsProcessing(false);
+        return;
+      }
+
+      setIsComplete(true);
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unexpected error occurred");
+      setIsProcessing(false);
+    }
+  };
 
   if (isComplete) {
     return (
@@ -357,10 +428,7 @@ function PaymentModal({
           <p className="text-stone-500 text-sm mb-6">
             Your payment of {formatCents(selectedTotal)} has been processed. A receipt has been sent to your email.
           </p>
-          <button
-            onClick={onClose}
-            className="w-full px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium"
-          >
+          <button onClick={onClose} className="w-full px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium">
             Done
           </button>
         </div>
@@ -408,22 +476,36 @@ function PaymentModal({
                   </p>
                 </div>
               </div>
-              <span className="text-sm font-medium text-stone-800">
-                {formatCents(inv.totalCents)}
-              </span>
+              <span className="text-sm font-medium text-stone-800">{formatCents(inv.totalCents)}</span>
             </label>
           ))}
         </div>
 
         <div className="border-t border-stone-200 pt-4 mb-6">
-          <div className="flex justify-between items-center">
+          <div className="flex justify-between items-center mb-4">
             <span className="text-sm text-stone-600">Total</span>
-            <span className="text-lg font-bold text-stone-800">
-              {formatCents(selectedTotal)}
-            </span>
+            <span className="text-lg font-bold text-stone-800">{formatCents(selectedTotal)}</span>
           </div>
+
+          <PaymentElement />
         </div>
 
+        <label className="flex items-center gap-2 mb-4">
+          <input
+            type="checkbox"
+            checked={saveCard}
+            onChange={(e) => setSaveCard(e.target.checked)}
+            className="w-4 h-4 rounded border-stone-300 text-(--color-accent) focus:ring-(--color-accent)"
+          />
+          <span className="text-sm text-stone-600">Save card for future payments</span>
+        </label>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+            {error}
+          </div>
+        )}
+
         <div className="flex gap-3">
           <button
             onClick={onClose}
@@ -433,7 +515,7 @@ function PaymentModal({
           </button>
           <button
             onClick={handlePay}
-            disabled={selectedInvoices.size === 0 || isProcessing}
+            disabled={selectedInvoices.size === 0 || isProcessing || !stripe}
             className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {isProcessing ? "Processing..." : "Pay Now"}
@@ -444,4 +526,8 @@ function PaymentModal({
   );
 }
 
+export function BillingPayments(props: BillingPaymentsProps) {
+  return <BillingPaymentsInner {...props} />;
+}
+
 export default BillingPayments;

apps/web/vite.config.ts

@@ -41,11 +41,11 @@ export default defineConfig({
       workbox: {
         globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2}"],
         navigateFallbackDenylist: [
-          /^\/api\/auth\/oauth2\/callback\//,
+          /^\/api\/auth\//,
         ],
         runtimeCaching: [
           {
-            urlPattern: /^http.*\/api\/.*/i,
+            urlPattern: /^http.*\/api\/(?!auth\/).*/i,
             handler: "NetworkFirst",
             options: {
               cacheName: "api-cache",

generate_dogs.sh

@@ -0,0 +1,65 @@
+#!/bin/bash
+
+API_HOST="https://api.minimax.io"
+API_KEY="$MINIMAX_API_KEY"
+OUTPUT_DIR="minimax-output"
+
+mkdir -p "$OUTPUT_DIR"
+
+# Diverse dog image prompts
+declare -a PROMPTS=(
+  "A beautiful red Irish Setter with long flowing silky coat, standing proudly in golden hour sunlight, professional pet portrait photography, warm tones"
+  "A fluffy white Pomeranian puppy with thick fluffy coat, sitting alert with bright expression, studio white background, cute grooming"
+  "A black Schnauzer with distinctive full beard and mustache, freshly groomed with neat styling, professional grooming salon setting"
+  "A cream and white Cavalier King Charles Spaniel with silky coat, gentle sad eyes, soft warm indoor lighting, elegant pose"
+  "A brown and white Basset Hound with long droopy ears, lying down in relaxed pose, natural outdoor setting, peaceful expression"
+  "A black and tan miniature Dachshund with glossy coat, alert standing pose, warm studio lighting, detailed paws visible"
+  "A white fluffy Bichon Frise after professional grooming with rounded topknot, happy bouncy expression, bright cheerful background"
+  "A muscular fawn Boxer dog, athletic build, standing confidently outdoors in park, energetic expression, natural lighting"
+  "A blue merle Shetland Sheepdog with alert ears and fluffy coat, running happily, green grass field background, vibrant"
+  "A buff colored Cocker Spaniel with beautiful silky coat, friendly gentle expression, warm natural window lighting, indoor"
+)
+
+declare -a FILENAMES=(
+  "dog-setter-red-sunlit.png"
+  "dog-pomeranian-white-studio.png"
+  "dog-schnauzer-black-groomed.png"
+  "dog-cavalier-cream-gentle.png"
+  "dog-basset-brown-white.png"
+  "dog-dachshund-black-tan.png"
+  "dog-bichon-white-groomed.png"
+  "dog-boxer-fawn-athletic.png"
+  "dog-sheepdog-merle-running.png"
+  "dog-cocker-buff-friendly.png"
+)
+
+echo "Generating ${#PROMPTS[@]} diverse dog images..."
+
+for i in "${!PROMPTS[@]}"; do
+  PROMPT="${PROMPTS[$i]}"
+  FILENAME="${FILENAMES[$i]}"
+  
+  echo -n "[$((i+1))/${#PROMPTS[@]}] $FILENAME... "
+  
+  RESPONSE=$(curl -s -X POST "${API_HOST}/v1/image_generation" \
+    -H "Authorization: Bearer ${API_KEY}" \
+    -H "Content-Type: application/json" \
+    -d "{\"model\":\"image-01\",\"prompt\":\"${PROMPT}\",\"image_count\":1}")
+  
+  # Extract image URL from response
+  IMAGE_URL=$(echo "$RESPONSE" | grep -o '"image_urls":\["\([^"]*\)' | cut -d'"' -f4)
+  
+  if [ -n "$IMAGE_URL" ]; then
+    curl -s "$IMAGE_URL" -o "$OUTPUT_DIR/$FILENAME" 2>/dev/null
+    if [ -f "$OUTPUT_DIR/$FILENAME" ] && [ -s "$OUTPUT_DIR/$FILENAME" ]; then
+      echo "✓"
+    else
+      echo "✗ (download failed)"
+    fi
+  else
+    echo "✗ (no URL)"
+  fi
+done
+
+echo "Done! Generated images in $OUTPUT_DIR/"
+ls -lh "$OUTPUT_DIR"/dog-*.png 2>/dev/null | wc -l

generate_dogs_bulk.py

@@ -0,0 +1,152 @@
+#!/usr/bin/env python3
+import base64
+import requests
+import os
+import json
+import time
+from datetime import datetime
+
+api_key = os.environ.get("MINIMAX_API_KEY")
+if not api_key:
+    raise ValueError("MINIMAX_API_KEY environment variable not set")
+
+url = "https://api.minimax.io/v1/image_generation"
+headers = {"Authorization": f"Bearer {api_key}"}
+
+os.makedirs("minimax-output", exist_ok=True)
+
+# Comprehensive list of dog breeds and variations for diverse demo data
+dog_prompts = [
+    # Large breeds
+    ("german-shepherd-alert", "German Shepherd dog with alert expression, standing confidently, professional pet photography, studio lighting, photorealistic"),
+    ("golden-retriever-happy", "Golden Retriever with joyful expression, sitting, golden coat, natural daylight, professional pet photography, photorealistic"),
+    ("labrador-running", "Black Labrador Retriever running towards camera, outdoor park setting, dynamic pose, professional pet photography, photorealistic"),
+    ("german-shepherd-sitting", "German Shepherd sitting in front of studio backdrop, professional portrait, studio lighting, photorealistic"),
+    ("golden-retriever-lying", "Golden Retriever lying down on grass, peaceful expression, outdoor natural lighting, professional pet photography, photorealistic"),
+
+    # Medium breeds
+    ("beagle-curious", "Beagle with curious expression, sitting, outdoor garden setting, professional pet photography, photorealistic"),
+    ("cocker-spaniel-groomed", "Cocker Spaniel freshly groomed with fluffy coat, happy expression, professional grooming studio, photorealistic"),
+    ("english-springer-spaniel", "English Springer Spaniel in natural outdoor setting, alert pose, professional pet photography, photorealistic"),
+    ("boxer-playful", "Boxer dog with playful expression, standing, muscular build, professional studio lighting, photorealistic"),
+    ("bulldog-gentle", "English Bulldog with gentle expression, sitting, studio backdrop, professional pet photography, photorealistic"),
+
+    # Small breeds
+    ("maltese-fluffy", "Maltese dog with white fluffy coat, sitting, groomed appearance, professional pet photography, studio lighting, photorealistic"),
+    ("shih-tzu-groomed", "Shih Tzu with long groomed coat, sitting pretty, professional grooming studio, photorealistic"),
+    ("pomeranian-alert", "Pomeranian with alert expression, standing, fluffy coat, professional pet photography, photorealistic"),
+    ("yorkshire-terrier", "Yorkshire Terrier with silky coat, sitting, professional grooming environment, photorealistic"),
+    ("pug-curious", "Pug with curious expression, sitting, studio lighting, professional pet photography, photorealistic"),
+
+    # Specialty breeds
+    ("poodle-standard-groomed", "Standard Poodle with professionally groomed coat, standing in show stance, professional grooming studio, photorealistic"),
+    ("dachshund-long", "Long-haired Dachshund, lying down, relaxed pose, professional pet photography, photorealistic"),
+    ("corgi-happy", "Welsh Corgi with happy expression, standing, professional outdoor setting, photorealistic"),
+    ("husky-alert", "Siberian Husky with alert expression, sitting, professional pet photography, studio lighting, photorealistic"),
+    ("german-shepherd-lying", "German Shepherd lying down in relaxed pose, indoor setting, professional pet photography, photorealistic"),
+
+    # Mixed/rescue variations
+    ("mixed-breed-brown", "Brown and white mixed breed dog, friendly expression, sitting, professional pet photography, photorealistic"),
+    ("mixed-breed-black", "Black mixed breed dog with gentle eyes, standing, outdoor natural lighting, photorealistic"),
+    ("mixed-breed-spotted", "Spotted mixed breed dog, playful pose, outdoor park setting, professional pet photography, photorealistic"),
+    ("terrier-mix-sitting", "Terrier mix dog, alert expression, sitting, professional studio backdrop, photorealistic"),
+    ("spaniel-mix-outdoor", "Spaniel mix dog in outdoor garden, relaxed pose, natural daylight, professional pet photography, photorealistic"),
+
+    # Additional variations
+    ("labrador-golden", "Golden Labrador Retriever, calm expression, standing in professional pose, studio lighting, photorealistic"),
+    ("labrador-black-sitting", "Black Labrador Retriever sitting, gentle expression, professional pet photography, photorealistic"),
+    ("rottweiler-calm", "Rottweiler with calm expression, sitting, professional studio, photorealistic"),
+    ("doberman-alert", "Doberman Pinscher with alert expression, standing, professional pet photography, photorealistic"),
+    ("german-shepherd-side", "German Shepherd in side profile, standing, professional outdoor setting, photorealistic"),
+]
+
+print(f"Generating {len(dog_prompts)} unique dog images...")
+print(f"Start time: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+print("")
+
+generated = 0
+failed = 0
+
+for i, (filename_base, prompt) in enumerate(dog_prompts, 1):
+    filename = f"dog-{filename_base}.png"
+    filepath = f"minimax-output/{filename}"
+
+    # Check if already exists
+    if os.path.exists(filepath):
+        size = os.path.getsize(filepath)
+        print(f"[{i:2d}/{len(dog_prompts)}] ✓ {filename} (already exists, {size} bytes)")
+        generated += 1
+        continue
+
+    print(f"[{i:2d}/{len(dog_prompts)}] Generating {filename}...", end=" ", flush=True)
+
+    payload = {
+        "model": "image-01",
+        "prompt": prompt,
+        "aspect_ratio": "1:1",
+        "response_format": "base64",
+    }
+
+    try:
+        response = requests.post(url, headers=headers, json=payload, timeout=120)
+
+        # Check for quota errors
+        if response.status_code == 429:
+            print(f"✗ QUOTA EXCEEDED")
+            print(f"\nQuota limit reached after {generated} successful generations")
+            break
+
+        response.raise_for_status()
+
+        data = response.json()
+        if "data" in data and "image_base64" in data["data"]:
+            images = data["data"]["image_base64"]
+
+            with open(filepath, "wb") as f:
+                f.write(base64.b64decode(images[0]))
+
+            file_size = os.path.getsize(filepath)
+            print(f"✓ ({file_size} bytes)")
+            generated += 1
+        else:
+            print(f"✗ Unexpected response format")
+            failed += 1
+
+    except requests.exceptions.Timeout:
+        print(f"✗ Timeout")
+        failed += 1
+    except requests.exceptions.RequestException as e:
+        if "429" in str(e) or "quota" in str(e).lower():
+            print(f"✗ QUOTA EXCEEDED")
+            print(f"\nQuota limit reached after {generated} successful generations")
+            break
+        else:
+            print(f"✗ {type(e).__name__}")
+            failed += 1
+    except Exception as e:
+        print(f"✗ {type(e).__name__}")
+        failed += 1
+
+    time.sleep(0.5)  # Small delay between requests
+
+print("")
+print(f"End time: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+print(f"✓ Successfully generated: {generated}")
+print(f"✗ Failed: {failed}")
+print(f"\nCopying images to demo-pets directory...")
+
+# Copy all generated images to demo-pets
+import subprocess
+result = subprocess.run(
+    ["cp", "-v", "minimax-output/dog-*.png", "apps/web/public/demo-pets/"],
+    capture_output=True,
+    text=True
+)
+
+if result.returncode == 0:
+    # Count files in demo-pets
+    import glob
+    demo_pets = glob.glob("apps/web/public/demo-pets/dog-*.png")
+    print(f"✓ Copied to demo-pets. Total dog images: {len(demo_pets)}")
+else:
+    print(f"Note: Copy result - {result.stderr}")

generate_pet_images.sh

@@ -0,0 +1,80 @@
+#!/bin/bash
+
+# Use the configured MiniMax API host
+API_HOST="${MINIMAX_API_HOST:-https://api.minimax.io}"
+API_KEY="$MINIMAX_API_KEY"
+
+# Test endpoint - check which one works
+echo "Testing API endpoints..."
+echo "API_HOST: $API_HOST"
+echo "API_KEY: ${API_KEY:0:15}..."
+
+# Array of diverse dog images to generate
+declare -a PROMPTS=(
+  "A beautiful red Irish Setter with flowing silky coat, standing proudly in a sunny garden, warm natural lighting, professional pet photography"
+  "A fluffy white Pomeranian with thick coat, sitting alert, bright studio background, cute expression"
+  "A black Schnauzer with distinctive beard, freshly groomed, professional salon setting, dignified pose"
+  "A cream-colored Cavalier King Charles Spaniel, silky coat, gentle expression, soft warm lighting"
+  "A brown and white Basset Hound, long ears, relaxed sitting pose, natural outdoor background"
+  "A black and tan Dachshund, elongated body, alert posture, warm studio lighting"
+  "A white Bichon Frise, fluffy groomed coat, happy expression, bright cheerful background"
+  "A fawn Boxer with muscular build, athletic posture, outdoor park setting, energetic expression"
+  "A merle Shetland Sheepdog, alert ears, running pose, green garden background"
+  "A buff-colored Cocker Spaniel, silky coat, friendly expression, warm natural light"
+)
+
+declare -a FILENAMES=(
+  "dog-setter-red-sunny.png"
+  "dog-pomeranian-white-alert.png"
+  "dog-schnauzer-groomed.png"
+  "dog-cavalier-cream.png"
+  "dog-basset-hound-outdoor.png"
+  "dog-dachshund-alert.png"
+  "dog-bichon-frise-happy.png"
+  "dog-boxer-athletic.png"
+  "dog-sheepdog-merle.png"
+  "dog-cocker-spaniel-buff.png"
+)
+
+mkdir -p minimax-output
+
+echo "Generating ${#PROMPTS[@]} diverse dog images..."
+
+for i in "${!PROMPTS[@]}"; do
+  PROMPT="${PROMPTS[$i]}"
+  FILENAME="${FILENAMES[$i]}"
+  
+  echo "[$((i+1))/${#PROMPTS[@]}] Generating: $FILENAME"
+  
+  # Make API request
+  RESPONSE=$(curl -s -X POST "${API_HOST}/v1/image_generation" \
+    -H "Authorization: Bearer ${API_KEY}" \
+    -H "Content-Type: application/json" \
+    -d "{
+      \"model\": \"image-01\",
+      \"prompt\": \"${PROMPT}\",
+      \"image_count\": 1
+    }")
+  
+  # Check if response contains image data
+  if echo "$RESPONSE" | grep -q "data\|image_url\|file_content"; then
+    echo "  ✓ Response received"
+    
+    # Try to extract and save image data
+    # Different APIs format responses differently
+    IMAGE_DATA=$(echo "$RESPONSE" | grep -o '"file_content":"[^"]*' | head -1 | cut -d'"' -f4)
+    
+    if [ -n "$IMAGE_DATA" ]; then
+      echo "$IMAGE_DATA" | base64 -d > "minimax-output/$FILENAME"
+      echo "  ✓ Image saved to minimax-output/$FILENAME"
+    else
+      echo "  ✗ Could not extract image data"
+    fi
+  else
+    echo "  ✗ API response: ${RESPONSE:0:100}"
+  fi
+  
+  sleep 1
+done
+
+echo "Image generation complete!"

generate_puggles.py

@@ -0,0 +1,78 @@
+#!/usr/bin/env python3
+import base64
+import requests
+import os
+import json
+
+api_key = os.environ.get("MINIMAX_API_KEY")
+if not api_key:
+    raise ValueError("MINIMAX_API_KEY environment variable not set")
+
+url = "https://api.minimax.io/v1/image_generation"
+headers = {"Authorization": f"Bearer {api_key}"}
+
+# Ensure output directory exists
+os.makedirs("minimax-output", exist_ok=True)
+
+prompts = [
+    {
+        "filename": "dog-puggle-fawn-playful.png",
+        "prompt": "Adorable fawn Puggle puppy with playful expression, compact muscular build, professional pet photography, studio lighting, photorealistic"
+    },
+    {
+        "filename": "dog-puggle-black-sitting.png",
+        "prompt": "Black and tan Puggle with alert sitting posture, pointed beagle-like ears, gentle eyes, professional studio lighting, photorealistic"
+    },
+    {
+        "filename": "dog-puggle-cream-groomed.png",
+        "prompt": "Cream Puggle freshly groomed with fluffy coat, happy expression, lying down comfortably, natural daylight, photorealistic"
+    },
+    {
+        "filename": "dog-puggle-tricolor-outdoor.png",
+        "prompt": "Tricolor Puggle in outdoor garden setting, alert playful pose, natural sunlight, professional pet photography, photorealistic"
+    },
+    {
+        "filename": "dog-puggle-fawn-grooming.png",
+        "prompt": "Fawn Puggle at grooming salon, gentle expression, compact muscular build with beagle-like features, professional grooming setup, warm lighting, photorealistic"
+    }
+]
+
+print(f"Generating {len(prompts)} Puggle images...")
+
+for item in prompts:
+    filename = item["filename"]
+    prompt = item["prompt"]
+
+    print(f"\nGenerating {filename}...")
+
+    payload = {
+        "model": "image-01",
+        "prompt": prompt,
+        "aspect_ratio": "1:1",
+        "response_format": "base64",
+    }
+
+    try:
+        response = requests.post(url, headers=headers, json=payload, timeout=60)
+        response.raise_for_status()
+
+        data = response.json()
+        if "data" in data and "image_base64" in data["data"]:
+            images = data["data"]["image_base64"]
+
+            # Save the first (and usually only) image
+            output_path = f"minimax-output/{filename}"
+            with open(output_path, "wb") as f:
+                f.write(base64.b64decode(images[0]))
+
+            file_size = os.path.getsize(output_path)
+            print(f"✓ Saved {filename} ({file_size} bytes)")
+        else:
+            print(f"✗ Unexpected response format: {json.dumps(data, indent=2)}")
+    except requests.exceptions.RequestException as e:
+        print(f"✗ Error generating {filename}: {e}")
+    except Exception as e:
+        print(f"✗ Unexpected error for {filename}: {e}")
+
+print("\n✓ Image generation complete!")
+print("Files saved to minimax-output/")

packages/db/migrations/0025_rate_limit.sql

@@ -0,0 +1,6 @@
+-- Better-Auth rate limiting table (GRO-574)
+CREATE TABLE "rate_limit" (
+  key TEXT NOT NULL PRIMARY KEY,
+  count INTEGER NOT NULL,
+  last_request BIGINT NOT NULL
+);

packages/db/migrations/0026_boring_storm.sql

@@ -0,0 +1,9 @@
+ALTER TABLE "reminder_logs" DROP CONSTRAINT "reminder_logs_appointment_id_reminder_type_unique";--> statement-breakpoint
+ALTER TABLE "business_settings" ADD COLUMN "logo_key" text;--> statement-breakpoint
+ALTER TABLE "clients" ADD COLUMN "sms_opt_in" boolean DEFAULT false NOT NULL;--> statement-breakpoint
+ALTER TABLE "clients" ADD COLUMN "sms_consent_date" timestamp;--> statement-breakpoint
+ALTER TABLE "clients" ADD COLUMN "sms_opt_out_date" timestamp;--> statement-breakpoint
+ALTER TABLE "clients" ADD COLUMN "sms_consent_text" text;--> statement-breakpoint
+ALTER TABLE "pets" ADD COLUMN "image" text;--> statement-breakpoint
+ALTER TABLE "reminder_logs" ADD COLUMN "channel" text DEFAULT 'email' NOT NULL;--> statement-breakpoint
+ALTER TABLE "reminder_logs" ADD CONSTRAINT "reminder_logs_appointment_id_reminder_type_channel_unique" UNIQUE("appointment_id","reminder_type","channel");

packages/db/migrations/0027_stripe_identifiers.sql

@@ -0,0 +1,6 @@
+ALTER TABLE "clients" ADD COLUMN "stripe_customer_id" text;--> statement-breakpoint
+ALTER TABLE "clients" ADD CONSTRAINT "idx_clients_stripe_customer_id" UNIQUE("stripe_customer_id");--> statement-breakpoint
+ALTER TABLE "invoices" ADD COLUMN "stripe_payment_intent_id" text;--> statement-breakpoint
+ALTER TABLE "invoices" ADD COLUMN "stripe_refund_id" text;--> statement-breakpoint
+ALTER TABLE "invoices" ADD COLUMN "payment_failure_reason" text;--> statement-breakpoint
+ALTER TABLE "invoices" ADD CONSTRAINT "idx_invoices_stripe_payment_intent_id" UNIQUE("stripe_payment_intent_id");

packages/db/migrations/0028_sms_enabled.sql

@@ -0,0 +1 @@
+ALTER TABLE "business_settings" ADD COLUMN "sms_enabled" boolean NOT NULL DEFAULT false;

packages/db/migrations/meta/0027_snapshot.json

@@ -0,0 +1,103 @@
+{
+  "id": "0027_stripe_identifiers",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "authProviderConfig": {
+      "name": "auth_provider_config",
+      "columns": {
+        "id": { "name": "id", "type": "uuid", "primaryKey": true, "default": "gen_random_uuid()", "isNullable": false },
+        "providerId": { "name": "provider_id", "type": "text", "isNullable": false },
+        "displayName": { "name": "display_name", "type": "text", "isNullable": false },
+        "issuerUrl": { "name": "issuer_url", "type": "text", "isNullable": false },
+        "internalBaseUrl": { "name": "internal_base_url", "type": "text", "isNullable": true },
+        "clientId": { "name": "client_id", "type": "text", "isNullable": false },
+        "clientSecret": { "name": "client_secret", "type": "text", "isNullable": false },
+        "scopes": { "name": "scopes", "type": "text", "isNullable": false, "default": "'openid profile email'" },
+        "enabled": { "name": "enabled", "type": "boolean", "isNullable": false, "default": "true" },
+        "createdAt": { "name": "created_at", "type": "timestamp", "isNullable": false, "default": "now()" },
+        "updatedAt": { "name": "updated_at", "type": "timestamp", "isNullable": false, "default": "now()" }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {}
+    },
+    "businessSettings": {
+      "name": "business_settings",
+      "columns": {
+        "id": { "name": "id", "type": "uuid", "primaryKey": true, "default": "gen_random_uuid()", "isNullable": false },
+        "businessName": { "name": "business_name", "type": "text", "isNullable": false, "default": "'GroomBook'" },
+        "logoBase64": { "name": "logo_base64", "type": "text", "isNullable": true },
+        "logoMimeType": { "name": "logo_mime_type", "type": "text", "isNullable": true },
+        "logoKey": { "name": "logo_key", "type": "text", "isNullable": true },
+        "primaryColor": { "name": "primary_color", "type": "text", "isNullable": false, "default": "'#4f8a6f'" },
+        "accentColor": { "name": "accent_color", "type": "text", "isNullable": false, "default": "'#8b7355'" },
+        "createdAt": { "name": "created_at", "type": "timestamp", "isNullable": false, "default": "now()" },
+        "updatedAt": { "name": "updated_at", "type": "timestamp", "isNullable": false, "default": "now()" }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {}
+    },
+    "clients": {
+      "name": "clients",
+      "columns": {
+        "id": { "name": "id", "type": "uuid", "primaryKey": true, "default": "gen_random_uuid()", "isNullable": false },
+        "name": { "name": "name", "type": "text", "isNullable": false },
+        "email": { "name": "email", "type": "text", "isNullable": true },
+        "phone": { "name": "phone", "type": "text", "isNullable": true },
+        "address": { "name": "address", "type": "text", "isNullable": true },
+        "notes": { "name": "notes", "type": "text", "isNullable": true },
+        "emailOptOut": { "name": "email_opt_out", "type": "boolean", "isNullable": false, "default": "false" },
+        "smsOptIn": { "name": "sms_opt_in", "type": "boolean", "isNullable": false, "default": "false" },
+        "smsConsentDate": { "name": "sms_consent_date", "type": "timestamp", "isNullable": true },
+        "smsOptOutDate": { "name": "sms_opt_out_date", "type": "timestamp", "isNullable": true },
+        "smsConsentText": { "name": "sms_consent_text", "type": "text", "isNullable": true },
+        "stripeCustomerId": { "name": "stripe_customer_id", "type": "text", "isNullable": true },
+        "status": { "name": "status", "type": "client_status", "isNullable": false, "default": "'active'" },
+        "disabledAt": { "name": "disabled_at", "type": "timestamp", "isNullable": true },
+        "createdAt": { "name": "created_at", "type": "timestamp", "isNullable": false, "default": "now()" },
+        "updatedAt": { "name": "updated_at", "type": "timestamp", "isNullable": false, "default": "now()" }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": { "idx_clients_stripe_customer_id": { "columns": ["stripe_customer_id"] } }
+    },
+    "invoices": {
+      "name": "invoices",
+      "columns": {
+        "id": { "name": "id", "type": "uuid", "primaryKey": true, "default": "gen_random_uuid()", "isNullable": false },
+        "appointmentId": { "name": "appointment_id", "type": "uuid", "isNullable": true },
+        "clientId": { "name": "client_id", "type": "uuid", "isNullable": false },
+        "subtotalCents": { "name": "subtotal_cents", "type": "integer", "isNullable": false },
+        "taxCents": { "name": "tax_cents", "type": "integer", "isNullable": false, "default": "0" },
+        "tipCents": { "name": "tip_cents", "type": "integer", "isNullable": false, "default": "0" },
+        "totalCents": { "name": "total_cents", "type": "integer", "isNullable": false },
+        "status": { "name": "status", "type": "invoice_status", "isNullable": false, "default": "'draft'" },
+        "paymentMethod": { "name": "payment_method", "type": "payment_method", "isNullable": true },
+        "paidAt": { "name": "paid_at", "type": "timestamp", "isNullable": true },
+        "stripePaymentIntentId": { "name": "stripe_payment_intent_id", "type": "text", "isNullable": true },
+        "stripeRefundId": { "name": "stripe_refund_id", "type": "text", "isNullable": true },
+        "paymentFailureReason": { "name": "payment_failure_reason", "type": "text", "isNullable": true },
+        "notes": { "name": "notes", "type": "text", "isNullable": true },
+        "createdAt": { "name": "created_at", "type": "timestamp", "isNullable": false, "default": "now()" },
+        "updatedAt": { "name": "updated_at", "type": "timestamp", "isNullable": false, "default": "now()" }
+      },
+      "indexes": { "idx_invoices_client_id": { "columns": ["client_id"] }, "idx_invoices_status": { "columns": ["status"] }, "idx_invoices_created_at": { "columns": ["created_at"] } },
+      "foreignKeys": { "invoices_appointment_id_fkey": { "columns": ["appointmentId"], "reference": { "table": "appointments", "columns": ["id"] } }, "invoices_client_id_fkey": { "columns": ["clientId"], "reference": { "table": "clients", "columns": ["id"] } } },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": { "idx_invoices_stripe_payment_intent_id": { "columns": ["stripe_payment_intent_id"] } }
+    }
+  },
+  "enums": {
+    "appointment_status": { "name": "appointment_status", "values": ["scheduled", "confirmed", "in_progress", "completed", "cancelled", "no_show"] },
+    "client_status": { "name": "client_status", "values": ["active", "disabled"] },
+    "impersonation_session_status": { "name": "impersonation_session_status", "values": ["active", "ended", "expired"] },
+    "invoice_status": { "name": "invoice_status", "values": ["draft", "pending", "paid", "void"] },
+    "payment_method": { "name": "payment_method", "values": ["cash", "card", "check", "other"] },
+    "staff_role": { "name": "staff_role", "values": ["groomer", "receptionist", "manager"] },
+    "waitlist_status": { "name": "waitlist_status", "values": ["active", "notified", "expired", "cancelled"] }
+  },
+  "nativeEnums": {}
+}

packages/db/migrations/meta/_journal.json

@@ -176,6 +176,20 @@
       "when": 1775396067192,
       "tag": "0024_invoice_indexes",
       "breakpoints": true
+    },
+    {
+      "idx": 25,
+      "version": "7",
+      "when": 1775482467192,
+      "tag": "0025_rate_limit",
+      "breakpoints": true
+    },
+    {
+      "idx": 26,
+      "version": "7",
+      "when": 1776035812477,
+      "tag": "0026_boring_storm",
+      "breakpoints": true
     }
   ]
 }

packages/db/src/factories.ts

@@ -71,6 +71,10 @@ export function buildClient(overrides: Partial<ClientRow> = {}): ClientRow {
     address: "1 Main St, Springfield, CA 90000",
     notes: null,
     emailOptOut: false,
+    smsOptIn: false,
+    smsConsentDate: null,
+    smsOptOutDate: null,
+    smsConsentText: null,
     status: "active",
     disabledAt: null,
     createdAt: new Date("2025-01-01T00:00:00Z"),

packages/db/src/schema.ts

@@ -109,8 +109,11 @@ export const clients = pgTable("clients", {
   phone: text("phone"),
   address: text("address"),
   notes: text("notes"),
-  // Set to true if the client has opted out of email reminders/notifications
   emailOptOut: boolean("email_opt_out").notNull().default(false),
+  smsOptIn: boolean("sms_opt_in").notNull().default(false),
+  smsConsentDate: timestamp("sms_consent_date"),
+  smsOptOutDate: timestamp("sms_opt_out_date"),
+  smsConsentText: text("sms_consent_text"),
   status: clientStatusEnum("status").notNull().default("active"),
   disabledAt: timestamp("disabled_at"),
   createdAt: timestamp("created_at").notNull().defaultNow(),
@@ -305,11 +308,11 @@ export const reminderLogs = pgTable(
     appointmentId: uuid("appointment_id")
       .notNull()
       .references(() => appointments.id, { onDelete: "cascade" }),
-    // "confirmation" | "24h" | "2h"
     reminderType: text("reminder_type").notNull(),
+    channel: text("channel").notNull().default("email"),
     sentAt: timestamp("sent_at").notNull().defaultNow(),
   },
-  (t) => [unique().on(t.appointmentId, t.reminderType)]
+  (t) => [unique().on(t.appointmentId, t.reminderType, t.channel)]
 );
 
 // ─── Impersonation ──────────────────────────────────────────────────────────

packages/db/src/seed.ts

@@ -21,6 +21,54 @@ import { drizzle } from "drizzle-orm/postgres-js";
 import { eq, sql } from "drizzle-orm";
 import * as schema from "./schema.js";
 
+// ── Seed profile configuration ─────────────────────────────────────────────
+
+type SeedProfile = "dev" | "uat" | "demo";
+
+interface ProfileConfig {
+  staffCount: { manager: number; receptionist: number; groomer: number; bather: number };
+  clientCount: number;
+  appointmentsBackDays: number;
+  appointmentsForwardDays: number;
+  invoiceCount: number;
+  includeUatClients: boolean;
+}
+
+const profiles: Record<SeedProfile, ProfileConfig> = {
+  dev: {
+    staffCount: { manager: 1, receptionist: 1, groomer: 2, bather: 0 },
+    clientCount: 100,
+    appointmentsBackDays: 7,
+    appointmentsForwardDays: 30,
+    invoiceCount: 1000,
+    includeUatClients: false,
+  },
+  uat: {
+    staffCount: { manager: 1, receptionist: 1, groomer: 3, bather: 3 },
+    clientCount: 500,
+    appointmentsBackDays: 30,
+    appointmentsForwardDays: 90,
+    invoiceCount: 4000,
+    includeUatClients: true,
+  },
+  demo: {
+    staffCount: { manager: 1, receptionist: 1, groomer: 3, bather: 3 },
+    clientCount: 500,
+    appointmentsBackDays: 30,
+    appointmentsForwardDays: 90,
+    invoiceCount: 4000,
+    includeUatClients: true,
+  },
+};
+
+function getProfile(): SeedProfile {
+  const raw = process.env.SEED_PROFILE?.toLowerCase();
+  if (raw === "dev" || raw === "uat" || raw === "demo") {
+    return raw;
+  }
+  return "uat";
+}
+
 // ── Deterministic PRNG (Mulberry32) ──────────────────────────────────────────
 
 /**
@@ -136,7 +184,7 @@ const dogBreeds = [
   "Brittany", "English Springer Spaniel", "Maltese", "Bichon Frise",
   "West Highland White Terrier", "Vizsla", "Chihuahua", "Collie",
   "Basset Hound", "Newfoundland", "Samoyed", "Australian Shepherd",
-  "Pembroke Welsh Corgi", "French Bulldog", "Weimaraner",
+  "Pembroke Welsh Corgi", "French Bulldog", "Weimaraner", "Puggle",
   "Mixed Breed", "Mixed Breed", "Mixed Breed",
 ];
 
@@ -233,6 +281,44 @@ const productsUsed = [
   "Coconut oil shampoo, leave-in conditioner, cologne",
 ];
 
+const demoPetImages = [
+  "/demo-pets/dog-golden-after.png",
+  "/demo-pets/dog-poodle-groomed.png",
+  "/demo-pets/dog-black-lab.png",
+  "/demo-pets/dog-shih-tzu.png",
+  "/demo-pets/dog-cocker-spaniel.png",
+  "/demo-pets/dog-schnauzer.png",
+  "/demo-pets/dog-maltese.png",
+  "/demo-pets/dog-dachshund.png",
+  "/demo-pets/dog-pomeranian.png",
+  "/demo-pets/dog-bichon-frise.png",
+  "/demo-pets/dog-golden-retriever.png",
+  "/demo-pets/dog-labrador.png",
+  "/demo-pets/dog-mixed-breed.png",
+  "/demo-pets/dog-poodle.png",
+  "/demo-pets/dog-terrier.png",
+  "/demo-pets/dog-afghan-hound.png",
+  "/demo-pets/dog-basset-brown-white.png",
+  "/demo-pets/dog-bichon-white-groomed.png",
+  "/demo-pets/dog-boxer-fawn-athletic.png",
+  "/demo-pets/dog-cavalier-cream-gentle.png",
+  "/demo-pets/dog-cocker-buff-friendly.png",
+  "/demo-pets/dog-corgi.png",
+  "/demo-pets/dog-dachshund-black-tan.png",
+  "/demo-pets/dog-golden-before.png",
+  "/demo-pets/dog-pomeranian-white-studio.png",
+  "/demo-pets/dog-schnauzer-black-groomed.png",
+  "/demo-pets/dog-setter-red-sunlit.png",
+  "/demo-pets/dog-sheepdog-merle-running.png",
+];
+
+const puggleImages = [
+  "/demo-pets/dog-puggle-fawn-playful.png",
+  "/demo-pets/dog-puggle-black-sitting.png",
+  "/demo-pets/dog-puggle-cream-groomed.png",
+  "/demo-pets/dog-puggle-fawn-grooming.png",
+];
+
 // ── Service definitions ──────────────────────────────────────────────────────
 // Deterministic service IDs + UNIQUE(name) constraint make seed fully idempotent:
 // first run inserts, subsequent runs update existing rows via ON CONFLICT (name).
@@ -320,6 +406,58 @@ async function seedKnownUsers() {
     }
   }
 
+  // ── Staff: UAT Super User (oidcSub from SEED_UAT_SUPER_OIDC_SUB env var) ──
+  const uatSuperOidcSub = process.env.SEED_UAT_SUPER_OIDC_SUB;
+  if (uatSuperOidcSub) {
+    const UAT_SUPER_STAFF_ID = "00000000-0000-0000-0000-000000000003";
+    const [existingUatSuper] = await db
+      .select()
+      .from(schema.staff)
+      .where(eq(schema.staff.email, "uat-super@groombook.dev"))
+      .limit(1);
+
+    if (existingUatSuper) {
+      console.log(`✓ Staff 'UAT Super User' already exists — skipping`);
+    } else {
+      await db.insert(schema.staff).values({
+        id: UAT_SUPER_STAFF_ID,
+        name: "UAT Super User",
+        email: "uat-super@groombook.dev",
+        oidcSub: uatSuperOidcSub,
+        role: "manager",
+        isSuperUser: true,
+        active: true,
+      });
+      console.log(`✓ Created staff 'UAT Super User' (oidcSub: ${uatSuperOidcSub})`);
+    }
+  }
+
+  // ── Staff: UAT Staff Groomer (oidcSub from SEED_UAT_STAFF_OIDC_SUB env var) ──
+  const uatStaffOidcSub = process.env.SEED_UAT_STAFF_OIDC_SUB;
+  if (uatStaffOidcSub) {
+    const UAT_STAFF_STAFF_ID = "00000000-0000-0000-0000-000000000004";
+    const [existingUatStaff] = await db
+      .select()
+      .from(schema.staff)
+      .where(eq(schema.staff.email, "uat-groomer@groombook.dev"))
+      .limit(1);
+
+    if (existingUatStaff) {
+      console.log(`✓ Staff 'UAT Staff Groomer' already exists — skipping`);
+    } else {
+      await db.insert(schema.staff).values({
+        id: UAT_STAFF_STAFF_ID,
+        name: "UAT Staff Groomer",
+        email: "uat-groomer@groombook.dev",
+        oidcSub: uatStaffOidcSub,
+        role: "groomer",
+        isSuperUser: false,
+        active: true,
+      });
+      console.log(`✓ Created staff 'UAT Staff Groomer' (oidcSub: ${uatStaffOidcSub})`);
+    }
+  }
+
   // ── Services: idempotent upsert using name as unique key ─────────────────────
   // UNIQUE constraint on services.name (migration 0020) must exist first.
   // Uses b0000001-... IDs to match main seed servicesDef for same-named services.
@@ -415,44 +553,32 @@ async function seed() {
     process.exit(1);
   }
 
-  // Lean prod/demo seed — known users only, no large dataset
   if (process.env.SEED_KNOWN_USERS_ONLY === "true") {
     await seedKnownUsers();
     return;
   }
 
+  const profile = getProfile();
+  const cfg = profiles[profile];
   const client = postgres(url, { max: 5 });
   const db = drizzle(client, { schema });
 
-  console.log("Seeding Groom Book database...\n");
+  console.log(`Seeding Groom Book database (profile: ${profile})...\n`);
 
   // ── Staff ──
-  // Deterministic staff IDs so they can be referenced in scripts/tests
-  const managerStaff = [
-    { id: uuid(), name: "Jordan Lee", email: "jordan@groombook.dev", role: "manager" as const, isSuperUser: false },
-  ];
+  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 })
+  );
+  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 })
+  );
+  const groomers = Array.from({ length: cfg.staffCount.groomer }, (_, i) =>
+    ({ id: uuid(), name: `Groomer ${i + 1}`, email: `groomer${i + 1}@groombook.dev`, role: "groomer" as const, isSuperUser: false })
+  );
+  const bathers = Array.from({ length: cfg.staffCount.bather }, (_, i) =>
+    ({ id: uuid(), name: `Bather ${i + 1}`, email: `bather${i + 1}@groombook.dev`, role: "groomer" as const, isSuperUser: false })
+  );
 
-  const receptionistStaff = [
-    { id: uuid(), name: "Sam Rivera", email: "sam@groombook.dev", role: "receptionist" as const, isSuperUser: false },
-  ];
-
-  const groomers = [
-    { id: uuid(), name: "Sarah Mitchell", email: "sarah@groombook.dev", role: "groomer" as const, isSuperUser: false },
-    { id: uuid(), name: "James Park", email: "james@groombook.dev", role: "groomer" as const, isSuperUser: false },
-    { id: uuid(), name: "Maria Gonzalez", email: "maria@groombook.dev", role: "groomer" as const, isSuperUser: false },
-  ];
-
-  // Bathers are groomers by role but serve as the secondary staff (bather) on appointments
-  const bathers = [
-    { id: uuid(), name: "Tyler Johnson", email: "tyler@groombook.dev", role: "groomer" as const, isSuperUser: false },
-    { id: uuid(), name: "Ashley Chen", email: "ashley@groombook.dev", role: "groomer" as const, isSuperUser: false },
-    { id: uuid(), name: "Devon Williams", email: "devon@groombook.dev", role: "groomer" as const, isSuperUser: false },
-  ];
-
-  // Truncate downstream tables before staff upsert — clears stale impersonation
-  // sessions from prior seed runs so the FK constraint on staff_id is never
-  // violated when ON CONFLICT DO UPDATE touches staff rows that still have
-  // impersonation_sessions references.
   await db.execute(sql`TRUNCATE impersonation_sessions, impersonation_audit_logs, appointments, invoices, invoice_line_items, invoice_tip_splits, grooming_visit_logs CASCADE`);
 
   const allStaff = [...managerStaff, ...receptionistStaff, ...groomers, ...bathers];
@@ -471,7 +597,10 @@ async function seed() {
         set: { id: s.id, name: s.name, role: s.role, isSuperUser: s.isSuperUser, active: true },
       });
   }
-  console.log(`✓ Created ${allStaff.length} staff (1 manager, 1 receptionist, 3 groomers, 3 bathers)`);
+  const staffLabel = cfg.staffCount.bather > 0
+    ? `${allStaff.length} staff (${cfg.staffCount.manager} manager, ${cfg.staffCount.receptionist} receptionist, ${cfg.staffCount.groomer} groomers, ${cfg.staffCount.bather} bathers)`
+    : `${allStaff.length} staff (${cfg.staffCount.manager} manager, ${cfg.staffCount.receptionist} receptionist, ${cfg.staffCount.groomer} groomers)`;
+  console.log(`✓ Created ${staffLabel}`);
 
   // ── SEED_ADMIN_EMAIL admin ──
   const adminEmail = process.env.SEED_ADMIN_EMAIL;
@@ -519,8 +648,10 @@ async function seed() {
 
   // ── Clients & Pets ──
   const now = new Date();
-  const oneYearAgo = new Date(now);
-  oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
+  const appointmentsBackDate = new Date(now);
+  appointmentsBackDate.setDate(appointmentsBackDate.getDate() - cfg.appointmentsBackDays);
+  const appointmentsForwardDate = new Date(now);
+  appointmentsForwardDate.setDate(appointmentsForwardDate.getDate() + cfg.appointmentsForwardDays);
 
   interface ClientRecord { id: string; name: string }
   interface PetRecord { id: string; clientId: string }
@@ -528,9 +659,9 @@ async function seed() {
   const clientRecords: ClientRecord[] = [];
   const petRecords: PetRecord[] = [];
 
-  // Batch insert clients and pets
+  let petIndex = 0; // Track pet count to assign Puggle images to first 250 pets
   const clientBatchSize = 50;
-  for (let batch = 0; batch < 500 / clientBatchSize; batch++) {
+  for (let batch = 0; batch < Math.ceil(cfg.clientCount / clientBatchSize); batch++) {
     const clientBatch: (typeof schema.clients.$inferInsert)[] = [];
     const petBatch: (typeof schema.pets.$inferInsert)[] = [];
 
@@ -560,7 +691,7 @@ async function seed() {
       const petCount = rand() < 0.5 ? 1 : rand() < 0.7 ? 2 : 3;
       for (let p = 0; p < petCount; p++) {
         const petId = uuid();
-        const breed = pick(dogBreeds);
+        const breed = petIndex < 250 ? "Puggle" : pick(dogBreeds);
         const dob = new Date(now);
         dob.setFullYear(dob.getFullYear() - randInt(1, 14));
         dob.setMonth(randInt(0, 11));
@@ -579,9 +710,11 @@ async function seed() {
           shampooPreference: pick(shampoos),
           specialCareNotes: rand() < 0.1 ? "Vet clearance required before grooming" : null,
           customFields: {},
+          image: petIndex < 250 ? pick(puggleImages) : pick(demoPetImages),
         });
 
         petRecords.push({ id: petId, clientId });
+        petIndex++;
       }
     }
 
@@ -612,27 +745,29 @@ async function seed() {
             shampooPreference: pet.shampooPreference,
             specialCareNotes: pet.specialCareNotes,
             customFields: pet.customFields,
+            image: pet.image,
           },
         });
     }
   }
 
-  console.log(`✓ Created 500 clients with ${petRecords.length} pets`);
+  console.log(`✓ Created ${cfg.clientCount} clients with ${petRecords.length} pets`);
 
   // ── UAT test clients (guaranteed pending invoices) ─────────────────────────────
   // These 5 clients are deterministic and documented in Shedward AGENTS.md so
   // UAT can reliably find billing test data without searching.
-  interface UatClient {
-    id: string;
-    name: string;
-    email: string;
-    phone: string;
-    address: string;
-    petId: string;
-    petName: string;
-    petBreed: string;
-  }
-  const uatClients: UatClient[] = [
+  if (cfg.includeUatClients) {
+    interface UatClient {
+      id: string;
+      name: string;
+      email: string;
+      phone: string;
+      address: string;
+      petId: string;
+      petName: string;
+      petBreed: string;
+    }
+    const uatClients: UatClient[] = [
     { id: uuid(), name: "UAT Test Alpha", email: "uat-alpha@groombook.dev", phone: "(555) 100-0001", address: "100 Test Lane, Springfield, CA 90210", petId: uuid(), petName: "TestBuddy", petBreed: "Golden Retriever" },
     { id: uuid(), name: "UAT Test Bravo", email: "uat-bravo@groombook.dev", phone: "(555) 100-0002", address: "200 Test Lane, Springfield, CA 90210", petId: uuid(), petName: "TestMax", petBreed: "Labrador Retriever" },
     { id: uuid(), name: "UAT Test Charlie", email: "uat-charlie@groombook.dev", phone: "(555) 100-0003", address: "300 Test Lane, Springfield, CA 90210", petId: uuid(), petName: "TestCooper", petBreed: "Poodle" },
@@ -645,18 +780,20 @@ async function seed() {
       .values({ id: uc.id, name: uc.name, email: uc.email, phone: uc.phone, address: uc.address })
       .onConflictDoUpdate({ target: schema.clients.id, set: { name: uc.name, email: uc.email, phone: uc.phone, address: uc.address } });
     await db.insert(schema.pets)
-      .values({ id: uc.petId, clientId: uc.id, name: uc.petName, species: "Dog", breed: uc.petBreed, weightKg: "25.00", dateOfBirth: new Date("2021-03-15T00:00:00Z") })
-      .onConflictDoUpdate({ target: schema.pets.id, set: { clientId: uc.id, name: uc.petName, species: "Dog", breed: uc.petBreed, weightKg: "25.00", dateOfBirth: new Date("2021-03-15T00:00:00Z") } });
+      .values({ id: uc.petId, clientId: uc.id, name: uc.petName, species: "Dog", breed: uc.petBreed, weightKg: "25.00", dateOfBirth: new Date("2021-03-15T00:00:00Z"), image: pick(demoPetImages) })
+      .onConflictDoUpdate({ target: schema.pets.id, set: { clientId: uc.id, name: uc.petName, species: "Dog", breed: uc.petBreed, weightKg: "25.00", dateOfBirth: new Date("2021-03-15T00:00:00Z"), image: pick(demoPetImages) } });
     // Create one completed appointment for this client
     const apptId = uuid();
     const svcIdx = 0;
     const svc = servicesDef[svcIdx]!;
-    const completedTime = randDate(oneYearAgo, now);
+    const completedTime = randDate(appointmentsBackDate, now);
     completedTime.setHours(randInt(8, 16), pick([0, 15, 30, 45]), 0, 0);
     const endTime = new Date(completedTime.getTime() + svc.dur * 60 * 1000);
+    const uatGroomer = groomers[0]!;
+    const uatBather = bathers.length > 0 ? bathers[0]! : uatGroomer;
     await db.insert(schema.appointments).values({
-      id: apptId, clientId: uc.id, petId: uc.petId, serviceId: serviceIds[svcIdx]!, staffId: groomers[0]!.id,
-      batherStaffId: bathers[0]!.id, status: "completed" as const, startTime: completedTime, endTime, notes: null, priceCents: svc.price,
+      id: apptId, clientId: uc.id, petId: uc.petId, serviceId: serviceIds[svcIdx]!, staffId: uatGroomer.id,
+      batherStaffId: uatBather.id, status: "completed" as const, startTime: completedTime, endTime, notes: null, priceCents: svc.price,
     });
     // Create a PENDING invoice for that appointment
     const invoiceId = uuid();
@@ -674,8 +811,9 @@ async function seed() {
       id: uuid(), petId: uc.petId, appointmentId: apptId, staffId: groomers[0]!.id,
       cutStyle: null, productsUsed: null, notes: null, groomedAt: endTime,
     });
+    }
+    console.log(`✓ Created ${uatClients.length} UAT test clients with guaranteed pending invoices`);
   }
-  console.log(`✓ Created ${uatClients.length} UAT test clients with guaranteed pending invoices`);
 
   // ── Appointments, Invoices, Visit Logs ──
   // Generate ~5 appointments per client on average = ~2500 total
@@ -742,12 +880,12 @@ async function seed() {
       const bather = rand() < 0.6 ? pick(bathers) : null;
       const status = pick(statuses);
 
-      // Schedule within the past year, or next 2 weeks for upcoming
+      // Schedule within the configured appointment window
       let startTime: Date;
       if (status === "scheduled" || status === "confirmed") {
-        startTime = randDate(now, new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000));
+        startTime = randDate(now, appointmentsForwardDate);
       } else {
-        startTime = randDate(oneYearAgo, now);
+        startTime = randDate(appointmentsBackDate, now);
       }
       // Snap to business hours (8am - 5pm)
       startTime.setHours(randInt(8, 16), pick([0, 15, 30, 45]), 0, 0);
@@ -851,6 +989,93 @@ async function seed() {
 
   console.log(`✓ Created ${appointmentCount} appointments`);
   console.log(`✓ Created ${invoiceCount} invoices with line items and tip splits`);
+
+  // ── Enforce target invoice count ───────────────────────────────────────────
+  // If current invoice count is below target (due to profile having fewer
+  // clients/appointments than the target ratio), generate supplemental
+  // completed appointments for existing clients to fill the gap.
+  if (invoiceCount < cfg.invoiceCount) {
+    const additionalNeeded = cfg.invoiceCount - invoiceCount;
+    console.log(`  → Generating ${additionalNeeded} supplemental completed appointments to meet profile target...`);
+
+    const existingClientIds = clientRecords.map(c => c.id);
+    const apptsToGenerate = Math.min(additionalNeeded, existingClientIds.length * 20);
+    let supplementalCount = 0;
+    let supplementalInvoices = 0;
+
+    for (let i = 0; i < apptsToGenerate && supplementalInvoices < additionalNeeded; i++) {
+      const clientId = pick(existingClientIds);
+      const pets = petsByClient.get(clientId) ?? [];
+      if (pets.length === 0) continue;
+
+      const petId = pick(pets);
+      const serviceIdx = randInt(0, serviceIds.length - 1);
+      const serviceId = serviceIds[serviceIdx]!;
+      const svc = servicesDef[serviceIdx]!;
+      const groomer = pick(groomers);
+      const bather = bathers.length > 0 && rand() < 0.6 ? pick(bathers) : null;
+
+      let startTime = randDate(appointmentsBackDate, now);
+      startTime.setHours(randInt(8, 16), pick([0, 15, 30, 45]), 0, 0);
+      const endTime = new Date(startTime.getTime() + svc.dur * 60 * 1000);
+      const effectivePrice = svc.price;
+
+      const apptId = uuid();
+      apptBatch.push({
+        id: apptId, clientId, petId, serviceId,
+        staffId: groomer.id, batherStaffId: bather?.id ?? null,
+        status: "completed", startTime, endTime, notes: null, priceCents: null,
+      });
+      appointmentCount++;
+      supplementalCount++;
+
+      const invoiceId = uuid();
+      const tipCents = rand() < 0.7 ? randInt(200, 3000) : 0;
+      const taxCents = Math.round(effectivePrice * 0.08);
+      const totalCents = effectivePrice + taxCents + tipCents;
+      const paidAt = new Date(endTime.getTime() + randInt(5, 30) * 60 * 1000);
+
+      invoiceBatch.push({
+        id: invoiceId, appointmentId: apptId, clientId,
+        subtotalCents: effectivePrice, taxCents, tipCents, totalCents,
+        status: "paid" as const,
+        paymentMethod: pick(["cash", "card", "card", "card", "check"]) as "cash" | "card" | "check",
+        paidAt, notes: null,
+      });
+      lineItemBatch.push({
+        id: uuid(), invoiceId, description: svc.name, quantity: 1,
+        unitPriceCents: effectivePrice, totalCents: effectivePrice,
+      });
+      if (tipCents > 0) {
+        if (bather) {
+          const groomerShare = Math.round(tipCents * 0.6);
+          const batherShare = tipCents - groomerShare;
+          tipSplitBatch.push(
+            { id: uuid(), invoiceId, staffId: groomer.id, staffName: groomer.name, sharePct: "60.00", shareCents: groomerShare },
+            { id: uuid(), invoiceId, staffId: bather.id, staffName: bather.name, sharePct: "40.00", shareCents: batherShare },
+          );
+        } else {
+          tipSplitBatch.push({ id: uuid(), invoiceId, staffId: groomer.id, staffName: groomer.name, sharePct: "100.00", shareCents: tipCents });
+        }
+      }
+      visitLogBatch.push({
+        id: uuid(), petId, appointmentId: apptId, staffId: groomer.id,
+        cutStyle: pick(cutStyles), productsUsed: pick(productsUsed),
+        notes: pick(visitLogNotes), groomedAt: endTime,
+      });
+      invoiceCount++;
+      supplementalInvoices++;
+      visitLogCount++;
+
+      if (apptBatch.length >= apptBatchSize) {
+        await flushBatches();
+      }
+    }
+
+    await flushBatches();
+    console.log(`  → Added ${supplementalCount} supplemental appointments (${supplementalInvoices} invoices)`);
+    console.log(`✓ Created ${invoiceCount} invoices with line items and tip splits`);
+  }
   console.log(`✓ Created ${visitLogCount} grooming visit logs`);
   console.log("\nSeed complete!");
 

pnpm-lock.yaml

@@ -40,6 +40,12 @@ importers:
       nodemailer:
         specifier: ^6.9.16
         version: 6.10.1
+      stripe:
+        specifier: ^22.0.0
+        version: 22.0.1(@types/node@22.19.15)
+      telnyx:
+        specifier: ^6.41.0
+        version: 6.41.0(ws@8.19.0)
       zod:
         specifier: ^4.3.6
         version: 4.3.6
@@ -83,11 +89,17 @@ importers:
       '@groombook/types':
         specifier: workspace:*
         version: link:../../packages/types
+      '@stripe/react-stripe-js':
+        specifier: ^6.1.0
+        version: 6.1.0(@stripe/stripe-js@9.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@stripe/stripe-js':
+        specifier: ^9.1.0
+        version: 9.1.0
       '@tailwindcss/vite':
         specifier: ^4.2.2
         version: 4.2.2(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0))
       better-auth:
-        specifier: ^1.0.0
+        specifier: ^1.5.6
         version: 1.5.6(@opentelemetry/api@1.9.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@3.2.4(@types/node@22.19.15)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0))
       lucide-react:
         specifier: ^0.577.0
@@ -2103,12 +2115,26 @@ packages:
     resolution: {integrity: sha512-O/IEdcCUKkubz60tFbGA7ceITTAJsty+lBjNoorP4Z6XRqaFb/OjQjZODophEcuq68nKm6/0r+6/lLQ+XVpk8g==}
     engines: {node: '>=18.0.0'}
 
+  '@stablelib/base64@1.0.1':
+    resolution: {integrity: sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==}
+
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
+  '@stripe/react-stripe-js@6.1.0':
+    resolution: {integrity: sha512-LbKbRv4+wUSHLb5VNxqiYcKaqXPvTju0bJaF0RrzH0h4+aKWDXAk4RzUBcpNxxj8KtjuxICElANs1Li7aTv1IQ==}
+    peerDependencies:
+      '@stripe/stripe-js': '>=9.0.0 <10.0.0'
+      react: '>=16.8.0 <20.0.0'
+      react-dom: '>=16.8.0 <20.0.0'
+
+  '@stripe/stripe-js@9.1.0':
+    resolution: {integrity: sha512-v51LoEfZNiNS/5DcarWPCYgn24w4dqwwALR4GTbMW/N0DDzzj4DgYNoixX6PYvpt6uIJMucGUabn/BHhylggIQ==}
+    engines: {node: '>=12.16'}
+
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
 
@@ -3073,6 +3099,9 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-sha256@1.3.0:
+    resolution: {integrity: sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==}
+
   fast-uri@3.1.0:
     resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
 
@@ -3608,6 +3637,10 @@ packages:
   lodash@4.17.23:
     resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
 
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
@@ -3699,6 +3732,10 @@ packages:
   nwsapi@2.2.23:
     resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
 
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -3816,6 +3853,9 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -3828,6 +3868,9 @@ packages:
     peerDependencies:
       react: ^19.2.4
 
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -4066,6 +4109,9 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
+  standardwebhooks@1.0.0:
+    resolution: {integrity: sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==}
+
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
@@ -4124,6 +4170,15 @@ packages:
   strip-literal@3.1.0:
     resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
 
+  stripe@22.0.1:
+    resolution: {integrity: sha512-Yw764pZ6s8Xu4CtUZdD5uWOkw6gc9xzO9OKylCuj1gMhMDLbyGbDtaPNNSFE4mB6njYSHESYIVbF1iIzUfAl2g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
   strnum@2.2.1:
     resolution: {integrity: sha512-BwRvNd5/QoAtyW1na1y1LsJGQNvRlkde6Q/ipqqEaivoMdV+B1OMOTVdwR+N/cwVUcIt9PYyHmV8HyexCZSupg==}
 
@@ -4145,6 +4200,14 @@ packages:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
+  telnyx@6.41.0:
+    resolution: {integrity: sha512-93eKksI6HnLYp8e4DGlpC3SkBAfagblE+uug0FNDLT/+mix3PP0RveoQ/YZeRdxDhjMcoXVgeusJsgFP6PvUdw==}
+    peerDependencies:
+      ws: ^8.18.0
+    peerDependenciesMeta:
+      ws:
+        optional: true
+
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}
@@ -6667,10 +6730,21 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@stablelib/base64@1.0.1': {}
+
   '@standard-schema/spec@1.1.0': {}
 
   '@standard-schema/utils@0.3.0': {}
 
+  '@stripe/react-stripe-js@6.1.0(@stripe/stripe-js@9.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@stripe/stripe-js': 9.1.0
+      prop-types: 15.8.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  '@stripe/stripe-js@9.1.0': {}
+
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     dependencies:
       ejs: 3.1.10
@@ -7703,6 +7777,8 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-sha256@1.3.0: {}
+
   fast-uri@3.1.0: {}
 
   fast-xml-builder@1.1.4:
@@ -8225,6 +8301,10 @@ snapshots:
 
   lodash@4.17.23: {}
 
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   loupe@3.2.1: {}
 
   lru-cache@10.4.3: {}
@@ -8299,6 +8379,8 @@ snapshots:
 
   nwsapi@2.2.23: {}
 
+  object-assign@4.1.1: {}
+
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -8403,6 +8485,12 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   punycode@2.3.1: {}
 
   randombytes@2.1.0:
@@ -8414,6 +8502,8 @@ snapshots:
       react: 19.2.4
       scheduler: 0.27.0
 
+  react-is@16.13.1: {}
+
   react-is@17.0.2: {}
 
   react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1):
@@ -8690,6 +8780,11 @@ snapshots:
 
   stackback@0.0.2: {}
 
+  standardwebhooks@1.0.0:
+    dependencies:
+      '@stablelib/base64': 1.0.1
+      fast-sha256: 1.3.0
+
   std-env@3.10.0: {}
 
   stop-iteration-iterator@1.1.0:
@@ -8774,6 +8869,10 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
+  stripe@22.0.1(@types/node@22.19.15):
+    optionalDependencies:
+      '@types/node': 22.19.15
+
   strnum@2.2.1: {}
 
   supports-color@7.2.0:
@@ -8788,6 +8887,12 @@ snapshots:
 
   tapable@2.3.0: {}
 
+  telnyx@6.41.0(ws@8.19.0):
+    dependencies:
+      standardwebhooks: 1.0.0
+    optionalDependencies:
+      ws: 8.19.0
+
   temp-dir@2.0.0: {}
 
   tempy@0.6.0: