@graph8/sdk 0.370.0 → 0.373.0

package/blocks/deals/components/deal-line-items.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+/**
+ * DealLineItems: the products on a deal: add, edit and remove lines, with per-line totals and the deal total.
+ *
+ * SDK operations, in order:
+ *   1. GET /deals/{id}/line-items                 (deals.listDealLineItems)     read  - lines, derived amount, quote mismatch flag
+ *   2. PUT /deals/{id}/line-items { line_items }  (deals.replaceDealLineItems)  write - sends the FULL desired set (an empty list clears them)
+ * Money: unit prices are typed in dollars and sent as whole CENTS; the server recomputes each line total from
+ * unit price, quantity and discount. The editor appears only after the lines loaded, and Save stays disabled until
+ * something changed, so a record that has not loaded is never overwritten. Fields the screen does not show (catalog
+ * ids, description, billing frequency) are carried over untouched.
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { g8Get, g8Put } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { dataOf } from "../lib/deals-types";
+import { centsToDollarsText, dollarsToCents, formatCents, lineTotalCents, type DealLineItem, type LineItemsPayload } from "../lib/deal-extras";
+
+export interface DealLineItemsProps {
+  dealId: string;
+  /** Called after the lines were saved, so a screen can refresh the deal amount. */
+  onSaved?: () => void;
+  className?: string;
+}
+
+interface Row {
+  key: string;
+  base: DealLineItem | null;
+  name: string;
+  quantity: string;
+  price: string;
+  discount: string;
+}
+
+const FREQUENCIES: Array<[string, string]> = [["one_time", "One time"], ["month", "Monthly"], ["quarter", "Quarterly"], ["year", "Yearly"]];
+let keyCounter = 0;
+const nextKey = () => `row-${keyCounter++}`;
+
+const rowFrom = (li: DealLineItem): Row => ({ key: li.id ?? nextKey(), base: li, name: li.product_name, quantity: String(li.quantity), price: centsToDollarsText(li.unit_amount), discount: String(li.discount_pct ?? 0) });
+const blankRow = (): Row => ({ key: nextKey(), base: null, name: "", quantity: "1", price: "", discount: "0" });
+
+/** The line a row stands for, or null while a field is invalid. */
+function parse(r: Row, sortOrder: number): DealLineItem | null {
+  const cents = dollarsToCents(r.price);
+  const quantity = Number(r.quantity);
+  const discount = Number(r.discount === "" ? 0 : r.discount);
+  if (!r.name.trim() || cents == null || cents > 1_000_000_000 || !Number.isInteger(quantity) || quantity < 1 || quantity > 10_000 || !Number.isFinite(discount) || discount < 0 || discount > 100) return null;
+  const { id: _id, ...kept } = (r.base ?? {}) as DealLineItem & { line_total?: number };
+  const { line_total: _total, ...carried } = kept as DealLineItem & { line_total?: number };
+  return { ...carried, product_name: r.name.trim(), quantity, unit_amount: cents, discount_pct: discount, sort_order: sortOrder };
+}
+
+export function DealLineItems({ dealId, onSaved, className }: DealLineItemsProps) {
+  const q = useG8Query(async (signal) => dataOf<LineItemsPayload>(await g8Get(`/deals/${encodeURIComponent(dealId)}/line-items`, undefined, { signal })), [dealId], { key: ["deals", "line-items", dealId], refetchOnFocus: false });
+  const [rows, setRows] = useState<Row[]>([]);
+  const baseline = useRef("[]");
+  const dirty = useRef(false);
+  // A different deal must not show the previous deal's lines.
+  useEffect(() => { dirty.current = false; setRows([]); baseline.current = "[]"; }, [dealId]);
+  // Unsaved edits win over a refreshed record: only an untouched editor follows the server.
+  useEffect(() => {
+    if (!q.data || dirty.current) return;
+    const next = (q.data.line_items ?? []).map(rowFrom);
+    setRows(next);
+    baseline.current = JSON.stringify(next.map((r) => [r.name, r.quantity, r.price, r.discount]));
+  }, [q.data]);
+
+  const edit = (key: string, change: Partial<Row>) => { dirty.current = true; setRows((all) => all.map((r) => (r.key === key ? { ...r, ...change } : r))); };
+  const parsed = rows.map((r, i) => parse(r, i));
+  const valid = parsed.every((p) => p !== null);
+  const changed = JSON.stringify(rows.map((r) => [r.name, r.quantity, r.price, r.discount])) !== baseline.current;
+  const currency = q.data?.currency;
+  const total = useMemo(() => parsed.reduce((sum, p) => sum + (p ? lineTotalCents(p) : 0), 0), [parsed]);
+
+  const save = useG8Mutation(
+    () => g8Put(`/deals/${encodeURIComponent(dealId)}/line-items`, { line_items: parsed as DealLineItem[] }),
+    { invalidates: [["deals", "line-items", dealId], ["deals", "detail", dealId], ["deals", "list"]], onSuccess: () => { dirty.current = false; void q.refetch(); onSaved?.(); } },
+  );
+
+  if (q.error) return <ApiError error={q.error} title="Could not load the line items" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-32 w-full" aria-label="Loading line items" />;
+  return (
+    <form className={`space-y-3 ${className ?? ""}`} onSubmit={(e) => { e.preventDefault(); if (changed && valid) void save.mutate(undefined); }}>
+      {q.data.amount_mismatch ? (
+        <p role="status" className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">
+          The deal amount ({q.data.amount ?? 0}) and its linked quote ({q.data.linked_quote_total ?? 0}) disagree.
+        </p>
+      ) : null}
+      {rows.length === 0 ? <p className="text-sm text-muted-foreground">No line items yet. Add the products this deal is for.</p> : null}
+      <ul className="space-y-2" aria-label="Line items">
+        {rows.map((r, i) => {
+          const line = parsed[i];
+          return (
+            <li key={r.key} className="grid gap-2 rounded-md border p-2 sm:grid-cols-[1fr_5rem_7rem_5rem_7rem_auto] sm:items-center">
+              <Input aria-label={`Product ${i + 1}`} placeholder="Product" value={r.name} onChange={(e) => edit(r.key, { name: e.target.value })} />
+              <Input aria-label={`Quantity ${i + 1}`} type="number" min={1} max={10000} step={1} value={r.quantity} onChange={(e) => edit(r.key, { quantity: e.target.value })} />
+              <Input aria-label={`Unit price ${i + 1}`} type="number" min={0} step="0.01" placeholder="0.00" value={r.price} onChange={(e) => edit(r.key, { price: e.target.value })} />
+              <Input aria-label={`Discount percent ${i + 1}`} type="number" min={0} max={100} step="any" value={r.discount} onChange={(e) => edit(r.key, { discount: e.target.value })} />
+              <span className="text-right text-sm tabular-nums" aria-label={`Line total ${i + 1}`}>{line ? formatCents(lineTotalCents(line), currency) : "-"}</span>
+              <Button type="button" size="sm" variant="ghost" aria-label={`Remove line ${i + 1}`} onClick={() => { dirty.current = true; setRows((all) => all.filter((x) => x.key !== r.key)); }}><Trash2 className="size-4" aria-hidden /></Button>
+              {r.base?.billing_frequency && r.base.billing_frequency !== "one_time" ? <span className="text-xs text-muted-foreground sm:col-span-6">{FREQUENCIES.find(([v]) => v === r.base?.billing_frequency)?.[1] ?? r.base.billing_frequency} billing</span> : null}
+            </li>
+          );
+        })}
+      </ul>
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Button type="button" size="sm" variant="outline" onClick={() => { dirty.current = true; setRows((all) => [...all, blankRow()]); }}><Plus className="size-4" aria-hidden />Add line</Button>
+        <p className="text-sm font-semibold tabular-nums" data-testid="line-items-total">Total {formatCents(total, currency)}</p>
+      </div>
+      {!valid ? <p className="text-xs text-muted-foreground">Each line needs a product, a whole quantity from 1 to 10,000, a price and a discount from 0 to 100.</p> : null}
+      {save.error ? <ApiError error={save.error} title="Could not save the line items" /> : null}
+      <div className="flex justify-end"><Button type="submit" loading={save.loading} disabled={!changed || !valid}>Save line items</Button></div>
+    </form>
+  );
+}

package/blocks/deals/components/deal-notes-tab.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+/**
+ * DealNotesTab: list, add, edit and delete the notes of one deal.
+ *
+ * SDK operations, in order:
+ *   1. GET    /deals/{id}/notes              (notes.listDealNotes)    read
+ *   2. POST   /deals/{id}/notes { content }  (notes.createDealNote)   write
+ *   3. PUT    /deals/{id}/notes/{note_id}    (deals.updateDealNote)   write - only when the text changed
+ *   4. DELETE /deals/{id}/notes/{note_id}    (deals.deleteDealNote)   DESTRUCTIVE -> ConfirmSpendDialog first
+ * A `read_only` note (projected from synced CRM activity) can be neither edited nor deleted.
+ */
+import { useState } from "react";
+import { StickyNote } from "lucide-react";
+import { Button, Skeleton, 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 { g8Delete, g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { rowsOf, type DealNote } from "../lib/deal-extras";
+
+export interface DealNotesTabProps {
+  dealId: string;
+  /** Called after any write, so a sibling activity timeline can reload. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+const when = (iso: string | null | undefined): string => (iso ? new Date(iso).toLocaleString() : "");
+
+export function DealNotesTab({ dealId, onChanged, className }: DealNotesTabProps) {
+  const base = `/deals/${encodeURIComponent(dealId)}/notes`;
+  const [draft, setDraft] = useState("");
+  const [editing, setEditing] = useState<{ id: string; original: string; content: string } | null>(null);
+  const [deleting, setDeleting] = useState<DealNote | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const notes = useG8Query(async (signal) => rowsOf<DealNote>(await g8Get(base, undefined, { signal })), [dealId], { key: ["deals", "notes", dealId] });
+  const changed = () => { void notes.refetch(); onChanged?.(); };
+
+  const add = useG8Mutation((content: string) => g8Post(base, { content }), { invalidates: [["deals", "notes", dealId]], onSuccess: () => { setDraft(""); changed(); } });
+  const edit = useG8Mutation(async (v: { id: string; content: string }) => {
+    setBusyId(v.id);
+    try { await g8Put(`${base}/${encodeURIComponent(v.id)}`, { content: v.content }); } finally { setBusyId(null); }
+  }, { invalidates: [["deals", "notes", dealId]], onSuccess: () => { setEditing(null); changed(); } });
+  const remove = useG8Mutation(async (id: string) => {
+    setBusyId(id);
+    try { await g8Delete(`${base}/${encodeURIComponent(id)}`); } finally { setBusyId(null); }
+  }, { invalidates: [["deals", "notes", dealId]], onSuccess: () => { setDeleting(null); changed(); }, onError: () => setDeleting(null) });
+
+  const items = notes.data ?? [];
+  const unchanged = editing ? editing.content.trim() === editing.original.trim() : true;
+  return (
+    <div className={`flex flex-col gap-3 ${className ?? ""}`}>
+      <form className="flex flex-col gap-2" onSubmit={(e) => { e.preventDefault(); if (draft.trim()) void add.mutate(draft.trim()); }}>
+        <Textarea aria-label="New note" rows={3} placeholder="Write a note about this deal" value={draft} onChange={(e) => setDraft(e.target.value)} />
+        <div className="flex justify-end"><Button type="submit" size="sm" loading={add.loading} disabled={!draft.trim()}>Add note</Button></div>
+      </form>
+      {add.error ? <ApiError error={add.error} title="Could not add the note" /> : null}
+      {edit.error ? <ApiError error={edit.error} title="Could not save the note" /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the note" /> : null}
+      {notes.error ? <ApiError error={notes.error} title="Could not load notes" onRetry={() => void notes.refetch()} /> : null}
+      {notes.loading && !notes.data ? <Skeleton className="h-16 w-full" aria-label="Loading notes" /> : null}
+      {!notes.loading && !notes.error && items.length === 0 ? <EmptyState icon={<StickyNote className="size-8" />} title="No notes yet" description="Capture what was said, decided or promised." /> : null}
+      <ul className="flex flex-col gap-2" aria-label="Deal notes">
+        {items.map((n) => (
+          <li key={n.id} className="rounded-md border p-3 text-sm" data-testid="deal-note">
+            {editing?.id === n.id ? (
+              <form className="flex flex-col gap-2" onSubmit={(e) => { e.preventDefault(); if (!unchanged && editing.content.trim()) void edit.mutate({ id: n.id, content: editing.content.trim() }); }}>
+                <Textarea aria-label="Edit note" rows={3} value={editing.content} onChange={(e) => setEditing({ ...editing, content: e.target.value })} />
+                <div className="flex justify-end gap-2">
+                  <Button type="button" size="sm" variant="outline" onClick={() => setEditing(null)}>Cancel</Button>
+                  <Button type="submit" size="sm" loading={busyId === n.id && edit.loading} disabled={unchanged || !editing.content.trim()}>Save note</Button>
+                </div>
+              </form>
+            ) : (
+              <>
+                <p className="whitespace-pre-wrap">{n.content}</p>
+                <div className="mt-2 flex items-center justify-between gap-2 text-xs text-muted-foreground">
+                  <span>{[n.created_by_name, when(n.updated_at ?? n.created_at)].filter(Boolean).join(" · ")}{n.read_only ? " · synced, read only" : ""}</span>
+                  {n.read_only ? null : (
+                    <span className="flex gap-1">
+                      <Button size="sm" variant="ghost" aria-label={`Edit note: ${n.content.slice(0, 30)}`} onClick={() => setEditing({ id: n.id, original: n.content, content: n.content })}>Edit</Button>
+                      <Button size="sm" variant="ghost" aria-label={`Delete note: ${n.content.slice(0, 30)}`} loading={busyId === n.id && remove.loading} onClick={() => setDeleting(n)}>Delete</Button>
+                    </span>
+                  )}
+                </div>
+              </>
+            )}
+          </li>
+        ))}
+      </ul>
+      <ConfirmSpendDialog open={deleting != null} tier="destructive" title="Delete this note?" description={deleting?.content.slice(0, 160)} confirmLabel="Delete note" affected={1} confirming={remove.loading} onConfirm={() => deleting && void remove.mutate(deleting.id)} onCancel={() => setDeleting(null)} />
+    </div>
+  );
+}

package/blocks/deals/components/deal-related.tsx

@@ -8,11 +8,12 @@
  *   DealContactsTab: GET /deals/{id}                    (deals.getDeal)    read - the deal's contacts and roles
  *                    GET /contacts/{id} ...             (crm ContactDetail, in a side sheet)
  *   DealQuotesTab:   GET /quotes?deal_id=&page=&limit   (quotes.listQuotes) read - needs the quotes:read scope
+ *                    (`actions` renders above the list: pass the quotes block's CreateQuoteFromDeal there)
  * Nothing here is billable, external or destructive.
  */
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { FileText, Users } from "lucide-react";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
@@ -20,9 +21,19 @@ import { StatusPill, toneForStatus, humanizeStatus } from "@/g8/components/scree
 import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { ContactDetail } from "@/g8/crm/components/contact-detail";
-import { dataOf, type Deal } from "../lib/deals-types";
+import { dataOf, type Deal, type DealContact } from "../lib/deals-types";
 
-export function DealContactsTab({ dealId }: { dealId: string }) {
+/** `renderContactActions` adds controls beside each contact (DealContactsEditor uses it for role, primary and remove). */
+export interface DealContactsTabProps {
+  dealId: string;
+  renderContactActions?: (contact: DealContact, deal: Deal) => ReactNode;
+  /** Open the person in your contacts screen (adds an "Open in contacts" button to the contact sheet). */
+  onOpenContact?: (contactId: number) => void;
+  /** Forwarded to the contact sheet's "Open company" button. */
+  onOpenCompany?: (companyId: number) => void;
+}
+
+export function DealContactsTab({ dealId, renderContactActions, onOpenContact, onOpenCompany }: DealContactsTabProps) {
   const [open, setOpen] = useState<number | null>(null);
   const q = useG8Query(async (signal) => dataOf<Deal>(await g8Get(`/deals/${encodeURIComponent(dealId)}`, undefined, { signal })), [dealId], { key: ["deals", "detail", dealId] });
   if (q.error) return <ApiError error={q.error} title="Could not load the deal's contacts" onRetry={() => void q.refetch()} />;
@@ -33,7 +44,7 @@ export function DealContactsTab({ dealId }: { dealId: string }) {
     <>
       <ul className="divide-y rounded-md border" aria-label="Deal contacts">
         {contacts.map((c) => (
-          <li key={c.id}>
+          <li key={c.id} className={renderContactActions ? "flex items-center gap-2 pr-2" : undefined}>
             <button type="button" className="flex w-full items-center gap-3 p-3 text-left hover:bg-muted" onClick={() => setOpen(c.id)}>
               <EntityAvatar name={c.name || c.email || "Contact"} size="md" />
               <span className="min-w-0 flex-1">
@@ -43,13 +54,19 @@ export function DealContactsTab({ dealId }: { dealId: string }) {
               {c.role ? <StatusPill tone="neutral">{humanizeStatus(c.role)}</StatusPill> : null}
               {q.data?.primary_contact?.id === c.id ? <StatusPill tone="info">Primary</StatusPill> : null}
             </button>
+            {renderContactActions && q.data ? renderContactActions(c, q.data) : null}
           </li>
         ))}
       </ul>
       <Sheet open={open != null} onOpenChange={(o) => { if (!o) setOpen(null); }}>
         <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
           <SheetHeader><SheetTitle>Contact</SheetTitle><SheetDescription>The full CRM record.</SheetDescription></SheetHeader>
-          {open != null ? <ContactDetail contactId={open} /> : null}
+          {open != null ? (
+            <>
+              {onOpenContact ? <div className="px-4"><Button size="sm" variant="outline" onClick={() => onOpenContact(open)}>Open in contacts</Button></div> : null}
+              <ContactDetail contactId={open} onOpenCompany={onOpenCompany} />
+            </>
+          ) : null}
         </SheetContent>
       </Sheet>
     </>
@@ -58,16 +75,19 @@ export function DealContactsTab({ dealId }: { dealId: string }) {
 
 interface QuoteRow { id: string; title?: string | null; quote_number?: string | null; status?: string | null; total?: number | null; currency?: string | null }
 
-export function DealQuotesTab({ dealId, onOpenQuote }: { dealId: string; onOpenQuote?: (quoteId: string) => void }) {
+/** `actions` renders above the list, for example the quotes block's "Create quote from this deal" button. */
+export function DealQuotesTab({ dealId, onOpenQuote, actions, refreshKey }: { dealId: string; onOpenQuote?: (quoteId: string) => void; actions?: ReactNode; refreshKey?: number }) {
   const q = useG8Query(async (signal) => {
     const env = await g8Get("/quotes", { deal_id: dealId, page: 1, limit: 50 }, { signal });
     const inner = dataOf<{ items?: QuoteRow[] } | QuoteRow[]>(env);
     return Array.isArray(inner) ? inner : (inner.items ?? []);
-  }, [dealId]);
+  }, [dealId, refreshKey]);
   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 icon={<FileText className="size-8" />} title="No quotes for this deal" description="Create one from the Quotes screen." />;
+  if (q.data.length === 0) return <div className="space-y-3">{actions}<EmptyState icon={<FileText className="size-8" />} title="No quotes for this deal" description="Create one from the Quotes screen." /></div>;
   return (
+    <div className="space-y-3">
+    {actions}
     <Table>
       <TableHeader><TableRow><TableHead>Quote</TableHead><TableHead>Status</TableHead><TableHead className="text-right">Total</TableHead></TableRow></TableHeader>
       <TableBody>
@@ -83,5 +103,6 @@ export function DealQuotesTab({ dealId, onOpenQuote }: { dealId: string; onOpenQ
         ))}
       </TableBody>
     </Table>
+    </div>
   );
 }

package/blocks/deals/components/deal-tasks-tab.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+/**
+ * DealTasksTab: the follow-up tasks linked to one deal: list, add, complete and reopen.
+ *
+ * SDK operations, in order:
+ *   1. GET   /tasks?entity_type=deal&entity_id={id}&status=   (tasks.listAllTasks)      read
+ *   2. POST  /tasks { title, due_date, priority, entity_type: "deal", entity_id }   (tasks.createGlobalTask)  write
+ *   3. PATCH /tasks/{task_id} { status }                       (tasks.updateTask)        write - open or completed
+ * Priority: 1 high, 2 medium, 3 low, 0 none. Due dates are date-only (YYYY-MM-DD) and shown in UTC.
+ */
+import { useState } from "react";
+import { ListChecks } from "lucide-react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { rowsOf, type DealTask } from "../lib/deal-extras";
+
+export interface DealTasksTabProps {
+  dealId: string;
+  onChanged?: () => void;
+  className?: string;
+}
+
+const PRIORITY = ["", "High", "Medium", "Low", "Low"];
+
+export function DealTasksTab({ dealId, onChanged, className }: DealTasksTabProps) {
+  const [title, setTitle] = useState("");
+  const [due, setDue] = useState("");
+  const [priority, setPriority] = useState(2);
+  const [showDone, setShowDone] = useState(false);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const tasks = useG8Query(
+    async (signal) => rowsOf<DealTask>(await g8Get("/tasks", { entity_type: "deal", entity_id: dealId, status: showDone ? undefined : "open", limit: 100 }, { signal })),
+    [dealId, showDone],
+    { key: ["tasks", "deal", dealId, { showDone }] },
+  );
+  const changed = () => { void tasks.refetch(); onChanged?.(); };
+  const add = useG8Mutation(
+    () => g8Post("/tasks", { title: title.trim(), priority, entity_type: "deal", entity_id: dealId, ...(due ? { due_date: due } : {}) }),
+    { invalidates: [["tasks"]], onSuccess: () => { setTitle(""); setDue(""); changed(); } },
+  );
+  const toggle = useG8Mutation(async (t: DealTask) => {
+    setBusyId(t.id);
+    try { await g8Patch(`/tasks/${encodeURIComponent(t.id)}`, { status: t.status === "completed" ? "open" : "completed" }); } finally { setBusyId(null); }
+  }, { invalidates: [["tasks"]], onSuccess: changed });
+
+  const items = tasks.data ?? [];
+  return (
+    <div className={`flex flex-col gap-3 ${className ?? ""}`}>
+      <form className="flex flex-wrap items-end gap-2" onSubmit={(e) => { e.preventDefault(); if (title.trim()) void add.mutate(undefined); }}>
+        <Input aria-label="Task title" placeholder="Add a task for this deal" className="min-w-48 flex-1" value={title} onChange={(e) => setTitle(e.target.value)} />
+        <Input aria-label="Due date" type="date" className="w-40" value={due} onChange={(e) => setDue(e.target.value)} />
+        <select aria-label="Priority" className="h-9 rounded-md border bg-background px-2 text-sm" value={priority} onChange={(e) => setPriority(Number(e.target.value))}>
+          <option value={1}>High</option><option value={2}>Medium</option><option value={3}>Low</option><option value={0}>None</option>
+        </select>
+        <Button type="submit" size="sm" loading={add.loading} disabled={!title.trim()}>Add task</Button>
+      </form>
+      <label className="flex items-center gap-2 text-sm text-muted-foreground">
+        <input type="checkbox" checked={showDone} onChange={(e) => setShowDone(e.target.checked)} /> Show completed
+      </label>
+      {add.error ? <ApiError error={add.error} title="Could not add the task" /> : null}
+      {toggle.error ? <ApiError error={toggle.error} title="Could not update the task" /> : null}
+      {tasks.error ? <ApiError error={tasks.error} title="Could not load tasks" onRetry={() => void tasks.refetch()} /> : null}
+      {tasks.loading && !tasks.data ? <Skeleton className="h-12 w-full" aria-label="Loading tasks" /> : null}
+      {!tasks.loading && !tasks.error && items.length === 0 ? <EmptyState icon={<ListChecks className="size-8" />} title="No tasks" description="Add a follow-up so this deal does not stall." /> : null}
+      <ul className="flex flex-col gap-2" aria-label="Deal tasks">
+        {items.map((t) => {
+          const completed = t.status === "completed";
+          return (
+            <li key={t.id} className="flex items-center gap-3 rounded-md border p-3" data-testid="deal-task">
+              <input type="checkbox" aria-label={`${completed ? "Reopen" : "Complete"} ${t.title}`} checked={completed} disabled={busyId === t.id} onChange={() => void toggle.mutate(t)} />
+              <div className="min-w-0 flex-1">
+                <p className={`truncate text-sm ${completed ? "text-muted-foreground line-through" : "font-medium"}`}>{t.title}</p>
+                <p className="text-xs text-muted-foreground">
+                  {[t.due_date ? `Due ${new Date(t.due_date.length === 10 ? `${t.due_date}T00:00:00Z` : t.due_date).toLocaleDateString(undefined, { timeZone: "UTC" })}` : null, PRIORITY[t.priority ?? 0] || null, t.assignee_name].filter(Boolean).join(" · ")}
+                </p>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

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

@@ -5,21 +5,28 @@
  * pipeline stage settings in one screen. No props are required.
  *
  * It composes: PipelineBoard (kanban, drag or "Move to"), a deals table, DealDetail (edit, stage history, delete),
- * ForecastView, StageEditor, DealContactsTab, DealQuotesTab and the crm block's ActivityTimeline and ContactDetail.
+ * ForecastView, StageEditor, PipelineEditor, DealContactsEditor, DealLineItems, DealNotesTab, DealTasksTab, DealQuotesTab,
+ * DealActions (close with a reason, move pipeline), DealFilterBar and the crm block's ActivityTimeline and ContactDetail.
  *
  * Flows:
  *   - Board / List toggle, search by deal name, switch pipeline (when there is more than one).
  *   - Headline numbers: open deals, open value, estimated weighted value, won value (from the loaded deals).
+ *   - Filters (board and list): owner, stage, outcome, stale (no activity for 7 to 90 days), activity, close-date range
+ *     and "no contact".
  *   - Open a deal (board card or list row; deep link ?id=, full page with &view=full) -> Details (every field,
- *     edit, stage history, confirmed delete), Contacts (open the full CRM record), Quotes and Activity tabs. Moving a card into a won/lost stage asks for the close date and amount.
+ *     edit, stage history, confirmed delete), Contacts (add, set role, make primary, remove), Line items (add, edit,
+ *     remove, totals), Notes (add, edit, delete), Tasks (add, complete), Quotes and Activity tabs. The header has
+ *     "Close deal" (won or lost with a reason) and "Move to pipeline". Moving a card into a won/lost stage asks for the close date and amount.
  *   - New deal: name, amount, close date, stage, plus the two things the API requires. The OWNER defaults to the API
  *     key's own user (GET /team-members/me); with an organisation key it defaults to the first team member and an
  *     owner picker lets the person change it. At least ONE CONTACT is required by the API (`contact_ids`), found with a
  *     search box. A company that already has a deal is refused (409) unless "Allow another deal" is ticked.
- *   - Forecast tab (ForecastView) and Pipeline settings tab (stage summary with deal counts and values, plus StageEditor: names, probabilities, order, delete).
+ *   - Forecast tab (ForecastView) and Pipeline settings tab (create, rename, default and delete pipelines, the close
+ *     reasons, a stage summary with deal counts and values, plus StageEditor: names, probabilities, order, delete).
  *
  * SDK operations (all through the composed parts): listPipelines, listDeals, getDeal, listDealHistory, createDeal,
- * updateDeal, deleteDeal (confirmed), getDealAnalytics, getDealStageVelocity, the pipeline-stage writes,
+ * updateDeal, deleteDeal (confirmed), the notes, tasks, contact, line-item, close-reason and pipeline operations of the parts
+ * above, getDealAnalytics, getDealStageVelocity, the pipeline-stage writes,
  * listTeamMembers + getMyTeamMember (the owner default) and the crm block's listContacts + activity feed.
  * Nothing here is billable or external; delete is destructive and goes through ConfirmSpendDialog inside DealDetail.
  *
@@ -50,10 +57,18 @@ import { usePipelineDeals } from "../hooks/use-pipeline-deals";
 import { usePipelines } from "../hooks/use-pipelines";
 import { dataOf, formatDate, formatMoney, stageKind, sumMoney, weightedPipeline, type Deal, type Stage } from "../lib/deals-types";
 import { DealDetail } from "./deal-detail";
-import { DealContactsTab, DealQuotesTab } from "./deal-related";
+import { DealActions } from "./close-deal-dialog";
+import { DealContactsEditor } from "./deal-contacts-editor";
+import { DealFilterBar } from "./deal-filters";
+import { DealLineItems } from "./deal-line-items";
+import { DealNotesTab } from "./deal-notes-tab";
+import { DealQuotesTab } from "./deal-related";
+import { DealTasksTab } from "./deal-tasks-tab";
 import { ForecastView } from "./forecast-view";
 import { PipelineBoard } from "./pipeline-board";
+import { PipelineEditor } from "./pipeline-editor";
 import { StageEditor } from "./stage-editor";
+import { NO_FILTERS, filterQuery, filtersActive, type DealFilterState } from "../lib/deal-extras";
 import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface DealsScreenProps {
@@ -69,6 +84,12 @@ export interface DealsScreenProps {
   toolbarActions?: ReactNode;
   /** Open a quote of the deal in your quotes screen; without it the Quotes tab is read-only. */
   onOpenQuote?: (quoteId: string) => void;
+  /** Buttons above the Quotes tab list, for example the quotes block's `<CreateQuoteFromDeal dealId={deal.id} />`. */
+  renderQuoteActions?: (deal: Deal) => ReactNode;
+  /** Open a deal's contact in your contacts screen; without it the Contacts tab sheet has no such button. */
+  onOpenContact?: (contactId: number) => void;
+  /** Open the company of a deal's contact in your companies screen. */
+  onOpenCompany?: (companyId: number) => void;
 }
 
 type View = "board" | "list" | "forecast" | "stages";
@@ -201,7 +222,7 @@ function DealRows({ deals, stages, selectedId, onOpen, renderRowActions }: { dea
   );
 }
 
-export function DealsScreen({ pipelineId: initialPipelineId, renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions, onOpenQuote }: DealsScreenProps) {
+export function DealsScreen({ pipelineId: initialPipelineId, renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions, onOpenQuote, renderQuoteActions, onOpenContact, onOpenCompany }: DealsScreenProps) {
   const brand = useBrand();
   const [viewParam, setViewParam] = useUrlState("tab", "board");
   const [selectedId, setSelectedId] = useUrlState("id");
@@ -212,10 +233,16 @@ export function DealsScreen({ pipelineId: initialPipelineId, renderRowActions, r
   const [creating, setCreating] = useState(false);
   const [version, setVersion] = useState(0);
   const view = asView(viewParam);
+  const [filterState, setFilterState] = useState<DealFilterState>(NO_FILTERS);
+  const filterKey = JSON.stringify(filterState);
+  // The stale cutoff is midnight UTC, so the object is stable all day; recompute only when a filter changes.
+  const filters = useMemo(() => filterQuery(filterState), [filterKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  const owners = useDefaultOwner();
   const pipelines = usePipelines();
   const pipeline = pipelines.pipelines.find((p) => p.id === pipelineParam) ?? pipelines.defaultPipeline;
-  const data = usePipelineDeals(pipeline?.id, { search });
+  const data = usePipelineDeals(pipeline?.id, { search, ...filters });
   const stages = pipeline?.stages ?? [];
+  const filtered = filtersActive(filterState);
   const refresh = () => { setVersion((v) => v + 1); void data.reload(); };
 
   const stats = useMemo(() => {
@@ -224,12 +251,12 @@ export function DealsScreen({ pipelineId: initialPipelineId, renderRowActions, r
     const cur = data.deals[0]?.currency;
     const weighted = (group: ReadonlyArray<Deal>) => Math.round(weightedPipeline(group, stages).value);
     return [
-      { label: "Open deals", value: open.length.toLocaleString() },
-      { label: "Open value", value: sumMoney(open, undefined, cur) },
-      { label: "Weighted (estimate)", value: sumMoney(data.deals, weighted, cur), hint: "Open deals times stage probability" },
-      { label: "Won", value: sumMoney(won, undefined, cur), tone: "positive" as const },
+      { label: "Open deals", value: open.length.toLocaleString(), ...(filtered ? { hint: "Filters applied" } : {}) },
+      { label: "Open value", value: sumMoney(open, undefined, cur), ...(filtered ? { hint: "Filters applied" } : {}) },
+      { label: "Weighted (estimate)", value: sumMoney(data.deals, weighted, cur), hint: filtered ? "Filters applied" : "Open deals times stage probability" },
+      { label: "Won", value: sumMoney(won, undefined, cur), tone: "positive" as const, ...(filtered ? { hint: "Filters applied" } : {}) },
     ];
-  }, [data.deals, stages]);
+  }, [data.deals, stages, filtered]);
 
   const listed = data.deals.find((d) => d.id === selectedId);
   // A deep link can point at a deal in another pipeline or hidden by the search: resolve it directly.
@@ -244,14 +271,17 @@ export function DealsScreen({ pipelineId: initialPipelineId, renderRowActions, r
       title={selected?.name || "Deal"}
       subtitle={selected ? [selected.stage_name, formatMoney(selected.amount, selected.currency)].join(" · ") : undefined}
       badges={selected ? <StatusPill tone={stageTone(stages.find((s) => s.id === selected.stage_id))} dot>{selected.stage_name ?? "Open"}</StatusPill> : undefined}
-      actions={selected && renderDetailActions ? renderDetailActions(selected) : undefined}
+      actions={selected ? <>{pipelines.pipelines.length > 0 ? <DealActions deal={selected} pipelines={pipelines.pipelines} onChanged={refresh} /> : null}{renderDetailActions?.(selected)}</> : undefined}
       onClose={close}
       onExpand={mode === "full" ? undefined : () => setMode("full")}
       onCollapse={mode === "full" ? () => setMode(null) : undefined}
       tabs={[
         { id: "details", label: "Details", content: <DealDetail key={selectedId} dealId={selectedId} onSaved={refresh} onDeleted={() => { close(); refresh(); }} /> },
-        { id: "contacts", label: "Contacts", content: <DealContactsTab key={selectedId} dealId={selectedId} /> },
-        { id: "quotes", label: "Quotes", content: <DealQuotesTab key={selectedId} dealId={selectedId} onOpenQuote={onOpenQuote} /> },
+        { id: "contacts", label: "Contacts", content: <DealContactsEditor key={selectedId} dealId={selectedId} onChanged={refresh} onOpenContact={onOpenContact} onOpenCompany={onOpenCompany} /> },
+        { id: "line-items", label: "Line items", content: <DealLineItems key={selectedId} dealId={selectedId} onSaved={refresh} /> },
+        { id: "notes", label: "Notes", content: <DealNotesTab key={selectedId} dealId={selectedId} /> },
+        { id: "tasks", label: "Tasks", content: <DealTasksTab key={selectedId} dealId={selectedId} /> },
+        { id: "quotes", label: "Quotes", content: <DealQuotesTab key={selectedId} dealId={selectedId} onOpenQuote={onOpenQuote} actions={selected && renderQuoteActions ? renderQuoteActions(selected) : undefined} refreshKey={version} /> },
         { id: "activity", label: "Activity", content: <ActivityTimeline entityType="deal" entityId={selectedId} /> },
         ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: selected ? t.render(selected) : null })),
       ]}
@@ -264,8 +294,8 @@ export function DealsScreen({ pipelineId: initialPipelineId, renderRowActions, r
 
   let body: ReactNode;
   if (view === "forecast") body = <ForecastView pipelineId={pipeline?.id} />;
-  else if (view === "stages") body = pipeline ? <div className="space-y-6"><StageSummary stages={stages} deals={data.deals} /><StageEditor pipelineId={pipeline.id} onChanged={refresh} /></div> : <EmptyState title="No pipeline yet" description={`Create a pipeline in ${brand.linkLabel} first.`} />;
-  else body = <SplitView detailOpen={Boolean(selectedId)} onCloseDetail={close} expanded={mode === "full" && Boolean(selectedId)} onExpandedChange={(full) => setMode(full ? "full" : null)} detailWidth="lg" detail={detail} list={view === "board" ? <PipelineBoard key={`${pipeline?.id}-${version}`} pipelineId={pipeline?.id} search={search} onSelectDeal={(d) => open(d.id)} onChanged={() => void data.reload()} /> : list} />;
+  else if (view === "stages") body = pipeline ? <div className="space-y-6"><PipelineEditor onChanged={(e) => { if (e.kind === "deleted" && e.pipelineId === pipeline.id) { setPipelineParam(""); close(); } refresh(); }} /><StageSummary stages={stages} deals={data.deals} /><StageEditor pipelineId={pipeline.id} onChanged={refresh} /></div> : <EmptyState title="No pipeline yet" description={`Create a pipeline in ${brand.linkLabel} first.`} />;
+  else body = <SplitView detailOpen={Boolean(selectedId)} onCloseDetail={close} expanded={mode === "full" && Boolean(selectedId)} onExpandedChange={(full) => setMode(full ? "full" : null)} detailWidth="lg" detail={detail} list={view === "board" ? <PipelineBoard key={`${pipeline?.id}-${version}`} pipelineId={pipeline?.id} search={search} filters={filters} onSelectDeal={(d) => open(d.id)} onChanged={() => void data.reload()} /> : list} />;
 
   return (
     <ScreenLayout
@@ -280,11 +310,16 @@ export function DealsScreen({ pipelineId: initialPipelineId, renderRowActions, r
       toolbar={showToolbar ? (
         <Toolbar
           search={{ value: searchText, onChange: setSearchText, placeholder: "Search deals" }}
-          filters={pipelines.pipelines.length > 1 ? (
-            <select aria-label="Pipeline" className="h-9 rounded-md border bg-background px-2 text-sm" value={pipeline?.id ?? ""} onChange={(e) => { setPipelineParam(e.target.value); close(); }}>
-              {pipelines.pipelines.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
-            </select>
-          ) : undefined}
+          filters={(
+            <>
+              {pipelines.pipelines.length > 1 ? (
+                <select aria-label="Pipeline" className="h-9 rounded-md border bg-background px-2 text-sm" value={pipeline?.id ?? ""} onChange={(e) => { setPipelineParam(e.target.value); setFilterState((f) => ({ ...f, stageId: "" })); close(); }}>
+                  {pipelines.pipelines.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+                </select>
+              ) : null}
+              <DealFilterBar value={filterState} onChange={(next) => { setFilterState(next); }} stages={stages} owners={owners.owners} />
+            </>
+          )}
           actions={toolbarActions}
         />
       ) : undefined}

package/blocks/deals/components/forecast-view.tsx

@@ -42,7 +42,7 @@ interface Velocity {
 }
 
 function Tile({ label, value, hint }: { label: string; value: string; hint?: string }) {
-  return <div className="rounded-lg border p-3"><div className="text-xs uppercase text-muted-foreground">{label}</div><div className="text-lg font-semibold">{value}</div>{hint ? <div className="text-xs text-muted-foreground">{hint}</div> : null}</div>;
+  return <div className="rounded-lg border p-3"><div className="text-xs uppercase text-muted-foreground">{label}</div><div className="text-lg font-medium">{value}</div>{hint ? <div className="text-xs text-muted-foreground">{hint}</div> : null}</div>;
 }
 
 const MAX_OPEN_DEALS = 2000;
@@ -84,7 +84,7 @@ export function ForecastView({ pipelineId, stuckAfterDays = 14, className }: For
       </div>
 
       <section aria-label="Deals by stage" className="space-y-1">
-        <h3 className="text-sm font-semibold">Deals by stage</h3>
+        <h3 className="text-sm font-medium">Deals by stage</h3>
         {(analytics.data?.by_stage ?? []).map((s) => (
           <div key={`${s.stage_id}-${s.stage_name}`} className="flex items-center gap-2 text-sm">
             <span className="w-40 truncate">{s.stage_name}</span>
@@ -95,14 +95,14 @@ export function ForecastView({ pipelineId, stuckAfterDays = 14, className }: For
       </section>
 
       <section aria-label="Stage velocity" className="space-y-1 text-sm">
-        <h3 className="font-semibold">Where deals stall</h3>
+        <h3 className="font-medium">Where deals stall</h3>
         {(velocity.data?.by_stage ?? []).map((s) => <p key={s.stage_id}>{s.stage_name}: {s.avg_days_in_stage != null ? `${s.avg_days_in_stage.toFixed(1)} days average` : "no data"}{s.conversion_rate != null ? `, ${Math.round(s.conversion_rate * 100)}% advance` : ""}, {s.still_in_stage_count} waiting</p>)}
         <p className="text-muted-foreground">{velocity.data?.stuck_deals?.total_count ?? 0} deals have not moved in {velocity.data?.stuck_deals?.threshold_days ?? stuckAfterDays}+ days.</p>
       </section>
 
       {(analytics.data?.trend ?? []).length > 0 ? (
         <section aria-label="Won and lost by month" className="space-y-1 text-sm">
-          <h3 className="font-semibold">Won and lost by month</h3>
+          <h3 className="font-medium">Won and lost by month</h3>
           {(analytics.data?.trend ?? []).slice(-6).map((p) => <p key={p.period}>{p.period}: {p.won_count} won{p.won_value != null && !mixed ? ` (${formatMoney(p.won_value, code)})` : ""}, {p.lost_count} lost</p>)}
         </section>
       ) : null}