@graph8/sdk 0.373.0 → 0.374.0

package/blocks/quotes/components/manual-products.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+/**
+ * ManualProducts: the org's own product catalogue for quoting without Stripe: list (including inactive and not-quotable),
+ * add, edit and retire.
+ *
+ * SDK operations, in order:
+ *   1. listManualProducts   GET    /manual-products?include_inactive&include_non_quotable&page&limit   read, paged `{ items, total, page, limit }`
+ *   2. createManualProduct  POST   /manual-products         write (org admin); amounts are cents, so the form takes a price and converts
+ *   3. updateManualProduct  PATCH  /manual-products/{id}    write (org admin); only the fields that changed are sent
+ *   4. deleteManualProduct  DELETE /manual-products/{id}    DESTRUCTIVE (org admin) -> ConfirmSpendDialog; a soft delete
+ *
+ * Only a product that is active AND quotable appears in the quote builder's picker; the table shows both flags. Retiring
+ * a product removes it from the catalogue and the picker, and the line items of quotes that already used it keep it.
+ * Create and edit store data and contact nobody, so they run on one click.
+ */
+import { useState } from "react";
+import { Package, Pencil, Plus, Trash2 } from "lucide-react";
+import { Button, Input, Label, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { body, money, text, type Rec } from "../lib/quotes";
+
+const FREQUENCIES: Array<[string, string]> = [["one_time", "One time"], ["month", "Monthly"], ["quarter", "Quarterly"], ["year", "Yearly"]];
+const PAGE_SIZE = 25;
+
+export interface ManualProductDraft { name: string; description: string; price: string; currency: string; billing_frequency: string; category: string; active: boolean; quotable: boolean }
+const blank = (): ManualProductDraft => ({ name: "", description: "", price: "", currency: "USD", billing_frequency: "one_time", category: "", active: true, quotable: true });
+const fromRow = (r: Rec): ManualProductDraft => ({
+  name: text(r.name), description: text(r.description), price: typeof r.default_unit_amount === "number" ? (r.default_unit_amount / 100).toFixed(2) : "", currency: text(r.currency, "USD").toUpperCase(),
+  billing_frequency: text(r.billing_frequency, "one_time"), category: text(r.category), active: r.active !== false, quotable: r.quotable !== false,
+});
+const cents = (price: string): number | null => {
+  const n = Number(price);
+  return price.trim() !== "" && Number.isFinite(n) && n >= 0 && n <= 10_000_000 ? Math.round(n * 100) : null;
+};
+
+export function draftProblems(d: ManualProductDraft): string[] {
+  const out: string[] = [];
+  if (!d.name.trim()) out.push("Give the product a name.");
+  if (cents(d.price) == null) out.push("Enter a price of 0 or more.");
+  if (!/^[A-Za-z]{3}$/.test(d.currency.trim())) out.push("The currency is a 3-letter code such as USD.");
+  return out;
+}
+
+/** The PATCH body: only fields that differ from the stored product. A cleared description or category is sent as null. */
+export function productChanges(was: ManualProductDraft, now: ManualProductDraft): Rec {
+  const out: Rec = {};
+  if (now.name.trim() !== was.name.trim()) out.name = now.name.trim();
+  if (now.description.trim() !== was.description.trim()) out.description = now.description.trim() || null;
+  if (now.category.trim() !== was.category.trim()) out.category = now.category.trim() || null;
+  if (cents(now.price) !== cents(was.price)) out.default_unit_amount = cents(now.price);
+  if (now.currency.trim().toUpperCase() !== was.currency.trim().toUpperCase()) out.currency = now.currency.trim().toUpperCase();
+  if (now.billing_frequency !== was.billing_frequency) out.billing_frequency = now.billing_frequency;
+  if (now.active !== was.active) out.active = now.active;
+  if (now.quotable !== was.quotable) out.quotable = now.quotable;
+  return out;
+}
+
+export function ManualProducts({ className, refreshKey }: { className?: string; refreshKey?: number }) {
+  const [page, setPage] = useState(1);
+  const q = useG8Query((signal) => g8Get("/manual-products", { include_inactive: true, include_non_quotable: true, page, limit: PAGE_SIZE }, { signal }), [page, refreshKey]);
+  const data = body(q.data);
+  const rows = (Array.isArray(data.items) ? data.items : []) as Rec[];
+  const total = typeof data.total === "number" ? data.total : rows.length;
+  const [editing, setEditing] = useState<{ row: Rec | null; was: ManualProductDraft } | null>(null);
+  const [draft, setDraft] = useState<ManualProductDraft>(blank());
+  const [tried, setTried] = useState(false);
+  const [retiring, setRetiring] = useState<Rec | null>(null);
+  const problems = draftProblems(draft);
+  const changes = editing?.row ? productChanges(editing.was, draft) : {};
+
+  const open = (row: Rec | null) => { const d = row ? fromRow(row) : blank(); setDraft(d); setTried(false); setEditing({ row, was: d }); };
+  const save = useG8Mutation(async () => {
+    if (editing?.row) return g8Patch(`/manual-products/${encodeURIComponent(text(editing.row.id))}`, changes);
+    return g8Post("/manual-products", {
+      name: draft.name.trim(), default_unit_amount: cents(draft.price), currency: draft.currency.trim().toUpperCase(), billing_frequency: draft.billing_frequency,
+      active: draft.active, quotable: draft.quotable, ...(draft.description.trim() ? { description: draft.description.trim() } : {}), ...(draft.category.trim() ? { category: draft.category.trim() } : {}),
+    });
+  }, { onSuccess: () => { setEditing(null); void q.refetch(); } });
+  const retire = useG8Mutation((id: string) => g8Delete(`/manual-products/${encodeURIComponent(id)}`), { onSuccess: () => { setRetiring(null); void q.refetch(); } });
+  const submit = () => { setTried(true); if (problems.length === 0 && (!editing?.row || Object.keys(changes).length > 0)) void save.mutate(undefined); };
+  const up = (patch: Partial<ManualProductDraft>) => setDraft({ ...draft, ...patch });
+
+  return (
+    <SectionCard className={className} title="Manual products" icon={<Package />} description="Your own catalogue for quoting without Stripe. Needs an organization admin to change."
+      actions={<Button size="sm" onClick={() => open(null)}><Plus className="size-4" aria-hidden />New product</Button>} flush
+      footer={<div className="flex items-center justify-between"><span>{total} {total === 1 ? "product" : "products"}</span><span className="flex gap-2"><Button size="sm" variant="outline" disabled={page === 1} onClick={() => setPage(page - 1)}>Previous</Button><Button size="sm" variant="outline" disabled={page * PAGE_SIZE >= total} onClick={() => setPage(page + 1)}>Next</Button></span></div>}>
+      {q.error ? <div className="p-4"><ApiError error={q.error} title="Could not load manual products" onRetry={() => void q.refetch()} /></div> : null}
+      {q.loading && !q.data ? <div className="p-4"><Skeleton className="h-20 w-full" aria-label="Loading manual products" /></div> : !q.error && rows.length === 0 ? (
+        <EmptyState compact title="No manual products" description="Add the products you sell, with a price, and they appear in the quote builder." action={<Button onClick={() => open(null)}>New product</Button>} />
+      ) : rows.length > 0 ? (
+        <Table>
+          <TableHeader><TableRow><TableHead>Product</TableHead><TableHead>Billing</TableHead><TableHead className="text-right">Price</TableHead><TableHead>In quotes</TableHead><TableHead><span className="sr-only">Actions</span></TableHead></TableRow></TableHeader>
+          <TableBody>
+            {rows.map((r) => (
+              <TableRow key={text(r.id)}>
+                <TableCell><span className="font-medium">{text(r.name)}</span><div className="text-xs text-muted-foreground">{text(r.category)}</div></TableCell>
+                <TableCell>{(FREQUENCIES.find(([v]) => v === r.billing_frequency)?.[1]) ?? text(r.billing_frequency)}</TableCell>
+                <TableCell className="text-right tabular-nums">{money(r.default_unit_amount, text(r.currency, "USD").toUpperCase())}</TableCell>
+                <TableCell>{r.active === false ? <StatusPill tone="neutral">Inactive</StatusPill> : r.quotable === false ? <StatusPill tone="warning">Not quotable</StatusPill> : <StatusPill tone="positive">Quotable</StatusPill>}</TableCell>
+                <TableCell className="whitespace-nowrap text-right">
+                  <Button size="sm" variant="ghost" aria-label={`Edit ${text(r.name)}`} onClick={() => open(r)}><Pencil className="size-4" aria-hidden /></Button>
+                  <Button size="sm" variant="ghost" aria-label={`Retire ${text(r.name)}`} onClick={() => setRetiring(r)}><Trash2 className="size-4" aria-hidden /></Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : null}
+      {retire.error ? <div className="p-4"><ApiError error={retire.error} title="Could not retire the product" /></div> : null}
+
+      <FormSheet open={editing != null} onOpenChange={(o) => { if (!o) setEditing(null); }} title={editing?.row ? "Edit product" : "New manual product"} onSubmit={submit}
+        footer={<><Button type="button" variant="outline" onClick={() => setEditing(null)}>Cancel</Button><Button type="submit" loading={save.loading} disabled={Boolean(editing?.row) && Object.keys(changes).length === 0}>{editing?.row ? "Save product" : "Add product"}</Button></>}>
+        <div className="space-y-1"><Label htmlFor="mp-name">Name</Label><Input id="mp-name" value={draft.name} maxLength={500} onChange={(e) => up({ name: e.target.value })} /></div>
+        <div className="space-y-1"><Label htmlFor="mp-desc">Description</Label><Textarea id="mp-desc" rows={3} value={draft.description} onChange={(e) => up({ description: e.target.value })} /></div>
+        <div className="grid grid-cols-2 gap-3">
+          <div className="space-y-1"><Label htmlFor="mp-price">Price</Label><Input id="mp-price" inputMode="decimal" value={draft.price} onChange={(e) => up({ price: e.target.value })} /></div>
+          <div className="space-y-1"><Label htmlFor="mp-cur">Currency</Label><Input id="mp-cur" maxLength={3} value={draft.currency} onChange={(e) => up({ currency: e.target.value })} /></div>
+          <div className="space-y-1"><Label htmlFor="mp-freq">Billing</Label>
+            <select id="mp-freq" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={draft.billing_frequency} onChange={(e) => up({ billing_frequency: e.target.value })}>{FREQUENCIES.map(([v, l]) => <option key={v} value={v}>{l}</option>)}</select></div>
+          <div className="space-y-1"><Label htmlFor="mp-cat">Category</Label><Input id="mp-cat" maxLength={100} value={draft.category} onChange={(e) => up({ category: e.target.value })} /></div>
+        </div>
+        <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={draft.active} onChange={(e) => up({ active: e.target.checked })} />Active</label>
+        <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={draft.quotable} onChange={(e) => up({ quotable: e.target.checked })} />Offer on quotes</label>
+        {tried && problems.length ? <ul role="alert" className="list-disc pl-5 text-sm text-destructive">{problems.map((p) => <li key={p}>{p}</li>)}</ul> : null}
+        {save.error ? <ApiError error={save.error} title="Could not save the product" /> : null}
+      </FormSheet>
+
+      {retiring ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Retire "${text(retiring.name)}"?`} confirmLabel="Retire product" affected={1} confirming={retire.loading}
+          description="The product leaves your catalogue and the quote builder's picker. Quotes that already include it keep the line item. To keep the product but stop offering it, switch off Active or Offer on quotes instead."
+          onConfirm={() => void retire.mutate(text(retiring.id))} onCancel={() => setRetiring(null)} />
+      ) : null}
+    </SectionCard>
+  );
+}

package/blocks/quotes/components/quote-batch-actions.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+/**
+ * QuoteBatchActions: archive, expire or revoke the quotes ticked in a list, in one request.
+ *
+ * SDK operations, in order:
+ *   1. batchQuoteAction  POST /quotes/batch { action: "archive" | "expire" | "revoke", quote_ids: [...] }  external tier,
+ *                        DESTRUCTIVE in effect for expire and revoke (both final) -> ConfirmSpendDialog for every action
+ *
+ * The request is addressed by quote id only, never by a filter: the ids sent are exactly the ticked quotes that the action
+ * applies to (expire and revoke only apply to a quote that is out for signature, archive to one that is not archived), and
+ * that same array is what the confirm counts. Quotes the action does not apply to are left out and said so, not sent.
+ * The API answers a row per quote (`success`, `skipped`, `error`) and a 200 only means the batch ran, so the result is read
+ * row by row: "N of M changed", with the reason for each that did not. The caller refetches afterwards (`onDone`).
+ */
+import { useState } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Post } from "@/g8/lib/g8-client";
+import { BATCH_MAX, BATCH_REASON, batchEligible, batchOutcomes, type BatchAction, type BatchOutcome } from "../lib/quote-admin";
+import { text, type Rec } from "../lib/quotes";
+
+export interface QuoteBatchActionsProps {
+  /** The ticked quotes, loaded (the list rows). */
+  selected: Rec[];
+  /** Called after the request, so the caller reloads the list and prunes its selection. */
+  onDone: () => void;
+  className?: string;
+}
+
+const COPY: Record<BatchAction, { button: string; title: (n: number) => string; confirm: string; effect: string }> = {
+  archive: { button: "Archive", title: (n) => `Archive ${n} ${n === 1 ? "quote" : "quotes"}?`, confirm: "Archive quotes", effect: "The quotes leave the active list. Nothing is sent and each can be unarchived later." },
+  expire: { button: "Expire", title: (n) => `Expire ${n} ${n === 1 ? "quote" : "quotes"}?`, confirm: "Expire quotes", effect: "Each customer's link stops working. This is final: create a new quote to offer it again." },
+  revoke: { button: "Revoke", title: (n) => `Revoke ${n} ${n === 1 ? "quote" : "quotes"}?`, confirm: "Revoke quotes", effect: "Withdraws the quotes you already sent, so customers can no longer sign them. This is final." },
+};
+interface Job { action: BatchAction; ids: string[]; names: Record<string, string> }
+const ACTIONS: BatchAction[] = ["archive", "expire", "revoke"];
+
+export function QuoteBatchActions({ selected, onDone, className }: QuoteBatchActionsProps) {
+  const [pending, setPending] = useState<Job | null>(null);
+  const [outcome, setOutcome] = useState<{ action: BatchAction; asked: number; rows: BatchOutcome[]; names: Record<string, string> } | null>(null);
+
+  const run = useG8Mutation(async (job: Job) => ({ job, res: await g8Post("/quotes/batch", { action: job.action, quote_ids: job.ids }) }), {
+    invalidates: [["quotes"]],
+    onSuccess: ({ job, res }) => { setPending(null); setOutcome({ action: job.action, asked: job.ids.length, rows: batchOutcomes(res), names: job.names }); onDone(); },
+  });
+
+  // The ids a click would send: filtered ONCE here, and this same array is both counted in the confirm and sent.
+  const idsFor = (action: BatchAction): string[] => selected.filter((r) => batchEligible(action, r)).map((r) => text(r.id)).filter(Boolean);
+  const open = (action: BatchAction) => { setOutcome(null); setPending({ action, ids: idsFor(action), names: Object.fromEntries(selected.map((r) => [text(r.id), text(r.title, text(r.quote_number, "Untitled quote"))])) }); };
+
+  const done = outcome ? outcome.rows.filter((r) => r.status === "success").length : 0;
+  const notDone = outcome ? outcome.rows.filter((r) => r.status !== "success") : [];
+  return (
+    <div className={className}>
+      {selected.length > 0 ? (
+        <div className="mb-2 flex flex-wrap items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm" role="group" aria-label="Batch actions">
+          <span className="font-medium tabular-nums">{selected.length} selected</span>
+          {ACTIONS.map((a) => {
+            const n = idsFor(a).length;
+            const tooMany = n > BATCH_MAX;
+            return <Button key={a} size="sm" variant="outline" disabled={n === 0 || tooMany} title={n === 0 ? `None of the selected quotes can be ${a === "archive" ? "archived" : a === "expire" ? "expired" : "revoked"}` : tooMany ? `At most ${BATCH_MAX} at a time` : undefined} onClick={() => open(a)}>{COPY[a].button} ({n})</Button>;
+          })}
+        </div>
+      ) : null}
+      {run.error ? <ApiError error={run.error} title="The batch action failed" /> : null}
+      {outcome ? (
+        <div role="status" className="mb-2 rounded-md border border-border px-3 py-2 text-sm">
+          <p className="font-medium">{done} of {outcome.asked} {outcome.asked === 1 ? "quote" : "quotes"} {outcome.action === "archive" ? "archived" : outcome.action === "expire" ? "expired" : "revoked"}.</p>
+          {notDone.length > 0 ? (
+            <ul className="mt-1 list-disc pl-5 text-muted-foreground">
+              {notDone.map((r) => <li key={r.quote_id}>{outcome.names[r.quote_id] ?? r.quote_id}: {r.status === "skipped" ? `skipped (${(r.detail ?? "not applicable").replace(/_/g, " ")})` : `failed (${BATCH_REASON[r.detail ?? ""] ?? (r.detail ?? "error").replace(/_/g, " ")})`}</li>)}
+            </ul>
+          ) : null}
+        </div>
+      ) : null}
+      {pending ? (
+        <ConfirmSpendDialog open tier="destructive" title={COPY[pending.action].title(pending.ids.length)} confirmLabel={COPY[pending.action].confirm} affected={pending.ids.length} confirming={run.loading}
+          description={<div className="space-y-1"><p>{COPY[pending.action].effect}</p>{selected.length > pending.ids.length ? <p>{selected.length - pending.ids.length} of the {selected.length} selected {selected.length - pending.ids.length === 1 ? "quote does" : "quotes do"} not qualify and {selected.length - pending.ids.length === 1 ? "is" : "are"} left out.</p> : null}</div>}
+          onConfirm={() => void run.mutate(pending)} onCancel={() => setPending(null)} />
+      ) : null}
+    </div>
+  );
+}

package/blocks/quotes/components/quote-documents.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+/**
+ * QuoteDocuments: the org's reusable legal documents (NDA, MSA, other PDFs) that a quote template can attach.
+ *
+ * SDK operations, in order:
+ *   1. listQuoteDocuments   GET    /quote-settings/documents        read
+ *   2. uploadQuoteDocument  POST   /quote-settings/documents        external tier, stores a PDF (org admin); multipart: file, title, doc_type
+ *   3. deleteQuoteDocument  DELETE /quote-settings/documents/{id}   DESTRUCTIVE (org admin) -> ConfirmSpendDialog
+ *
+ * Uploading sends nobody anything, so it runs on one click. The file is checked here first: PDF only, and under the app
+ * proxy's request cap (about 5 MB; the API itself allows 10 MB). The API silently files an unknown type as `other`, so the
+ * form only offers nda, msa and other. Delete removes the library entry: it can no longer be attached to a template or a quote.
+ */
+import { useRef, useState } from "react";
+import { FileText, Trash2, Upload } from "lucide-react";
+import { Button, Input, Label, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { UPLOAD_LIMIT_LABEL, fileSize, pdfProblem } from "../lib/quote-admin";
+import { body, text, type Rec } from "../lib/quotes";
+
+const DOC_TYPES: Array<[string, string]> = [["nda", "NDA"], ["msa", "MSA"], ["other", "Other"]];
+
+export function QuoteDocuments({ className }: { className?: string }) {
+  const q = useG8Query((signal) => g8Get("/quote-settings/documents", undefined, { signal }), []);
+  const rows = (Array.isArray(body(q.data).items) ? body(q.data).items : []) as Rec[];
+  const [title, setTitle] = useState("");
+  const [docType, setDocType] = useState("other");
+  const [file, setFile] = useState<File | null>(null);
+  const [problem, setProblem] = useState<string | null>(null);
+  const [removing, setRemoving] = useState<Rec | null>(null);
+  const input = useRef<HTMLInputElement>(null);
+
+  const upload = useG8Mutation(async () => {
+    const form = new FormData();
+    form.append("file", file as File);
+    form.append("title", title.trim());
+    form.append("doc_type", docType);
+    return g8Post("/quote-settings/documents", form);
+  }, { onSuccess: () => { setTitle(""); setFile(null); setDocType("other"); if (input.current) input.current.value = ""; void q.refetch(); } });
+  const remove = useG8Mutation((id: string) => g8Delete(`/quote-settings/documents/${encodeURIComponent(id)}`), { onSuccess: () => { setRemoving(null); void q.refetch(); } });
+
+  const submit = () => {
+    const bad = pdfProblem(file) ?? (title.trim() ? null : "Give the document a title.");
+    setProblem(bad);
+    if (!bad) void upload.mutate(undefined);
+  };
+
+  return (
+    <SectionCard className={className} title="Document library" icon={<FileText />} description={`PDFs a template can attach to its quotes, up to ${UPLOAD_LIMIT_LABEL} each. Needs an organization admin.`} flush>
+      {q.error ? <div className="p-4"><ApiError error={q.error} title="Could not load documents" onRetry={() => void q.refetch()} /></div> : null}
+      {q.loading && !q.data ? <div className="p-4"><Skeleton className="h-16 w-full" aria-label="Loading documents" /></div> : !q.error && rows.length === 0 ? (
+        <EmptyState compact bordered title="No documents yet" description="Upload an NDA or MSA to attach it to quote templates." />
+      ) : rows.length > 0 ? (
+        <Table>
+          <TableHeader><TableRow><TableHead>Title</TableHead><TableHead>Type</TableHead><TableHead>File</TableHead><TableHead><span className="sr-only">Actions</span></TableHead></TableRow></TableHeader>
+          <TableBody>
+            {rows.map((d) => (
+              <TableRow key={text(d.id)}>
+                <TableCell className="font-medium">{text(d.title, "Untitled")}</TableCell>
+                <TableCell><StatusPill tone="neutral">{text(d.doc_type, "other").toUpperCase()}</StatusPill></TableCell>
+                <TableCell className="text-muted-foreground">{text(d.file_name)} {fileSize(d.file_size)}</TableCell>
+                <TableCell className="text-right"><Button size="sm" variant="ghost" aria-label={`Delete ${text(d.title, "document")}`} onClick={() => setRemoving(d)}><Trash2 className="size-4" aria-hidden /></Button></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : null}
+      <form className="grid gap-3 border-t border-border p-4 sm:grid-cols-[1fr_8rem]" onSubmit={(e) => { e.preventDefault(); submit(); }}>
+        <div className="space-y-1"><Label htmlFor="doc-title">Document title</Label><Input id="doc-title" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Mutual NDA" /></div>
+        <div className="space-y-1"><Label htmlFor="doc-type">Type</Label>
+          <select id="doc-type" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={docType} onChange={(e) => setDocType(e.target.value)}>{DOC_TYPES.map(([v, l]) => <option key={v} value={v}>{l}</option>)}</select></div>
+        <div className="space-y-1 sm:col-span-2"><Label htmlFor="doc-file">PDF file</Label>
+          <input id="doc-file" ref={input} type="file" accept="application/pdf,.pdf" className="block w-full text-sm" onChange={(e) => { setFile(e.target.files?.[0] ?? null); setProblem(null); }} /></div>
+        <div className="sm:col-span-2"><Button type="submit" loading={upload.loading}><Upload className="size-4" aria-hidden />Upload document</Button></div>
+        {problem ? <p role="alert" className="text-sm text-destructive sm:col-span-2">{problem}</p> : null}
+        {upload.error ? <div className="sm:col-span-2"><ApiError error={upload.error} title="Could not upload the document" /></div> : null}
+      </form>
+      {remove.error ? <div className="p-4"><ApiError error={remove.error} title="Could not delete the document" /></div> : null}
+      {removing ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Delete "${text(removing.title, "this document")}"?`} confirmLabel="Delete document" affected={1} confirming={remove.loading}
+          description="The document leaves the library, so it can no longer be attached to a template or a quote. Check your templates after: one that listed it keeps pointing at a document that is gone."
+          onConfirm={() => void remove.mutate(text(removing.id))} onCancel={() => setRemoving(null)} />
+      ) : null}
+    </SectionCard>
+  );
+}

package/blocks/quotes/components/quote-evidence.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+/**
+ * QuoteEvidence: the PDFs attached to a quote as internal evidence (a countersigned copy received outside the product,
+ * a purchase order). They are for your team only: the customer never sees them and nothing is sent.
+ *
+ * SDK operations, in order:
+ *   1. listQuoteEvidence      GET  /quotes/{id}/evidence                 read   - `{ items: [{ id, file_name, created_at, uploaded_by }] }`
+ *   2. uploadQuoteEvidence    POST /quotes/{id}/evidence                 write  - multipart `file`, PDF only; answers `{ id }`
+ *   3. downloadQuoteEvidence  GET  /quotes/{id}/evidence/{evidence_id}   read   - answers `{ url }`, a link that expires after 60 seconds
+ *
+ * The API has no delete for evidence, so an attached PDF stays: the form says so before the upload. The file is checked
+ * here first (PDF header and end marker, which the API also demands, and the app proxy's request cap) so a bad file is
+ * refused with a reason instead of a 400 or 413.
+ */
+import { useRef, useState } from "react";
+import { Download, Paperclip, Upload } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { UPLOAD_LIMIT_LABEL, pdfProblem } from "../lib/quote-admin";
+import { body, text, type Rec } from "../lib/quotes";
+
+/** The API rejects a file that does not start with %PDF- or has no %%EOF in its last KB. Check both before uploading. */
+export async function pdfStructureProblem(file: File): Promise<string | null> {
+  const bytes = (blob: Blob) => new Promise<Uint8Array>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsArrayBuffer(blob);
+  });
+  const head = new TextDecoder().decode(await bytes(file.slice(0, 5)));
+  const tail = new TextDecoder("latin1").decode(await bytes(file.slice(Math.max(0, file.size - 1024))));
+  if (!head.startsWith("%PDF-")) return "That file is not a PDF.";
+  if (!tail.includes("%%EOF")) return "That PDF looks incomplete (no end marker). Export it again and retry.";
+  return null;
+}
+
+export function QuoteEvidence({ quoteId, className }: { quoteId: string; className?: string }) {
+  const base = `/quotes/${encodeURIComponent(quoteId)}/evidence`;
+  const q = useG8Query((signal) => g8Get(base, undefined, { signal }), [quoteId]);
+  const rows = (Array.isArray(body(q.data).items) ? body(q.data).items : []) as Rec[];
+  const [file, setFile] = useState<File | null>(null);
+  const [problem, setProblem] = useState<string | null>(null);
+  const input = useRef<HTMLInputElement>(null);
+
+  const upload = useG8Mutation(async () => {
+    const form = new FormData();
+    form.append("file", file as File);
+    return g8Post(base, form);
+  }, { onSuccess: () => { setFile(null); if (input.current) input.current.value = ""; void q.refetch(); } });
+  const download = useG8Mutation(async (id: string) => {
+    const res = body(await g8Get(`${base}/${encodeURIComponent(id)}`));
+    const url = text(res.url);
+    if (!/^https?:\/\//.test(url)) throw new Error("The API returned no download link for this file.");
+    window.open(url, "_blank", "noopener,noreferrer");
+  });
+
+  const submit = async () => {
+    const bad = pdfProblem(file) ?? (file ? await pdfStructureProblem(file) : null);
+    setProblem(bad);
+    if (!bad) void upload.mutate(undefined);
+  };
+
+  return (
+    <SectionCard className={className} title="Evidence" icon={<Paperclip />} description="Internal PDFs for this quote. The customer does not see them." flush>
+      {q.error ? <div className="p-4"><ApiError error={q.error} title="Could not load evidence" onRetry={() => void q.refetch()} /></div> : null}
+      {q.loading && !q.data ? <div className="p-4"><Skeleton className="h-12 w-full" aria-label="Loading evidence" /></div> : !q.error && rows.length === 0 ? (
+        <EmptyState compact title="No evidence attached" description="Attach a countersigned copy or a purchase order." />
+      ) : (
+        <ul className="divide-y divide-border">
+          {rows.map((r) => (
+            <li key={text(r.id)} className="flex items-center justify-between gap-2 px-4 py-2 text-sm">
+              <span><span className="font-medium">{text(r.file_name, "evidence.pdf")}</span><span className="block text-xs text-muted-foreground">{r.created_at ? new Date(text(r.created_at)).toLocaleString() : ""}{r.uploaded_by ? ` · ${text(r.uploaded_by)}` : ""}</span></span>
+              <Button size="sm" variant="outline" loading={download.loading} aria-label={`Download ${text(r.file_name, "evidence")}`} onClick={() => void download.mutate(text(r.id))}><Download className="size-4" aria-hidden />Download</Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {download.error ? <div className="px-4 pb-3"><ApiError error={download.error} title="Could not get the file" /></div> : null}
+      <form className="space-y-2 border-t border-border p-4" onSubmit={(e) => { e.preventDefault(); void submit(); }}>
+        <label className="block text-sm font-medium" htmlFor={`ev-file-${quoteId}`}>Attach a PDF</label>
+        <input id={`ev-file-${quoteId}`} ref={input} type="file" accept="application/pdf,.pdf" className="block w-full text-sm" onChange={(e) => { setFile(e.target.files?.[0] ?? null); setProblem(null); }} />
+        <p className="text-xs text-muted-foreground">PDF only, up to {UPLOAD_LIMIT_LABEL}. An attached file cannot be removed afterwards.</p>
+        <Button type="submit" loading={upload.loading}><Upload className="size-4" aria-hidden />Attach PDF</Button>
+        {problem ? <p role="alert" className="text-sm text-destructive">{problem}</p> : null}
+        {upload.error ? <ApiError error={upload.error} title="Could not attach the PDF" /> : null}
+      </form>
+    </SectionCard>
+  );
+}

package/blocks/quotes/components/quote-list.tsx

@@ -6,11 +6,15 @@
  * SDK operations, in the order the screen uses them:
  *   1. listQuotes  GET /quotes?status&include_archived&mashup_company_id&deal_id&page&limit  (read; `{ items, total, page, limit }`)
  *
- * Read-only: no billable, external or destructive call, so no confirmation. Pass `dealId` or `companyId` to show the
- * quotes of one deal or company (for a tab on a deal page). `onOpen` receives the quote id for QuoteViewer.
+ * Reading needs no confirmation. Pass `dealId` or `companyId` to show the quotes of one deal or company (for a tab on a
+ * deal page). `onOpen` receives the quote id for QuoteViewer.
+ *
+ * With `selectable`, each row gets a checkbox and the ticked quotes can be archived, expired or revoked together
+ * (QuoteBatchActions: id-addressed, confirmed, result read row by row). The selection is cleared when the filter or page
+ * changes and pruned to the quotes still on the page after every reload. `onChanged` tells the caller a batch ran.
  */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
 import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
@@ -18,6 +22,7 @@ import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { body, money, statusLabel, text } from "../lib/quotes";
 import type { Rec } from "../lib/quotes";
+import { QuoteBatchActions } from "./quote-batch-actions";
 
 export interface QuoteListProps {
   dealId?: string;
@@ -29,12 +34,16 @@ export interface QuoteListProps {
   refreshKey?: number;
   /** Mark this quote row as the open one. */
   selectedId?: string | null;
+  /** Tick quotes to archive, expire or revoke them together. */
+  selectable?: boolean;
+  /** Called after a batch action ran, so the screen can reload its numbers. */
+  onChanged?: () => void;
   className?: string;
 }
 
 const STATUSES = ["", "draft", "sent", "viewed", "accepted", "declined", "voided", "expired", "archived"];
 
-export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, refreshKey, selectedId, className }: QuoteListProps) {
+export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, refreshKey, selectedId, selectable, onChanged, className }: QuoteListProps) {
   const [status, setStatus] = useState("");
   const [archived, setArchived] = useState(false);
   const [page, setPage] = useState(1);
@@ -45,6 +54,13 @@ export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, ref
   const data = body(q.data);
   const rows = (Array.isArray(data.items) ? data.items : []) as Rec[];
   const total = typeof data.total === "number" ? data.total : rows.length;
+  const [ticked, setTicked] = useState<string[]>([]);
+  // A new filter or page is a different set of rows: forget the ticks. After a reload keep only quotes still on the page.
+  useEffect(() => { setTicked([]); }, [status, archived, page, dealId, companyId]);
+  const idsOnPage = rows.map((r) => text(r.id)).join(",");
+  useEffect(() => { setTicked((cur) => { const here = new Set(idsOnPage.split(",")); const next = cur.filter((id) => here.has(id)); return next.length === cur.length ? cur : next; }); }, [idsOnPage]);
+  const tickedRows = rows.filter((r) => ticked.includes(text(r.id)));
+  const allTicked = rows.length > 0 && tickedRows.length === rows.length;
 
   return (
     <div className={className}>
@@ -56,14 +72,16 @@ export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, ref
         {onNew ? <Button className="ml-auto" onClick={onNew}>New quote</Button> : null}
       </div>
       {q.error ? <ApiError error={q.error} onRetry={() => void q.refetch()} /> : null}
+      {selectable ? <QuoteBatchActions selected={tickedRows} onDone={() => { void q.refetch(); onChanged?.(); }} /> : null}
       {q.loading && !q.data ? <div className="space-y-2" aria-busy="true">{[0, 1, 2].map((i) => <Skeleton key={i} className="h-10 w-full" />)}</div> : !q.error && rows.length === 0 ? (
         <EmptyState title="No quotes" description="Create a quote from a deal, pick products, and send it for signature." action={onNew ? <Button onClick={onNew}>New quote</Button> : undefined} />
       ) : (
         <Table>
-          <TableHeader><TableRow><TableHead>Quote</TableHead><TableHead>Status</TableHead><TableHead className="text-right">Total</TableHead><TableHead>Sent</TableHead></TableRow></TableHeader>
+          <TableHeader><TableRow>{selectable ? <TableHead className="w-8"><input type="checkbox" aria-label="Select all quotes on this page" checked={allTicked} onChange={(e) => setTicked(e.target.checked ? rows.map((r) => text(r.id)) : [])} /></TableHead> : null}<TableHead>Quote</TableHead><TableHead>Status</TableHead><TableHead className="text-right">Total</TableHead><TableHead>Sent</TableHead></TableRow></TableHeader>
           <TableBody>
             {rows.map((r) => (
               <TableRow key={text(r.id)} data-state={selectedId === text(r.id) ? "selected" : undefined}>
+                {selectable ? <TableCell><input type="checkbox" aria-label={`Select ${text(r.title, "Untitled quote")}`} checked={ticked.includes(text(r.id))} onChange={(e) => setTicked(e.target.checked ? [...ticked, text(r.id)] : ticked.filter((x) => x !== text(r.id)))} /></TableCell> : null}
                 <TableCell><button type="button" className="font-medium hover:underline" onClick={() => onOpen?.(text(r.id))}>{text(r.title, "Untitled quote")}</button><div className="text-muted-foreground text-xs">{text(r.quote_number)}</div></TableCell>
                 <TableCell>{statusLabel(r.status)}</TableCell>
                 <TableCell className="text-right">{money(r.total, text(r.currency, "USD"))}</TableCell>