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

package/src/modules/customers/components/calendar/CalendarScreen.tsx

@@ -107,7 +107,14 @@ function asEditableItem(item: CalendarItem): CalendarItem {
   return item.isRecurringOccurrence ? { ...item, id: item.raw.id } : item
 }
 
-export function CalendarScreen() {
+export type CalendarScreenProps = {
+  /** True when the optional resources module is loaded (server-resolved). */
+  resourcesEnabled?: boolean
+  /** True when the optional staff module is loaded (server-resolved). */
+  staffEnabled?: boolean
+}
+
+export function CalendarScreen({ resourcesEnabled = false, staffEnabled = true }: CalendarScreenProps = {}) {
   const t = useT()
   const [view, setView] = React.useState<CalendarView>('week')
   const [anchor, setAnchor] = React.useState<Date>(() => new Date())
@@ -136,7 +143,7 @@ export function CalendarScreen() {
     () => getVisibleRange(view, anchor, agendaHorizonDays),
     [view, anchor, agendaHorizonDays],
   )
-  const { items, isLoading, error, truncated, typeLabels, typeColors, refetch } = useCalendarItems(range)
+  const { items, isLoading, error, truncated, typeLabels, typeColors, typeIcons, refetch } = useCalendarItems(range)
 
   React.useEffect(() => {
     if (!isLoading) setHasLoadedOnce(true)
@@ -577,11 +584,11 @@ export function CalendarScreen() {
           defaultDate={anchor}
           defaultRange={createRange}
           typeLabels={typeLabels}
-          typeColors={typeColors}
-          surfacedTypes={preferences.activityTypes}
-          eventCategories={preferences.eventCategories}
+          typeIcons={typeIcons}
           conflictScope={preferences.conflictScope}
           currentUserId={currentUserId}
+          resourcesEnabled={resourcesEnabled}
+          staffEnabled={staffEnabled}
           onOpenChange={(open) => setEditor((current) => ({ ...current, open }))}
           onSaved={refetch}
         />

package/src/modules/customers/components/calendar/CalendarSettingsModal.tsx

@@ -30,10 +30,10 @@ export type CalendarSettingsModalProps = {
 type ToggleKey = 'showCrmActivities' | 'aiSummaries' | 'conflictWarnings' | 'showWeekends'
 
 // An empty Activity Types list is an intentional floor meaning "surface all
-// dictionary types" (see buildEditorCategoryOptions) rather than "surface none" —
-// it keeps the editor's category picker usable. So when the stored list is empty
-// the modal seeds the dictionary types for display; curating a non-empty subset
-// persists and filters the editor as expected.
+// dictionary types" rather than "surface none". When the stored list is empty
+// the modal seeds the dictionary types for display. NOTE: since the editor's
+// Category quick-pick was removed (owner feedback, #3552) these lists no longer
+// affect the event editor — the type switcher always shows the full dictionary.
 function buildDraft(preferences: CalendarPreferences, seedActivityTypes: string[]): CalendarPreferences {
   return {
     ...preferences,
@@ -162,8 +162,8 @@ export function CalendarSettingsModal({
                     value={draft.conflictScope}
                     onChange={(conflictScope) => setDraft((current) => ({ ...current, conflictScope }))}
                     options={[
-                      { value: 'mine', label: t('customers.calendar.settings.conflictScopeMine', 'My meetings only') },
-                      { value: 'all', label: t('customers.calendar.settings.conflictScopeAll', 'All org meetings') },
+                      { value: 'mine', label: t('customers.calendar.settings.conflictScopeMine', 'My meetings') },
+                      { value: 'all', label: t('customers.calendar.settings.conflictScopeAll', 'All meetings') },
                     ]}
                   />
                 </div>

package/src/modules/customers/components/calendar/MonthGrid.tsx

@@ -5,11 +5,9 @@ import { addDays } from 'date-fns/addDays'
 import { format } from 'date-fns/format'
 import { isSameMonth } from 'date-fns/isSameMonth'
 import { isToday } from 'date-fns/isToday'
-import { CalendarDays } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { Button } from '@open-mercato/ui/primitives/button'
-import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { getVisibleRange } from '../../lib/calendar/range'
 import { eventDisplayTitle } from '../../lib/calendar/labels'
 import type { CalendarItem, MonthGridProps } from './types'
@@ -225,15 +223,6 @@ export function MonthGrid({ anchor, items, onItemClick, onDayOpen }: MonthGridPr
           ))}
         </div>
       ))}
-      {items.length === 0 ? (
-        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center p-6">
-          <EmptyState
-            icon={<CalendarDays className="h-6 w-6" aria-hidden="true" />}
-            title={t('customers.calendar.empty.month', 'Nothing scheduled this month')}
-            className="bg-background/90"
-          />
-        </div>
-      ) : null}
     </div>
   )
 }

package/src/modules/customers/components/calendar/TimeGrid.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from 'react'
-import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { addDays } from 'date-fns/addDays'
 import { isSameDay } from 'date-fns/isSameDay'
 import { startOfDay } from 'date-fns/startOfDay'
@@ -9,7 +9,6 @@ import { cn } from '@open-mercato/shared/lib/utils'
 import { useLocale, 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 { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { packOverlaps } from '../../lib/calendar/layout'
 import { getVisibleRange } from '../../lib/calendar/range'
 import {
@@ -165,7 +164,6 @@ export function TimeGrid({
   onItemClick,
   onJoin,
   onNavigate,
-  onCreate,
   onCreateRange,
 }: TimeGridProps) {
   const t = useT()
@@ -488,27 +486,6 @@ export function TimeGrid({
           })}
         </div>
       </div>
-      {items.length === 0 ? (
-        <div className="pointer-events-none absolute inset-0 z-40 flex items-center justify-center p-6">
-          <EmptyState
-            className="pointer-events-auto bg-card/95 shadow-sm"
-            icon={<CalendarDays className="h-6 w-6" aria-hidden />}
-            title={
-              days === 7
-                ? t('customers.calendar.empty.week', 'Nothing scheduled this week')
-                : t('customers.calendar.empty.day', 'Nothing scheduled this day')
-            }
-            description={t('customers.calendar.empty.description', 'Plan a meeting, event or task to fill your week.')}
-            actions={
-              onCreate ? (
-                <Button type="button" size="sm" onClick={onCreate}>
-                  {t('customers.calendar.actions.newEvent', 'New event')}
-                </Button>
-              ) : undefined
-            }
-          />
-        </div>
-      ) : null}
     </div>
   )
 }

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

@@ -1,19 +1,76 @@
 "use client"
 
 import * as React from 'react'
-import { MapPin } from 'lucide-react'
+import { MapPin, Phone, Plus } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Field } from './inputs'
+import { fetchPeoplePhones, type ContactPhone } from './lookups'
+
+// Below the Call "Phone / link" field: when a linked contact has a primary
+// phone and the field is still empty, offer it as a one-click suggestion chip
+// showing the actual number (#3552). Companies/staff have no phone and never
+// appear. The chips vanish once the field is filled.
+function PhoneSuggestions({
+  contactIds,
+  onPick,
+}: {
+  contactIds: string[]
+  onPick(phone: string): void
+}) {
+  const t = useT()
+  const [contacts, setContacts] = React.useState<ContactPhone[]>([])
+  const idsKey = contactIds.join(',')
+
+  React.useEffect(() => {
+    if (contactIds.length === 0) {
+      setContacts([])
+      return
+    }
+    const controller = new AbortController()
+    let cancelled = false
+    fetchPeoplePhones(contactIds, controller.signal).then((found) => {
+      if (!cancelled) setContacts(found)
+    })
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- idsKey captures the ids
+  }, [idsKey])
+
+  if (contacts.length === 0) return null
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 pt-1.5">
+      {contacts.map((contact) => (
+        <button
+          key={contact.id}
+          type="button"
+          onClick={() => onPick(contact.phone)}
+          title={t('customers.calendar.editor.phoneSuggestion.use', 'Use {name}’s number', { name: contact.name })}
+          className="inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <Plus aria-hidden className="size-3 shrink-0" />
+          <span className="shrink-0">{t('customers.calendar.editor.phoneSuggestion.add', 'Add')}</span>
+          <span className="truncate">{contact.name}</span>
+          <span className="shrink-0 tabular-nums text-foreground">{contact.phone}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
 
 export function LocationField({
   variant,
   value,
   onChange,
+  phoneContactIds,
 }: {
   variant: 'location' | 'phoneLink'
   value: string
   onChange(next: string): void
+  /** Person ids whose phone can be suggested (Call variant only). */
+  phoneContactIds?: string[]
 }) {
   const t = useT()
   const label = variant === 'phoneLink'
@@ -22,6 +79,8 @@ export function LocationField({
   const placeholder = variant === 'phoneLink'
     ? t('customers.calendar.editor.phoneLinkPlaceholder', 'Add a phone number or link…')
     : t('customers.calendar.editor.locationPlaceholder', 'Add a location or link…')
+  // Suggestions only help while the field is empty — once filled they'd be noise.
+  const showSuggestions = variant === 'phoneLink' && value.trim().length === 0
   return (
     <Field label={label}>
       <Input
@@ -30,8 +89,11 @@ export function LocationField({
         onChange={(event) => onChange(event.target.value)}
         placeholder={placeholder}
         aria-label={label}
-        leftIcon={<MapPin />}
+        leftIcon={variant === 'phoneLink' ? <Phone /> : <MapPin />}
       />
+      {showSuggestions ? (
+        <PhoneSuggestions contactIds={phoneContactIds ?? []} onPick={(phone) => onChange(phone)} />
+      ) : null}
     </Field>
   )
 }

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

@@ -9,7 +9,7 @@ import { Input } from '@open-mercato/ui/primitives/input'
 import type { EditorParticipant } from '../../../lib/calendar/editorPayload'
 import { composeAccessibleName } from '../../../lib/calendar/labels'
 import { searchPeopleOptions, type PersonOption } from './lookups'
-import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge } from './inputs'
+import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge, useDropdownDismiss } from './inputs'
 
 export function PeopleField({
   mode,
@@ -18,6 +18,7 @@ export function PeopleField({
   value,
   onChange,
   includeCustomers,
+  includeStaff = true,
 }: {
   mode: 'multi' | 'single'
   placeholder: string
@@ -25,12 +26,16 @@ export function PeopleField({
   value: EditorParticipant[]
   onChange(next: EditorParticipant[]): void
   includeCustomers: boolean
+  /** Pass false when the staff module is not loaded — customer-only options. */
+  includeStaff?: boolean
 }) {
   const t = useT()
   const [query, setQuery] = React.useState('')
   const [open, setOpen] = React.useState(false)
   const [options, setOptions] = React.useState<PersonOption[]>([])
   const [loading, setLoading] = React.useState(false)
+  const close = React.useCallback(() => setOpen(false), [])
+  const rootRef = useDropdownDismiss(open, close)
 
   React.useEffect(() => {
     if (!open) return
@@ -39,7 +44,7 @@ export function PeopleField({
     const timer = window.setTimeout(async () => {
       setLoading(true)
       try {
-        const results = await searchPeopleOptions(query.trim(), { includeCustomers, signal: controller.signal })
+        const results = await searchPeopleOptions(query.trim(), { includeCustomers, includeStaff, signal: controller.signal })
         if (cancelled) return
         setOptions(results)
       } catch {
@@ -53,7 +58,7 @@ export function PeopleField({
       controller.abort()
       window.clearTimeout(timer)
     }
-  }, [open, query, includeCustomers])
+  }, [open, query, includeCustomers, includeStaff])
 
   const selectedIds = new Set(value.map((participant) => participant.userId))
   const visibleOptions = options.filter((option) => !selectedIds.has(option.userId))
@@ -66,6 +71,7 @@ export function PeopleField({
 
   return (
     <div
+      ref={rootRef}
       className="relative w-full"
       onBlur={(event) => {
         if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false)
@@ -74,7 +80,7 @@ export function PeopleField({
       <div
         className={cn(
           'flex w-full flex-wrap content-center items-center gap-2 rounded-md bg-background px-2.5 py-2',
-          mode === 'multi' ? 'min-h-24' : 'min-h-14',
+          'min-h-14',
           CONTROL_BORDER,
         )}
       >
@@ -125,6 +131,7 @@ export function PeopleField({
                     option.email,
                     option.isCustomer ? t('customers.calendar.editor.customerBadge', 'Customer') : null,
                   ])}
+                  title={composeAccessibleName([option.name, option.email])}
                   onClick={() => {
                     const participant: EditorParticipant = {
                       userId: option.userId,

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

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from 'react'
+import { Check, ChevronDown, ChevronsDown, ChevronsUp, Equal } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { EditorPriority } from '../../../lib/calendar/editorPayload'
+import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, useDropdownDismiss } from './inputs'
+
+// Jira/Linear-style priority glyphs: filled double chevrons for the extremes,
+// an equals bar for the middle. Colours stay on DS status tokens (no amber):
+// blue = low urgency, muted = medium, red = high.
+const PRIORITY_META: Record<EditorPriority, { Icon: React.ComponentType<{ className?: string }>; color: string }> = {
+  low: { Icon: ChevronsDown, color: 'text-status-info-text' },
+  medium: { Icon: Equal, color: 'text-muted-foreground' },
+  high: { Icon: ChevronsUp, color: 'text-status-error-text' },
+}
+
+const PRIORITY_ORDER: EditorPriority[] = ['high', 'medium', 'low']
+
+export function PriorityField({
+  value,
+  labels,
+  ariaLabel,
+  onChange,
+}: {
+  value: EditorPriority
+  labels: Record<EditorPriority, string>
+  ariaLabel: string
+  onChange(next: EditorPriority): void
+}) {
+  const [open, setOpen] = React.useState(false)
+  const close = React.useCallback(() => setOpen(false), [])
+  const rootRef = useDropdownDismiss(open, close)
+  const selected = PRIORITY_META[value]
+  const SelectedIcon = selected.Icon
+
+  return (
+    <div
+      ref={rootRef}
+      className="relative w-full"
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false)
+      }}
+    >
+      <Button
+        type="button"
+        variant="outline"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        onClick={() => setOpen((previous) => !previous)}
+        className={cn('h-9 w-full justify-between bg-background px-3 font-normal shadow-none', CONTROL_BORDER)}
+      >
+        <span className="flex min-w-0 items-center gap-2">
+          <SelectedIcon aria-hidden className={cn('size-4 shrink-0', selected.color)} />
+          <span className="truncate text-sm text-foreground">{labels[value]}</span>
+        </span>
+        <ChevronDown aria-hidden className="size-4 shrink-0 opacity-60" />
+      </Button>
+      {open ? (
+        <div role="listbox" aria-label={ariaLabel} className={DROPDOWN_PANEL_CLASS}>
+          {PRIORITY_ORDER.map((priority) => {
+            const meta = PRIORITY_META[priority]
+            const Icon = meta.Icon
+            const active = priority === value
+            return (
+              <Button
+                key={priority}
+                type="button"
+                variant="ghost"
+                role="option"
+                aria-selected={active}
+                onClick={() => {
+                  onChange(priority)
+                  setOpen(false)
+                }}
+                className={cn('h-auto w-full justify-start gap-2 px-2 py-1.5 text-left text-sm font-normal', active && 'bg-muted')}
+              >
+                <Icon aria-hidden className={cn('size-4 shrink-0', meta.color)} />
+                <span className="min-w-0 flex-1 truncate text-foreground">{labels[priority]}</span>
+                <Check aria-hidden className={cn('size-4 shrink-0', active ? 'opacity-100' : 'opacity-0')} />
+              </Button>
+            )
+          })}
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -15,7 +15,7 @@ import {
   type DealOption,
   type RelatedEntityOption,
 } from './lookups'
-import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge } from './inputs'
+import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge, useDropdownDismiss } from './inputs'
 
 const OPTION_ROW_CLASS =
   'h-auto w-full justify-start gap-2 whitespace-normal px-2 py-1.5 text-left text-sm font-normal text-foreground'
@@ -37,6 +37,8 @@ export function RelatedToField({
 }) {
   const t = useT()
   const [open, setOpen] = React.useState(false)
+  const closeDropdown = React.useCallback(() => setOpen(false), [])
+  const rootRef = useDropdownDismiss(open, closeDropdown)
   const [query, setQuery] = React.useState('')
   const [options, setOptions] = React.useState<RelatedEntityOption[]>([])
   const [deals, setDeals] = React.useState<DealOption[]>([])
@@ -92,6 +94,7 @@ export function RelatedToField({
 
   return (
     <div
+      ref={rootRef}
       className="relative w-full"
       onBlur={(event) => {
         if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false)
@@ -99,7 +102,7 @@ export function RelatedToField({
     >
       <div
         className={cn(
-          'flex h-10 w-full items-center rounded-md bg-background pl-2.5 pr-3',
+          'flex h-10 w-full items-center rounded-md bg-background pl-2.5 pr-3 transition-colors hover:bg-accent/50',
           error ? 'border border-status-error-border' : CONTROL_BORDER,
         )}
       >
@@ -110,7 +113,7 @@ export function RelatedToField({
           aria-expanded={open}
           aria-label={label}
           onClick={() => setOpen((previous) => !previous)}
-          className="h-full min-w-0 flex-1 justify-between rounded-none bg-transparent p-0 text-left shadow-none hover:bg-transparent"
+          className="h-full min-w-0 flex-1 justify-between rounded-none bg-transparent p-0 text-left shadow-none hover:bg-transparent dark:hover:bg-transparent"
         >
           <span className="flex min-w-0 items-center gap-2">
             {value ? (
@@ -180,6 +183,7 @@ export function RelatedToField({
                   role="option"
                   aria-selected={value?.id === option.id}
                   aria-label={composeAccessibleName([option.label, option.subtitle, kindLabel(option.kind)])}
+                  title={composeAccessibleName([option.label, option.subtitle])}
                   onClick={() => {
                     onChange({ id: option.id, kind: option.kind, label: option.label })
                     if (value?.id !== option.id) onDealChange(null)
@@ -223,6 +227,7 @@ export function RelatedToField({
                   variant="ghost"
                   role="option"
                   aria-selected={deal?.id === option.id}
+                  title={option.label}
                   onClick={() => {
                     onDealChange(option)
                     setOpen(false)