@open-mercato/core 0.6.6-develop.6094.1.28b081ea16 → 0.6.6-develop.6126.1.0b9392fdae

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

@@ -0,0 +1,219 @@
+"use client"
+
+import * as React from 'react'
+import { addDays } from 'date-fns/addDays'
+import { format } from 'date-fns/format'
+import { isToday } from 'date-fns/isToday'
+import { isTomorrow } from 'date-fns/isTomorrow'
+import { startOfDay } from 'date-fns/startOfDay'
+import { CalendarClock } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import type { AgendaListProps, CalendarCategory, CalendarItem } from './types'
+
+const MAX_AVATARS_PER_ROW = 2
+
+const CATEGORY_BADGE_CLASS: Record<CalendarCategory, string> = {
+  meeting: 'bg-status-info-bg text-status-info-text',
+  event: 'bg-status-warning-bg text-status-warning-text',
+  task: 'bg-primary text-primary-foreground',
+  other: 'bg-status-neutral-bg text-status-neutral-text',
+}
+
+const CATEGORY_LABEL: Record<CalendarCategory, { key: string; fallback: string }> = {
+  meeting: { key: 'customers.calendar.category.meeting', fallback: 'Meeting' },
+  event: { key: 'customers.calendar.category.event', fallback: 'Event' },
+  task: { key: 'customers.calendar.category.task', fallback: 'Task' },
+  other: { key: 'customers.calendar.category.other', fallback: 'Other' },
+}
+
+type AgendaDayGroup = { date: Date; items: CalendarItem[] }
+
+function dayKeyOf(date: Date): string {
+  return format(date, 'yyyy-MM-dd')
+}
+
+function formatUrlHost(location: string): string {
+  try {
+    const url = new URL(location.startsWith('http') ? location : `https://${location}`)
+    return url.hostname
+  } catch {
+    return location
+  }
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })
+}
+
+function groupLabelOf(date: Date): string {
+  return date.toLocaleDateString(undefined, { weekday: 'long', month: 'short', day: 'numeric' })
+}
+
+function deriveTypeLabel(interactionType: string): string {
+  const normalized = interactionType.replace(/[-_]+/g, ' ').trim()
+  if (!normalized) return interactionType
+  return normalized.charAt(0).toUpperCase() + normalized.slice(1)
+}
+
+function participantLabel(participant: CalendarItem['participants'][number]): string {
+  return participant.name ?? participant.email ?? participant.userId
+}
+
+function buildDayGroups(anchor: Date, horizonDays: number, items: CalendarItem[]): AgendaDayGroup[] {
+  const sorted = [...items].sort((first, second) => first.start.getTime() - second.start.getTime())
+  const byDay = new Map<string, CalendarItem[]>()
+  for (const item of sorted) {
+    const key = dayKeyOf(item.start)
+    const bucket = byDay.get(key)
+    if (bucket) bucket.push(item)
+    else byDay.set(key, [item])
+  }
+  const firstDay = startOfDay(anchor)
+  const groups: AgendaDayGroup[] = []
+  for (let offset = 0; offset <= horizonDays; offset += 1) {
+    const day = addDays(firstDay, offset)
+    const dayItems = byDay.get(dayKeyOf(day))
+    if (dayItems && dayItems.length > 0) groups.push({ date: day, items: dayItems })
+  }
+  return groups
+}
+
+function AgendaDayHeader({ date, count }: { date: Date; count: number }) {
+  const t = useT()
+  const todayMarker = isToday(date)
+  const tomorrowMarker = !todayMarker && isTomorrow(date)
+  return (
+    <div className="flex w-full items-center gap-2 bg-muted/50 px-3 py-2.5 sm:px-5">
+      <span className="text-sm font-semibold text-foreground">{groupLabelOf(date)}</span>
+      {todayMarker || tomorrowMarker ? (
+        <span className={cn('text-xs font-medium', todayMarker ? 'text-foreground' : 'text-muted-foreground')}>
+          {`· ${todayMarker ? t('customers.calendar.agenda.today', 'Today') : t('customers.calendar.agenda.tomorrow', 'Tomorrow')}`}
+        </span>
+      ) : null}
+      <span aria-hidden="true" className="w-2.5 shrink-0" />
+      <span className="text-xs font-medium text-muted-foreground">
+        {count === 1
+          ? t('customers.calendar.agenda.eventCount', '1 event')
+          : t('customers.calendar.agenda.eventsCount', '{count} events', { count })}
+      </span>
+    </div>
+  )
+}
+
+function AgendaRow({
+  item,
+  typeLabels,
+  onItemClick,
+}: {
+  item: CalendarItem
+  typeLabels?: Record<string, string>
+  onItemClick: (item: CalendarItem) => void
+}) {
+  const t = useT()
+  const canceled = item.status === 'canceled'
+  const done = item.status === 'done'
+  const typeLabel = typeLabels?.[item.interactionType] ?? deriveTypeLabel(item.interactionType)
+  const platformLabels: Record<string, string> = {
+    zoom: t('customers.calendar.platformFull.zoom', 'Zoom'),
+    meet: t('customers.calendar.platformFull.meet', 'Google Meet'),
+    slack: t('customers.calendar.platformFull.slack', 'Slack'),
+    teams: t('customers.calendar.platformFull.teams', 'Microsoft Teams'),
+  }
+  const locationLabel = item.platform
+    ? platformLabels[item.platform]
+    : item.locationKind === 'url' && item.location
+      ? formatUrlHost(item.location)
+      : item.location
+  const startLabel = item.allDay ? t('customers.calendar.grid.allDay', 'All day') : formatTime(item.start)
+  const endLabel = item.allDay ? null : formatTime(item.end)
+  const ariaTime = item.allDay ? startLabel : `${startLabel} – ${endLabel}`
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      aria-label={`${item.title} · ${ariaTime}`}
+      onClick={() => onItemClick(item)}
+      className={cn(
+        'h-auto w-full justify-start whitespace-normal rounded-none bg-background px-3 py-3 text-left transition-colors hover:bg-muted/30 sm:gap-3.5 sm:px-5',
+        canceled && 'opacity-60',
+      )}
+    >
+      <div className="flex w-16 shrink-0 flex-col gap-0.5 sm:w-[86px]">
+        <span className={cn('truncate text-sm font-semibold leading-4', done || canceled ? 'text-muted-foreground' : 'text-foreground')}>
+          {startLabel}
+        </span>
+        {endLabel ? <span className="truncate text-xs text-muted-foreground">{endLabel}</span> : null}
+      </div>
+      <span
+        aria-hidden="true"
+        className={cn('h-9 w-1 shrink-0 rounded-full', !item.color && 'bg-muted-foreground/40')}
+        style={item.color ? { backgroundColor: item.color } : undefined}
+      />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span
+          className={cn(
+            'truncate text-sm font-semibold',
+            done || canceled ? 'text-muted-foreground' : 'text-foreground',
+            canceled && 'line-through',
+          )}
+        >
+          {item.title}
+        </span>
+        <span className="truncate text-xs text-muted-foreground">
+          {locationLabel ? `${typeLabel} · ${locationLabel}` : typeLabel}
+        </span>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        {item.participants.length > 0 ? (
+          <span className="hidden items-center gap-0.5 sm:flex">
+            {item.participants.slice(0, MAX_AVATARS_PER_ROW).map((participant) => (
+              <Avatar key={participant.userId} size="xs" label={participantLabel(participant)} />
+            ))}
+            {item.participants.length > MAX_AVATARS_PER_ROW ? (
+              <span className="ps-0.5 text-xs font-medium text-muted-foreground">
+                +{item.participants.length - MAX_AVATARS_PER_ROW}
+              </span>
+            ) : null}
+          </span>
+        ) : null}
+        <span
+          className={cn(
+            'inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-overline font-medium uppercase tracking-wide',
+            CATEGORY_BADGE_CLASS[item.category],
+          )}
+        >
+          {t(CATEGORY_LABEL[item.category].key, CATEGORY_LABEL[item.category].fallback)}
+        </span>
+      </div>
+    </Button>
+  )
+}
+
+export function AgendaList({ anchor, horizonDays, items, typeLabels, onItemClick }: AgendaListProps) {
+  const t = useT()
+  const groups = React.useMemo(() => buildDayGroups(anchor, horizonDays, items), [anchor, horizonDays, items])
+  if (groups.length === 0) {
+    return (
+      <EmptyState
+        icon={<CalendarClock className="h-6 w-6" aria-hidden="true" />}
+        title={t('customers.calendar.empty.agenda', 'Nothing scheduled in this period')}
+      />
+    )
+  }
+  return (
+    <div className="flex w-full flex-col divide-y divide-border overflow-hidden border border-border bg-background">
+      {groups.map((group) => (
+        <React.Fragment key={dayKeyOf(group.date)}>
+          <AgendaDayHeader date={group.date} count={group.items.length} />
+          {group.items.map((item) => (
+            <AgendaRow key={item.id} item={item} typeLabels={typeLabels} onItemClick={onItemClick} />
+          ))}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,386 @@
+"use client"
+
+import * as React from 'react'
+import { Calendar, X } from 'lucide-react'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCallOrThrow, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
+import { buildOptimisticLockHeader, extractOptimisticLockConflict } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { mapCrudServerErrorToFormErrors } from '@open-mercato/ui/backend/utils/serverErrors'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { useDialogKeyHandler } from '@open-mercato/ui/hooks/useDialogKeyHandler'
+import {
+  buildEditorCategoryOptions,
+  buildInteractionPayload,
+  computeDurationMinutes,
+  createDefaultFormState,
+  defaultRepeatDaysForDateInput,
+  EDITOR_KINDS,
+  KIND_CONFIG,
+  parseItemToFormState,
+  resolveSavedOwnerUserId,
+  type EditorFormState,
+  type EditorKind,
+  type EditorPriority,
+} from '../../lib/calendar/editorPayload'
+import type { ConflictScope } from '../../lib/calendar/preferences'
+import type { CalendarItem } from './types'
+import { Field } from './editor/inputs'
+import { SegmentGroup } from './editor/SegmentGroup'
+import { RelatedToField } from './editor/RelatedToField'
+import { CategoryField } from './editor/CategoryField'
+import { RepeatField } from './editor/RepeatField'
+import { PeopleField } from './editor/PeopleField'
+import { ScheduleSection } from './editor/ScheduleSection'
+import { LocationField } from './editor/LocationField'
+import { useConflictProbe, useEditorLabelResolution } from './editor/hooks'
+
+export interface CalendarEventEditorProps {
+  open: boolean
+  mode: 'create' | 'edit'
+  item?: CalendarItem | null
+  defaultDate?: Date
+  defaultRange?: { start: Date; end: Date } | null
+  typeLabels: Record<string, string>
+  typeColors: Record<string, string | null>
+  surfacedTypes?: string[]
+  eventCategories?: string[]
+  conflictScope?: ConflictScope
+  currentUserId?: string | null
+  onOpenChange(open: boolean): void
+  onSaved(): void
+}
+
+type FieldErrors = { title?: string; relatedTo?: string; ends?: string }
+
+const PEOPLE_FIELD_TEXT = {
+  attendees: { labelKey: 'customers.calendar.editor.attendees', label: 'Attendees', placeholderKey: 'customers.calendar.editor.addPeoplePlaceholder', placeholder: 'Add staff or customer…' },
+  participants: { labelKey: 'customers.calendar.editor.participants', label: 'Participants', placeholderKey: 'customers.calendar.editor.addPeoplePlaceholder', placeholder: 'Add staff or customer…' },
+  to: { labelKey: 'customers.calendar.editor.to', label: 'To', placeholderKey: 'customers.calendar.editor.addRecipientPlaceholder', placeholder: 'Add recipient…' },
+} as const
+
+export function CalendarEventEditor({ open, mode, item, defaultDate, defaultRange, typeLabels, typeColors, surfacedTypes, eventCategories, conflictScope, currentUserId, onOpenChange, onSaved }: CalendarEventEditorProps) {
+  const t = useT()
+  const locale = useLocale()
+  const [form, setForm] = React.useState<EditorFormState>(() => createDefaultFormState(defaultDate ?? null, undefined, defaultRange ?? null))
+  const [fieldErrors, setFieldErrors] = React.useState<FieldErrors>({})
+  const [saving, setSaving] = React.useState(false)
+  const openKeyRef = React.useRef<string | null>(null)
+  const isEdit = mode === 'edit' && Boolean(item?.id)
+  const config = KIND_CONFIG[form.kind]
+
+  const update = React.useCallback((patch: Partial<EditorFormState>) => {
+    setForm((previous) => ({ ...previous, ...patch }))
+  }, [])
+
+  React.useEffect(() => {
+    if (!open) {
+      openKeyRef.current = null
+      return
+    }
+    const key = `${mode}:${item?.id ?? 'new'}`
+    if (openKeyRef.current === key) return
+    openKeyRef.current = key
+    setForm(
+      mode === 'edit' && item
+        ? parseItemToFormState(item)
+        : createDefaultFormState(defaultDate ?? null, undefined, defaultRange ?? null),
+    )
+    setFieldErrors({})
+  }, [open, mode, item, defaultDate, defaultRange])
+
+  useEditorLabelResolution(open, form, update)
+  // Probe against the owner the interaction will actually be SAVED with so the
+  // editor warning matches the grid's post-save conflict rings: tasks own via
+  // their assignee, other kinds stay ownerless on create / keep the existing
+  // owner on edit (conflicts then come from shared participants).
+  const draftOwnerUserId = resolveSavedOwnerUserId(config, form, isEdit, item?.ownerUserId ?? null)
+  // Self-exclude by the underlying interaction id (raw.id): findEditorConflictItems
+  // drops candidates by raw.id, and every expanded occurrence of a recurring series
+  // shares it — so the edited record never conflicts with itself. (asEditableItem
+  // already normalizes a clicked occurrence's id to raw.id, so these match today;
+  // raw.id keeps it correct even if a future edit path skips that normalization.)
+  const conflict = useConflictProbe(open, form, config, isEdit && item ? item.raw.id : null, draftOwnerUserId, conflictScope ?? 'all', currentUserId ?? null)
+
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    resourceId: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: 'customers-calendar-event-editor',
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  const handleSave = React.useCallback(async () => {
+    const errors: FieldErrors = {}
+    if (!form.title.trim()) errors.title = t('customers.calendar.editor.validation.titleRequired', 'Title is required')
+    if (!form.relatedTo) errors.relatedTo = t('customers.calendar.editor.validation.relatedToRequired', 'Select a person or company to link this event')
+    if (config.hasEnd && !form.allDay && computeDurationMinutes(form) === null) {
+      errors.ends = t('customers.calendar.editor.validation.endsBeforeStarts', 'End must be after start')
+    }
+    setFieldErrors(errors)
+    if (Object.keys(errors).length > 0) return
+    setSaving(true)
+    try {
+      const payload = buildInteractionPayload(form, { mode, id: item?.id })
+      await runMutation({
+        operation: () => {
+          const call = () =>
+            apiCallOrThrow('/api/customers/interactions', {
+              method: isEdit ? 'PUT' : 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(payload),
+            })
+          return isEdit ? withScopedApiRequestHeaders(buildOptimisticLockHeader(item?.updatedAt), call) : call()
+        },
+        mutationPayload: {
+          operation: isEdit ? 'updateCalendarEvent' : 'createCalendarEvent',
+          interactionId: item?.id ?? null,
+          interactionType: form.category ?? form.kind,
+        },
+        context: {
+          formId: 'customers-calendar-event-editor',
+          resourceKind: 'customers.interaction',
+          resourceId: item?.id ?? 'new',
+          retryLastMutation,
+        },
+      })
+      flash(t('customers.calendar.editor.saved', 'Event saved'), 'success')
+      onOpenChange(false)
+      requestAnimationFrame(() => { onSaved() })
+    } catch (err) {
+      // An optimistic-lock 409 is surfaced as the persistent conflict bar by
+      // useGuardedMutation (surfaceRecordConflict) — close without re-flashing.
+      if (extractOptimisticLockConflict(err)) {
+        onOpenChange(false)
+        return
+      }
+      const { message } = mapCrudServerErrorToFormErrors(err)
+      const key = typeof message === 'string' ? message.trim() : ''
+      flash(key ? t(key, key) : t('customers.calendar.editor.error', 'Failed to save event'), 'error')
+    } finally {
+      setSaving(false)
+    }
+  }, [config.hasEnd, form, isEdit, item?.id, mode, onOpenChange, onSaved, retryLastMutation, runMutation, t])
+
+  const handleKeyDown = useDialogKeyHandler({ onConfirm: handleSave, disabled: saving })
+
+  const categoryOptions = React.useMemo(
+    () =>
+      buildEditorCategoryOptions({
+        typeLabels,
+        surfacedTypes: surfacedTypes ?? [],
+        eventCategories: eventCategories ?? [],
+        selectedValue: form.category ?? form.kind,
+        selectedFallbackLabel: t(`customers.calendar.editor.types.${form.kind}`, form.kind),
+      }),
+    [typeLabels, surfacedTypes, eventCategories, form.category, form.kind, t],
+  )
+
+  const titleLabel = form.kind === 'email'
+    ? t('customers.calendar.editor.titleLabel.email', 'Subject')
+    : form.kind === 'note'
+      ? t('customers.calendar.editor.titleLabel.note', 'Note')
+      : t('customers.calendar.editor.titleLabel.generic', 'Title')
+  const dialogTitle = isEdit ? t('customers.calendar.editor.title.edit', 'Edit event') : t('customers.calendar.editor.title.create', 'New event')
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        onKeyDown={handleKeyDown}
+        aria-describedby={undefined}
+        dismissible={false}
+        className="flex h-dvh max-h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-xl sm:h-auto sm:max-h-screen sm:w-full sm:max-w-md sm:rounded-2xl sm:border-0"
+      >
+        <VisuallyHidden>
+          <DialogTitle>{dialogTitle}</DialogTitle>
+        </VisuallyHidden>
+        <div className="flex shrink-0 items-center gap-3 border-b border-border bg-background py-4 pl-5 pr-4">
+          <Calendar aria-hidden className="size-6 shrink-0 text-foreground" strokeWidth={1.75} />
+          <p className="min-w-0 flex-1 text-sm font-medium leading-5 text-foreground">{dialogTitle}</p>
+          <IconButton
+            variant="ghost"
+            size="sm"
+            onClick={() => onOpenChange(false)}
+            aria-label={t('customers.calendar.editor.close', 'Close')}
+            className="shrink-0 text-muted-foreground"
+          >
+            <X aria-hidden className="size-5" />
+          </IconButton>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          <div className="flex flex-col items-start gap-5 px-4 py-5 sm:px-6 sm:py-6">
+            {conflict ? (
+              <Alert variant="warning" className="rounded-lg">
+                <AlertTitle>{t('customers.calendar.editor.conflictTitle', 'Calendar conflict')}</AlertTitle>
+                <AlertDescription>{conflict}</AlertDescription>
+              </Alert>
+            ) : null}
+            <SegmentGroup<EditorKind>
+              ariaLabel={t('customers.calendar.editor.typeSwitcher', 'Event type')}
+              value={form.kind}
+              onChange={(kind) => update({ kind, category: null })}
+              options={EDITOR_KINDS.map((kind) => ({ value: kind, label: t(`customers.calendar.editor.types.${kind}`, kind) }))}
+            />
+            <Field label={titleLabel} error={fieldErrors.title}>
+              <Input
+                type="text"
+                value={form.title}
+                onChange={(event) => update({ title: event.target.value })}
+                placeholder={t('customers.calendar.editor.titlePlaceholder', 'Add a title…')}
+                aria-label={titleLabel}
+                autoFocus
+                size="lg"
+              />
+            </Field>
+            <Field label={t('customers.calendar.editor.relatedTo', 'Related to')} error={fieldErrors.relatedTo}>
+              <RelatedToField
+                label={t('customers.calendar.editor.relatedTo', 'Related to')}
+                value={form.relatedTo}
+                deal={form.dealId && form.dealLabel ? { id: form.dealId, label: form.dealLabel } : null}
+                onChange={(relatedTo) => update({ relatedTo })}
+                onDealChange={(deal) => update({ dealId: deal?.id ?? null, dealLabel: deal?.label ?? null })}
+                error={fieldErrors.relatedTo}
+              />
+            </Field>
+            <ScheduleSection
+              dateLabel={config.dateLabel}
+              hasAllDay={config.hasAllDay}
+              hasEnd={config.hasEnd}
+              allDay={form.allDay}
+              date={form.date}
+              startTime={form.startTime}
+              endDate={form.endDate}
+              endTime={form.endTime}
+              locale={locale}
+              endsError={fieldErrors.ends}
+              onAllDayChange={(allDay) => update({ allDay })}
+              onDateChange={(date) => {
+                const untouchedDefault =
+                  JSON.stringify(form.repeatDays) === JSON.stringify(defaultRepeatDaysForDateInput(form.date))
+                update(
+                  untouchedDefault
+                    ? { date, repeatDays: defaultRepeatDaysForDateInput(date) }
+                    : { date },
+                )
+              }}
+              onStartTimeChange={(startTime) => update({ startTime })}
+              onEndDateChange={(endDate) => update({ endDate })}
+              onEndTimeChange={(endTime) => update({ endTime })}
+            />
+            {config.hasRepeat ? (
+              <RepeatField
+                freq={form.repeatFreq}
+                days={form.repeatDays}
+                endType={form.repeatEndType}
+                count={form.repeatCount}
+                untilDate={form.repeatUntilDate}
+                locale={locale}
+                onFreqChange={(repeatFreq) =>
+                  update(
+                    repeatFreq === 'weekly'
+                      ? { repeatFreq, repeatDays: defaultRepeatDaysForDateInput(form.date) }
+                      : { repeatFreq },
+                  )}
+                onToggleDay={(index) =>
+                  update({ repeatDays: form.repeatDays.map((active, dayIndex) => (dayIndex === index ? !active : active)) })}
+                onEndTypeChange={(repeatEndType) => update({ repeatEndType })}
+                onCountChange={(repeatCount) => update({ repeatCount })}
+                onUntilDateChange={(repeatUntilDate) => update({ repeatUntilDate })}
+              />
+            ) : null}
+            <Field label={t('customers.calendar.editor.category', 'Category')}>
+              <CategoryField
+                label={t('customers.calendar.editor.category', 'Category')}
+                value={form.category ?? form.kind}
+                options={categoryOptions}
+                colors={typeColors}
+                onChange={(category) => update({ category })}
+              />
+            </Field>
+            {config.location ? (
+              <LocationField variant={config.location} value={form.location} onChange={(location) => update({ location })} />
+            ) : null}
+            {config.people && config.people !== 'assignee' ? (
+              <Field label={t(PEOPLE_FIELD_TEXT[config.people].labelKey, PEOPLE_FIELD_TEXT[config.people].label)}>
+                <PeopleField
+                  mode="multi"
+                  includeCustomers
+                  placeholder={t(PEOPLE_FIELD_TEXT[config.people].placeholderKey, PEOPLE_FIELD_TEXT[config.people].placeholder)}
+                  ariaLabel={t(PEOPLE_FIELD_TEXT[config.people].labelKey, PEOPLE_FIELD_TEXT[config.people].label)}
+                  value={form.participants}
+                  onChange={(participants) => update({ participants })}
+                />
+              </Field>
+            ) : null}
+            {config.hasPriority ? (
+              <Field label={t('customers.calendar.editor.priority.label', 'Priority')}>
+                <SegmentGroup<EditorPriority>
+                  size="md"
+                  ariaLabel={t('customers.calendar.editor.priority.label', 'Priority')}
+                  value={form.priority}
+                  onChange={(priority) => update({ priority })}
+                  options={[
+                    { value: 'low', label: t('customers.calendar.editor.priority.low', 'Low') },
+                    { value: 'medium', label: t('customers.calendar.editor.priority.medium', 'Medium') },
+                    { value: 'high', label: t('customers.calendar.editor.priority.high', 'High') },
+                  ]}
+                />
+              </Field>
+            ) : null}
+            {config.people === 'assignee' ? (
+              <Field label={t('customers.calendar.editor.assignee', 'Assignee')}>
+                <PeopleField
+                  mode="single"
+                  includeCustomers={false}
+                  placeholder={t('customers.calendar.editor.assigneePlaceholder', 'Assign to a team member…')}
+                  ariaLabel={t('customers.calendar.editor.assignee', 'Assignee')}
+                  value={form.assigneeUserId
+                    ? [{ userId: form.assigneeUserId, name: form.assigneeName ?? form.assigneeUserId, isCustomer: false }]
+                    : []}
+                  onChange={(entries) => {
+                    const next = entries[entries.length - 1] ?? null
+                    update({ assigneeUserId: next?.userId ?? null, assigneeName: next?.name ?? null })
+                  }}
+                />
+              </Field>
+            ) : null}
+            <Field label={t('customers.calendar.editor.description', 'Description')}>
+              <Textarea
+                value={form.description}
+                onChange={(event) => update({ description: event.target.value })}
+                placeholder={t('customers.calendar.editor.descriptionPlaceholder', 'Add details…')}
+                aria-label={t('customers.calendar.editor.description', 'Description')}
+                className="h-24 resize-none"
+              />
+            </Field>
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center justify-end gap-3 border-t border-border bg-background px-5 py-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            {t('customers.calendar.editor.cancel', 'Cancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={handleSave}
+            disabled={saving}
+          >
+            {saving ? t('customers.calendar.editor.saving', 'Saving…') : t('customers.calendar.editor.save', 'Save event')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Kbd } from '@open-mercato/ui/primitives/kbd'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { CalendarFooterProps } from './types'
+
+export const CALENDAR_SHORTCUTS: ReadonlyArray<{
+  key: string
+  labelKey: string
+  fallback: string
+}> = [
+  { key: 'T', labelKey: 'customers.calendar.shortcuts.today', fallback: 'Today' },
+  { key: 'D', labelKey: 'customers.calendar.shortcuts.dayView', fallback: 'Day view' },
+  { key: 'W', labelKey: 'customers.calendar.shortcuts.week', fallback: 'Week' },
+  { key: 'M', labelKey: 'customers.calendar.shortcuts.month', fallback: 'Month' },
+  { key: 'A', labelKey: 'customers.calendar.shortcuts.agenda', fallback: 'Agenda' },
+  { key: 'N', labelKey: 'customers.calendar.shortcuts.newEvent', fallback: 'New event' },
+  { key: '/', labelKey: 'customers.calendar.shortcuts.search', fallback: 'Search' },
+  { key: '?', labelKey: 'customers.calendar.shortcuts.help', fallback: 'Shortcuts' },
+]
+
+export function CalendarFooter({ timezoneLabel, onOpenShortcuts }: CalendarFooterProps) {
+  const t = useT()
+  return (
+    <footer className="flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t bg-muted/40 px-4 py-2">
+      {CALENDAR_SHORTCUTS.map((shortcut) => {
+        const legend = (
+          <>
+            <Kbd>{shortcut.key}</Kbd>
+            <span className="text-xs text-muted-foreground">
+              {t(shortcut.labelKey, shortcut.fallback)}
+            </span>
+          </>
+        )
+        if (shortcut.key === '?' && onOpenShortcuts) {
+          return (
+            <Button
+              key={shortcut.key}
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-auto gap-1.5 p-0 font-normal hover:bg-transparent"
+              aria-label={t('customers.calendar.shortcuts.title', 'Keyboard shortcuts')}
+              onClick={onOpenShortcuts}
+            >
+              {legend}
+            </Button>
+          )
+        }
+        return (
+          <span key={shortcut.key} className="inline-flex items-center gap-1.5">
+            {legend}
+          </span>
+        )
+      })}
+      <span className="ml-auto text-xs text-muted-foreground">{timezoneLabel}</span>
+    </footer>
+  )
+}