Added Payments feature

X-Lovable-Edit-ID: edt-cebba5a4-1791-42e5-b708-289b16ad6ec7 Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-18 17:52:37 +00:00
parent d566d0df8f 97bbdb0222
commit 82d65728e8
10 changed files with 1022 additions and 0 deletions
@@ -81,6 +81,7 @@
    "react-resizable-panels": "^4.6.5",
    "recharts": "^2.15.4",
    "sonner": "^2.0.7",
+    "stripe": "^17",
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.2.1",
    "tw-animate-css": "^1.3.4",
@@ -22,6 +22,7 @@ import {
  UserPlus,
  User as UserIcon,
  Inbox as InboxIcon,
+  CreditCard,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { ReactNode } from "react";
@@ -50,6 +51,7 @@ const NAV: NavItem[] = [
  { to: "/inbox", label: "Inbox", icon: InboxIcon },
  { to: "/invoices", label: "Invoices", icon: Receipt },
  { to: "/messages", label: "Messages", icon: MessageSquare },
+  { to: "/payments", label: "Payments", icon: CreditCard },
  { to: "/documents", label: "Pleadings", icon: FolderOpen },
  { to: "/settings", label: "Settings", icon: SettingsIcon },
  { to: "/status", label: "Status Updates", icon: Activity },
@@ -2327,6 +2327,110 @@ export type Database = {
          },
        ]
      }
+      payment_requests: {
+        Row: {
+          base_amount_cents: number
+          case_id: string | null
+          client_id: string | null
+          collection_id: string | null
+          created_at: string
+          created_by: string | null
+          currency: string
+          description: string | null
+          email_sent_at: string | null
+          fee_amount_cents: number
+          homeowner_id: string | null
+          id: string
+          notes: string | null
+          paid_at: string | null
+          recipient_email: string | null
+          recipient_name: string
+          status: string
+          stripe_checkout_url: string | null
+          stripe_payment_intent_id: string | null
+          stripe_session_id: string | null
+          total_amount_cents: number
+          updated_at: string
+        }
+        Insert: {
+          base_amount_cents: number
+          case_id?: string | null
+          client_id?: string | null
+          collection_id?: string | null
+          created_at?: string
+          created_by?: string | null
+          currency?: string
+          description?: string | null
+          email_sent_at?: string | null
+          fee_amount_cents?: number
+          homeowner_id?: string | null
+          id?: string
+          notes?: string | null
+          paid_at?: string | null
+          recipient_email?: string | null
+          recipient_name: string
+          status?: string
+          stripe_checkout_url?: string | null
+          stripe_payment_intent_id?: string | null
+          stripe_session_id?: string | null
+          total_amount_cents: number
+          updated_at?: string
+        }
+        Update: {
+          base_amount_cents?: number
+          case_id?: string | null
+          client_id?: string | null
+          collection_id?: string | null
+          created_at?: string
+          created_by?: string | null
+          currency?: string
+          description?: string | null
+          email_sent_at?: string | null
+          fee_amount_cents?: number
+          homeowner_id?: string | null
+          id?: string
+          notes?: string | null
+          paid_at?: string | null
+          recipient_email?: string | null
+          recipient_name?: string
+          status?: string
+          stripe_checkout_url?: string | null
+          stripe_payment_intent_id?: string | null
+          stripe_session_id?: string | null
+          total_amount_cents?: number
+          updated_at?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "payment_requests_case_id_fkey"
+            columns: ["case_id"]
+            isOneToOne: false
+            referencedRelation: "cases"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "payment_requests_client_id_fkey"
+            columns: ["client_id"]
+            isOneToOne: false
+            referencedRelation: "clients"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "payment_requests_collection_id_fkey"
+            columns: ["collection_id"]
+            isOneToOne: false
+            referencedRelation: "collections"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "payment_requests_homeowner_id_fkey"
+            columns: ["homeowner_id"]
+            isOneToOne: false
+            referencedRelation: "homeowners"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
      profiles: {
        Row: {
          avatar_url: string | null
@@ -0,0 +1,186 @@
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHost } from "@tanstack/react-start/server";
+import { requireSupabaseAuth } from "@/integrations/supabase/auth-middleware";
+import { supabaseAdmin } from "@/integrations/supabase/client.server";
+import Stripe from "stripe";
+
+// Stripe US card rate: 2.9% + $0.30. Surcharge so homeowner covers fees.
+// To net base amount B from total T after fees: T = (B + 0.30) / (1 - 0.029)
+function calcSurcharge(baseCents: number) {
+  const base = baseCents / 100;
+  const total = (base + 0.3) / (1 - 0.029);
+  const totalCents = Math.ceil(total * 100);
+  return { totalCents, feeCents: totalCents - baseCents };
+}
+
+function getStripe() {
+  const key = process.env.STRIPE_SECRET_KEY;
+  if (!key) throw new Error("STRIPE_SECRET_KEY is not configured");
+  return new Stripe(key);
+}
+
+function getOrigin() {
+  try {
+    const host = getRequestHost();
+    const proto = host?.includes("localhost") ? "http" : "https";
+    return `${proto}://${host}`;
+  } catch {
+    return "";
+  }
+}
+
+export const createPaymentRequest = createServerFn({ method: "POST" })
+  .middleware([requireSupabaseAuth])
+  .inputValidator(
+    (data: {
+      recipient_name: string;
+      recipient_email?: string;
+      description?: string;
+      base_amount_cents: number;
+      homeowner_id?: string;
+      collection_id?: string;
+      case_id?: string;
+      client_id?: string;
+      notes?: string;
+    }) => {
+      if (!data.recipient_name?.trim()) throw new Error("Recipient name required");
+      if (!data.base_amount_cents || data.base_amount_cents < 100)
+        throw new Error("Amount must be at least $1.00");
+      return data;
+    },
+  )
+  .handler(async ({ data, context }) => {
+    const { userId } = context;
+    const stripe = getStripe();
+    const { totalCents, feeCents } = calcSurcharge(data.base_amount_cents);
+    const origin = getOrigin();
+
+    // Insert pending row first
+    const { data: row, error: insErr } = await supabaseAdmin
+      .from("payment_requests")
+      .insert({
+        recipient_name: data.recipient_name,
+        recipient_email: data.recipient_email ?? null,
+        description: data.description ?? null,
+        base_amount_cents: data.base_amount_cents,
+        fee_amount_cents: feeCents,
+        total_amount_cents: totalCents,
+        homeowner_id: data.homeowner_id ?? null,
+        collection_id: data.collection_id ?? null,
+        case_id: data.case_id ?? null,
+        client_id: data.client_id ?? null,
+        notes: data.notes ?? null,
+        created_by: userId,
+        status: "pending",
+      })
+      .select("*")
+      .single();
+    if (insErr || !row) throw new Error(insErr?.message ?? "Failed to create payment request");
+
+    const successUrl = `${origin}/pay/${row.id}?status=success`;
+    const cancelUrl = `${origin}/pay/${row.id}?status=cancel`;
+
+    const session = await stripe.checkout.sessions.create({
+      mode: "payment",
+      payment_method_types: ["card"],
+      customer_email: data.recipient_email || undefined,
+      line_items: [
+        {
+          price_data: {
+            currency: "usd",
+            unit_amount: data.base_amount_cents,
+            product_data: {
+              name: data.description || `Payment from ${data.recipient_name}`,
+            },
+          },
+          quantity: 1,
+        },
+        {
+          price_data: {
+            currency: "usd",
+            unit_amount: feeCents,
+            product_data: { name: "Processing fee (2.9% + $0.30)" },
+          },
+          quantity: 1,
+        },
+      ],
+      success_url: successUrl,
+      cancel_url: cancelUrl,
+      metadata: { payment_request_id: row.id },
+    });
+
+    await supabaseAdmin
+      .from("payment_requests")
+      .update({
+        stripe_session_id: session.id,
+        stripe_checkout_url: session.url ?? null,
+      })
+      .eq("id", row.id);
+
+    return { id: row.id, checkout_url: session.url, total_cents: totalCents, fee_cents: feeCents };
+  });
+
+export const refreshPaymentStatus = createServerFn({ method: "POST" })
+  .middleware([requireSupabaseAuth])
+  .inputValidator((data: { id: string }) => data)
+  .handler(async ({ data }) => {
+    const { data: row } = await supabaseAdmin
+      .from("payment_requests")
+      .select("*")
+      .eq("id", data.id)
+      .maybeSingle();
+    if (!row) throw new Error("Not found");
+    if (row.status === "paid" || !row.stripe_session_id) return { status: row.status };
+    const stripe = getStripe();
+    const session = await stripe.checkout.sessions.retrieve(row.stripe_session_id);
+    if (session.payment_status === "paid") {
+      await supabaseAdmin
+        .from("payment_requests")
+        .update({
+          status: "paid",
+          paid_at: new Date().toISOString(),
+          stripe_payment_intent_id:
+            typeof session.payment_intent === "string" ? session.payment_intent : null,
+        })
+        .eq("id", row.id);
+      return { status: "paid" };
+    }
+    return { status: row.status };
+  });
+
+export const markPaymentEmailSent = createServerFn({ method: "POST" })
+  .middleware([requireSupabaseAuth])
+  .inputValidator((data: { id: string }) => data)
+  .handler(async ({ data }) => {
+    await supabaseAdmin
+      .from("payment_requests")
+      .update({ email_sent_at: new Date().toISOString() })
+      .eq("id", data.id);
+    return { ok: true };
+  });
+
+export const cancelPaymentRequest = createServerFn({ method: "POST" })
+  .middleware([requireSupabaseAuth])
+  .inputValidator((data: { id: string }) => data)
+  .handler(async ({ data }) => {
+    await supabaseAdmin
+      .from("payment_requests")
+      .update({ status: "canceled" })
+      .eq("id", data.id);
+    return { ok: true };
+  });
+
+// Public: fetch minimal info for the pay page (no auth)
+export const getPublicPaymentRequest = createServerFn({ method: "GET" })
+  .inputValidator((data: { id: string }) => data)
+  .handler(async ({ data }) => {
+    const { data: row } = await supabaseAdmin
+      .from("payment_requests")
+      .select(
+        "id, recipient_name, description, base_amount_cents, fee_amount_cents, total_amount_cents, currency, status, stripe_checkout_url, paid_at",
+      )
+      .eq("id", data.id)
+      .maybeSingle();
+    if (!row) throw new Error("Payment request not found");
+    return row;
+  });
@@ -16,6 +16,7 @@ import { Route as IndexRouteImport } from './routes/index'
 import { Route as TasksIndexRouteImport } from './routes/tasks.index'
 import { Route as StatusIndexRouteImport } from './routes/status.index'
 import { Route as SettingsIndexRouteImport } from './routes/settings.index'
+import { Route as PaymentsIndexRouteImport } from './routes/payments.index'
 import { Route as MessagesIndexRouteImport } from './routes/messages.index'
 import { Route as InvoicesIndexRouteImport } from './routes/invoices.index'
 import { Route as InboxIndexRouteImport } from './routes/inbox.index'
@@ -37,6 +38,7 @@ import { Route as SettingsFormTemplatesRouteImport } from './routes/settings.for
 import { Route as SettingsFeesRouteImport } from './routes/settings.fees'
 import { Route as SettingsCustomFieldsRouteImport } from './routes/settings.custom-fields'
 import { Route as SettingsClientFieldsRouteImport } from './routes/settings.client-fields'
+import { Route as PayIdRouteImport } from './routes/pay.$id'
 import { Route as InvoicesInvoiceIdRouteImport } from './routes/invoices.$invoiceId'
 import { Route as HooksPollImapRouteImport } from './routes/hooks/poll-imap'
 import { Route as ContactsContactIdRouteImport } from './routes/contacts.$contactId'
@@ -44,6 +46,7 @@ import { Route as CollectionsCollectionIdRouteImport } from './routes/collection
 import { Route as ClientsClientIdRouteImport } from './routes/clients.$clientId'
 import { Route as CasesNewRouteImport } from './routes/cases.new'
 import { Route as CasesCaseIdRouteImport } from './routes/cases.$caseId'
+import { Route as ApiStripeWebhookRouteImport } from './routes/api.stripe-webhook'
 import { Route as AdminUsersRouteImport } from './routes/admin.users'
 import { Route as DocumentsTemplatesIndexRouteImport } from './routes/documents.templates.index'
 import { Route as DocumentsTemplatesNewRouteImport } from './routes/documents.templates.new'
@@ -85,6 +88,11 @@ const SettingsIndexRoute = SettingsIndexRouteImport.update({
  path: '/',
  getParentRoute: () => SettingsRoute,
 } as any)
+const PaymentsIndexRoute = PaymentsIndexRouteImport.update({
+  id: '/payments/',
+  path: '/payments/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const MessagesIndexRoute = MessagesIndexRouteImport.update({
  id: '/messages/',
  path: '/messages/',
@@ -190,6 +198,11 @@ const SettingsClientFieldsRoute = SettingsClientFieldsRouteImport.update({
  path: '/client-fields',
  getParentRoute: () => SettingsRoute,
 } as any)
+const PayIdRoute = PayIdRouteImport.update({
+  id: '/pay/$id',
+  path: '/pay/$id',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const InvoicesInvoiceIdRoute = InvoicesInvoiceIdRouteImport.update({
  id: '/invoices/$invoiceId',
  path: '/invoices/$invoiceId',
@@ -225,6 +238,11 @@ const CasesCaseIdRoute = CasesCaseIdRouteImport.update({
  path: '/cases/$caseId',
  getParentRoute: () => rootRouteImport,
 } as any)
+const ApiStripeWebhookRoute = ApiStripeWebhookRouteImport.update({
+  id: '/api/stripe-webhook',
+  path: '/api/stripe-webhook',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AdminUsersRoute = AdminUsersRouteImport.update({
  id: '/admin/users',
  path: '/admin/users',
@@ -258,6 +276,7 @@ export interface FileRoutesByFullPath {
  '/settings': typeof SettingsRouteWithChildren
  '/setup': typeof SetupRoute
  '/admin/users': typeof AdminUsersRoute
+  '/api/stripe-webhook': typeof ApiStripeWebhookRoute
  '/cases/$caseId': typeof CasesCaseIdRoute
  '/cases/new': typeof CasesNewRoute
  '/clients/$clientId': typeof ClientsClientIdRoute
@@ -265,6 +284,7 @@ export interface FileRoutesByFullPath {
  '/contacts/$contactId': typeof ContactsContactIdRoute
  '/hooks/poll-imap': typeof HooksPollImapRoute
  '/invoices/$invoiceId': typeof InvoicesInvoiceIdRoute
+  '/pay/$id': typeof PayIdRoute
  '/settings/client-fields': typeof SettingsClientFieldsRoute
  '/settings/custom-fields': typeof SettingsCustomFieldsRoute
  '/settings/fees': typeof SettingsFeesRoute
@@ -286,6 +306,7 @@ export interface FileRoutesByFullPath {
  '/inbox/': typeof InboxIndexRoute
  '/invoices/': typeof InvoicesIndexRoute
  '/messages/': typeof MessagesIndexRoute
+  '/payments/': typeof PaymentsIndexRoute
  '/settings/': typeof SettingsIndexRoute
  '/status/': typeof StatusIndexRoute
  '/tasks/': typeof TasksIndexRoute
@@ -299,6 +320,7 @@ export interface FileRoutesByTo {
  '/login': typeof LoginRoute
  '/setup': typeof SetupRoute
  '/admin/users': typeof AdminUsersRoute
+  '/api/stripe-webhook': typeof ApiStripeWebhookRoute
  '/cases/$caseId': typeof CasesCaseIdRoute
  '/cases/new': typeof CasesNewRoute
  '/clients/$clientId': typeof ClientsClientIdRoute
@@ -306,6 +328,7 @@ export interface FileRoutesByTo {
  '/contacts/$contactId': typeof ContactsContactIdRoute
  '/hooks/poll-imap': typeof HooksPollImapRoute
  '/invoices/$invoiceId': typeof InvoicesInvoiceIdRoute
+  '/pay/$id': typeof PayIdRoute
  '/settings/client-fields': typeof SettingsClientFieldsRoute
  '/settings/custom-fields': typeof SettingsCustomFieldsRoute
  '/settings/fees': typeof SettingsFeesRoute
@@ -327,6 +350,7 @@ export interface FileRoutesByTo {
  '/inbox': typeof InboxIndexRoute
  '/invoices': typeof InvoicesIndexRoute
  '/messages': typeof MessagesIndexRoute
+  '/payments': typeof PaymentsIndexRoute
  '/settings': typeof SettingsIndexRoute
  '/status': typeof StatusIndexRoute
  '/tasks': typeof TasksIndexRoute
@@ -342,6 +366,7 @@ export interface FileRoutesById {
  '/settings': typeof SettingsRouteWithChildren
  '/setup': typeof SetupRoute
  '/admin/users': typeof AdminUsersRoute
+  '/api/stripe-webhook': typeof ApiStripeWebhookRoute
  '/cases/$caseId': typeof CasesCaseIdRoute
  '/cases/new': typeof CasesNewRoute
  '/clients/$clientId': typeof ClientsClientIdRoute
@@ -349,6 +374,7 @@ export interface FileRoutesById {
  '/contacts/$contactId': typeof ContactsContactIdRoute
  '/hooks/poll-imap': typeof HooksPollImapRoute
  '/invoices/$invoiceId': typeof InvoicesInvoiceIdRoute
+  '/pay/$id': typeof PayIdRoute
  '/settings/client-fields': typeof SettingsClientFieldsRoute
  '/settings/custom-fields': typeof SettingsCustomFieldsRoute
  '/settings/fees': typeof SettingsFeesRoute
@@ -370,6 +396,7 @@ export interface FileRoutesById {
  '/inbox/': typeof InboxIndexRoute
  '/invoices/': typeof InvoicesIndexRoute
  '/messages/': typeof MessagesIndexRoute
+  '/payments/': typeof PaymentsIndexRoute
  '/settings/': typeof SettingsIndexRoute
  '/status/': typeof StatusIndexRoute
  '/tasks/': typeof TasksIndexRoute
@@ -386,6 +413,7 @@ export interface FileRouteTypes {
    | '/settings'
    | '/setup'
    | '/admin/users'
+    | '/api/stripe-webhook'
    | '/cases/$caseId'
    | '/cases/new'
    | '/clients/$clientId'
@@ -393,6 +421,7 @@ export interface FileRouteTypes {
    | '/contacts/$contactId'
    | '/hooks/poll-imap'
    | '/invoices/$invoiceId'
+    | '/pay/$id'
    | '/settings/client-fields'
    | '/settings/custom-fields'
    | '/settings/fees'
@@ -414,6 +443,7 @@ export interface FileRouteTypes {
    | '/inbox/'
    | '/invoices/'
    | '/messages/'
+    | '/payments/'
    | '/settings/'
    | '/status/'
    | '/tasks/'
@@ -427,6 +457,7 @@ export interface FileRouteTypes {
    | '/login'
    | '/setup'
    | '/admin/users'
+    | '/api/stripe-webhook'
    | '/cases/$caseId'
    | '/cases/new'
    | '/clients/$clientId'
@@ -434,6 +465,7 @@ export interface FileRouteTypes {
    | '/contacts/$contactId'
    | '/hooks/poll-imap'
    | '/invoices/$invoiceId'
+    | '/pay/$id'
    | '/settings/client-fields'
    | '/settings/custom-fields'
    | '/settings/fees'
@@ -455,6 +487,7 @@ export interface FileRouteTypes {
    | '/inbox'
    | '/invoices'
    | '/messages'
+    | '/payments'
    | '/settings'
    | '/status'
    | '/tasks'
@@ -469,6 +502,7 @@ export interface FileRouteTypes {
    | '/settings'
    | '/setup'
    | '/admin/users'
+    | '/api/stripe-webhook'
    | '/cases/$caseId'
    | '/cases/new'
    | '/clients/$clientId'
@@ -476,6 +510,7 @@ export interface FileRouteTypes {
    | '/contacts/$contactId'
    | '/hooks/poll-imap'
    | '/invoices/$invoiceId'
+    | '/pay/$id'
    | '/settings/client-fields'
    | '/settings/custom-fields'
    | '/settings/fees'
@@ -497,6 +532,7 @@ export interface FileRouteTypes {
    | '/inbox/'
    | '/invoices/'
    | '/messages/'
+    | '/payments/'
    | '/settings/'
    | '/status/'
    | '/tasks/'
@@ -512,6 +548,7 @@ export interface RootRouteChildren {
  SettingsRoute: typeof SettingsRouteWithChildren
  SetupRoute: typeof SetupRoute
  AdminUsersRoute: typeof AdminUsersRoute
+  ApiStripeWebhookRoute: typeof ApiStripeWebhookRoute
  CasesCaseIdRoute: typeof CasesCaseIdRoute
  CasesNewRoute: typeof CasesNewRoute
  ClientsClientIdRoute: typeof ClientsClientIdRoute
@@ -519,6 +556,7 @@ export interface RootRouteChildren {
  ContactsContactIdRoute: typeof ContactsContactIdRoute
  HooksPollImapRoute: typeof HooksPollImapRoute
  InvoicesInvoiceIdRoute: typeof InvoicesInvoiceIdRoute
+  PayIdRoute: typeof PayIdRoute
  CalendarIndexRoute: typeof CalendarIndexRoute
  CasesIndexRoute: typeof CasesIndexRoute
  ClientsIndexRoute: typeof ClientsIndexRoute
@@ -530,6 +568,7 @@ export interface RootRouteChildren {
  InboxIndexRoute: typeof InboxIndexRoute
  InvoicesIndexRoute: typeof InvoicesIndexRoute
  MessagesIndexRoute: typeof MessagesIndexRoute
+  PaymentsIndexRoute: typeof PaymentsIndexRoute
  StatusIndexRoute: typeof StatusIndexRoute
  TasksIndexRoute: typeof TasksIndexRoute
  DocumentsPleadingNewRoute: typeof DocumentsPleadingNewRoute
@@ -589,6 +628,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof SettingsIndexRouteImport
      parentRoute: typeof SettingsRoute
    }
+    '/payments/': {
+      id: '/payments/'
+      path: '/payments'
+      fullPath: '/payments/'
+      preLoaderRoute: typeof PaymentsIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/messages/': {
      id: '/messages/'
      path: '/messages'
@@ -736,6 +782,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof SettingsClientFieldsRouteImport
      parentRoute: typeof SettingsRoute
    }
+    '/pay/$id': {
+      id: '/pay/$id'
+      path: '/pay/$id'
+      fullPath: '/pay/$id'
+      preLoaderRoute: typeof PayIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/invoices/$invoiceId': {
      id: '/invoices/$invoiceId'
      path: '/invoices/$invoiceId'
@@ -785,6 +838,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof CasesCaseIdRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/api/stripe-webhook': {
+      id: '/api/stripe-webhook'
+      path: '/api/stripe-webhook'
+      fullPath: '/api/stripe-webhook'
+      preLoaderRoute: typeof ApiStripeWebhookRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/admin/users': {
      id: '/admin/users'
      path: '/admin/users'
@@ -861,6 +921,7 @@ const rootRouteChildren: RootRouteChildren = {
  SettingsRoute: SettingsRouteWithChildren,
  SetupRoute: SetupRoute,
  AdminUsersRoute: AdminUsersRoute,
+  ApiStripeWebhookRoute: ApiStripeWebhookRoute,
  CasesCaseIdRoute: CasesCaseIdRoute,
  CasesNewRoute: CasesNewRoute,
  ClientsClientIdRoute: ClientsClientIdRoute,
@@ -868,6 +929,7 @@ const rootRouteChildren: RootRouteChildren = {
  ContactsContactIdRoute: ContactsContactIdRoute,
  HooksPollImapRoute: HooksPollImapRoute,
  InvoicesInvoiceIdRoute: InvoicesInvoiceIdRoute,
+  PayIdRoute: PayIdRoute,
  CalendarIndexRoute: CalendarIndexRoute,
  CasesIndexRoute: CasesIndexRoute,
  ClientsIndexRoute: ClientsIndexRoute,
@@ -879,6 +941,7 @@ const rootRouteChildren: RootRouteChildren = {
  InboxIndexRoute: InboxIndexRoute,
  InvoicesIndexRoute: InvoicesIndexRoute,
  MessagesIndexRoute: MessagesIndexRoute,
+  PaymentsIndexRoute: PaymentsIndexRoute,
  StatusIndexRoute: StatusIndexRoute,
  TasksIndexRoute: TasksIndexRoute,
  DocumentsPleadingNewRoute: DocumentsPleadingNewRoute,
@@ -0,0 +1,53 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { supabaseAdmin } from "@/integrations/supabase/client.server";
+import Stripe from "stripe";
+
+export const Route = createFileRoute("/api/stripe-webhook")({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const secret = process.env.STRIPE_SECRET_KEY;
+        const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;
+        if (!secret) return new Response("Stripe not configured", { status: 500 });
+
+        const stripe = new Stripe(secret);
+        const sig = request.headers.get("stripe-signature");
+        const body = await request.text();
+
+        let event: Stripe.Event;
+        try {
+          if (webhookSecret && sig) {
+            event = await stripe.webhooks.constructEventAsync(body, sig, webhookSecret);
+          } else {
+            // Without signature secret, accept but log (still secure if endpoint is obscure;
+            // the user can configure STRIPE_WEBHOOK_SECRET later)
+            event = JSON.parse(body) as Stripe.Event;
+          }
+        } catch (err) {
+          return new Response(`Webhook error: ${(err as Error).message}`, { status: 400 });
+        }
+
+        if (event.type === "checkout.session.completed") {
+          const session = event.data.object as Stripe.Checkout.Session;
+          const reqId = session.metadata?.payment_request_id;
+          if (reqId) {
+            await supabaseAdmin
+              .from("payment_requests")
+              .update({
+                status: "paid",
+                paid_at: new Date().toISOString(),
+                stripe_payment_intent_id:
+                  typeof session.payment_intent === "string" ? session.payment_intent : null,
+              })
+              .eq("id", reqId);
+          }
+        }
+
+        return new Response(JSON.stringify({ received: true }), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        });
+      },
+    },
+  },
+});
@@ -0,0 +1,128 @@
+import { createFileRoute, useSearch } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { CheckCircle2, CreditCard, XCircle } from "lucide-react";
+import { formatCurrency } from "@/lib/format";
+import { getPublicPaymentRequest } from "@/lib/payments.functions";
+import { Scale } from "lucide-react";
+
+export const Route = createFileRoute("/pay/$id")({
+  validateSearch: (s: Record<string, unknown>) => ({
+    status: typeof s.status === "string" ? (s.status as string) : undefined,
+  }),
+  loader: async ({ params }) => {
+    return getPublicPaymentRequest({ data: { id: params.id } });
+  },
+  component: PayPage,
+  errorComponent: () => (
+    <Shell>
+      <p className="text-center text-muted-foreground">Payment request not found.</p>
+    </Shell>
+  ),
+});
+
+function Shell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
+      <div className="w-full max-w-lg">
+        <div className="flex items-center justify-center gap-2 mb-6">
+          <Scale className="h-6 w-6 text-primary" />
+          <span className="font-serif text-xl">Stage Law Firm, PLLC</span>
+        </div>
+        <Card className="border-border/60">
+          <CardContent className="p-6">{children}</CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function PayPage() {
+  const data = Route.useLoaderData();
+  const search = useSearch({ from: "/pay/$id" });
+  const [row, setRow] = useState(data);
+
+  useEffect(() => {
+    setRow(data);
+  }, [data]);
+
+  if (search.status === "success" || row.status === "paid") {
+    return (
+      <Shell>
+        <div className="text-center py-4">
+          <CheckCircle2 className="h-14 w-14 text-success mx-auto mb-3" />
+          <h1 className="font-serif text-2xl mb-1">Payment received</h1>
+          <p className="text-sm text-muted-foreground mb-4">
+            Thank you, {row.recipient_name}. Your payment of{" "}
+            <strong>{formatCurrency(row.total_amount_cents / 100)}</strong> has been received.
+          </p>
+        </div>
+      </Shell>
+    );
+  }
+
+  if (row.status === "canceled") {
+    return (
+      <Shell>
+        <div className="text-center py-4">
+          <XCircle className="h-14 w-14 text-destructive mx-auto mb-3" />
+          <h1 className="font-serif text-2xl mb-1">Payment canceled</h1>
+          <p className="text-sm text-muted-foreground">
+            This payment request is no longer active. Please contact our office.
+          </p>
+        </div>
+      </Shell>
+    );
+  }
+
+  return (
+    <Shell>
+      <div className="text-center mb-5">
+        <CreditCard className="h-10 w-10 text-primary mx-auto mb-2" />
+        <h1 className="font-serif text-2xl">Payment request</h1>
+        <p className="text-sm text-muted-foreground">For {row.recipient_name}</p>
+      </div>
+
+      {row.description && (
+        <p className="text-sm bg-muted/40 rounded-md p-3 mb-4">{row.description}</p>
+      )}
+
+      <div className="space-y-1 text-sm border rounded-md p-3 mb-5">
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Amount</span>
+          <span className="tabular-nums">{formatCurrency(row.base_amount_cents / 100)}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Processing fee</span>
+          <span className="tabular-nums">{formatCurrency(row.fee_amount_cents / 100)}</span>
+        </div>
+        <div className="flex justify-between font-semibold border-t pt-2 mt-2 text-base">
+          <span>Total</span>
+          <span className="tabular-nums">{formatCurrency(row.total_amount_cents / 100)}</span>
+        </div>
+      </div>
+
+      {row.stripe_checkout_url ? (
+        <Button
+          className="w-full"
+          size="lg"
+          onClick={() => {
+            window.location.href = row.stripe_checkout_url!;
+          }}
+        >
+          Pay {formatCurrency(row.total_amount_cents / 100)} with card
+        </Button>
+      ) : (
+        <Badge variant="outline">Checkout link unavailable</Badge>
+      )}
+
+      {search.status === "cancel" && (
+        <p className="text-xs text-muted-foreground text-center mt-3">
+          Payment was not completed. You can try again above.
+        </p>
+      )}
+    </Shell>
+  );
+}
@@ -0,0 +1,436 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+import { ProtectedLayout } from "@/components/protected-layout";
+import { PageContainer, PageHeader } from "@/components/app-shell";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { supabase } from "@/integrations/supabase/client";
+import { CreditCard, Plus, Copy, Mail, RefreshCw, X } from "lucide-react";
+import { formatCurrency, formatDateTime, statusBadgeClass } from "@/lib/format";
+import { toast } from "sonner";
+import {
+  createPaymentRequest,
+  refreshPaymentStatus,
+  cancelPaymentRequest,
+  markPaymentEmailSent,
+} from "@/lib/payments.functions";
+import { useServerFn } from "@tanstack/react-start";
+
+export const Route = createFileRoute("/payments/")({
+  component: () => (
+    <ProtectedLayout>
+      <PaymentsIndex />
+    </ProtectedLayout>
+  ),
+});
+
+interface Homeowner {
+  id: string;
+  first_name: string;
+  last_name: string;
+  email: string | null;
+  client_id: string;
+}
+
+function PaymentsIndex() {
+  const [rows, setRows] = useState<any[]>([]);
+  const [q, setQ] = useState("");
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const create = useServerFn(createPaymentRequest);
+  const refresh = useServerFn(refreshPaymentStatus);
+  const cancel = useServerFn(cancelPaymentRequest);
+  const markSent = useServerFn(markPaymentEmailSent);
+
+  const load = async () => {
+    const { data } = await supabase
+      .from("payment_requests")
+      .select("*, homeowner:homeowners(id, first_name, last_name)")
+      .order("created_at", { ascending: false });
+    setRows(data ?? []);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const filtered = useMemo(() => {
+    if (!q) return rows;
+    const s = q.toLowerCase();
+    return rows.filter(
+      (r) =>
+        r.recipient_name?.toLowerCase().includes(s) ||
+        r.recipient_email?.toLowerCase().includes(s) ||
+        r.description?.toLowerCase().includes(s),
+    );
+  }, [rows, q]);
+
+  const copyLink = async (r: any) => {
+    const url = `${window.location.origin}/pay/${r.id}`;
+    await navigator.clipboard.writeText(url);
+    toast.success("Payment link copied");
+  };
+
+  const sendEmail = async (r: any) => {
+    if (!r.recipient_email) {
+      toast.error("No recipient email on file");
+      return;
+    }
+    const url = `${window.location.origin}/pay/${r.id}`;
+    const html = `
+      <p>Hello ${r.recipient_name},</p>
+      <p>You have a payment request for <strong>${formatCurrency(r.total_amount_cents / 100)}</strong>${
+        r.description ? ` (${r.description})` : ""
+      }.</p>
+      <p><a href="${url}" style="display:inline-block;padding:10px 16px;background:#2563eb;color:#fff;text-decoration:none;border-radius:6px;">Pay now</a></p>
+      <p>Or open this link: <a href="${url}">${url}</a></p>
+    `;
+    const { error } = await supabase.functions.invoke("send-smtp-email", {
+      body: {
+        to: r.recipient_email,
+        subject: `Payment request: ${formatCurrency(r.total_amount_cents / 100)}`,
+        html,
+        context: "payment_request",
+      },
+    });
+    if (error) {
+      toast.error(error.message);
+      return;
+    }
+    await markSent({ data: { id: r.id } });
+    toast.success("Email sent");
+    load();
+  };
+
+  const onRefresh = async (id: string) => {
+    await refresh({ data: { id } });
+    load();
+  };
+
+  const onCancel = async (id: string) => {
+    if (!confirm("Cancel this payment request?")) return;
+    await cancel({ data: { id } });
+    load();
+  };
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Payments"
+        description="Stripe payment requests for homeowners. Fees are added on top so the homeowner covers them."
+        actions={
+          <Button onClick={() => setOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" /> New payment request
+          </Button>
+        }
+      />
+
+      <Card className="border-border/60 mb-4">
+        <CardContent className="p-3">
+          <Input
+            placeholder="Search by recipient, email, or description"
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+          />
+        </CardContent>
+      </Card>
+
+      <Card className="border-border/60 overflow-hidden">
+        <CardContent className="p-0">
+          <table className="w-full text-sm">
+            <thead className="bg-muted/50 text-xs uppercase tracking-wider text-muted-foreground">
+              <tr>
+                <th className="text-left px-4 py-3 font-medium">Recipient</th>
+                <th className="text-left px-4 py-3 font-medium">Description</th>
+                <th className="text-right px-4 py-3 font-medium">Base</th>
+                <th className="text-right px-4 py-3 font-medium">Fee</th>
+                <th className="text-right px-4 py-3 font-medium">Total</th>
+                <th className="text-left px-4 py-3 font-medium">Status</th>
+                <th className="text-left px-4 py-3 font-medium">Created</th>
+                <th className="text-right px-4 py-3 font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading && (
+                <tr>
+                  <td colSpan={8} className="text-center py-12 text-muted-foreground">
+                    Loading…
+                  </td>
+                </tr>
+              )}
+              {!loading && filtered.length === 0 && (
+                <tr>
+                  <td colSpan={8} className="text-center py-12 text-muted-foreground">
+                    <CreditCard className="h-8 w-8 mx-auto mb-2 opacity-40" />
+                    No payment requests yet.
+                  </td>
+                </tr>
+              )}
+              {filtered.map((r) => (
+                <tr key={r.id} className="border-t hover:bg-muted/30">
+                  <td className="px-4 py-3">
+                    <div className="font-medium">{r.recipient_name}</div>
+                    {r.recipient_email && (
+                      <div className="text-xs text-muted-foreground">{r.recipient_email}</div>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-muted-foreground">{r.description ?? "—"}</td>
+                  <td className="px-4 py-3 text-right tabular-nums">
+                    {formatCurrency(r.base_amount_cents / 100)}
+                  </td>
+                  <td className="px-4 py-3 text-right tabular-nums text-muted-foreground">
+                    {formatCurrency(r.fee_amount_cents / 100)}
+                  </td>
+                  <td className="px-4 py-3 text-right tabular-nums font-medium">
+                    {formatCurrency(r.total_amount_cents / 100)}
+                  </td>
+                  <td className="px-4 py-3">
+                    <Badge variant="outline" className={statusBadgeClass(r.status)}>
+                      {r.status}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3 text-muted-foreground text-xs">
+                    {formatDateTime(r.created_at)}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <div className="flex justify-end gap-1">
+                      <Button size="sm" variant="ghost" onClick={() => copyLink(r)} title="Copy link">
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => sendEmail(r)}
+                        title="Send email"
+                        disabled={!r.recipient_email}
+                      >
+                        <Mail className="h-4 w-4" />
+                      </Button>
+                      {r.status === "pending" && (
+                        <>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => onRefresh(r.id)}
+                            title="Refresh status"
+                          >
+                            <RefreshCw className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => onCancel(r.id)}
+                            title="Cancel"
+                          >
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+
+      <NewPaymentDialog
+        open={open}
+        onOpenChange={setOpen}
+        onCreated={() => {
+          setOpen(false);
+          load();
+        }}
+        createFn={create}
+      />
+    </PageContainer>
+  );
+}
+
+function NewPaymentDialog({
+  open,
+  onOpenChange,
+  onCreated,
+  createFn,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  onCreated: () => void;
+  createFn: ReturnType<typeof useServerFn<typeof createPaymentRequest>>;
+}) {
+  const [homeowners, setHomeowners] = useState<Homeowner[]>([]);
+  const [homeownerId, setHomeownerId] = useState<string>("");
+  const [recipientName, setRecipientName] = useState("");
+  const [recipientEmail, setRecipientEmail] = useState("");
+  const [description, setDescription] = useState("");
+  const [amount, setAmount] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    (async () => {
+      const { data } = await supabase
+        .from("homeowners")
+        .select("id, first_name, last_name, email, client_id")
+        .is("archived_at", null)
+        .order("last_name");
+      setHomeowners((data ?? []) as Homeowner[]);
+    })();
+  }, [open]);
+
+  useEffect(() => {
+    const ho = homeowners.find((h) => h.id === homeownerId);
+    if (ho) {
+      setRecipientName(`${ho.first_name} ${ho.last_name}`.trim());
+      setRecipientEmail(ho.email ?? "");
+    }
+  }, [homeownerId, homeowners]);
+
+  const baseCents = Math.round((parseFloat(amount) || 0) * 100);
+  const preview = baseCents > 0 ? (baseCents + 30) / (1 - 0.029) : 0;
+  const totalPreview = Math.ceil(preview) / 100;
+  const feePreview = totalPreview - baseCents / 100;
+
+  const submit = async () => {
+    if (!recipientName.trim() || baseCents < 100) {
+      toast.error("Recipient and amount (≥ $1.00) required");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const ho = homeowners.find((h) => h.id === homeownerId);
+      await createFn({
+        data: {
+          recipient_name: recipientName,
+          recipient_email: recipientEmail || undefined,
+          description: description || undefined,
+          base_amount_cents: baseCents,
+          homeowner_id: homeownerId || undefined,
+          client_id: ho?.client_id || undefined,
+        },
+      });
+      toast.success("Payment request created");
+      setHomeownerId("");
+      setRecipientName("");
+      setRecipientEmail("");
+      setDescription("");
+      setAmount("");
+      onCreated();
+    } catch (e: any) {
+      toast.error(e?.message ?? "Failed to create");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New payment request</DialogTitle>
+          <DialogDescription>
+            A Stripe checkout link will be generated. The homeowner pays the base amount plus
+            processing fees (2.9% + $0.30).
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div>
+            <Label className="text-xs">Homeowner (optional)</Label>
+            <select
+              className="w-full mt-1 h-9 px-2 rounded-md border bg-background text-sm"
+              value={homeownerId}
+              onChange={(e) => setHomeownerId(e.target.value)}
+            >
+              <option value="">— Select a homeowner —</option>
+              {homeowners.map((h) => (
+                <option key={h.id} value={h.id}>
+                  {h.last_name}, {h.first_name}
+                  {h.email ? ` (${h.email})` : ""}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label className="text-xs">Recipient name</Label>
+              <Input value={recipientName} onChange={(e) => setRecipientName(e.target.value)} />
+            </div>
+            <div>
+              <Label className="text-xs">Recipient email</Label>
+              <Input
+                type="email"
+                value={recipientEmail}
+                onChange={(e) => setRecipientEmail(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Label className="text-xs">Description</Label>
+            <Textarea
+              rows={2}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="e.g. Past due assessments — Unit 42"
+            />
+          </div>
+
+          <div>
+            <Label className="text-xs">Amount you want to receive (USD)</Label>
+            <Input
+              type="number"
+              step="0.01"
+              min="1"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+              placeholder="0.00"
+            />
+          </div>
+
+          {baseCents > 0 && (
+            <div className="rounded-md border border-border/60 bg-muted/30 p-3 text-sm space-y-1">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Base</span>
+                <span className="tabular-nums">{formatCurrency(baseCents / 100)}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Processing fee</span>
+                <span className="tabular-nums">{formatCurrency(feePreview)}</span>
+              </div>
+              <div className="flex justify-between font-medium border-t pt-1 mt-1">
+                <span>Homeowner pays</span>
+                <span className="tabular-nums">{formatCurrency(totalPreview)}</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={submit} disabled={submitting}>
+            {submitting ? "Creating…" : "Create payment request"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,49 @@
+-- Payment requests for homeowner Stripe checkout
+CREATE TABLE IF NOT EXISTS public.payment_requests (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  homeowner_id uuid REFERENCES public.homeowners(id) ON DELETE SET NULL,
+  collection_id uuid REFERENCES public.collections(id) ON DELETE SET NULL,
+  case_id uuid REFERENCES public.cases(id) ON DELETE SET NULL,
+  client_id uuid REFERENCES public.clients(id) ON DELETE SET NULL,
+  recipient_name text NOT NULL,
+  recipient_email text,
+  description text,
+  -- amounts in cents
+  base_amount_cents integer NOT NULL CHECK (base_amount_cents > 0),
+  fee_amount_cents integer NOT NULL DEFAULT 0,
+  total_amount_cents integer NOT NULL,
+  currency text NOT NULL DEFAULT 'usd',
+  status text NOT NULL DEFAULT 'pending', -- pending | paid | canceled | expired
+  stripe_session_id text,
+  stripe_payment_intent_id text,
+  stripe_checkout_url text,
+  paid_at timestamptz,
+  email_sent_at timestamptz,
+  notes text,
+  created_by uuid,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now()
+);
+
+CREATE INDEX IF NOT EXISTS idx_payment_requests_status ON public.payment_requests(status);
+CREATE INDEX IF NOT EXISTS idx_payment_requests_homeowner ON public.payment_requests(homeowner_id);
+CREATE INDEX IF NOT EXISTS idx_payment_requests_session ON public.payment_requests(stripe_session_id);
+
+ALTER TABLE public.payment_requests ENABLE ROW LEVEL SECURITY;
+
+-- Authenticated users can view all (firm-internal)
+CREATE POLICY "pr_select_auth" ON public.payment_requests
+  FOR SELECT TO authenticated USING (true);
+
+CREATE POLICY "pr_insert_auth" ON public.payment_requests
+  FOR INSERT TO authenticated WITH CHECK (auth.uid() IS NOT NULL);
+
+CREATE POLICY "pr_update_owner_or_admin" ON public.payment_requests
+  FOR UPDATE TO authenticated USING (is_admin(auth.uid()) OR created_by = auth.uid());
+
+CREATE POLICY "pr_delete_owner_or_admin" ON public.payment_requests
+  FOR DELETE TO authenticated USING (is_admin(auth.uid()) OR created_by = auth.uid());
+
+CREATE TRIGGER trg_payment_requests_updated_at
+  BEFORE UPDATE ON public.payment_requests
+  FOR EACH ROW EXECUTE FUNCTION public.tg_set_updated_at();