@kelpie/ui 0.12.0 → 0.14.0

package/src/pages/EventsPage.tsx

@@ -0,0 +1,382 @@
+import {
+  EVENT_FORMAT_LABELS,
+  EVENT_STATUS_LABELS,
+} from '@kelpie/schemas'
+import type { Event as CrmEvent, EventFormat, EventStatus } from '@kelpie/schemas'
+import { useMemo, useState } from 'react'
+import type { FormEvent } from 'react'
+import { Link, useNavigate } from 'react-router'
+
+import { useTimezone } from '../api/resources/account.ts'
+import { useCreateEvent, useEvents } from '../api/resources/events.ts'
+import { Chip } from '../components/Chip.tsx'
+import type { ChipTone } 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 { SegmentedControl } from '../components/SegmentedControl.tsx'
+import { formatDateTime } from '../lib/dates.ts'
+import { useListView } from '../lib/listView.ts'
+import { serverSortOnly } from '../lib/sort.ts'
+
+/**
+ * Events list and month calendar. Upcoming is the default. Not a kanban.
+ */
+
+type Scope = 'upcoming' | 'past' | 'all'
+type BoardView = 'list' | 'calendar'
+
+const DEFAULT_VISIBLE_KEYS: readonly string[] = ['name', 'starts', 'format', 'status', 'location']
+const SERVER_SORT_KEYS: readonly string[] = ['name', 'starts_at', 'created_at', 'updated_at']
+const MONTH_AND_YEAR = new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' })
+
+const STATUS_TONES: Readonly<Record<EventStatus, ChipTone>> = {
+  draft: 'neutral',
+  scheduled: 'accent',
+  cancelled: 'danger',
+}
+
+function dayKey(value: Date, timezone: string): string {
+  return new Intl.DateTimeFormat('en-CA', {
+    timeZone: timezone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(value)
+}
+
+export function EventsPage(): React.JSX.Element {
+  const [term, setTerm] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [name, setName] = useState('')
+  const [scope, setScope] = useState<Scope>('upcoming')
+  const [board, setBoard] = useState<BoardView>('list')
+  const [sort, setSort] = useState<string | undefined>(undefined)
+  const navigate = useNavigate()
+  const timezone = useTimezone()
+  const now = new Date()
+  const [month, setMonth] = useState({ year: now.getFullYear(), month: now.getMonth() })
+  const createEvent = useCreateEvent()
+
+  const fromTo =
+    board === 'calendar'
+      ? monthBounds(month.year, month.month)
+      : scope === 'upcoming'
+        ? { from: now.toISOString(), to: undefined }
+        : scope === 'past'
+          ? { from: undefined, to: now.toISOString() }
+          : { from: undefined, to: undefined }
+
+  const events = useEvents({
+    term: term.trim().length > 0 ? term.trim() : undefined,
+    from: fromTo.from,
+    to: fromTo.to,
+    sort: serverSortOnly(
+      sort ?? (scope === 'past' ? '-starts_at' : 'starts_at'),
+      SERVER_SORT_KEYS,
+    ),
+    limit: board === 'calendar' ? 200 : undefined,
+  })
+
+  async function addEvent(event: FormEvent): Promise<void> {
+    event.preventDefault()
+
+    const trimmed = name.trim()
+
+    if (trimmed.length === 0) {
+      return
+    }
+
+    const startsAt = new Date(Date.now() + 24 * 60 * 60 * 1000)
+    const endsAt = new Date(startsAt.getTime() + 60 * 60 * 1000)
+    const created = await createEvent.runAsync({
+      name: trimmed,
+      startsAt,
+      endsAt,
+      format: 'virtual',
+    })
+
+    setAdding(false)
+    setName('')
+    await navigate(`/events/${created.id}`)
+  }
+
+  const columns: readonly Column<CrmEvent>[] = [
+    {
+      key: 'name',
+      header: 'Event',
+      sortKey: 'name',
+      render: (record) => <span className="font-medium text-ink">{record.name}</span>,
+    },
+    {
+      key: 'starts',
+      header: 'Starts',
+      sortKey: 'starts_at',
+      render: (record) => (
+        <span className="tabular-nums text-ink-muted">
+          {formatDateTime(record.startsAt, timezone)}
+        </span>
+      ),
+    },
+    {
+      key: 'format',
+      header: 'Format',
+      getSortValue: (record) => record.format,
+      render: (record) => EVENT_FORMAT_LABELS[record.format as EventFormat] ?? record.format,
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      getSortValue: (record) => record.status,
+      render: (record) => (
+        <Chip tone={STATUS_TONES[record.status] ?? 'neutral'}>
+          {EVENT_STATUS_LABELS[record.status] ?? record.status}
+        </Chip>
+      ),
+    },
+    {
+      key: 'location',
+      header: 'Location',
+      getSortValue: (record) => record.location,
+      render: (record) => (
+        <span className="text-ink-muted">{record.location.length > 0 ? record.location : '—'}</span>
+      ),
+    },
+  ]
+
+  const supportedKeys = columns.map((column) => column.key)
+  const listView = useListView('events', supportedKeys, DEFAULT_VISIBLE_KEYS)
+  const pickerOptions = columns.map((column) => ({ key: column.key, label: column.header }))
+
+  return (
+    <div className="animate-fade-in">
+      <PageHeader
+        title="Events"
+        onAdd={() => {
+          setAdding(true)
+        }}
+        addLabel="Add event"
+        actions={
+          <>
+            <SegmentedControl
+              ariaLabel="Upcoming or past"
+              value={scope}
+              onChange={setScope}
+              options={[
+                { id: 'upcoming', label: 'Upcoming' },
+                { id: 'past', label: 'Past' },
+                { id: 'all', label: 'All' },
+              ]}
+            />
+            <SegmentedControl
+              ariaLabel="List or calendar"
+              value={board}
+              onChange={setBoard}
+              options={[
+                { id: 'list', label: 'List' },
+                { id: 'calendar', label: 'Calendar' },
+              ]}
+            />
+            <ColumnPicker
+              options={pickerOptions}
+              visibleKeys={listView.visibleKeys}
+              onChange={listView.setVisibleKeys}
+            />
+          </>
+        }
+      />
+
+      <FilterBar value={term} onChange={setTerm} placeholder="Search events…" />
+
+      {adding && (
+        <form
+          onSubmit={(event) => {
+            void addEvent(event)
+          }}
+          className="mb-4 flex flex-wrap items-end gap-2 rounded-md border border-border p-3"
+        >
+          <label className="min-w-[220px] flex-1 text-[12px] font-medium text-ink-muted">
+            Name
+            <input
+              value={name}
+              onChange={(event) => {
+                setName(event.target.value)
+              }}
+              className="mt-1 w-full rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] text-ink outline-none focus:border-accent"
+              autoFocus
+            />
+          </label>
+          <button
+            type="submit"
+            disabled={createEvent.isPending || name.trim().length === 0}
+            className="rounded-md bg-accent px-3 py-2 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-50"
+          >
+            Create
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setAdding(false)
+              setName('')
+            }}
+            className="text-[12px] font-medium text-ink-muted hover:text-ink"
+          >
+            Cancel
+          </button>
+          {createEvent.error !== null && <ErrorPanel error={createEvent.error} />}
+        </form>
+      )}
+
+      {events.error !== null ? (
+        <ErrorPanel error={events.error} />
+      ) : events.isLoading ? (
+        <LoadingPanel label="Loading events…" />
+      ) : board === 'calendar' ? (
+        <EventCalendar
+          year={month.year}
+          month={month.month}
+          timezone={timezone}
+          events={events.records}
+          onShift={(delta) => {
+            setMonth((current) => {
+              const next = new Date(current.year, current.month + delta, 1)
+
+              return { year: next.getFullYear(), month: next.getMonth() }
+            })
+          }}
+        />
+      ) : (
+        <>
+          <Paginator list={events} placement="top" />
+          <DataTable
+            columns={columns}
+            rows={events.records}
+            getRowId={(record) => record.id}
+            onRowClick={(record) => {
+              void navigate(`/events/${record.id}`)
+            }}
+            emptyMessage={term.trim().length > 0 ? 'No events match this filter' : 'No events yet'}
+            sort={sort}
+            onSortChange={setSort}
+            visibleColumnKeys={listView.visibleKeys}
+          />
+          <Paginator list={events} />
+        </>
+      )}
+    </div>
+  )
+}
+
+function monthBounds(year: number, month: number): { from: string; to: string } {
+  const from = new Date(Date.UTC(year, month, 1))
+  const to = new Date(Date.UTC(year, month + 1, 1))
+
+  return { from: from.toISOString(), to: to.toISOString() }
+}
+
+function calendarCells(year: number, month: number): readonly { key: string; date: string | null; day: number | null }[] {
+  const firstWeekday = (new Date(year, month, 1).getDay() + 6) % 7
+  const dayCount = new Date(year, month + 1, 0).getDate()
+  const cells: { key: string; date: string | null; day: number | null }[] = []
+
+  for (let index = 0; index < firstWeekday; index++) {
+    cells.push({ key: `lead-${String(index)}`, date: null, day: null })
+  }
+
+  for (let day = 1; day <= dayCount; day++) {
+    const date = `${String(year)}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+
+    cells.push({ key: date, date, day })
+  }
+
+  while (cells.length % 7 !== 0) {
+    cells.push({ key: `trail-${String(cells.length)}`, date: null, day: null })
+  }
+
+  return cells
+}
+
+function EventCalendar({
+  year,
+  month,
+  timezone,
+  events,
+  onShift,
+}: {
+  readonly year: number
+  readonly month: number
+  readonly timezone: string
+  readonly events: readonly CrmEvent[]
+  readonly onShift: (delta: number) => void
+}): React.JSX.Element {
+  const byDay = useMemo(() => {
+    const grouped = new Map<string, CrmEvent[]>()
+
+    for (const record of events) {
+      const key = dayKey(record.startsAt, timezone)
+      const held = grouped.get(key) ?? []
+
+      held.push(record)
+      grouped.set(key, held)
+    }
+
+    return grouped
+  }, [events, timezone])
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center gap-2">
+        <button
+          type="button"
+          onClick={() => {
+            onShift(-1)
+          }}
+          aria-label="Previous month"
+          className="rounded-md border border-border px-2 py-1 text-[12px] font-medium text-ink-muted hover:text-ink"
+        >
+          ←
+        </button>
+        <span className="min-w-[140px] text-center text-[13px] font-semibold text-ink">
+          {MONTH_AND_YEAR.format(new Date(year, month, 1))}
+        </span>
+        <button
+          type="button"
+          onClick={() => {
+            onShift(1)
+          }}
+          aria-label="Next month"
+          className="rounded-md border border-border px-2 py-1 text-[12px] font-medium text-ink-muted hover:text-ink"
+        >
+          →
+        </button>
+      </div>
+      <div className="grid grid-cols-7 gap-px overflow-hidden rounded-md border border-border bg-border">
+        {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((label) => (
+          <div key={label} className="bg-surface px-2 py-1 text-[11px] font-medium text-ink-muted">
+            {label}
+          </div>
+        ))}
+        {calendarCells(year, month).map((cell) => (
+          <div key={cell.key} className="min-h-[88px] bg-surface p-1.5">
+            {cell.day !== null && (
+              <div className="text-[11px] font-medium text-ink-muted">{cell.day}</div>
+            )}
+            {cell.date !== null &&
+              (byDay.get(cell.date) ?? []).map((record) => (
+                <Link
+                  key={record.id}
+                  to={`/events/${record.id}`}
+                  className="mt-1 block truncate text-[11px] font-medium text-accent hover:underline"
+                >
+                  {record.name}
+                </Link>
+              ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/pages/ListDetail.tsx

@@ -14,6 +14,7 @@ import {
   useRemoveListMember,
 } from '../api/resources/listMembers.ts'
 import { useEnquiries } from '../api/resources/enquiries.ts'
+import { useEvents } from '../api/resources/events.ts'
 import { useOpportunities } from '../api/resources/opportunities.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
 import { usePeople } from '../api/resources/people.ts'
@@ -274,9 +275,13 @@ function detailPathFor(targetType: RecordTargetType, targetId: string): string {
       return `/fundraising/${targetId}`
     case 'enquiry':
       return `/enquiries/${targetId}`
+    case 'event':
+      return `/events/${targetId}`
     case 'candidate':
       // A candidate has no page of its own; the person's does.
       return `/hiring`
+    case 'attendance':
+      return `/events`
   }
 }
 
@@ -309,6 +314,8 @@ function MemberPicker({
       return <RaisesPicker attached={attached} onPick={onPick} />
     case 'enquiry':
       return <EnquiriesPicker attached={attached} onPick={onPick} />
+    case 'event':
+      return <EventsPicker attached={attached} onPick={onPick} />
     case 'candidate':
       return (
         <p className="text-[12px] text-ink-faint">
@@ -316,6 +323,13 @@ function MemberPicker({
           page, then attach them here through the API.
         </p>
       )
+    case 'attendance':
+      return (
+        <p className="text-[12px] text-ink-faint">
+          Attendance lists have no inline picker in this release. Register people on an Event,
+          then attach them here through the API.
+        </p>
+      )
   }
 }
 
@@ -394,6 +408,16 @@ function EnquiriesPicker({ attached, onPick }: PickerProps): React.JSX.Element {
   return <PickerBox onQueryChange={setSearch} onPick={onPick} options={options} />
 }
 
+function EventsPicker({ attached, onPick }: PickerProps): React.JSX.Element {
+  const [search, setSearch] = useState('')
+  const records = useEvents({ 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

@@ -12,6 +12,7 @@ import {
 } from '../api/resources/conversions.ts'
 import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
+import { useModuleEnabled } from '../api/resources/moduleSettings.ts'
 import {
   useDeleteOpportunity,
   useOpportunity,
@@ -33,6 +34,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'
@@ -70,6 +72,7 @@ export function OpportunityDetail(): React.JSX.Element {
   const deleteOpportunity = useDeleteOpportunity()
   const moduleTabs = inSlotOrder(useRecordTabs('opportunity'))
   const hasCustomFields = useHasCustomFields('opportunity')
+  const eventsEnabled = useModuleEnabled('events')
   const [activeTab, setActiveTab] = useState('overview')
   const [showConvert, setShowConvert] = useState(false)
   const formSubmissions = useFormSubmissionsForRecord('opportunity', id)
@@ -94,6 +97,7 @@ export function OpportunityDetail(): 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 }]),
@@ -176,6 +180,9 @@ export function OpportunityDetail(): React.JSX.Element {
               <DecisionsPanel targetType="opportunity" targetId={record.id} />
             )}
             {active === 'lists' && <ListsPanel targetType="opportunity" targetId={record.id} />}
+            {active === 'events' && (
+              <LinkedEventsPanel targetType="opportunity" targetId={record.id} />
+            )}
             {active === 'forms' && <FormsPanel targetType="opportunity" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'opportunity', recordId: record.id })}
           </RecordTabs>

package/src/pages/PartnershipDetail.tsx

@@ -12,6 +12,7 @@ import {
 } from '../api/resources/conversions.ts'
 import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
+import { useModuleEnabled } from '../api/resources/moduleSettings.ts'
 import {
   useDeletePartnership,
   usePartnership,
@@ -33,6 +34,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'
@@ -70,6 +72,7 @@ export function PartnershipDetail(): React.JSX.Element {
   const deletePartnership = useDeletePartnership()
   const moduleTabs = inSlotOrder(useRecordTabs('partnership'))
   const hasCustomFields = useHasCustomFields('partnership')
+  const eventsEnabled = useModuleEnabled('events')
   const [activeTab, setActiveTab] = useState('overview')
   const [showConvert, setShowConvert] = useState(false)
   const formSubmissions = useFormSubmissionsForRecord('partnership', id)
@@ -94,6 +97,7 @@ export function PartnershipDetail(): 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 }]),
@@ -176,6 +180,9 @@ export function PartnershipDetail(): React.JSX.Element {
               <DecisionsPanel targetType="partnership" targetId={record.id} />
             )}
             {active === 'lists' && <ListsPanel targetType="partnership" targetId={record.id} />}
+            {active === 'events' && (
+              <LinkedEventsPanel targetType="partnership" targetId={record.id} />
+            )}
             {active === 'forms' && <FormsPanel targetType="partnership" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'partnership', recordId: record.id })}
           </RecordTabs>

package/src/pages/PeoplePage.tsx

@@ -1,3 +1,4 @@
+import { SOCIAL_NETWORK_LABELS, formatAddress, primaryAddress } from '@kelpie/schemas'
 import type { Person } from '@kelpie/schemas'
 import { useState } from 'react'
 import { useNavigate } from 'react-router'
@@ -5,6 +6,7 @@ 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 { SocialNetworkIcon } from '../components/SocialNetworkIcon.tsx'
 import { ColumnPicker } from '../components/ColumnPicker.tsx'
 import { DataTable } from '../components/DataTable.tsx'
 import type { Column } from '../components/DataTable.tsx'
@@ -130,17 +132,28 @@ export function PeoplePage(): React.JSX.Element {
           <span className="flex flex-wrap gap-1">
             {person.socialProfiles.map((entry) => (
               <Chip key={entry.network}>
-                <span className="text-[10px]">{entry.network}</span>
+                <span className="inline-flex items-center gap-1">
+                  <SocialNetworkIcon network={entry.network} className="size-3" />
+                  <span className="text-[10px]">{SOCIAL_NETWORK_LABELS[entry.network]}</span>
+                </span>
               </Chip>
             ))}
           </span>
         ),
     },
     {
-      key: 'location',
-      header: 'Location',
-      getSortValue: (person) => person.location,
-      render: (person) => person.location ?? '—',
+      key: 'addresses',
+      header: 'Address',
+      getSortValue: (person) => {
+        const address = primaryAddress(person.addresses)
+
+        return address === undefined ? null : formatAddress(address)
+      },
+      render: (person) => {
+        const address = primaryAddress(person.addresses)
+
+        return address === undefined ? '—' : formatAddress(address)
+      },
     },
     {
       key: 'timezone',