@kelpie/ui 0.11.0 → 0.13.0

package/src/components/WorkspaceSwitcher.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router'
+
+import { useAccountWorkspaces, useSession, useSwitchWorkspace } from '../api/resources/session.ts'
+
+/**
+ * Header control: the workspace this session is in, and a menu to move it.
+ *
+ * The list and the switch both live under `/v1/auth`, so a suspended current
+ * workspace still lets the reader see the other memberships and leave.
+ */
+
+export function WorkspaceSwitcher(): React.JSX.Element | null {
+  const navigate = useNavigate()
+  const { session } = useSession()
+  const { workspaces, isLoading } = useAccountWorkspaces()
+  const switchWorkspace = useSwitchWorkspace()
+  const [open, setOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const currentId = session?.workspaceId ?? null
+  const current = workspaces.find((workspace) => workspace.id === currentId)
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    function onPointerDown(event: MouseEvent): void {
+      if (menuRef.current?.contains(event.target as Node) !== true) {
+        setOpen(false)
+      }
+    }
+
+    function onKeyDown(event: KeyboardEvent): void {
+      if (event.key === 'Escape') {
+        setOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  if (isLoading && workspaces.length === 0) {
+    return (
+      <span className="max-w-[10rem] truncate px-2 py-1 text-[12px] text-ink-faint" aria-hidden>
+        Workspace
+      </span>
+    )
+  }
+
+  if (workspaces.length === 0) {
+    return null
+  }
+
+  const label = current?.name ?? 'Workspace'
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((value) => !value)
+        }}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-label="Switch workspace"
+        title={label}
+        className="inline-flex max-w-[12rem] items-center gap-1 rounded-md px-2 py-1 text-[12px] text-ink-muted transition hover:bg-surface-sunken hover:text-ink"
+      >
+        <span className="truncate">{label}</span>
+        <svg viewBox="0 0 12 12" aria-hidden className="h-2.5 w-2.5 shrink-0">
+          <path
+            d="M2.5 4.5 L6 8 L9.5 4.5"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 z-20 mt-1.5 w-56 overflow-hidden rounded-md border border-border bg-surface-raised py-1"
+        >
+          {workspaces.map((workspace) => {
+            const isCurrent = workspace.id === currentId
+
+            return (
+              <button
+                key={workspace.id}
+                type="button"
+                role="menuitem"
+                aria-current={isCurrent ? 'true' : undefined}
+                disabled={switchWorkspace.isPending}
+                onClick={() => {
+                  if (isCurrent) {
+                    setOpen(false)
+                    return
+                  }
+
+                  switchWorkspace
+                    .runAsync({ workspaceId: workspace.id })
+                    .then(() => {
+                      setOpen(false)
+                      void navigate('/dashboard', { replace: true })
+                    })
+                    .catch(() => undefined)
+                }}
+                className="block w-full px-3 py-1.5 text-left hover:bg-surface-sunken disabled:opacity-60"
+              >
+                <div className="truncate text-[13px] text-ink">{workspace.name}</div>
+                <div className="truncate text-[11px] text-ink-faint capitalize">
+                  {workspace.role}
+                  {isCurrent ? ' · current' : ''}
+                </div>
+              </button>
+            )
+          })}
+          {switchWorkspace.error !== null && (
+            <p className="border-t border-border px-3 py-1.5 text-[12px] text-danger">
+              {switchWorkspace.error.message}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/environmentTone.ts

@@ -0,0 +1,40 @@
+export type EnvironmentTone = 'dev' | 'demo' | 'staging' | 'test' | 'cloud'
+
+const NAMED_TONES: Readonly<Record<string, EnvironmentTone>> = {
+  development: 'dev',
+  dev: 'dev',
+  local: 'dev',
+  demo: 'demo',
+  staging: 'staging',
+  stage: 'staging',
+  preview: 'staging',
+  test: 'test',
+  cloud: 'cloud',
+}
+
+const TONES: readonly EnvironmentTone[] = ['dev', 'demo', 'staging', 'test', 'cloud']
+
+/**
+ * Picks a banner colour from a site name or runtime-mode fallback.
+ *
+ * Known names keep a stable colour so four tabs (dev, demo, cloud, staging)
+ * never collide. Anything else hashes onto the same five colours so an
+ * unknown name still looks different from local.
+ */
+export function environmentTone(label: string): EnvironmentTone {
+  const key = label.trim().toLowerCase()
+  const named = NAMED_TONES[key]
+  if (named !== undefined) {
+    return named
+  }
+
+  return TONES[hashLabel(key) % TONES.length] ?? 'dev'
+}
+
+function hashLabel(value: string): number {
+  let hash = 0
+  for (const char of value) {
+    hash = (hash * 31 + char.charCodeAt(0)) >>> 0
+  }
+  return hash
+}

package/src/index.ts

@@ -44,6 +44,26 @@ export {
 } from './api/resources/people.ts'
 export type { CreatePersonInput, PeopleFilters } from './api/resources/people.ts'
 
+export {
+  useCreateEvent,
+  useDeleteEvent,
+  useEvent,
+  useEvents,
+  useUpdateEvent,
+} from './api/resources/events.ts'
+export type { EventFilters } from './api/resources/events.ts'
+
+export {
+  useAttendances,
+  useCreateAttendance,
+  useDeleteAttendance,
+  useUpdateAttendance,
+} from './api/resources/attendances.ts'
+export type { AttendanceFilters } from './api/resources/attendances.ts'
+
+export { useEventAssociationsFor } from './api/resources/eventAssociations.ts'
+export type { EventAssociationsResult } from './api/resources/eventAssociations.ts'
+
 export {
   useCreatePosition,
   useDeletePosition,
@@ -73,6 +93,7 @@ export type { DecisionFilters } from './api/resources/decisions.ts'
 
 export {
   useAcceptInvite,
+  useAccountWorkspaces,
   useConfirmPasswordReset,
   useCreateWorkspace,
   useLogIn,
@@ -80,8 +101,9 @@ export {
   useRequestPasswordReset,
   useSession,
   useSignUp,
+  useSwitchWorkspace,
 } from './api/resources/session.ts'
-export type { SessionState } from './api/resources/session.ts'
+export type { AccountWorkspacesState, SessionState } from './api/resources/session.ts'
 
 export { fetchServiceHealth } from './api/health.ts'
 export type { HealthRequestOptions, ServiceHealth } from './api/health.ts'
@@ -121,17 +143,37 @@ export type { AddButtonProps, SectionHeaderProps } from './components/SectionHea
 export { Shell } from './components/Shell.tsx'
 export { SidebarField } from './components/SidebarField.tsx'
 export type { SidebarFieldProps } from './components/SidebarField.tsx'
-export { SocialProfilesField } from './components/SocialProfilesField.tsx'
-export type { SocialProfilesFieldProps } from './components/SocialProfilesField.tsx'
+export { AddressSidebarLink, AddressesField } from './components/AddressesField.tsx'
+export type { AddressSidebarLinkProps, AddressesFieldProps } from './components/AddressesField.tsx'
+export { CountrySearch } from './components/CountrySearch.tsx'
+export type { CountrySearchProps } from './components/CountrySearch.tsx'
+export { SocialNetworkIcon, SocialNetworkName } from './components/SocialNetworkIcon.tsx'
+export type {
+  SocialNetworkIconProps,
+  SocialNetworkNameProps,
+} from './components/SocialNetworkIcon.tsx'
+export { SocialProfileIcons, SocialProfilesField } from './components/SocialProfilesField.tsx'
+export type {
+  SocialProfileIconsProps,
+  SocialProfilesFieldProps,
+} from './components/SocialProfilesField.tsx'
 export { SummaryBlock } from './components/SummaryBlock.tsx'
 export type { SummaryBlockProps } from './components/SummaryBlock.tsx'
+export { TimezoneSearch } from './components/TimezoneSearch.tsx'
+export type { TimezoneSearchProps } from './components/TimezoneSearch.tsx'
 
 export { CompaniesPage } from './pages/CompaniesPage.tsx'
 export { CompanyDetail } from './pages/CompanyDetail.tsx'
 export { DecisionsPage } from './pages/DecisionsPage.tsx'
+export { EventDetail } from './pages/EventDetail.tsx'
+export { EventsPage } from './pages/EventsPage.tsx'
 export { PeoplePage } from './pages/PeoplePage.tsx'
 export { PersonDetail } from './pages/PersonDetail.tsx'
 export { PlanningPage } from './pages/PlanningPage.tsx'
+// The controls a module contributing a sign-in method builds its button from,
+// so it matches the form beside it without copying class names.
+export { AuthDivider, AuthLinkButton } from './pages/auth/AuthForm.tsx'
+export { safeNext } from './pages/auth/nextPath.ts'
 export { ForgotPasswordPage } from './pages/auth/ForgotPasswordPage.tsx'
 export { JoinPage } from './pages/auth/JoinPage.tsx'
 export { ResetPasswordPage } from './pages/auth/ResetPasswordPage.tsx'
@@ -139,6 +181,7 @@ export { SignInPage } from './pages/auth/SignInPage.tsx'
 export { SignUpPage } from './pages/auth/SignUpPage.tsx'
 export { HandbookStepPage } from './pages/onboarding/HandbookStepPage.tsx'
 export { InvitesStepPage } from './pages/onboarding/InvitesStepPage.tsx'
+export { OrganisationStepPage } from './pages/onboarding/OrganisationStepPage.tsx'
 export { WorkspaceStepPage } from './pages/onboarding/WorkspaceStepPage.tsx'
 
 export {
@@ -165,6 +208,8 @@ export type { ThemePreference } from './lib/theme.ts'
 
 export { EXTENSIBLE_RECORD_TYPES, NAV_SLOTS } from './registry/contributions.ts'
 export type {
+  AuthMethod,
+  AuthMethodContext,
   DashboardCard,
   ExtensibleRecordType,
   NavItem,
@@ -182,6 +227,7 @@ export { NO_UI_MODULES, UiModuleError, inSlotOrder, registerUiModules } from './
 export type { UiExtensions, UiModule, UiModuleContext } from './registry/registry.ts'
 
 export {
+  useAuthMethods,
   useDashboardCards,
   useModuleRoutes,
   useNavItems,

package/src/lib/timezones.ts

@@ -0,0 +1,43 @@
+/**
+ * IANA zone names this runtime can resolve, matching the server's
+ * `timezoneSchema`. UTC is always first: some engines omit it from
+ * `supportedValuesOf` even though `DateTimeFormat` accepts it.
+ *
+ * Falls back to the short list the mockup offered if `supportedValuesOf` is
+ * missing, for a browser old enough to lack it.
+ */
+
+const FALLBACK_TIMEZONES: readonly string[] = [
+  'UTC',
+  'Australia/Sydney',
+  'Australia/Melbourne',
+  'America/Los_Angeles',
+  'America/New_York',
+  'Europe/London',
+]
+
+function readTimezones(): readonly string[] {
+  try {
+    const supported = Intl.supportedValuesOf('timeZone')
+
+    return ['UTC', ...supported.filter((zone) => zone !== 'UTC')]
+  } catch {
+    return FALLBACK_TIMEZONES
+  }
+}
+
+export const ALL_TIMEZONES: readonly string[] = readTimezones()
+
+/**
+ * The full list, with `current` prepended when a stored zone is not in it.
+ *
+ * A value the picker does not know must still render, rather than being
+ * rewritten to the first option on the next save.
+ */
+export function timezonesIncluding(current: string): readonly string[] {
+  if (current.length === 0 || ALL_TIMEZONES.includes(current)) {
+    return ALL_TIMEZONES
+  }
+
+  return [current, ...ALL_TIMEZONES]
+}

package/src/pages/CompaniesPage.tsx

@@ -1,3 +1,4 @@
+import { formatAddress, primaryAddress } from '@kelpie/schemas'
 import type { Company, IcpFit } from '@kelpie/schemas'
 import { useState } from 'react'
 import { useNavigate } from 'react-router'
@@ -32,7 +33,7 @@ const ICP_TONES: Readonly<Record<IcpFit, ChipTone>> = {
   unknown: 'neutral',
 }
 
-const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'domain', 'hq', 'type', 'updatedAt']
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'domain', 'type', 'updatedAt']
 
 const SERVER_SORT_KEYS: readonly string[] = ['name', 'created_at', 'updated_at']
 
@@ -70,14 +71,6 @@ export function CompaniesPage(): React.JSX.Element {
         <span className="font-mono text-[12px] text-ink-muted">{company.domain ?? '—'}</span>
       ),
     },
-    {
-      key: 'website',
-      header: 'Website',
-      getSortValue: (company) => company.website,
-      render: (company) => (
-        <span className="font-mono text-[12px] text-ink-muted">{company.website ?? '—'}</span>
-      ),
-    },
     {
       key: 'industry',
       header: 'Industry',
@@ -85,10 +78,18 @@ export function CompaniesPage(): React.JSX.Element {
       render: (company) => company.industry ?? '—',
     },
     {
-      key: 'hq',
-      header: 'HQ',
-      getSortValue: (company) => company.hq,
-      render: (company) => company.hq ?? '—',
+      key: 'addresses',
+      header: 'Address',
+      getSortValue: (company) => {
+        const address = primaryAddress(company.addresses)
+
+        return address === undefined ? null : formatAddress(address)
+      },
+      render: (company) => {
+        const address = primaryAddress(company.addresses)
+
+        return address === undefined ? '—' : formatAddress(address)
+      },
     },
     {
       key: 'type',

package/src/pages/CompanyDetail.tsx

@@ -1,4 +1,11 @@
-import { ACCOUNT_TYPES, COMPANY_STAGES, ICP_FITS, SIZE_BANDS } from '@kelpie/schemas'
+import {
+  ACCOUNT_TYPES,
+  COMPANY_ADDRESS_KIND_LABELS,
+  COMPANY_ADDRESS_KINDS,
+  COMPANY_STAGES,
+  ICP_FITS,
+  SIZE_BANDS,
+} from '@kelpie/schemas'
 import type { AccountType, Company, CompanyInput, CompanyStage, IcpFit, SizeBand } from '@kelpie/schemas'
 import { useState } from 'react'
 import type { FormEvent } from 'react'
@@ -14,6 +21,7 @@ import {
 import { useDeals } from '../api/resources/deals.ts'
 import { useEnquiries } from '../api/resources/enquiries.ts'
 import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
+import { useModuleEnabled } from '../api/resources/moduleSettings.ts'
 import { useOpportunities } from '../api/resources/opportunities.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
 import { usePeople } from '../api/resources/people.ts'
@@ -24,6 +32,7 @@ import {
   useUpdatePositionTitle,
 } from '../api/resources/positions.ts'
 import { useRaises } from '../api/resources/raises.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'
@@ -36,6 +45,7 @@ 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 { LinkedEventsPanel } from '../components/LinkedEventsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { RelatedPlanAttention } from '../components/PlanAttention.tsx'
 import { ErrorPanel, LoadingPanel, NotFoundPanel } from '../components/QueryState.tsx'
@@ -51,9 +61,10 @@ import { toOptions, toTags } from './fields.ts'
 /**
  * One company.
  *
- * Overview, Activity, Notes, Decisions, Lists and People render today. The
- * tabs for Deals, Opportunities, Partnerships and Raises wait for their
- * endpoints. A UI module can add its own through the `company` record-tab slot.
+ * Overview, Addresses, Activity, Notes, Decisions, Lists and People render
+ * today. The tabs for Deals, Opportunities, Partnerships and Raises wait for
+ * their endpoints. A UI module can add its own through the `company`
+ * record-tab slot.
  */
 
 const STAGE_OPTIONS = toOptions(COMPANY_STAGES)
@@ -75,6 +86,7 @@ export function CompanyDetail(): React.JSX.Element {
   const deleteCompany = useDeleteCompany()
   const moduleTabs = inSlotOrder(useRecordTabs('company'))
   const hasCustomFields = useHasCustomFields('company')
+  const eventsEnabled = useModuleEnabled('events')
   const [activeTab, setActiveTab] = useState('overview')
   const formSubmissions = useFormSubmissionsForRecord('company', id)
 
@@ -92,12 +104,14 @@ export function CompanyDetail(): React.JSX.Element {
 
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
+    { id: 'addresses', label: 'Addresses', count: record.addresses.length },
     ...(hasCustomFields ? [{ id: 'fields', label: 'Fields' }] : []),
     { id: 'activity', label: 'Activity' },
     { id: 'people', label: 'People' },
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
     { id: 'lists', label: 'Lists' },
+    ...(eventsEnabled ? [{ id: 'events', label: 'Events' }] : []),
     ...(formSubmissions.records.length === 0
       ? []
       : [{ id: 'forms', label: 'Forms', count: formSubmissions.records.length }]),
@@ -142,19 +156,28 @@ export function CompanyDetail(): React.JSX.Element {
             ariaLabel="Company sections"
           >
             {active === 'overview' && <CompanyOverview company={record} />}
+            {active === 'addresses' && <CompanyAddresses company={record} />}
             {active === 'fields' && <CompanyFields company={record} />}
             {active === 'activity' && <ActivitiesPanel targetType="company" targetId={record.id} />}
             {active === 'people' && <CompanyPeople company={record} />}
             {active === 'notes' && <NotesPanel targetType="company" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="company" targetId={record.id} />}
             {active === 'lists' && <ListsPanel targetType="company" targetId={record.id} />}
+            {active === 'events' && (
+              <LinkedEventsPanel targetType="company" targetId={record.id} />
+            )}
             {active === 'forms' && <FormsPanel targetType="company" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'company', recordId: record.id })}
           </RecordTabs>
         </div>
 
         <aside className="space-y-4 text-[12px] lg:sticky lg:top-6">
-          <CompanySidebar company={record} />
+          <CompanySidebar
+            company={record}
+            onOpenAddresses={() => {
+              setActiveTab('addresses')
+            }}
+          />
         </aside>
       </div>
     </div>
@@ -189,6 +212,7 @@ function CompanyHeading({ company }: { readonly company: Company }): React.JSX.E
           onChange={(domain) => {
             patch({ domain: domain.length > 0 ? domain : null })
           }}
+          visitable
           displayClassName="text-[13px] font-mono text-ink-muted not-italic"
           emptyLabel="Add domain…"
         />
@@ -239,7 +263,13 @@ function CompanyOverview({ company }: { readonly company: Company }): React.JSX.
   )
 }
 
-function CompanySidebar({ company }: { readonly company: Company }): React.JSX.Element {
+function CompanySidebar({
+  company,
+  onOpenAddresses,
+}: {
+  readonly company: Company
+  readonly onOpenAddresses: () => void
+}): React.JSX.Element {
   const { patch, error } = useCompanyPatch(company)
 
   return (
@@ -309,27 +339,7 @@ function CompanySidebar({ company }: { readonly company: Company }): React.JSX.E
           displayClassName="not-italic text-[12px]"
         />
       </SidebarField>
-      <SidebarField label="HQ">
-        <InlineEdit
-          value={company.hq ?? ''}
-          onChange={(hq) => {
-            patch({ hq: hq.length > 0 ? hq : null })
-          }}
-          displayClassName="not-italic normal-case text-[12px]"
-          emptyLabel="Add HQ…"
-        />
-      </SidebarField>
-      <SidebarField label="Website">
-        <InlineEdit
-          value={company.website ?? ''}
-          onChange={(website) => {
-            patch({ website: website.length > 0 ? website : null })
-          }}
-          type="url"
-          displayClassName="not-italic normal-case text-[12px]"
-          emptyLabel="Add website…"
-        />
-      </SidebarField>
+      <AddressSidebarLink addresses={company.addresses} onOpen={onOpenAddresses} />
       <SidebarField label="Tech stack">
         <InlineEdit
           value={company.techStack.join(', ')}
@@ -376,6 +386,28 @@ function CompanySidebar({ company }: { readonly company: Company }): React.JSX.E
   )
 }
 
+function CompanyAddresses({ company }: { readonly company: Company }): React.JSX.Element {
+  const { patch, error } = useCompanyPatch(company)
+
+  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={company.addresses}
+        kinds={COMPANY_ADDRESS_KINDS}
+        kindLabels={COMPANY_ADDRESS_KIND_LABELS}
+        onChange={(addresses) => {
+          patch({ addresses })
+        }}
+      />
+    </div>
+  )
+}
+
 function CompanyFields({ company }: { readonly company: Company }): React.JSX.Element {
   const { patch, error } = useCompanyPatch(company)
   return (

package/src/pages/DealDetail.tsx

@@ -13,6 +13,7 @@ import {
 import { useDeal, useDeleteDeal, useUpdateDeal } from '../api/resources/deals.ts'
 import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
+import { useModuleEnabled } from '../api/resources/moduleSettings.ts'
 import { usePeople } from '../api/resources/people.ts'
 import { usePipelineStages } from '../api/resources/pipelineStages.ts'
 import { useRecordPlanItems } from '../api/resources/planItems.ts'
@@ -29,6 +30,7 @@ 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 { LinkedEventsPanel } from '../components/LinkedEventsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { PlanAttention } from '../components/PlanAttention.tsx'
 import { PlanPanel } from '../components/PlanPanel.tsx'
@@ -65,6 +67,7 @@ export function DealDetail(): React.JSX.Element {
   const deleteDeal = useDeleteDeal()
   const moduleTabs = inSlotOrder(useRecordTabs('deal'))
   const hasCustomFields = useHasCustomFields('deal')
+  const eventsEnabled = useModuleEnabled('events')
   const [activeTab, setActiveTab] = useState('overview')
   const [showConvert, setShowConvert] = useState(false)
   const formSubmissions = useFormSubmissionsForRecord('deal', id)
@@ -89,6 +92,7 @@ export function DealDetail(): React.JSX.Element {
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
     { id: 'lists', label: 'Lists' },
+    ...(eventsEnabled ? [{ id: 'events', label: 'Events' }] : []),
     ...(formSubmissions.records.length === 0
       ? []
       : [{ id: 'forms', label: 'Forms', count: formSubmissions.records.length }]),
@@ -164,6 +168,7 @@ export function DealDetail(): React.JSX.Element {
             {active === 'notes' && <NotesPanel targetType="deal" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="deal" targetId={record.id} />}
             {active === 'lists' && <ListsPanel targetType="deal" targetId={record.id} />}
+            {active === 'events' && <LinkedEventsPanel targetType="deal" targetId={record.id} />}
             {active === 'forms' && <FormsPanel targetType="deal" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'deal', recordId: record.id })}
           </RecordTabs>

package/src/pages/DecisionsPage.tsx

@@ -6,6 +6,7 @@ import { useTimezone } from '../api/resources/account.ts'
 import { useCompanies } from '../api/resources/companies.ts'
 import { useDeals } from '../api/resources/deals.ts'
 import { useDecisions } from '../api/resources/decisions.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'
@@ -46,6 +47,8 @@ const TARGET_LABELS: Readonly<Record<RecordTargetType, string>> = {
   raise: 'Raise',
   enquiry: 'Enquiry',
   candidate: 'Candidate',
+  event: 'Event',
+  attendance: 'Attendance',
 }
 
 const TARGET_ROUTES: Readonly<Partial<Record<RecordTargetType, string>>> = {
@@ -56,6 +59,7 @@ const TARGET_ROUTES: Readonly<Partial<Record<RecordTargetType, string>>> = {
   raise: '/fundraising',
   partnership: '/partnerships',
   enquiry: '/enquiries',
+  event: '/events',
 }
 
 interface TargetDirectory {
@@ -69,6 +73,7 @@ function useTargetDirectory(): TargetDirectory {
   const opportunities = useOpportunities({ limit: MAX_PAGE })
   const raises = useRaises({ limit: MAX_PAGE })
   const partnerships = usePartnerships({ limit: MAX_PAGE })
+  const events = useEvents({ limit: MAX_PAGE })
 
   const nameById = useMemo(
     () =>
@@ -80,6 +85,7 @@ function useTargetDirectory(): TargetDirectory {
           ...opportunities.records,
           ...raises.records,
           ...partnerships.records,
+          ...events.records,
         ].map((record) => [record.id, record.name]),
       ),
     [
@@ -89,6 +95,7 @@ function useTargetDirectory(): TargetDirectory {
       opportunities.records,
       raises.records,
       partnerships.records,
+      events.records,
     ],
   )