@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/FormsPage.tsx

@@ -2,13 +2,19 @@ import type { Form } from '@kelpie/schemas'
 import { useState } from 'react'
 import { useNavigate } from 'react-router'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useCreateForm, useForms } from '../api/resources/forms.ts'
 import { Chip } from '../components/Chip.tsx'
+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 { SegmentedControl } from '../components/SegmentedControl.tsx'
+import { formatDate } from '../lib/dates.ts'
+import { useListView } from '../lib/listView.ts'
+import { serverSortOnly } from '../lib/sort.ts'
 import { CONTACT_FORM_FIELDS } from './forms/template.ts'
 
 /**
@@ -31,6 +37,10 @@ const STATUS_OPTIONS = [
   { id: 'paused' as const, label: 'Paused' },
 ]
 
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'status', 'fields', 'deal']
+
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
 export function FormsPage(): React.JSX.Element {
   const [term, setTerm] = useState('')
   const [status, setStatus] = useState<StatusFilter>('all')
@@ -38,10 +48,11 @@ export function FormsPage(): React.JSX.Element {
   const navigate = useNavigate()
   const hasFilter = term.trim().length > 0 || status !== 'all'
   const createForm = useCreateForm()
+  const timezone = useTimezone()
   const forms = useForms({
     term: term.trim().length > 0 ? term.trim() : undefined,
     ...(status === 'all' ? {} : { status }),
-    sort,
+    sort: serverSortOnly(sort, SERVER_SORT_KEYS),
   })
 
   /**
@@ -70,10 +81,17 @@ export function FormsPage(): React.JSX.Element {
         </>
       ),
     },
+    {
+      key: 'description',
+      header: 'Description',
+      getSortValue: (form) => form.description,
+      render: (form) => form.description ?? '—',
+    },
     {
       key: 'status',
       header: 'Status',
       className: 'w-28',
+      getSortValue: (form) => form.status,
       render: (form) => (
         <Chip tone={form.status === 'active' ? 'success' : 'neutral'}>{form.status}</Chip>
       ),
@@ -82,12 +100,14 @@ export function FormsPage(): React.JSX.Element {
       key: 'fields',
       header: 'Fields',
       className: 'w-20',
+      getSortValue: (form) => form.fields.length,
       render: (form) => <span className="font-mono text-[12px]">{form.fields.length}</span>,
     },
     {
       key: 'deal',
       header: 'Deal',
       className: 'w-32',
+      getSortValue: (form) => form.createDeal,
       render: (form) =>
         form.createDeal ? (
           <Chip tone="accent">Creates deal</Chip>
@@ -95,8 +115,52 @@ export function FormsPage(): React.JSX.Element {
           <span className="text-ink-faint">—</span>
         ),
     },
+    {
+      key: 'dealNameTemplate',
+      header: 'Deal name template',
+      getSortValue: (form) => form.dealNameTemplate,
+      render: (form) =>
+        form.dealNameTemplate === null ? (
+          '—'
+        ) : (
+          <span className="font-mono text-[12px] text-ink-muted">{form.dealNameTemplate}</span>
+        ),
+    },
+    {
+      key: 'thankYouMessage',
+      header: 'Thank-you',
+      getSortValue: (form) => form.thankYouMessage || null,
+      render: (form) =>
+        form.thankYouMessage.length === 0 ? '—' : (
+          <span className="text-ink-muted">{form.thankYouMessage}</span>
+        ),
+    },
+    {
+      key: 'publicKey',
+      header: 'Public key',
+      getSortValue: (form) => form.publicKey,
+      render: (form) => (
+        <span className="font-mono text-[12px] text-ink-muted">{form.publicKey}</span>
+      ),
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (form) => formatDate(form.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (form) => formatDate(form.updatedAt, timezone),
+    },
   ]
 
+  const supportedKeys = columns.map((column) => column.key)
+  const listView = useListView('forms', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   return (
     <div className="animate-fade-in">
       <PageHeader
@@ -105,12 +169,19 @@ export function FormsPage(): React.JSX.Element {
         onAdd={addForm}
         addLabel="New form"
         actions={
-          <SegmentedControl
-            value={status}
-            onChange={setStatus}
-            options={STATUS_OPTIONS}
-            ariaLabel="Filter by status"
-          />
+          <>
+            <SegmentedControl
+              value={status}
+              onChange={setStatus}
+              options={STATUS_OPTIONS}
+              ariaLabel="Filter by status"
+            />
+            <ColumnPicker
+              options={pickerOptions}
+              visibleKeys={listView.visibleKeys}
+              onChange={listView.setVisibleKeys}
+            />
+          </>
         }
       />
       <FilterBar value={term} onChange={setTerm} placeholder="Filter forms…" />
@@ -123,6 +194,7 @@ export function FormsPage(): React.JSX.Element {
         <LoadingPanel label="Loading forms…" />
       ) : (
         <>
+          <Paginator list={forms} placement="top" />
           <DataTable
             columns={columns}
             rows={forms.records}
@@ -133,17 +205,9 @@ export function FormsPage(): React.JSX.Element {
             emptyAction={hasFilter ? undefined : { label: 'New form', onClick: addForm }}
             sort={sort}
             onSortChange={setSort}
+            visibleColumnKeys={listView.visibleKeys}
           />
-          {forms.hasMore && (
-            <button
-              type="button"
-              onClick={forms.loadMore}
-              disabled={forms.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"
-            >
-              {forms.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
+          <Paginator list={forms} />
         </>
       )}
     </div>

package/src/pages/FundraisingPage.tsx

@@ -1,5 +1,4 @@
 import type { PipelineStage, Raise } 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 { useMembers } from '../api/resources/members.ts'
 import { usePipelineStages } from '../api/resources/pipelineStages.ts'
 import { MAX_PAGE_SIZE, usePlanItems } from '../api/resources/planItems.ts'
 import { useCreateRaise, useRaises, useUpdateRaise } from '../api/resources/raises.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 Fundraising board: one raise per firm per round, grouped by stage. The
@@ -29,6 +33,34 @@ 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',
+  'company',
+  'stage',
+  'check',
+  'currency',
+  'thesisFit',
+  'passReason',
+  'nextPlan',
+  'owner',
+  'close',
+  '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>> = {
   closed: 'success',
@@ -43,19 +75,33 @@ function stageTone(stage: PipelineStage): ChipTone {
   return STAGE_TONES[stage.slug] ?? 'neutral'
 }
 
+const DEFAULT_VISIBLE_KEYS: readonly string[] = [
+  'name',
+  'company',
+  'check',
+  'nextPlan',
+  'owner',
+  'close',
+]
+
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
 export function FundraisingPage(): 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 listView = useListView('raises', 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('raise')
-  const raises = useRaises({ sort })
+  const raises = useRaises({ sort: serverSortOnly(sort, SERVER_SORT_KEYS) })
   const companies = useCompanies({ limit: 200 })
   const members = useMembers()
   const createRaise = useCreateRaise()
   const updateRaise = useUpdateRaise()
+  const timezone = useTimezone()
 
   const allStages = [...stages.records].sort((a, b) => a.sortOrder - b.sortOrder)
   const visibleStages = scope === 'open' ? allStages.filter((stage) => stage.open) : allStages
@@ -76,7 +122,7 @@ export function FundraisingPage(): React.JSX.Element {
     { enabled: askedIds.length > 0 },
   )
   const nextPlanByRaise = nextOpenByTarget(planItems.records)
-  const plansTruncated = visibleRaises.length > MAX_PAGE_SIZE || planItems.hasMore
+  const plansTruncated = visibleRaises.length > MAX_PAGE_SIZE || planItems.hasNext
 
   const companyNameById = new Map(companies.records.map((company) => [company.id, company.name]))
 
@@ -95,6 +141,8 @@ export function FundraisingPage(): React.JSX.Element {
     await navigate(`/fundraising/${raise.id}`)
   }
 
+  const stageLabelById = new Map(allStages.map((stage) => [stage.id, stage.label]))
+
   const columns: readonly Column<Raise>[] = [
     {
       key: 'name',
@@ -105,12 +153,20 @@ export function FundraisingPage(): React.JSX.Element {
     {
       key: 'company',
       header: 'Firm',
+      getSortValue: (raise) => companyNameById.get(raise.companyId) ?? null,
       render: (raise) => companyNameById.get(raise.companyId) ?? '—',
     },
+    {
+      key: 'stage',
+      header: 'Stage',
+      getSortValue: (raise) => stageLabelById.get(raise.stageId) ?? null,
+      render: (raise) => stageLabelById.get(raise.stageId) ?? '—',
+    },
     {
       key: 'check',
       header: 'Check',
       className: 'w-28',
+      getSortValue: (raise) => raise.checkSizeCents,
       render: (raise) =>
         raise.checkSizeCents === null ? (
           '—'
@@ -120,9 +176,34 @@ export function FundraisingPage(): React.JSX.Element {
           </span>
         ),
     },
+    {
+      key: 'currency',
+      header: 'Currency',
+      getSortValue: (raise) => raise.currency,
+      render: (raise) => raise.currency ?? '—',
+    },
+    {
+      key: 'thesisFit',
+      header: 'Thesis fit',
+      getSortValue: (raise) => raise.thesisFit || null,
+      render: (raise) =>
+        raise.thesisFit.length === 0 ? '—' : (
+          <span className="text-ink-muted">{raise.thesisFit}</span>
+        ),
+    },
+    {
+      key: 'passReason',
+      header: 'Pass reason',
+      getSortValue: (raise) => raise.passReason,
+      render: (raise) =>
+        raise.passReason === null ? '—' : (
+          <span className="text-ink-muted">{raise.passReason}</span>
+        ),
+    },
     {
       key: 'nextPlan',
       header: 'Next plan',
+      getSortValue: (raise) => nextPlanByRaise.get(raise.id)?.date ?? null,
       render: (raise) => {
         const next = nextPlanByRaise.get(raise.id)
 
@@ -143,6 +224,8 @@ export function FundraisingPage(): React.JSX.Element {
     {
       key: 'owner',
       header: 'Owner',
+      getSortValue: (raise) =>
+        raise.ownerId === null ? null : (members.nameById.get(raise.ownerId) ?? 'Unknown'),
       render: (raise) =>
         raise.ownerId === null ? '—' : (members.nameById.get(raise.ownerId) ?? 'Unknown'),
     },
@@ -150,14 +233,51 @@ export function FundraisingPage(): React.JSX.Element {
       key: 'close',
       header: 'Close',
       className: 'w-28',
+      getSortValue: (raise) => raise.expectedClose,
       render: (raise) => (
         <span className="font-mono text-[12px] text-ink-muted">
           {raise.expectedClose === null ? '—' : formatDay(raise.expectedClose)}
         </span>
       ),
     },
+    {
+      key: 'tags',
+      header: 'Tags',
+      getSortValue: (raise) => raise.tags.join(', ') || null,
+      render: (raise) =>
+        raise.tags.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {raise.tags.map((tag) => (
+              <Chip key={tag}>
+                <span className="text-[10px]">{tag}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'summary',
+      header: 'Summary',
+      getSortValue: (raise) => raise.summary || null,
+      render: (raise) =>
+        raise.summary.length === 0 ? '—' : <span className="text-ink-muted">{raise.summary}</span>,
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (raise) => formatDate(raise.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (raise) => formatDate(raise.updatedAt, timezone),
+    },
   ]
 
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   const stageGroups: readonly DataTableGroup<Raise>[] = visibleStages.map((stage) => ({
     id: stage.id,
     label: <Chip tone={stageTone(stage)}>{stage.label}</Chip>,
@@ -221,7 +341,9 @@ export function FundraisingPage(): 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' },
@@ -231,7 +353,9 @@ export function FundraisingPage(): 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' },
@@ -241,12 +365,21 @@ export function FundraisingPage(): 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}
+              />
+            )}
           </>
         }
       />
@@ -269,6 +402,7 @@ export function FundraisingPage(): React.JSX.Element {
         <LoadingPanel label="Loading raises…" />
       ) : (
         <>
+          {view === 'list' && <Paginator list={raises} placement="top" />}
           {view === 'columns' ? (
             <KanbanBoard
               stages={visibleStages.map((stage) => ({ id: stage.id, label: stage.label }))}
@@ -313,13 +447,16 @@ export function FundraisingPage(): React.JSX.Element {
                     ? {
                         label: 'Show all raises',
                         onClick: () => {
-                          setScope('all')
+                          listView.setScope('all')
                         },
                       }
                     : undefined
               }
               sort={sort}
-              onSortChange={setSort}
+              onSortChange={(next) => {
+                listView.setSort(next)
+              }}
+              visibleColumnKeys={listView.visibleKeys}
             />
           )}
           {updateRaise.error !== null && (
@@ -327,17 +464,8 @@ export function FundraisingPage(): React.JSX.Element {
               <ErrorPanel error={updateRaise.error} />
             </div>
           )}
-          {raises.hasMore && (
-            <button
-              type="button"
-              onClick={raises.loadMore}
-              disabled={raises.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"
-            >
-              {raises.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
-          {companies.hasMore && (
+          {view === 'list' && <Paginator list={raises} />}
+          {companies.hasNext && (
             <p className="mt-2 text-[11px] text-ink-faint">
               More companies exist than one page returns, so some firm names may show as “—”.
             </p>

package/src/pages/HiringPage.tsx

@@ -6,13 +6,21 @@ import { useNavigate } from 'react-router'
 import { useTimezone } from '../api/resources/account.ts'
 import { useCreateRole, useRoles } from '../api/resources/roles.ts'
 import { Chip } from '../components/Chip.tsx'
+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 { useListView } from '../lib/listView.ts'
+import { serverSortOnly } from '../lib/sort.ts'
 import { useRoleCandidateCounts } from './hiringDirectory.ts'
 
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['title', 'status', 'candidates', 'created']
+
+const SERVER_SORT_KEYS: readonly string[] = ['title', 'created_at', 'updated_at']
+
 /**
  * The Hiring list: every opening, open or closed.
  *
@@ -24,8 +32,12 @@ export function HiringPage(): React.JSX.Element {
   const [term, setTerm] = useState('')
   const [adding, setAdding] = useState(false)
   const [title, setTitle] = useState('')
+  const [sort, setSort] = useState<string | undefined>(undefined)
   const navigate = useNavigate()
-  const roles = useRoles({ term: term.trim().length > 0 ? term.trim() : undefined })
+  const roles = useRoles({
+    term: term.trim().length > 0 ? term.trim() : undefined,
+    sort: serverSortOnly(sort, SERVER_SORT_KEYS),
+  })
   const counts = useRoleCandidateCounts(roles.records.map((role) => role.id))
   const createRole = useCreateRole()
   const timezone = useTimezone()
@@ -54,11 +66,13 @@ export function HiringPage(): React.JSX.Element {
     {
       key: 'title',
       header: 'Role',
+      sortKey: 'title',
       render: (role) => <span className="font-medium text-ink">{role.title}</span>,
     },
     {
       key: 'status',
       header: 'Status',
+      getSortValue: (role) => role.status,
       render: (role) => (
         <Chip tone={role.status === 'open' ? 'accent' : 'neutral'}>
           {role.status === 'open' ? 'Open' : 'Closed'}
@@ -69,6 +83,7 @@ export function HiringPage(): React.JSX.Element {
       key: 'candidates',
       header: 'Candidates',
       className: 'w-28',
+      getSortValue: (role) => (counts.isLoading ? null : counts.countFor(role.id)),
       render: (role) => (
         <span className="font-mono text-[12px]">
           {counts.isLoading ? '—' : counts.countFor(role.id)}
@@ -78,10 +93,21 @@ export function HiringPage(): React.JSX.Element {
     {
       key: 'created',
       header: 'Created',
+      sortKey: 'created_at',
       render: (role) => formatDate(role.createdAt, timezone),
     },
+    {
+      key: 'updated',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (role) => formatDate(role.updatedAt, timezone),
+    },
   ]
 
+  const supportedKeys = columns.map((column) => column.key)
+  const listView = useListView('roles', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   return (
     <div className="animate-fade-in">
       <PageHeader
@@ -90,6 +116,13 @@ export function HiringPage(): React.JSX.Element {
           setAdding((current) => !current)
         }}
         addLabel="Add role"
+        actions={
+          <ColumnPicker
+            options={pickerOptions}
+            visibleKeys={listView.visibleKeys}
+            onChange={listView.setVisibleKeys}
+          />
+        }
       />
 
       {adding && (
@@ -140,6 +173,7 @@ export function HiringPage(): React.JSX.Element {
         <LoadingPanel label="Loading roles…" />
       ) : (
         <>
+          <Paginator list={roles} placement="top" />
           <DataTable
             columns={columns}
             rows={roles.records}
@@ -148,22 +182,16 @@ export function HiringPage(): React.JSX.Element {
               void navigate(`/hiring/${role.id}`)
             }}
             emptyMessage="No roles yet"
+            sort={sort}
+            onSortChange={setSort}
+            visibleColumnKeys={listView.visibleKeys}
           />
           {!counts.isComplete && !counts.isLoading && (
             <p className="mt-2 text-[11px] text-ink-faint">
               These roles hold more candidates than one page returns, so some counts read low.
             </p>
           )}
-          {roles.hasMore && (
-            <button
-              type="button"
-              onClick={roles.loadMore}
-              disabled={roles.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"
-            >
-              {roles.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
+          <Paginator list={roles} />
         </>
       )}
     </div>