Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/app-shell.tsx

@@ -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 },

src/routeTree.gen.ts

@@ -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'
@@ -86,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/',
@@ -191,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',
@@ -272,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
@@ -293,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
@@ -314,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
@@ -335,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
@@ -358,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
@@ -379,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
@@ -403,6 +421,7 @@ export interface FileRouteTypes {
     | '/contacts/$contactId'
     | '/hooks/poll-imap'
     | '/invoices/$invoiceId'
+    | '/pay/$id'
     | '/settings/client-fields'
     | '/settings/custom-fields'
     | '/settings/fees'
@@ -424,6 +443,7 @@ export interface FileRouteTypes {
     | '/inbox/'
     | '/invoices/'
     | '/messages/'
+    | '/payments/'
     | '/settings/'
     | '/status/'
     | '/tasks/'
@@ -445,6 +465,7 @@ export interface FileRouteTypes {
     | '/contacts/$contactId'
     | '/hooks/poll-imap'
     | '/invoices/$invoiceId'
+    | '/pay/$id'
     | '/settings/client-fields'
     | '/settings/custom-fields'
     | '/settings/fees'
@@ -466,6 +487,7 @@ export interface FileRouteTypes {
     | '/inbox'
     | '/invoices'
     | '/messages'
+    | '/payments'
     | '/settings'
     | '/status'
     | '/tasks'
@@ -488,6 +510,7 @@ export interface FileRouteTypes {
     | '/contacts/$contactId'
     | '/hooks/poll-imap'
     | '/invoices/$invoiceId'
+    | '/pay/$id'
     | '/settings/client-fields'
     | '/settings/custom-fields'
     | '/settings/fees'
@@ -509,6 +532,7 @@ export interface FileRouteTypes {
     | '/inbox/'
     | '/invoices/'
     | '/messages/'
+    | '/payments/'
     | '/settings/'
     | '/status/'
     | '/tasks/'
@@ -532,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
@@ -543,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
@@ -602,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'
@@ -749,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'
@@ -889,6 +929,7 @@ const rootRouteChildren: RootRouteChildren = {
   ContactsContactIdRoute: ContactsContactIdRoute,
   HooksPollImapRoute: HooksPollImapRoute,
   InvoicesInvoiceIdRoute: InvoicesInvoiceIdRoute,
+  PayIdRoute: PayIdRoute,
   CalendarIndexRoute: CalendarIndexRoute,
   CasesIndexRoute: CasesIndexRoute,
   ClientsIndexRoute: ClientsIndexRoute,
@@ -900,6 +941,7 @@ const rootRouteChildren: RootRouteChildren = {
   InboxIndexRoute: InboxIndexRoute,
   InvoicesIndexRoute: InvoicesIndexRoute,
   MessagesIndexRoute: MessagesIndexRoute,
+  PaymentsIndexRoute: PaymentsIndexRoute,
   StatusIndexRoute: StatusIndexRoute,
   TasksIndexRoute: TasksIndexRoute,
   DocumentsPleadingNewRoute: DocumentsPleadingNewRoute,
@@ -910,3 +952,12 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

src/routes/pay.$id.tsx

@@ -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>
+  );
+}

src/routes/payments.index.tsx

@@ -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>
+  );
+}