@graph8/sdk 0.308.1 → 0.357.0

package/blocks/crm/components/company-table.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+/**
+ * CompanyTable: filterable, paginated companies grid, the account-level twin of
+ * ContactTable (same props shape so screens can swap one for the other).
+ *
+ * SDK operations, in order:
+ *   1. listCompanyFields   GET    /fields/companies   (read)         only when `customFields` is on
+ *   2. listCompanies       GET    /companies          (read)         page, limit, filters, include_custom_fields
+ *   3. deleteCompany       DELETE /companies/{id}     (destructive)  bulk delete, behind ConfirmSpendDialog
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { useCustomFields } from "../hooks/use-custom-fields";
+import { useDebouncedValue } from "../hooks/use-debounced";
+import { usePageQuery } from "../hooks/use-page-query";
+import { errorStatus, fieldLabel, location } from "../lib/crm-types";
+import type { CompanyRecord } from "../lib/crm-types";
+
+export interface CompanyFilters {
+  name?: string;
+  domain?: string;
+  industry?: string;
+  country?: string;
+}
+
+export interface CompanyTableProps {
+  pageSize?: number;
+  initialFilters?: CompanyFilters;
+  selectable?: boolean;
+  customFields?: boolean;
+  onOpen?: (company: CompanyRecord) => void;
+  onSelectionChange?: (ids: number[], rows: CompanyRecord[]) => void;
+  renderBulkActions?: (selection: { ids: number[]; rows: CompanyRecord[]; clear: () => void }) => ReactNode;
+  toolbar?: ReactNode;
+  refreshKey?: number;
+  className?: string;
+}
+
+export function CompanyTable(props: CompanyTableProps) {
+  const { pageSize = 25, selectable = false, customFields = false, onOpen } = props;
+  const [draft, setDraft] = useState<CompanyFilters>(props.initialFilters ?? {});
+  const filters = useDebouncedValue(draft);
+  const [deleteNote, setDeleteNote] = useState<string | null>(null);
+  const [selected, setSelected] = useState<Map<number, CompanyRecord>>(new Map());
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const columns = useCustomFields("companies", undefined, customFields).fields;
+
+  const list = usePageQuery<CompanyRecord>(
+    (page, signal) => g8Get<CompanyRecord[]>("/companies", { page, limit: pageSize, include_custom_fields: customFields || undefined, ...filters }, { signal }),
+    [filters, customFields, props.refreshKey],
+    pageSize,
+  );
+
+  const ids = useMemo(() => [...selected.keys()], [selected]);
+  const update = (next: Map<number, CompanyRecord>) => {
+    setSelected(next);
+    props.onSelectionChange?.([...next.keys()], [...next.values()]);
+  };
+  const toggle = (row: CompanyRecord) => {
+    const next = new Map(selected);
+    if (!next.delete(row.id)) next.set(row.id, row);
+    update(next);
+  };
+  const allOnPage = list.rows.length > 0 && list.rows.every((r) => selected.has(r.id));
+  const togglePage = () => {
+    const next = new Map(selected);
+    for (const r of list.rows) allOnPage ? next.delete(r.id) : next.set(r.id, r);
+    update(next);
+  };
+  const lastKey = useRef(props.refreshKey);
+  useEffect(() => {
+    if (lastKey.current === props.refreshKey) return;
+    lastKey.current = props.refreshKey;
+    update(new Map());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.refreshKey]);
+
+  /** Deletes every id, tolerating failures: a 404 means it is already gone. Never throws, so the table always refreshes. */
+  const remove = useG8Mutation(async (toDelete: number[]) => {
+    const results = await Promise.allSettled(toDelete.map((id) => g8Delete(`/companies/${id}`)));
+    const gone = toDelete.filter((_, i) => results[i].status === "fulfilled" || errorStatus((results[i] as PromiseRejectedResult).reason) === 404);
+    return { gone, total: toDelete.length };
+  }, {
+    onSuccess: ({ gone, total }) => {
+      setConfirmOpen(false);
+      const next = new Map(selected);
+      gone.forEach((id) => next.delete(id));
+      update(next);
+      setDeleteNote(gone.length < total ? `Deleted ${gone.length} of ${total}. ${total - gone.length} could not be deleted; they are still selected.` : null);
+      void list.refetch();
+    },
+  });
+
+  const setFilter = (key: keyof CompanyFilters, value: string) => setDraft((f) => ({ ...f, [key]: value || undefined }));
+  const hasFilters = Object.values(draft).some(Boolean);
+
+  return (
+    <div className={`flex flex-col gap-3 ${props.className ?? ""}`}>
+      <div className="flex flex-wrap items-center gap-2">
+        <Input aria-label="Search by name" placeholder="Search name" className="w-48" value={draft.name ?? ""} onChange={(e) => setFilter("name", e.target.value)} />
+        <Input aria-label="Filter by domain" placeholder="Domain" className="w-44" value={draft.domain ?? ""} onChange={(e) => setFilter("domain", e.target.value)} />
+        <Input aria-label="Filter by industry" placeholder="Industry" className="w-44" value={draft.industry ?? ""} onChange={(e) => setFilter("industry", e.target.value)} />
+        <Input aria-label="Filter by country" placeholder="Country" className="w-36" value={draft.country ?? ""} onChange={(e) => setFilter("country", e.target.value)} />
+        {hasFilters ? <Button variant="ghost" size="sm" onClick={() => setDraft({})}>Clear</Button> : null}
+        <div className="ml-auto flex items-center gap-2">{props.toolbar}</div>
+      </div>
+
+      {selectable && ids.length > 0 ? (
+        <div className="flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm" role="status">
+          <span>{ids.length} selected</span>
+          {props.renderBulkActions?.({ ids, rows: [...selected.values()], clear: () => update(new Map()) })}
+          <Button variant="destructive" size="sm" onClick={() => setConfirmOpen(true)}>Delete</Button>
+          <Button variant="ghost" size="sm" onClick={() => update(new Map())}>Clear selection</Button>
+        </div>
+      ) : null}
+
+      {list.error ? <ApiError error={list.error} title="Could not load companies" onRetry={() => void list.refetch()} /> : null}
+      {deleteNote ? <p role="alert" className="text-sm text-destructive">{deleteNote}</p> : null}
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {selectable ? <TableHead className="w-8"><input type="checkbox" aria-label="Select page" checked={allOnPage} onChange={togglePage} /></TableHead> : null}
+              <TableHead>Company</TableHead><TableHead>Domain</TableHead><TableHead>Industry</TableHead>
+              <TableHead>Employees</TableHead><TableHead>Location</TableHead>
+              {columns.map((c) => <TableHead key={c.id}>{fieldLabel(c)}</TableHead>)}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {list.loading && list.rows.length === 0
+              ? Array.from({ length: 5 }, (_, i) => <TableRow key={`sk${i}`}><TableCell colSpan={5 + columns.length + (selectable ? 1 : 0)}><Skeleton className="h-5 w-full" /></TableCell></TableRow>)
+              : list.rows.map((row) => (
+                  <TableRow key={row.id} data-testid={`company-row-${row.id}`} className={onOpen ? "cursor-pointer" : undefined} onClick={() => onOpen?.(row)}>
+                    {selectable ? <TableCell onClick={(e) => e.stopPropagation()}><input type="checkbox" aria-label={`Select ${row.name ?? row.domain}`} checked={selected.has(row.id)} onChange={() => toggle(row)} /></TableCell> : null}
+                    <TableCell className="font-medium">{row.name || row.domain || "Unnamed company"}</TableCell>
+                    <TableCell>{row.domain || "-"}</TableCell>
+                    <TableCell>{row.industry || "-"}</TableCell>
+                    <TableCell>{row.employee_count || "-"}</TableCell>
+                    <TableCell>{location(row) || "-"}</TableCell>
+                    {columns.map((c) => <TableCell key={c.id}>{row.custom_fields?.[c.name ?? ""] || "-"}</TableCell>)}
+                  </TableRow>
+                ))}
+          </TableBody>
+        </Table>
+        {!list.loading && !list.error && list.rows.length === 0 ? (
+          <EmptyState title={hasFilters ? "No companies match these filters" : "No companies yet"} description={hasFilters ? "Try fewer filters." : "Add a company or import contacts: their companies are created for you."} />
+        ) : null}
+      </div>
+
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <span>{list.total.toLocaleString()} companies</span>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" disabled={list.page <= 1 || list.loading} onClick={() => list.setPage(list.page - 1)}>Previous</Button>
+          <span>Page {list.page} of {list.pageCount}</span>
+          <Button variant="outline" size="sm" disabled={!list.hasNext || list.loading} onClick={() => list.setPage(list.page + 1)}>Next</Button>
+        </div>
+      </div>
+
+      <ConfirmSpendDialog open={confirmOpen} tier="destructive" title={`Delete ${ids.length} compan${ids.length === 1 ? "y" : "ies"}`}
+        description="Their contacts stay, but lose the company link." affected={ids.length} confirming={remove.loading}
+        onConfirm={() => void remove.mutate(ids)} onCancel={() => setConfirmOpen(false)} />
+    </div>
+  );
+}

package/blocks/crm/components/contact-detail.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+/**
+ * ContactDetail: the full contact record on one screen. Header with the main
+ * facts, an Overview that flips into RecordForm to edit, and tabs for Activity,
+ * Notes and Tasks. Other blocks plug their actions in through `renderActions`
+ * (enrich, add to list, enroll in a sequence...).
+ *
+ * SDK operations, in order:
+ *   1. getContact       GET    /contacts/{id}?include_custom_fields=true   (read)
+ *   2. updateContact + setFieldValuesBatch   via RecordForm                  (write)
+ *   3. getActivityFeed, listNotes/createNote/updateNote/deleteNote, listContactTasks/createTask/updateTask/deleteTask
+ *      via ActivityTimeline, NotesPanel, TaskList                          (read, write, destructive)
+ *   4. deleteContact    DELETE /contacts/{id}                              (destructive, ConfirmSpendDialog)
+ *
+ * Locked emails and phones ("***") show as Locked: reveal them by saving the
+ * contact to a list or enriching it, never by guessing a value.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Skeleton, Tabs, TabsContent, TabsList, TabsTrigger } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { contactName, initials, isMasked, location } from "../lib/crm-types";
+import type { ContactRecord } from "../lib/crm-types";
+import { ActivityTimeline } from "./activity-timeline";
+import { NotesPanel } from "./notes-panel";
+import { RecordForm } from "./record-form";
+import { TaskList } from "./task-list";
+
+export interface ContactDetailProps {
+  contactId: number;
+  onDeleted?: (contactId: number) => void;
+  onOpenCompany?: (companyId: number) => void;
+  /** Buttons from other blocks, rendered in the header: `(contact) => <EnrichButton .../>`. */
+  renderActions?: (contact: ContactRecord) => ReactNode;
+  /** Extra tabs from other blocks. */
+  extraTabs?: Array<{ id: string; label: string; render: (contact: ContactRecord) => ReactNode }>;
+  className?: string;
+}
+
+function Fact({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div>
+      <dt className="text-xs uppercase tracking-wide text-muted-foreground">{label}</dt>
+      <dd className="text-sm">
+        {isMasked(value) ? <span className="italic text-muted-foreground" title="Locked: save to a list or enrich to reveal">Locked</span> : value || <span className="text-muted-foreground">-</span>}
+      </dd>
+    </div>
+  );
+}
+
+export function ContactDetail({ contactId, onDeleted, onOpenCompany, renderActions, extraTabs = [], className }: ContactDetailProps) {
+  const [editing, setEditing] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [feedKey, setFeedKey] = useState(0);
+  const query = useG8Query((signal) => g8Get<ContactRecord>(`/contacts/${contactId}`, { include_custom_fields: true }, { signal }), [contactId]);
+  const remove = useG8Mutation(() => g8Delete(`/contacts/${contactId}`), {
+    onSuccess: () => { setConfirmDelete(false); onDeleted?.(contactId); },
+  });
+  const bump = () => setFeedKey((k) => k + 1);
+
+  if (query.loading && !query.data) return <div className={`flex flex-col gap-3 ${className ?? ""}`}><Skeleton className="h-16 w-full" /><Skeleton className="h-40 w-full" /></div>;
+  if (query.error && !query.data) return <ApiError error={query.error} title="Could not load this contact" onRetry={() => void query.refetch()} />;
+  const contact = query.data!.data;
+  const name = contactName(contact);
+
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      <header className="flex flex-wrap items-center gap-3">
+        <div aria-hidden className="flex size-12 items-center justify-center rounded-full bg-muted text-sm font-semibold">{initials(name)}</div>
+        <div className="min-w-0 flex-1">
+          <h2 className="truncate text-lg font-semibold">{name}</h2>
+          <p className="truncate text-sm text-muted-foreground">
+            {[contact.job_title, contact.company?.name].filter(Boolean).join(" at ") || "No title or company"}
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {renderActions?.(contact)}
+          {contact.company?.id && onOpenCompany ? <Button variant="outline" size="sm" onClick={() => onOpenCompany(contact.company!.id as number)}>Open company</Button> : null}
+          <Button variant="outline" size="sm" onClick={() => setEditing((v) => !v)}>{editing ? "Close editor" : "Edit"}</Button>
+          <Button variant="destructive" size="sm" onClick={() => setConfirmDelete(true)}>Delete</Button>
+        </div>
+      </header>
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the contact" /> : null}
+
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="activity">Activity</TabsTrigger>
+          <TabsTrigger value="notes">Notes</TabsTrigger>
+          <TabsTrigger value="tasks">Tasks</TabsTrigger>
+          {extraTabs.map((t) => <TabsTrigger key={t.id} value={t.id}>{t.label}</TabsTrigger>)}
+        </TabsList>
+        <TabsContent value="overview" className="pt-4">
+          {editing ? (
+            <RecordForm entity="contact" record={contact} onCancel={() => setEditing(false)} onSaved={() => { setEditing(false); void query.refetch(); bump(); }} />
+          ) : (
+            <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Fact label="Work email" value={contact.work_email} />
+              <Fact label="Direct phone" value={contact.direct_phone} />
+              <Fact label="Mobile phone" value={contact.mobile_phone} />
+              <Fact label="LinkedIn" value={contact.linkedin_url} />
+              <Fact label="Seniority" value={contact.seniority_level} />
+              <Fact label="Department" value={contact.job_department} />
+              <Fact label="Location" value={location(contact)} />
+              <Fact label="Owner" value={contact.owner_name} />
+              {Object.entries(contact.custom_fields ?? {}).map(([key, v]) => <Fact key={key} label={key} value={v} />)}
+              {contact.about ? <div className="sm:col-span-2"><Fact label="About" value={contact.about} /></div> : null}
+            </dl>
+          )}
+        </TabsContent>
+        <TabsContent value="activity" className="pt-4"><ActivityTimeline entityType="contact" entityId={contactId} refreshKey={feedKey} /></TabsContent>
+        <TabsContent value="notes" className="pt-4"><NotesPanel entity="contact" entityId={contactId} onChanged={bump} /></TabsContent>
+        <TabsContent value="tasks" className="pt-4"><TaskList entity="contact" entityId={contactId} onChanged={bump} /></TabsContent>
+        {extraTabs.map((t) => <TabsContent key={t.id} value={t.id} className="pt-4">{t.render(contact)}</TabsContent>)}
+      </Tabs>
+
+      <ConfirmSpendDialog
+        open={confirmDelete}
+        tier="destructive"
+        title={`Delete ${name}`}
+        description="The contact is removed from every list and sequence."
+        affected={1}
+        confirming={remove.loading}
+        onConfirm={() => void remove.mutate(undefined)}
+        onCancel={() => setConfirmDelete(false)}
+      />
+    </div>
+  );
+}

package/blocks/crm/components/contact-table.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+/**
+ * ContactTable: filterable, paginated contacts grid with optional selection and
+ * custom-field columns. The base of every contact screen: embed it with
+ * `listId` for a list's members, `companyId` for a company's people.
+ *
+ * SDK operations, in order:
+ *   1. listContactFields   GET    /fields            (read)         only when `customFields` is on
+ *   2. listContacts        GET    /contacts          (read)         page, limit, filters, include_custom_fields
+ *   3. deleteContact       DELETE /contacts/{id}     (destructive)  bulk delete, behind ConfirmSpendDialog
+ *
+ * Locked emails/phones come back as "***": they render as "Locked", never as a value.
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useCustomFields } from "../hooks/use-custom-fields";
+import { useDebouncedValue } from "../hooks/use-debounced";
+import { usePageQuery } from "../hooks/use-page-query";
+import { contactName, errorStatus, fieldLabel, isMasked, location } from "../lib/crm-types";
+import type { ContactRecord } from "../lib/crm-types";
+
+export interface ContactFilters {
+  name?: string;
+  job_title?: string;
+  seniority_level?: string;
+  country?: string;
+}
+
+export interface ContactTableProps {
+  /** Only members of this list. */
+  listId?: number;
+  /** Only people of this company (mashup company id). */
+  companyId?: number;
+  pageSize?: number;
+  initialFilters?: ContactFilters;
+  /** Show checkboxes and the bulk bar. */
+  selectable?: boolean;
+  /** Show the bulk "Delete" (removes the contacts from the CRM entirely). Default true; turn it off inside a list view. */
+  allowDelete?: boolean;
+  /** Add the org's custom columns to the grid. */
+  customFields?: boolean;
+  onOpen?: (contact: ContactRecord) => void;
+  onSelectionChange?: (ids: number[], rows: ContactRecord[]) => void;
+  /** Extra bulk actions next to Delete (add to list, enrich, enroll...). */
+  renderBulkActions?: (selection: { ids: number[]; rows: ContactRecord[]; clear: () => void }) => ReactNode;
+  /** Slot at the right of the filter bar, for example an "Add contact" button. */
+  toolbar?: ReactNode;
+  /** Change it to force a reload after you created or edited something outside the table. */
+  refreshKey?: number;
+  className?: string;
+}
+
+function CellValue({ value }: { value?: string | null }) {
+  if (isMasked(value)) return <span title="Locked: save to a list or enrich to reveal" className="text-muted-foreground italic">Locked</span>;
+  return <>{value || <span className="text-muted-foreground">-</span>}</>;
+}
+
+export function ContactTable(props: ContactTableProps) {
+  const { listId, companyId, pageSize = 25, selectable = false, customFields = false, onOpen } = props;
+  const [draft, setDraft] = useState<ContactFilters>(props.initialFilters ?? {});
+  const filters = useDebouncedValue(draft);
+  const [deleteNote, setDeleteNote] = useState<string | null>(null);
+  const [selected, setSelected] = useState<Map<number, ContactRecord>>(new Map());
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const custom = useCustomFields("contacts", listId, customFields);
+  const columns = customFields ? custom.fields : [];
+
+  const list = usePageQuery<ContactRecord>(
+    (page, signal) =>
+      g8Get<ContactRecord[]>(
+        "/contacts",
+        { page, limit: pageSize, list_id: listId, company_id: companyId, include_custom_fields: customFields || undefined, ...filters },
+        { signal },
+      ),
+    [listId, companyId, filters, customFields, props.refreshKey],
+    pageSize,
+  );
+
+  const ids = useMemo(() => [...selected.keys()], [selected]);
+  const update = (next: Map<number, ContactRecord>) => {
+    setSelected(next);
+    props.onSelectionChange?.([...next.keys()], [...next.values()]);
+  };
+  const toggle = (row: ContactRecord) => {
+    const next = new Map(selected);
+    if (!next.delete(row.id)) next.set(row.id, row);
+    update(next);
+  };
+  const allOnPage = list.rows.length > 0 && list.rows.every((r) => selected.has(r.id));
+  const togglePage = () => {
+    const next = new Map(selected);
+    for (const r of list.rows) allOnPage ? next.delete(r.id) : next.set(r.id, r);
+    update(next);
+  };
+
+  // A reload from outside (refreshKey) or a different list/company means the old selection is stale.
+  const scope = `${listId}|${companyId}|${props.refreshKey}`;
+  const lastScope = useRef(scope);
+  useEffect(() => {
+    if (lastScope.current === scope) return;
+    lastScope.current = scope;
+    update(new Map());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scope]);
+
+  /** Deletes every id, tolerating failures: a 404 means it is already gone. Never throws, so the table always refreshes. */
+  const remove = useG8Mutation(async (toDelete: number[]) => {
+    const results = await Promise.allSettled(toDelete.map((id) => g8Delete(`/contacts/${id}`)));
+    const gone = toDelete.filter((_, i) => results[i].status === "fulfilled" || errorStatus((results[i] as PromiseRejectedResult).reason) === 404);
+    return { gone, total: toDelete.length };
+  }, {
+    onSuccess: ({ gone, total }) => {
+      setConfirmOpen(false);
+      const next = new Map(selected);
+      gone.forEach((id) => next.delete(id));
+      update(next);
+      setDeleteNote(gone.length < total ? `Deleted ${gone.length} of ${total}. ${total - gone.length} could not be deleted; they are still selected.` : null);
+      void list.refetch();
+    },
+  });
+
+  const setFilter = (key: keyof ContactFilters, value: string) => setDraft((f) => ({ ...f, [key]: value || undefined }));
+  const hasFilters = Object.values(draft).some(Boolean);
+
+  return (
+    <div className={`flex flex-col gap-3 ${props.className ?? ""}`}>
+      <div className="flex flex-wrap items-center gap-2">
+        <Input aria-label="Search by name" placeholder="Search name" className="w-48" value={draft.name ?? ""} onChange={(e) => setFilter("name", e.target.value)} />
+        <Input aria-label="Filter by job title" placeholder="Job title" className="w-44" value={draft.job_title ?? ""} onChange={(e) => setFilter("job_title", e.target.value)} />
+        <Input aria-label="Filter by seniority" placeholder="Seniority (Director,VP)" className="w-48" value={draft.seniority_level ?? ""} onChange={(e) => setFilter("seniority_level", e.target.value)} />
+        <Input aria-label="Filter by country" placeholder="Country" className="w-36" value={draft.country ?? ""} onChange={(e) => setFilter("country", e.target.value)} />
+        {hasFilters ? <Button variant="ghost" size="sm" onClick={() => setDraft({})}>Clear</Button> : null}
+        <div className="ml-auto flex items-center gap-2">{props.toolbar}</div>
+      </div>
+
+      {selectable && ids.length > 0 ? (
+        <div className="flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm" role="status">
+          <span>{ids.length} selected</span>
+          {props.renderBulkActions?.({ ids, rows: [...selected.values()], clear: () => update(new Map()) })}
+          {props.allowDelete !== false ? <Button variant="destructive" size="sm" onClick={() => setConfirmOpen(true)}>Delete</Button> : null}
+          <Button variant="ghost" size="sm" onClick={() => update(new Map())}>Clear selection</Button>
+        </div>
+      ) : null}
+
+      {list.error ? <ApiError error={list.error} title="Could not load contacts" onRetry={() => void list.refetch()} /> : null}
+      {deleteNote ? <p role="alert" className="text-sm text-destructive">{deleteNote}</p> : null}
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {selectable ? <TableHead className="w-8"><input type="checkbox" aria-label="Select page" checked={allOnPage} onChange={togglePage} /></TableHead> : null}
+              <TableHead>Name</TableHead>
+              <TableHead>Title</TableHead>
+              <TableHead>Company</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Location</TableHead>
+              {columns.map((c) => <TableHead key={c.id}>{fieldLabel(c)}</TableHead>)}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {list.loading && list.rows.length === 0
+              ? Array.from({ length: 5 }, (_, i) => (
+                  <TableRow key={`sk${i}`}><TableCell colSpan={5 + columns.length + (selectable ? 1 : 0)}><Skeleton className="h-5 w-full" /></TableCell></TableRow>
+                ))
+              : list.rows.map((row) => (
+                  <TableRow key={row.id} data-testid={`contact-row-${row.id}`} className={onOpen ? "cursor-pointer" : undefined} onClick={() => onOpen?.(row)}>
+                    {selectable ? (
+                      <TableCell onClick={(e) => e.stopPropagation()}>
+                        <input type="checkbox" aria-label={`Select ${contactName(row)}`} checked={selected.has(row.id)} onChange={() => toggle(row)} />
+                      </TableCell>
+                    ) : null}
+                    <TableCell className="font-medium">{contactName(row)}</TableCell>
+                    <TableCell><CellValue value={row.job_title} /></TableCell>
+                    <TableCell><CellValue value={row.company_name} /></TableCell>
+                    <TableCell><CellValue value={row.work_email} /></TableCell>
+                    <TableCell><CellValue value={location(row)} /></TableCell>
+                    {columns.map((c) => <TableCell key={c.id}><CellValue value={row.custom_fields?.[c.name ?? ""]} /></TableCell>)}
+                  </TableRow>
+                ))}
+          </TableBody>
+        </Table>
+        {!list.loading && !list.error && list.rows.length === 0 ? (
+          <EmptyState title={hasFilters ? "No contacts match these filters" : "No contacts yet"} description={hasFilters ? "Try fewer filters." : "Add a contact or import a file to get started."} />
+        ) : null}
+      </div>
+
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <span>{list.total.toLocaleString()} contacts</span>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" disabled={list.page <= 1 || list.loading} onClick={() => list.setPage(list.page - 1)}>Previous</Button>
+          <span>Page {list.page} of {list.pageCount}</span>
+          <Button variant="outline" size="sm" disabled={!list.hasNext || list.loading} onClick={() => list.setPage(list.page + 1)}>Next</Button>
+        </div>
+      </div>
+
+      <ConfirmSpendDialog
+        open={confirmOpen}
+        tier="destructive"
+        title={`Delete ${ids.length} contact${ids.length === 1 ? "" : "s"}`}
+        description="They are removed from every list and sequence."
+        affected={ids.length}
+        confirming={remove.loading}
+        onConfirm={() => void remove.mutate(ids)}
+        onCancel={() => setConfirmOpen(false)}
+      />
+    </div>
+  );
+}