@kelpie/ui 0.8.0 → 0.9.0

package/src/components/Shell.tsx

@@ -22,6 +22,8 @@ import { ErrorBoundary } from './ErrorBoundary.tsx'
 const CORE_ADMIN_NAV: readonly NavItem[] = [
   { id: 'workspace', label: 'Workspace', to: '/admin/workspace', order: 100 },
   { id: 'team', label: 'Team', to: '/admin/team', order: 200 },
+  { id: 'fields', label: 'Fields', to: '/admin/fields', order: 250 },
+  { id: 'privacy', label: 'Privacy', to: '/admin/privacy', order: 275 },
   { id: 'data', label: 'Data', to: '/admin/data', order: 300 },
   { id: 'api-keys', label: 'API keys', to: '/admin/api-keys', order: 350 },
   { id: 'webhooks', label: 'Webhooks', to: '/admin/webhooks', order: 400 },
@@ -34,6 +36,7 @@ const CORE_NAV: readonly NavItem[] = [
   { id: 'people', label: 'People', to: '/people', order: 100 },
   { id: 'hiring', label: 'Hiring', to: '/hiring', order: 150 },
   { id: 'companies', label: 'Companies', to: '/companies', order: 200 },
+  { id: 'enquiries', label: 'Enquiries', to: '/enquiries', order: 250 },
   { id: 'deals', label: 'Deals', to: '/deals', order: 300 },
   { id: 'opportunities', label: 'Opportunities', to: '/opportunities', order: 350 },
   { id: 'fundraising', label: 'Fundraising', to: '/fundraising', order: 360 },

package/src/components/useHasCustomFields.ts

@@ -0,0 +1,18 @@
+import type { CustomFieldObjectType } from '@kelpie/schemas'
+
+import { useCustomFields } from '../api/resources/customFields.ts'
+
+/**
+ * Whether this workspace has any custom fields for the given object type.
+ *
+ * A detail page reads this to decide whether to render its Fields tab at all —
+ * a workspace with no definitions should not see a Fields tab full of empty
+ * space with only a "go set one up" pointer.
+ *
+ * Lives in its own file so `CustomFieldsPanel.tsx` can stay Fast-Refresh clean
+ * (`react/only-export-components`).
+ */
+export function useHasCustomFields(objectType: CustomFieldObjectType): boolean {
+  const definitions = useCustomFields({ objectType, sort: 'sort_order', limit: 200 })
+  return definitions.records.length > 0
+}

package/src/pages/CompanyDetail.tsx

@@ -12,6 +12,8 @@ import {
   useUpdateCompany,
 } from '../api/resources/companies.ts'
 import { useDeals } from '../api/resources/deals.ts'
+import { useEnquiries } from '../api/resources/enquiries.ts'
+import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useOpportunities } from '../api/resources/opportunities.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
 import { usePeople } from '../api/resources/people.ts'
@@ -29,6 +31,9 @@ import type { ChipTone } from '../components/Chip.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
+import { FormsPanel } from '../components/FormsPanel.tsx'
+import { CustomFieldsPanel } from '../components/CustomFieldsPanel.tsx'
+import { useHasCustomFields } from '../components/useHasCustomFields.ts'
 import { InlineEdit } from '../components/InlineEdit.tsx'
 import { ListsPanel } from '../components/ListsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
@@ -69,7 +74,9 @@ export function CompanyDetail(): React.JSX.Element {
   const { record, isLoading, isNotFound, error } = useCompany(id)
   const deleteCompany = useDeleteCompany()
   const moduleTabs = inSlotOrder(useRecordTabs('company'))
+  const hasCustomFields = useHasCustomFields('company')
   const [activeTab, setActiveTab] = useState('overview')
+  const formSubmissions = useFormSubmissionsForRecord('company', id)
 
   if (isNotFound) {
     return <NotFoundPanel label="Company" backTo="/companies" />
@@ -85,11 +92,15 @@ export function CompanyDetail(): React.JSX.Element {
 
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
+    ...(hasCustomFields ? [{ id: 'fields', label: 'Fields' }] : []),
     { id: 'activity', label: 'Activity' },
     { id: 'people', label: 'People' },
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
     { id: 'lists', label: 'Lists' },
+    ...(formSubmissions.records.length === 0
+      ? []
+      : [{ id: 'forms', label: 'Forms', count: formSubmissions.records.length }]),
     ...moduleTabs.map((tab) => ({ id: tab.id, label: tab.label })),
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
@@ -131,11 +142,13 @@ export function CompanyDetail(): React.JSX.Element {
             ariaLabel="Company sections"
           >
             {active === 'overview' && <CompanyOverview company={record} />}
+            {active === 'fields' && <CompanyFields company={record} />}
             {active === 'activity' && <ActivitiesPanel targetType="company" targetId={record.id} />}
             {active === 'people' && <CompanyPeople company={record} />}
             {active === 'notes' && <NotesPanel targetType="company" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="company" targetId={record.id} />}
             {active === 'lists' && <ListsPanel targetType="company" targetId={record.id} />}
+            {active === 'forms' && <FormsPanel targetType="company" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'company', recordId: record.id })}
           </RecordTabs>
         </div>
@@ -196,6 +209,7 @@ function CompanyOverview({ company }: { readonly company: Company }): React.JSX.
   const opportunities = useOpportunities({ companyIds: [company.id] })
   const raises = useRaises({ companyIds: [company.id] })
   const partnerships = usePartnerships({ companyIds: [company.id] })
+  const enquiries = useEnquiries({ companyIds: [company.id] })
 
   return (
     <div className="space-y-8">
@@ -211,8 +225,13 @@ function CompanyOverview({ company }: { readonly company: Company }): React.JSX.
         opportunities={opportunities.records}
         raises={raises.records}
         partnerships={partnerships.records}
+        enquiries={enquiries.records}
         isLoading={
-          deals.isLoading || opportunities.isLoading || raises.isLoading || partnerships.isLoading
+          deals.isLoading ||
+          opportunities.isLoading ||
+          raises.isLoading ||
+          partnerships.isLoading ||
+          enquiries.isLoading
         }
       />
       <LatestActivity targetType="company" targetId={company.id} />
@@ -357,6 +376,22 @@ function CompanySidebar({ company }: { readonly company: Company }): React.JSX.E
   )
 }
 
+function CompanyFields({ company }: { readonly company: Company }): React.JSX.Element {
+  const { patch, error } = useCompanyPatch(company)
+  return (
+    <div className="space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <CustomFieldsPanel
+        objectType="company"
+        values={company.customFields}
+        onPatch={(customFields) => {
+          patch({ customFields })
+        }}
+      />
+    </div>
+  )
+}
+
 /** The other side of the Position link: who holds a title here. */
 function CompanyPeople({ company }: { readonly company: Company }): React.JSX.Element {
   const positions = usePositions({ companyIds: [company.id] })

package/src/pages/DealDetail.tsx

@@ -7,6 +7,7 @@ import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
 import { useDeal, useDeleteDeal, useUpdateDeal } from '../api/resources/deals.ts'
+import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { usePeople } from '../api/resources/people.ts'
 import { usePipelineStages } from '../api/resources/pipelineStages.ts'
@@ -18,6 +19,9 @@ import type { ChipTone } from '../components/Chip.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
+import { FormsPanel } from '../components/FormsPanel.tsx'
+import { CustomFieldsPanel } from '../components/CustomFieldsPanel.tsx'
+import { useHasCustomFields } from '../components/useHasCustomFields.ts'
 import { InlineEdit } from '../components/InlineEdit.tsx'
 import { ListsPanel } from '../components/ListsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
@@ -54,7 +58,9 @@ export function DealDetail(): React.JSX.Element {
   const { record, isLoading, isNotFound, error } = useDeal(id)
   const deleteDeal = useDeleteDeal()
   const moduleTabs = inSlotOrder(useRecordTabs('deal'))
+  const hasCustomFields = useHasCustomFields('deal')
   const [activeTab, setActiveTab] = useState('overview')
+  const formSubmissions = useFormSubmissionsForRecord('deal', id)
 
   if (isNotFound) {
     return <NotFoundPanel label="Deal" backTo="/deals" />
@@ -70,11 +76,15 @@ export function DealDetail(): React.JSX.Element {
 
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
+    ...(hasCustomFields ? [{ id: 'fields', label: 'Fields' }] : []),
     { id: 'plan', label: 'Plan' },
     { id: 'activity', label: 'Activity' },
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
     { id: 'lists', label: 'Lists' },
+    ...(formSubmissions.records.length === 0
+      ? []
+      : [{ id: 'forms', label: 'Forms', count: formSubmissions.records.length }]),
     ...moduleTabs.map((tab) => ({ id: tab.id, label: tab.label })),
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
@@ -111,11 +121,15 @@ export function DealDetail(): React.JSX.Element {
 
           <RecordTabs tabs={tabs} active={active} onChange={setActiveTab} ariaLabel="Deal sections">
             {active === 'overview' && <DealOverview deal={record} />}
+            {active === 'fields' && (
+              <DealFields deal={record} />
+            )}
             {active === 'plan' && <PlanPanel targetType="deal" targetId={record.id} />}
             {active === 'activity' && <ActivitiesPanel targetType="deal" targetId={record.id} />}
             {active === 'notes' && <NotesPanel targetType="deal" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="deal" targetId={record.id} />}
             {active === 'lists' && <ListsPanel targetType="deal" targetId={record.id} />}
+            {active === 'forms' && <FormsPanel targetType="deal" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'deal', recordId: record.id })}
           </RecordTabs>
         </div>
@@ -242,6 +256,23 @@ function DealOverview({ deal }: { readonly deal: Deal }): React.JSX.Element {
   )
 }
 
+/** The Fields tab: the workspace's custom fields for this deal. */
+function DealFields({ deal }: { readonly deal: Deal }): React.JSX.Element {
+  const { patch, error } = useDealPatch(deal)
+  return (
+    <div className="space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <CustomFieldsPanel
+        objectType="deal"
+        values={deal.customFields}
+        onPatch={(customFields) => {
+          patch({ customFields })
+        }}
+      />
+    </div>
+  )
+}
+
 /** Whole units in the box, cents on the wire. Blank clears the value. */
 function toValueCents(raw: string): number | null | undefined {
   const trimmed = raw.trim()

package/src/pages/DecisionsPage.tsx

@@ -44,6 +44,7 @@ const TARGET_LABELS: Readonly<Record<RecordTargetType, string>> = {
   opportunity: 'Opportunity',
   partnership: 'Partnership',
   raise: 'Raise',
+  enquiry: 'Enquiry',
   candidate: 'Candidate',
 }
 
@@ -54,6 +55,7 @@ const TARGET_ROUTES: Readonly<Partial<Record<RecordTargetType, string>>> = {
   opportunity: '/opportunities',
   raise: '/fundraising',
   partnership: '/partnerships',
+  enquiry: '/enquiries',
 }
 
 interface TargetDirectory {

package/src/pages/EnquiriesPage.tsx

@@ -0,0 +1,434 @@
+import type { Enquiry, PipelineStage } from '@kelpie/schemas'
+import { Link, useNavigate } from 'react-router'
+
+import { useCompanies } from '../api/resources/companies.ts'
+import {
+  useCreateEnquiry,
+  useEnquiries,
+  useUpdateEnquiry,
+} from '../api/resources/enquiries.ts'
+import { useMembers } from '../api/resources/members.ts'
+import { usePipelineStages } from '../api/resources/pipelineStages.ts'
+import { MAX_PAGE_SIZE, usePlanItems } from '../api/resources/planItems.ts'
+import { useTimezone } from '../api/resources/account.ts'
+import { Chip } from '../components/Chip.tsx'
+import type { ChipTone } from '../components/Chip.tsx'
+import { ColumnPicker } from '../components/ColumnPicker.tsx'
+import { DataTable } from '../components/DataTable.tsx'
+import type { Column, DataTableGroup } from '../components/DataTable.tsx'
+import { KanbanBoard } from '../components/KanbanBoard.tsx'
+import { PageHeader } from '../components/PageHeader.tsx'
+import { Paginator } from '../components/Paginator.tsx'
+import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
+import { SegmentedControl } from '../components/SegmentedControl.tsx'
+import { formatDate, formatDay } from '../lib/dates.ts'
+import { useListView } from '../lib/listView.ts'
+import { DUE_BUCKETS, byDateThenTitle, dueBucketFor, nextOpenByTarget } from '../lib/plan.ts'
+import { serverSortOnly } from '../lib/sort.ts'
+
+/**
+ * The Enquiries pipeline: inbound requests that may become a Deal. The same
+ * board-and-list pair as Opportunities over the shared kanban, with `source`
+ * in place of `kind` and a company that may be absent.
+ */
+
+type BoardView = 'list' | 'columns'
+type PipelineScope = 'open' | 'all'
+type ListGrouping = 'stage' | 'due'
+
+const SCOPES: readonly PipelineScope[] = ['open', 'all']
+const GROUPINGS: readonly ListGrouping[] = ['stage', 'due']
+
+function readScope(stored: string | undefined): PipelineScope {
+  return SCOPES.includes(stored as PipelineScope) ? (stored as PipelineScope) : 'open'
+}
+
+function readGrouping(stored: string | undefined): ListGrouping {
+  return GROUPINGS.includes(stored as ListGrouping) ? (stored as ListGrouping) : 'stage'
+}
+
+const COLUMN_KEYS: readonly string[] = [
+  'name',
+  'source',
+  'company',
+  'stage',
+  'nextPlan',
+  'owner',
+  'tags',
+  'summary',
+  'createdAt',
+  'updatedAt',
+]
+
+/** Tones keyed by the seeded slugs. A renamed stage keeps its slug and its tone. */
+const STAGE_TONES: Readonly<Record<string, ChipTone>> = {
+  new: 'accent',
+  in_progress: 'warning',
+  closed: 'neutral',
+}
+
+function stageTone(stage: PipelineStage): ChipTone {
+  return STAGE_TONES[stage.slug] ?? 'neutral'
+}
+
+const DEFAULT_VISIBLE_KEYS: readonly string[] = [
+  'name',
+  'source',
+  'company',
+  'nextPlan',
+  'owner',
+]
+
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
+export function EnquiriesPage(): React.JSX.Element {
+  const navigate = useNavigate()
+
+  const listView = useListView('enquiries', COLUMN_KEYS, DEFAULT_VISIBLE_KEYS)
+  const view: BoardView = listView.mode ?? 'columns'
+  const scope = readScope(listView.scope)
+  const grouping = readGrouping(listView.grouping)
+  const sort = listView.sort
+
+  const stages = usePipelineStages('enquiry')
+  const enquiries = useEnquiries({ sort: serverSortOnly(sort, SERVER_SORT_KEYS) })
+  const companies = useCompanies({ limit: 200 })
+  const members = useMembers()
+  const createEnquiry = useCreateEnquiry()
+  const updateEnquiry = useUpdateEnquiry()
+  const timezone = useTimezone()
+
+  const allStages = [...stages.records].sort((a, b) => a.sortOrder - b.sortOrder)
+  const visibleStages = scope === 'open' ? allStages.filter((stage) => stage.open) : allStages
+  const visibleStageIds = new Set(visibleStages.map((stage) => stage.id))
+  const visibleEnquiries = enquiries.records.filter((enquiry) =>
+    visibleStageIds.has(enquiry.stageId),
+  )
+
+  const askedIds = visibleEnquiries.slice(0, MAX_PAGE_SIZE).map((enquiry) => enquiry.id)
+  const planItems = usePlanItems(
+    {
+      targetType: 'enquiry',
+      targetIds: askedIds,
+      statuses: ['todo', 'in_progress'],
+      limit: MAX_PAGE_SIZE,
+    },
+    { enabled: askedIds.length > 0 },
+  )
+  const nextPlanByEnquiry = nextOpenByTarget(planItems.records)
+  const plansTruncated = visibleEnquiries.length > MAX_PAGE_SIZE || planItems.hasNext
+
+  const companyNameById = new Map(companies.records.map((company) => [company.id, company.name]))
+
+  async function addEnquiry(): Promise<void> {
+    const enquiry = await createEnquiry.runAsync({ name: 'New enquiry' })
+
+    await navigate(`/enquiries/${enquiry.id}`)
+  }
+
+  const stageLabelById = new Map(allStages.map((stage) => [stage.id, stage.label]))
+
+  const columns: readonly Column<Enquiry>[] = [
+    {
+      key: 'name',
+      header: 'Enquiry',
+      sortKey: 'name',
+      render: (enquiry) => <span className="font-medium text-ink">{enquiry.name}</span>,
+    },
+    {
+      key: 'source',
+      header: 'Source',
+      getSortValue: (enquiry) => enquiry.source || null,
+      render: (enquiry) => (enquiry.source.length > 0 ? enquiry.source : '—'),
+    },
+    {
+      key: 'company',
+      header: 'Company',
+      getSortValue: (enquiry) =>
+        enquiry.companyId === null ? null : (companyNameById.get(enquiry.companyId) ?? null),
+      render: (enquiry) =>
+        enquiry.companyId === null
+          ? '—'
+          : (companyNameById.get(enquiry.companyId) ?? '—'),
+    },
+    {
+      key: 'stage',
+      header: 'Stage',
+      getSortValue: (enquiry) => stageLabelById.get(enquiry.stageId) ?? null,
+      render: (enquiry) => stageLabelById.get(enquiry.stageId) ?? '—',
+    },
+    {
+      key: 'nextPlan',
+      header: 'Next plan',
+      getSortValue: (enquiry) => nextPlanByEnquiry.get(enquiry.id)?.date ?? null,
+      render: (enquiry) => {
+        const next = nextPlanByEnquiry.get(enquiry.id)
+
+        if (next === undefined) {
+          return '—'
+        }
+
+        return (
+          <span className="text-ink-muted">
+            {next.title}
+            <span className="ml-1.5 font-mono text-[11px] text-ink-faint">
+              {formatDay(next.date)}
+            </span>
+          </span>
+        )
+      },
+    },
+    {
+      key: 'owner',
+      header: 'Owner',
+      getSortValue: (enquiry) =>
+        enquiry.ownerId === null ? null : (members.nameById.get(enquiry.ownerId) ?? 'Unknown'),
+      render: (enquiry) =>
+        enquiry.ownerId === null
+          ? '—'
+          : (members.nameById.get(enquiry.ownerId) ?? 'Unknown'),
+    },
+    {
+      key: 'tags',
+      header: 'Tags',
+      getSortValue: (enquiry) => enquiry.tags.join(', ') || null,
+      render: (enquiry) =>
+        enquiry.tags.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {enquiry.tags.map((tag) => (
+              <Chip key={tag}>
+                <span className="text-[10px]">{tag}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'summary',
+      header: 'Summary',
+      getSortValue: (enquiry) => enquiry.summary || null,
+      render: (enquiry) =>
+        enquiry.summary.length === 0 ? '—' : (
+          <span className="text-ink-muted">{enquiry.summary}</span>
+        ),
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (enquiry) => formatDate(enquiry.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (enquiry) => formatDate(enquiry.updatedAt, timezone),
+    },
+  ]
+
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
+  const stageGroups: readonly DataTableGroup<Enquiry>[] = visibleStages.map((stage) => ({
+    id: stage.id,
+    label: <Chip tone={stageTone(stage)}>{stage.label}</Chip>,
+    rows: visibleEnquiries.filter((enquiry) => enquiry.stageId === stage.id),
+  }))
+
+  const dueGroups: readonly DataTableGroup<Enquiry>[] = DUE_BUCKETS.map((bucket) => ({
+    id: bucket.id,
+    label: bucket.label,
+    rows: visibleEnquiries
+      .filter(
+        (enquiry) => dueBucketFor(nextPlanByEnquiry.get(enquiry.id)?.date) === bucket.id,
+      )
+      .sort((left, right) => {
+        const leftNext = nextPlanByEnquiry.get(left.id)
+        const rightNext = nextPlanByEnquiry.get(right.id)
+
+        if (leftNext === undefined || rightNext === undefined) {
+          return left.name.localeCompare(right.name)
+        }
+
+        return byDateThenTitle(leftNext, rightNext) || left.name.localeCompare(right.name)
+      }),
+  }))
+
+  const cards = visibleEnquiries.map((enquiry) => {
+    const next = nextPlanByEnquiry.get(enquiry.id)
+    const companyName =
+      enquiry.companyId === null ? undefined : companyNameById.get(enquiry.companyId)
+    const meta = [
+      enquiry.source.length > 0 ? enquiry.source : undefined,
+      companyName,
+      next?.title,
+    ]
+      .filter((part) => part !== undefined)
+      .join(' · ')
+
+    return {
+      id: enquiry.id,
+      stage: enquiry.stageId,
+      title: enquiry.name,
+      meta,
+      href: `/enquiries/${enquiry.id}`,
+    }
+  })
+
+  const isLoading = enquiries.isLoading || stages.isLoading
+  const loadError = enquiries.error ?? stages.error
+
+  return (
+    <div className="animate-fade-in">
+      <PageHeader
+        title="Enquiries"
+        onAdd={() => {
+          void addEnquiry()
+        }}
+        addLabel="Add enquiry"
+        actions={
+          <>
+            <Link
+              to="/enquiries/settings"
+              className="rounded-md border border-border bg-surface-raised px-2.5 py-1 text-[12px] font-medium text-ink-muted hover:text-ink"
+            >
+              Settings
+            </Link>
+            <SegmentedControl
+              ariaLabel="Stage scope"
+              value={scope}
+              onChange={(next) => {
+                listView.setScope(next)
+              }}
+              options={[
+                { id: 'open', label: 'Open' },
+                { id: 'all', label: 'All' },
+              ]}
+            />
+            {view === 'list' && (
+              <SegmentedControl
+                ariaLabel="Group the list"
+                value={grouping}
+                onChange={(next) => {
+                  listView.setGrouping(next)
+                }}
+                options={[
+                  { id: 'stage', label: 'By stage' },
+                  { id: 'due', label: 'By due' },
+                ]}
+              />
+            )}
+            <SegmentedControl
+              ariaLabel="Board or list"
+              value={view}
+              onChange={(next) => {
+                listView.setMode(next)
+              }}
+              options={[
+                { id: 'list', label: 'List' },
+                { id: 'columns', label: 'Board' },
+              ]}
+            />
+            {view === 'list' && (
+              <ColumnPicker
+                options={pickerOptions}
+                visibleKeys={listView.visibleKeys}
+                onChange={listView.setVisibleKeys}
+              />
+            )}
+          </>
+        }
+      />
+
+      {createEnquiry.error !== null && (
+        <div className="mb-3">
+          <ErrorPanel error={createEnquiry.error} />
+        </div>
+      )}
+
+      {loadError !== null ? (
+        <ErrorPanel error={loadError} />
+      ) : isLoading ? (
+        <LoadingPanel label="Loading enquiries…" />
+      ) : (
+        <>
+          {view === 'list' && <Paginator list={enquiries} placement="top" />}
+          {view === 'columns' ? (
+            <KanbanBoard
+              stages={visibleStages.map((stage) => ({ id: stage.id, label: stage.label }))}
+              cards={cards}
+              onMove={(enquiryId, stageId) => {
+                const enquiry = enquiries.records.find(
+                  (candidate) => candidate.id === enquiryId,
+                )
+
+                if (enquiry !== undefined && enquiry.stageId !== stageId) {
+                  updateEnquiry.run({ id: enquiryId, changes: { stageId } })
+                }
+              }}
+            />
+          ) : (
+            <DataTable
+              columns={columns}
+              groups={grouping === 'stage' ? stageGroups : dueGroups}
+              getRowId={(enquiry) => enquiry.id}
+              onRowClick={(enquiry) => {
+                void navigate(`/enquiries/${enquiry.id}`)
+              }}
+              emptyMessage={
+                enquiries.records.length === 0
+                  ? 'No enquiries yet'
+                  : scope === 'open'
+                    ? 'No open enquiries'
+                    : 'No enquiries in this view'
+              }
+              emptyDescription={
+                enquiries.records.length > 0 && scope === 'open'
+                  ? 'You have enquiries, but none are open right now.'
+                  : undefined
+              }
+              emptyAction={
+                enquiries.records.length === 0
+                  ? {
+                      label: 'Add enquiry',
+                      onClick: () => {
+                        void addEnquiry()
+                      },
+                    }
+                  : scope === 'open'
+                    ? {
+                        label: 'Show all enquiries',
+                        onClick: () => {
+                          listView.setScope('all')
+                        },
+                      }
+                    : undefined
+              }
+              sort={sort}
+              onSortChange={(next) => {
+                listView.setSort(next)
+              }}
+              visibleColumnKeys={listView.visibleKeys}
+            />
+          )}
+          {updateEnquiry.error !== null && (
+            <div className="mt-3">
+              <ErrorPanel error={updateEnquiry.error} />
+            </div>
+          )}
+          {view === 'list' && <Paginator list={enquiries} />}
+          {companies.hasNext && (
+            <p className="mt-2 text-[11px] text-ink-faint">
+              More companies exist than one page returns, so some company names may show as “—”.
+            </p>
+          )}
+          {plansTruncated && (
+            <p className="mt-2 text-[11px] text-ink-faint">
+              More plan items exist than one page returns, so some enquiries may show no next
+              plan.
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  )
+}