@kelpie/ui 0.6.0 → 0.8.0

package/src/pages/admin/DataPage.tsx

@@ -5,6 +5,7 @@ import {
   MATCH_KEYS,
   OBJECT_COLUMNS,
   OBJECT_LABELS,
+  ON_MISSING_COMPANY_LABELS,
   SOURCE_LABELS,
   defaultMatchKeyId,
   findMatchKey,
@@ -18,11 +19,15 @@ import type {
   ImportObject,
   ImportPreviewRow,
   ImportRowAction,
+  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,
@@ -31,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'
 
 /**
@@ -46,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 {
@@ -64,6 +72,7 @@ export function DataPage(): ReactNode {
   const [file, setFile] = useState<File | null>(null)
   const [columnMap, setColumnMap] = useState<ImportColumnMap>({})
   const [conflictMode, setConflictMode] = useState<ImportConflictMode>('skip')
+  const [onMissingCompany, setOnMissingCompany] = useState<OnMissingCompany>('skip')
   const [matchKeyId, setMatchKeyId] = useState<string>(() => defaultMatchKeyId('companies'))
   const [jobId, setJobId] = useState<string | undefined>(undefined)
   const [problem, setProblem] = useState<string | null>(null)
@@ -115,6 +124,7 @@ export function DataPage(): ReactNode {
     setFile(null)
     setColumnMap({})
     setConflictMode('skip')
+    setOnMissingCompany('skip')
     setMatchKeyId(defaultMatchKeyId(object))
     setJobId(undefined)
     setProblem(null)
@@ -133,6 +143,7 @@ export function DataPage(): ReactNode {
       source,
       object,
       conflictMode,
+      onMissingCompany,
       matchKeyId,
       ...(map === undefined ? {} : { columnMap: map }),
     })
@@ -147,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]
 
@@ -158,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> {
@@ -193,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.
@@ -217,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">
@@ -342,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>
@@ -373,10 +427,12 @@ export function DataPage(): ReactNode {
             object={object}
             columnMap={columnMap}
             conflictMode={conflictMode}
+            onMissingCompany={onMissingCompany}
             matchKeyId={matchKeyId}
             isPending={createJob.isPending}
             onColumnMapChange={setColumnMap}
             onConflictModeChange={setConflictMode}
+            onMissingCompanyChange={setOnMissingCompany}
             onMatchKeyChange={setMatchKeyId}
             onSubmit={(event) => runStep(onRerun(event))}
             onBack={() => {
@@ -397,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>
   )
@@ -407,10 +467,12 @@ interface MappingFormProps {
   readonly object: ImportObject
   readonly columnMap: ImportColumnMap
   readonly conflictMode: ImportConflictMode
+  readonly onMissingCompany: OnMissingCompany
   readonly matchKeyId: string
   readonly isPending: boolean
   readonly onColumnMapChange: (map: ImportColumnMap) => void
   readonly onConflictModeChange: (mode: ImportConflictMode) => void
+  readonly onMissingCompanyChange: (mode: OnMissingCompany) => void
   readonly onMatchKeyChange: (id: string) => void
   readonly onSubmit: (event: FormEvent) => void
   readonly onBack: () => void
@@ -419,6 +481,9 @@ interface MappingFormProps {
 function MappingForm(props: MappingFormProps): ReactNode {
   const matchKey = findMatchKey(props.object, props.matchKeyId)
   const keyColumns = new Set(matchKey?.columns ?? [])
+  // People rows can carry a company and title that drive a Position, so only a
+  // People import has a company to be missing.
+  const showMissingCompany = props.object === 'people'
 
   return (
     <form className="space-y-4" onSubmit={props.onSubmit}>
@@ -453,6 +518,23 @@ function MappingForm(props: MappingFormProps): ReactNode {
             ))}
           </select>
         </Field>
+        {showMissingCompany ? (
+          <Field label="Missing company">
+            <select
+              value={props.onMissingCompany}
+              onChange={(event) =>
+                props.onMissingCompanyChange(event.target.value as OnMissingCompany)
+              }
+              className="w-full rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent"
+            >
+              {Object.entries(ON_MISSING_COMPANY_LABELS).map(([mode, label]) => (
+                <option key={mode} value={mode}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </Field>
+        ) : null}
       </div>
       <p className="text-[12px] text-ink-muted">
         {props.conflictMode === 'update'
@@ -460,6 +542,16 @@ function MappingForm(props: MappingFormProps): ReactNode {
           : 'Rows matching an existing record on the key column are skipped.'}{' '}
         Key columns must be mapped.
       </p>
+      {showMissingCompany ? (
+        <p className="text-[12px] text-ink-muted">
+          Map <span className="font-mono text-[11px]">company_domain</span> or{' '}
+          <span className="font-mono text-[11px]">company_name</span> and{' '}
+          <span className="font-mono text-[11px]">title</span> to link a position for each person.{' '}
+          {props.onMissingCompany === 'create'
+            ? 'A company that is not here yet is created from the row.'
+            : 'A company that is not here yet is left unlinked and reported as a warning.'}
+        </p>
+      ) : null}
       <div className="overflow-hidden rounded-md border border-border">
         <table className="w-full text-left text-[13px]">
           <thead>
@@ -576,29 +668,7 @@ function ResultPanel({ job, object, isCommitting, onCommit, onBack }: ResultPane
 
       {job.errors.length > 0 ? (
         <div className="space-y-2">
-          <div className="overflow-hidden rounded-md border border-border">
-            <table className="w-full text-left text-[13px]">
-              <thead>
-                <tr className="border-b border-border bg-surface text-[11px] font-semibold tracking-wide text-ink-muted uppercase">
-                  <th className="px-4 py-2.5">Row</th>
-                  <th className="px-4 py-2.5">Field</th>
-                  <th className="px-4 py-2.5">Message</th>
-                </tr>
-              </thead>
-              <tbody>
-                {job.errors.map((error, index) => (
-                  <tr
-                    key={`${String(error.row)}-${error.field}-${String(index)}`}
-                    className="border-b border-border last:border-0"
-                  >
-                    <td className="px-4 py-2.5 font-mono text-[12px]">{error.row}</td>
-                    <td className="px-4 py-2.5 font-mono text-[12px]">{error.field}</td>
-                    <td className="px-4 py-2.5 text-ink-muted">{error.message}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </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.
@@ -609,6 +679,19 @@ function ResultPanel({ job, object, isCommitting, onCommit, onBack }: ResultPane
         <p className="text-[13px] text-ink-muted">No row errors.</p>
       )}
 
+      {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 imported. Each note says what was left out, such as a person whose
+              company was not here to link a position to.
+            </p>
+          </div>
+          <IssueTable rows={job.warnings} />
+        </div>
+      ) : null}
+
       <div className="flex flex-wrap gap-3">
         <button
           type="button"
@@ -630,6 +713,110 @@ 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 (
+    <div className="overflow-hidden rounded-md border border-border">
+      <table className="w-full text-left text-[13px]">
+        <thead>
+          <tr className="border-b border-border bg-surface text-[11px] font-semibold tracking-wide text-ink-muted uppercase">
+            <th className="px-4 py-2.5">Row</th>
+            <th className="px-4 py-2.5">Field</th>
+            <th className="px-4 py-2.5">Message</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((issue, index) => (
+            <tr
+              key={`${String(issue.row)}-${issue.field}-${String(index)}`}
+              className="border-b border-border last:border-0"
+            >
+              <td className="px-4 py-2.5 font-mono text-[12px]">{issue.row}</td>
+              <td className="px-4 py-2.5 font-mono text-[12px]">{issue.field}</td>
+              <td className="px-4 py-2.5 text-ink-muted">{issue.message}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
 function PreviewTable({
   object,
   rows,
@@ -770,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} />
     </>
   )
 }