@graph8/sdk 0.362.0 → 0.373.0

package/blocks/quotes/components/create-quote-from-deal.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+/**
+ * CreateQuoteFromDeal: a "Create quote from this deal" button. It opens a side sheet with the quote builder for the
+ * deal, and after saving the draft shows the quote itself (send, duplicate, lifecycle) in the same sheet.
+ *
+ * Drop it into the deals screen's Quotes tab: `<DealsScreen renderQuoteActions={(deal) => <CreateQuoteFromDeal dealId={deal.id} />} />`.
+ * It cannot live in the deals block because quotes depends on deals, not the other way round.
+ *
+ * SDK operations (through QuoteBuilder and QuoteViewer): listQuotableProducts, searchQuoteContacts, createQuote and
+ * updateQuotePatch (a draft emails nobody, so it saves in one click), then getQuote and the viewer's actions. Sending,
+ * editing a sent quote as a draft, deleting and every lifecycle change stay behind ConfirmSpendDialog in QuoteViewer.
+ */
+import { useState } from "react";
+import { FileText } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { QuoteBuilder } from "./quote-builder";
+import { QuoteViewer } from "./quote-viewer";
+
+export interface CreateQuoteFromDealProps {
+  dealId: string;
+  /** Company (mashup company id) used to find signer contacts. */
+  companyId?: number;
+  label?: string;
+  /** Called with the new quote's id once the draft is saved. */
+  onCreated?: (quoteId: string) => void;
+  className?: string;
+}
+
+export function CreateQuoteFromDeal({ dealId, companyId, label = "Create quote from this deal", onCreated, className }: CreateQuoteFromDealProps) {
+  const [open, setOpen] = useState(false);
+  const [quoteId, setQuoteId] = useState<string | null>(null);
+  const [editing, setEditing] = useState(false);
+  const close = (next: boolean) => { setOpen(next); if (!next) { setQuoteId(null); setEditing(false); } };
+  return (
+    <>
+      <Button className={className} size="sm" onClick={() => setOpen(true)}><FileText className="size-4" aria-hidden />{label}</Button>
+      <FormSheet open={open} onOpenChange={close} title={quoteId ? "Quote" : "New quote"} description={quoteId ? undefined : "The quote is attached to this deal."} width="xl">
+        {open ? (quoteId && editing
+          ? <QuoteBuilder key={`edit-${quoteId}`} quoteId={quoteId} onSaved={(id) => { setQuoteId(id); setEditing(false); }} />
+          : quoteId
+            ? <QuoteViewer key={quoteId} quoteId={quoteId} onEdit={() => setEditing(true)} onOpenQuote={setQuoteId} onDeleted={() => close(false)} />
+            : <QuoteBuilder key={dealId} dealId={dealId} companyId={companyId} onSaved={(id) => { setQuoteId(id); onCreated?.(id); }} />) : null}
+      </FormSheet>
+    </>
+  );
+}

package/blocks/quotes/components/product-picker.tsx

@@ -22,6 +22,7 @@ import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { body, frequencyOf, lineFromProduct, money, text } from "../lib/quotes";
 import type { LineItem, ProductPrice, QuotableProduct } from "../lib/quotes";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface ProductPickerProps {
   /** Only offer prices in this currency (the quote's currency). */
@@ -34,6 +35,7 @@ export interface ProductPickerProps {
 const intervalLabel = (p: ProductPrice) => (frequencyOf(p.recurring_interval) === "one_time" ? "one time" : `per ${p.recurring_interval}`);
 
 export function ProductPicker({ currency, onPick, pageSize = 25, className }: ProductPickerProps) {
+  const brand = useBrand();
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
   const q = useG8Query((signal) => g8Get("/quotable-products", { currency: currency?.toUpperCase(), page, limit: pageSize }, { signal }), [currency, page, pageSize]);
@@ -49,7 +51,7 @@ export function ProductPicker({ currency, onPick, pageSize = 25, className }: Pr
       {q.error ? <ApiError error={q.error} onRetry={() => void q.refetch()} /> : null}
       {q.loading && !q.data ? <div className="space-y-2" aria-busy="true">{[0, 1, 2].map((i) => <Skeleton key={i} className="h-12 w-full" />)}</div> : null}
       {!q.loading && !q.error && shown.length === 0 ? (
-        <EmptyState title="No quotable products" description="Mark a Stripe product as quotable, or add a manual product, in graph8's quote settings." />
+        <EmptyState title="No quotable products" description={`Mark a Stripe product as quotable, or add a manual product, in ${brand.linkLabel}'s quote settings.`} />
       ) : null}
       <ul className="divide-y rounded-md border">
         {shown.map((p) => (

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

@@ -178,7 +178,7 @@ export function QuoteBuilder({ quoteId, dealId, companyId, currency = "USD", onS
           <div className="text-right text-sm" data-testid="totals">
             <div>Subtotal {money(sub, form.currency)}</div>
             <div>Tax {money(taxCents, form.currency)}</div>
-            <div className="font-semibold">Total {money(sub + taxCents, form.currency)}</div>
+            <div className="font-medium">Total {money(sub + taxCents, form.currency)}</div>
           </div>
           <details>
             <summary className="cursor-pointer text-sm font-medium">Add a product</summary>

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,7 +4,7 @@
  * 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.
@@ -36,10 +36,11 @@ const STATUSES = ["", "draft", "sent", "viewed", "accepted", "declined", "voided
 
 export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, refreshKey, selectedId, 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[];
@@ -51,6 +52,7 @@ 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}

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
@@ -27,7 +27,10 @@ import { useUrlState } from "@/g8/hooks/use-url-state";
 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";
 
 const productKey = (p: QuotableProduct) => p.stripe_product_id ?? p.manual_product_id ?? p.name;
 const cadence = (p: ProductPrice) => (frequencyOf(p.recurring_interval) === "one_time" ? "One time" : `Per ${p.recurring_interval}`);
@@ -39,6 +42,7 @@ export interface ProductCatalogProps {
 }
 
 export function ProductCatalog({ onStartQuote, pageSize = 50 }: ProductCatalogProps) {
+  const brand = useBrand();
   const [selected, setSelected] = useUrlState("product");
   const [mode, setMode] = useUrlState("view");
   const q = useG8Query((signal) => g8Get("/quotable-products", { page: 1, limit: pageSize }, { signal }), [pageSize]);
@@ -48,13 +52,13 @@ export function ProductCatalog({ onStartQuote, pageSize = 50 }: ProductCatalogPr
   const close = () => { setSelected(null); setMode(null); };
 
   const list = q.error ? <ApiError error={q.error} title="Could not load products" onRetry={() => void q.refetch()} /> : q.loading && !q.data ? <Skeleton className="h-40 w-full" aria-label="Loading products" /> : items.length === 0 ? (
-    <EmptyState icon={<Package className="size-8" />} title="No quotable products" description="Mark a Stripe product as quotable, or add a manual product, in graph8's quote settings." />
+    <EmptyState icon={<Package className="size-8" />} title="No quotable products" description={`Mark a Stripe product as quotable, or add a manual product, in ${brand.linkLabel}'s quote settings.`} />
   ) : (
     <Table>
       <TableHeader><TableRow><TableHead>Product</TableHead><TableHead>Source</TableHead><TableHead className="text-right">Prices</TableHead></TableRow></TableHeader>
       <TableBody>
         {items.map((p) => (
-          <TableRow key={productKey(p)} className="cursor-pointer" data-state={productKey(p) === selected ? "selected" : undefined} onClick={() => setSelected(productKey(p))}>
+          <TableRow key={productKey(p)} className="cursor-pointer" data-state={productKey(p) === selected ? "selected" : undefined} {...rowActivationProps(() => setSelected(productKey(p)))}>
             <TableCell><button type="button" className="font-medium hover:underline" onClick={(e) => { e.stopPropagation(); setSelected(productKey(p)); }}>{p.name}</button><div className="text-xs text-muted-foreground">{p.category}</div></TableCell>
             <TableCell><StatusPill tone="neutral">{p.source === "stripe" ? "Stripe" : "Manual"}</StatusPill></TableCell>
             <TableCell className="text-right tabular-nums">{p.prices.length}</TableCell>
@@ -110,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 },

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

@@ -11,6 +11,9 @@
  *   4. duplicateQuote   POST   /quotes/{id}/duplicate         (external tier, but only copies into a new draft)
  *   5. deleteQuote      DELETE /quotes/{id}                   (destructive; drafts only)
  *
+ * The lifecycle row (QuoteLifecycleActions): download the PDF, archive or unarchive, and for a sent quote expire, revoke or
+ * mark accepted. Those operations live in that component and each risky one is confirmed there.
+ *
  * Send, edit-as-draft and delete go through ConfirmSpendDialog. Duplicate creates an unsent draft and emails
  * nobody, so it runs on one click (same reasoning as saving a draft in QuoteBuilder).
  * Send needs a signer on the quote; without one the button explains what is missing instead of failing.
@@ -24,6 +27,7 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { asRec, body, lineTotal, linesFromQuote, money, statusLabel, text } from "../lib/quotes";
+import { QuoteLifecycleActions } from "./quote-lifecycle-actions";
 import { SignatureStatus } from "./signature-status";
 
 export interface QuoteViewerProps {
@@ -75,7 +79,7 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
   return (
     <div className={className}>
       <div className="mb-4 flex flex-wrap items-center gap-2">
-        <h2 className="text-lg font-semibold">{text(d.title, "Untitled quote")}</h2>
+        <h2 className="text-lg font-medium">{text(d.title, "Untitled quote")}</h2>
         <span className="text-muted-foreground text-sm" data-testid="quote-status">{statusLabel(status)} · {text(d.quote_number)}</span>
         <div className="ml-auto flex flex-wrap gap-2">
           {draft ? <Button variant="outline" onClick={() => onEdit?.(quoteId)}>Edit</Button> : null}
@@ -85,6 +89,7 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
           {draft || sent ? <Button disabled={!hasSigner} title={hasSigner ? undefined : "Add a signer in the builder first"} onClick={() => setPending("send")}>{sent ? "Resend" : "Send for signature"}</Button> : null}
         </div>
       </div>
+      <QuoteLifecycleActions className="mb-4" quoteId={quoteId} status={status} archived={Boolean(d.archived_at || d.is_archived || d.archived === true)} title={text(d.title)} quoteNumber={text(d.quote_number)} onChanged={() => void q.refetch()} />
       {run.error ? <ApiError error={run.error} title="That action failed" /> : null}
       {copy.error ? <ApiError error={copy.error} title="Could not duplicate" /> : null}
       {draft && !hasSigner ? <p className="text-muted-foreground mb-3 text-sm">Add a signer before sending.</p> : null}
@@ -104,7 +109,7 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
             <div>Subtotal {money(d.subtotal, currency)}</div>
             {Number(d.discount_amount) ? <div>Discount -{money(d.discount_amount, currency)}</div> : null}
             <div>Tax {money(d.tax_amount, currency)}</div>
-            <div className="font-semibold">Total {money(d.total, currency)}</div>
+            <div className="font-medium">Total {money(d.total, currency)}</div>
           </div>
         </CardContent>
       </Card>

package/blocks/quotes/components/record-quotes-tab.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+/**
+ * RecordQuotesTab: the quotes tied to one contact (as the signer) or one company, each opening in the quotes screen. Use it
+ * as an `extraDetailTabs` entry of ContactsScreen / CompaniesScreen:
+ *   { id: "quotes", label: "Quotes", render: (c) => <RecordQuotesTab kind="contacts" id={c.id} onOpenQuote={(id) => router.push(`/quotes?id=${id}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. getContactQuotes  GET /contacts/{id}/quotes   (read) when kind="contacts"
+ *      getCompanyQuotes  GET /companies/{id}/quotes  (read) when kind="companies"
+ * Both answer every matching quote in one read (the API does not page them). Nothing here is billable, external or
+ * destructive; creating and sending a quote happens in the quotes screen.
+ */
+
+import { Skeleton } from "@graph8/sdk/ui";
+import { FileText } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import type { Tone } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { asRec, linesFromQuote, money, statusLabel, subtotal, text } from "../lib/quotes";
+import type { Rec } from "../lib/quotes";
+
+const TONE: Record<string, Tone> = { sent: "info", viewed: "info", accepted: "positive", declined: "negative", voided: "negative", expired: "warning", draft: "neutral", archived: "neutral" };
+
+/** The quote's total: the API's own `total` when it sends one, else the sum of its lines. */
+function totalOf(q: Rec): string {
+  const currency = text(q.currency, "USD");
+  if (typeof q.total === "number") return money(q.total, currency);
+  try {
+    const sum = subtotal(linesFromQuote(q.line_items));
+    return sum > 0 ? money(sum, currency) : "";
+  } catch {
+    return "";
+  }
+}
+
+export interface RecordQuotesTabProps {
+  kind: "contacts" | "companies";
+  id: number;
+  /** Route to the quote in your quotes screen. Without it the rows link to `${quotesPath}?id=<quote id>`. */
+  onOpenQuote?: (quoteId: string) => void;
+  /** Path of your quotes screen for the plain links. Default "/quotes". */
+  quotesPath?: string;
+}
+
+export function RecordQuotesTab({ kind, id, onOpenQuote, quotesPath = "/quotes" }: RecordQuotesTabProps) {
+  const q = useG8Query(async (signal) => {
+    const env = asRec(await g8Get(`/${kind}/${id}/quotes`, undefined, { signal }));
+    const inner = env.data;
+    const rows = Array.isArray(inner) ? inner : (asRec(inner).items ?? []);
+    return (rows as unknown[]).map(asRec).filter((r) => text(r.id) !== "");
+  }, [kind, id]);
+  if (q.error) return <ApiError error={q.error} title="Could not load quotes" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading quotes" />;
+  if (q.data.length === 0) return <EmptyState compact icon={<FileText className="size-8" />} title="No quotes yet" description={kind === "contacts" ? "Quotes this contact signs show up here." : "Quotes for this company show up here."} />;
+  return (
+    <ul className="divide-y rounded-md border" aria-label="Quotes">
+      {q.data.map((r) => {
+        const quoteId = text(r.id);
+        const status = text(r.status);
+        const total = totalOf(r);
+        return (
+          <li key={quoteId}>
+            <a
+              href={`${quotesPath}?id=${encodeURIComponent(quoteId)}`}
+              className="flex items-center justify-between gap-3 p-3 text-sm hover:bg-muted"
+              onClick={(e) => {
+                if (!onOpenQuote || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+                e.preventDefault();
+                onOpenQuote(quoteId);
+              }}
+            >
+              <span className="min-w-0">
+                <span className="block truncate font-medium">{text(r.title, "Untitled quote")}</span>
+                {text(r.quote_number) ? <span className="block text-xs text-muted-foreground">{text(r.quote_number)}</span> : null}
+              </span>
+              <span className="flex shrink-0 items-center gap-2">
+                {total ? <span className="tabular-nums text-muted-foreground">{total}</span> : null}
+                <StatusPill tone={TONE[status] ?? "neutral"} dot>{statusLabel(status)}</StatusPill>
+              </span>
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/blocks/radar/README.md

@@ -5,6 +5,16 @@ deep-dive reports. Depends only on `foundation`.
 
 Install: `npx @graph8/sdk add radar`.
 
+## Screens
+
+`RadarScreen` (`components/radar-screen.tsx`) is the finished page: copy it as your route. No props are required.
+
+- **Overview tab**: stat strip, threat board (click a row to open its battle card), alerts and recent moves.
+- **Competitors tab**: add, bulk-add detected, scan, pause, resume and remove competitors; the selected one opens its battle card
+  in a side panel. Deep link: `?id=<competitor id>`. **Reports tab**: generate and open deep-dive reports.
+- Scans and reports spend credits and are confirmed; removing a competitor is confirmed as destructive.
+- Slots: `toolbarActions`, `renderDetailActions(record)`, `extraDetailTabs` (each `{ id, label, render(record) }`), where `record` is `{ kind: "competitor" | "report", id }`.
+
 ## What you get
 
 | Component | Use it for | Props |

package/blocks/radar/block.json

@@ -87,6 +87,45 @@
         "read",
         "billable"
       ]
+    },
+    {
+      "name": "RadarScreen",
+      "file": "components/radar-screen.tsx",
+      "purpose": "Finished competitive-radar page: overview with threat board, competitor roster with battle-card panel, and reports.",
+      "operations": [
+        "get_marketing_overview_analytics_marketing_overview_get",
+        "overview_radar_overview_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "CompetitorDetail",
+      "file": "components/competitor-detail.tsx",
+      "purpose": "Complete screen for one competitor: every field, battle card, scan, pause or resume, remove.",
+      "operations": [
+        "scan_competitor_radar_competitors__competitor_id__scan_post",
+        "update_competitor_radar_competitors__competitor_id__patch",
+        "delete_competitor_radar_competitors__competitor_id__delete"
+      ],
+      "tiers": [
+        "billable",
+        "destructive"
+      ]
+    },
+    {
+      "name": "ReportDetail",
+      "file": "components/report-detail.tsx",
+      "purpose": "Complete screen for one radar report: status, preview, HTML and PDF links, regenerate.",
+      "operations": [
+        "list_radar_reports_radar_reports_get",
+        "create_radar_report_radar_reports_post"
+      ],
+      "tiers": [
+        "read",
+        "billable"
+      ]
     }
   ],
   "hooks": [
@@ -184,6 +223,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400"
   }
 }

package/blocks/radar/components/competitor-battle-card.tsx

@@ -34,7 +34,7 @@ export function CompetitorBattleCard({ competitorId, className }: CompetitorBatt
   if (!card) return <Skeleton className="h-40 w-full" />;
   return (
     <article className={`flex flex-col gap-4 ${className ?? ""}`} aria-busy={query.loading}>
-      <header><h3 className="text-base font-semibold">{card.competitor.name || card.competitor.domain}</h3><p className="text-sm text-muted-foreground">{card.summary}</p></header>
+      <header><h3 className="text-base font-medium">{card.competitor.name || card.competitor.domain}</h3><p className="text-sm text-muted-foreground">{card.summary}</p></header>
       <section aria-label="Lead with"><h4 className="text-sm font-medium">Lead with</h4>
         {card.talk_track.lead_with.length ? <ul className="list-disc pl-5 text-sm">{card.talk_track.lead_with.map((t) => <li key={t}>{t}</li>)}</ul> : <p className="text-sm text-muted-foreground">No proven advantage yet. Add proof to your catalog or show unverified ones.</p>}
       </section>