@kelpie/ui 0.8.0 → 0.10.0

package/src/pages/PersonDetail.tsx

@@ -1,5 +1,11 @@
-import { IN_PROCESS, PREFERRED_CHANNELS } from '@kelpie/schemas'
-import type { Candidate, Person, PersonInput, PreferredChannel } from '@kelpie/schemas'
+import { CONSENT_PURPOSE_STATUS_LABELS, IN_PROCESS, PREFERRED_CHANNELS } from '@kelpie/schemas'
+import type {
+  Candidate,
+  ConsentStatus,
+  Person,
+  PersonInput,
+  PreferredChannel,
+} from '@kelpie/schemas'
 import { useState } from 'react'
 import type { FormEvent } from 'react'
 import { Link, useNavigate, useParams } from 'react-router'
@@ -9,6 +15,8 @@ import type { PatchResult } from '../api/resource.ts'
 import { useCandidates } from '../api/resources/candidates.ts'
 import { useCompanies } from '../api/resources/companies.ts'
 import { useDeals } from '../api/resources/deals.ts'
+import { useEnquiries } from '../api/resources/enquiries.ts'
+import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
 import { useDeletePerson, usePerson, useUpdatePerson } from '../api/resources/people.ts'
 import {
@@ -21,8 +29,11 @@ import { ActivitiesPanel, LatestActivity } from '../components/ActivitiesPanel.t
 import { AgentTasks } from '../components/AgentTasks.tsx'
 import { Chip } from '../components/Chip.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
+import { FormsPanel } from '../components/FormsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
+import { CustomFieldsPanel } from '../components/CustomFieldsPanel.tsx'
+import { useHasCustomFields } from '../components/useHasCustomFields.ts'
 import { InlineEdit } from '../components/InlineEdit.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { RelatedPlanAttention } from '../components/PlanAttention.tsx'
@@ -70,10 +81,12 @@ export function PersonDetail(): React.JSX.Element {
   const { record, isLoading, isNotFound, error } = usePerson(id)
   const deletePerson = useDeletePerson()
   const moduleTabs = inSlotOrder(useRecordTabs('person'))
+  const hasCustomFields = useHasCustomFields('person')
   const [activeTab, setActiveTab] = useState('overview')
   const candidacies = useCandidates({ personIds: id === undefined ? [] : [id] }, {
     enabled: id !== undefined,
   })
+  const formSubmissions = useFormSubmissionsForRecord('person', id)
 
   if (isNotFound) {
     return <NotFoundPanel label="Person" backTo="/people" />
@@ -89,6 +102,7 @@ export function PersonDetail(): React.JSX.Element {
 
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
+    ...(hasCustomFields ? [{ id: 'fields', label: 'Fields' }] : []),
     { id: 'activity', label: 'Activity' },
     ...(candidacies.records.length === 0
       ? []
@@ -96,6 +110,9 @@ export function PersonDetail(): React.JSX.Element {
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
     { id: 'lists', label: 'Lists' },
+    ...(formSubmissions.records.length === 0
+      ? []
+      : [{ id: 'forms', label: 'Forms', count: formSubmissions.records.length }]),
     ...moduleTabs.map((tab) => ({ id: tab.id, label: tab.label })),
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
@@ -132,6 +149,7 @@ export function PersonDetail(): React.JSX.Element {
 
           <RecordTabs tabs={tabs} active={active} onChange={setActiveTab} ariaLabel="Person sections">
             {active === 'overview' && <PersonOverview person={record} />}
+            {active === 'fields' && <PersonFields person={record} />}
             {active === 'activity' && <ActivitiesPanel targetType="person" targetId={record.id} />}
             {active === 'hiring' && (
               <PersonHiring candidacies={candidacies.records} personName={record.name} />
@@ -139,12 +157,15 @@ export function PersonDetail(): React.JSX.Element {
             {active === 'notes' && <NotesPanel targetType="person" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="person" targetId={record.id} />}
             {active === 'lists' && <ListsPanel targetType="person" targetId={record.id} />}
+            {active === 'forms' && <FormsPanel targetType="person" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'person', recordId: record.id })}
           </RecordTabs>
         </div>
 
         <aside className="space-y-4 text-[12px] lg:sticky lg:top-6">
+          <PersonNameParts person={record} />
           <PersonSidebar person={record} />
+          <PersonConsents person={record} />
           <PersonPositions person={record} />
         </aside>
       </div>
@@ -200,6 +221,7 @@ function PersonOverview({ person }: { readonly person: Person }): React.JSX.Elem
   const { patch, error } = usePersonPatch(person)
   const deals = useDeals({ personIds: [person.id] })
   const partnerships = usePartnerships({ personIds: [person.id] })
+  const enquiries = useEnquiries({ personIds: [person.id] })
 
   return (
     <div className="space-y-8">
@@ -213,7 +235,8 @@ function PersonOverview({ person }: { readonly person: Person }): React.JSX.Elem
       <RelatedPlanAttention
         deals={deals.records}
         partnerships={partnerships.records}
-        isLoading={deals.isLoading || partnerships.isLoading}
+        enquiries={enquiries.records}
+        isLoading={deals.isLoading || partnerships.isLoading || enquiries.isLoading}
       />
       <LatestActivity targetType="person" targetId={person.id} />
     </div>
@@ -300,6 +323,46 @@ function PersonHiring({
   )
 }
 
+/**
+ * The parts of the name, beside the name itself rather than instead of it.
+ *
+ * Editing one of these does not rename the record: the heading is `name`, and
+ * `name` is only ever what somebody put there. Both halves are on this page at
+ * once so that is visible rather than surprising — a first name corrected here
+ * leaves the heading alone, and the heading is one click away when it should
+ * change too.
+ */
+function PersonNameParts({ person }: { readonly person: Person }): React.JSX.Element {
+  const { patch, error } = usePersonPatch(person)
+  const fields = [
+    { label: 'Salutation', value: person.salutation, key: 'salutation' },
+    { label: 'First name', value: person.firstName, key: 'firstName' },
+    { label: 'Last name', value: person.lastName, key: 'lastName' },
+    { label: 'Suffix', value: person.suffix, key: 'suffix' },
+  ] as const
+
+  return (
+    <section className="rounded-md border border-border p-3">
+      {error !== null && (
+        <div className="mb-2">
+          <ErrorPanel error={error} />
+        </div>
+      )}
+      {fields.map((field) => (
+        <SidebarField key={field.key} label={field.label}>
+          <InlineEdit
+            value={field.value ?? ''}
+            onChange={(next) => {
+              patch({ [field.key]: next.length > 0 ? next : null })
+            }}
+            displayClassName="not-italic normal-case text-[12px]"
+          />
+        </SidebarField>
+      ))}
+    </section>
+  )
+}
+
 function PersonSidebar({ person }: { readonly person: Person }): React.JSX.Element {
   const { patch, error } = usePersonPatch(person)
 
@@ -379,6 +442,22 @@ function PersonSidebar({ person }: { readonly person: Person }): React.JSX.Eleme
   )
 }
 
+function PersonFields({ person }: { readonly person: Person }): React.JSX.Element {
+  const { patch, error } = usePersonPatch(person)
+  return (
+    <div className="space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <CustomFieldsPanel
+        objectType="person"
+        values={person.customFields}
+        onPatch={(customFields) => {
+          patch({ customFields })
+        }}
+      />
+    </div>
+  )
+}
+
 /**
  * The companies this person holds a title at.
  *
@@ -526,3 +605,73 @@ function PersonPositions({ person }: { readonly person: Person }): React.JSX.Ele
     </section>
   )
 }
+
+/**
+ * The person's effective consent for every workspace purpose, plus the
+ * global `do_not_contact` toggle.
+ *
+ * An `inherited: true` entry has no explicit `person_consents` row and reads
+ * the purpose's default; picking a status writes an override, and the
+ * "Inherit" choice clears the override again. Do-not-contact is the global
+ * Article 21 objection, independent of per-purpose consent.
+ */
+function PersonConsents({ person }: { readonly person: Person }): React.JSX.Element {
+  const { patch, error } = usePersonPatch(person)
+
+  function setConsent(purposeSlug: string, status: ConsentStatus | null): void {
+    patch({ consents: [{ purposeSlug, status }] })
+  }
+
+  return (
+    <section className="rounded-md border border-border p-3">
+      <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
+        Privacy and marketing
+      </h3>
+      {error !== null && (
+        <div className="mb-2">
+          <ErrorPanel error={error} />
+        </div>
+      )}
+      <label className="flex items-center gap-2 py-1 text-[12px] text-ink">
+        <input
+          type="checkbox"
+          checked={person.doNotContact}
+          onChange={(event) => {
+            patch({ doNotContact: event.target.checked })
+          }}
+        />
+        Do not contact
+      </label>
+      {person.consents.length === 0 ? (
+        <p className="mt-2 text-[11px] text-ink-muted">
+          No consent purposes yet. Define them on /admin/privacy.
+        </p>
+      ) : (
+        person.consents.map((consent) => (
+          <SidebarField key={consent.purposeSlug} label={consent.purposeLabel}>
+            <div className="flex items-center gap-2">
+              <select
+                value={consent.inherited ? '' : consent.status}
+                onChange={(event) => {
+                  const value = event.target.value
+                  setConsent(
+                    consent.purposeSlug,
+                    value === '' ? null : (value as ConsentStatus),
+                  )
+                }}
+                className="rounded-md border border-border bg-transparent px-2 py-1 text-[12px] outline-none focus:border-accent"
+              >
+                <option value="">Inherit ({CONSENT_PURPOSE_STATUS_LABELS[consent.status]})</option>
+                <option value="granted">Granted</option>
+                <option value="withdrawn">Withdrawn</option>
+              </select>
+              {!consent.inherited && consent.source !== null && (
+                <span className="text-[10px] text-ink-faint">via {consent.source}</span>
+              )}
+            </div>
+          </SidebarField>
+        ))
+      )}
+    </section>
+  )
+}

package/src/pages/PlanningPage.tsx

@@ -9,6 +9,7 @@ import { useState } from 'react'
 import type { FormEvent } from 'react'
 
 import { useDeals } from '../api/resources/deals.ts'
+import { useEnquiries } from '../api/resources/enquiries.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { useOpportunities } from '../api/resources/opportunities.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
@@ -213,8 +214,10 @@ function usePipelineTargets(): {
   const opportunities = useOpportunities({ limit: MAX_PAGE_SIZE })
   const raises = useRaises({ limit: MAX_PAGE_SIZE })
   const partnerships = usePartnerships({ limit: MAX_PAGE_SIZE })
+  const enquiries = useEnquiries({ limit: MAX_PAGE_SIZE })
 
   const byKind: Readonly<Record<PipelineKind, readonly PipelineTarget[]>> = {
+    enquiry: enquiries.records.map((record) => ({ id: record.id, name: record.name })),
     deal: deals.records.map((record) => ({ id: record.id, name: record.name })),
     opportunity: opportunities.records.map((record) => ({ id: record.id, name: record.name })),
     raise: raises.records.map((record) => ({ id: record.id, name: record.name })),

package/src/pages/RaiseDetail.tsx

@@ -18,6 +18,8 @@ import type { ChipTone } from '../components/Chip.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
+import { CustomFieldsPanel } from '../components/CustomFieldsPanel.tsx'
+import { useHasCustomFields } from '../components/useHasCustomFields.ts'
 import { InlineEdit } from '../components/InlineEdit.tsx'
 import { ListsPanel } from '../components/ListsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
@@ -60,6 +62,7 @@ export function RaiseDetail(): React.JSX.Element {
   const { record, isLoading, isNotFound, error } = useRaise(id)
   const deleteRaise = useDeleteRaise()
   const moduleTabs = inSlotOrder(useRecordTabs('raise'))
+  const hasCustomFields = useHasCustomFields('raise')
   const [activeTab, setActiveTab] = useState('overview')
 
   if (isNotFound) {
@@ -76,6 +79,7 @@ export function RaiseDetail(): React.JSX.Element {
 
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
+    ...(hasCustomFields ? [{ id: 'fields', label: 'Fields' }] : []),
     { id: 'plan', label: 'Plan' },
     { id: 'activity', label: 'Activity' },
     { id: 'notes', label: 'Notes' },
@@ -117,6 +121,7 @@ export function RaiseDetail(): React.JSX.Element {
 
           <RecordTabs tabs={tabs} active={active} onChange={setActiveTab} ariaLabel="Raise sections">
             {active === 'overview' && <RaiseOverview raise={record} />}
+            {active === 'fields' && <RaiseFields raise={record} />}
             {active === 'plan' && <PlanPanel targetType="raise" targetId={record.id} />}
             {active === 'activity' && <ActivitiesPanel targetType="raise" targetId={record.id} />}
             {active === 'notes' && <NotesPanel targetType="raise" targetId={record.id} />}
@@ -384,6 +389,22 @@ function RaiseSidebar({ raise }: { readonly raise: Raise }): React.JSX.Element {
   )
 }
 
+function RaiseFields({ raise }: { readonly raise: Raise }): React.JSX.Element {
+  const { patch, error } = useRaisePatch(raise)
+  return (
+    <div className="space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <CustomFieldsPanel
+        objectType="raise"
+        values={raise.customFields}
+        onPatch={(customFields) => {
+          patch({ customFields })
+        }}
+      />
+    </div>
+  )
+}
+
 /** The key people on the raise, linked and unlinked by replacing `person_ids`. */
 function RaiseKeyPeople({ raise }: { readonly raise: Raise }): React.JSX.Element {
   const { patch, error } = useRaisePatch(raise)

package/src/pages/RoleDetail.tsx

@@ -243,7 +243,7 @@ function RoleCandidates({ role }: { readonly role: Role }): React.JSX.Element {
       ) : (
         <>
           <Paginator list={candidates} placement="top" />
-          <ul className="overflow-hidden rounded-md border border-border">
+          <ul className="rounded-md border border-border">
             {candidates.records.map((candidate) => (
               <CandidateRow
                 key={candidate.id}

package/src/pages/SearchPage.tsx

@@ -19,6 +19,7 @@ const COLLECTIONS: Readonly<Record<SearchCollection, { label: string; path: (id:
   person: { label: 'People', path: (id) => `/people/${id}` },
   role: { label: 'Roles', path: (id) => `/hiring/${id}` },
   company: { label: 'Companies', path: (id) => `/companies/${id}` },
+  enquiry: { label: 'Enquiries', path: (id) => `/enquiries/${id}` },
   deal: { label: 'Deals', path: (id) => `/deals/${id}` },
   opportunity: { label: 'Opportunities', path: (id) => `/opportunities/${id}` },
   raise: { label: 'Fundraising', path: (id) => `/fundraising/${id}` },

package/src/pages/admin/DataPage.tsx

@@ -27,6 +27,7 @@ import type {
 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,
@@ -73,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)
@@ -125,6 +127,7 @@ export function DataPage(): ReactNode {
     setColumnMap({})
     setConflictMode('skip')
     setOnMissingCompany('skip')
+    setConsentPurposeId(null)
     setMatchKeyId(defaultMatchKeyId(object))
     setJobId(undefined)
     setProblem(null)
@@ -145,6 +148,7 @@ export function DataPage(): ReactNode {
       conflictMode,
       onMissingCompany,
       matchKeyId,
+      consentPurposeId,
       ...(map === undefined ? {} : { columnMap: map }),
     })
 
@@ -428,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={() => {
@@ -468,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
@@ -535,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'
@@ -954,6 +968,40 @@ 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
 }
@@ -1011,9 +1059,9 @@ function SampleDataSection(): ReactNode {
         <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.
+          {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 : (