@kelpie/ui 0.7.0 → 0.8.0

package/src/pages/admin/DataPage.tsx

@@ -22,10 +22,12 @@ import type {
   ImportRowError,
   ImportSource,
   OnMissingCompany,
+  SampleDataCounts,
 } from '@kelpie/schemas'
-import { useState } from 'react'
-import type { ChangeEvent, FormEvent, ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import type { ChangeEvent, DragEvent, FormEvent, ReactNode } from 'react'
 
+import { useRelinkEmailDomains } from '../../api/resources/emailDomainLinker.ts'
 import {
   saveCsv,
   useCommitImportJob,
@@ -34,6 +36,8 @@ import {
   useExportCsv,
   useImportJob,
 } from '../../api/resources/importJobs.ts'
+import { useInstallSampleData } from '../../api/resources/sampleData.ts'
+import { useSession } from '../../api/resources/session.ts'
 import { PageHeader } from '../../components/PageHeader.tsx'
 
 /**
@@ -49,13 +53,14 @@ import { PageHeader } from '../../components/PageHeader.tsx'
  * `public/fixtures`, and none of those are part of the application.
  */
 
-type WizardStep = 'source' | 'upload' | 'map' | 'result'
+type WizardStep = 'source' | 'upload' | 'map' | 'result' | 'done'
 
 const STEPS: readonly { readonly id: WizardStep; readonly label: string }[] = [
   { id: 'source', label: 'Source' },
   { id: 'upload', label: 'Upload' },
   { id: 'map', label: 'Map' },
   { id: 'result', label: 'Dry-run' },
+  { id: 'done', label: 'Done' },
 ]
 
 export function DataPage(): ReactNode {
@@ -153,6 +158,19 @@ export function DataPage(): ReactNode {
     return created
   }
 
+  async function processChosenFile(chosen: File): Promise<void> {
+    setProblem(null)
+    setFile(chosen)
+
+    const created = await runDryRun(chosen, undefined)
+
+    // The first upload takes the server's own reading of the file, which is what
+    // the mapping table is then built from.
+    setColumnMap(created.columnMap)
+    setMatchKeyId(created.matchKey)
+    setStep('map')
+  }
+
   async function onFileChange(event: ChangeEvent<HTMLInputElement>): Promise<void> {
     const chosen = event.target.files?.[0]
 
@@ -164,16 +182,22 @@ export function DataPage(): ReactNode {
       return
     }
 
-    setProblem(null)
-    setFile(chosen)
+    await processChosenFile(chosen)
+  }
 
-    const created = await runDryRun(chosen, undefined)
+  async function onFileDrop(event: DragEvent<HTMLLabelElement>): Promise<void> {
+    event.preventDefault()
 
-    // The first upload takes the server's own reading of the file, which is what
-    // the mapping table is then built from.
-    setColumnMap(created.columnMap)
-    setMatchKeyId(created.matchKey)
-    setStep('map')
+    if (createJob.isPending) {
+      return
+    }
+
+    const chosen = event.dataTransfer.files[0]
+    if (chosen === undefined) {
+      return
+    }
+
+    await processChosenFile(chosen)
   }
 
   async function onRerun(event: FormEvent): Promise<void> {
@@ -199,6 +223,19 @@ export function DataPage(): ReactNode {
     setStep('result')
   }
 
+  // Commit finishes on the server, not the click, so the wizard waits for the
+  // job to reach `completed` before showing the outcome step. `failed` lands
+  // here too — the outcome is that the commit did not go through.
+  useEffect(() => {
+    if (step !== 'result' || job === undefined) {
+      return
+    }
+
+    if (job.status === 'completed' || job.status === 'failed') {
+      setStep('done')
+    }
+  }, [step, job])
+
   function onCommit(): void {
     // The file goes back with the commit: the server kept its digest, not its
     // bytes. This is the same `File` every dry run was run against.
@@ -223,7 +260,11 @@ export function DataPage(): ReactNode {
         </p>
       )}
 
-      <section className="space-y-4">
+      <SampleDataSection />
+
+      <RelinkEmailDomainsSection />
+
+      <section className="space-y-4 border-t border-border pt-8">
         <div>
           <h2 className="text-[15px] font-semibold text-ink">Export</h2>
           <p className="mt-1 text-[13px] text-ink-muted">
@@ -348,7 +389,14 @@ export function DataPage(): ReactNode {
             <p className="text-[13px] text-ink-muted">
               {SOURCE_LABELS[source]} → {OBJECT_LABELS[object]}
             </p>
-            <label className="flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-border bg-surface-raised px-6 py-10 transition hover:border-accent">
+            <label
+              className="flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-border bg-surface-raised px-6 py-10 transition hover:border-accent"
+              onDragOver={(event) => {
+                event.preventDefault()
+                event.dataTransfer.dropEffect = 'copy'
+              }}
+              onDrop={(event) => runStep(onFileDrop(event))}
+            >
               <span className="text-[13px] font-medium text-ink">
                 {createJob.isPending ? 'Reading the file…' : 'Drop a CSV here or click to browse'}
               </span>
@@ -405,6 +453,10 @@ export function DataPage(): ReactNode {
             onBack={() => setStep('map')}
           />
         ) : null}
+
+        {step === 'done' && job !== undefined ? (
+          <DonePanel job={job} object={object} onAgain={resetWizard} />
+        ) : null}
       </section>
     </div>
   )
@@ -661,6 +713,81 @@ function ResultPanel({ job, object, isCommitting, onCommit, onBack }: ResultPane
   )
 }
 
+interface DonePanelProps {
+  readonly job: ImportJob
+  readonly object: ImportObject
+  readonly onAgain: () => void
+}
+
+function DonePanel({ job, object, onAgain }: DonePanelProps): ReactNode {
+  const failed = job.status === 'failed'
+  const wrote = job.counts.create + job.counts.update
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-[15px] font-semibold text-ink">
+          {failed ? 'Import failed' : 'Import complete'}
+        </h3>
+        <p className="mt-1 text-[13px] text-ink-muted">
+          {failed
+            ? 'The server refused the commit. Nothing was written.'
+            : `${wrote} ${OBJECT_LABELS[object].toLowerCase()} row${wrote === 1 ? '' : 's'} written to this workspace.`}
+        </p>
+      </div>
+      <p className="text-[12px] text-ink-muted">
+        Job <span className="font-mono text-[12px] text-ink">{job.id}</span> · status {job.status}
+      </p>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
+        <Stat label="Total" value={job.counts.total} />
+        <Stat label="Created" value={job.counts.create} />
+        <Stat label="Updated" value={job.counts.update} />
+        <Stat label="Skipped" value={job.counts.skip} />
+        <Stat label="Errors" value={job.counts.error} danger />
+      </div>
+
+      {job.errors.length > 0 ? (
+        <div className="space-y-2">
+          <div>
+            <h3 className="text-[13px] font-semibold text-ink">Row errors</h3>
+            <p className="mt-0.5 text-[12px] text-ink-muted">
+              These rows were not written. Fix them in the CSV and import again.
+            </p>
+          </div>
+          <IssueTable rows={job.errors} />
+          {job.counts.error > job.errors.length ? (
+            <p className="text-[12px] text-ink-muted">
+              Showing {job.errors.length} of {job.counts.error} failing rows.
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {job.warnings.length > 0 ? (
+        <div className="space-y-2">
+          <div>
+            <h3 className="text-[13px] font-semibold text-ink">Warnings</h3>
+            <p className="mt-0.5 text-[12px] text-ink-muted">
+              These rows were written. Each note says what was left out.
+            </p>
+          </div>
+          <IssueTable rows={job.warnings} />
+        </div>
+      ) : null}
+
+      <div className="flex flex-wrap gap-3">
+        <button
+          type="button"
+          onClick={onAgain}
+          className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover"
+        >
+          Import another
+        </button>
+      </div>
+    </div>
+  )
+}
+
 /** The row / field / message table shared by the error and warning lists. */
 function IssueTable({ rows }: { readonly rows: readonly ImportRowError[] }): ReactNode {
   return (
@@ -830,3 +957,139 @@ function Field({
 function messageOf(error: Error | null | undefined): string | null {
   return error === null || error === undefined ? null : error.message
 }
+
+/**
+ * One button that fills the workspace with a small demo fixture.
+ *
+ * The endpoint refuses on a workspace that already has data, so the button
+ * never doubles the seed and the "already has data" answer surfaces here as
+ * a plain error line.
+ */
+function SampleDataSection(): ReactNode {
+  const { session } = useSession()
+  const workspaceId = session?.workspaceId ?? null
+  const install = useInstallSampleData()
+  const [counts, setCounts] = useState<SampleDataCounts | null>(null)
+
+  function onInstall(): void {
+    if (workspaceId === null) {
+      return
+    }
+
+    install
+      .runAsync({ workspaceId })
+      .then((result) => {
+        setCounts(result)
+      })
+      .catch(() => undefined)
+  }
+
+  const failure = messageOf(install.error)
+
+  return (
+    <section className="space-y-4">
+      <div>
+        <h2 className="text-[15px] font-semibold text-ink">Install sample data</h2>
+        <p className="mt-1 text-[13px] text-ink-muted">
+          A small set of companies, people, and deals so a fresh workspace has something
+          to look at. Refuses if this workspace already has CRM data.
+        </p>
+      </div>
+      <button
+        type="button"
+        onClick={onInstall}
+        disabled={install.isPending || workspaceId === null || counts !== null}
+        className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+      >
+        {counts !== null
+          ? 'Installed'
+          : install.isPending
+            ? 'Installing…'
+            : 'Install sample data'}
+      </button>
+      {counts !== null ? (
+        <p className="text-[12px] text-ink-muted">
+          Added {counts.companies} companies, {counts.people} people, {counts.positions}{' '}
+          positions, {counts.deals} deals, {counts.opportunities} opportunities,{' '}
+          {counts.raises} raises, {counts.partnerships} partnerships, {counts.roles} roles,{' '}
+          {counts.candidates} candidates, {counts.planItems} plan items, and{' '}
+          {counts.notes} notes.
+        </p>
+      ) : null}
+      {failure === null ? null : (
+        <p role="alert" className="text-[12px] font-medium text-danger">
+          {failure}
+        </p>
+      )}
+    </section>
+  )
+}
+
+/**
+ * Sweep every workspace Company that carries a domain and attach each Person
+ * whose email is at that domain.
+ *
+ * Backfills links for records that predate the auto-linker or arrived through
+ * a bulk import. Idempotent: a follow-up run adds nothing. Never removes.
+ */
+function RelinkEmailDomainsSection(): ReactNode {
+  const { session } = useSession()
+  const workspaceId = session?.workspaceId ?? null
+  const relink = useRelinkEmailDomains()
+  const [outcome, setOutcome] = useState<{
+    readonly companiesScanned: number
+    readonly positionsCreated: number
+  } | null>(null)
+
+  function onRun(): void {
+    if (workspaceId === null) {
+      return
+    }
+
+    relink
+      .runAsync({ workspaceId })
+      .then((result) => {
+        setOutcome({
+          companiesScanned: result.companiesScanned,
+          positionsCreated: result.positionsCreated,
+        })
+      })
+      .catch(() => undefined)
+  }
+
+  const failure = messageOf(relink.error)
+
+  return (
+    <section className="space-y-4 border-t border-border pt-8">
+      <div>
+        <h2 className="text-[15px] font-semibold text-ink">Rebuild email-domain links</h2>
+        <p className="mt-1 text-[13px] text-ink-muted">
+          Attach every workspace Person to a Company whose domain matches their email. Safe to run
+          more than once — a Person already at a Company is left alone, and consumer email hosts
+          (gmail, hotmail, …) are skipped.
+        </p>
+      </div>
+      <button
+        type="button"
+        onClick={onRun}
+        disabled={relink.isPending || workspaceId === null}
+        className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+      >
+        {relink.isPending ? 'Rebuilding…' : 'Rebuild links'}
+      </button>
+      {outcome !== null ? (
+        <p className="text-[12px] text-ink-muted">
+          Scanned {outcome.companiesScanned}{' '}
+          {outcome.companiesScanned === 1 ? 'company' : 'companies'}, added{' '}
+          {outcome.positionsCreated}{' '}
+          {outcome.positionsCreated === 1 ? 'position' : 'positions'}.
+        </p>
+      ) : null}
+      {failure === null ? null : (
+        <p role="alert" className="text-[12px] font-medium text-danger">
+          {failure}
+        </p>
+      )}
+    </section>
+  )
+}

package/src/pages/admin/WebhookDeliveries.tsx

@@ -7,6 +7,7 @@ import { Chip } from '../../components/Chip.tsx'
 import type { ChipTone } from '../../components/Chip.tsx'
 import { DataTable } from '../../components/DataTable.tsx'
 import type { Column } from '../../components/DataTable.tsx'
+import { Paginator } from '../../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
 import { SegmentedControl } from '../../components/SegmentedControl.tsx'
 import { formatDateTime } from '../../lib/dates.ts'
@@ -138,25 +139,19 @@ export function WebhookDeliveries({ webhookId }: { readonly webhookId: string })
           {status === 'all' ? 'Nothing delivered yet.' : `No ${status} deliveries.`}
         </p>
       ) : (
-        <DataTable
-          columns={columns}
-          rows={deliveries.records}
-          getRowId={(delivery) => delivery.id}
-        />
+        <>
+          <Paginator list={deliveries} placement="top" />
+          <DataTable
+            columns={columns}
+            rows={deliveries.records}
+            getRowId={(delivery) => delivery.id}
+          />
+        </>
       )}
 
       {open !== undefined && <PayloadPanel delivery={open} />}
 
-      {deliveries.hasMore && (
-        <button
-          type="button"
-          onClick={deliveries.loadMore}
-          disabled={deliveries.isLoadingMore}
-          className="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"
-        >
-          {deliveries.isLoadingMore ? 'Loading…' : 'Load more'}
-        </button>
-      )}
+      <Paginator list={deliveries} />
     </div>
   )
 }

package/src/pages/admin/WebhooksPage.tsx

@@ -19,6 +19,7 @@ import {
 import { Chip } from '../../components/Chip.tsx'
 import type { ChipTone } from '../../components/Chip.tsx'
 import { PageHeader } from '../../components/PageHeader.tsx'
+import { Paginator } from '../../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
 import { formatDateTime } from '../../lib/dates.ts'
 import { WebhookDeliveries } from './WebhookDeliveries.tsx'
@@ -68,7 +69,7 @@ function MemberNotice(): React.JSX.Element {
 }
 
 function WebhookAdmin(): React.JSX.Element {
-  const { records, isLoading, error, hasMore, isLoadingMore, loadMore } = useWebhooks()
+  const webhooks = useWebhooks()
   const [minted, setMinted] = useState<CreatedWebhook | null>(null)
 
   return (
@@ -88,30 +89,24 @@ function WebhookAdmin(): React.JSX.Element {
         />
       )}
 
-      {error !== null && <ErrorPanel error={error} />}
+      {webhooks.error !== null && <ErrorPanel error={webhooks.error} />}
 
-      {isLoading ? (
+      {webhooks.isLoading ? (
         <LoadingPanel label="Loading webhooks…" />
-      ) : records.length === 0 ? (
+      ) : webhooks.records.length === 0 ? (
         <p className="text-[13px] text-ink-muted">No webhooks yet.</p>
       ) : (
-        <ul className="space-y-3">
-          {records.map((webhook) => (
-            <WebhookRow key={webhook.id} webhook={webhook} onRotated={setMinted} />
-          ))}
-        </ul>
+        <>
+          <Paginator list={webhooks} placement="top" />
+          <ul className="space-y-3">
+            {webhooks.records.map((webhook) => (
+              <WebhookRow key={webhook.id} webhook={webhook} onRotated={setMinted} />
+            ))}
+          </ul>
+        </>
       )}
 
-      {hasMore && (
-        <button
-          type="button"
-          disabled={isLoadingMore}
-          onClick={loadMore}
-          className="rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink-muted transition hover:text-ink disabled:opacity-50"
-        >
-          {isLoadingMore ? 'Loading…' : 'Load more'}
-        </button>
-      )}
+      <Paginator list={webhooks} />
     </>
   )
 }

package/src/pages/admin/WorkspaceSettingsPage.tsx

@@ -1,14 +1,21 @@
-import type { Workspace } from '@kelpie/schemas'
-import { useState } from 'react'
+import type { Company, Workspace } from '@kelpie/schemas'
+import { useMemo, useState } from 'react'
 import type { FormEvent, ReactNode } from 'react'
 import { useNavigate } from 'react-router'
 
+import {
+  useCompanies,
+  useCreateCompany,
+  useUpdateCompany,
+} from '../../api/resources/companies.ts'
 import { useSession } from '../../api/resources/session.ts'
 import {
   useDeleteWorkspace,
   useUpdateWorkspace,
   useWorkspace,
 } from '../../api/resources/workspace.ts'
+import { EntitySearch } from '../../components/EntitySearch.tsx'
+import type { SearchOption } from '../../components/EntitySearch.tsx'
 import { PageHeader } from '../../components/PageHeader.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
 
@@ -190,11 +197,136 @@ function WorkspaceSettingsForm({
         )}
       </form>
 
+      <OwnCompanySection canEdit={canEdit} />
+
       {session?.role === 'owner' && <DangerZone slug={workspace.slug} />}
     </div>
   )
 }
 
+/**
+ * Mark one or more Companies as "us" — the workspace's own organisation.
+ *
+ * Backed by `companies.is_own`. Zero or many rows may carry it (a parent and a
+ * subsidiary is the intended case), so the surface is a list plus an add
+ * picker rather than a single-select. Picking a name that does not exist
+ * creates the Company with `is_own: true` in one call.
+ */
+function OwnCompanySection({ canEdit }: { readonly canEdit: boolean }): React.JSX.Element {
+  const own = useCompanies({ isOwn: true })
+  const [search, setSearch] = useState('')
+  // The picker's options: workspace companies that are NOT already marked.
+  // Server-side search on the term the user types.
+  const searchable = useCompanies({
+    isOwn: false,
+    term: search.trim().length > 0 ? search.trim() : undefined,
+  })
+  const update = useUpdateCompany()
+  const create = useCreateCompany()
+
+  const options: SearchOption[] = useMemo(
+    () =>
+      searchable.records.map((company) => ({
+        id: company.id,
+        label: company.name,
+        meta: company.domain ?? undefined,
+      })),
+    [searchable.records],
+  )
+
+  function mark(companyId: string): void {
+    update.run({ id: companyId, changes: { isOwn: true } })
+  }
+
+  function unmark(companyId: string): void {
+    update.run({ id: companyId, changes: { isOwn: false } })
+  }
+
+  function createAndMark(name: string): void {
+    // The API defaults every other field; `is_own: true` lands the row in the
+    // list this section shows and nowhere else.
+    create.run({ name, isOwn: true })
+    setSearch('')
+  }
+
+  const busy = update.isPending || create.isPending
+
+  return (
+    <section className="space-y-3 rounded-lg border border-border bg-surface p-4">
+      <div>
+        <h2 className="text-[13px] font-semibold text-ink">This company</h2>
+        <p className="mt-1 max-w-xl text-[12px] text-ink-muted">
+          Mark the company (or companies) in the CRM that represent this workspace itself. Used
+          later to separate own records from prospects.
+        </p>
+      </div>
+
+      {own.isLoading ? (
+        <p className="text-[12px] text-ink-faint">Loading…</p>
+      ) : own.records.length === 0 ? (
+        <p className="text-[12px] text-ink-faint">Nothing marked yet.</p>
+      ) : (
+        <ul className="divide-y divide-border rounded-md border border-border">
+          {own.records.map((company: Company) => (
+            <li
+              key={company.id}
+              className="flex items-center justify-between gap-3 px-3 py-2.5"
+            >
+              <div className="min-w-0">
+                <div className="truncate text-[13px] font-medium text-ink">{company.name}</div>
+                {company.domain !== null && company.domain.length > 0 && (
+                  <div className="truncate text-[11px] text-ink-faint">{company.domain}</div>
+                )}
+              </div>
+              {canEdit && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    unmark(company.id)
+                  }}
+                  disabled={busy}
+                  className="shrink-0 rounded-md border border-border bg-surface-raised px-2.5 py-1 text-[11px] font-medium text-ink hover:border-danger hover:text-danger disabled:opacity-50"
+                >
+                  Unmark
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {canEdit && (
+        <div className="max-w-md">
+          <label className="mb-1.5 block text-[12px] font-medium text-ink">
+            {own.records.length === 0 ? 'Pick or create' : 'Add another'}
+          </label>
+          <EntitySearch
+            options={options}
+            value=""
+            onChange={mark}
+            onQueryChange={setSearch}
+            onCreate={createAndMark}
+            createLabel={(query) => `Create “${query}” and mark it`}
+            placeholder="Search companies…"
+            emptyMessage="No matches — type a new name to create one"
+          />
+        </div>
+      )}
+
+      {update.error !== null && (
+        <div className="max-w-xl">
+          <ErrorPanel error={update.error} />
+        </div>
+      )}
+      {create.error !== null && (
+        <div className="max-w-xl">
+          <ErrorPanel error={create.error} />
+        </div>
+      )}
+    </section>
+  )
+}
+
 /**
  * Deleting the workspace, behind the workspace's own name.
  *

package/src/pages/forms/SubmissionsTable.tsx

@@ -8,6 +8,7 @@ import { useCompanies } from '../../api/resources/companies.ts'
 import { usePeople } from '../../api/resources/people.ts'
 import { DataTable } from '../../components/DataTable.tsx'
 import type { Column } from '../../components/DataTable.tsx'
+import { Paginator } from '../../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
 import { SectionHeader } from '../../components/SectionHeader.tsx'
 import { formatDateTime } from '../../lib/dates.ts'
@@ -100,22 +101,14 @@ export function SubmissionsTable({ form, submissions }: SubmissionsTableProps):
         title="Submissions"
         description="Inbound answers, and the records each one created or matched."
       />
+      <Paginator list={submissions} placement="top" />
       <DataTable
         columns={columns}
         rows={submissions.records}
         getRowId={(submission) => submission.id}
         emptyMessage="No submissions yet"
       />
-      {submissions.hasMore && (
-        <button
-          type="button"
-          onClick={submissions.loadMore}
-          disabled={submissions.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"
-        >
-          {submissions.isLoadingMore ? 'Loading…' : 'Load more'}
-        </button>
-      )}
+      <Paginator list={submissions} />
     </div>
   )
 }

package/src/pages/handbook/HandbookPage.tsx

@@ -234,7 +234,7 @@ export function HandbookLayout(): React.JSX.Element {
           {flat.length === 0 && (
             <p className="px-2 py-6 text-center text-[12px] text-ink-faint">No pages yet.</p>
           )}
-          {pages.hasMore && (
+          {pages.hasNext && (
             <p className="px-2 py-3 text-center text-[11px] text-ink-faint">
               This handbook has more pages than one request returns, so the tree below is
               incomplete.