@open-mercato/core 0.9.0 → 0.9.1-develop.7459.1.99e3accd30

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

@@ -21,6 +21,8 @@ function DateTimeRow({
   showTime,
   onDateChange,
   onTimeChange,
+  error,
+  disabled,
 }: {
   label: string
   date: string
@@ -28,14 +30,17 @@ function DateTimeRow({
   showTime: boolean
   onDateChange(next: string): void
   onTimeChange(next: string): void
+  error?: string | null
+  disabled?: boolean
 }) {
   return (
-    <div className="flex w-full items-end gap-2.5">
+    <div className="flex w-full flex-wrap items-end gap-x-2.5 gap-y-1">
       <div className="flex min-w-0 flex-1 flex-col gap-1.5">
         <span className={LABEL_CLASS}>{label}</span>
-        <DateControl value={date} onChange={onDateChange} ariaLabel={label} />
+        <DateControl value={date} onChange={onDateChange} ariaLabel={label} disabled={disabled} />
       </div>
-      {showTime ? <TimeControl value={time} onChange={onTimeChange} ariaLabel={label} /> : null}
+      {showTime ? <TimeControl value={time} onChange={onTimeChange} ariaLabel={label} disabled={disabled} /> : null}
+      {error ? <p className="w-full text-xs text-status-error-text">{error}</p> : null}
     </div>
   )
 }
@@ -49,7 +54,9 @@ export function ScheduleSection({
   startTime,
   endDate,
   endTime,
+  startError,
   endsError,
+  disabled,
   onAllDayChange,
   onDateChange,
   onStartTimeChange,
@@ -64,7 +71,9 @@ export function ScheduleSection({
   startTime: string
   endDate: string
   endTime: string
+  startError?: string | null
   endsError?: string | null
+  disabled?: boolean
   onAllDayChange(next: boolean): void
   onDateChange(next: string): void
   onStartTimeChange(next: string): void
@@ -79,7 +88,7 @@ export function ScheduleSection({
       {hasAllDay ? (
         <div className="flex w-full items-center justify-between">
           <span className={LABEL_CLASS}>{t('customers.calendar.editor.allDay', 'All day')}</span>
-          <AllDayToggle checked={allDay} onCheckedChange={onAllDayChange} label={t('customers.calendar.editor.allDay', 'All day')} />
+          <AllDayToggle checked={allDay} onCheckedChange={onAllDayChange} label={t('customers.calendar.editor.allDay', 'All day')} disabled={disabled} />
         </div>
       ) : null}
       <DateTimeRow
@@ -89,6 +98,8 @@ export function ScheduleSection({
         showTime={showTime}
         onDateChange={onDateChange}
         onTimeChange={onStartTimeChange}
+        error={startError}
+        disabled={disabled}
       />
       {hasEnd ? (
         <DateTimeRow
@@ -98,6 +109,7 @@ export function ScheduleSection({
           showTime={showTime}
           onDateChange={onEndDateChange}
           onTimeChange={onEndTimeChange}
+          disabled={disabled}
         />
       ) : null}
       {endsError ? <p className="text-xs text-status-error-text">{endsError}</p> : null}

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

@@ -12,12 +12,14 @@ export function SegmentGroup<T extends string>({
   onChange,
   size = 'sm',
   ariaLabel,
+  disabled = false,
 }: {
   options: Array<SegmentOption<T>>
   value: T
   onChange(next: T): void
   size?: 'sm' | 'md'
   ariaLabel: string
+  disabled?: boolean
 }) {
   return (
     <div
@@ -34,6 +36,7 @@ export function SegmentGroup<T extends string>({
             variant="ghost"
             aria-pressed={isActive}
             onClick={() => onChange(option.value)}
+            disabled={disabled}
             title={option.label}
             data-state={isActive ? 'active' : 'inactive'}
             className={cn(

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

@@ -1,11 +1,12 @@
 "use client"
 
 import * as React from 'react'
+import { calendarDayEndInstant, calendarDayStartInstant, calendarWallTimeToInstant } from '../../../lib/calendar/timezone'
 import { endOfDay } from 'date-fns/endOfDay'
 import { startOfDay } from 'date-fns/startOfDay'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { computeDurationMinutes, type EditorFormState, type EditorKindConfig } from '../../../lib/calendar/editorPayload'
-import { findEditorConflictItems } from '../../../lib/calendar/conflicts'
+import { findEditorConflicts } from '../../../lib/calendar/conflicts'
 import type { ConflictScope } from '../../../lib/calendar/preferences'
 import { mapInteractionToCalendarItem } from '../../../lib/calendar/mapItem'
 import { participantActorKey } from '../../../lib/calendar/participantIdentity'
@@ -55,12 +56,14 @@ export function useEditorLabelResolution(
   }, [activeOrgId, open, form.relatedTo, form.dealId, form.dealLabel, form.assigneeUserId, form.assigneeName, update])
 }
 
+const NO_DRAFT_RESOURCES: ReadonlyArray<{ id: string; label: string }> = []
+
 function formatClock(date: Date): string {
   return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
 // Debounced save-time conflict probe. Detection uses the SAME `findConflicts`
-// logic the grid uses (overlap + shared owner/participant) against a freshly
+// logic the grid uses (overlap + shared owner/participant/resource) against a freshly
 // fetched ±1-day window, so the editor warning is always consistent with the
 // conflict badges/rings the user sees on the calendar. The warning is
 // informational and never blocks saving.
@@ -72,9 +75,11 @@ export function useConflictProbe(
   draftOwnerUserId: string | null,
   scope: ConflictScope,
   currentUserId: string | null,
+  draftResources: ReadonlyArray<{ id: string; label: string }> = NO_DRAFT_RESOURCES,
 ): string | null {
   const t = useT()
   const [conflict, setConflict] = React.useState<string | null>(null)
+  const resourcesKey = draftResources.map((resource) => resource.id).join(',')
   // Keys on the canonical actor key, not the raw userId — an external guest has
   // no userId, so a userId-only key never changes when guests are added or
   // removed and the probe would keep reporting the previous attendee set.
@@ -93,23 +98,26 @@ export function useConflictProbe(
     let start: Date
     let end: Date
     if (isAllDay) {
-      const dayDate = new Date(`${form.date}T00:00:00`)
-      if (Number.isNaN(dayDate.getTime())) {
+      const dayDate = form.timezone ? calendarDayStartInstant(form.date, form.timezone) : new Date(`${form.date}T00:00:00`)
+      if (!dayDate || Number.isNaN(dayDate.getTime())) {
         setConflict(null)
         return
       }
-      start = startOfDay(dayDate)
-      end = endOfDay(dayDate)
+      start = form.timezone ? dayDate : startOfDay(dayDate)
+      const dayEnd = form.timezone ? calendarDayEndInstant(form.date, form.timezone) : endOfDay(dayDate)
+      if (!dayEnd) { setConflict(null); return }
+      end = dayEnd
     } else {
       if (!form.startTime) {
         setConflict(null)
         return
       }
-      start = new Date(`${form.date}T${form.startTime}:00`)
-      if (Number.isNaN(start.getTime())) {
+      const draftStart = form.timezone ? calendarWallTimeToInstant(form.date, form.startTime, form.timezone) : new Date(`${form.date}T${form.startTime}:00`)
+      if (!draftStart || Number.isNaN(draftStart.getTime())) {
         setConflict(null)
         return
       }
+      start = draftStart
       const durationMinutes = config.hasEnd ? computeDurationMinutes(form) ?? 30 : 30
       end = new Date(start.getTime() + durationMinutes * 60_000)
     }
@@ -134,25 +142,33 @@ export function useConflictProbe(
           if (!item) continue
           others.push(...expandOccurrences(item, fetchWindow))
         }
-        const conflictItems = findEditorConflictItems(
+        const conflicts = findEditorConflicts(
           {
             start,
             end,
             ownerUserId: draftOwnerUserId,
             participants: form.participants.map((participant) => ({ userId: participant.userId, name: participant.name })),
             status: form.status,
+            resources: [...draftResources],
+            ownerLabel: draftOwnerUserId && draftOwnerUserId === form.assigneeUserId ? form.assigneeName : null,
           },
           others,
           excludeId,
           { scope, currentUserId },
         )
         if (!active) return
-        if (conflictItems.length === 0) {
+        if (conflicts.length === 0) {
           setConflict(null)
           return
         }
-        const summary = conflictItems
-          .map((item) => `${formatClock(item.start)}–${formatClock(item.end)}: ${item.title || t('customers.calendar.grid.untitled', 'Untitled')}`)
+        // Name who and what is double-booked: an overlap alone does not tell the
+        // user which attendee or room to change.
+        const summary = conflicts
+          .map(({ item, shared }) => {
+            const names = shared.map((subject) => subject.label).filter(Boolean)
+            const entry = `${formatClock(item.start)}–${formatClock(item.end)}: ${item.title || t('customers.calendar.grid.untitled', 'Untitled')}`
+            return names.length ? `${entry} (${names.join(', ')})` : entry
+          })
           .join(', ')
         setConflict(summary ? t('customers.calendar.editor.conflictWarning', 'Overlaps with: {items}', { items: summary }) : null)
       } catch {
@@ -165,6 +181,6 @@ export function useConflictProbe(
       controller.abort()
     }
     // Re-probe when schedule-relevant inputs change (time window, all-day, attendees, owner, status, scope).
-  }, [open, form.date, form.startTime, form.endDate, form.endTime, form.allDay, form.status, participantsKey, config.hasAllDay, config.hasEnd, excludeId, draftOwnerUserId, scope, currentUserId, t]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [open, form.date, form.timezone, form.startTime, form.endDate, form.endTime, form.allDay, form.status, participantsKey, resourcesKey, config.hasAllDay, config.hasEnd, excludeId, draftOwnerUserId, scope, currentUserId, t]) // eslint-disable-line react-hooks/exhaustive-deps
   return conflict
 }

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

@@ -69,12 +69,13 @@ export function UppercaseBadge({ style, className, children }: { style?: React.C
   )
 }
 
-export function AllDayToggle({ checked, onCheckedChange, label }: { checked: boolean; onCheckedChange(next: boolean): void; label: string }) {
+export function AllDayToggle({ checked, onCheckedChange, label, disabled }: { checked: boolean; onCheckedChange(next: boolean): void; label: string; disabled?: boolean }) {
   return (
     <Switch
       checked={checked}
       aria-label={label}
       onCheckedChange={onCheckedChange}
+      disabled={disabled}
       className="h-6 w-10"
     />
   )
@@ -112,11 +113,13 @@ export function DateControl({
   onChange,
   ariaLabel,
   className,
+  disabled,
 }: {
   value: string
   onChange(next: string): void
   ariaLabel: string
   className?: string
+  disabled?: boolean
 }) {
   const [open, setOpen] = React.useState(false)
   useCloseOnEditorScroll(setOpen)
@@ -128,6 +131,7 @@ export function DateControl({
       open={open}
       onOpenChange={setOpen}
       aria-label={ariaLabel}
+      disabled={disabled}
       className={cn('w-full', className)}
     />
   )
@@ -140,13 +144,18 @@ const TIME_OPTIONS: string[] = Array.from({ length: 48 }, (_, index) => {
   return `${String(hour).padStart(2, '0')}:${minute}`
 })
 
-export function TimeControl({ value, onChange, ariaLabel }: { value: string; onChange(next: string): void; ariaLabel: string }) {
+export function TimeControl({ value, onChange, ariaLabel, disabled }: { value: string; onChange(next: string): void; ariaLabel: string; disabled?: boolean }) {
   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
+  // Radix renders every item even while the list is closed, so a closed picker
+  // mounts only the selected time and the full grid is built on open. An
+  // off-grid value (e.g. an imported 22:15) stays selectable.
+  const options = React.useMemo(() => {
+    if (!open) return value ? [value] : []
+    return value && !TIME_OPTIONS.includes(value) ? [value, ...TIME_OPTIONS] : TIME_OPTIONS
+  }, [open, value])
   return (
-    <Select value={value} onValueChange={onChange} open={open} onOpenChange={setOpen}>
+    <Select value={value} onValueChange={onChange} open={open} onOpenChange={setOpen} disabled={disabled}>
       <SelectTrigger aria-label={ariaLabel} className="h-9 w-32 shrink-0">
         <SelectValue />
       </SelectTrigger>
@@ -165,12 +174,14 @@ export function PersonChip({
   compact,
   onRemove,
   removeLabel,
+  disabled,
 }: {
   name: string
   badge?: React.ReactNode
   compact?: boolean
   onRemove?: () => void
   removeLabel?: string
+  disabled?: boolean
 }) {
   return (
     <span
@@ -188,6 +199,7 @@ export function PersonChip({
           size="xs"
           onClick={(event) => { event.stopPropagation(); onRemove() }}
           aria-label={removeLabel}
+          disabled={disabled}
           className="size-5 shrink-0"
         >
           <Plus aria-hidden className="size-3.5 rotate-45 opacity-50" />

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

@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from 'react'
+import { buildFormFieldsFromCustomFields, fetchCustomFieldFormStructure } from '@open-mercato/ui/backend/utils/customFieldForms'
+import { filterCustomFieldDefs, type CustomFieldDefDto } from '@open-mercato/ui/backend/utils/customFieldDefs'
+import { validateValuesAgainstDefs } from '@open-mercato/shared/modules/entities/validation'
+
+export function selectCalendarCustomFields(definitions: CustomFieldDefDto[], fieldsetIds: readonly string[]) {
+  if (!fieldsetIds.length) return filterCustomFieldDefs(definitions, 'form')
+  const allowed = new Set(fieldsetIds)
+  return filterCustomFieldDefs(definitions, 'form').filter((definition) => {
+    const fieldsets = definition.fieldsets?.length ? definition.fieldsets : definition.fieldset ? [definition.fieldset] : []
+    return fieldsets.length ? fieldsets.some((fieldset) => allowed.has(fieldset)) : allowed.has('__general__')
+  })
+}
+
+export function projectCalendarCustomValues(values: Record<string, unknown>, definitions: CustomFieldDefDto[]) {
+  const activeIds = new Set(definitions.map((definition) => `cf_${definition.key}`))
+  return Object.fromEntries(Object.entries(values).filter(([key]) => !key.startsWith('cf_') || activeIds.has(key)))
+}
+
+export function validateCalendarCustomValues(values: Record<string, unknown>, definitions: CustomFieldDefDto[]) {
+  const customValues = Object.fromEntries(definitions.map((definition) => [definition.key, values[`cf_${definition.key}`]]))
+  return validateValuesAgainstDefs(customValues, definitions.map((definition) => ({
+    key: definition.key,
+    kind: definition.kind,
+    configJson: { validation: definition.validation ?? [] },
+  })))
+}
+
+export function useCalendarCustomFields(open: boolean, entityId: string, fieldsetIds: readonly string[]) {
+  const [state, setState] = React.useState<{ definitions: CustomFieldDefDto[]; status: 'loading' | 'ready' | 'error' }>({
+    definitions: [], status: 'loading',
+  })
+  React.useEffect(() => {
+    if (!open) return
+    let active = true
+    setState({ definitions: [], status: 'loading' })
+    void fetchCustomFieldFormStructure([entityId]).then(({ definitions }) => {
+      if (active) setState({ definitions, status: 'ready' })
+    }).catch(() => {
+      if (active) setState({ definitions: [], status: 'error' })
+    })
+    return () => { active = false }
+  }, [open, entityId])
+  const definitions = React.useMemo(() => selectCalendarCustomFields(state.definitions, fieldsetIds), [state.definitions, fieldsetIds])
+  const fields = React.useMemo(() => buildFormFieldsFromCustomFields(definitions), [definitions])
+  return { definitions, allDefinitions: state.definitions, fields, status: state.status }
+}

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

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from 'react'
+import { getTelemetryRuntime } from '@open-mercato/shared/lib/telemetry/runtime'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { calendarEventTypes, type EffectiveCalendarEventType } from '../../../calendar-event-types'
+import type { CalendarEventTypeCatalog, ScopedCalendarEventType } from '../../../lib/calendar/eventTypeResolver'
+import { KIND_CONFIG, type EditorKindConfig, type EditorTypeOption } from '../../../lib/calendar/editorPayload'
+
+type CatalogState =
+  | { status: 'loading' | 'error'; items: readonly ScopedCalendarEventType[] }
+  | { status: 'ready'; items: readonly ScopedCalendarEventType[] }
+
+export function useEventTypeCatalog(open: boolean) {
+  const [state, setState] = React.useState<CatalogState>({ status: 'loading', items: [] })
+  const [attempt, setAttempt] = React.useState(0)
+
+  React.useEffect(() => {
+    if (!open) {
+      setState({ status: 'loading', items: [] })
+      return
+    }
+    let active = true
+    setState({ status: 'loading', items: [] })
+    void readApiResultOrThrow<CalendarEventTypeCatalog>('/api/customers/activity-types')
+      .then((catalog) => {
+        if (!Array.isArray(catalog.items)) throw new Error('[internal] Invalid activity type catalog')
+        if (active) setState({ status: 'ready', items: catalog.items })
+      })
+      .catch((error) => {
+        if (!active) return
+        getTelemetryRuntime()?.reportError(error, {
+          module: 'customers',
+          code: 'customers.activity_type_catalog_load_failed',
+        })
+        setState({ status: 'error', items: [] })
+      })
+    return () => { active = false }
+  }, [open, attempt])
+
+  const retry = React.useCallback(() => setAttempt((value) => value + 1), [])
+
+  return { ...state, retry }
+}
+
+export function selectedEventType(
+  items: readonly ScopedCalendarEventType[],
+  key: string,
+): EffectiveCalendarEventType {
+  const normalizedKey = key.trim().toLowerCase()
+  const selected = items.find((item) => item.key === normalizedKey)
+  if (selected) return selected
+  const baseline = calendarEventTypes.find((item) => item.key === normalizedKey) ?? calendarEventTypes[0]!
+  return {
+    ...baseline,
+    key,
+    label: key,
+    provenance: {},
+    historical: true,
+    fallbackReason: 'unknown',
+  }
+}
+
+export function isSelectableEventType(items: readonly ScopedCalendarEventType[], key: string): boolean {
+  const normalizedKey = key.trim().toLowerCase()
+  return items.some((item) => item.key === normalizedKey && item.selectable && !item.historical)
+}
+
+export function eventTypeOptions(
+  items: readonly ScopedCalendarEventType[],
+  selectedKey: string,
+  translate: (key: string, fallback: string) => string,
+): EditorTypeOption[] {
+  const displayLabel = (item: ScopedCalendarEventType) => item.labelKey
+    ? translate(item.labelKey, item.label)
+    : item.label
+  const normalizedSelectedKey = selectedKey.trim().toLowerCase()
+  const options = items
+    .filter((item) => item.selectable && !item.historical)
+    .sort((left, right) => left.behavior.order - right.behavior.order)
+    .map((item) => ({ value: item.key === normalizedSelectedKey ? selectedKey : item.key, label: displayLabel(item), icon: item.icon ?? null }))
+  if (!options.some((option) => option.value === selectedKey)) {
+    const current = items.find((item) => item.key === normalizedSelectedKey)
+    options.unshift({ value: selectedKey, label: current ? displayLabel(current) : selectedKey, icon: current?.icon ?? null })
+  }
+  return options
+}
+
+export function eventTypeConfig(definition: EffectiveCalendarEventType): EditorKindConfig {
+  const { baseKind, fields } = definition.behavior
+  return {
+    dateLabel: KIND_CONFIG[baseKind].dateLabel,
+    hasEnd: fields.endTime,
+    hasAllDay: fields.allDay,
+    hasRepeat: fields.recurrence,
+    location: fields.location === 'none' ? null : fields.location,
+    people: fields.people === 'none' ? null : fields.people === 'recipients' ? 'to' : fields.people,
+    hasPriority: fields.priority,
+  }
+}

package/src/modules/customers/components/calendar/types.ts

@@ -33,6 +33,7 @@ export const calendarInteractionPayloadSchema = z
     scheduledAt: z.string().nullable().optional(),
     occurredAt: z.string().nullable().optional(),
     durationMinutes: z.number().nullable().optional(),
+    timezone: z.string().nullable().optional(),
     allDay: z.boolean().nullable().optional(),
     location: z.string().nullable().optional(),
     participants: z.array(calendarParticipantSchema).nullable().optional(),