@kelpie/ui 0.7.0 → 0.9.0

package/src/api/resources/roles.ts

@@ -35,10 +35,12 @@ export interface RoleFilters {
   /** Roles in any of these statuses. Repeats on the wire. */
   readonly statuses?: readonly RoleStatus[] | undefined
   readonly limit?: number | undefined
+  /** `field` ascending, `-field` descending. Only `title`, `created_at`, `updated_at` are sortable. */
+  readonly sort?: string | undefined
 }
 
 function roleQuery(filters: RoleFilters): QueryParameters {
-  return { q: filters.term, status: filters.statuses, limit: filters.limit }
+  return { q: filters.term, status: filters.statuses, limit: filters.limit, sort: filters.sort }
 }
 
 export function useRoles(

package/src/api/resources/sampleData.ts

@@ -0,0 +1,57 @@
+import { sampleDataCountsSchema } from '@kelpie/schemas'
+import type { SampleDataCounts } from '@kelpie/schemas'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useApiClient } from '../context.ts'
+import type { MutationResult } from '../resource.ts'
+import { asMutationResult } from './mutation.ts'
+
+/**
+ * `POST /v1/workspaces/:id/sample-data`: install the sample workspace.
+ *
+ * The workspace id arrives as a mutation argument rather than being read from
+ * the session. That lets the onboarding wizard install into the workspace it
+ * just created, before the session cache catches up with it.
+ *
+ * On success, every CRM list is invalidated because the rows this just wrote
+ * are in all of them.
+ */
+
+export interface InstallSampleDataInput {
+  readonly workspaceId: string
+}
+
+export function useInstallSampleData(): MutationResult<InstallSampleDataInput, SampleDataCounts> {
+  const client = useApiClient()
+  const cache = useQueryClient()
+  const mutation = useMutation({
+    mutationFn: ({ workspaceId }: InstallSampleDataInput) =>
+      client.post(
+        `/workspaces/${workspaceId}/sample-data`,
+        {},
+        sampleDataCountsSchema.parse,
+      ),
+    onSuccess: async () => {
+      await Promise.all(
+        [
+          'people',
+          'companies',
+          'positions',
+          'deals',
+          'plans',
+          'notes',
+          'activities',
+          'decisions',
+          'opportunities',
+          'raises',
+          'partnerships',
+          'enquiries',
+          'roles',
+          'candidates',
+        ].map((name) => cache.invalidateQueries({ queryKey: [name] })),
+      )
+    },
+  })
+
+  return asMutationResult(mutation)
+}

package/src/api/resources/webhooks.ts

@@ -14,12 +14,11 @@ import type {
   WebhookDelivery,
   WebhookInput,
 } from '@kelpie/schemas'
-import { keepPreviousData, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import type { QueryParameters } from '../client.ts'
 import { useApiClient } from '../context.ts'
-import { toError } from '../errors.ts'
-import { createResourceHooks } from '../resource.ts'
+import { createResourceHooks, usePagedList } from '../resource.ts'
 import type { MutationResult, RecordListResult, UpdateArguments } from '../resource.ts'
 import { asMutationResult } from './mutation.ts'
 
@@ -79,29 +78,14 @@ export function useWebhookDeliveries(
   webhookId: string,
   filters: WebhookDeliveryFilters = {},
 ): RecordListResult<WebhookDelivery> {
-  const client = useApiClient()
-  const result = useInfiniteQuery({
+  const query: QueryParameters = { status: filters.status }
+
+  return usePagedList<WebhookDelivery>({
     queryKey: ['webhooks', 'deliveries', webhookId, filters.status ?? 'all'],
-    queryFn: ({ pageParam }) =>
-      client.list(`/webhooks/${webhookId}/deliveries`, webhookDeliverySchema.parse, {
-        status: filters.status,
-        ...(pageParam === null ? {} : { cursor: pageParam }),
-      }),
-    initialPageParam: null as string | null,
-    getNextPageParam: (lastPage) => lastPage.nextCursor,
-    placeholderData: keepPreviousData,
+    path: `/webhooks/${webhookId}/deliveries`,
+    decode: webhookDeliverySchema.parse,
+    query,
   })
-
-  return {
-    records: result.data?.pages.flatMap((page) => page.items) ?? [],
-    isLoading: result.isPending,
-    error: toError(result.error),
-    hasMore: result.hasNextPage,
-    isLoadingMore: result.isFetchingNextPage,
-    loadMore: () => {
-      void result.fetchNextPage()
-    },
-  }
 }
 
 /**

package/src/app/KelpieApp.tsx

@@ -11,10 +11,16 @@ import { DealsPage } from '../pages/DealsPage.tsx'
 import { DecisionsPage } from '../pages/DecisionsPage.tsx'
 import { SearchPage } from '../pages/SearchPage.tsx'
 import { FormDetail } from '../pages/FormDetail.tsx'
+import { SubmissionDetail } from '../pages/forms/SubmissionDetail.tsx'
 import { FormsPage } from '../pages/FormsPage.tsx'
 import { FundraisingPage } from '../pages/FundraisingPage.tsx'
 import { HiringPage } from '../pages/HiringPage.tsx'
+import { ListDetail } from '../pages/ListDetail.tsx'
+import { ListsPage } from '../pages/ListsPage.tsx'
 import { NotFoundPage } from '../pages/NotFoundPage.tsx'
+import { EnquiriesPage } from '../pages/EnquiriesPage.tsx'
+import { EnquiryDetail } from '../pages/EnquiryDetail.tsx'
+import { EnquiryStageSettingsPage } from '../pages/EnquiryStageSettingsPage.tsx'
 import { OpportunitiesPage } from '../pages/OpportunitiesPage.tsx'
 import { OpportunityDetail } from '../pages/OpportunityDetail.tsx'
 import { OpportunityStageSettingsPage } from '../pages/OpportunityStageSettingsPage.tsx'
@@ -34,6 +40,8 @@ import { ProfilePage } from '../pages/account/ProfilePage.tsx'
 import { SecurityPage } from '../pages/account/SecurityPage.tsx'
 import { ApiKeysPage } from '../pages/admin/ApiKeysPage.tsx'
 import { DataPage } from '../pages/admin/DataPage.tsx'
+import { FieldsPage } from '../pages/admin/FieldsPage.tsx'
+import { PrivacyPage } from '../pages/admin/PrivacyPage.tsx'
 import { McpPage } from '../pages/admin/McpPage.tsx'
 import { ModulesPage } from '../pages/admin/ModulesPage.tsx'
 import { TeamPage } from '../pages/admin/TeamPage.tsx'
@@ -153,21 +161,29 @@ function AppRoutes(): React.JSX.Element {
           <Route path="opportunities" element={<OpportunitiesPage />} />
           <Route path="opportunities/settings" element={<OpportunityStageSettingsPage />} />
           <Route path="opportunities/:id" element={<OpportunityDetail />} />
+          <Route path="enquiries" element={<EnquiriesPage />} />
+          <Route path="enquiries/settings" element={<EnquiryStageSettingsPage />} />
+          <Route path="enquiries/:id" element={<EnquiryDetail />} />
           <Route path="fundraising" element={<FundraisingPage />} />
           <Route path="fundraising/settings" element={<RaiseStageSettingsPage />} />
           <Route path="fundraising/:id" element={<RaiseDetail />} />
           <Route path="partnerships" element={<PartnershipsPage />} />
           <Route path="partnerships/settings" element={<PartnershipStageSettingsPage />} />
           <Route path="partnerships/:id" element={<PartnershipDetail />} />
+          <Route path="lists" element={<ListsPage />} />
+          <Route path="lists/:id" element={<ListDetail />} />
           <Route path="planning" element={<PlanningPage />} />
           <Route path="decisions" element={<DecisionsPage />} />
           <Route path="forms" element={<FormsPage />} />
+          <Route path="forms/:id/submissions/:submissionId" element={<SubmissionDetail />} />
           <Route path="forms/:id" element={<FormDetail />} />
           {/* The optional segment is the mockup's: /handbook opens the first page. */}
           <Route path="handbook" element={<HandbookLayout />} />
           <Route path="handbook/:pageId" element={<HandbookLayout />} />
           <Route path="admin/workspace" element={<WorkspaceSettingsPage />} />
           <Route path="admin/team" element={<TeamPage />} />
+          <Route path="admin/fields" element={<FieldsPage />} />
+          <Route path="admin/privacy" element={<PrivacyPage />} />
           <Route path="admin/data" element={<DataPage />} />
           <Route path="admin/api-keys" element={<ApiKeysPage />} />
           <Route path="admin/mcp" element={<McpPage />} />

package/src/components/ActivitiesPanel.tsx

@@ -4,6 +4,7 @@ import { useTimezone } from '../api/resources/account.ts'
 import { useActivities } from '../api/resources/activities.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { formatRelativeTime, monthLabel } from '../lib/dates.ts'
+import { Paginator } from './Paginator.tsx'
 import { ErrorPanel } from './QueryState.tsx'
 import { SectionHeader } from './SectionHeader.tsx'
 
@@ -47,6 +48,7 @@ const TARGET_TYPE_LABELS: Readonly<Record<RecordTargetType, string>> = {
   opportunity: 'Opportunity',
   partnership: 'Partnership',
   raise: 'Raise',
+  enquiry: 'Enquiry',
   candidate: 'Candidate',
 }
 
@@ -118,16 +120,7 @@ export function ActivitiesPanel({
         ))}
       </div>
 
-      {activities.hasMore && (
-        <button
-          type="button"
-          onClick={activities.loadMore}
-          disabled={activities.isLoadingMore}
-          className="mt-3 rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink-muted transition hover:border-border-strong hover:text-ink"
-        >
-          {activities.isLoadingMore ? 'Loading…' : 'Load more'}
-        </button>
-      )}
+      <Paginator list={activities} />
     </section>
   )
 }

package/src/components/ColumnPicker.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * A "Columns" button that opens a popover of checkboxes for the columns a list
+ * page can show.
+ *
+ * The picker owns nothing but the popover: the selection lives with the caller
+ * (usually `useListView`) so the checked state cannot fall out of step with the
+ * table beside it. `options` is the full set the page supports, in the display
+ * order the header uses.
+ *
+ * The first column is pinned. A list with no columns at all is not a preference
+ * anyone would make on purpose, and the primary column is what makes each row
+ * identifiable — losing it turns every row into a set of anonymous fields.
+ */
+export interface ColumnPickerOption {
+  readonly key: string
+  readonly label: string
+}
+
+export interface ColumnPickerProps {
+  readonly options: readonly ColumnPickerOption[]
+  readonly visibleKeys: readonly string[]
+  readonly onChange: (keys: readonly string[]) => void
+}
+
+export function ColumnPicker({ options, visibleKeys, onChange }: ColumnPickerProps): React.JSX.Element {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const pinnedKey = options[0]?.key
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    function onPointerDown(event: MouseEvent): void {
+      if (containerRef.current?.contains(event.target as Node) !== true) {
+        setOpen(false)
+      }
+    }
+
+    function onKeyDown(event: KeyboardEvent): void {
+      if (event.key === 'Escape') {
+        setOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  function toggle(key: string, checked: boolean): void {
+    if (key === pinnedKey) {
+      return
+    }
+
+    // Preserve the order the caller passed in: the stored value is the visible
+    // set, and re-adding a column should put it back where the table draws it,
+    // not append it wherever the click landed.
+    const next = options.map((option) => option.key).filter((candidate) => {
+      if (candidate === key) {
+        return checked
+      }
+
+      return visibleKeys.includes(candidate)
+    })
+
+    onChange(next)
+  }
+
+  return (
+    <div className="relative" ref={containerRef}>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((current) => !current)
+        }}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        className="rounded-md border border-border bg-surface-raised px-3 py-1.5 text-[12px] font-medium text-ink transition hover:border-border-strong hover:bg-surface-sunken"
+      >
+        Columns
+      </button>
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 z-20 mt-1.5 max-h-80 w-56 overflow-y-auto rounded-md border border-border bg-surface-raised py-1"
+        >
+          {options.map((option) => {
+            const checked = visibleKeys.includes(option.key)
+            const pinned = option.key === pinnedKey
+
+            return (
+              <label
+                key={option.key}
+                className={[
+                  'flex items-center gap-2 px-3 py-1.5 text-[13px] text-ink',
+                  pinned ? 'cursor-default text-ink-muted' : 'cursor-pointer hover:bg-surface-sunken',
+                ].join(' ')}
+              >
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  disabled={pinned}
+                  onChange={(event) => {
+                    toggle(option.key, event.target.checked)
+                  }}
+                  className="h-3.5 w-3.5"
+                />
+                <span>{option.label}</span>
+              </label>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/CustomFieldsPanel.tsx

@@ -0,0 +1,330 @@
+import { CUSTOM_FIELD_TYPES_WITH_OPTIONS } from '@kelpie/schemas'
+import type {
+  CustomFieldDefinition,
+  CustomFieldObjectType,
+  CustomFieldType,
+  CustomFieldValue,
+  CustomFieldValues,
+} from '@kelpie/schemas'
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router'
+
+import { useCustomFields } from '../api/resources/customFields.ts'
+import { InlineEdit } from './InlineEdit.tsx'
+
+/**
+ * Renders the workspace's custom fields for one record as a full-width panel,
+ * dropped into a detail page's Fields tab.
+ *
+ * Each field patches only its own key; the server merges the sent object into
+ * stored values in the same transaction.
+ *
+ * Currency is edited in major units in the box and stored as integer cents,
+ * mirroring how DealDetail handles `value_cents`. Multi-select uses a compact
+ * checkbox list because InlineEdit only handles one string in and out.
+ *
+ * `useHasCustomFields` lets a caller decide whether to render the 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.
+ */
+
+export interface CustomFieldsPanelProps {
+  readonly objectType: CustomFieldObjectType
+  readonly values: CustomFieldValues
+  readonly onPatch: (change: Readonly<Record<string, CustomFieldValue | null>>) => void
+}
+
+const OPTIONS_TYPES: ReadonlySet<CustomFieldType> = new Set(CUSTOM_FIELD_TYPES_WITH_OPTIONS)
+
+export function CustomFieldsPanel({
+  objectType,
+  values,
+  onPatch,
+}: CustomFieldsPanelProps): React.JSX.Element {
+  const definitions = useCustomFields({ objectType, sort: 'sort_order', limit: 200 })
+
+  if (definitions.isLoading) {
+    return <p className="text-[13px] text-ink-muted">Loading fields…</p>
+  }
+
+  if (definitions.records.length === 0) {
+    return (
+      <p className="text-[13px] text-ink-muted">
+        No custom fields yet. Add them at{' '}
+        <Link to="/admin/fields" className="text-accent hover:text-accent-hover">
+          Admin → Fields
+        </Link>
+        .
+      </p>
+    )
+  }
+
+  return (
+    <dl className="grid gap-x-8 gap-y-5 sm:grid-cols-2">
+      {definitions.records.map((definition) => (
+        <CustomFieldControl
+          key={definition.id}
+          definition={definition}
+          value={values[definition.key]}
+          onChange={(next) => {
+            onPatch({ [definition.key]: next })
+          }}
+        />
+      ))}
+    </dl>
+  )
+}
+
+interface CustomFieldControlProps {
+  readonly definition: CustomFieldDefinition
+  readonly value: CustomFieldValue | undefined
+  readonly onChange: (value: CustomFieldValue | null) => void
+}
+
+function CustomFieldControl({
+  definition,
+  value,
+  onChange,
+}: CustomFieldControlProps): React.JSX.Element {
+  const type = definition.type as CustomFieldType
+
+  return (
+    <div>
+      <dt className="text-[10px] font-semibold tracking-wide text-ink-faint uppercase">
+        {definition.label}
+      </dt>
+      {definition.description.length > 0 && (
+        <p className="mt-0.5 text-[11px] text-ink-muted">{definition.description}</p>
+      )}
+      <dd className="mt-1 text-[13px] text-ink">
+        <ControlFor definition={definition} type={type} value={value} onChange={onChange} />
+      </dd>
+    </div>
+  )
+}
+
+interface ControlForProps {
+  readonly definition: CustomFieldDefinition
+  readonly type: CustomFieldType
+  readonly value: CustomFieldValue | undefined
+  readonly onChange: (value: CustomFieldValue | null) => void
+}
+
+function ControlFor({
+  definition,
+  type,
+  value,
+  onChange,
+}: ControlForProps): React.JSX.Element {
+  if (type === 'checkbox') {
+    return (
+      <label className="inline-flex cursor-pointer items-center gap-2">
+        <input
+          type="checkbox"
+          checked={value === true}
+          onChange={(event) => {
+            onChange(event.target.checked)
+          }}
+          className="rounded border-border"
+        />
+        <span>{value === true ? 'Yes' : 'No'}</span>
+      </label>
+    )
+  }
+
+  if (type === 'multi_select') {
+    return (
+      <MultiSelectField
+        options={definition.options}
+        selected={Array.isArray(value) ? (value as readonly string[]) : []}
+        onChange={onChange}
+      />
+    )
+  }
+
+  if (type === 'currency') {
+    const currentCents =
+      typeof value === 'object' &&
+      value !== null &&
+      !Array.isArray(value) &&
+      'amountCents' in value
+        ? value.amountCents
+        : null
+    const currentCurrency =
+      typeof value === 'object' &&
+      value !== null &&
+      !Array.isArray(value) &&
+      'currency' in value
+        ? value.currency
+        : 'USD'
+
+    return (
+      <InlineEdit
+        type="number"
+        value={currentCents === null ? '' : String(currentCents / 100)}
+        onChange={(raw) => {
+          const trimmed = raw.trim()
+          if (trimmed.length === 0) {
+            onChange(null)
+            return
+          }
+          const parsed = Number(trimmed)
+          if (!Number.isFinite(parsed)) {
+            return
+          }
+          onChange({
+            amountCents: Math.round(parsed * 100),
+            currency: currentCurrency,
+          })
+        }}
+        emptyLabel="Add…"
+      />
+    )
+  }
+
+  if (OPTIONS_TYPES.has(type)) {
+    // A stored value that is no longer in the definition's options must still
+    // be visible until the reader chooses another; keep it in the list.
+    const stored = typeof value === 'string' ? value : ''
+    const options = optionsWithStale(definition.options, stored)
+    return (
+      <InlineEdit
+        value={stored}
+        options={options.map((option) => ({ value: option, label: option }))}
+        onChange={(next) => {
+          onChange(next.length === 0 ? null : next)
+        }}
+        emptyLabel="Choose…"
+      />
+    )
+  }
+
+  if (type === 'number') {
+    const current = typeof value === 'number' ? String(value) : ''
+    return (
+      <InlineEdit
+        type="number"
+        value={current}
+        onChange={(raw) => {
+          const trimmed = raw.trim()
+          if (trimmed.length === 0) {
+            onChange(null)
+            return
+          }
+          const parsed = Number(trimmed)
+          if (Number.isFinite(parsed)) {
+            onChange(parsed)
+          }
+        }}
+        emptyLabel="Add…"
+      />
+    )
+  }
+
+  const inputType: 'text' | 'date' | 'url' | 'email' =
+    type === 'date' ? 'date' : type === 'url' ? 'url' : 'text'
+  const multiline = type === 'long_text'
+  const current = typeof value === 'string' ? value : ''
+
+  return (
+    <InlineEdit
+      type={inputType}
+      multiline={multiline}
+      value={current}
+      onChange={(next) => {
+        onChange(next.length === 0 ? null : next)
+      }}
+      emptyLabel="Add…"
+    />
+  )
+}
+
+interface MultiSelectFieldProps {
+  readonly options: readonly string[]
+  readonly selected: readonly string[]
+  readonly onChange: (value: readonly string[] | null) => void
+}
+
+function MultiSelectField({
+  options,
+  selected,
+  onChange,
+}: MultiSelectFieldProps): React.JSX.Element {
+  const [open, setOpen] = useState(false)
+  const allOptions = useMemo(
+    () => optionsWithStale(options, ...selected),
+    [options, selected],
+  )
+
+  const chips = selected.length === 0 ? null : (
+    <div className="flex flex-wrap gap-1">
+      {selected.map((entry) => (
+        <span
+          key={entry}
+          className="inline-flex items-center gap-1 rounded-full bg-surface-raised px-2 py-0.5 text-[11px]"
+        >
+          {entry}
+          <button
+            type="button"
+            onClick={() => {
+              const next = selected.filter((existing) => existing !== entry)
+              onChange(next.length === 0 ? null : next)
+            }}
+            className="text-ink-muted hover:text-ink"
+            aria-label={`Remove ${entry}`}
+          >
+            ×
+          </button>
+        </span>
+      ))}
+    </div>
+  )
+
+  return (
+    <div className="space-y-1">
+      {chips ?? <span className="text-ink-faint">None</span>}
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((current) => !current)
+        }}
+        className="text-[12px] text-ink-muted hover:text-ink"
+      >
+        {open ? 'Close' : 'Edit'}
+      </button>
+      {open && (
+        <ul className="space-y-1 rounded-md border border-border bg-surface-raised p-2">
+          {allOptions.map((option) => {
+            const chosen = selected.includes(option)
+            return (
+              <li key={option}>
+                <label className="flex cursor-pointer items-center gap-2 text-[12px]">
+                  <input
+                    type="checkbox"
+                    checked={chosen}
+                    onChange={() => {
+                      const next = chosen
+                        ? selected.filter((existing) => existing !== option)
+                        : [...selected, option]
+                      onChange(next.length === 0 ? null : next)
+                    }}
+                  />
+                  <span>{option}</span>
+                </label>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+function optionsWithStale(
+  options: readonly string[],
+  ...stored: readonly string[]
+): readonly string[] {
+  const seen = new Set(options)
+  const extras = stored.filter((entry) => entry.length > 0 && !seen.has(entry))
+  return extras.length === 0 ? options : [...options, ...extras]
+}