@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/PeoplePage.tsx

@@ -2,14 +2,41 @@ import type { Person } from '@kelpie/schemas'
 import { useState } from 'react'
 import { useNavigate } from 'react-router'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useCreatePerson, usePeople } from '../api/resources/people.ts'
 import { Chip } from '../components/Chip.tsx'
+import { ColumnPicker } from '../components/ColumnPicker.tsx'
 import { DataTable } from '../components/DataTable.tsx'
 import type { Column } from '../components/DataTable.tsx'
 import { FilterBar, PageHeader } from '../components/PageHeader.tsx'
+import { Paginator } from '../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
+import { formatDate } from '../lib/dates.ts'
+import { useListView } from '../lib/listView.ts'
+import { serverSortOnly } from '../lib/sort.ts'
 import { usePeopleDirectory } from './positionDirectory.ts'
 
+/**
+ * Column catalog for People. Every field the wire schema carries appears here,
+ * plus the two joined-in columns (position title, company names) computed from
+ * the position directory. `sortKey` names the server field; `getSortValue`
+ * enables the DataTable's page-local sort for columns the server does not
+ * index. Everything not in `DEFAULT_VISIBLE_KEYS` starts hidden and comes back
+ * through the Columns picker.
+ */
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'email', 'phones', 'company', 'updatedAt']
+
+/** The sort fields `/v1/people` accepts. Anything else is a client-only sort. */
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
+
+/** Written out because "Firstname" is what deriving these from the key would give. */
+const NAME_PART_HEADERS = {
+  salutation: 'Salutation',
+  firstName: 'First name',
+  lastName: 'Last name',
+  suffix: 'Suffix',
+} as const
+
 /**
  * The People list.
  *
@@ -22,8 +49,12 @@ export function PeoplePage(): React.JSX.Element {
   const [term, setTerm] = useState('')
   const [sort, setSort] = useState<string | undefined>(undefined)
   const navigate = useNavigate()
+  const timezone = useTimezone()
   const hasFilter = term.trim().length > 0
-  const people = usePeople({ term: hasFilter ? term.trim() : undefined, sort })
+  const people = usePeople({
+    term: hasFilter ? term.trim() : undefined,
+    sort: serverSortOnly(sort, SERVER_SORT_KEYS),
+  })
   const directory = usePeopleDirectory(people.records.map((person) => person.id))
   const createPerson = useCreatePerson()
 
@@ -42,23 +73,115 @@ export function PeoplePage(): React.JSX.Element {
       sortKey: 'name',
       render: (person) => <span className="font-medium text-ink">{person.name}</span>,
     },
+    // Hidden by default, and sorted page-locally rather than by the server: the
+    // parts are nullable, and `?sort=` is keyset paged, which cannot seek past a
+    // null. The catalog carries them so a workspace that imported them can put
+    // them back through the Columns picker.
+    ...(['salutation', 'firstName', 'lastName', 'suffix'] as const).map(
+      (key): Column<Person> => ({
+        key,
+        header: NAME_PART_HEADERS[key],
+        getSortValue: (person) => person[key],
+        render: (person) => person[key] ?? '—',
+      }),
+    ),
     {
       key: 'position',
       header: 'Position',
+      getSortValue: (person) => directory.titleFor(person.id) ?? null,
       render: (person) => directory.titleFor(person.id) ?? '—',
     },
     {
       key: 'company',
       header: 'Company',
+      getSortValue: (person) => directory.companyNamesFor(person.id).join(', ') || null,
       render: (person) => {
         const names = directory.companyNamesFor(person.id)
 
         return names.length > 0 ? names.join(', ') : '—'
       },
     },
+    {
+      key: 'email',
+      header: 'Email',
+      getSortValue: (person) => person.email,
+      render: (person) =>
+        person.email === null ? (
+          '—'
+        ) : (
+          <span className="font-mono text-[12px] text-ink-muted">{person.email}</span>
+        ),
+    },
+    {
+      key: 'phones',
+      header: 'Phones',
+      getSortValue: (person) => person.phones.join(', ') || null,
+      render: (person) =>
+        person.phones.length === 0 ? '—' : (
+          <span className="font-mono text-[12px] text-ink-muted">{person.phones.join(', ')}</span>
+        ),
+    },
+    {
+      key: 'socials',
+      header: 'Socials',
+      getSortValue: (person) => person.socialProfiles.map((entry) => entry.network).join(', ') || null,
+      render: (person) =>
+        person.socialProfiles.length === 0 ? '—' : (
+          <span className="flex flex-wrap gap-1">
+            {person.socialProfiles.map((entry) => (
+              <Chip key={entry.network}>
+                <span className="text-[10px]">{entry.network}</span>
+              </Chip>
+            ))}
+          </span>
+        ),
+    },
+    {
+      key: 'location',
+      header: 'Location',
+      getSortValue: (person) => person.location,
+      render: (person) => person.location ?? '—',
+    },
+    {
+      key: 'timezone',
+      header: 'Timezone',
+      getSortValue: (person) => person.timezone,
+      render: (person) =>
+        person.timezone === null ? '—' : (
+          <span className="font-mono text-[12px] text-ink-muted">{person.timezone}</span>
+        ),
+    },
+    {
+      key: 'preferredChannel',
+      header: 'Preferred channel',
+      getSortValue: (person) => person.preferredChannel,
+      render: (person) => <span className="capitalize">{person.preferredChannel}</span>,
+    },
+    {
+      key: 'influence',
+      header: 'Influence',
+      getSortValue: (person) => person.influence,
+      render: (person) => <span className="capitalize">{person.influence.replace('_', ' ')}</span>,
+    },
+    {
+      key: 'relationship',
+      header: 'Relationship',
+      getSortValue: (person) => person.relationship,
+      render: (person) => <span className="capitalize">{person.relationship}</span>,
+    },
+    {
+      key: 'summary',
+      header: 'Summary',
+      getSortValue: (person) => person.summary || null,
+      render: (person) =>
+        person.summary.length === 0 ? '—' : (
+          <span className="text-ink-muted">{person.summary}</span>
+        ),
+    },
     {
       key: 'tags',
       header: 'Tags',
+      getSortValue: (person) => person.tags.join(', ') || null,
       render: (person) =>
         person.tags.length > 0 ? (
           <span className="flex flex-wrap gap-1">
@@ -72,8 +195,31 @@ export function PeoplePage(): React.JSX.Element {
           '—'
         ),
     },
+    {
+      key: 'lastContactedAt',
+      header: 'Last contacted',
+      getSortValue: (person) => person.lastContactedAt,
+      render: (person) =>
+        person.lastContactedAt === null ? '—' : formatDate(person.lastContactedAt, timezone),
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      sortKey: 'created_at',
+      render: (person) => formatDate(person.createdAt, timezone),
+    },
+    {
+      key: 'updatedAt',
+      header: 'Updated',
+      sortKey: 'updated_at',
+      render: (person) => formatDate(person.updatedAt, timezone),
+    },
   ]
 
+  const supportedKeys = columns.map((column) => column.key)
+  const listView = useListView('people', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
   return (
     <div className="animate-fade-in">
       <PageHeader
@@ -82,6 +228,13 @@ export function PeoplePage(): React.JSX.Element {
           void addPerson()
         }}
         addLabel="Add person"
+        actions={
+          <ColumnPicker
+            options={pickerOptions}
+            visibleKeys={listView.visibleKeys}
+            onChange={listView.setVisibleKeys}
+          />
+        }
       />
       <FilterBar
         value={term}
@@ -101,6 +254,7 @@ export function PeoplePage(): React.JSX.Element {
         <LoadingPanel label="Loading people…" />
       ) : (
         <>
+          <Paginator list={people} placement="top" />
           <DataTable
             columns={columns}
             rows={people.records}
@@ -122,22 +276,14 @@ export function PeoplePage(): React.JSX.Element {
             }
             sort={sort}
             onSortChange={setSort}
+            visibleColumnKeys={listView.visibleKeys}
           />
           {!directory.isComplete && !directory.isLoading && (
             <p className="mt-2 text-[11px] text-ink-faint">
               These people hold more positions than one page returns, so some rows may read “—”.
             </p>
           )}
-          {people.hasMore && (
-            <button
-              type="button"
-              onClick={people.loadMore}
-              disabled={people.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"
-            >
-              {people.isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
+          <Paginator list={people} />
         </>
       )}
     </div>

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,12 +29,16 @@ 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'
 import { ErrorPanel, LoadingPanel, NotFoundPanel } from '../components/QueryState.tsx'
+import { ListsPanel } from '../components/ListsPanel.tsx'
 import { RecordTabs } from '../components/RecordTabs.tsx'
 import type { RecordTabDescriptor } from '../components/RecordTabs.tsx'
 import { SectionHeader } from '../components/SectionHeader.tsx'
@@ -69,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" />
@@ -88,12 +102,17 @@ 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
       ? []
       : [{ id: 'hiring', label: 'Hiring', count: candidacies.records.length }]),
     { 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'
@@ -130,18 +149,23 @@ 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} />
             )}
             {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>
@@ -197,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">
@@ -210,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>
@@ -297,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)
 
@@ -376,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.
  *
@@ -408,7 +490,7 @@ function PersonPositions({ person }: { readonly person: Person }): React.JSX.Ele
   function submit(event: FormEvent): void {
     event.preventDefault()
 
-    if (companyId.length === 0 || title.trim().length === 0) {
+    if (companyId.length === 0) {
       return
     }
 
@@ -500,9 +582,8 @@ function PersonPositions({ person }: { readonly person: Person }): React.JSX.Ele
             onChange={(event) => {
               setTitle(event.target.value)
             }}
-            placeholder="Position title"
+            placeholder="Position title (optional)"
             className="w-full rounded-md border border-border bg-surface-raised px-2 py-1.5 text-[12px] outline-none focus:border-accent"
-            required
           />
           <div className="flex justify-end gap-2">
             <button
@@ -524,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>
+  )
+}