@kelpie/ui 0.8.0 → 0.9.0

package/src/pages/ListDetail.tsx

@@ -6,6 +6,7 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies } from '../api/resources/companies.ts'
+import { useConsentPurposes } from '../api/resources/consentPurposes.ts'
 import { useDeals } from '../api/resources/deals.ts'
 import { useDeleteList, useList, useUpdateList } from '../api/resources/lists.ts'
 import {
@@ -13,6 +14,7 @@ import {
   useListMembers,
   useRemoveListMember,
 } from '../api/resources/listMembers.ts'
+import { useEnquiries } from '../api/resources/enquiries.ts'
 import { useOpportunities } from '../api/resources/opportunities.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
 import { usePeople } from '../api/resources/people.ts'
@@ -84,11 +86,57 @@ export function ListDetail(): React.JSX.Element {
 
       <ListDescription list={record} />
 
+      {record.targetType === 'person' && <ListConsentPurpose list={record} />}
+
       <ListMembers listId={record.id} targetType={record.targetType} />
     </div>
   )
 }
 
+function ListConsentPurpose({ list }: { readonly list: List }): React.JSX.Element {
+  const { patch, error } = useListPatch(list)
+  const purposes = useConsentPurposes({ sort: 'sort_order', limit: 200 })
+  const options = [
+    { value: '', label: '— none —' },
+    ...purposes.records.map((purpose) => ({ value: purpose.id, label: purpose.label })),
+  ]
+
+  return (
+    <div className="mb-6 rounded-md border border-border bg-surface-raised p-4 text-[13px]">
+      {error !== null && (
+        <div className="mb-2">
+          <ErrorPanel error={error} />
+        </div>
+      )}
+      <div className="flex flex-wrap items-baseline justify-between gap-3">
+        <div>
+          <div className="text-[12px] font-medium text-ink">Consent purpose</div>
+          <p className="mt-0.5 text-[12px] text-ink-muted">
+            A form submit that adds a person to this list also grants this purpose. Manual and
+            API adds capture nothing.
+          </p>
+        </div>
+        <label className="shrink-0">
+          <select
+            value={list.consentPurposeId ?? ''}
+            onChange={(event) => {
+              const value = event.target.value
+              patch({ consentPurposeId: value.length === 0 ? null : value })
+            }}
+            className="rounded-md border border-border bg-transparent px-2 py-1 text-[12px] outline-none focus:border-accent"
+          >
+            {options.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+    </div>
+  )
+}
+
 function useListPatch(list: List): PatchResult<ListInput> {
   return usePatch(useUpdateList, list)
 }
@@ -271,6 +319,8 @@ function detailPathFor(targetType: RecordTargetType, targetId: string): string {
       return `/partnerships/${targetId}`
     case 'raise':
       return `/fundraising/${targetId}`
+    case 'enquiry':
+      return `/enquiries/${targetId}`
     case 'candidate':
       // A candidate has no page of its own; the person's does.
       return `/hiring`
@@ -304,6 +354,8 @@ function MemberPicker({
       return <PartnershipsPicker attached={attached} onPick={onPick} />
     case 'raise':
       return <RaisesPicker attached={attached} onPick={onPick} />
+    case 'enquiry':
+      return <EnquiriesPicker attached={attached} onPick={onPick} />
     case 'candidate':
       return (
         <p className="text-[12px] text-ink-faint">
@@ -379,6 +431,16 @@ function RaisesPicker({ attached, onPick }: PickerProps): React.JSX.Element {
   return <PickerBox onQueryChange={setSearch} onPick={onPick} options={options} />
 }
 
+function EnquiriesPicker({ attached, onPick }: PickerProps): React.JSX.Element {
+  const [search, setSearch] = useState('')
+  const records = useEnquiries({ term: trimmedOrUndefined(search) })
+  const options: readonly SearchOption[] = records.records
+    .filter((row) => !attached.has(row.id))
+    .map((row) => ({ id: row.id, label: row.name }))
+
+  return <PickerBox onQueryChange={setSearch} onPick={onPick} options={options} />
+}
+
 function PickerBox({
   onQueryChange,
   onPick,

package/src/pages/OpportunityDetail.tsx

@@ -1,16 +1,19 @@
 import type { Opportunity, OpportunityInput, PipelineStage } from '@kelpie/schemas'
 import { useState } from 'react'
+import type { FormEvent } from 'react'
 import { Link, useNavigate, useParams } from 'react-router'
 
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
+import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
 import {
   useDeleteOpportunity,
   useOpportunity,
   useUpdateOpportunity,
 } from '../api/resources/opportunities.ts'
+import { usePeople } from '../api/resources/people.ts'
 import { usePipelineStages } from '../api/resources/pipelineStages.ts'
 import { useRecordPlanItems } from '../api/resources/planItems.ts'
 import { ActivitiesPanel, LatestActivity } from '../components/ActivitiesPanel.tsx'
@@ -20,6 +23,9 @@ 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 { FormsPanel } from '../components/FormsPanel.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'
@@ -28,6 +34,7 @@ import { PlanPanel } from '../components/PlanPanel.tsx'
 import { ErrorPanel, LoadingPanel, NotFoundPanel } from '../components/QueryState.tsx'
 import { RecordTabs } from '../components/RecordTabs.tsx'
 import type { RecordTabDescriptor } from '../components/RecordTabs.tsx'
+import { SectionHeader } from '../components/SectionHeader.tsx'
 import { SidebarField } from '../components/SidebarField.tsx'
 import { SummaryBlock } from '../components/SummaryBlock.tsx'
 import { formatDay } from '../lib/dates.ts'
@@ -39,8 +46,10 @@ import { toTags } from './fields.ts'
  * One opportunity.
  *
  * The same shape as `DealDetail` minus what an opportunity does not have: no
- * value, no contacts, and a company that may be absent. A UI module can add its
- * own tab through the `opportunity` record-tab slot.
+ * value, and a company that may be absent. People attach through `person_links`
+ * the same way they do on a deal, and they are shown in the same contacts
+ * section in the aside. A UI module can add its own tab through the
+ * `opportunity` record-tab slot.
  */
 
 const STAGE_TONES: Readonly<Record<string, ChipTone>> = {
@@ -54,7 +63,9 @@ export function OpportunityDetail(): React.JSX.Element {
   const { record, isLoading, isNotFound, error } = useOpportunity(id)
   const deleteOpportunity = useDeleteOpportunity()
   const moduleTabs = inSlotOrder(useRecordTabs('opportunity'))
+  const hasCustomFields = useHasCustomFields('opportunity')
   const [activeTab, setActiveTab] = useState('overview')
+  const formSubmissions = useFormSubmissionsForRecord('opportunity', id)
 
   if (isNotFound) {
     return <NotFoundPanel label="Opportunity" backTo="/opportunities" />
@@ -70,11 +81,15 @@ export function OpportunityDetail(): 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' },
     { 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'
@@ -116,6 +131,7 @@ export function OpportunityDetail(): React.JSX.Element {
             ariaLabel="Opportunity sections"
           >
             {active === 'overview' && <OpportunityOverview opportunity={record} />}
+            {active === 'fields' && <OpportunityFields opportunity={record} />}
             {active === 'plan' && <PlanPanel targetType="opportunity" targetId={record.id} />}
             {active === 'activity' && (
               <ActivitiesPanel targetType="opportunity" targetId={record.id} />
@@ -125,12 +141,14 @@ export function OpportunityDetail(): React.JSX.Element {
               <DecisionsPanel targetType="opportunity" targetId={record.id} />
             )}
             {active === 'lists' && <ListsPanel targetType="opportunity" targetId={record.id} />}
+            {active === 'forms' && <FormsPanel targetType="opportunity" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'opportunity', recordId: record.id })}
           </RecordTabs>
         </div>
 
         <aside className="space-y-4 text-[12px] lg:sticky lg:top-6">
           <OpportunitySidebar opportunity={record} />
+          <OpportunityContacts opportunity={record} />
         </aside>
       </div>
     </div>
@@ -338,3 +356,148 @@ function OpportunitySidebar({
     </section>
   )
 }
+
+function OpportunityFields({
+  opportunity,
+}: {
+  readonly opportunity: Opportunity
+}): React.JSX.Element {
+  const { patch, error } = useOpportunityPatch(opportunity)
+  return (
+    <div className="space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <CustomFieldsPanel
+        objectType="opportunity"
+        values={opportunity.customFields}
+        onPatch={(customFields) => {
+          patch({ customFields })
+        }}
+      />
+    </div>
+  )
+}
+
+/** The people on the opportunity, linked and unlinked by replacing `person_ids`. */
+function OpportunityContacts({
+  opportunity,
+}: {
+  readonly opportunity: Opportunity
+}): React.JSX.Element {
+  const { patch, error } = useOpportunityPatch(opportunity)
+
+  const [adding, setAdding] = useState(false)
+  const [personId, setPersonId] = useState('')
+  const [search, setSearch] = useState('')
+
+  // No `?id=` filter exists on people, so names come from the directory's first
+  // page. Past it, a contact renders by id rather than silently vanishing.
+  const directory = usePeople({ limit: 200 })
+  const searchable = usePeople({ term: search.trim().length > 0 ? search.trim() : undefined })
+  const nameById = new Map(directory.records.map((person) => [person.id, person.name]))
+  const linked = new Set(opportunity.personIds)
+
+  function reset(): void {
+    setAdding(false)
+    setPersonId('')
+    setSearch('')
+  }
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    if (personId.length === 0 || linked.has(personId)) {
+      return
+    }
+
+    patch({ personIds: [...opportunity.personIds, personId] })
+    reset()
+  }
+
+  return (
+    <section className="rounded-md border border-border">
+      <div className="border-b border-border px-3.5 py-2.5">
+        <SectionHeader
+          title="Contacts"
+          onAdd={() => {
+            setAdding((current) => !current)
+          }}
+          addLabel="Add contact"
+          compact
+        />
+      </div>
+
+      {error !== null && (
+        <div className="px-3.5 py-2">
+          <ErrorPanel error={error} />
+        </div>
+      )}
+
+      <ul className="divide-y divide-border">
+        {opportunity.personIds.length === 0 && !adding && (
+          <li className="px-3.5 py-4 text-[12px] text-ink-faint">No contacts yet.</li>
+        )}
+        {opportunity.personIds.map((linkedPersonId) => (
+          <li
+            key={linkedPersonId}
+            className="flex items-start justify-between gap-2 px-3.5 py-2.5"
+          >
+            <Link
+              to={`/people/${linkedPersonId}`}
+              className="text-[13px] font-medium text-ink hover:text-accent"
+            >
+              {nameById.get(linkedPersonId) ?? linkedPersonId}
+            </Link>
+            <button
+              type="button"
+              onClick={() => {
+                patch({
+                  personIds: opportunity.personIds.filter(
+                    (candidate) => candidate !== linkedPersonId,
+                  ),
+                })
+              }}
+              className="text-[11px] font-medium text-danger hover:underline"
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+
+      {adding && (
+        <form onSubmit={submit} className="space-y-2 border-t border-border bg-surface px-3.5 py-3">
+          <EntitySearch
+            options={searchable.records
+              .filter((person) => !linked.has(person.id))
+              .map((person) => ({
+                id: person.id,
+                label: person.name,
+                meta: person.email ?? undefined,
+              }))}
+            value={personId}
+            onChange={setPersonId}
+            onQueryChange={setSearch}
+            placeholder="Search people…"
+            emptyMessage="No people match"
+            required
+          />
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={reset}
+              className="rounded-md px-2.5 py-1 text-[12px] font-medium text-ink-muted hover:text-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover"
+            >
+              Add
+            </button>
+          </div>
+        </form>
+      )}
+    </section>
+  )
+}

package/src/pages/PartnershipDetail.tsx

@@ -6,6 +6,7 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
+import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
 import {
   useDeletePartnership,
@@ -22,6 +23,9 @@ 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 { FormsPanel } from '../components/FormsPanel.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'
@@ -59,7 +63,9 @@ export function PartnershipDetail(): React.JSX.Element {
   const { record, isLoading, isNotFound, error } = usePartnership(id)
   const deletePartnership = useDeletePartnership()
   const moduleTabs = inSlotOrder(useRecordTabs('partnership'))
+  const hasCustomFields = useHasCustomFields('partnership')
   const [activeTab, setActiveTab] = useState('overview')
+  const formSubmissions = useFormSubmissionsForRecord('partnership', id)
 
   if (isNotFound) {
     return <NotFoundPanel label="Partnership" backTo="/partnerships" />
@@ -75,11 +81,15 @@ export function PartnershipDetail(): 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' },
     { 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'
@@ -121,6 +131,7 @@ export function PartnershipDetail(): React.JSX.Element {
             ariaLabel="Partnership sections"
           >
             {active === 'overview' && <PartnershipOverview partnership={record} />}
+            {active === 'fields' && <PartnershipFields partnership={record} />}
             {active === 'plan' && <PlanPanel targetType="partnership" targetId={record.id} />}
             {active === 'activity' && (
               <ActivitiesPanel targetType="partnership" targetId={record.id} />
@@ -130,6 +141,7 @@ export function PartnershipDetail(): React.JSX.Element {
               <DecisionsPanel targetType="partnership" targetId={record.id} />
             )}
             {active === 'lists' && <ListsPanel targetType="partnership" targetId={record.id} />}
+            {active === 'forms' && <FormsPanel targetType="partnership" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'partnership', recordId: record.id })}
           </RecordTabs>
         </div>
@@ -367,6 +379,26 @@ function PartnershipSidebar({
   )
 }
 
+function PartnershipFields({
+  partnership,
+}: {
+  readonly partnership: Partnership
+}): React.JSX.Element {
+  const { patch, error } = usePartnershipPatch(partnership)
+  return (
+    <div className="space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <CustomFieldsPanel
+        objectType="partnership"
+        values={partnership.customFields}
+        onPatch={(customFields) => {
+          patch({ customFields })
+        }}
+      />
+    </div>
+  )
+}
+
 /** The key people on the partnership, linked and unlinked by replacing `person_ids`. */
 function PartnershipKeyPeople({
   partnership,

package/src/pages/PeoplePage.tsx

@@ -29,6 +29,14 @@ const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'email', 'phones', 'com
 /** 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.
  *
@@ -65,6 +73,18 @@ 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',