@kelpie/ui 0.6.0 → 0.8.0

package/src/pages/CompanyDetail.tsx

@@ -30,6 +30,7 @@ import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
 import { InlineEdit } from '../components/InlineEdit.tsx'
+import { ListsPanel } from '../components/ListsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { RelatedPlanAttention } from '../components/PlanAttention.tsx'
 import { ErrorPanel, LoadingPanel, NotFoundPanel } from '../components/QueryState.tsx'
@@ -45,7 +46,7 @@ import { toOptions, toTags } from './fields.ts'
 /**
  * One company.
  *
- * Overview, Activity, Notes and Decisions render today. As with People, the
+ * Overview, Activity, Notes, Decisions, Lists and People render today. The
  * tabs for Deals, Opportunities, Partnerships and Raises wait for their
  * endpoints. A UI module can add its own through the `company` record-tab slot.
  */
@@ -85,8 +86,10 @@ export function CompanyDetail(): React.JSX.Element {
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
     { id: 'activity', label: 'Activity' },
+    { id: 'people', label: 'People' },
     { 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'
@@ -129,15 +132,16 @@ export function CompanyDetail(): React.JSX.Element {
           >
             {active === 'overview' && <CompanyOverview 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} />}
             {moduleTab?.render({ objectType: 'company', recordId: record.id })}
           </RecordTabs>
         </div>
 
         <aside className="space-y-4 text-[12px] lg:sticky lg:top-6">
           <CompanySidebar company={record} />
-          <CompanyPeople company={record} />
         </aside>
       </div>
     </div>
@@ -380,7 +384,7 @@ function CompanyPeople({ company }: { readonly company: Company }): React.JSX.El
   function submit(event: FormEvent): void {
     event.preventDefault()
 
-    if (personId.length === 0 || title.trim().length === 0) {
+    if (personId.length === 0) {
       return
     }
 
@@ -389,73 +393,28 @@ function CompanyPeople({ company }: { readonly company: Company }): React.JSX.El
   }
 
   return (
-    <section className="rounded-md border border-border">
-      <div className="border-b border-border px-3.5 py-2.5">
-        <SectionHeader
-          title="People"
-          onAdd={() => {
-            setAdding((current) => !current)
-          }}
-          addLabel="Add person"
-          compact
-        />
-      </div>
+    <section>
+      <SectionHeader
+        title="People"
+        onAdd={() => {
+          setAdding((current) => !current)
+        }}
+        addLabel="Add person"
+      />
 
       {createPosition.error !== null && (
-        <div className="px-3.5 py-2">
+        <div className="mb-3">
           <ErrorPanel error={createPosition.error} />
         </div>
       )}
       {deletePosition.error !== null && (
-        <div className="px-3.5 py-2">
+        <div className="mb-3">
           <ErrorPanel error={deletePosition.error} />
         </div>
       )}
 
-      <ul className="divide-y divide-border">
-        {positions.isLoading && (
-          <li className="px-3.5 py-4 text-[12px] text-ink-faint">Loading people…</li>
-        )}
-        {!positions.isLoading && positions.records.length === 0 && !adding && (
-          <li className="px-3.5 py-4 text-[12px] text-ink-faint">No people yet.</li>
-        )}
-        {positions.records.map((position) => {
-          const person = personById.get(position.personId)
-
-          return (
-            <li key={position.id} className="space-y-1 px-3.5 py-2.5">
-              <div className="flex items-start justify-between gap-2">
-                <Link
-                  to={`/people/${position.personId}`}
-                  className="text-[13px] font-medium text-ink hover:text-accent"
-                >
-                  {person?.name ?? 'Unknown'}
-                </Link>
-                <button
-                  type="button"
-                  onClick={() => {
-                    deletePosition.run(position.id)
-                  }}
-                  className="text-[11px] font-medium text-danger hover:underline"
-                >
-                  Remove
-                </button>
-              </div>
-              <InlineEdit
-                value={position.title}
-                onChange={(next) => {
-                  updateTitle.run({ id: position.id, changes: { title: next } })
-                }}
-                displayClassName="not-italic text-[12px]"
-                emptyLabel="Add position title…"
-              />
-            </li>
-          )
-        })}
-      </ul>
-
       {adding && (
-        <form onSubmit={submit} className="space-y-2 border-t border-border bg-surface px-3.5 py-3">
+        <form onSubmit={submit} className="mb-4 space-y-2 rounded-md border border-border bg-surface p-3">
           <EntitySearch
             options={searchable.records
               .filter((person) => !held.has(person.id))
@@ -476,9 +435,8 @@ function CompanyPeople({ company }: { readonly company: Company }): React.JSX.El
             onChange={(event) => {
               setTitle(event.target.value)
             }}
-            placeholder="Position title"
-            className="w-full rounded-md border border-border bg-surface-raised px-2 py-1.5 text-[12px] outline-none focus:border-accent"
-            required
+            placeholder="Position title (optional)"
+            className="w-full rounded-md border border-border bg-surface-raised px-2 py-1.5 text-[13px] outline-none focus:border-accent"
           />
           <div className="flex justify-end gap-2">
             <button
@@ -497,6 +455,48 @@ function CompanyPeople({ company }: { readonly company: Company }): React.JSX.El
           </div>
         </form>
       )}
+
+      {positions.isLoading && <p className="text-[13px] text-ink-faint">Loading people…</p>}
+
+      {!positions.isLoading && positions.records.length === 0 && !adding ? (
+        <p className="text-[13px] text-ink-faint">No people yet.</p>
+      ) : (
+        <ul className="divide-y divide-border rounded-md border border-border">
+          {positions.records.map((position) => {
+            const person = personById.get(position.personId)
+
+            return (
+              <li key={position.id} className="space-y-1 px-3.5 py-3">
+                <div className="flex items-start justify-between gap-2">
+                  <Link
+                    to={`/people/${position.personId}`}
+                    className="text-[13px] font-medium text-ink hover:text-accent"
+                  >
+                    {person?.name ?? 'Unknown'}
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      deletePosition.run(position.id)
+                    }}
+                    className="text-[11px] font-medium text-danger hover:underline"
+                  >
+                    Remove
+                  </button>
+                </div>
+                <InlineEdit
+                  value={position.title}
+                  onChange={(next) => {
+                    updateTitle.run({ id: position.id, changes: { title: next } })
+                  }}
+                  displayClassName="not-italic text-[12px] text-ink-muted"
+                  emptyLabel="Add position title…"
+                />
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </section>
   )
 }

package/src/pages/DealDetail.tsx

@@ -19,6 +19,7 @@ import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
 import { InlineEdit } from '../components/InlineEdit.tsx'
+import { ListsPanel } from '../components/ListsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { PlanAttention } from '../components/PlanAttention.tsx'
 import { PlanPanel } from '../components/PlanPanel.tsx'
@@ -73,6 +74,7 @@ export function DealDetail(): React.JSX.Element {
     { id: 'activity', label: 'Activity' },
     { 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'
@@ -113,6 +115,7 @@ export function DealDetail(): React.JSX.Element {
             {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} />}
             {moduleTab?.render({ objectType: 'deal', recordId: record.id })}
           </RecordTabs>
         </div>

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>