@open-mercato/core 0.6.6-develop.6519.1.bdc91fb755 → 0.6.6-develop.6520.1.55df6df792

package/src/modules/customers/components/calendar/editor/ResourcesField.tsx

@@ -0,0 +1,264 @@
+"use client"
+
+import * as React from 'react'
+import { Box, Check, ChevronDown, Plus } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import type { EditorResource } from '../../../lib/calendar/editorPayload'
+import { fetchResourceTypes, searchResourceOptions, type ResourceOption, type ResourceType } from './lookups'
+import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, useDropdownDismiss } from './inputs'
+
+const TYPE_SEARCH_THRESHOLD = 8
+
+// Multi-select of bookable resources (rooms, cars, equipment) from the
+// resources module. Rendered only when that module is loaded — the calendar
+// consumes its public list API and stores FK-id + label snapshots in
+// `linkedEntities`, never resource entities (#3552). A potentially large
+// catalog (many resources AND many types) stays navigable with a collapsible
+// resource-type filter (searchable, with counts), server-side search and a
+// "showing N of M" hint.
+export function ResourcesField({
+  placeholder,
+  ariaLabel,
+  value,
+  onChange,
+}: {
+  placeholder: string
+  ariaLabel: string
+  value: EditorResource[]
+  onChange(next: EditorResource[]): void
+}) {
+  const t = useT()
+  const [query, setQuery] = React.useState('')
+  const [open, setOpen] = React.useState(false)
+  const [options, setOptions] = React.useState<ResourceOption[]>([])
+  const [total, setTotal] = React.useState(0)
+  const [loading, setLoading] = React.useState(false)
+  const [types, setTypes] = React.useState<ResourceType[]>([])
+  const [typeFilter, setTypeFilter] = React.useState<string | null>(null)
+  const [typeMenuOpen, setTypeMenuOpen] = React.useState(false)
+  const [typeQuery, setTypeQuery] = React.useState('')
+  const close = React.useCallback(() => {
+    setOpen(false)
+    setTypeMenuOpen(false)
+  }, [])
+  const rootRef = useDropdownDismiss(open, close)
+
+  // Load the type filter once the dropdown first opens.
+  React.useEffect(() => {
+    if (!open || types.length > 0) return
+    const controller = new AbortController()
+    let cancelled = false
+    fetchResourceTypes(controller.signal).then((found) => {
+      if (!cancelled) setTypes(found)
+    })
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+  }, [open, types.length])
+
+  React.useEffect(() => {
+    if (!open) return
+    const controller = new AbortController()
+    let cancelled = false
+    const timer = window.setTimeout(async () => {
+      setLoading(true)
+      try {
+        const result = await searchResourceOptions({ query: query.trim(), resourceTypeId: typeFilter }, controller.signal)
+        if (cancelled) return
+        setOptions(result.items)
+        setTotal(result.total)
+      } catch {
+        if (!cancelled) {
+          setOptions([])
+          setTotal(0)
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }, 250)
+    return () => {
+      cancelled = true
+      controller.abort()
+      window.clearTimeout(timer)
+    }
+  }, [open, query, typeFilter])
+
+  const selectedIds = new Set(value.map((resource) => resource.id))
+  const visibleOptions = options.filter((option) => !selectedIds.has(option.id))
+  const hiddenCount = Math.max(0, total - options.length)
+  const activeType = typeFilter ? types.find((type) => type.id === typeFilter) ?? null : null
+  const filteredTypes = typeQuery.trim().length
+    ? types.filter((type) => type.name.toLowerCase().includes(typeQuery.trim().toLowerCase()))
+    : types
+
+  const selectType = (id: string | null) => {
+    setTypeFilter(id)
+    setTypeMenuOpen(false)
+    setTypeQuery('')
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      className="relative w-full"
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) close()
+      }}
+    >
+      <div
+        className={cn(
+          'flex min-h-14 w-full flex-wrap content-center items-center gap-2 rounded-md bg-background px-2.5 py-2',
+          CONTROL_BORDER,
+        )}
+      >
+        {value.map((resource) => (
+          <span key={resource.id} className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted py-1 pl-2 pr-2">
+            <Box aria-hidden className="size-3.5 text-muted-foreground" />
+            <span className="max-w-40 truncate text-xs font-medium text-foreground">{resource.label}</span>
+            <IconButton
+              variant="ghost"
+              size="xs"
+              onClick={(event) => {
+                event.stopPropagation()
+                onChange(value.filter((entry) => entry.id !== resource.id))
+              }}
+              aria-label={t('customers.calendar.editor.removeResource', 'Remove {name}', { name: resource.label })}
+              className="size-5 shrink-0"
+            >
+              <Plus aria-hidden className="size-3.5 rotate-45 opacity-50" />
+            </IconButton>
+          </span>
+        ))}
+        <Input
+          type="text"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onFocus={() => setOpen(true)}
+          placeholder={value.length > 0 ? '' : placeholder}
+          aria-label={ariaLabel}
+          role="combobox"
+          aria-expanded={open}
+          className="min-w-36 flex-1 border-0 bg-transparent px-0 shadow-none hover:bg-transparent focus-within:border-transparent focus-within:shadow-none"
+          inputClassName="text-sm text-foreground placeholder:text-muted-foreground"
+        />
+      </div>
+      {open ? (
+        <div className={cn(DROPDOWN_PANEL_CLASS, 'flex max-h-none flex-col overflow-visible p-0')}>
+          {types.length > 0 ? (
+            <div className="border-b border-border p-1.5">
+              <Button
+                type="button"
+                variant="outline"
+                aria-haspopup="listbox"
+                aria-expanded={typeMenuOpen}
+                onClick={() => setTypeMenuOpen((previous) => !previous)}
+                className={cn('h-8 w-full justify-between bg-background px-2 text-sm font-normal shadow-none', CONTROL_BORDER)}
+              >
+                <span className="truncate">
+                  {activeType
+                    ? `${activeType.name} (${activeType.count})`
+                    : t('customers.calendar.editor.resourceTypes.all', 'All types')}
+                </span>
+                <ChevronDown aria-hidden className="size-4 shrink-0 opacity-60" />
+              </Button>
+            </div>
+          ) : null}
+
+          {typeMenuOpen ? (
+            <div role="listbox" aria-label={t('customers.calendar.editor.resourceTypes.filterLabel', 'Resource type')} className="flex flex-col">
+              {types.length > TYPE_SEARCH_THRESHOLD ? (
+                <div className="border-b border-border p-1.5">
+                  <Input
+                    type="text"
+                    value={typeQuery}
+                    onChange={(event) => setTypeQuery(event.target.value)}
+                    placeholder={t('customers.calendar.editor.resourceTypes.searchPlaceholder', 'Search types…')}
+                    aria-label={t('customers.calendar.editor.resourceTypes.searchPlaceholder', 'Search types…')}
+                    autoFocus
+                    className="h-8"
+                  />
+                </div>
+              ) : null}
+              <div className="max-h-56 overflow-y-auto p-1">
+                <TypeRow label={t('customers.calendar.editor.resourceTypes.all', 'All types')} active={typeFilter === null} onSelect={() => selectType(null)} />
+                {filteredTypes.map((type) => (
+                  <TypeRow key={type.id} label={type.name} count={type.count} active={typeFilter === type.id} onSelect={() => selectType(type.id)} />
+                ))}
+                {filteredTypes.length === 0 ? (
+                  <p className="px-2 py-3 text-center text-xs text-muted-foreground">
+                    {t('customers.calendar.editor.noResults', 'No results')}
+                  </p>
+                ) : null}
+              </div>
+            </div>
+          ) : (
+            <>
+              <div role="listbox" aria-label={ariaLabel} className="max-h-56 overflow-y-auto p-1">
+                {loading ? (
+                  <p className="px-2 py-3 text-center text-xs text-muted-foreground">
+                    {t('customers.calendar.editor.searching', 'Searching…')}
+                  </p>
+                ) : null}
+                {!loading && visibleOptions.length === 0 ? (
+                  <p className="px-2 py-3 text-center text-xs text-muted-foreground">
+                    {t('customers.calendar.editor.noResults', 'No results')}
+                  </p>
+                ) : null}
+                {!loading
+                  ? visibleOptions.map((option) => (
+                      <Button
+                        key={option.id}
+                        type="button"
+                        variant="ghost"
+                        role="option"
+                        aria-selected={false}
+                        title={option.label}
+                        onClick={() => {
+                          onChange([...value, { id: option.id, label: option.label }])
+                          setQuery('')
+                        }}
+                        className="h-auto w-full justify-start gap-2 whitespace-normal px-2 py-1.5 text-left text-sm font-normal text-foreground"
+                      >
+                        <Box aria-hidden className="size-4 text-muted-foreground" />
+                        <span className="min-w-0 flex-1 truncate">{option.label}</span>
+                      </Button>
+                    ))
+                  : null}
+              </div>
+              {!loading && hiddenCount > 0 ? (
+                <p className="border-t border-border px-2 py-1.5 text-center text-xs text-muted-foreground">
+                  {t('customers.calendar.editor.resourceTypes.moreHint', 'Showing {shown} of {total} — keep typing to narrow', {
+                    shown: options.length,
+                    total,
+                  })}
+                </p>
+              ) : null}
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function TypeRow({ label, count, active, onSelect }: { label: string; count?: number; active: boolean; onSelect(): void }) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      role="option"
+      aria-selected={active}
+      onClick={onSelect}
+      className={cn('h-auto w-full justify-start gap-2 px-2 py-1.5 text-left text-sm font-normal', active ? 'bg-muted text-foreground' : 'text-foreground')}
+    >
+      <Check aria-hidden className={cn('size-4 shrink-0', active ? 'opacity-100' : 'opacity-0')} />
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {typeof count === 'number' ? <span className="shrink-0 tabular-nums text-xs text-muted-foreground">{count}</span> : null}
+    </Button>
+  )
+}

package/src/modules/customers/components/calendar/editor/SegmentGroup.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { Button } from '@open-mercato/ui/primitives/button'
 
-export type SegmentOption<T extends string> = { value: T; label: string }
+export type SegmentOption<T extends string> = { value: T; label: string; icon?: React.ReactNode }
 
 export function SegmentGroup<T extends string>({
   options,
@@ -23,7 +23,7 @@ export function SegmentGroup<T extends string>({
     <div
       role="group"
       aria-label={ariaLabel}
-      className="inline-flex max-w-full items-start overflow-x-auto rounded-md border border-border bg-background"
+      className="flex w-full items-stretch overflow-hidden rounded-md border border-border bg-background"
     >
       {options.map((option, index) => {
         const isActive = option.value === value
@@ -34,14 +34,22 @@ export function SegmentGroup<T extends string>({
             variant="ghost"
             aria-pressed={isActive}
             onClick={() => onChange(option.value)}
+            title={option.label}
+            data-state={isActive ? 'active' : 'inactive'}
             className={cn(
-              'h-auto rounded-none border-0 text-sm font-medium leading-5 shadow-none',
-              size === 'md' ? 'px-4 py-2' : 'px-3.5 py-1.5',
+              'h-auto min-w-0 flex-1 justify-center gap-1 rounded-none border-0 px-1.5 text-sm font-medium leading-5 shadow-none',
+              size === 'md' ? 'py-2' : 'py-1.5',
               index > 0 && 'border-l border-border',
-              isActive ? 'bg-muted text-foreground hover:bg-muted' : 'bg-background text-muted-foreground',
+              isActive
+                // Keep the indigo fill on hover in BOTH themes — the ghost Button
+                // ships `dark:hover:bg-accent/50`, which would otherwise wash the
+                // active segment out on hover in dark mode.
+                ? 'bg-accent-indigo font-semibold text-accent-indigo-foreground hover:bg-accent-indigo hover:text-accent-indigo-foreground dark:hover:bg-accent-indigo'
+                : 'bg-background text-muted-foreground hover:bg-muted hover:text-foreground',
             )}
           >
-            {option.label}
+            {option.icon ? <span aria-hidden className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')}>{option.icon}</span> : null}
+            <span className="truncate">{option.label}</span>
           </Button>
         )
       })}

package/src/modules/customers/components/calendar/editor/inputs.tsx

@@ -1,11 +1,12 @@
 "use client"
 
 import * as React from 'react'
-import { ChevronDown, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
-import { Input } from '@open-mercato/ui/primitives/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 
 export const CONTROL_BORDER = 'border border-input'
@@ -14,9 +15,39 @@ export const LABEL_CLASS = 'text-xs font-medium text-muted-foreground'
 export const DROPDOWN_PANEL_CLASS =
   'absolute z-50 mt-1 max-h-56 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md'
 
-export function Field({ label, children, error }: { label: string; children: React.ReactNode; error?: string | null }) {
+/**
+ * Closes an editor dropdown on pointer-down outside the component or Escape.
+ * Blur alone is unreliable inside the Radix dialog focus trap (#3552 feedback:
+ * the Resources list stayed open), so dismissal listens on the document while
+ * the dropdown is open. Returns the ref to attach to the component root.
+ */
+export function useDropdownDismiss(open: boolean, onClose: () => void): React.RefObject<HTMLDivElement | null> {
+  const rootRef = React.useRef<HTMLDivElement | null>(null)
+  React.useEffect(() => {
+    if (!open) return
+    const handlePointerDown = (event: PointerEvent) => {
+      if (rootRef.current && event.target instanceof Node && !rootRef.current.contains(event.target)) onClose()
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        // Swallow Escape so the dialog itself stays open.
+        event.stopPropagation()
+        onClose()
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [open, onClose])
+  return rootRef
+}
+
+export function Field({ label, children, error, className }: { label: string; children: React.ReactNode; error?: string | null; className?: string }) {
   return (
-    <div className="flex w-full flex-col gap-1.5">
+    <div className={cn('flex w-full flex-col gap-1.5', className)}>
       <span className={LABEL_CLASS}>{label}</span>
       {children}
       {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
@@ -38,22 +69,6 @@ export function UppercaseBadge({ style, className, children }: { style?: React.C
   )
 }
 
-// Mockup tint colors are illustrative; runtime pills derive from the
-// dictionary entry color using the appearanceColor hex-alpha tint technique
-// (see EventBlock.softTintStyle) with a darkened text shade of the same hue.
-export function categoryPillStyle(color: string | null | undefined): React.CSSProperties {
-  if (typeof color === 'string' && /^#[0-9a-fA-F]{6}$/.test(color)) {
-    return { backgroundColor: `${color}59`, color: `color-mix(in srgb, ${color} 55%, black)` }
-  }
-  if (typeof color === 'string' && color.length > 0) {
-    return {
-      backgroundColor: `color-mix(in srgb, ${color} 35%, white)`,
-      color: `color-mix(in srgb, ${color} 55%, black)`,
-    }
-  }
-  return {}
-}
-
 export function AllDayToggle({ checked, onCheckedChange, label }: { checked: boolean; onCheckedChange(next: boolean): void; label: string }) {
   return (
     <Switch
@@ -65,17 +80,37 @@ export function AllDayToggle({ checked, onCheckedChange, label }: { checked: boo
   )
 }
 
-function formatDisplayDate(value: string, locale: string): string {
+function parseDateValue(value: string): Date | null {
+  if (!value) return null
   const parsed = new Date(`${value}T00:00:00`)
-  if (Number.isNaN(parsed.getTime())) return value
-  return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }).format(parsed)
+  return Number.isNaN(parsed.getTime()) ? null : parsed
+}
+
+function formatDateValue(date: Date): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+
+// Close the field's popover when the surrounding editor dialog scrolls, so a
+// portalled DS popover (DatePicker/Select) doesn't float over the form or drift
+// from its field (#3747 feedback). Radix ignores synthetic dismiss events, so
+// this drives the popover's controlled `open` state instead. The editor
+// dispatches `EDITOR_SCROLL_EVENT` on scroll.
+export const EDITOR_SCROLL_EVENT = 'om-calendar-editor-scroll'
+function useCloseOnEditorScroll(setOpen: (open: boolean) => void) {
+  React.useEffect(() => {
+    const handler = () => setOpen(false)
+    document.addEventListener(EDITOR_SCROLL_EVENT, handler)
+    return () => document.removeEventListener(EDITOR_SCROLL_EVENT, handler)
+  }, [setOpen])
 }
 
+// DS DatePicker (calendar popover) + DS Select (scrolling 30-min list) replace
+// the native `<input type=date|time>` overlays, which only opened via the
+// browser chevron and did not match the design system (#3747 feedback).
 export function DateControl({
   value,
   onChange,
   ariaLabel,
-  locale,
   className,
 }: {
   value: string
@@ -84,38 +119,44 @@ export function DateControl({
   locale: string
   className?: string
 }) {
+  const [open, setOpen] = React.useState(false)
+  useCloseOnEditorScroll(setOpen)
   return (
-    <div
-      className={cn(
-        'relative flex h-9 w-full items-center justify-between rounded-md bg-background px-3',
-        CONTROL_BORDER,
-        className,
-      )}
-    >
-      <span className="truncate text-sm text-foreground">{formatDisplayDate(value, locale)}</span>
-      <span aria-hidden className="h-px w-2 shrink-0" />
-      <ChevronDown aria-hidden className="size-4 shrink-0 opacity-60" />
-      <Input
-        type="date"
-        value={value}
-        onChange={(event) => { if (event.target.value) onChange(event.target.value) }}
-        aria-label={ariaLabel}
-        className="absolute inset-0 h-full w-full cursor-pointer border-0 bg-transparent p-0 opacity-0 shadow-none hover:bg-transparent"
-        inputClassName="h-full cursor-pointer"
-      />
-    </div>
+    <DatePicker
+      value={parseDateValue(value)}
+      onChange={(date) => { if (date) onChange(formatDateValue(date)) }}
+      footer="none"
+      open={open}
+      onOpenChange={setOpen}
+      aria-label={ariaLabel}
+      className={cn('w-full', className)}
+    />
   )
 }
 
+// 24h times at 30-minute steps.
+const TIME_OPTIONS: string[] = Array.from({ length: 48 }, (_, index) => {
+  const hour = Math.floor(index / 2)
+  const minute = index % 2 === 0 ? '00' : '30'
+  return `${String(hour).padStart(2, '0')}:${minute}`
+})
+
 export function TimeControl({ value, onChange, ariaLabel }: { value: string; onChange(next: string): void; ariaLabel: string }) {
+  const [open, setOpen] = React.useState(false)
+  useCloseOnEditorScroll(setOpen)
+  // Keep an off-grid value (e.g. an imported 22:15) selectable.
+  const options = value && !TIME_OPTIONS.includes(value) ? [value, ...TIME_OPTIONS] : TIME_OPTIONS
   return (
-    <Input
-      type="time"
-      value={value}
-      onChange={(event) => { if (event.target.value) onChange(event.target.value) }}
-      aria-label={ariaLabel}
-      className="h-9 w-32 shrink-0"
-    />
+    <Select value={value} onValueChange={onChange} open={open} onOpenChange={setOpen}>
+      <SelectTrigger aria-label={ariaLabel} className="h-9 w-32 shrink-0">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent className="max-h-64">
+        {options.map((time) => (
+          <SelectItem key={time} value={time}>{time}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   )
 }
 

package/src/modules/customers/components/calendar/editor/lookups.ts

@@ -126,10 +126,15 @@ export async function fetchDealById(dealId: string, signal: AbortSignal): Promis
 
 export async function searchPeopleOptions(
   query: string,
-  options: { includeCustomers: boolean; signal: AbortSignal },
+  options: { includeCustomers: boolean; includeStaff?: boolean; signal: AbortSignal },
 ): Promise<PersonOption[]> {
+  // Staff lookup is optional twice over: skipped when the staff module is not
+  // loaded (includeStaff === false) and non-fatal when the endpoint errors, so
+  // the people picker always degrades to customer-only options (#3552).
   const [staff, customers] = await Promise.all([
-    fetchAssignableStaffMembers(query, { pageSize: 10, signal: options.signal }),
+    options.includeStaff === false
+      ? Promise.resolve<Awaited<ReturnType<typeof fetchAssignableStaffMembers>>>([])
+      : fetchAssignableStaffMembers(query, { pageSize: 10, signal: options.signal }).catch(() => []),
     options.includeCustomers
       ? searchRelatedEntities('person', query, options.signal)
       : Promise.resolve<RelatedEntityOption[]>([]),
@@ -149,6 +154,114 @@ export async function searchPeopleOptions(
   return [...staffOptions, ...customerOptions]
 }
 
+export type ResourceOption = {
+  id: string
+  label: string
+}
+
+// Consumed only when the resources module is loaded (server flag from the
+// calendar page); reads the resources CRUD list API — never resource entities.
+export type ResourceType = { id: string; name: string; count: number }
+
+export type ResourceSearchResult = { items: ResourceOption[]; total: number }
+
+const RESOURCE_PAGE_SIZE = 20
+
+// Server-side resource search, optionally scoped to one resource type. Returns
+// the (page-limited) options plus the full match count so the UI can show a
+// "showing N of M" hint and nudge the user to narrow a large catalog (#3552).
+export async function searchResourceOptions(
+  params: { query: string; resourceTypeId?: string | null },
+  signal: AbortSignal,
+): Promise<ResourceSearchResult> {
+  const search = new URLSearchParams({
+    page: '1',
+    pageSize: String(RESOURCE_PAGE_SIZE),
+    sortField: 'name',
+    sortDir: 'asc',
+    isActive: 'true',
+  })
+  if (params.query.length) search.set('search', params.query)
+  if (params.resourceTypeId) search.set('resourceTypeId', params.resourceTypeId)
+  const data = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>>; total?: number }>(
+    `/api/resources/resources?${search.toString()}`,
+    { signal },
+  )
+  const rows = Array.isArray(data?.items) ? data.items : []
+  const items = rows
+    .map((item): ResourceOption | null => {
+      if (!item || typeof item !== 'object') return null
+      const id = typeof item.id === 'string' ? item.id : null
+      if (!id) return null
+      const label = readNonEmptyString(item.name) ?? id
+      return { id, label }
+    })
+    .filter((option): option is ResourceOption => option !== null)
+  const total = typeof data?.total === 'number' && Number.isFinite(data.total) ? data.total : items.length
+  return { items, total }
+}
+
+// Resource types with their resource counts, for the dropdown's type filter.
+export async function fetchResourceTypes(signal: AbortSignal): Promise<ResourceType[]> {
+  const params = new URLSearchParams({
+    page: '1',
+    pageSize: '100',
+    sortField: 'name',
+    sortDir: 'asc',
+    withResourceCounts: 'true',
+  })
+  try {
+    const data = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
+      `/api/resources/resource-types?${params.toString()}`,
+      { signal },
+    )
+    const rows = Array.isArray(data?.items) ? data.items : []
+    return rows
+      .map((item): ResourceType | null => {
+        if (!item || typeof item !== 'object') return null
+        const id = typeof item.id === 'string' ? item.id : null
+        if (!id) return null
+        const name = readNonEmptyString(item.name) ?? id
+        const rawCount = (item as Record<string, unknown>).resourceCount
+        const count = typeof rawCount === 'number' && Number.isFinite(rawCount) ? rawCount : 0
+        return { id, name, count }
+      })
+      .filter((type): type is ResourceType => type !== null)
+  } catch {
+    return []
+  }
+}
+
+export type ContactPhone = { id: string; name: string; phone: string }
+
+// Resolves primary phone numbers for the given person ids (companies/staff have
+// none and simply drop out — the people query only matches people). Used by the
+// Call editor's "insert phone from contact" button (#3552).
+export async function fetchPeoplePhones(ids: string[], signal: AbortSignal): Promise<ContactPhone[]> {
+  const unique = Array.from(new Set(ids.filter((id) => typeof id === 'string' && id.length > 0)))
+  if (unique.length === 0) return []
+  const params = new URLSearchParams({ page: '1', pageSize: '100', ids: unique.join(',') })
+  try {
+    const data = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
+      `/api/customers/people?${params.toString()}`,
+      { signal },
+    )
+    const items = Array.isArray(data?.items) ? data.items : []
+    const result: ContactPhone[] = []
+    for (const item of items) {
+      if (!item || typeof item !== 'object') continue
+      const id = typeof item.id === 'string' ? item.id : null
+      const phone = readNonEmptyString(item.primaryPhone) ?? readNonEmptyString(item.primary_phone)
+      if (!id || !phone) continue
+      const name = readNonEmptyString(item.displayName) ?? readNonEmptyString(item.display_name) ?? id
+      result.push({ id, name, phone })
+    }
+    return result
+  } catch {
+    return []
+  }
+}
+
 export async function findStaffMemberName(userId: string, signal: AbortSignal): Promise<string | null> {
   try {
     const members = await fetchAssignableStaffMembers('', { pageSize: 100, signal })