@startsimpli/funnels 0.4.14 → 0.4.16

package/src/page/FunnelsPage.tsx

@@ -0,0 +1,739 @@
+'use client';
+
+/**
+ * FUNNELS — the whole screen, once, for every surface that has funnels.
+ *
+ * bd startsim-em5mn, under CLAUDE.md rule 9 and the share-page-composers
+ * convention: foundry-web, the tenant template and market-web mount THIS
+ * rather than each rebuilding a list, a builder, a run history and a results
+ * table. The precedent is the tenant template's planning page mounting
+ * `PlanningPage` from @startsimpli/integrations — the app file's whole share is
+ * a heading and the mount.
+ *
+ * WHY IT LIVES IN @startsimpli/funnels AND NOT @startsimpli/ui.
+ * `packages/api/src/types/funnel.ts` records the reason in its own words: the
+ * funnel types are duplicated into @startsimpli/api rather than imported
+ * "because every app installs @startsimpli/api and only two install
+ * @startsimpli/funnels (which drags @xyflow/react and @dnd-kit with it)". A
+ * composer in @startsimpli/ui would invert exactly that — the library every app
+ * installs would depend on the heavy domain package. Here, the dependency runs
+ * the harmless way: funnels takes ONE table from ui, as an OPTIONAL PEER, and
+ * only on this subpath. Hence `@startsimpli/funnels/page` rather than the root
+ * barrel — the same reasoning `packages/ui/src/foundry/index.ts` writes down
+ * for its own subpath ("A SUBPATH AND NOT THE ROOT BARREL, deliberately"), so
+ * raise and market keep importing @startsimpli/funnels without pulling ui in.
+ *
+ * EVERY LIST IS PAGED BY THE SERVER (repo rule #8). The funnel list and the
+ * results list each hold one page and ask for the next; neither ever holds the
+ * corpus. There is NO client-side sort: the control-plane list is ordered
+ * `("-created_at", "-id")` by `service_api.list_funnels` and reads no
+ * `ordering` param, so offering a sortable header would be a control that
+ * lies. bd startsim-em5mn.3 tracks the server-side ordering.
+ *
+ * THERE IS NO PREVIEW, DELIBERATELY. `core/engine.ts` evaluates an in-memory
+ * array and the corpus is ~208k public rows, so an in-browser preview is out on
+ * its face. The server-side alternative is worse than absent here: no `preview`
+ * action is mounted on FoundryViewSet at all (verified against prod
+ * 2026-09-18), and the client's server-side preview call would make the CALLER
+ * post the entities — the same paging-into-the-browser by another name. THE RUN IS THE
+ * PREVIEW: `POST funnels/<id>/runs/` accepts an `entity_ids` subset, and the
+ * run's `stage_breakdown` is the per-stage funnel chart, computed server-side.
+ * bd startsim-em5mn.2 tracks a sampled-preview route.
+ */
+import * as React from 'react';
+import { UnifiedTable } from '@startsimpli/ui/table';
+
+import { FunnelStageBuilder } from '../components/FunnelStageBuilder';
+import { FunnelRunHistory } from '../components/FunnelRunHistory';
+import type { FunnelApiClient } from '../api/client';
+import type {
+  FieldDefinition,
+  Funnel,
+  FunnelRun,
+  FunnelStage,
+  FunnelStatus,
+} from '../types';
+import type {
+  FunnelListRow,
+  FunnelResultRow,
+  FunnelsPageProps,
+} from './types';
+
+const STATUSES: FunnelStatus[] = ['draft', 'active', 'paused', 'archived'];
+const DEFAULT_PAGE_SIZE = 25;
+
+/** The literal the results filter uses for "was never excluded". */
+const STAGE_REACHED_END = 'end';
+
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+/**
+ * Stages, with ids the server will accept.
+ *
+ * `FunnelStageBuilder` mints an id for a stage the moment it is added —
+ * `stage-<timestamp>-<random>` — because its list needs a stable React key
+ * before anything is saved. `FunnelStageSerializer.id` is a `UUIDField`, so
+ * sending that back is a 400: {'id': ['Must be a valid UUID.']}. Verified
+ * against a live control plane on 2026-09-18 — the same PATCH without the id
+ * is a 200.
+ *
+ * So a client-minted id is dropped and a server-assigned one is kept, which is
+ * exactly the distinction the reconciler needs: it updates the stage a client
+ * NAMES and creates one it does not, and keeping the real ids is what stops an
+ * edit from reissuing every stage id underneath the funnel — `stage_stats` is
+ * keyed on stage id and results record `reached_stage_id` (bd startsim-0wmf8.1).
+ */
+function stagesForSave(stages: FunnelStage[] = []): FunnelStage[] {
+  return stages.map((stage) => {
+    if (stage.id && UUID.test(stage.id)) return stage;
+    const { id: _minted, ...rest } = stage;
+    return rest as FunnelStage;
+  });
+}
+
+function when(value?: string | Date | null): string {
+  if (!value) return '—';
+  const d = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(d.getTime()) ? '—' : d.toLocaleString();
+}
+
+function count(value?: number | null): string {
+  return typeof value === 'number' ? value.toLocaleString() : '—';
+}
+
+/**
+ * One request in flight at a time, latest wins.
+ *
+ * Typing in the search box fires a request per keystroke and they do not come
+ * back in order; without the guard a slow early response overwrites a fast late
+ * one and the table shows results for a query the box no longer holds.
+ */
+function useLatest<T>(
+  load: () => Promise<T>,
+  deps: React.DependencyList,
+): { data: T | null; error: string | null; loading: boolean } {
+  const [data, setData] = React.useState<T | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const seq = React.useRef(0);
+
+  React.useEffect(() => {
+    const ticket = ++seq.current;
+    let live = true;
+    setLoading(true);
+    load()
+      .then((result) => {
+        if (!live || ticket !== seq.current) return;
+        setData(result);
+        setError(null);
+      })
+      .catch((e: unknown) => {
+        if (!live || ticket !== seq.current) return;
+        setError(e instanceof Error ? e.message : String(e));
+      })
+      .finally(() => {
+        if (live && ticket === seq.current) setLoading(false);
+      });
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps]);
+
+  return { data, error, loading };
+}
+
+/**
+ * The last non-empty value seen.
+ *
+ * The rule editor's field picker is a CONTROLLED select over the vocabulary.
+ * While a refetch is in flight `useLatest` still holds the previous payload,
+ * but on the first load — and on a genuine change of entity type — the list is
+ * briefly empty, and a controlled select whose options do not contain its value
+ * renders blank. The rule's stored `field` survives that (no change event
+ * fires), but the author watches their field unselect itself, which is worse
+ * than a stale list for the half-second it takes.
+ */
+function useSticky<T>(value: T[]): T[] {
+  const held = React.useRef<T[]>(value);
+  if (value.length > 0) held.current = value;
+  return value.length > 0 ? value : held.current;
+}
+
+const label = 'block text-xs font-medium text-muted-foreground';
+const control =
+  'h-9 rounded-md border border-input bg-background px-2 text-sm text-foreground';
+const button =
+  'inline-flex h-9 items-center rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-muted disabled:opacity-50';
+const primary =
+  'inline-flex h-9 items-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50';
+
+// ---------------------------------------------------------------------------
+// The list
+// ---------------------------------------------------------------------------
+
+function FunnelList({
+  client,
+  canManage,
+  pageSize,
+  onOpen,
+}: {
+  client: FunnelApiClient;
+  canManage: boolean;
+  pageSize: number;
+  onOpen: (funnel: FunnelListRow) => void;
+}) {
+  const [status, setStatus] = React.useState<FunnelStatus | ''>('');
+  const [search, setSearch] = React.useState('');
+  const [page, setPage] = React.useState(1);
+  const [creating, setCreating] = React.useState(false);
+  const [name, setName] = React.useState('');
+  const [entityType, setEntityType] = React.useState('');
+  const [saving, setSaving] = React.useState(false);
+
+  // Every narrowing is a QUERY PARAM. `status`/`search` are what
+  // `service_api.list_funnels` reads; nothing here filters rows it already
+  // holds, because it only ever holds one page of them.
+  const listing = useLatest(
+    () =>
+      client.listFunnels<unknown>({
+        page,
+        pageSize,
+        ...(status ? { status } : {}),
+        ...(search ? { search } : {}),
+      }),
+    [client, page, pageSize, status, search],
+  );
+
+  const narrow = (apply: () => void) => {
+    apply();
+    setPage(1); // a narrower set has a different page 1
+  };
+
+  const rows = (listing.data?.results ?? []) as FunnelListRow[];
+
+  const create = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+    setSaving(true);
+    try {
+      const made = await client.createFunnel({
+        name: name.trim(),
+        status: 'draft',
+        entityType: entityType.trim() || 'contact',
+        stages: [],
+      });
+      setCreating(false);
+      setName('');
+      setEntityType('');
+      onOpen(made as FunnelListRow);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4" data-testid="funnels-list">
+      <div className="flex flex-wrap items-end gap-3">
+        <div>
+          <label className={label} htmlFor="funnels-search">
+            Search
+          </label>
+          <input
+            id="funnels-search"
+            className={`${control} w-56`}
+            placeholder="Search funnels by name"
+            value={search}
+            onChange={(e) => narrow(() => setSearch(e.target.value))}
+          />
+        </div>
+        <div>
+          <label className={label} htmlFor="funnels-status">
+            Status
+          </label>
+          <select
+            id="funnels-status"
+            className={control}
+            value={status}
+            onChange={(e) => narrow(() => setStatus(e.target.value as FunnelStatus | ''))}
+          >
+            <option value="">Any status</option>
+            {STATUSES.map((s) => (
+              <option key={s} value={s}>
+                {s}
+              </option>
+            ))}
+          </select>
+        </div>
+        <span className="flex-1" />
+        {canManage && (
+          <button type="button" className={primary} onClick={() => setCreating((v) => !v)}>
+            New funnel
+          </button>
+        )}
+      </div>
+
+      {creating && canManage && (
+        <form className="flex flex-wrap items-end gap-3 rounded-md border border-border p-3" onSubmit={create}>
+          <div>
+            <label className={label} htmlFor="new-funnel-name">
+              Name
+            </label>
+            <input
+              id="new-funnel-name"
+              className={`${control} w-56`}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div>
+            <label className={label} htmlFor="new-funnel-entity-type">
+              Entity type
+            </label>
+            <input
+              id="new-funnel-entity-type"
+              className={control}
+              placeholder="contact"
+              value={entityType}
+              onChange={(e) => setEntityType(e.target.value)}
+            />
+          </div>
+          <button type="submit" className={primary} disabled={!name.trim() || saving}>
+            {saving ? 'Creating…' : 'Create'}
+          </button>
+        </form>
+      )}
+
+      {listing.error && (
+        <p className="text-sm text-red-600" role="alert">
+          Couldn’t load funnels: {listing.error}
+        </p>
+      )}
+
+      <UnifiedTable<FunnelListRow>
+        tableId="funnels"
+        data={rows}
+        getRowId={(row) => row.id}
+        loading={listing.loading}
+        onRowClick={onOpen}
+        emptyState={
+          <p className="p-6 text-center text-sm text-muted-foreground">
+            No funnels yet. A funnel is a set of stages this foundry runs over its own
+            entities.
+          </p>
+        }
+        pagination={{
+          enabled: true,
+          serverSide: true,
+          pageSize,
+          currentPage: page,
+          totalCount: listing.data?.count ?? 0,
+          onPageChange: setPage,
+        }}
+        columns={[
+          { id: 'name', header: 'Name', accessorKey: 'name', sortable: false },
+          { id: 'status', header: 'Status', accessorKey: 'status', sortable: false },
+          { id: 'entityType', header: 'Entity type', sortable: false, cell: (r) => r.entityType || '—' },
+          { id: 'stages', header: 'Stages', sortable: false, cell: (r) => count(r.stageCount ?? r.stages?.length) },
+          { id: 'runs', header: 'Runs', sortable: false, cell: (r) => count(r.totalRuns) },
+          { id: 'matched', header: 'Last matched', sortable: false, cell: (r) => count(r.lastRunMatched) },
+          { id: 'lastRun', header: 'Last run', sortable: false, cell: (r) => when(r.lastRunAt) },
+        ]}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// The results of one run
+// ---------------------------------------------------------------------------
+
+function RunResults({
+  client,
+  funnel,
+  runId,
+  pageSize,
+}: {
+  client: FunnelApiClient;
+  funnel: Funnel;
+  runId: string;
+  pageSize: number;
+}) {
+  const [stage, setStage] = React.useState('');
+  const [outcome, setOutcome] = React.useState('');
+  const [page, setPage] = React.useState(1);
+
+  // `stage` and `matched` are SERVER filters (`service_api.list_results`):
+  // a stage id means "stopped here", 'end' means "got all the way through".
+  // Filtering here instead would mean holding every result in the browser.
+  const listing = useLatest(
+    () =>
+      client.getFunnelResults<unknown>(runId, {
+        page,
+        pageSize,
+        funnelId: funnel.id,
+        ...(stage ? { stage } : {}),
+        ...(outcome ? { matched: outcome === 'true' } : {}),
+      }),
+    [client, runId, funnel.id, page, pageSize, stage, outcome],
+  );
+
+  const narrow = (apply: () => void) => {
+    apply();
+    setPage(1);
+  };
+
+  const rows = (listing.data?.results ?? []) as unknown as FunnelResultRow[];
+
+  return (
+    <div className="space-y-4" data-testid="funnel-results">
+      <div className="flex flex-wrap items-end gap-3">
+        <div>
+          <label className={label} htmlFor="results-stage">
+            Stage reached
+          </label>
+          <select
+            id="results-stage"
+            className={control}
+            value={stage}
+            onChange={(e) => narrow(() => setStage(e.target.value))}
+          >
+            <option value="">Any stage</option>
+            {[...(funnel.stages ?? [])]
+              .sort((a, b) => a.order - b.order)
+              .map((s: FunnelStage) => (
+                <option key={s.id} value={s.id}>
+                  Stopped at {s.name}
+                </option>
+              ))}
+            <option value={STAGE_REACHED_END}>Reached the end</option>
+          </select>
+        </div>
+        <div>
+          <label className={label} htmlFor="results-outcome">
+            Outcome
+          </label>
+          <select
+            id="results-outcome"
+            className={control}
+            value={outcome}
+            onChange={(e) => narrow(() => setOutcome(e.target.value))}
+          >
+            <option value="">Any outcome</option>
+            <option value="true">Matched</option>
+            <option value="false">Excluded</option>
+          </select>
+        </div>
+      </div>
+
+      {listing.error && (
+        <p className="text-sm text-red-600" role="alert">
+          Couldn’t load results: {listing.error}
+        </p>
+      )}
+
+      <UnifiedTable<FunnelResultRow>
+        tableId="funnel-results"
+        data={rows}
+        getRowId={(row) => row.id}
+        loading={listing.loading}
+        emptyState={
+          <p className="p-6 text-center text-sm text-muted-foreground">
+            This run produced no rows under that filter.
+          </p>
+        }
+        pagination={{
+          enabled: true,
+          serverSide: true,
+          pageSize,
+          currentPage: page,
+          totalCount: listing.data?.count ?? 0,
+          onPageChange: setPage,
+        }}
+        columns={[
+          { id: 'entityId', header: 'Entity', sortable: false, cell: (r) => r.entityId ?? '—' },
+          { id: 'entityType', header: 'Type', sortable: false, cell: (r) => r.entityType ?? '—' },
+          {
+            id: 'matched',
+            header: 'Outcome',
+            sortable: false,
+            cell: (r) => (r.matched ? 'Matched' : 'Excluded'),
+          },
+          {
+            id: 'stageReached',
+            header: 'Stage reached',
+            sortable: false,
+            // The name the RUN recorded, not the stage's current name — a run
+            // that ran against "Angels" keeps saying "Angels" (breakdown.py).
+            cell: (r) => r.stageReached?.name ?? (r.matched ? 'Reached the end' : '—'),
+          },
+          {
+            id: 'tags',
+            header: 'Tags',
+            sortable: false,
+            cell: (r) => (r.accumulatedTags?.length ? r.accumulatedTags.join(', ') : '—'),
+          },
+          { id: 'createdAt', header: 'When', sortable: false, cell: (r) => when(r.createdAt) },
+        ]}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// One funnel
+// ---------------------------------------------------------------------------
+
+type Tab = 'stages' | 'runs' | 'results';
+
+function FunnelDetail({
+  client,
+  fieldsClient,
+  funnelId,
+  canManage,
+  pageSize,
+  onBack,
+}: {
+  client: FunnelApiClient;
+  fieldsClient: FunnelApiClient;
+  funnelId: string;
+  canManage: boolean;
+  pageSize: number;
+  onBack: () => void;
+}) {
+  const [tab, setTab] = React.useState<Tab>('stages');
+  const [draft, setDraft] = React.useState<Funnel | null>(null);
+  const [activeRun, setActiveRun] = React.useState<FunnelRun | null>(null);
+  const [resultsRun, setResultsRun] = React.useState<string | null>(null);
+  const [busy, setBusy] = React.useState<string | null>(null);
+  const [problem, setProblem] = React.useState<string | null>(null);
+
+  const loaded = useLatest(() => client.getFunnel(funnelId), [client, funnelId]);
+
+  // The vocabulary comes from the INJECTED fields client. It is a separate
+  // client because `/fields/` is only mounted on central — the control plane's
+  // `funnels/fields/` is shadowed by its `funnels/<id>/` action and answers
+  // "funnel not found". Never a hand-written list: the same registry validates
+  // the rule on POST, so a picker built from anything else offers fields that
+  // 400 on save.
+  const vocabulary = useLatest(
+    () => fieldsClient.getFields(draft?.entityType || undefined),
+    [fieldsClient, draft?.entityType],
+  );
+
+  // Sticky, so a refetch on a changed entity type does not blank the field
+  // picker under an author who is mid-rule.
+  const fieldRegistry = useSticky(
+    (vocabulary.data?.fields ?? []) as FieldDefinition[],
+  );
+
+  React.useEffect(() => {
+    if (loaded.data) {
+      setDraft(loaded.data as Funnel);
+      const last = (loaded.data as FunnelListRow).lastRunId;
+      setResultsRun((current) => current ?? last ?? null);
+    }
+  }, [loaded.data]);
+
+  const runNow = async () => {
+    setBusy('run');
+    setProblem(null);
+    try {
+      // The id this POST returns is the id that completes — the run row is
+      // created empty and adopted by the task (bd startsim-qv6pk). So the page
+      // follows THIS id rather than guessing at the newest run afterwards.
+      const run = await client.runFunnel(funnelId, { triggerType: 'manual' });
+      setActiveRun(run);
+      setResultsRun(run.id);
+      setTab('runs');
+    } catch (e) {
+      setProblem(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const save = async () => {
+    if (!draft) return;
+    setBusy('save');
+    setProblem(null);
+    try {
+      const saved = await client.updateFunnel(funnelId, {
+        name: draft.name,
+        status: draft.status,
+        entityType: draft.entityType,
+        stages: stagesForSave(draft.stages),
+      });
+      setDraft(saved as Funnel);
+    } catch (e) {
+      setProblem(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  if (loaded.error) {
+    return (
+      <div className="space-y-3">
+        <button type="button" className={button} onClick={onBack}>
+          ← All funnels
+        </button>
+        <p className="text-sm text-red-600" role="alert">
+          Couldn’t load this funnel: {loaded.error}
+        </p>
+      </div>
+    );
+  }
+
+  if (!draft) {
+    return <p className="text-sm text-muted-foreground">Loading funnel…</p>;
+  }
+
+  const tabs: Array<[Tab, string]> = [
+    ['stages', 'Stages'],
+    ['runs', 'Runs'],
+    ['results', 'Results'],
+  ];
+
+  return (
+    <div className="space-y-5" data-testid="funnel-detail">
+      <div className="flex flex-wrap items-center gap-3">
+        <button type="button" className={button} onClick={onBack}>
+          ← All funnels
+        </button>
+        <input
+          className={`${control} w-64 font-medium`}
+          aria-label="Funnel name"
+          value={draft.name}
+          disabled={!canManage}
+          onChange={(e) => setDraft({ ...draft, name: e.target.value })}
+        />
+        <select
+          className={control}
+          aria-label="Funnel status"
+          value={draft.status}
+          disabled={!canManage}
+          onChange={(e) => setDraft({ ...draft, status: e.target.value as FunnelStatus })}
+        >
+          {STATUSES.map((s) => (
+            <option key={s} value={s}>
+              {s}
+            </option>
+          ))}
+        </select>
+        <span className="flex-1" />
+        {canManage && (
+          <>
+            <button type="button" className={button} onClick={save} disabled={busy === 'save'}>
+              {busy === 'save' ? 'Saving…' : 'Save'}
+            </button>
+            <button type="button" className={primary} onClick={runNow} disabled={busy === 'run'}>
+              {busy === 'run' ? 'Starting…' : 'Run now'}
+            </button>
+          </>
+        )}
+      </div>
+
+      {activeRun && (
+        <p className="rounded-md border border-border bg-muted/30 px-3 py-2 text-sm">
+          Started run <span data-testid="active-run">{activeRun.id}</span> — it is{' '}
+          {activeRun.status}. The Runs tab follows it to completion.
+        </p>
+      )}
+      {problem && (
+        <p className="text-sm text-red-600" role="alert">
+          {problem}
+        </p>
+      )}
+
+      <div role="tablist" className="flex gap-1 border-b border-border">
+        {tabs.map(([key, text]) => (
+          <button
+            key={key}
+            type="button"
+            role="tab"
+            aria-selected={tab === key}
+            className={`h-9 px-3 text-sm ${tab === key ? 'border-b-2 border-primary font-medium' : 'text-muted-foreground'}`}
+            onClick={() => setTab(key)}
+          >
+            {text}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'stages' && (
+        <div data-testid="funnel-stages">
+          {vocabulary.error && (
+            <p className="mb-3 text-sm text-red-600" role="alert">
+              Couldn’t load the field vocabulary: {vocabulary.error}. Rules can’t be
+              edited until it loads — the same registry validates them on save.
+            </p>
+          )}
+          <FunnelStageBuilder
+            funnel={draft}
+            onUpdate={setDraft}
+            fieldRegistry={fieldRegistry}
+          />
+        </div>
+      )}
+
+      {tab === 'runs' && (
+        <FunnelRunHistory
+          funnelId={funnelId}
+          apiClient={client}
+          onViewResults={(run) => {
+            setResultsRun(run.id);
+            setTab('results');
+          }}
+        />
+      )}
+
+      {tab === 'results' &&
+        (resultsRun ? (
+          <RunResults client={client} funnel={draft} runId={resultsRun} pageSize={pageSize} />
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            No run to show results for yet. Hit “Run now”, or pick a run from the Runs
+            tab.
+          </p>
+        ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// The page
+// ---------------------------------------------------------------------------
+
+export function FunnelsPage({
+  client,
+  fieldsClient,
+  canManage = false,
+  pageSize = DEFAULT_PAGE_SIZE,
+  className = '',
+}: FunnelsPageProps) {
+  const [selected, setSelected] = React.useState<string | null>(null);
+  const fields = fieldsClient ?? client;
+
+  return (
+    <div className={`space-y-5 ${className}`} data-testid="funnels-page">
+      {selected ? (
+        <FunnelDetail
+          client={client}
+          fieldsClient={fields}
+          funnelId={selected}
+          canManage={canManage}
+          pageSize={pageSize}
+          onBack={() => setSelected(null)}
+        />
+      ) : (
+        <FunnelList
+          client={client}
+          canManage={canManage}
+          pageSize={pageSize}
+          onOpen={(row) => setSelected(row.id)}
+        />
+      )}
+    </div>
+  );
+}