@graph8/sdk 0.370.0 → 0.374.0

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-lifecycle-actions.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+/**
+ * QuoteLifecycleActions: what you can do with a quote after it exists: download the PDF, archive or restore it, and
+ * for a quote that is out for signature, expire it, revoke it or mark it accepted. QuoteViewer renders it under the
+ * header; it can also be mounted on its own for a quote you already loaded.
+ *
+ * SDK operations, in order:
+ *   1. GET  /quotes/{id}/pdf                (quotes.getQuotePdf)       read        - the document as the customer sees it
+ *   2. POST /quotes/{id}/archive            (quotes.archiveQuote)      DESTRUCTIVE - off the active list, reversible -> ConfirmSpendDialog
+ *      POST /quotes/{id}/unarchive          (quotes.unarchiveQuote)    external    -> ConfirmSpendDialog
+ *   3. POST /quotes/{id}/expire             (quotes.expireQuote)       DESTRUCTIVE - terminal, the customer's link stops working -> ConfirmSpendDialog
+ *   4. POST /quotes/{id}/revoke             (quotes.revokeQuote)       DESTRUCTIVE - terminal, withdraws a sent quote -> ConfirmSpendDialog
+ *   5. POST /quotes/{id}/mark-accepted { evidence_type, evidence_note }  (quotes.markQuoteAccepted)  external - RAISES AN INVOICE -> ConfirmSpendDialog
+ * Status rules (the API enforces them too): expire, revoke and mark accepted apply to sent or viewed quotes; archive
+ * to any quote that is not archived. Marking accepted runs the same provisioning as a signed envelope, so use it only
+ * when the customer paid or signed outside the product; the evidence is stored on the audit trail.
+ * The PDF endpoint answers JSON: a link (`url`, `pdf_url`, `download_url`) opens in a new tab, base64 content downloads.
+ */
+import { useState } from "react";
+import { Download } from "lucide-react";
+import { Button, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { asRec, text } from "../lib/quotes";
+
+export interface QuoteLifecycleActionsProps {
+  quoteId: string;
+  /** The quote's status: draft, sent, viewed, accepted, declined, voided, expired or archived. */
+  status: string;
+  /** True when the quote is archived (a status of "archived", or an archived flag on the record). */
+  archived?: boolean;
+  /** Shown in the dialogs and used for the PDF file name. */
+  title?: string;
+  quoteNumber?: string;
+  /** Called after any lifecycle change, so the caller reloads the quote. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+type Pending = "archive" | "unarchive" | "expire" | "revoke" | "accept";
+
+export const EVIDENCE_TYPES: Array<[string, string]> = [
+  ["offline_signature", "Signed offline"],
+  ["customer_email", "Customer confirmed by email"],
+  ["verbal_authorization", "Verbal authorization"],
+  ["payment_received", "Payment received"],
+];
+
+function base64Bytes(b64: string): Uint8Array {
+  const bin = atob(b64.replace(/^data:application\/pdf;base64,/, "").replace(/\s/g, ""));
+  return Uint8Array.from(bin, (c) => c.charCodeAt(0));
+}
+
+/** Open or save the PDF an `/pdf` response describes. Throws when it carries neither a link nor content. */
+export function deliverPdf(res: unknown, filename: string): void {
+  const raw = asRec(res);
+  const data = "data" in raw ? raw.data : raw;
+  const rec = asRec(data);
+  const link = typeof data === "string" && /^https?:/.test(data) ? data : text(rec.pdf_url ?? rec.download_url ?? rec.signed_url ?? rec.url ?? rec.link);
+  if (link) {
+    window.open(link, "_blank", "noopener,noreferrer");
+    return;
+  }
+  const b64 = typeof data === "string" ? data : text(rec.pdf_base64 ?? rec.content_base64 ?? rec.base64 ?? rec.pdf ?? rec.content);
+  if (!b64) throw new Error("The API returned no PDF for this quote (no link and no file content).");
+  const url = URL.createObjectURL(new Blob([base64Bytes(b64) as BlobPart], { type: "application/pdf" }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}
+
+export function QuoteLifecycleActions({ quoteId, status, archived = false, title, quoteNumber, onChanged, className }: QuoteLifecycleActionsProps) {
+  const base = `/quotes/${encodeURIComponent(quoteId)}`;
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [evidenceType, setEvidenceType] = useState(EVIDENCE_TYPES[0][0]);
+  const [evidenceNote, setEvidenceNote] = useState("");
+  const [needNote, setNeedNote] = useState(false);
+  const name = title || "this quote";
+  const out = status === "sent" || status === "viewed";
+  const isArchived = archived || status === "archived";
+
+  const pdf = useG8Mutation(async () => { deliverPdf(await g8Get(`${base}/pdf`), `${quoteNumber || "quote"}.pdf`); });
+  const run = useG8Mutation(async (kind: Pending) => {
+    if (kind === "accept") return g8Post(`${base}/mark-accepted`, { evidence_type: evidenceType, evidence_note: evidenceNote.trim() });
+    return g8Post(`${base}/${kind}`);
+  }, {
+    invalidates: [["quotes"]],
+    onSuccess: () => { setPending(null); setEvidenceNote(""); setNeedNote(false); onChanged?.(); },
+  });
+  const cancel = () => { setPending(null); setNeedNote(false); };
+  const confirm = (kind: Pending) => {
+    if (kind === "accept" && !evidenceNote.trim()) { setNeedNote(true); return; }
+    void run.mutate(kind);
+  };
+
+  return (
+    <div className={className}>
+      <div className="flex flex-wrap items-center gap-2" role="group" aria-label="Quote lifecycle">
+        {isArchived ? <span className="text-xs text-muted-foreground">Archived</span> : null}
+        <Button size="sm" variant="outline" loading={pdf.loading} onClick={() => void pdf.mutate(undefined)}><Download className="size-4" aria-hidden />Download PDF</Button>
+        {out ? <Button size="sm" variant="outline" onClick={() => setPending("accept")}>Mark accepted</Button> : null}
+        {out ? <Button size="sm" variant="ghost" onClick={() => setPending("revoke")}>Revoke</Button> : null}
+        {out ? <Button size="sm" variant="ghost" onClick={() => setPending("expire")}>Expire</Button> : null}
+        {isArchived ? <Button size="sm" variant="ghost" onClick={() => setPending("unarchive")}>Unarchive</Button> : <Button size="sm" variant="ghost" onClick={() => setPending("archive")}>Archive</Button>}
+      </div>
+      {pdf.error ? <ApiError error={pdf.error} title="Could not get the PDF" /> : null}
+      {run.error ? <ApiError error={run.error} title="That quote action failed" /> : null}
+
+      {pending === "archive" ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Archive "${name}"?`} confirmLabel="Archive" affected={1} confirming={run.loading}
+          description="The quote leaves the active list. Nothing is sent and you can unarchive it later." onConfirm={() => confirm("archive")} onCancel={cancel} />
+      ) : null}
+      {pending === "unarchive" ? (
+        <ConfirmSpendDialog open tier="external" title={`Unarchive "${name}"?`} confirmLabel="Unarchive" confirming={run.loading}
+          description="The quote returns to the active list." onConfirm={() => confirm("unarchive")} onCancel={cancel} />
+      ) : null}
+      {pending === "expire" ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Expire "${name}"?`} confirmLabel="Expire quote" affected={1} confirming={run.loading}
+          description="The customer's link stops working. This is final: create a new quote to offer it again." onConfirm={() => confirm("expire")} onCancel={cancel} />
+      ) : null}
+      {pending === "revoke" ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Revoke "${name}"?`} confirmLabel="Revoke quote" affected={1} confirming={run.loading}
+          description="Withdraws the quote you already sent, so the customer can no longer sign it. This is final: use it when the offer itself was wrong." onConfirm={() => confirm("revoke")} onCancel={cancel} />
+      ) : null}
+      {pending === "accept" ? (
+        <ConfirmSpendDialog open tier="external" title={`Mark "${name}" accepted?`} confirmLabel="Mark accepted" recipients={1} confirming={run.loading}
+          description={(
+            <div className="space-y-2 text-left">
+              <p>Accepts the quote on the customer&apos;s behalf. This raises an invoice or subscription with your billing provider, the same as a signed quote. Use it only when the customer paid or signed outside the product.</p>
+              <select aria-label="Evidence type" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={evidenceType} onChange={(e) => setEvidenceType(e.target.value)}>
+                {EVIDENCE_TYPES.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
+              </select>
+              <Textarea aria-label="Evidence note" rows={3} placeholder="Describe the evidence (required), for example the email date or payment reference" value={evidenceNote} onChange={(e) => { setEvidenceNote(e.target.value); setNeedNote(false); }} />
+              {needNote ? <p role="alert" className="text-sm text-destructive">Add a note describing the evidence before accepting.</p> : null}
+            </div>
+          )}
+          onConfirm={() => confirm("accept")} onCancel={cancel} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -4,13 +4,17 @@
  * QuoteList: quotes with a status filter, totals in the quote's own currency, and paging.
  *
  * SDK operations, in the order the screen uses them:
- *   1. listQuotes  GET /quotes?status&mashup_company_id&deal_id&page&limit  (read; `{ items, total, page, limit }`)
+ *   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,21 +34,33 @@ 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);
   const q = useG8Query(
-    (signal) => g8Get("/quotes", { status: status || undefined, deal_id: dealId, mashup_company_id: companyId, page, limit: pageSize }, { signal }),
-    [status, dealId, companyId, page, pageSize, refreshKey],
+    (signal) => g8Get("/quotes", { status: status || undefined, include_archived: archived || undefined, deal_id: dealId, mashup_company_id: companyId, page, limit: pageSize }, { signal }),
+    [status, archived, dealId, companyId, page, pageSize, 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 [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}>
@@ -51,17 +68,20 @@ export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, ref
         <select aria-label="Status" value={status} onChange={(e) => { setStatus(e.target.value); setPage(1); }} className="border-input bg-background h-9 rounded-md border px-2 text-sm">
           {STATUSES.map((s) => <option key={s} value={s}>{s ? statusLabel(s) : "All statuses"}</option>)}
         </select>
+        <label className="flex items-center gap-1 text-sm text-muted-foreground"><input type="checkbox" checked={archived} onChange={(e) => { setArchived(e.target.checked); setPage(1); }} />Include archived</label>
         {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>

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

@@ -5,7 +5,7 @@
  *
  * ProductCatalog: every quotable product (Stripe and manual) as a list, with a full product record (all fields and
  * every price) in a detail panel, and a "Start a quote" action.
- * QuoteDealTab: the deal a quote belongs to, as a tab of the quote's detail.
+ * QuoteDealTab: the deal a quote belongs to, as a tab of the quote's detail, with "Create another quote" (CreateQuoteFromDeal).
  *
  * SDK operations, in order:
  *   ProductCatalog: GET /quotable-products?page&limit  (quotes.listQuotableProducts)  read
@@ -28,6 +28,7 @@ import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { formatMoney, type Deal } from "@/g8/deals/lib/deals-types";
 import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { CreateQuoteFromDeal } from "./create-quote-from-deal";
 import { body, frequencyOf, money, text, type QuotableProduct, type ProductPrice } from "../lib/quotes";
 import { useBrand } from "@/g8/hooks/use-brand";
 
@@ -113,7 +114,7 @@ export function QuoteDealTab({ quoteId, onOpenDeal }: { quoteId: string; onOpenD
   const d = q.data;
   if (!d) return <EmptyState title="No deal on this quote" />;
   return (
-    <SectionCard title={d.name || "Deal"} actions={onOpenDeal ? <Button size="sm" variant="outline" onClick={() => onOpenDeal(d.id)}>Open deal</Button> : undefined}>
+    <SectionCard title={d.name || "Deal"} actions={<>{onOpenDeal ? <Button size="sm" variant="outline" onClick={() => onOpenDeal(d.id)}>Open deal</Button> : null}<CreateQuoteFromDeal dealId={d.id} label="Create another quote" /></>}>
       <KeyValueList columns={2} items={[
         { label: "Stage", value: d.stage_name }, { label: "Amount", value: d.amount == null ? null : formatMoney(d.amount, d.currency) }, { label: "Owner", value: d.owner_name ?? d.owner_email },
         { label: "Close date", value: d.close_date?.slice(0, 10) }, { label: "Pipeline", value: d.pipeline_name }, { label: "Contacts", value: d.contact_count },