@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/admin/DataPage.tsx

@@ -22,10 +22,13 @@ 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 { useConsentPurposes } from '../../api/resources/consentPurposes.ts'
+import { useRelinkEmailDomains } from '../../api/resources/emailDomainLinker.ts'
 import {
   saveCsv,
   useCommitImportJob,
@@ -34,6 +37,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 +54,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 {
@@ -68,6 +74,7 @@ export function DataPage(): ReactNode {
   const [columnMap, setColumnMap] = useState<ImportColumnMap>({})
   const [conflictMode, setConflictMode] = useState<ImportConflictMode>('skip')
   const [onMissingCompany, setOnMissingCompany] = useState<OnMissingCompany>('skip')
+  const [consentPurposeId, setConsentPurposeId] = useState<string | null>(null)
   const [matchKeyId, setMatchKeyId] = useState<string>(() => defaultMatchKeyId('companies'))
   const [jobId, setJobId] = useState<string | undefined>(undefined)
   const [problem, setProblem] = useState<string | null>(null)
@@ -120,6 +127,7 @@ export function DataPage(): ReactNode {
     setColumnMap({})
     setConflictMode('skip')
     setOnMissingCompany('skip')
+    setConsentPurposeId(null)
     setMatchKeyId(defaultMatchKeyId(object))
     setJobId(undefined)
     setProblem(null)
@@ -140,6 +148,7 @@ export function DataPage(): ReactNode {
       conflictMode,
       onMissingCompany,
       matchKeyId,
+      consentPurposeId,
       ...(map === undefined ? {} : { columnMap: map }),
     })
 
@@ -153,6 +162,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 +186,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 +227,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 +264,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 +393,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>
@@ -380,11 +432,13 @@ export function DataPage(): ReactNode {
             columnMap={columnMap}
             conflictMode={conflictMode}
             onMissingCompany={onMissingCompany}
+            consentPurposeId={consentPurposeId}
             matchKeyId={matchKeyId}
             isPending={createJob.isPending}
             onColumnMapChange={setColumnMap}
             onConflictModeChange={setConflictMode}
             onMissingCompanyChange={setOnMissingCompany}
+            onConsentPurposeChange={setConsentPurposeId}
             onMatchKeyChange={setMatchKeyId}
             onSubmit={(event) => runStep(onRerun(event))}
             onBack={() => {
@@ -405,6 +459,10 @@ export function DataPage(): ReactNode {
             onBack={() => setStep('map')}
           />
         ) : null}
+
+        {step === 'done' && job !== undefined ? (
+          <DonePanel job={job} object={object} onAgain={resetWizard} />
+        ) : null}
       </section>
     </div>
   )
@@ -416,11 +474,13 @@ interface MappingFormProps {
   readonly columnMap: ImportColumnMap
   readonly conflictMode: ImportConflictMode
   readonly onMissingCompany: OnMissingCompany
+  readonly consentPurposeId: string | null
   readonly matchKeyId: string
   readonly isPending: boolean
   readonly onColumnMapChange: (map: ImportColumnMap) => void
   readonly onConflictModeChange: (mode: ImportConflictMode) => void
   readonly onMissingCompanyChange: (mode: OnMissingCompany) => void
+  readonly onConsentPurposeChange: (id: string | null) => void
   readonly onMatchKeyChange: (id: string) => void
   readonly onSubmit: (event: FormEvent) => void
   readonly onBack: () => void
@@ -483,6 +543,12 @@ function MappingForm(props: MappingFormProps): ReactNode {
             </select>
           </Field>
         ) : null}
+        {showMissingCompany ? (
+          <ConsentPurposeField
+            value={props.consentPurposeId}
+            onChange={props.onConsentPurposeChange}
+          />
+        ) : null}
       </div>
       <p className="text-[12px] text-ink-muted">
         {props.conflictMode === 'update'
@@ -661,6 +727,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 (
@@ -827,6 +968,176 @@ function Field({
   )
 }
 
+/**
+ * People imports only. Required whenever the map names `consent_status` or
+ * `consent_at` — the server refuses the job otherwise, so the picker is next
+ * to the columns rather than tucked away.
+ */
+function ConsentPurposeField({
+  value,
+  onChange,
+}: {
+  readonly value: string | null
+  readonly onChange: (id: string | null) => void
+}): ReactNode {
+  const purposes = useConsentPurposes({ sort: 'sort_order', limit: 200 })
+
+  return (
+    <Field label="Consent purpose">
+      <select
+        value={value ?? ''}
+        onChange={(event) => {
+          onChange(event.target.value.length === 0 ? null : event.target.value)
+        }}
+        className="w-full rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent"
+      >
+        <option value="">— none —</option>
+        {purposes.records.map((purpose) => (
+          <option key={purpose.id} value={purpose.id}>
+            {purpose.label}
+          </option>
+        ))}
+      </select>
+    </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.enquiries}{' '}
+          enquiries, {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>
+  )
+}