@graph8/sdk 0.373.0 → 0.374.0

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

@@ -0,0 +1,184 @@
+"use client";
+
+/**
+ * QuoteSettings: the org-wide quote defaults: company details and branding, terms, numbering, who quotes are sent as,
+ * the billing provider, deal automation, required billing fields and saved terms. The document library sits under it.
+ *
+ * SDK operations, in order:
+ *   1. getQuoteSettings     GET  /quote-settings     read - the values plus `inherited_branding` (what a blank field falls back to)
+ *   2. updateQuoteSettings  PUT  /quote-settings     external tier (org admin) -> ConfirmSpendDialog when it changes who quotes are sent as,
+ *                                                    the billing provider or the deal automation
+ * QuoteDocuments (child) owns the library calls.
+ *
+ * The API only writes values that are not null, so a field that has a value CANNOT be cleared through it: the form
+ * says so and holds Save until that field has a value again, instead of reporting a save that changed nothing. Only the
+ * fields that changed are sent, and the form reloads from the API after a save. Only Manual and Stripe are offered as
+ * billing providers: QuickBooks, Xero and Chargebee are registered but not built, so choosing one would fail.
+ */
+import { useEffect, useRef, useState } from "react";
+import { Settings2, Trash2 } from "lucide-react";
+import { Button, Input, Label, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { useBrand } from "@/g8/hooks/use-brand";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Put } from "@/g8/lib/g8-client";
+import {
+  BILLING_FIELDS, BILLING_PROVIDERS, FIELD_LABEL, draftFromSettings, settingsChanges, settingsEffects, settingsProblems, unclearableSettings,
+  type SettingsBool, type SettingsDraft, type SettingsField,
+} from "../lib/quote-admin";
+import { PAYMENT_TERMS, asRec, body, text } from "../lib/quotes";
+import { QuoteDocuments } from "./quote-documents";
+
+const BOOL_LABEL: Record<SettingsBool, string> = {
+  auto_close_deal_on_acceptance: "Move the deal to Closed Won when a quote is accepted",
+  auto_advance_deal_on_quote_send: "Move an earlier open deal to Proposal Sent when a quote is sent",
+  quote_acceptance_roam_notifications_enabled: "Post to a Roam channel when a quote is accepted",
+};
+const words = (s: string) => s.replace(/_/g, " ");
+
+export function QuoteSettings({ className }: { className?: string }) {
+  const brand = useBrand();
+  const q = useG8Query((signal) => g8Get("/quote-settings", undefined, { signal }), []);
+  const row = body(q.data);
+  const [was, setWas] = useState<SettingsDraft | null>(null);
+  const [now, setNow] = useState<SettingsDraft | null>(null);
+  const [confirm, setConfirm] = useState(false);
+  const inherited = asRec(row.inherited_branding);
+
+  // Take the API's answer as the new baseline whenever it lands (first load, and after a save). Typing that happened while a
+  // reload was in flight is kept: the form is only replaced when the user had not changed anything since the last baseline.
+  const baseline = useRef<SettingsDraft | null>(null);
+  useEffect(() => {
+    if (!q.data) return;
+    const d = draftFromSettings(body(q.data));
+    const old = baseline.current;
+    baseline.current = d;
+    setWas(d);
+    setNow((cur) => (cur && old && JSON.stringify(cur) !== JSON.stringify(old) ? cur : d));
+  }, [q.data]);
+
+  const changes = was && now ? settingsChanges(was, now) : {};
+  const blocked = was && now ? unclearableSettings(was, now) : [];
+  const problems = now ? settingsProblems(now) : [];
+  const effects = was ? settingsEffects(changes, was) : [];
+  const save = useG8Mutation(() => g8Put("/quote-settings", changes), { onSuccess: () => { setConfirm(false); void q.refetch(); } });
+
+  if (q.error && !q.data) return <ApiError error={q.error} title="Could not load quote settings" onRetry={() => void q.refetch()} />;
+  if (!now || !was) return <Skeleton className="h-64 w-full" aria-label="Loading quote settings" />;
+
+  const text_ = (k: SettingsField, v: string) => setNow({ ...now, text: { ...now.text, [k]: v } });
+  const dirty = Object.keys(changes).length > 0;
+  // Anything typed counts for Discard, including a blanked field that Save will refuse (it is not a change the API can take).
+  const edited = JSON.stringify(now) !== JSON.stringify(was);
+  const canSave = dirty && blocked.length === 0 && problems.length === 0;
+  const submit = () => (effects.length > 0 ? setConfirm(true) : void save.mutate(undefined));
+
+  // A render function, not a component: a component defined here would remount (and drop focus) on every keystroke.
+  const field = (k: SettingsField, { area, placeholder, type }: { area?: boolean; placeholder?: string; type?: string } = {}) => (
+    <div className="space-y-1" key={k}>
+      <Label htmlFor={`qs-${k}`}>{FIELD_LABEL[k]}</Label>
+      {area ? <Textarea id={`qs-${k}`} rows={3} value={now.text[k]} placeholder={placeholder} onChange={(e) => text_(k, e.target.value)} /> : <Input id={`qs-${k}`} type={type} value={now.text[k]} placeholder={placeholder} onChange={(e) => text_(k, e.target.value)} />}
+      {blocked.includes(k) ? <p role="alert" className="text-xs text-destructive">The API cannot clear this field. Enter a new value, or clear it in {brand.linkLabel}.</p> : null}
+    </div>
+  );
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      {q.error ? <ApiError error={q.error} title="Could not refresh quote settings" onRetry={() => void q.refetch()} /> : null}
+      <form className="space-y-4" onSubmit={(e) => { e.preventDefault(); if (canSave) submit(); }}>
+        <SectionCard title="Company and branding" icon={<Settings2 />} description="Shown on every quote. A blank field falls back to your company profile.">
+          <div className="grid gap-3 sm:grid-cols-2">
+            {field("company_name", { placeholder: text(inherited.company_name) })}
+            {field("company_email", { placeholder: text(inherited.company_email) })}
+            {field("company_phone", { placeholder: text(inherited.company_phone) })}
+            {field("accent_color", { placeholder: "#111111" })}
+            <div className="sm:col-span-2">{field("company_address", { area: true, placeholder: text(inherited.company_address) })}</div>
+            <div className="sm:col-span-2">{field("company_logo_url", { placeholder: text(inherited.company_logo_url) })}</div>
+            <div className="sm:col-span-2">{field("footer_text", { area: true })}</div>
+          </div>
+        </SectionCard>
+
+        <SectionCard title="Terms and numbering">
+          <div className="grid gap-3 sm:grid-cols-2">
+            {field("quote_number_prefix")}
+            <div className="space-y-1"><Label htmlFor="qs-valid">Default valid days</Label>
+              <Input id="qs-valid" type="number" min={1} value={now.default_valid_days} onChange={(e) => setNow({ ...now, default_valid_days: e.target.value })} />
+              {blocked.includes("default_valid_days") ? <p role="alert" className="text-xs text-destructive">The API cannot clear this field. Enter a number.</p> : null}</div>
+            <div className="space-y-1"><Label htmlFor="qs-pay">{FIELD_LABEL.default_payment_terms}</Label>
+              <select id="qs-pay" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={now.text.default_payment_terms} onChange={(e) => text_("default_payment_terms", e.target.value)}>
+                {now.text.default_payment_terms === "" ? <option value="">Not set</option> : null}
+                {!(PAYMENT_TERMS as readonly string[]).includes(now.text.default_payment_terms) && now.text.default_payment_terms ? <option value={now.text.default_payment_terms}>{words(now.text.default_payment_terms)}</option> : null}
+                {PAYMENT_TERMS.map((t) => <option key={t} value={t}>{words(t)}</option>)}
+              </select></div>
+            <div className="sm:col-span-2">{field("default_terms", { area: true })}</div>
+            <div className="sm:col-span-2">{field("default_privacy", { area: true })}</div>
+            {field("terms_url", { type: "url" })}
+            {field("privacy_url", { type: "url" })}
+          </div>
+          <fieldset className="mt-4 space-y-2">
+            <legend className="text-sm font-medium">Saved terms</legend>
+            {now.terms_library.length === 0 ? <p className="text-xs text-muted-foreground">No saved terms. Add the clauses reps pick from when they build a quote.</p> : null}
+            {now.terms_library.map((t, i) => {
+              const set = (patch: Partial<typeof t>) => setNow({ ...now, terms_library: now.terms_library.map((x, j) => (j === i ? { ...x, ...patch } : x)) });
+              return (
+                <div key={i} className="grid gap-2 rounded-md border border-border p-3 sm:grid-cols-[1fr_9rem_auto]">
+                  <Input aria-label={`Terms name ${i + 1}`} placeholder="Name" value={t.name} onChange={(e) => set({ name: e.target.value })} />
+                  <select aria-label={`Terms payment terms ${i + 1}`} className="h-9 rounded-md border bg-background px-2 text-sm" value={t.payment_terms} onChange={(e) => set({ payment_terms: e.target.value })}>
+                    <option value="">Any</option>{PAYMENT_TERMS.map((p) => <option key={p} value={p}>{words(p)}</option>)}</select>
+                  <Button type="button" variant="ghost" size="sm" aria-label={`Remove terms ${i + 1}`} onClick={() => setNow({ ...now, terms_library: now.terms_library.filter((_, j) => j !== i) })}><Trash2 className="size-4" aria-hidden /></Button>
+                  <Textarea className="sm:col-span-3" aria-label={`Terms text ${i + 1}`} rows={3} placeholder="Clause text" value={t.content} onChange={(e) => set({ content: e.target.value })} />
+                </div>
+              );
+            })}
+            <Button type="button" size="sm" variant="outline" onClick={() => setNow({ ...now, terms_library: [...now.terms_library, { name: "", payment_terms: "", content: "" }] })}>Add terms</Button>
+          </fieldset>
+        </SectionCard>
+
+        <SectionCard title="Who quotes are sent as" description="Quote emails use this identity and reply address.">
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="space-y-1 sm:col-span-2"><Label htmlFor="qs-mode">{FIELD_LABEL.sender_mode}</Label>
+              <select id="qs-mode" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={now.text.sender_mode} onChange={(e) => text_("sender_mode", e.target.value)}>
+                {now.text.sender_mode === "" ? <option value="">Not set</option> : null}
+                <option value="fixed">The sender below, on every quote</option><option value="creator">The person who sends each quote</option></select></div>
+            {field("sender_name")}{field("sender_email", { type: "email" })}
+          </div>
+        </SectionCard>
+
+        <SectionCard title="Billing and deals" description="What happens when a quote is signed.">
+          <div className="space-y-3">
+            <div className="space-y-1"><Label htmlFor="qs-provider">{FIELD_LABEL.default_billing_provider}</Label>
+              <select id="qs-provider" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={now.text.default_billing_provider} onChange={(e) => text_("default_billing_provider", e.target.value)}>
+                {!BILLING_PROVIDERS.some(([v]) => v === now.text.default_billing_provider) ? <option value={now.text.default_billing_provider}>{now.text.default_billing_provider ? `${words(now.text.default_billing_provider)} (not available here)` : "Not set"}</option> : null}
+                {BILLING_PROVIDERS.map(([v, l]) => <option key={v} value={v}>{l}</option>)}</select></div>
+            <fieldset className="space-y-1"><legend className="text-sm font-medium">Required billing details</legend>
+              {BILLING_FIELDS.map((f) => (
+                <label key={f} className="flex items-center gap-2 text-sm"><input type="checkbox" checked={now.required_billing_fields.includes(f)}
+                  onChange={(e) => setNow({ ...now, required_billing_fields: e.target.checked ? [...now.required_billing_fields, f] : now.required_billing_fields.filter((x) => x !== f) })} />{words(f)}</label>
+              ))}</fieldset>
+            {(Object.keys(BOOL_LABEL) as SettingsBool[]).map((k) => (
+              <label key={k} className="flex items-center gap-2 text-sm"><input type="checkbox" checked={now.flags[k]} onChange={(e) => setNow({ ...now, flags: { ...now.flags, [k]: e.target.checked } })} />{BOOL_LABEL[k]}</label>
+            ))}
+            {now.flags.quote_acceptance_roam_notifications_enabled ? <div className="grid gap-3 sm:grid-cols-2">{field("quote_acceptance_roam_channel_name")}{field("quote_acceptance_roam_channel_id")}</div> : null}
+          </div>
+        </SectionCard>
+
+        {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 quote settings" /> : null}
+        <div className="flex items-center justify-end gap-2">
+          <Button type="button" variant="outline" disabled={!edited} onClick={() => setNow(was)}>Discard changes</Button>
+          <Button type="submit" disabled={!canSave} loading={save.loading && !confirm}>Save settings</Button>
+        </div>
+      </form>
+      <QuoteDocuments />
+
+      {confirm ? (
+        <ConfirmSpendDialog open tier="external" title="Save these quote settings?" confirmLabel="Save settings" confirming={save.loading}
+          description={<ul className="list-disc space-y-1 pl-5">{effects.map((e) => <li key={e}>{e}</li>)}</ul>}
+          onConfirm={() => void save.mutate(undefined)} onCancel={() => setConfirm(false)} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,189 @@
+"use client";
+
+/**
+ * QuoteTemplates: the reusable starting points for a quote (payment terms, validity, contract length, terms text,
+ * attached legal documents and preset line items), listed, created, edited and deleted.
+ *
+ * SDK operations, in order:
+ *   1. listQuoteTemplates   GET    /quote-templates                 read
+ *   2. listQuoteDocuments   GET    /quote-settings/documents        read   - the library a template attaches from
+ *   3. createQuoteTemplate  POST   /quote-templates                 external tier, stores data only (org admin)
+ *   4. updateQuoteTemplate  PUT    /quote-templates/{id}            external tier (org admin): REPLACES the template
+ *   5. deleteQuoteTemplate  DELETE /quote-templates/{id}            DESTRUCTIVE (org admin) -> ConfirmSpendDialog
+ * Plus listQuotableProducts (read) inside ProductPicker, for the preset line items.
+ *
+ * Creating and saving a template send nobody anything, so they run on one click, like saving a draft quote. Two things
+ * still go through ConfirmSpendDialog: Delete, and a Save that would reset template settings the API cannot carry
+ * (payment methods, marketing rights, contract start on signature: the confirm names exactly which ones this template
+ * has). Writes need an organization admin; a refusal is shown as the API's own message.
+ */
+import { useState } from "react";
+import { FileStack, 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 { useBrand } from "@/g8/hooks/use-brand";
+import { g8Delete, g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { DURATION_UNITS, draftFromTemplate, emptyTemplateDraft, fieldsLostOnTemplateSave, templateBody, templateProblems, type TemplateDraft } from "../lib/quote-admin";
+import { PAYMENT_TERMS, body, linesFromQuote, text, toRequestLines, type LineItem, type Rec } from "../lib/quotes";
+import { ProductPicker } from "./product-picker";
+
+const label = (s: string) => s.replace(/_/g, " ");
+const plain = (cents: number) => (cents / 100).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+function LinesEditor({ lines, onChange }: { lines: LineItem[]; onChange: (next: LineItem[]) => void }) {
+  const [picking, setPicking] = useState(false);
+  const set = (key: string, patch: Partial<LineItem>) => onChange(lines.map((l) => (l.key === key ? { ...l, ...patch } : l)));
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between"><Label>Preset line items</Label><Button type="button" size="sm" variant="outline" onClick={() => setPicking(!picking)}>{picking ? "Hide products" : "Add a product"}</Button></div>
+      {picking ? <ProductPicker onPick={(l) => onChange([...lines, l])} pageSize={10} /> : null}
+      {lines.length === 0 ? <p className="text-xs text-muted-foreground">No preset lines. A quote built from this template starts empty.</p> : (
+        <Table>
+          <TableHeader><TableRow><TableHead>Product</TableHead><TableHead>Qty</TableHead><TableHead className="text-right">Unit</TableHead><TableHead><span className="sr-only">Remove</span></TableHead></TableRow></TableHeader>
+          <TableBody>
+            {lines.map((l) => (
+              <TableRow key={l.key}>
+                <TableCell>{l.product_name}</TableCell>
+                <TableCell><Input aria-label={`Quantity for ${l.product_name}`} type="number" min={1} max={10000} className="h-8 w-20" value={l.quantity} onChange={(e) => set(l.key, { quantity: Math.max(1, Math.min(10000, Math.floor(Number(e.target.value) || 1))) })} /></TableCell>
+                <TableCell className="text-right tabular-nums">{plain(l.unit_amount)}</TableCell>
+                <TableCell><Button type="button" size="sm" variant="ghost" aria-label={`Remove ${l.product_name}`} onClick={() => onChange(lines.filter((x) => x.key !== l.key))}><Trash2 className="size-4" aria-hidden /></Button></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+}
+
+function DocumentsPicker({ selected, onChange }: { selected: string[]; onChange: (ids: string[]) => void }) {
+  const docs = useG8Query((signal) => g8Get("/quote-settings/documents", undefined, { signal }), []);
+  const items = (Array.isArray(body(docs.data).items) ? body(docs.data).items : []) as Rec[];
+  if (docs.error) return <ApiError error={docs.error} title="Could not load the document library" onRetry={() => void docs.refetch()} />;
+  const known = new Set(items.map((d) => text(d.id)));
+  const missing = selected.filter((id) => !known.has(id));
+  return (
+    <fieldset className="space-y-1">
+      <legend className="text-sm font-medium">Attached documents</legend>
+      {docs.loading && !docs.data ? <Skeleton className="h-8 w-full" /> : items.length === 0 ? <p className="text-xs text-muted-foreground">The document library is empty. Upload an NDA or MSA in Settings.</p> : items.map((d) => (
+        <label key={text(d.id)} className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={selected.includes(text(d.id))} onChange={(e) => onChange(e.target.checked ? [...selected, text(d.id)] : selected.filter((x) => x !== text(d.id)))} />
+          {text(d.title, text(d.file_name))} <span className="text-xs text-muted-foreground">{text(d.doc_type).toUpperCase()}</span>
+        </label>
+      ))}
+      {missing.length > 0 ? <p className="text-xs text-muted-foreground">{missing.length} attached {missing.length === 1 ? "document is" : "documents are"} no longer in the library. Saving keeps {missing.length === 1 ? "it" : "them"} attached.</p> : null}
+    </fieldset>
+  );
+}
+
+function TemplateForm({ draft, setDraft }: { draft: TemplateDraft; setDraft: (d: TemplateDraft) => void }) {
+  const up = (patch: Partial<TemplateDraft>) => setDraft({ ...draft, ...patch });
+  return (
+    <div className="space-y-4">
+      <div className="space-y-1"><Label htmlFor="tpl-name">Name</Label><Input id="tpl-name" value={draft.name} maxLength={255} onChange={(e) => up({ name: e.target.value })} /></div>
+      <div className="space-y-1"><Label htmlFor="tpl-desc">Description</Label><Textarea id="tpl-desc" rows={2} 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="tpl-terms">Payment terms</Label>
+          <select id="tpl-terms" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={draft.default_payment_terms} onChange={(e) => up({ default_payment_terms: e.target.value })}>
+            <option value="">Use the workspace default</option>{PAYMENT_TERMS.map((t) => <option key={t} value={t}>{label(t)}</option>)}
+          </select></div>
+        <div className="space-y-1"><Label htmlFor="tpl-valid">Valid for (days)</Label><Input id="tpl-valid" type="number" min={1} max={365} value={draft.default_valid_days} onChange={(e) => up({ default_valid_days: e.target.value })} /></div>
+        <div className="space-y-1"><Label htmlFor="tpl-len">Contract length</Label><Input id="tpl-len" type="number" min={0.1} step="any" value={draft.contract_duration_value} onChange={(e) => up({ contract_duration_value: e.target.value })} /></div>
+        <div className="space-y-1"><Label htmlFor="tpl-unit">Length unit</Label>
+          <select id="tpl-unit" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={draft.contract_duration_unit} onChange={(e) => up({ contract_duration_unit: e.target.value as TemplateDraft["contract_duration_unit"] })}>
+            <option value="">No fixed length</option>{DURATION_UNITS.map((u) => <option key={u} value={u}>{u}</option>)}
+          </select></div>
+      </div>
+      <div className="space-y-1"><Label htmlFor="tpl-override">Terms text for this template</Label><Textarea id="tpl-override" rows={4} placeholder="Leave blank to use the workspace default terms" value={draft.terms_override} onChange={(e) => up({ terms_override: e.target.value })} /></div>
+      <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={draft.is_default} onChange={(e) => up({ is_default: e.target.checked })} />Use as the default template for new quotes</label>
+      <DocumentsPicker selected={draft.document_ids} onChange={(document_ids) => up({ document_ids })} />
+      <LinesEditor lines={draft.lines} onChange={(lines) => up({ lines })} />
+    </div>
+  );
+}
+
+type Confirm = { kind: "delete"; row: Rec } | { kind: "lost"; fields: string[] };
+
+export function QuoteTemplates({ className }: { className?: string }) {
+  const brand = useBrand();
+  const q = useG8Query((signal) => g8Get("/quote-templates", undefined, { signal }), []);
+  const rows = (Array.isArray(body(q.data).items) ? body(q.data).items : []) as Rec[];
+  const [editing, setEditing] = useState<{ row: Rec | null } | null>(null);
+  const [draft, setDraft] = useState<TemplateDraft>(emptyTemplateDraft());
+  const [confirm, setConfirm] = useState<Confirm | null>(null);
+  const [tried, setTried] = useState(false);
+  const problems = templateProblems(draft);
+
+  const open = (row: Rec | null) => { setDraft(row ? draftFromTemplate(row, linesFromQuote(row.default_line_items)) : emptyTemplateDraft()); setTried(false); setEditing({ row }); };
+  const close = () => { setEditing(null); setConfirm(null); };
+  const save = useG8Mutation(async () => {
+    const payload = templateBody(draft, toRequestLines(draft.lines));
+    return editing?.row ? g8Put(`/quote-templates/${encodeURIComponent(text(editing.row.id))}`, payload) : g8Post("/quote-templates", payload);
+  }, { onSuccess: () => { close(); void q.refetch(); } });
+  const remove = useG8Mutation((id: string) => g8Delete(`/quote-templates/${encodeURIComponent(id)}`), { onSuccess: () => { setConfirm(null); void q.refetch(); } });
+
+  const submit = () => {
+    setTried(true);
+    if (problems.length) return;
+    const lost = editing?.row ? fieldsLostOnTemplateSave(editing.row) : [];
+    if (lost.length) setConfirm({ kind: "lost", fields: lost });
+    else void save.mutate(undefined);
+  };
+
+  const rowName = (r: Rec) => text(r.name, "Untitled template");
+  return (
+    <SectionCard className={className} title="Quote templates" icon={<FileStack />} description="Starting points for new quotes: terms, validity, contract length, documents and preset lines."
+      actions={<Button size="sm" onClick={() => open(null)}><Plus className="size-4" aria-hidden />New template</Button>} flush>
+      {q.error ? <div className="p-4"><ApiError error={q.error} title="Could not load templates" onRetry={() => void q.refetch()} /></div> : null}
+      {q.loading && !q.data ? <div className="p-4"><Skeleton className="h-24 w-full" aria-label="Loading templates" /></div> : !q.error && rows.length === 0 ? (
+        <EmptyState compact title="No quote templates yet" description="Save the terms and lines you reuse, then start a quote from them." action={<Button onClick={() => open(null)}>New template</Button>} />
+      ) : rows.length > 0 ? (
+        <Table>
+          <TableHeader><TableRow><TableHead>Template</TableHead><TableHead>Payment terms</TableHead><TableHead>Valid</TableHead><TableHead className="text-right">Lines</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">{rowName(r)}</span>{r.is_default === true ? <StatusPill tone="info" className="ml-2">Default</StatusPill> : null}{r.description ? <div className="text-xs text-muted-foreground">{text(r.description)}</div> : null}</TableCell>
+                <TableCell>{label(text(r.default_payment_terms, "workspace default"))}</TableCell>
+                <TableCell>{r.default_valid_days ? `${text(r.default_valid_days)} days` : "-"}</TableCell>
+                <TableCell className="text-right tabular-nums">{Array.isArray(r.default_line_items) ? r.default_line_items.length : 0}</TableCell>
+                <TableCell className="whitespace-nowrap text-right">
+                  <Button size="sm" variant="ghost" aria-label={`Edit ${rowName(r)}`} onClick={() => open(r)}><Pencil className="size-4" aria-hidden /></Button>
+                  <Button size="sm" variant="ghost" aria-label={`Delete ${rowName(r)}`} onClick={() => setConfirm({ kind: "delete", row: r })}><Trash2 className="size-4" aria-hidden /></Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : null}
+      {remove.error ? <div className="p-4"><ApiError error={remove.error} title="Could not delete the template" /></div> : null}
+
+      <FormSheet open={editing != null} onOpenChange={(o) => { if (!o) close(); }} width="lg" title={editing?.row ? "Edit template" : "New template"}
+        description={editing?.row ? "Saving replaces the whole template with what is in this form." : "Needs an organization admin."}
+        onSubmit={submit}
+        footer={<><Button type="button" variant="outline" onClick={close}>Cancel</Button><Button type="submit" loading={save.loading}>{editing?.row ? "Save template" : "Create template"}</Button></>}>
+        {editing ? <TemplateForm draft={draft} setDraft={setDraft} /> : null}
+        {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 template" /> : null}
+      </FormSheet>
+
+      {confirm?.kind === "delete" ? (
+        <ConfirmSpendDialog open tier="destructive" title={`Delete "${rowName(confirm.row)}"?`} confirmLabel="Delete template" affected={1} confirming={remove.loading}
+          description="The template is removed and can no longer start a quote. Quotes already built from it are not changed."
+          onConfirm={() => void remove.mutate(text(confirm.row.id))} onCancel={() => setConfirm(null)} />
+      ) : null}
+      {confirm?.kind === "lost" ? (
+        <ConfirmSpendDialog open tier="destructive" title="Saving here resets some template settings" confirmLabel="Save and reset" confirming={save.loading}
+          description={<p>This template has {confirm.fields.join(", ")}. The API cannot carry {confirm.fields.length === 1 ? "that setting" : "those settings"}, so saving from here resets {confirm.fields.length === 1 ? "it" : "them"}. Edit the template in {brand.linkLabel} to keep {confirm.fields.length === 1 ? "it" : "them"}.</p>}
+          onConfirm={() => void save.mutate(undefined)} onCancel={() => setConfirm(null)} />
+      ) : null}
+    </SectionCard>
+  );
+}

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

@@ -10,6 +10,7 @@
  *   3. editQuoteAsDraft POST   /quotes/{id}/edit-as-draft     (external; `sent` quotes only, returns `new_quote_id`: voids the sent copy, signing link dies, new draft)
  *   4. duplicateQuote   POST   /quotes/{id}/duplicate         (external tier, but only copies into a new draft)
  *   5. deleteQuote      DELETE /quotes/{id}                   (destructive; drafts only)
+ *   6. previewQuoteSend POST   /quotes/{id}/send-preview      (read; renders the exact email and sends nothing: "Preview email" in the send confirm)
  *
  * 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.
@@ -62,6 +63,8 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
       void q.refetch();
     },
   });
+  // What the customer would get, rendered by the API from the same subject and message the confirm holds. Sends nothing.
+  const preview = useG8Mutation(async () => body(await g8Post(`${base}/send-preview`, { ...(subject ? { subject } : {}), ...(message ? { message } : {}) })));
   const copy = useG8Mutation(async () => body(await g8Post(`${base}/duplicate`)), { onSuccess: (res) => { if (text(res.id)) onOpenQuote?.(text(res.id)); } });
 
   if (q.loading && !q.data) return <div className={className} aria-busy="true"><Skeleton className="h-48 w-full" /></div>;
@@ -86,7 +89,7 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
           {status === "sent" ? <Button variant="outline" onClick={() => setPending("edit")}>Edit as draft</Button> : null}
           <Button variant="outline" loading={copy.loading} onClick={() => void copy.mutate(undefined)}>Duplicate</Button>
           {draft ? <Button variant="ghost" onClick={() => setPending("delete")}>Delete</Button> : null}
-          {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}
+          {draft || sent ? <Button disabled={!hasSigner} title={hasSigner ? undefined : "Add a signer in the builder first"} onClick={() => { preview.reset(); 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()} />
@@ -123,8 +126,18 @@ export function QuoteViewer({ quoteId, onEdit, onOpenQuote, onDeleted, className
       {pending === "send" ? (
         <ConfirmSpendDialog open tier="external" title={`${sent ? "Resend" : "Send"} "${name}" for signature`} confirmLabel={sent ? "Resend" : "Send"} recipients={1} confirming={run.loading}
           description={<div className="space-y-2 text-left"><p>Emails {text(d.signer_contact_email ?? d.signer_email)} a link to review and sign.</p>
-            <Input aria-label="Email subject" placeholder="Subject (optional)" value={subject} onChange={(e) => setSubject(e.target.value)} />
-            <Textarea aria-label="Email message" rows={3} placeholder="Message (optional)" value={message} onChange={(e) => setMessage(e.target.value)} /></div>}
+            <Input aria-label="Email subject" placeholder="Subject (optional)" value={subject} onChange={(e) => { setSubject(e.target.value); preview.reset(); }} />
+            <Textarea aria-label="Email message" rows={3} placeholder="Message (optional)" value={message} onChange={(e) => { setMessage(e.target.value); preview.reset(); }} />
+            <Button type="button" variant="outline" size="sm" loading={preview.loading} onClick={() => void preview.mutate(undefined)}>Preview email</Button>
+            {preview.error ? <ApiError error={preview.error} title="Could not render the preview" /> : null}
+            {preview.data ? (
+              <div className="space-y-1 rounded-md border border-border p-2" data-testid="send-preview">
+                <p className="text-xs text-muted-foreground">From {text(preview.data.sender_name)}{preview.data.reply_to ? ` (replies to ${text(preview.data.reply_to)})` : ""} to {text(preview.data.recipient_name)} {text(preview.data.recipient_email)}</p>
+                <p className="text-sm font-medium">{text(preview.data.email_subject, text(preview.data.subject))}</p>
+                {preview.data.email_html ? <iframe title="Email preview" sandbox="" srcDoc={text(preview.data.email_html)} className="h-48 w-full rounded border-0 bg-white" /> : null}
+                {Array.isArray(preview.data.attached_documents) && preview.data.attached_documents.length ? <p className="text-xs text-muted-foreground">Attached: {preview.data.attached_documents.map((d) => text(asRec(d).title, text(asRec(d).file_name))).join(", ")}</p> : null}
+              </div>
+            ) : null}</div>}
           onConfirm={() => void run.mutate("send")} onCancel={() => setPending(null)} />
       ) : null}
       {pending === "edit" ? (

package/blocks/quotes/components/quotes-screen.tsx

@@ -4,7 +4,8 @@
  * QuotesScreen: the finished quotes product. Every quote with its status, a viewer for the open one, a builder for
  * new and draft quotes, and e-signature tracking. No props are required.
  *
- * It composes: ProductCatalog (Products tab), QuoteDealTab, QuoteList (status filter, paging), QuoteViewer (totals, send, resend, edit as draft, duplicate,
+ * It composes: ProductCatalog and ManualProducts (Products tab), QuoteTemplates (Templates tab), QuoteSettings with the
+ * document library (Settings tab), QuoteEvidence (Evidence tab of an open quote), QuoteBatchActions (inside QuoteList), QuoteDealTab, QuoteList (status filter, paging), QuoteViewer (totals, send, resend, edit as draft, duplicate,
  * delete, e-signature status and reminder), QuoteBuilder (details, signer, line items from ProductPicker) and a deal
  * picker, because graph8 attaches every quote to a deal.
  *
@@ -16,6 +17,10 @@
  *   - New quote: choose the deal (search by name; skipped when `dealId` is passed), then the builder. Saving a draft
  *     emails nobody, so it needs no confirmation.
  *   - Edit a draft from the viewer; duplicate; delete a draft (confirmed).
+ *   - Tick quotes in the list to archive, expire or revoke them together (confirmed, id-addressed, result read per quote).
+ *   - Templates tab: create, edit and delete quote templates. Settings tab: org-wide quote settings and the legal document library.
+ *   - Products tab: the quotable catalogue, plus the manual products you add, edit and retire.
+ *   - Evidence tab of an open quote: attach and download internal PDFs.
  *   - Send for signature, resend, send a signature reminder, and edit a sent quote as a new draft: all external
  *     actions, each behind ConfirmSpendDialog because they reach a real person.
  *
@@ -40,9 +45,13 @@ import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { formatMoney, type Deal } from "@/g8/deals/lib/deals-types";
 import { useDebounced } from "../hooks/use-debounced";
 import { body } from "../lib/quotes";
+import { ManualProducts } from "./manual-products";
 import { QuoteBuilder } from "./quote-builder";
+import { QuoteEvidence } from "./quote-evidence";
 import { QuoteList } from "./quote-list";
 import { ProductCatalog, QuoteDealTab } from "./quote-related";
+import { QuoteSettings } from "./quote-settings";
+import { QuoteTemplates } from "./quote-templates";
 import { QuoteViewer } from "./quote-viewer";
 
 export interface QuotesScreenProps {
@@ -109,7 +118,7 @@ export function QuotesScreen({ dealId, companyId, renderDetailActions, extraDeta
   const [selectedId, setSelectedId] = useUrlState("id");
   const [mode, setMode] = useUrlState("view");
   const [tabParam, setTab] = useUrlState("tab", "quotes");
-  const tab = tabParam === "products" ? "products" : "quotes";
+  const tab = tabParam === "products" || tabParam === "templates" || tabParam === "settings" ? tabParam : "quotes";
   const [version, setVersion] = useState(0);
   const [creating, setCreating] = useState(false);
   const [pickedDeal, setPickedDeal] = useState<Deal | null>(null);
@@ -132,6 +141,7 @@ export function QuotesScreen({ dealId, companyId, renderDetailActions, extraDeta
       onCollapse={mode === "full" ? () => setMode(null) : undefined}
       tabs={[
         { id: "quote", label: "Quote", content: <QuoteViewer key={selectedId} quoteId={selectedId} onEdit={setEditingId} onOpenQuote={(id) => { refresh(); setSelectedId(id); }} onDeleted={() => { close(); refresh(); }} /> },
+        { id: "evidence", label: "Evidence", content: <QuoteEvidence key={selectedId} quoteId={selectedId} /> },
         { id: "deal", label: "Deal", content: <QuoteDealTab key={selectedId} quoteId={selectedId} onOpenDeal={onOpenDeal} /> },
         ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selectedId) })),
       ]}
@@ -145,18 +155,18 @@ export function QuotesScreen({ dealId, companyId, renderDetailActions, extraDeta
       icon={<FileText className="size-5" />}
       actions={<>{toolbarActions}<Button onClick={openNew}><Plus className="size-4" aria-hidden />New quote</Button></>}
       stats={stats}
-      tabs={[{ id: "quotes", label: "Quotes" }, { id: "products", label: "Products" }]}
+      tabs={[{ id: "quotes", label: "Quotes" }, { id: "products", label: "Products" }, { id: "templates", label: "Templates" }, { id: "settings", label: "Settings" }]}
       activeTab={tab}
       onTabChange={(id) => { setTab(id); close(); }}
     >
       {totals.error ? <ApiError error={totals.error} title="Could not load quote numbers" onRetry={() => void totals.refetch()} /> : null}
-      {tab === "products" ? <ProductCatalog onStartQuote={openNew} /> : <SplitView
+      {tab === "products" ? <div className="space-y-4"><ProductCatalog onStartQuote={openNew} /><ManualProducts /></div> : tab === "templates" ? <QuoteTemplates /> : tab === "settings" ? <QuoteSettings /> : <SplitView
         detailOpen={Boolean(selectedId)}
         onCloseDetail={close}
         expanded={mode === "full" && Boolean(selectedId)}
         onExpandedChange={(full) => setMode(full ? "full" : null)}
         detail={detail}
-        list={<QuoteList dealId={dealId} companyId={companyId} refreshKey={version} selectedId={selectedId} onOpen={setSelectedId} onNew={openNew} />}
+        list={<QuoteList dealId={dealId} companyId={companyId} refreshKey={version} selectedId={selectedId} onOpen={setSelectedId} onNew={openNew} selectable onChanged={refresh} />}
       />}
       <FormSheet open={creating} onOpenChange={setCreating} title="New quote" description={pickedDeal ? `For ${pickedDeal.name ?? "this deal"}` : undefined}>
         {creating ? (builderDeal ? <QuoteBuilder key={builderDeal} dealId={builderDeal} companyId={companyId} onSaved={saved} /> : <DealStep onPick={setPickedDeal} />) : null}