@kelpie/ui 0.6.0 → 0.8.0

package/src/pages/PartnershipsPage.tsx

@@ -1,5 +1,4 @@
 import type { Partnership, PipelineStage } from '@kelpie/schemas'
-import { useState } from 'react'
 import { Link, useNavigate } from 'react-router'
 
 import { useCompanies } from '../api/resources/companies.ts'
@@ -11,16 +10,21 @@ import {
 } from '../api/resources/partnerships.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 { DUE_BUCKETS, byDateThenTitle, dueBucketFor, nextOpenByTarget } from '../lib/plan.ts'
+import { serverSortOnly } from '../lib/sort.ts'
 
 /**
  * The Partnerships board: ongoing two-way relationships, grouped by status. The
@@ -32,6 +36,33 @@ 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',
+  'kind',
+  'nextPlan',
+  'owner',
+  'next',
+  'goals',
+  'successLooksLike',
+  '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>> = {
   active: 'success',
@@ -43,19 +74,33 @@ function stageTone(stage: PipelineStage): ChipTone {
   return STAGE_TONES[stage.slug] ?? 'neutral'
 }
 
+const DEFAULT_VISIBLE_KEYS: readonly string[] = [
+  'name',
+  'company',
+  'kind',
+  'nextPlan',
+  'owner',
+  'next',
+]
+
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
 export function PartnershipsPage(): 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('partnerships', 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('partnership')
-  const partnerships = usePartnerships({ sort })
+  const partnerships = usePartnerships({ sort: serverSortOnly(sort, SERVER_SORT_KEYS) })
   const companies = useCompanies({ limit: 200 })
   const members = useMembers()
   const createPartnership = useCreatePartnership()
   const updatePartnership = useUpdatePartnership()
+  const timezone = useTimezone()
 
   const allStages = [...stages.records].sort((a, b) => a.sortOrder - b.sortOrder)
   const visibleStages = scope === 'open' ? allStages.filter((stage) => stage.open) : allStages
@@ -78,7 +123,7 @@ export function PartnershipsPage(): React.JSX.Element {
     { enabled: askedIds.length > 0 },
   )
   const nextPlanByPartnership = nextOpenByTarget(planItems.records)
-  const plansTruncated = visiblePartnerships.length > MAX_PAGE_SIZE || planItems.hasMore
+  const plansTruncated = visiblePartnerships.length > MAX_PAGE_SIZE || planItems.hasNext
 
   const companyNameById = new Map(companies.records.map((company) => [company.id, company.name]))
 
@@ -97,6 +142,8 @@ export function PartnershipsPage(): React.JSX.Element {
     await navigate(`/partnerships/${partnership.id}`)
   }
 
+  const stageLabelById = new Map(allStages.map((stage) => [stage.id, stage.label]))
+
   const columns: readonly Column<Partnership>[] = [
     {
       key: 'name',
@@ -107,16 +154,25 @@ export function PartnershipsPage(): React.JSX.Element {
     {
       key: 'company',
       header: 'Company',
+      getSortValue: (partnership) => companyNameById.get(partnership.companyId) ?? null,
       render: (partnership) => companyNameById.get(partnership.companyId) ?? '—',
     },
+    {
+      key: 'stage',
+      header: 'Stage',
+      getSortValue: (partnership) => stageLabelById.get(partnership.stageId) ?? null,
+      render: (partnership) => stageLabelById.get(partnership.stageId) ?? '—',
+    },
     {
       key: 'kind',
       header: 'Kind',
+      getSortValue: (partnership) => partnership.kind || null,
       render: (partnership) => (partnership.kind.length > 0 ? partnership.kind : '—'),
     },
     {
       key: 'nextPlan',
       header: 'Next plan',
+      getSortValue: (partnership) => nextPlanByPartnership.get(partnership.id)?.date ?? null,
       render: (partnership) => {
         const next = nextPlanByPartnership.get(partnership.id)
 
@@ -137,6 +193,10 @@ export function PartnershipsPage(): React.JSX.Element {
     {
       key: 'owner',
       header: 'Owner',
+      getSortValue: (partnership) =>
+        partnership.ownerId === null
+          ? null
+          : (members.nameById.get(partnership.ownerId) ?? 'Unknown'),
       render: (partnership) =>
         partnership.ownerId === null
           ? '—'
@@ -146,14 +206,71 @@ export function PartnershipsPage(): React.JSX.Element {
       key: 'next',
       header: 'Next touch',
       className: 'w-28',
+      getSortValue: (partnership) => partnership.nextTouchpoint,
       render: (partnership) => (
         <span className="font-mono text-[12px] text-ink-muted">
           {partnership.nextTouchpoint === null ? '—' : formatDay(partnership.nextTouchpoint)}
         </span>
       ),
     },
+    {
+      key: 'goals',
+      header: 'Goals',
+      getSortValue: (partnership) => partnership.goals || null,
+      render: (partnership) =>
+        partnership.goals.length === 0 ? '—' : (
+          <span className="text-ink-muted">{partnership.goals}</span>
+        ),
+    },
+    {
+      key: 'successLooksLike',
+      header: 'Success looks like',
+      getSortValue: (partnership) => partnership.successLooksLike || null,
+      render: (partnership) =>
+        partnership.successLooksLike.length === 0 ? '—' : (
+          <span className="text-ink-muted">{partnership.successLooksLike}</span>
+        ),
+    },
+    {
+      key: 'tags',
+      header: 'Tags',
+      getSortValue: (partnership) => partnership.tags.join(', ') || null,
+      render: (partnership) =>
+        partnership.tags.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {partnership.tags.map((tag) => (
+              <Chip key={tag}>
+                <span className="text-[10px]">{tag}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'summary',
+      header: 'Summary',
+      getSortValue: (partnership) => partnership.summary || null,
+      render: (partnership) =>
+        partnership.summary.length === 0 ? '—' : (
+          <span className="text-ink-muted">{partnership.summary}</span>
+        ),
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (partnership) => formatDate(partnership.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (partnership) => formatDate(partnership.updatedAt, timezone),
+    },
   ]
 
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   const stageGroups: readonly DataTableGroup<Partnership>[] = visibleStages.map((stage) => ({
     id: stage.id,
     label: <Chip tone={stageTone(stage)}>{stage.label}</Chip>,
@@ -217,7 +334,9 @@ export function PartnershipsPage(): React.JSX.Element {
             <SegmentedControl
               ariaLabel="Status scope"
               value={scope}
-              onChange={setScope}
+              onChange={(next) => {
+                listView.setScope(next)
+              }}
               options={[
                 { id: 'open', label: 'Open' },
                 { id: 'all', label: 'All' },
@@ -227,7 +346,9 @@ export function PartnershipsPage(): React.JSX.Element {
               <SegmentedControl
                 ariaLabel="Group the list"
                 value={grouping}
-                onChange={setGrouping}
+                onChange={(next) => {
+                  listView.setGrouping(next)
+                }}
                 options={[
                   { id: 'stage', label: 'By status' },
                   { id: 'due', label: 'By due' },
@@ -237,12 +358,21 @@ export function PartnershipsPage(): 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}
+              />
+            )}
           </>
         }
       />
@@ -265,6 +395,7 @@ export function PartnershipsPage(): React.JSX.Element {
         <LoadingPanel label="Loading partnerships…" />
       ) : (
         <>
+          {view === 'list' && <Paginator list={partnerships} placement="top" />}
           {view === 'columns' ? (
             <KanbanBoard
               stages={visibleStages.map((stage) => ({ id: stage.id, label: stage.label }))}
@@ -311,13 +442,16 @@ export function PartnershipsPage(): React.JSX.Element {
                     ? {
                         label: 'Show all partnerships',
                         onClick: () => {
-                          setScope('all')
+                          listView.setScope('all')
                         },
                       }
                     : undefined
               }
               sort={sort}
-              onSortChange={setSort}
+              onSortChange={(next) => {
+                listView.setSort(next)
+              }}
+              visibleColumnKeys={listView.visibleKeys}
             />
           )}
           {updatePartnership.error !== null && (
@@ -325,17 +459,8 @@ export function PartnershipsPage(): React.JSX.Element {
               <ErrorPanel error={updatePartnership.error} />
             </div>
           )}
-          {partnerships.hasMore && (
-            <button
-              type="button"
-              onClick={partnerships.loadMore}
-              disabled={partnerships.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"
-            >
-              {partnerships.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
-          {companies.hasMore && (
+          {view === 'list' && <Paginator list={partnerships} />}
+          {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/PeoplePage.tsx

@@ -2,14 +2,33 @@ import type { Person } from '@kelpie/schemas'
 import { useState } from 'react'
 import { useNavigate } from 'react-router'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useCreatePerson, usePeople } from '../api/resources/people.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 { usePeopleDirectory } from './positionDirectory.ts'
 
+/**
+ * Column catalog for People. Every field the wire schema carries appears here,
+ * plus the two joined-in columns (position title, company names) computed from
+ * the position directory. `sortKey` names the server field; `getSortValue`
+ * enables the DataTable's page-local sort for columns the server does not
+ * index. Everything not in `DEFAULT_VISIBLE_KEYS` starts hidden and comes back
+ * through the Columns picker.
+ */
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'email', 'phones', 'company', 'updatedAt']
+
+/** The sort fields `/v1/people` accepts. Anything else is a client-only sort. */
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
 /**
  * The People list.
  *
@@ -22,8 +41,12 @@ export function PeoplePage(): React.JSX.Element {
   const [term, setTerm] = useState('')
   const [sort, setSort] = useState<string | undefined>(undefined)
   const navigate = useNavigate()
+  const timezone = useTimezone()
   const hasFilter = term.trim().length > 0
-  const people = usePeople({ term: hasFilter ? term.trim() : undefined, sort })
+  const people = usePeople({
+    term: hasFilter ? term.trim() : undefined,
+    sort: serverSortOnly(sort, SERVER_SORT_KEYS),
+  })
   const directory = usePeopleDirectory(people.records.map((person) => person.id))
   const createPerson = useCreatePerson()
 
@@ -45,20 +68,100 @@ export function PeoplePage(): React.JSX.Element {
     {
       key: 'position',
       header: 'Position',
+      getSortValue: (person) => directory.titleFor(person.id) ?? null,
       render: (person) => directory.titleFor(person.id) ?? '—',
     },
     {
       key: 'company',
       header: 'Company',
+      getSortValue: (person) => directory.companyNamesFor(person.id).join(', ') || null,
       render: (person) => {
         const names = directory.companyNamesFor(person.id)
 
         return names.length > 0 ? names.join(', ') : '—'
       },
     },
+    {
+      key: 'email',
+      header: 'Email',
+      getSortValue: (person) => person.email,
+      render: (person) =>
+        person.email === null ? (
+          '—'
+        ) : (
+          <span className="font-mono text-[12px] text-ink-muted">{person.email}</span>
+        ),
+    },
+    {
+      key: 'phones',
+      header: 'Phones',
+      getSortValue: (person) => person.phones.join(', ') || null,
+      render: (person) =>
+        person.phones.length === 0 ? '—' : (
+          <span className="font-mono text-[12px] text-ink-muted">{person.phones.join(', ')}</span>
+        ),
+    },
+    {
+      key: 'socials',
+      header: 'Socials',
+      getSortValue: (person) => person.socialProfiles.map((entry) => entry.network).join(', ') || null,
+      render: (person) =>
+        person.socialProfiles.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {person.socialProfiles.map((entry) => (
+              <Chip key={entry.network}>
+                <span className="text-[10px]">{entry.network}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'location',
+      header: 'Location',
+      getSortValue: (person) => person.location,
+      render: (person) => person.location ?? '—',
+    },
+    {
+      key: 'timezone',
+      header: 'Timezone',
+      getSortValue: (person) => person.timezone,
+      render: (person) =>
+        person.timezone === null ? '—' : (
+          <span className="font-mono text-[12px] text-ink-muted">{person.timezone}</span>
+        ),
+    },
+    {
+      key: 'preferredChannel',
+      header: 'Preferred channel',
+      getSortValue: (person) => person.preferredChannel,
+      render: (person) => <span className="capitalize">{person.preferredChannel}</span>,
+    },
+    {
+      key: 'influence',
+      header: 'Influence',
+      getSortValue: (person) => person.influence,
+      render: (person) => <span className="capitalize">{person.influence.replace('_', ' ')}</span>,
+    },
+    {
+      key: 'relationship',
+      header: 'Relationship',
+      getSortValue: (person) => person.relationship,
+      render: (person) => <span className="capitalize">{person.relationship}</span>,
+    },
+    {
+      key: 'summary',
+      header: 'Summary',
+      getSortValue: (person) => person.summary || null,
+      render: (person) =>
+        person.summary.length === 0 ? '—' : (
+          <span className="text-ink-muted">{person.summary}</span>
+        ),
+    },
     {
       key: 'tags',
       header: 'Tags',
+      getSortValue: (person) => person.tags.join(', ') || null,
       render: (person) =>
         person.tags.length > 0 ? (
           <span className="flex flex-wrap gap-1">
@@ -72,8 +175,31 @@ export function PeoplePage(): React.JSX.Element {
           '—'
         ),
     },
+    {
+      key: 'lastContactedAt',
+      header: 'Last contacted',
+      getSortValue: (person) => person.lastContactedAt,
+      render: (person) =>
+        person.lastContactedAt === null ? '—' : formatDate(person.lastContactedAt, timezone),
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (person) => formatDate(person.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (person) => formatDate(person.updatedAt, timezone),
+    },
   ]
 
+  const supportedKeys = columns.map((column) => column.key)
+  const listView = useListView('people', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   return (
     <div className="animate-fade-in">
       <PageHeader
@@ -82,6 +208,13 @@ export function PeoplePage(): React.JSX.Element {
           void addPerson()
         }}
         addLabel="Add person"
+        actions={
+          <ColumnPicker
+            options={pickerOptions}
+            visibleKeys={listView.visibleKeys}
+            onChange={listView.setVisibleKeys}
+          />
+        }
       />
       <FilterBar
         value={term}
@@ -101,6 +234,7 @@ export function PeoplePage(): React.JSX.Element {
         <LoadingPanel label="Loading people…" />
       ) : (
         <>
+          <Paginator list={people} placement="top" />
           <DataTable
             columns={columns}
             rows={people.records}
@@ -122,22 +256,14 @@ export function PeoplePage(): React.JSX.Element {
             }
             sort={sort}
             onSortChange={setSort}
+            visibleColumnKeys={listView.visibleKeys}
           />
           {!directory.isComplete && !directory.isLoading && (
             <p className="mt-2 text-[11px] text-ink-faint">
               These people hold more positions than one page returns, so some rows may read “—”.
             </p>
           )}
-          {people.hasMore && (
-            <button
-              type="button"
-              onClick={people.loadMore}
-              disabled={people.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"
-            >
-              {people.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
+          <Paginator list={people} />
         </>
       )}
     </div>

package/src/pages/PersonDetail.tsx

@@ -27,6 +27,7 @@ import { InlineEdit } from '../components/InlineEdit.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { RelatedPlanAttention } from '../components/PlanAttention.tsx'
 import { ErrorPanel, LoadingPanel, NotFoundPanel } from '../components/QueryState.tsx'
+import { ListsPanel } from '../components/ListsPanel.tsx'
 import { RecordTabs } from '../components/RecordTabs.tsx'
 import type { RecordTabDescriptor } from '../components/RecordTabs.tsx'
 import { SectionHeader } from '../components/SectionHeader.tsx'
@@ -94,6 +95,7 @@ export function PersonDetail(): React.JSX.Element {
       : [{ id: 'hiring', label: 'Hiring', count: candidacies.records.length }]),
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
+    { id: 'lists', label: 'Lists' },
     ...moduleTabs.map((tab) => ({ id: tab.id, label: tab.label })),
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
@@ -136,6 +138,7 @@ export function PersonDetail(): React.JSX.Element {
             )}
             {active === 'notes' && <NotesPanel targetType="person" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="person" targetId={record.id} />}
+            {active === 'lists' && <ListsPanel targetType="person" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'person', recordId: record.id })}
           </RecordTabs>
         </div>
@@ -408,7 +411,7 @@ function PersonPositions({ person }: { readonly person: Person }): React.JSX.Ele
   function submit(event: FormEvent): void {
     event.preventDefault()
 
-    if (companyId.length === 0 || title.trim().length === 0) {
+    if (companyId.length === 0) {
       return
     }
 
@@ -500,9 +503,8 @@ function PersonPositions({ person }: { readonly person: Person }): React.JSX.Ele
             onChange={(event) => {
               setTitle(event.target.value)
             }}
-            placeholder="Position title"
+            placeholder="Position title (optional)"
             className="w-full rounded-md border border-border bg-surface-raised px-2 py-1.5 text-[12px] outline-none focus:border-accent"
-            required
           />
           <div className="flex justify-end gap-2">
             <button