@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/DealsPage.tsx

@@ -1,5 +1,4 @@
 import type { Deal, PipelineStage } from '@kelpie/schemas'
-import { useState } from 'react'
 import { Link, useNavigate } from 'react-router'
 
 import { useCompanies } from '../api/resources/companies.ts'
@@ -7,17 +6,22 @@ import { useDeals, useCreateDeal, useUpdateDeal } from '../api/resources/deals.t
 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 { formatDay } from '../lib/dates.ts'
+import { formatDate, formatDay } from '../lib/dates.ts'
+import { useListView } from '../lib/listView.ts'
 import { formatMoney } from '../lib/money.ts'
 import { DUE_BUCKETS, byDateThenTitle, dueBucketFor, nextOpenByTarget } from '../lib/plan.ts'
+import { serverSortOnly } from '../lib/sort.ts'
 
 /**
  * The Deals pipeline: a board and a list over the same records, grouped by stage
@@ -31,6 +35,17 @@ 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'
+}
+
 /** Tones keyed by the seeded slugs. A renamed stage keeps its slug and its tone. */
 const STAGE_TONES: Readonly<Record<string, ChipTone>> = {
   won: 'success',
@@ -43,19 +58,54 @@ function stageTone(stage: PipelineStage): ChipTone {
   return STAGE_TONES[stage.slug] ?? 'neutral'
 }
 
+const DEFAULT_VISIBLE_KEYS: readonly string[] = [
+  'name',
+  'company',
+  'value',
+  'nextPlan',
+  'owner',
+  'close',
+]
+
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
 export function DealsPage(): React.JSX.Element {
   const navigate = useNavigate()
-  const [view, setView] = useState<BoardView>('list')
-  const [scope, setScope] = useState<PipelineScope>('open')
-  const [grouping, setGrouping] = useState<ListGrouping>('stage')
-  const [sort, setSort] = useState<string | undefined>(undefined)
 
   const stages = usePipelineStages('deal')
-  const deals = useDeals({ sort })
   const companies = useCompanies({ limit: 200 })
+  // The list-view controller holds every persisted knob, so it is declared
+  // before the deals query — the sort it stores decides which page comes
+  // back. Board vs list defaults to the board here; the other three read
+  // their own default from the readers above.
+  const supportedKeys: readonly string[] = [
+    'name',
+    'company',
+    'stage',
+    'value',
+    'currency',
+    'nextPlan',
+    'owner',
+    'close',
+    'competitors',
+    'tags',
+    'summary',
+    'risks',
+    'whyWin',
+    'externalId',
+    'createdAt',
+    'updatedAt',
+  ]
+  const listView = useListView('deals', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const view: BoardView = listView.mode ?? 'columns'
+  const scope = readScope(listView.scope)
+  const grouping = readGrouping(listView.grouping)
+  const sort = listView.sort
+  const deals = useDeals({ sort: serverSortOnly(sort, SERVER_SORT_KEYS) })
   const members = useMembers()
   const createDeal = useCreateDeal()
   const updateDeal = useUpdateDeal()
+  const timezone = useTimezone()
 
   const allStages = [...stages.records].sort((a, b) => a.sortOrder - b.sortOrder)
   const visibleStages = scope === 'open' ? allStages.filter((stage) => stage.open) : allStages
@@ -71,7 +121,7 @@ export function DealsPage(): React.JSX.Element {
     { enabled: askedDealIds.length > 0 },
   )
   const nextPlanByDeal = nextOpenByTarget(planItems.records)
-  const plansTruncated = visibleDeals.length > MAX_PAGE_SIZE || planItems.hasMore
+  const plansTruncated = visibleDeals.length > MAX_PAGE_SIZE || planItems.hasNext
 
   const companyNameById = new Map(companies.records.map((company) => [company.id, company.name]))
 
@@ -87,6 +137,8 @@ export function DealsPage(): React.JSX.Element {
     await navigate(`/deals/${deal.id}`)
   }
 
+  const stageLabelById = new Map(allStages.map((stage) => [stage.id, stage.label]))
+
   const columns: readonly Column<Deal>[] = [
     {
       key: 'name',
@@ -97,21 +149,36 @@ export function DealsPage(): React.JSX.Element {
     {
       key: 'company',
       header: 'Company',
+      getSortValue: (deal) => companyNameById.get(deal.companyId) ?? null,
       render: (deal) => companyNameById.get(deal.companyId) ?? '—',
     },
+    {
+      key: 'stage',
+      header: 'Stage',
+      getSortValue: (deal) => stageLabelById.get(deal.stageId) ?? null,
+      render: (deal) => stageLabelById.get(deal.stageId) ?? '—',
+    },
     {
       key: 'value',
       header: 'Value',
       className: 'w-28',
+      getSortValue: (deal) => deal.valueCents,
       render: (deal) => (
         <span className="font-mono text-[12px]">
           {deal.valueCents === null ? '—' : formatMoney(deal.valueCents, deal.currency)}
         </span>
       ),
     },
+    {
+      key: 'currency',
+      header: 'Currency',
+      getSortValue: (deal) => deal.currency,
+      render: (deal) => deal.currency ?? '—',
+    },
     {
       key: 'nextPlan',
       header: 'Next plan',
+      getSortValue: (deal) => nextPlanByDeal.get(deal.id)?.date ?? null,
       render: (deal) => {
         const next = nextPlanByDeal.get(deal.id)
 
@@ -132,6 +199,8 @@ export function DealsPage(): React.JSX.Element {
     {
       key: 'owner',
       header: 'Owner',
+      getSortValue: (deal) =>
+        deal.ownerId === null ? null : (members.nameById.get(deal.ownerId) ?? 'Unknown'),
       render: (deal) =>
         deal.ownerId === null ? '—' : (members.nameById.get(deal.ownerId) ?? 'Unknown'),
     },
@@ -139,14 +208,91 @@ export function DealsPage(): React.JSX.Element {
       key: 'close',
       header: 'Close',
       className: 'w-28',
+      getSortValue: (deal) => deal.expectedClose,
       render: (deal) => (
         <span className="font-mono text-[12px] text-ink-muted">
           {deal.expectedClose === null ? '—' : formatDay(deal.expectedClose)}
         </span>
       ),
     },
+    {
+      key: 'competitors',
+      header: 'Competitors',
+      getSortValue: (deal) => deal.competitors.join(', ') || null,
+      render: (deal) =>
+        deal.competitors.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {deal.competitors.map((entry) => (
+              <Chip key={entry}>
+                <span className="text-[10px]">{entry}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'tags',
+      header: 'Tags',
+      getSortValue: (deal) => deal.tags.join(', ') || null,
+      render: (deal) =>
+        deal.tags.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {deal.tags.map((tag) => (
+              <Chip key={tag}>
+                <span className="text-[10px]">{tag}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'summary',
+      header: 'Summary',
+      getSortValue: (deal) => deal.summary || null,
+      render: (deal) =>
+        deal.summary.length === 0 ? '—' : <span className="text-ink-muted">{deal.summary}</span>,
+    },
+    {
+      key: 'risks',
+      header: 'Risks',
+      getSortValue: (deal) => deal.risks || null,
+      render: (deal) =>
+        deal.risks.length === 0 ? '—' : <span className="text-ink-muted">{deal.risks}</span>,
+    },
+    {
+      key: 'whyWin',
+      header: 'Why win',
+      getSortValue: (deal) => deal.whyWin || null,
+      render: (deal) =>
+        deal.whyWin.length === 0 ? '—' : <span className="text-ink-muted">{deal.whyWin}</span>,
+    },
+    {
+      key: 'externalId',
+      header: 'External ID',
+      getSortValue: (deal) => deal.externalId,
+      render: (deal) =>
+        deal.externalId === null ? (
+          '—'
+        ) : (
+          <span className="font-mono text-[12px] text-ink-muted">{deal.externalId}</span>
+        ),
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (deal) => formatDate(deal.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (deal) => formatDate(deal.updatedAt, timezone),
+    },
   ]
 
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   const stageGroups: readonly DataTableGroup<Deal>[] = visibleStages.map((stage) => ({
     id: stage.id,
     label: <Chip tone={stageTone(stage)}>{stage.label}</Chip>,
@@ -208,7 +354,9 @@ export function DealsPage(): React.JSX.Element {
             <SegmentedControl
               ariaLabel="Stage scope"
               value={scope}
-              onChange={setScope}
+              onChange={(next) => {
+                listView.setScope(next)
+              }}
               options={[
                 { id: 'open', label: 'Open' },
                 { id: 'all', label: 'All' },
@@ -218,7 +366,9 @@ export function DealsPage(): React.JSX.Element {
               <SegmentedControl
                 ariaLabel="Group the list"
                 value={grouping}
-                onChange={setGrouping}
+                onChange={(next) => {
+                  listView.setGrouping(next)
+                }}
                 options={[
                   { id: 'stage', label: 'By stage' },
                   { id: 'due', label: 'By due' },
@@ -228,12 +378,21 @@ export function DealsPage(): React.JSX.Element {
             <SegmentedControl
               ariaLabel="Board or list"
               value={view}
-              onChange={setView}
+              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}
+              />
+            )}
           </>
         }
       />
@@ -255,6 +414,7 @@ export function DealsPage(): React.JSX.Element {
         <LoadingPanel label="Loading deals…" />
       ) : (
         <>
+          {view === 'list' && <Paginator list={deals} placement="top" />}
           {view === 'columns' ? (
             <KanbanBoard
               stages={visibleStages.map((stage) => ({ id: stage.id, label: stage.label }))}
@@ -301,13 +461,16 @@ export function DealsPage(): React.JSX.Element {
                     ? {
                         label: 'Show all deals',
                         onClick: () => {
-                          setScope('all')
+                          listView.setScope('all')
                         },
                       }
                     : undefined
               }
               sort={sort}
-              onSortChange={setSort}
+              onSortChange={(next) => {
+                listView.setSort(next)
+              }}
+              visibleColumnKeys={listView.visibleKeys}
             />
           )}
           {updateDeal.error !== null && (
@@ -315,17 +478,8 @@ export function DealsPage(): React.JSX.Element {
               <ErrorPanel error={updateDeal.error} />
             </div>
           )}
-          {deals.hasMore && (
-            <button
-              type="button"
-              onClick={deals.loadMore}
-              disabled={deals.isLoadingMore}
-              className="mt-3 rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink transition hover:border-border-strong hover:bg-surface-sunken disabled:opacity-50"
-            >
-              {deals.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
-          {companies.hasMore && (
+          {view === 'list' && <Paginator list={deals} />}
+          {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>

package/src/pages/DecisionsPage.tsx

@@ -11,11 +11,15 @@ import { useOpportunities } from '../api/resources/opportunities.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
 import { usePeople } from '../api/resources/people.ts'
 import { useRaises } from '../api/resources/raises.ts'
+import { ColumnPicker } from '../components/ColumnPicker.tsx'
 import { DataTable } from '../components/DataTable.tsx'
 import type { Column } from '../components/DataTable.tsx'
 import { FilterBar, PageHeader } from '../components/PageHeader.tsx'
+import { Paginator } from '../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
 import { formatDate } from '../lib/dates.ts'
+import { serverSortOnly } from '../lib/sort.ts'
+import { useListView } from '../lib/listView.ts'
 
 /**
  * Every decision in the workspace.
@@ -40,6 +44,7 @@ const TARGET_LABELS: Readonly<Record<RecordTargetType, string>> = {
   opportunity: 'Opportunity',
   partnership: 'Partnership',
   raise: 'Raise',
+  enquiry: 'Enquiry',
   candidate: 'Candidate',
 }
 
@@ -50,6 +55,7 @@ const TARGET_ROUTES: Readonly<Partial<Record<RecordTargetType, string>>> = {
   opportunity: '/opportunities',
   raise: '/fundraising',
   partnership: '/partnerships',
+  enquiry: '/enquiries',
 }
 
 interface TargetDirectory {
@@ -90,12 +96,12 @@ function useTargetDirectory(): TargetDirectory {
   return {
     nameFor: (decision) => nameById.get(decision.targetId),
     isComplete:
-      !people.hasMore &&
-      !companies.hasMore &&
-      !deals.hasMore &&
-      !opportunities.hasMore &&
-      !raises.hasMore &&
-      !partnerships.hasMore,
+      !people.hasNext &&
+      !companies.hasNext &&
+      !deals.hasNext &&
+      !opportunities.hasNext &&
+      !raises.hasNext &&
+      !partnerships.hasNext,
   }
 }
 
@@ -123,9 +129,17 @@ function LinkedTo({
   )
 }
 
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['decision', 'target', 'decided', 'due', 'owner']
+
+const SERVER_SORT_KEYS: readonly string[] = ['decided_at', 'created_at', 'updated_at']
+
 export function DecisionsPage(): React.JSX.Element {
   const [term, setTerm] = useState('')
-  const decisions = useDecisions({ term: term.trim().length > 0 ? term.trim() : undefined })
+  const [sort, setSort] = useState<string | undefined>(undefined)
+  const decisions = useDecisions({
+    term: term.trim().length > 0 ? term.trim() : undefined,
+    sort: serverSortOnly(sort, SERVER_SORT_KEYS),
+  })
   const directory = useTargetDirectory()
   const members = useMembers()
   const timezone = useTimezone()
@@ -134,6 +148,7 @@ export function DecisionsPage(): React.JSX.Element {
     {
       key: 'decision',
       header: 'Decision',
+      getSortValue: (decision) => decision.body,
       render: (decision) => (
         <>
           <div className="font-medium text-ink">{decision.body}</div>
@@ -143,14 +158,33 @@ export function DecisionsPage(): React.JSX.Element {
         </>
       ),
     },
+    {
+      key: 'rationale',
+      header: 'Rationale',
+      getSortValue: (decision) => decision.rationale,
+      render: (decision) =>
+        decision.rationale === null ? (
+          '—'
+        ) : (
+          <span className="text-ink-muted">{decision.rationale}</span>
+        ),
+    },
     {
       key: 'target',
       header: 'Linked to',
+      getSortValue: (decision) => directory.nameFor(decision) ?? TARGET_LABELS[decision.targetType],
       render: (decision) => <LinkedTo decision={decision} name={directory.nameFor(decision)} />,
     },
+    {
+      key: 'targetType',
+      header: 'Type',
+      getSortValue: (decision) => TARGET_LABELS[decision.targetType],
+      render: (decision) => TARGET_LABELS[decision.targetType],
+    },
     {
       key: 'decided',
       header: 'Decided',
+      sortKey: 'decided_at',
       render: (decision) => (
         <span className="text-ink-muted">{formatDate(decision.decidedAt, timezone)}</span>
       ),
@@ -158,6 +192,7 @@ export function DecisionsPage(): React.JSX.Element {
     {
       key: 'due',
       header: 'By',
+      getSortValue: (decision) => decision.dueAt,
       render: (decision) => (
         <span className="text-ink-muted">
           {decision.dueAt === null ? '—' : formatDate(decision.dueAt, timezone)}
@@ -167,17 +202,44 @@ export function DecisionsPage(): React.JSX.Element {
     {
       key: 'owner',
       header: 'Owner',
+      getSortValue: (decision) =>
+        decision.ownerId === null ? null : (members.nameById.get(decision.ownerId) ?? null),
       render: (decision) => (
         <span className="text-ink-muted">
           {decision.ownerId === null ? '—' : (members.nameById.get(decision.ownerId) ?? '—')}
         </span>
       ),
     },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (decision) => formatDate(decision.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (decision) => formatDate(decision.updatedAt, timezone),
+    },
   ]
 
+  const supportedKeys = columns.map((column) => column.key)
+  const listView = useListView('decisions', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   return (
     <div className="animate-fade-in">
-      <PageHeader title="Decisions" />
+      <PageHeader
+        title="Decisions"
+        actions={
+          <ColumnPicker
+            options={pickerOptions}
+            visibleKeys={listView.visibleKeys}
+            onChange={listView.setVisibleKeys}
+          />
+        }
+      />
       <FilterBar value={term} onChange={setTerm} placeholder="Filter decisions…" />
 
       {decisions.error !== null ? (
@@ -186,11 +248,15 @@ export function DecisionsPage(): React.JSX.Element {
         <LoadingPanel label="Loading decisions…" />
       ) : (
         <>
+          <Paginator list={decisions} placement="top" />
           <DataTable
             columns={columns}
             rows={decisions.records}
             getRowId={(decision) => decision.id}
             emptyMessage="No decisions match"
+            sort={sort}
+            onSortChange={setSort}
+            visibleColumnKeys={listView.visibleKeys}
           />
           {!directory.isComplete && (
             <p className="mt-2 text-[11px] text-ink-faint">
@@ -198,16 +264,7 @@ export function DecisionsPage(): React.JSX.Element {
               record type.
             </p>
           )}
-          {decisions.hasMore && (
-            <button
-              type="button"
-              onClick={decisions.loadMore}
-              disabled={decisions.isLoadingMore}
-              className="mt-3 rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink transition hover:border-border-strong hover:bg-surface-sunken disabled:opacity-50"
-            >
-              {decisions.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
+          <Paginator list={decisions} />
         </>
       )}
     </div>