@kelpie/ui 0.6.0 → 0.8.0

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.

package/src/pages/hiringDirectory.ts

@@ -45,7 +45,7 @@ export function useRoleCandidateCounts(roleIds: readonly string[]): RoleCandidat
   return {
     countFor: (roleId) => countByRole.get(roleId) ?? 0,
     isLoading: candidates.isLoading,
-    isComplete: !candidates.hasMore,
+    isComplete: !candidates.hasNext,
   }
 }
 
@@ -95,7 +95,7 @@ export function useCandidateNotes(candidateIds: readonly string[]): CandidateNot
   return {
     noteFor: (candidateId) => newestByCandidate.get(candidateId),
     isLoading: notes.isLoading,
-    isComplete: !notes.hasMore,
+    isComplete: !notes.hasNext,
   }
 }
 

package/src/pages/onboarding/WorkspaceStepPage.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import type { FormEvent } from 'react'
 import { Link, Navigate, useNavigate } from 'react-router'
 
+import { useInstallSampleData } from '../../api/resources/sampleData.ts'
 import { useCreateWorkspace, useSession } from '../../api/resources/session.ts'
 import { ErrorPanel } from '../../components/QueryState.tsx'
 import { SubmitButton, TextField } from '../auth/AuthForm.tsx'
@@ -48,10 +49,12 @@ export function WorkspaceStepPage(): React.JSX.Element {
   const navigate = useNavigate()
   const { isSignedOut } = useSession()
   const createWorkspace = useCreateWorkspace()
+  const installSampleData = useInstallSampleData()
   const [name, setName] = useState('')
   const [slug, setSlug] = useState('')
   const [slugEdited, setSlugEdited] = useState(false)
   const [timezone] = useState(browserTimezone)
+  const [seedSample, setSeedSample] = useState(false)
 
   function changeName(value: string): void {
     setName(value)
@@ -71,7 +74,18 @@ export function WorkspaceStepPage(): React.JSX.Element {
 
     createWorkspace
       .runAsync({ name: name.trim(), slug: slug.trim(), timezone })
-      .then(() => navigate('/onboarding/invites', { replace: true }))
+      .then(async (workspace) => {
+        if (seedSample) {
+          // A refusal here does not block the wizard: the workspace itself is
+          // already created, and the invites step is what comes next either
+          // way. The error stays on screen so the reader sees what failed.
+          await installSampleData
+            .runAsync({ workspaceId: workspace.id })
+            .catch(() => undefined)
+        }
+
+        navigate('/onboarding/invites', { replace: true })
+      })
       .catch(() => undefined)
   }
 
@@ -110,11 +124,25 @@ export function WorkspaceStepPage(): React.JSX.Element {
         <p className="text-[11px] text-ink-faint">
           Timezone: {timezone}. Change it later in Admin → Workspace.
         </p>
+        <label className="flex items-start gap-2 text-[12px] text-ink">
+          <input
+            type="checkbox"
+            checked={seedSample}
+            onChange={(event) => setSeedSample(event.target.checked)}
+            className="mt-0.5 h-4 w-4 rounded border-border text-accent focus:ring-accent"
+          />
+          <span>
+            Install sample data — a small set of companies, people, deals, opportunities,
+            fundraising, partnerships, and hiring so the workspace has something to look at.
+            You can delete it later.
+          </span>
+        </label>
         {createWorkspace.error !== null && <ErrorPanel error={createWorkspace.error} />}
+        {installSampleData.error !== null && <ErrorPanel error={installSampleData.error} />}
         <SubmitButton
           label="Continue"
-          pendingLabel="Creating…"
-          isPending={createWorkspace.isPending}
+          pendingLabel={installSampleData.isPending ? 'Installing sample data…' : 'Creating…'}
+          isPending={createWorkspace.isPending || installSampleData.isPending}
         />
       </form>
     </AuthLayout>

package/src/pages/positionDirectory.ts

@@ -64,7 +64,7 @@ export function usePeopleDirectory(personIds: readonly string[]): PeopleDirector
         .map((held) => companyNameById.get(held.companyId))
         .filter((name): name is string => name !== undefined),
     isLoading: positions.isLoading || companies.isLoading,
-    isComplete: !positions.hasMore && !companies.hasMore,
+    isComplete: !positions.hasNext && !companies.hasNext,
   }
 }
 
@@ -93,6 +93,6 @@ export function useCompanyHeadcounts(companyIds: readonly string[]): CompanyHead
   return {
     countFor: (companyId) => countByCompany.get(companyId) ?? 0,
     isLoading: positions.isLoading,
-    isComplete: !positions.hasMore,
+    isComplete: !positions.hasNext,
   }
 }

package/src/styles.css

@@ -58,8 +58,8 @@
   --surface-raised: #ffffff;
   --surface-sunken: #f4f4f5;
   --ink: #18181b;
-  --ink-muted: #71717a;
-  --ink-faint: #a1a1aa;
+  --ink-muted: #52525b;
+  --ink-faint: #71717a;
   --border: #e4e4e7;
   --border-strong: #d4d4d8;
   --accent: #0f766e;
@@ -75,7 +75,7 @@
   --warning-soft: #fffbeb;
   --sidebar: #fafafa;
   --sidebar-ink: #18181b;
-  --sidebar-muted: #71717a;
+  --sidebar-muted: #52525b;
   --sidebar-hover: #f4f4f5;
   --sidebar-active: #ececef;
   --sidebar-border: #e4e4e7;