@graph8/sdk 0.362.0 → 0.373.0

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.
  *
@@ -43,15 +50,26 @@ import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { ActivityTimeline } from "@/g8/crm/components/activity-timeline";
 import { useDebouncedValue } from "@/g8/crm/hooks/use-debounced";
 import { contactName, type ContactRecord } from "@/g8/crm/lib/crm-types";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 import { useDefaultOwner } from "../hooks/use-default-owner";
 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 {
   /** Start on this pipeline; defaults to the org's default one. */
@@ -66,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";
@@ -84,6 +108,7 @@ function stageTone(stage: Stage | undefined): "neutral" | "positive" | "negative
 
 /** Contact search + chips for the new-deal sheet. The API requires at least one contact. */
 function ContactPicker({ value, onChange }: { value: ContactRecord[]; onChange: (next: ContactRecord[]) => void }) {
+  const brand = useBrand();
   const [text, setText] = useState("");
   const term = useDebouncedValue(text.trim());
   const found = useG8Query(async (signal) => {
@@ -119,7 +144,7 @@ function ContactPicker({ value, onChange }: { value: ContactRecord[]; onChange:
           </li>
         ))}
       </ul>
-      <p className="text-xs text-muted-foreground">graph8 needs at least one contact on a deal. Every contact must work at the same company.</p>
+      <p className="text-xs text-muted-foreground">{brand.linkLabel} needs at least one contact on a deal. Every contact must work at the same company.</p>
     </div>
   );
 }
@@ -182,8 +207,8 @@ function DealRows({ deals, stages, selectedId, onOpen, renderRowActions }: { dea
         {deals.map((d) => {
           const stage = d.stage_id ? byId.get(d.stage_id) : undefined;
           return (
-            <TableRow key={d.id} data-state={selectedId === d.id ? "selected" : undefined} className="cursor-pointer" onClick={() => onOpen(d)}>
-              <TableCell><button type="button" className="font-medium hover:underline" onClick={(e) => { e.stopPropagation(); onOpen(d); }}>{d.name || "Untitled deal"}</button></TableCell>
+            <TableRow key={d.id} data-state={selectedId === d.id ? "selected" : undefined} className="cursor-pointer" {...rowActivationProps(() => onOpen(d))}>
+              <TableCell><RecordLink param="id" id={d.id} onOpen={() => onOpen(d)}>{d.name || "Untitled deal"}</RecordLink></TableCell>
               <TableCell><StatusPill tone={stageTone(stage)} dot>{stage?.name ?? d.stage_name ?? "Unknown"}</StatusPill></TableCell>
               <TableCell className="text-right tabular-nums">{formatMoney(d.amount, d.currency)}</TableCell>
               <TableCell><span className="inline-flex items-center gap-2"><EntityAvatar name={d.owner_name ?? d.owner_email ?? "?"} size="sm" />{d.owner_name ?? d.owner_email ?? "No owner"}</span></TableCell>
@@ -197,7 +222,8 @@ 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");
   const [mode, setMode] = useUrlState("view");
@@ -207,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(() => {
@@ -219,16 +251,16 @@ 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.
-  const fetched = useG8Query(async (signal) => dataOf<Deal>(await g8Get(`/deals/${encodeURIComponent(selectedId ?? "")}`, undefined, { signal })), [selectedId, version], { enabled: Boolean(selectedId) && !listed && !data.loading });
+  const fetched = useG8Query(async (signal) => dataOf<Deal>(await g8Get(`/deals/${encodeURIComponent(selectedId ?? "")}`, undefined, { signal })), [selectedId, version], { enabled: Boolean(selectedId) && !listed && !data.loading, key: ["deals", "detail", selectedId ?? null] });
   const selected = listed ?? (fetched.data?.id === selectedId ? fetched.data : undefined);
   const open = (id: string) => setSelectedId(id);
   const close = () => { setSelectedId(null); setMode(null); };
@@ -239,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 })),
       ]}
@@ -259,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 graph8 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
@@ -275,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}

package/blocks/deals/components/pipeline-board.tsx

@@ -19,7 +19,7 @@ import { DndContext, KeyboardSensor, PointerSensor, useDraggable, useDroppable,
 import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
-import { usePipelineDeals } from "../hooks/use-pipeline-deals";
+import { usePipelineDeals, type PipelineDealFilters } from "../hooks/use-pipeline-deals";
 import { usePipelines } from "../hooks/use-pipelines";
 import { closedStageMarker, formatDate, formatMoney, stageKind, sumAmounts, type Deal, type Stage } from "../lib/deals-types";
 
@@ -28,6 +28,8 @@ export interface PipelineBoardProps {
   pipelineId?: string;
   search?: string;
   ownerId?: string;
+  /** More list filters (stage, outcome, stale, close-date range ...); the same object the screen passes to usePipelineDeals. */
+  filters?: Omit<PipelineDealFilters, "search" | "ownerId">;
   onSelectDeal?: (deal: Deal) => void;
   /** Called after a stage move was saved, so a screen can refresh its totals. */
   onChanged?: () => void;
@@ -61,7 +63,7 @@ function Column({ stage, stages, deals, moving, onMove, onSelect }: { stage: Sta
   return (
     <section ref={setNodeRef} aria-label={stage.name} className={`flex w-72 shrink-0 flex-col gap-2 rounded-lg border bg-muted/40 p-2 ${isOver ? "ring-2 ring-primary" : ""}`}>
       <header className="flex items-center justify-between px-1">
-        <h3 className="text-sm font-semibold">{stage.name}{kind !== "open" ? ` (${kind})` : ""}</h3>
+        <h3 className="text-sm font-medium">{stage.name}{kind !== "open" ? ` (${kind})` : ""}</h3>
         <span className="text-xs text-muted-foreground">{deals.length} · {formatMoney(sumAmounts(deals), deals[0]?.currency)}</span>
       </header>
       <div className="flex min-h-16 flex-col gap-2">
@@ -85,7 +87,7 @@ function CloseDialog({ stage, deal, onConfirm, onCancel }: { stage: Stage; deal:
   return (
     <div role="dialog" aria-modal="true" aria-label={`Close deal as ${stageKind(stage)}`} className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
       <form className="w-full max-w-sm space-y-3 rounded-lg bg-background p-5 shadow-xl" onSubmit={(e) => { e.preventDefault(); if (valid) onConfirm({ close_date: date, amount: amount === "" ? undefined : Number(amount) }); }}>
-        <h2 className="text-base font-semibold">Move "{deal.name}" to {stage.name}</h2>
+        <h2 className="text-base font-medium">Move "{deal.name}" to {stage.name}</h2>
         <div className="space-y-1"><Label htmlFor="cd-date">Close date</Label><Input id="cd-date" type="date" value={date} onChange={(e) => setDate(e.target.value)} /></div>
         {won ? <div className="space-y-1"><Label htmlFor="cd-amount">Amount</Label><Input id="cd-amount" type="number" min={0} value={amount} onChange={(e) => setAmount(e.target.value)} /></div> : null}
         <div className="flex justify-end gap-2"><Button type="button" variant="outline" onClick={onCancel}>Cancel</Button><Button type="submit" disabled={!valid}>Move deal</Button></div>
@@ -94,10 +96,10 @@ function CloseDialog({ stage, deal, onConfirm, onCancel }: { stage: Stage; deal:
   );
 }
 
-export function PipelineBoard({ pipelineId, search, ownerId, onSelectDeal, onChanged, className }: PipelineBoardProps) {
+export function PipelineBoard({ pipelineId, search, ownerId, filters, onSelectDeal, onChanged, className }: PipelineBoardProps) {
   const pipelines = usePipelines();
   const pipeline = pipelines.pipelines.find((p) => p.id === pipelineId) ?? pipelines.defaultPipeline;
-  const { deals, loading, error, reload, moveDeal, movingIds } = usePipelineDeals(pipeline?.id, { search, ownerId });
+  const { deals, loading, error, reload, moveDeal, movingIds } = usePipelineDeals(pipeline?.id, { search, ownerId, ...filters });
   const [closing, setClosing] = useState<{ deal: Deal; stage: Stage } | null>(null);
   const [moveError, setMoveError] = useState<unknown>(null);
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor));
@@ -127,7 +129,7 @@ export function PipelineBoard({ pipelineId, search, ownerId, onSelectDeal, onCha
   if (pipelines.loading || !pipeline) return pipelines.loading ? <Skeleton className="h-64 w-full" aria-label="Loading pipeline" /> : <EmptyState title="No pipeline yet" description="Create a pipeline with stages, then your deals appear here." />;
   return (
     <div className={`space-y-3 ${className ?? ""}`}>
-      <h2 className="text-base font-semibold">{pipeline.name}</h2>
+      <h2 className="text-base font-medium">{pipeline.name}</h2>
       {error ? <ApiError error={error} title="Could not load deals" onRetry={() => void reload()} /> : null}
       {moveError ? <ApiError error={moveError} title="That move was not saved" /> : null}
       {loading && deals.length === 0 ? <Skeleton className="h-48 w-full" aria-label="Loading deals" /> : (

package/blocks/deals/components/pipeline-editor.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+/**
+ * PipelineEditor: create, rename, set the default and delete whole pipelines, and keep the close reasons.
+ * Stages of one pipeline are edited by StageEditor, which the deals screen shows right below.
+ *
+ * SDK operations, in order:
+ *   1. GET    /deals/pipelines                   (deals.listPipelines)           read  - via usePipelines
+ *   2. POST   /pipelines { name, blank: true }   (cliPipelines.createPipeline)   write - a blank pipeline (add stages next)
+ *      PUT    /pipelines/{id} { name }           (cliPipelines.updatePipeline)   write - only the changed field is sent
+ *      PUT    /pipelines/{id} { set_default }    (cliPipelines.updatePipeline)   write
+ *   3. DELETE /pipelines/{id}                    (cliPipelines.deletePipeline)   DESTRUCTIVE -> ConfirmSpendDialog first
+ *   4. GET    /deals/close-reasons               (deals.listDealCloseReasons)    read
+ *      POST   /deals/close-reasons { kind, label } (deals.createDealCloseReason) write
+ *      DELETE /deals/close-reasons/{id}          (deals.archiveDealCloseReason)  DESTRUCTIVE -> ConfirmSpendDialog (hidden unless the API says you may)
+ * Pipelines live under the campaigns:* scopes; close reasons under deals:*. The API refuses to delete a pipeline that
+ * still has deals; its message is shown. Not covered by this API: suggesting a pipeline with AI is a billable call this
+ * editor leaves out.
+ */
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+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 { usePipelines } from "../hooks/use-pipelines";
+import type { Pipeline } from "../lib/deals-types";
+import { reasonsOf, type CloseReason } from "../lib/deal-extras";
+
+export interface PipelineEditorProps {
+  /** Called after a pipeline was created, renamed, made default or deleted. */
+  onChanged?: (event: { kind: "created" | "renamed" | "default" | "deleted"; pipelineId?: string }) => void;
+  className?: string;
+}
+
+function PipelineRow({ pipeline, busy, onRename, onDefault, onDelete }: { pipeline: Pipeline; busy: boolean; onRename: (name: string) => void; onDefault: () => void; onDelete: () => void }) {
+  const [name, setName] = useState(pipeline.name);
+  const changed = name.trim() !== pipeline.name && name.trim() !== "";
+  return (
+    <li className="flex flex-wrap items-center gap-2 rounded-md border p-2">
+      <Input aria-label={`Name of pipeline ${pipeline.name}`} className="w-56" value={name} onChange={(e) => setName(e.target.value)} />
+      <Button size="sm" variant="outline" loading={busy} disabled={!changed || busy} aria-label={`Rename ${pipeline.name}`} onClick={() => onRename(name.trim())}>Rename</Button>
+      {pipeline.is_default ? <span className="text-xs text-muted-foreground">Default</span> : <Button size="sm" variant="ghost" disabled={busy} aria-label={`Make ${pipeline.name} the default`} onClick={onDefault}>Make default</Button>}
+      <Button size="sm" variant="ghost" disabled={busy} aria-label={`Delete pipeline ${pipeline.name}`} onClick={onDelete}>Delete</Button>
+    </li>
+  );
+}
+
+function CloseReasons() {
+  const [kind, setKind] = useState<"won" | "lost">("lost");
+  const [label, setLabel] = useState("");
+  const [archiving, setArchiving] = useState<CloseReason | null>(null);
+  const list = useG8Query(async (signal) => reasonsOf(await g8Get("/deals/close-reasons", { kind }, { signal })), [kind], { key: ["deals", "close-reasons", kind] });
+  const add = useG8Mutation(() => g8Post("/deals/close-reasons", { kind, label: label.trim() }), { invalidates: [["deals", "close-reasons"]], onSuccess: () => setLabel("") });
+  const archive = useG8Mutation((r: CloseReason) => g8Delete(`/deals/close-reasons/${encodeURIComponent(r.id)}`), { invalidates: [["deals", "close-reasons"]], onSuccess: () => setArchiving(null), onError: () => setArchiving(null) });
+  const reasons = (list.data ?? []).filter((r) => !r.kind || r.kind === kind);
+  return (
+    <section aria-label="Close reasons" className="space-y-2">
+      <h3 className="text-base font-semibold">Close reasons</h3>
+      <p className="text-sm text-muted-foreground">The reasons offered when a deal is closed. Archiving one keeps it on past deals.</p>
+      <div className="flex gap-2">
+        <select aria-label="Reason type" className="h-9 rounded-md border bg-background px-2 text-sm" value={kind} onChange={(e) => setKind(e.target.value as "won" | "lost")}>
+          <option value="won">Won</option>
+          <option value="lost">Lost</option>
+        </select>
+        <Input aria-label="New close reason" placeholder={`Add a ${kind} reason`} value={label} onChange={(e) => setLabel(e.target.value)} />
+        <Button loading={add.loading} disabled={!label.trim()} onClick={() => void add.mutate(undefined)}>Add reason</Button>
+      </div>
+      {add.error ? <ApiError error={add.error} title="Could not add the reason" /> : null}
+      {archive.error ? <ApiError error={archive.error} title="Could not archive the reason" /> : null}
+      {list.error ? <ApiError error={list.error} title="Could not load close reasons" onRetry={() => void list.refetch()} /> : null}
+      {list.loading && !list.data ? <Skeleton className="h-10 w-full" aria-label="Loading close reasons" /> : null}
+      {!list.loading && !list.error && reasons.length === 0 ? <p className="text-sm text-muted-foreground">No {kind} reasons yet.</p> : null}
+      <ul className="divide-y rounded-md border empty:hidden" aria-label={`${kind} reasons`}>
+        {reasons.map((r) => (
+          <li key={r.id} className="flex items-center justify-between gap-2 p-2 text-sm">
+            <span>{r.label}</span>
+            {r.canArchive ? <Button size="sm" variant="ghost" aria-label={`Archive reason ${r.label}`} onClick={() => setArchiving(r)}>Archive</Button> : null}
+          </li>
+        ))}
+      </ul>
+      <ConfirmSpendDialog open={archiving != null} tier="destructive" title={`Archive the reason "${archiving?.label}"?`} description="It is no longer offered when closing deals." confirmLabel="Archive reason" affected={1} confirming={archive.loading} onConfirm={() => archiving && void archive.mutate(archiving)} onCancel={() => setArchiving(null)} />
+    </section>
+  );
+}
+
+export function PipelineEditor({ onChanged, className }: PipelineEditorProps) {
+  const { pipelines, loading, error, refetch } = usePipelines();
+  const [newName, setNewName] = useState("");
+  const [removing, setRemoving] = useState<Pipeline | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const inv = [["deals", "pipelines"]] as const;
+
+  const create = useG8Mutation(async () => g8Post("/pipelines", { name: newName.trim(), blank: true }), { invalidates: inv, onSuccess: () => { setNewName(""); onChanged?.({ kind: "created" }); } });
+  const rename = useG8Mutation(async (v: { id: string; name: string }) => {
+    setBusyId(v.id);
+    try { await g8Put(`/pipelines/${encodeURIComponent(v.id)}`, { name: v.name }); } finally { setBusyId(null); }
+  }, { invalidates: inv, onSuccess: (_r, v) => onChanged?.({ kind: "renamed", pipelineId: v.id }) });
+  const makeDefault = useG8Mutation(async (id: string) => {
+    setBusyId(id);
+    try { await g8Put(`/pipelines/${encodeURIComponent(id)}`, { set_default: true }); } finally { setBusyId(null); }
+  }, { invalidates: inv, onSuccess: (_r, id) => onChanged?.({ kind: "default", pipelineId: id }) });
+  const remove = useG8Mutation(async (p: Pipeline) => {
+    setBusyId(p.id);
+    try { await g8Delete(`/pipelines/${encodeURIComponent(p.id)}`); } finally { setBusyId(null); }
+  }, { invalidates: inv, onSuccess: (_r, p) => { setRemoving(null); onChanged?.({ kind: "deleted", pipelineId: p.id }); }, onError: () => setRemoving(null) });
+  const failure = create.error ?? rename.error ?? makeDefault.error ?? remove.error;
+
+  return (
+    <div className={`space-y-6 ${className ?? ""}`}>
+      <section aria-label="Pipelines" className="space-y-2">
+        <h3 className="text-base font-semibold">Pipelines</h3>
+        {error ? <ApiError error={error} title="Could not load pipelines" onRetry={() => void refetch()} /> : null}
+        {loading && pipelines.length === 0 ? <Skeleton className="h-16 w-full" aria-label="Loading pipelines" /> : null}
+        {failure ? <ApiError error={failure} title="That pipeline change failed" /> : null}
+        <ul className="space-y-2">
+          {pipelines.map((p) => (
+            <PipelineRow key={`${p.id}:${p.name}`} pipeline={p} busy={busyId === p.id} onRename={(name) => void rename.mutate({ id: p.id, name })} onDefault={() => void makeDefault.mutate(p.id)} onDelete={() => setRemoving(p)} />
+          ))}
+        </ul>
+        <form className="flex gap-2" onSubmit={(e) => { e.preventDefault(); if (newName.trim()) void create.mutate(undefined); }}>
+          <Input aria-label="New pipeline name" placeholder="New pipeline name" value={newName} onChange={(e) => setNewName(e.target.value)} />
+          <Button type="submit" loading={create.loading} disabled={!newName.trim()}><Plus className="size-4" aria-hidden />Create pipeline</Button>
+        </form>
+      </section>
+      <CloseReasons />
+      <ConfirmSpendDialog open={removing != null} tier="destructive" title={`Delete the "${removing?.name}" pipeline?`} description="Its stages are removed too. The API refuses while deals are still in it: move them to another pipeline first." confirmLabel="Delete pipeline" affected={1} confirming={remove.loading} onConfirm={() => removing && void remove.mutate(removing)} onCancel={() => setRemoving(null)} />
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+"use client";
+
+/**
+ * RecordDealsTab: the deals linked to one contact or company, each opening in the deals screen. Use it as an
+ * `extraDetailTabs` entry of ContactsScreen / CompaniesScreen:
+ *   { id: "deals", label: "Deals", render: (c) => <RecordDealsTab kind="contacts" id={c.id} onOpenDeal={(id) => router.push(`/deals?id=${id}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. getContactDeals  GET /contacts/{id}/deals   (read)   when kind="contacts"
+ *      getCompanyDeals  GET /companies/{id}/deals  (read)   when kind="companies"
+ * Nothing here is billable, external or destructive.
+ */
+
+import { Skeleton } from "@graph8/sdk/ui";
+import { Handshake } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { dataOf, formatMoney } from "../lib/deals-types";
+
+/** One row of GET /contacts/{id}/deals and GET /companies/{id}/deals (the API's ContactDealResponse). */
+interface LinkedDeal { deal_id?: string | null; name?: string | null; stage?: string | null; value?: number | null; currency?: string | null; role?: string | null }
+
+export interface RecordDealsTabProps {
+  kind: "contacts" | "companies";
+  id: number;
+  /** Route to the deal in your deals screen. Without it the rows link to `${dealsPath}?id=<deal id>`. */
+  onOpenDeal?: (dealId: string) => void;
+  /** Path of your deals screen for the plain links. Default "/deals". */
+  dealsPath?: string;
+}
+
+export function RecordDealsTab({ kind, id, onOpenDeal, dealsPath = "/deals" }: RecordDealsTabProps) {
+  const q = useG8Query(async (signal) => {
+    const inner = dataOf<{ items?: LinkedDeal[] } | LinkedDeal[]>(await g8Get(`/${kind}/${id}/deals`, undefined, { signal }));
+    return (Array.isArray(inner) ? inner : (inner.items ?? [])).filter((d) => d.deal_id);
+  }, [kind, id]);
+  if (q.error) return <ApiError error={q.error} title="Could not load deals" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading deals" />;
+  if (q.data.length === 0) return <EmptyState compact icon={<Handshake className="size-8" />} title="No deals yet" description="Deals linked to this record show up here." />;
+  return (
+    <ul className="divide-y rounded-md border" aria-label="Deals">
+      {q.data.map((d) => (
+        <li key={d.deal_id}>
+          <a
+            href={`${dealsPath}?id=${encodeURIComponent(d.deal_id as string)}`}
+            className="flex items-center justify-between gap-3 p-3 text-sm hover:bg-muted"
+            onClick={(e) => {
+              if (!onOpenDeal || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+              e.preventDefault();
+              onOpenDeal(d.deal_id as string);
+            }}
+          >
+            <span className="min-w-0 truncate font-medium">{d.name || "Untitled deal"}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">{[d.stage, d.value != null ? formatMoney(d.value, d.currency) : null].filter(Boolean).join(" · ")}</span>
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}