@kelpie/ui 0.1.0

package/src/pages/FormsPage.tsx

@@ -0,0 +1,151 @@
+import type { Form } from '@kelpie/schemas'
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+
+import { useCreateForm, useForms } from '../api/resources/forms.ts'
+import { Chip } from '../components/Chip.tsx'
+import { DataTable } from '../components/DataTable.tsx'
+import type { Column } from '../components/DataTable.tsx'
+import { FilterBar, PageHeader } from '../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
+import { SegmentedControl } from '../components/SegmentedControl.tsx'
+import { CONTACT_FORM_FIELDS } from './forms/template.ts'
+
+/**
+ * Every form in the workspace.
+ *
+ * The filter box and the status toggle are both the API's, not a scan of a
+ * loaded array, so they match forms this page has not paged to yet.
+ *
+ * There is no submissions count column. The mockup had one because its seed data
+ * was a local array; here it would be one request per row, and `api.md` has no
+ * expansion to fold that into the list. The count lives on the detail page,
+ * where the submissions are already being fetched.
+ */
+
+type StatusFilter = 'all' | 'active' | 'paused'
+
+const STATUS_OPTIONS = [
+  { id: 'all' as const, label: 'All' },
+  { id: 'active' as const, label: 'Active' },
+  { id: 'paused' as const, label: 'Paused' },
+]
+
+export function FormsPage(): React.JSX.Element {
+  const [term, setTerm] = useState('')
+  const [status, setStatus] = useState<StatusFilter>('all')
+  const [sort, setSort] = useState<string | undefined>(undefined)
+  const navigate = useNavigate()
+  const hasFilter = term.trim().length > 0 || status !== 'all'
+  const createForm = useCreateForm()
+  const forms = useForms({
+    term: term.trim().length > 0 ? term.trim() : undefined,
+    ...(status === 'all' ? {} : { status }),
+    sort,
+  })
+
+  /**
+   * A new form starts as the contact template rather than empty, because an
+   * empty field list is not a form the API will accept: it needs a
+   * `person.email` mapping before it can process anything.
+   */
+  function addForm(): void {
+    createForm
+      .runAsync({ name: 'New form', fields: CONTACT_FORM_FIELDS })
+      .then((form) => navigate(`/forms/${form.id}`))
+      .catch(() => undefined)
+  }
+
+  const columns: readonly Column<Form>[] = [
+    {
+      key: 'name',
+      header: 'Name',
+      sortKey: 'name',
+      render: (form) => (
+        <>
+          <div className="font-medium text-ink">{form.name}</div>
+          {form.description !== null && form.description.length > 0 && (
+            <div className="mt-0.5 text-[12px] text-ink-muted">{form.description}</div>
+          )}
+        </>
+      ),
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      className: 'w-28',
+      render: (form) => (
+        <Chip tone={form.status === 'active' ? 'success' : 'neutral'}>{form.status}</Chip>
+      ),
+    },
+    {
+      key: 'fields',
+      header: 'Fields',
+      className: 'w-20',
+      render: (form) => <span className="font-mono text-[12px]">{form.fields.length}</span>,
+    },
+    {
+      key: 'deal',
+      header: 'Deal',
+      className: 'w-32',
+      render: (form) =>
+        form.createDeal ? (
+          <Chip tone="accent">Creates deal</Chip>
+        ) : (
+          <span className="text-ink-faint">—</span>
+        ),
+    },
+  ]
+
+  return (
+    <div className="animate-fade-in">
+      <PageHeader
+        title="Forms"
+        description="Embeddable forms that create People, Companies, and optional Deals."
+        onAdd={addForm}
+        addLabel="New form"
+        actions={
+          <SegmentedControl
+            value={status}
+            onChange={setStatus}
+            options={STATUS_OPTIONS}
+            ariaLabel="Filter by status"
+          />
+        }
+      />
+      <FilterBar value={term} onChange={setTerm} placeholder="Filter forms…" />
+
+      {createForm.error !== null && <ErrorPanel error={createForm.error} />}
+
+      {forms.error !== null ? (
+        <ErrorPanel error={forms.error} />
+      ) : forms.isLoading ? (
+        <LoadingPanel label="Loading forms…" />
+      ) : (
+        <>
+          <DataTable
+            columns={columns}
+            rows={forms.records}
+            getRowId={(form) => form.id}
+            onRowClick={(form) => navigate(`/forms/${form.id}`)}
+            emptyMessage={hasFilter ? 'No forms match this filter' : 'No forms yet'}
+            emptyDescription={hasFilter ? 'Try a different search term or status.' : undefined}
+            emptyAction={hasFilter ? undefined : { label: 'New form', onClick: addForm }}
+            sort={sort}
+            onSortChange={setSort}
+          />
+          {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>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/pages/FundraisingPage.tsx

@@ -0,0 +1,354 @@
+import type { PipelineStage, Raise } from '@kelpie/schemas'
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router'
+
+import { useCompanies } from '../api/resources/companies.ts'
+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 { Chip } from '../components/Chip.tsx'
+import type { ChipTone } from '../components/Chip.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 { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
+import { SegmentedControl } from '../components/SegmentedControl.tsx'
+import { formatDay } from '../lib/dates.ts'
+import { formatMoney } from '../lib/money.ts'
+import { DUE_BUCKETS, byDateThenTitle, dueBucketFor, nextOpenByTarget } from '../lib/plan.ts'
+
+/**
+ * The Fundraising board: one raise per firm per round, grouped by stage. The
+ * same board-and-list pair as Deals over the shared kanban, with the check size
+ * in place of the deal value and the firm in place of the company.
+ */
+
+type BoardView = 'list' | 'columns'
+type PipelineScope = 'open' | 'all'
+type ListGrouping = 'stage' | 'due'
+
+/** Tones keyed by the seeded slugs. A renamed stage keeps its slug and its tone. */
+const STAGE_TONES: Readonly<Record<string, ChipTone>> = {
+  closed: 'success',
+  passed: 'danger',
+  term_sheet: 'warning',
+  diligence: 'warning',
+  meeting: 'accent',
+  intro: 'accent',
+}
+
+function stageTone(stage: PipelineStage): ChipTone {
+  return STAGE_TONES[stage.slug] ?? 'neutral'
+}
+
+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 stages = usePipelineStages('raise')
+  const raises = useRaises({ sort })
+  const companies = useCompanies({ limit: 200 })
+  const members = useMembers()
+  const createRaise = useCreateRaise()
+  const updateRaise = useUpdateRaise()
+
+  const allStages = [...stages.records].sort((a, b) => a.sortOrder - b.sortOrder)
+  const visibleStages = scope === 'open' ? allStages.filter((stage) => stage.open) : allStages
+  const visibleStageIds = new Set(visibleStages.map((stage) => stage.id))
+  const visibleRaises = raises.records.filter((raise) => visibleStageIds.has(raise.stageId))
+
+  // The next-step column asks about the records on screen by id. `?target_id=`
+  // takes at most one page of them (`api.md`), so past that ceiling the rest
+  // read as having no plan; the note under the table says so.
+  const askedIds = visibleRaises.slice(0, MAX_PAGE_SIZE).map((raise) => raise.id)
+  const planItems = usePlanItems(
+    {
+      targetType: 'raise',
+      targetIds: askedIds,
+      statuses: ['todo', 'in_progress'],
+      limit: MAX_PAGE_SIZE,
+    },
+    { enabled: askedIds.length > 0 },
+  )
+  const nextPlanByRaise = nextOpenByTarget(planItems.records)
+  const plansTruncated = visibleRaises.length > MAX_PAGE_SIZE || planItems.hasMore
+
+  const companyNameById = new Map(companies.records.map((company) => [company.id, company.name]))
+
+  async function addRaise(): Promise<void> {
+    const firstCompany = companies.records[0]
+
+    if (firstCompany === undefined) {
+      return
+    }
+
+    const raise = await createRaise.runAsync({
+      name: 'New raise',
+      companyId: firstCompany.id,
+    })
+
+    await navigate(`/fundraising/${raise.id}`)
+  }
+
+  const columns: readonly Column<Raise>[] = [
+    {
+      key: 'name',
+      header: 'Raise',
+      sortKey: 'name',
+      render: (raise) => <span className="font-medium text-ink">{raise.name}</span>,
+    },
+    {
+      key: 'company',
+      header: 'Firm',
+      render: (raise) => companyNameById.get(raise.companyId) ?? '—',
+    },
+    {
+      key: 'check',
+      header: 'Check',
+      className: 'w-28',
+      render: (raise) =>
+        raise.checkSizeCents === null ? (
+          '—'
+        ) : (
+          <span className="font-mono text-[12px]">
+            {formatMoney(raise.checkSizeCents, raise.currency)}
+          </span>
+        ),
+    },
+    {
+      key: 'nextPlan',
+      header: 'Next plan',
+      render: (raise) => {
+        const next = nextPlanByRaise.get(raise.id)
+
+        if (next === undefined) {
+          return '—'
+        }
+
+        return (
+          <span className="text-ink-muted">
+            {next.title}
+            <span className="ml-1.5 font-mono text-[11px] text-ink-faint">
+              {formatDay(next.date)}
+            </span>
+          </span>
+        )
+      },
+    },
+    {
+      key: 'owner',
+      header: 'Owner',
+      render: (raise) =>
+        raise.ownerId === null ? '—' : (members.nameById.get(raise.ownerId) ?? 'Unknown'),
+    },
+    {
+      key: 'close',
+      header: 'Close',
+      className: 'w-28',
+      render: (raise) => (
+        <span className="font-mono text-[12px] text-ink-muted">
+          {raise.expectedClose === null ? '—' : formatDay(raise.expectedClose)}
+        </span>
+      ),
+    },
+  ]
+
+  const stageGroups: readonly DataTableGroup<Raise>[] = visibleStages.map((stage) => ({
+    id: stage.id,
+    label: <Chip tone={stageTone(stage)}>{stage.label}</Chip>,
+    rows: visibleRaises.filter((raise) => raise.stageId === stage.id),
+  }))
+
+  /** Soonest first inside each bucket, so the top of "Overdue" is the oldest debt. */
+  const dueGroups: readonly DataTableGroup<Raise>[] = DUE_BUCKETS.map((bucket) => ({
+    id: bucket.id,
+    label: bucket.label,
+    rows: visibleRaises
+      .filter((raise) => dueBucketFor(nextPlanByRaise.get(raise.id)?.date) === bucket.id)
+      .sort((left, right) => {
+        const leftNext = nextPlanByRaise.get(left.id)
+        const rightNext = nextPlanByRaise.get(right.id)
+
+        if (leftNext === undefined || rightNext === undefined) {
+          return left.name.localeCompare(right.name)
+        }
+
+        return byDateThenTitle(leftNext, rightNext) || left.name.localeCompare(right.name)
+      }),
+  }))
+
+  const cards = visibleRaises.map((raise) => {
+    const next = nextPlanByRaise.get(raise.id)
+    const company = companyNameById.get(raise.companyId) ?? '—'
+
+    return {
+      id: raise.id,
+      stage: raise.stageId,
+      title: raise.name,
+      meta: next === undefined ? company : `${company} · ${next.title}`,
+      valueLabel:
+        raise.checkSizeCents === null
+          ? undefined
+          : formatMoney(raise.checkSizeCents, raise.currency),
+      href: `/fundraising/${raise.id}`,
+    }
+  })
+
+  const isLoading = raises.isLoading || stages.isLoading
+  const loadError = raises.error ?? stages.error
+
+  return (
+    <div className="animate-fade-in">
+      <PageHeader
+        title="Fundraising"
+        onAdd={() => {
+          void addRaise()
+        }}
+        addLabel="Add raise"
+        actions={
+          <>
+            <Link
+              to="/fundraising/settings"
+              className="rounded-md border border-border bg-surface-raised px-2.5 py-1 text-[12px] font-medium text-ink-muted hover:text-ink"
+            >
+              Settings
+            </Link>
+            <SegmentedControl
+              ariaLabel="Stage scope"
+              value={scope}
+              onChange={setScope}
+              options={[
+                { id: 'open', label: 'Open' },
+                { id: 'all', label: 'All' },
+              ]}
+            />
+            {view === 'list' && (
+              <SegmentedControl
+                ariaLabel="Group the list"
+                value={grouping}
+                onChange={setGrouping}
+                options={[
+                  { id: 'stage', label: 'By stage' },
+                  { id: 'due', label: 'By due' },
+                ]}
+              />
+            )}
+            <SegmentedControl
+              ariaLabel="Board or list"
+              value={view}
+              onChange={setView}
+              options={[
+                { id: 'list', label: 'List' },
+                { id: 'columns', label: 'Board' },
+              ]}
+            />
+          </>
+        }
+      />
+
+      {companies.records.length === 0 && !companies.isLoading && (
+        <p className="mb-3 text-[12px] text-ink-faint">
+          A raise belongs to a firm, so add a company before adding a raise.
+        </p>
+      )}
+
+      {createRaise.error !== null && (
+        <div className="mb-3">
+          <ErrorPanel error={createRaise.error} />
+        </div>
+      )}
+
+      {loadError !== null ? (
+        <ErrorPanel error={loadError} />
+      ) : isLoading ? (
+        <LoadingPanel label="Loading raises…" />
+      ) : (
+        <>
+          {view === 'columns' ? (
+            <KanbanBoard
+              stages={visibleStages.map((stage) => ({ id: stage.id, label: stage.label }))}
+              cards={cards}
+              onMove={(raiseId, stageId) => {
+                const raise = raises.records.find((candidate) => candidate.id === raiseId)
+
+                if (raise !== undefined && raise.stageId !== stageId) {
+                  updateRaise.run({ id: raiseId, changes: { stageId } })
+                }
+              }}
+            />
+          ) : (
+            <DataTable
+              columns={columns}
+              groups={grouping === 'stage' ? stageGroups : dueGroups}
+              getRowId={(raise) => raise.id}
+              onRowClick={(raise) => {
+                void navigate(`/fundraising/${raise.id}`)
+              }}
+              emptyMessage={
+                raises.records.length === 0
+                  ? 'No raises yet'
+                  : scope === 'open'
+                    ? 'No open raises'
+                    : 'No raises in this view'
+              }
+              emptyDescription={
+                raises.records.length > 0 && scope === 'open'
+                  ? 'You have raises, but none are open right now.'
+                  : undefined
+              }
+              emptyAction={
+                raises.records.length === 0
+                  ? {
+                      label: 'Add raise',
+                      onClick: () => {
+                        void addRaise()
+                      },
+                    }
+                  : scope === 'open'
+                    ? {
+                        label: 'Show all raises',
+                        onClick: () => {
+                          setScope('all')
+                        },
+                      }
+                    : undefined
+              }
+              sort={sort}
+              onSortChange={setSort}
+            />
+          )}
+          {updateRaise.error !== null && (
+            <div className="mt-3">
+              <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 && (
+            <p className="mt-2 text-[11px] text-ink-faint">
+              More companies exist than one page returns, so some firm names may show as “—”.
+            </p>
+          )}
+          {plansTruncated && (
+            <p className="mt-2 text-[11px] text-ink-faint">
+              More plan items exist than one page returns, so some raises may show no next plan.
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/pages/HiringPage.tsx

@@ -0,0 +1,169 @@
+import type { Role } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { useNavigate } from 'react-router'
+
+import { useCreateRole, useRoles } from '../api/resources/roles.ts'
+import { Chip } from '../components/Chip.tsx'
+import { DataTable } from '../components/DataTable.tsx'
+import type { Column } from '../components/DataTable.tsx'
+import { FilterBar, PageHeader } from '../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
+import { formatDate } from '../lib/dates.ts'
+import { useRoleCandidateCounts } from './hiringDirectory.ts'
+
+/**
+ * The Hiring list: every opening, open or closed.
+ *
+ * The filter box is the API's `?q=` rather than a scan of an array, the change
+ * every ported list page makes. Adding a role asks for a title first, because a
+ * role with a placeholder name is worse than one keystroke of friction.
+ */
+export function HiringPage(): React.JSX.Element {
+  const [term, setTerm] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [title, setTitle] = useState('')
+  const navigate = useNavigate()
+  const roles = useRoles({ term: term.trim().length > 0 ? term.trim() : undefined })
+  const counts = useRoleCandidateCounts(roles.records.map((role) => role.id))
+  const createRole = useCreateRole()
+
+  function reset(): void {
+    setAdding(false)
+    setTitle('')
+  }
+
+  async function addRole(event: FormEvent): Promise<void> {
+    event.preventDefault()
+
+    const trimmed = title.trim()
+
+    if (trimmed.length === 0) {
+      return
+    }
+
+    const role = await createRole.runAsync({ title: trimmed })
+
+    reset()
+    await navigate(`/hiring/${role.id}`)
+  }
+
+  const columns: readonly Column<Role>[] = [
+    {
+      key: 'title',
+      header: 'Role',
+      render: (role) => <span className="font-medium text-ink">{role.title}</span>,
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (role) => (
+        <Chip tone={role.status === 'open' ? 'accent' : 'neutral'}>
+          {role.status === 'open' ? 'Open' : 'Closed'}
+        </Chip>
+      ),
+    },
+    {
+      key: 'candidates',
+      header: 'Candidates',
+      className: 'w-28',
+      render: (role) => (
+        <span className="font-mono text-[12px]">
+          {counts.isLoading ? '—' : counts.countFor(role.id)}
+        </span>
+      ),
+    },
+    {
+      key: 'created',
+      header: 'Created',
+      render: (role) => formatDate(role.createdAt),
+    },
+  ]
+
+  return (
+    <div className="animate-fade-in">
+      <PageHeader
+        title="Hiring"
+        onAdd={() => {
+          setAdding((current) => !current)
+        }}
+        addLabel="Add role"
+      />
+
+      {adding && (
+        <form
+          onSubmit={(event) => {
+            void addRole(event)
+          }}
+          className="mb-4 flex max-w-md gap-2"
+        >
+          <input
+            value={title}
+            onChange={(event) => {
+              setTitle(event.target.value)
+            }}
+            placeholder="Role title"
+            autoFocus
+            className="min-w-0 flex-1 rounded-md border border-border bg-surface-raised px-3 py-1.5 text-[13px] outline-none focus:border-accent"
+            required
+          />
+          <button
+            type="button"
+            onClick={reset}
+            className="rounded-md px-2.5 py-1.5 text-[12px] font-medium text-ink-muted hover:text-ink"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={createRole.isPending}
+            className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+          >
+            Add
+          </button>
+        </form>
+      )}
+
+      <FilterBar value={term} onChange={setTerm} placeholder="Filter roles…" />
+
+      {createRole.error !== null && (
+        <div className="mb-3">
+          <ErrorPanel error={createRole.error} />
+        </div>
+      )}
+
+      {roles.error !== null ? (
+        <ErrorPanel error={roles.error} />
+      ) : roles.isLoading ? (
+        <LoadingPanel label="Loading roles…" />
+      ) : (
+        <>
+          <DataTable
+            columns={columns}
+            rows={roles.records}
+            getRowId={(role) => role.id}
+            onRowClick={(role) => {
+              void navigate(`/hiring/${role.id}`)
+            }}
+            emptyMessage="No roles yet"
+          />
+          {!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>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/pages/NotFoundPage.tsx

@@ -0,0 +1,27 @@
+import { Link } from 'react-router'
+
+/**
+ * The router's catch-all, for a URL that matches nothing.
+ *
+ * It sits inside the Shell rather than standing alone: `KelpieApp.tsx` nests
+ * this route under `SessionGate`, so a signed-out visitor is already redirected
+ * to `/login` before this ever renders, and a signed-in one keeps their nav
+ * instead of landing on a bare page with no way back in.
+ */
+export function NotFoundPage(): React.JSX.Element {
+  return (
+    <div className="animate-fade-in mx-auto max-w-md py-20 text-center">
+      <p className="text-[13px] font-medium text-ink-faint uppercase tracking-wide">404</p>
+      <p className="mt-2 text-[15px] font-medium text-ink">This page doesn't exist.</p>
+      <p className="mt-1 text-[13px] text-ink-muted">
+        The link may be out of date, or the address may be mistyped.
+      </p>
+      <Link
+        to="/dashboard"
+        className="mt-4 inline-block text-[13px] font-medium text-accent hover:underline"
+      >
+        Go to dashboard
+      </Link>
+    </div>
+  )
+}