@kelpie/ui 0.12.0 → 0.14.0

package/src/pages/PersonDetail.tsx

@@ -1,3 +1,4 @@
+import { ATTENDANCE_STATUS_LABELS, PERSON_ADDRESS_KIND_LABELS, PERSON_ADDRESS_KINDS } from '@kelpie/schemas'
 import { CONSENT_PURPOSE_STATUS_LABELS, IN_PROCESS, PREFERRED_CHANNELS } from '@kelpie/schemas'
 import type {
   Candidate,
@@ -13,11 +14,14 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCandidates } from '../api/resources/candidates.ts'
+import { useAttendances, useCreateAttendance } from '../api/resources/attendances.ts'
+import { useEvents } from '../api/resources/events.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 { useModuleEnabled } from '../api/resources/moduleSettings.ts'
 import { useDeletePerson, usePerson, useUpdatePerson } from '../api/resources/people.ts'
 import {
   useCreatePosition,
@@ -25,6 +29,7 @@ import {
   usePositions,
   useUpdatePositionTitle,
 } from '../api/resources/positions.ts'
+import { AddressSidebarLink, AddressesField } from '../components/AddressesField.tsx'
 import { ActivitiesPanel, LatestActivity } from '../components/ActivitiesPanel.tsx'
 import { AgentTasks } from '../components/AgentTasks.tsx'
 import { Chip } from '../components/Chip.tsx'
@@ -39,11 +44,13 @@ 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 { LinkedEventsPanel } from '../components/LinkedEventsPanel.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 { SocialProfilesField } from '../components/SocialProfilesField.tsx'
+import { SocialProfileIcons, SocialProfilesField } from '../components/SocialProfilesField.tsx'
+import { TimezoneSearch } from '../components/TimezoneSearch.tsx'
 import { PhonesField } from '../components/PhonesField.tsx'
 import { SummaryBlock } from '../components/SummaryBlock.tsx'
 import { useRecordTabs } from '../registry/context.ts'
@@ -59,14 +66,15 @@ import { usePersonNames, useRoleTitles } from './hiringDirectory.ts'
 /**
  * One person.
  *
- * The mockup carried eight tabs. Overview, Activity, Notes, Decisions and Hiring
- * are here; the remaining three read Deals, Opportunities or Partnerships, and
- * return with their pages. A UI module can add its own through the `person`
- * record-tab slot.
+ * The mockup carried eight tabs. Overview, Addresses, Social, Positions,
+ * Activity, Notes, Decisions and Hiring are here; the remaining three read
+ * Deals, Opportunities or Partnerships, and return with their pages. A UI
+ * module can add its own through the `person` record-tab slot.
  *
  * Hiring appears only when this person is up for a role, which is the mockup's
  * rule: a Person carries no hiring fields, so with no candidacy there is nothing
- * for the tab to hold.
+ * for the tab to hold. Events appears only when the workspace has that module
+ * on: the attendances list answers 403 otherwise.
  *
  * Influence and relationship warmth are not on this page. They are Person
  * columns in the API and fields on the mockup's own `Person` type, but the
@@ -82,11 +90,20 @@ export function PersonDetail(): React.JSX.Element {
   const deletePerson = useDeletePerson()
   const moduleTabs = inSlotOrder(useRecordTabs('person'))
   const hasCustomFields = useHasCustomFields('person')
+  const eventsEnabled = useModuleEnabled('events')
   const [activeTab, setActiveTab] = useState('overview')
   const candidacies = useCandidates({ personIds: id === undefined ? [] : [id] }, {
     enabled: id !== undefined,
   })
+  const positions = usePositions(
+    { personIds: id === undefined ? [] : [id] },
+    { enabled: id !== undefined },
+  )
   const formSubmissions = useFormSubmissionsForRecord('person', id)
+  const attendances = useAttendances(
+    { personIds: id === undefined ? [] : [id] },
+    { enabled: id !== undefined && eventsEnabled },
+  )
 
   if (isNotFound) {
     return <NotFoundPanel label="Person" backTo="/people" />
@@ -102,11 +119,17 @@ export function PersonDetail(): React.JSX.Element {
 
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
+    { id: 'addresses', label: 'Addresses', count: record.addresses.length },
+    { id: 'social', label: 'Social', count: record.socialProfiles.length },
+    { id: 'positions', label: 'Positions', count: positions.records.length },
     ...(hasCustomFields ? [{ id: 'fields', label: 'Fields' }] : []),
     { id: 'activity', label: 'Activity' },
     ...(candidacies.records.length === 0
       ? []
       : [{ id: 'hiring', label: 'Hiring', count: candidacies.records.length }]),
+    ...(eventsEnabled
+      ? [{ id: 'events', label: 'Events', count: attendances.records.length }]
+      : []),
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
     { id: 'lists', label: 'Lists' },
@@ -129,7 +152,12 @@ export function PersonDetail(): React.JSX.Element {
 
       <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_280px]">
         <div className="min-w-0 space-y-8">
-          <PersonHeading person={record} />
+          <PersonHeading
+            person={record}
+            onOpenPositions={() => {
+              setActiveTab('positions')
+            }}
+          />
 
           <div className="flex justify-end gap-2">
             <AgentTasks targetType="person" targetId={record.id} targetLabel={record.name} />
@@ -149,11 +177,15 @@ export function PersonDetail(): React.JSX.Element {
 
           <RecordTabs tabs={tabs} active={active} onChange={setActiveTab} ariaLabel="Person sections">
             {active === 'overview' && <PersonOverview person={record} />}
+            {active === 'addresses' && <PersonAddresses person={record} />}
+            {active === 'social' && <PersonSocial person={record} />}
+            {active === 'positions' && <PersonPositions 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 === 'events' && <PersonEvents personId={record.id} />}
             {active === 'notes' && <NotesPanel targetType="person" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="person" targetId={record.id} />}
             {active === 'lists' && <ListsPanel targetType="person" targetId={record.id} />}
@@ -164,9 +196,13 @@ export function PersonDetail(): React.JSX.Element {
 
         <aside className="space-y-4 text-[12px] lg:sticky lg:top-6">
           <PersonNameParts person={record} />
-          <PersonSidebar person={record} />
+          <PersonSidebar
+            person={record}
+            onOpenAddresses={() => {
+              setActiveTab('addresses')
+            }}
+          />
           <PersonConsents person={record} />
-          <PersonPositions person={record} />
         </aside>
       </div>
     </div>
@@ -178,8 +214,17 @@ function usePersonPatch(person: Person): PatchResult<PersonInput> {
   return usePatch(useUpdatePerson, person)
 }
 
-function PersonHeading({ person }: { readonly person: Person }): React.JSX.Element {
+function PersonHeading({
+  person,
+  onOpenPositions,
+}: {
+  readonly person: Person
+  readonly onOpenPositions: () => void
+}): React.JSX.Element {
   const { patch, error } = usePersonPatch(person)
+  const positions = usePositions({ personIds: [person.id] })
+  const companies = useCompanies({ personIds: [person.id] })
+  const companyNameById = new Map(companies.records.map((company) => [company.id, company.name]))
 
   return (
     <div className="min-w-0 flex-1">
@@ -188,14 +233,50 @@ function PersonHeading({ person }: { readonly person: Person }): React.JSX.Eleme
           <ErrorPanel error={error} />
         </div>
       )}
-      <InlineEdit
-        value={person.name}
-        onChange={(name) => {
-          patch({ name })
-        }}
-        displayClassName="text-[22px] font-semibold tracking-tight text-ink not-italic"
-        emptyLabel="Untitled"
-      />
+      <div className="flex items-center gap-3">
+        <div className="min-w-0 flex-1">
+          <InlineEdit
+            value={person.name}
+            onChange={(name) => {
+              patch({ name })
+            }}
+            displayClassName="text-[22px] font-semibold tracking-tight text-ink not-italic"
+            emptyLabel="Untitled"
+          />
+        </div>
+        <SocialProfileIcons profiles={person.socialProfiles} />
+      </div>
+      {positions.records.length > 0 && (
+        <ul className="mt-1 space-y-0.5">
+          {positions.records.map((position) => {
+            const companyName = companyNameById.get(position.companyId) ?? 'Unknown'
+            const title = position.title.trim()
+
+            return (
+              <li key={position.id} className="text-[13px] text-ink-muted">
+                {title.length > 0 && (
+                  <>
+                    <button
+                      type="button"
+                      onClick={onOpenPositions}
+                      className="font-medium text-accent transition hover:text-accent-hover hover:underline"
+                    >
+                      {title}
+                    </button>
+                    <span> at </span>
+                  </>
+                )}
+                <Link
+                  to={`/companies/${position.companyId}`}
+                  className="font-medium text-accent transition hover:text-accent-hover hover:underline"
+                >
+                  {companyName}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
       <div className="mt-1">
         <InlineEdit
           value={person.email ?? ''}
@@ -207,6 +288,15 @@ function PersonHeading({ person }: { readonly person: Person }): React.JSX.Eleme
           emptyLabel="Add email…"
         />
       </div>
+      {person.phones.length > 0 && (
+        <ul className="mt-1 space-y-0.5" aria-label="Phone numbers">
+          {person.phones.map((phone, index) => (
+            <li key={`${phone}-${String(index)}`} className="text-[13px] text-ink-muted">
+              {phone}
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   )
 }
@@ -243,6 +333,95 @@ function PersonOverview({ person }: { readonly person: Person }): React.JSX.Elem
   )
 }
 
+function PersonEvents({ personId }: { readonly personId: string }): React.JSX.Element {
+  const attendances = useAttendances({ personIds: [personId], limit: 200 })
+  const createAttendance = useCreateAttendance()
+  const [eventId, setEventId] = useState('')
+  const [search, setSearch] = useState('')
+  const searchable = useEvents({
+    term: search.trim().length > 0 ? search.trim() : undefined,
+    statuses: ['draft', 'scheduled'],
+    limit: 50,
+  })
+  const directory = useEvents({ limit: 200 })
+  const nameById = new Map(directory.records.map((record) => [record.id, record.name]))
+  const registered = new Set(attendances.records.map((row) => row.eventId))
+
+  function add(submitEvent: FormEvent): void {
+    submitEvent.preventDefault()
+
+    if (eventId.length === 0 || registered.has(eventId)) {
+      return
+    }
+
+    createAttendance.run({ eventId, personId, source: 'manual' })
+    setEventId('')
+    setSearch('')
+  }
+
+  return (
+    <div className="space-y-8">
+      <section>
+        <SectionHeader title="Attendance" />
+        {createAttendance.error !== null && (
+          <div className="mb-3">
+            <ErrorPanel error={createAttendance.error} />
+          </div>
+        )}
+        {attendances.error !== null && <ErrorPanel error={attendances.error} />}
+        {attendances.isLoading ? (
+          <p className="text-[13px] text-ink-faint">Loading events…</p>
+        ) : attendances.records.length === 0 ? (
+          <p className="text-[13px] text-ink-faint">Not registered for any events yet.</p>
+        ) : (
+          <ul className="divide-y divide-border overflow-hidden rounded-md border border-border">
+            {attendances.records.map((row) => (
+              <li key={row.id} className="flex flex-wrap items-center justify-between gap-2 px-3 py-2">
+                <Link
+                  to={`/events/${row.eventId}`}
+                  className="text-[13px] font-medium text-accent hover:underline"
+                >
+                  {nameById.get(row.eventId) ?? row.eventId}
+                </Link>
+                <span className="text-[12px] text-ink-muted">
+                  {ATTENDANCE_STATUS_LABELS[row.status]}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+        <form onSubmit={add} className="mt-3 flex flex-wrap items-end gap-2">
+          <div className="min-w-[220px] flex-1">
+            <EntitySearch
+              options={searchable.records
+                .filter((record) => !registered.has(record.id))
+                .map((record) => ({
+                  id: record.id,
+                  label: record.name,
+                  meta: record.kind.length > 0 ? record.kind : undefined,
+                }))}
+              value={eventId}
+              onChange={setEventId}
+              onQueryChange={setSearch}
+              placeholder="Register for an event…"
+              emptyMessage="No events match"
+              size="sm"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={createAttendance.isPending || eventId.length === 0}
+            className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-50"
+          >
+            Register
+          </button>
+        </form>
+      </section>
+      <LinkedEventsPanel targetType="person" targetId={personId} />
+    </div>
+  )
+}
+
 /**
  * Every role this person is up for, one card each.
  *
@@ -363,7 +542,13 @@ function PersonNameParts({ person }: { readonly person: Person }): React.JSX.Ele
   )
 }
 
-function PersonSidebar({ person }: { readonly person: Person }): React.JSX.Element {
+function PersonSidebar({
+  person,
+  onOpenAddresses,
+}: {
+  readonly person: Person
+  readonly onOpenAddresses: () => void
+}): React.JSX.Element {
   const { patch, error } = usePersonPatch(person)
 
   return (
@@ -384,23 +569,14 @@ function PersonSidebar({ person }: { readonly person: Person }): React.JSX.Eleme
         />
       </SidebarField>
       <SidebarField label="Timezone">
-        <InlineEdit
+        <TimezoneSearch
           value={person.timezone ?? ''}
           onChange={(timezone) => {
             patch({ timezone: timezone.length > 0 ? timezone : null })
           }}
-          displayClassName="not-italic normal-case text-[12px]"
-        />
-      </SidebarField>
-      <SidebarField label="Location">
-        <InlineEdit
-          value={person.location ?? ''}
-          onChange={(location) => {
-            patch({ location: location.length > 0 ? location : null })
-          }}
-          displayClassName="not-italic normal-case text-[12px]"
         />
       </SidebarField>
+      <AddressSidebarLink addresses={person.addresses} onOpen={onOpenAddresses} />
       <SidebarField label="Phone">
         <PhonesField
           value={person.phones}
@@ -409,14 +585,6 @@ function PersonSidebar({ person }: { readonly person: Person }): React.JSX.Eleme
           }}
         />
       </SidebarField>
-      <SidebarField label="Social profiles">
-        <SocialProfilesField
-          value={person.socialProfiles}
-          onChange={(socialProfiles) => {
-            patch({ socialProfiles })
-          }}
-        />
-      </SidebarField>
       <SidebarField label="Tags">
         <InlineEdit
           value={person.tags.join(', ')}
@@ -442,6 +610,48 @@ function PersonSidebar({ person }: { readonly person: Person }): React.JSX.Eleme
   )
 }
 
+function PersonAddresses({ person }: { readonly person: Person }): React.JSX.Element {
+  const { patch, error } = usePersonPatch(person)
+
+  return (
+    <div className="max-w-lg space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <SectionHeader
+        title="Addresses"
+        description="One address per kind. Mark one as primary for lists and the sidebar."
+      />
+      <AddressesField
+        value={person.addresses}
+        kinds={PERSON_ADDRESS_KINDS}
+        kindLabels={PERSON_ADDRESS_KIND_LABELS}
+        onChange={(addresses) => {
+          patch({ addresses })
+        }}
+      />
+    </div>
+  )
+}
+
+function PersonSocial({ person }: { readonly person: Person }): React.JSX.Element {
+  const { patch, error } = usePersonPatch(person)
+
+  return (
+    <div className="max-w-lg space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <SectionHeader
+        title="Social profiles"
+        description="One profile per network. Icons beside the name open each profile."
+      />
+      <SocialProfilesField
+        value={person.socialProfiles}
+        onChange={(socialProfiles) => {
+          patch({ socialProfiles })
+        }}
+      />
+    </div>
+  )
+}
+
 function PersonFields({ person }: { readonly person: Person }): React.JSX.Element {
   const { patch, error } = usePersonPatch(person)
   return (
@@ -499,69 +709,21 @@ function PersonPositions({ person }: { readonly person: Person }): React.JSX.Ele
   }
 
   return (
-    <section className="rounded-md border border-border">
-      <div className="border-b border-border px-3.5 py-2.5">
-        <SectionHeader
-          title="Positions"
-          onAdd={() => {
-            setAdding((current) => !current)
-          }}
-          addLabel="Add position"
-          compact
-        />
-      </div>
-
-      {createPosition.error !== null && (
-        <div className="px-3.5 py-2">
-          <ErrorPanel error={createPosition.error} />
-        </div>
-      )}
-      {deletePosition.error !== null && (
-        <div className="px-3.5 py-2">
-          <ErrorPanel error={deletePosition.error} />
-        </div>
-      )}
+    <div className="space-y-4">
+      <SectionHeader
+        title="Positions"
+        description="Titles this person holds at companies."
+        onAdd={() => {
+          setAdding((current) => !current)
+        }}
+        addLabel="Add position"
+      />
 
-      <ul className="divide-y divide-border">
-        {positions.isLoading && (
-          <li className="px-3.5 py-4 text-[12px] text-ink-faint">Loading positions…</li>
-        )}
-        {!positions.isLoading && positions.records.length === 0 && !adding && (
-          <li className="px-3.5 py-4 text-[12px] text-ink-faint">No positions yet.</li>
-        )}
-        {positions.records.map((position) => (
-          <li key={position.id} className="space-y-1 px-3.5 py-2.5">
-            <div className="flex items-start justify-between gap-2">
-              <Link
-                to={`/companies/${position.companyId}`}
-                className="text-[13px] font-medium text-ink hover:text-accent"
-              >
-                {companyNameById.get(position.companyId) ?? 'Unknown'}
-              </Link>
-              <button
-                type="button"
-                onClick={() => {
-                  deletePosition.run(position.id)
-                }}
-                className="text-[11px] font-medium text-danger hover:underline"
-              >
-                Remove
-              </button>
-            </div>
-            <InlineEdit
-              value={position.title}
-              onChange={(next) => {
-                updateTitle.run({ id: position.id, changes: { title: next } })
-              }}
-              displayClassName="not-italic text-[12px]"
-              emptyLabel="Add position title…"
-            />
-          </li>
-        ))}
-      </ul>
+      {createPosition.error !== null && <ErrorPanel error={createPosition.error} />}
+      {deletePosition.error !== null && <ErrorPanel error={deletePosition.error} />}
 
       {adding && (
-        <form onSubmit={submit} className="space-y-2 border-t border-border bg-surface px-3.5 py-3">
+        <form onSubmit={submit} className="space-y-2 rounded-md border border-border bg-surface p-3">
           <EntitySearch
             options={searchable.records
               .filter((company) => !held.has(company.id))
@@ -583,7 +745,7 @@ function PersonPositions({ person }: { readonly person: Person }): React.JSX.Ele
               setTitle(event.target.value)
             }}
             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"
+            className="w-full rounded-md border border-border bg-surface-raised px-2 py-1.5 text-[13px] outline-none focus:border-accent"
           />
           <div className="flex justify-end gap-2">
             <button
@@ -602,7 +764,45 @@ function PersonPositions({ person }: { readonly person: Person }): React.JSX.Ele
           </div>
         </form>
       )}
-    </section>
+
+      {positions.isLoading && <p className="text-[13px] text-ink-faint">Loading positions…</p>}
+
+      {!positions.isLoading && positions.records.length === 0 && !adding ? (
+        <p className="text-[13px] text-ink-faint">No positions yet.</p>
+      ) : (
+        <ul className="divide-y divide-border rounded-md border border-border">
+          {positions.records.map((position) => (
+            <li key={position.id} className="space-y-1 px-3.5 py-3">
+              <div className="flex items-start justify-between gap-2">
+                <Link
+                  to={`/companies/${position.companyId}`}
+                  className="text-[13px] font-medium text-ink hover:text-accent"
+                >
+                  {companyNameById.get(position.companyId) ?? 'Unknown'}
+                </Link>
+                <button
+                  type="button"
+                  onClick={() => {
+                    deletePosition.run(position.id)
+                  }}
+                  className="text-[11px] font-medium text-danger hover:underline"
+                >
+                  Remove
+                </button>
+              </div>
+              <InlineEdit
+                value={position.title}
+                onChange={(next) => {
+                  updateTitle.run({ id: position.id, changes: { title: next } })
+                }}
+                displayClassName="not-italic text-[12px] text-ink-muted"
+                emptyLabel="Add position title…"
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
   )
 }
 

package/src/pages/PlanningPage.tsx

@@ -1,15 +1,16 @@
 import {
-  PIPELINE_KIND_LABELS,
-  PIPELINE_KINDS,
   PLAN_ITEM_STATUS_LABELS,
   PLAN_ITEM_STATUSES,
+  PLAN_ITEM_TARGET_TYPE_LABELS,
+  PLAN_ITEM_TARGET_TYPES,
 } from '@kelpie/schemas'
-import type { PipelineKind, PlanItem, PlanItemStatus } from '@kelpie/schemas'
+import type { PlanItem, PlanItemStatus, PlanItemTargetType } from '@kelpie/schemas'
 import { useState } from 'react'
 import type { FormEvent } from 'react'
 
 import { useDeals } from '../api/resources/deals.ts'
 import { useEnquiries } from '../api/resources/enquiries.ts'
+import { useEvents } from '../api/resources/events.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { useOpportunities } from '../api/resources/opportunities.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
@@ -41,7 +42,7 @@ import { monthBounds, planStatusTone, todayIso } from '../lib/plan.ts'
  */
 
 type ViewMode = 'list' | 'calendar'
-type TypeFilter = PipelineKind | 'all'
+type TypeFilter = PlanItemTargetType | 'all'
 
 const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const
 
@@ -110,9 +111,9 @@ export function PlanningPage(): React.JSX.Element {
               className="rounded-md border border-border bg-surface-raised px-2.5 py-1 text-[12px] outline-none focus:border-accent"
             >
               <option value="all">All types</option>
-              {PIPELINE_KINDS.map((kind) => (
+              {PLAN_ITEM_TARGET_TYPES.map((kind) => (
                 <option key={kind} value={kind}>
-                  {PIPELINE_KIND_LABELS[kind]}
+                  {PLAN_ITEM_TARGET_TYPE_LABELS[kind]}
                 </option>
               ))}
             </select>
@@ -207,7 +208,7 @@ export function PlanningPage(): React.JSX.Element {
  * for PlanTargetLink. One page per kind, same ceiling as the rest of Planning.
  */
 function usePipelineTargets(): {
-  readonly byKind: Readonly<Record<PipelineKind, readonly PipelineTarget[]>>
+  readonly byKind: Readonly<Record<PlanItemTargetType, readonly PipelineTarget[]>>
   readonly nameById: ReadonlyMap<string, string>
 } {
   const deals = useDeals({ limit: MAX_PAGE_SIZE })
@@ -215,13 +216,15 @@ function usePipelineTargets(): {
   const raises = useRaises({ limit: MAX_PAGE_SIZE })
   const partnerships = usePartnerships({ limit: MAX_PAGE_SIZE })
   const enquiries = useEnquiries({ limit: MAX_PAGE_SIZE })
+  const events = useEvents({ limit: MAX_PAGE_SIZE })
 
-  const byKind: Readonly<Record<PipelineKind, readonly PipelineTarget[]>> = {
+  const byKind: Readonly<Record<PlanItemTargetType, 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 })),
     partnership: partnerships.records.map((record) => ({ id: record.id, name: record.name })),
+    event: events.records.map((record) => ({ id: record.id, name: record.name })),
   }
 
   return {
@@ -235,7 +238,7 @@ function usePipelineTargets(): {
 }
 
 interface AddPlanItemFields {
-  readonly targetType: PipelineKind
+  readonly targetType: PlanItemTargetType
   readonly targetId: string
   readonly date: string
   readonly title: string
@@ -251,8 +254,8 @@ function AddPlanItemForm({
   onSubmit,
   onCancel,
 }: {
-  readonly initialTargetType: PipelineKind
-  readonly targetsByKind: Readonly<Record<PipelineKind, readonly PipelineTarget[]>>
+  readonly initialTargetType: PlanItemTargetType
+  readonly targetsByKind: Readonly<Record<PlanItemTargetType, readonly PipelineTarget[]>>
   readonly isPending: boolean
   readonly error: Error | null
   readonly onSubmit: (fields: AddPlanItemFields) => void
@@ -288,16 +291,16 @@ function AddPlanItemForm({
         <select
           value={draft.targetType}
           onChange={(event) => {
-            const targetType = event.target.value as PipelineKind
+            const targetType = event.target.value as PlanItemTargetType
 
             setDraft((current) => ({ ...current, targetType, targetId: '' }))
           }}
           aria-label="Record type"
           className={inputClass}
         >
-          {PIPELINE_KINDS.map((kind) => (
+          {PLAN_ITEM_TARGET_TYPES.map((kind) => (
             <option key={kind} value={kind}>
-              {PIPELINE_KIND_LABELS[kind]}
+              {PLAN_ITEM_TARGET_TYPE_LABELS[kind]}
             </option>
           ))}
         </select>