@open-mercato/core 0.6.6-develop.6205.1.109e4b6a84 → 0.6.6-develop.6227.1.2695efff30

package/src/modules/customers/components/PipelineSettings.tsx

@@ -16,6 +16,7 @@ import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall, readApiResultOrThrow, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
 import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
 import { raiseCrudError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
@@ -103,6 +104,31 @@ export default function PipelineSettings(): React.ReactElement {
   const [stageForm, setStageForm] = React.useState({ label: '', color: null as string | null, icon: null as string | null })
   const [submittingStage, setSubmittingStage] = React.useState(false)
 
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: 'customers-pipeline-settings',
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+  const pipelineMutationContext = React.useMemo(
+    () => ({
+      formId: 'customers-pipeline-settings',
+      resourceKind: 'customers.pipeline',
+      retryLastMutation,
+    }),
+    [retryLastMutation],
+  )
+  const stageMutationContext = React.useMemo(
+    () => ({
+      formId: 'customers-pipeline-settings',
+      resourceKind: 'customers.pipeline_stage',
+      retryLastMutation,
+    }),
+    [retryLastMutation],
+  )
+
   const loadPipelines = React.useCallback(async () => {
     setLoadingPipelines(true)
     try {
@@ -165,38 +191,50 @@ export default function PipelineSettings(): React.ReactElement {
     setSubmittingPipeline(true)
     try {
       if (pipelineDialog?.mode === 'create') {
-        const res = await apiCall('/api/customers/pipelines', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ name: pipelineForm.name.trim(), isDefault: pipelineForm.isDefault }),
+        await runMutation({
+          operation: async () => {
+            const res = await apiCall('/api/customers/pipelines', {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ name: pipelineForm.name.trim(), isDefault: pipelineForm.isDefault }),
+            })
+            if (!res.ok) {
+              await raiseCrudError(res.response, t('customers.pipelines.errors.createFailed', 'Failed to create pipeline'))
+            }
+          },
+          context: pipelineMutationContext,
+          mutationPayload: { action: 'create', name: pipelineForm.name.trim(), isDefault: pipelineForm.isDefault },
         })
-        if (!res.ok) {
-          await raiseCrudError(res.response, t('customers.pipelines.errors.createFailed', 'Failed to create pipeline'))
-          return
-        }
         flash(t('customers.pipelines.flash.created', 'Pipeline created'), 'success')
       } else if (pipelineDialog?.mode === 'edit') {
-        const res = await withScopedApiRequestHeaders(
-          buildOptimisticLockHeader(pipelineDialog.entry.updatedAt),
-          () =>
-            apiCall('/api/customers/pipelines', {
-              method: 'PUT',
-              headers: { 'content-type': 'application/json' },
-              body: JSON.stringify({ id: pipelineDialog.entry.id, name: pipelineForm.name.trim(), isDefault: pipelineForm.isDefault }),
-            }),
-        )
-        if (!res.ok) {
-          await raiseCrudError(res.response, t('customers.pipelines.errors.updateFailed', 'Failed to update pipeline'))
-          return
-        }
+        await runMutation({
+          operation: async () => {
+            const res = await withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(pipelineDialog.entry.updatedAt),
+              () =>
+                apiCall('/api/customers/pipelines', {
+                  method: 'PUT',
+                  headers: { 'content-type': 'application/json' },
+                  body: JSON.stringify({ id: pipelineDialog.entry.id, name: pipelineForm.name.trim(), isDefault: pipelineForm.isDefault }),
+                }),
+            )
+            if (!res.ok) {
+              await raiseCrudError(res.response, t('customers.pipelines.errors.updateFailed', 'Failed to update pipeline'))
+            }
+          },
+          context: pipelineMutationContext,
+          mutationPayload: { action: 'update', id: pipelineDialog.entry.id, name: pipelineForm.name.trim(), isDefault: pipelineForm.isDefault },
+        })
         flash(t('customers.pipelines.flash.updated', 'Pipeline updated'), 'success')
       }
       setPipelineDialog(null)
       await loadPipelines()
+    } catch {
+      return
     } finally {
       setSubmittingPipeline(false)
     }
-  }, [pipelineDialog, pipelineForm, loadPipelines, t])
+  }, [pipelineDialog, pipelineForm, loadPipelines, pipelineMutationContext, runMutation, t])
 
   const handleDeletePipeline = React.useCallback(async (pipeline: Pipeline) => {
     const confirmed = await confirm({
@@ -206,25 +244,36 @@ export default function PipelineSettings(): React.ReactElement {
       variant: 'destructive',
     })
     if (!confirmed) return
-    const res = await withScopedApiRequestHeaders(
-      buildOptimisticLockHeader(pipeline.updatedAt),
-      () =>
-        apiCall('/api/customers/pipelines', {
-          method: 'DELETE',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ id: pipeline.id }),
-        }),
-    )
-    if (!res.ok) {
-      const body = (res.result ?? {}) as Record<string, unknown>
-      const msg = typeof body.error === 'string' ? body.error : t('customers.pipelines.errors.deleteFailed', 'Failed to delete pipeline')
+    try {
+      await runMutation({
+        operation: async () => {
+          const res = await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(pipeline.updatedAt),
+            () =>
+              apiCall('/api/customers/pipelines', {
+                method: 'DELETE',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ id: pipeline.id }),
+              }),
+          )
+          if (!res.ok) {
+            const body = (res.result ?? {}) as Record<string, unknown>
+            const msg = typeof body.error === 'string' ? body.error : t('customers.pipelines.errors.deleteFailed', 'Failed to delete pipeline')
+            throw new Error(msg)
+          }
+        },
+        context: pipelineMutationContext,
+        mutationPayload: { action: 'delete', id: pipeline.id },
+      })
+    } catch (err) {
+      const msg = err instanceof Error && err.message ? err.message : t('customers.pipelines.errors.deleteFailed', 'Failed to delete pipeline')
       flash(msg, 'error')
       return
     }
     flash(t('customers.pipelines.flash.deleted', 'Pipeline deleted'), 'success')
     if (expandedPipelineId === pipeline.id) setExpandedPipelineId(null)
     await loadPipelines()
-  }, [confirm, expandedPipelineId, loadPipelines, t])
+  }, [confirm, expandedPipelineId, loadPipelines, pipelineMutationContext, runMutation, t])
 
   const openCreateStage = React.useCallback((pipelineId: string) => {
     setStageForm({ label: '', color: null, icon: null })
@@ -249,39 +298,53 @@ export default function PipelineSettings(): React.ReactElement {
       if (stageForm.icon) appearance.icon = stageForm.icon
 
       if (stageDialog?.mode === 'create') {
-        const res = await apiCall('/api/customers/pipeline-stages', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ pipelineId: stageDialog.pipelineId, label: stageForm.label.trim(), ...appearance }),
+        const targetPipelineId = stageDialog.pipelineId
+        await runMutation({
+          operation: async () => {
+            const res = await apiCall('/api/customers/pipeline-stages', {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ pipelineId: targetPipelineId, label: stageForm.label.trim(), ...appearance }),
+            })
+            if (!res.ok) {
+              await raiseCrudError(res.response, t('customers.pipelines.errors.stageCreateFailed', 'Failed to create stage'))
+            }
+          },
+          context: stageMutationContext,
+          mutationPayload: { action: 'create', pipelineId: targetPipelineId, label: stageForm.label.trim(), ...appearance },
         })
-        if (!res.ok) {
-          await raiseCrudError(res.response, t('customers.pipelines.errors.stageCreateFailed', 'Failed to create stage'))
-          return
-        }
         flash(t('customers.pipelines.flash.stageCreated', 'Stage created'), 'success')
-        await loadStages(stageDialog.pipelineId)
+        await loadStages(targetPipelineId)
       } else if (stageDialog?.mode === 'edit') {
-        const res = await withScopedApiRequestHeaders(
-          buildOptimisticLockHeader(stageDialog.entry.updatedAt),
-          () =>
-            apiCall('/api/customers/pipeline-stages', {
-              method: 'PUT',
-              headers: { 'content-type': 'application/json' },
-              body: JSON.stringify({ id: stageDialog.entry.id, label: stageForm.label.trim(), ...appearance }),
-            }),
-        )
-        if (!res.ok) {
-          await raiseCrudError(res.response, t('customers.pipelines.errors.stageUpdateFailed', 'Failed to update stage'))
-          return
-        }
+        const targetStage = stageDialog.entry
+        await runMutation({
+          operation: async () => {
+            const res = await withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(targetStage.updatedAt),
+              () =>
+                apiCall('/api/customers/pipeline-stages', {
+                  method: 'PUT',
+                  headers: { 'content-type': 'application/json' },
+                  body: JSON.stringify({ id: targetStage.id, label: stageForm.label.trim(), ...appearance }),
+                }),
+            )
+            if (!res.ok) {
+              await raiseCrudError(res.response, t('customers.pipelines.errors.stageUpdateFailed', 'Failed to update stage'))
+            }
+          },
+          context: stageMutationContext,
+          mutationPayload: { action: 'update', id: targetStage.id, label: stageForm.label.trim(), ...appearance },
+        })
         flash(t('customers.pipelines.flash.stageUpdated', 'Stage updated'), 'success')
-        await loadStages(stageDialog.entry.pipelineId)
+        await loadStages(targetStage.pipelineId)
       }
       setStageDialog(null)
+    } catch {
+      return
     } finally {
       setSubmittingStage(false)
     }
-  }, [stageDialog, stageForm, loadStages, t])
+  }, [stageDialog, stageForm, loadStages, runMutation, stageMutationContext, t])
 
   const handleDeleteStage = React.useCallback(async (stage: PipelineStage) => {
     const confirmed = await confirm({
@@ -291,24 +354,35 @@ export default function PipelineSettings(): React.ReactElement {
       variant: 'destructive',
     })
     if (!confirmed) return
-    const res = await withScopedApiRequestHeaders(
-      buildOptimisticLockHeader(stage.updatedAt),
-      () =>
-        apiCall('/api/customers/pipeline-stages', {
-          method: 'DELETE',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ id: stage.id }),
-        }),
-    )
-    if (!res.ok) {
-      const body = (res.result ?? {}) as Record<string, unknown>
-      const msg = typeof body.error === 'string' ? body.error : t('customers.pipelines.errors.stageDeleteFailed', 'Failed to delete stage')
+    try {
+      await runMutation({
+        operation: async () => {
+          const res = await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(stage.updatedAt),
+            () =>
+              apiCall('/api/customers/pipeline-stages', {
+                method: 'DELETE',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ id: stage.id }),
+              }),
+          )
+          if (!res.ok) {
+            const body = (res.result ?? {}) as Record<string, unknown>
+            const msg = typeof body.error === 'string' ? body.error : t('customers.pipelines.errors.stageDeleteFailed', 'Failed to delete stage')
+            throw new Error(msg)
+          }
+        },
+        context: stageMutationContext,
+        mutationPayload: { action: 'delete', id: stage.id },
+      })
+    } catch (err) {
+      const msg = err instanceof Error && err.message ? err.message : t('customers.pipelines.errors.stageDeleteFailed', 'Failed to delete stage')
       flash(msg, 'error')
       return
     }
     flash(t('customers.pipelines.flash.stageDeleted', 'Stage deleted'), 'success')
     await loadStages(stage.pipelineId)
-  }, [confirm, loadStages, t])
+  }, [confirm, loadStages, runMutation, stageMutationContext, t])
 
   const handleMoveStage = React.useCallback(async (stage: PipelineStage, direction: 'up' | 'down') => {
     const pipelineStages = stages[stage.pipelineId] ?? []
@@ -323,17 +397,28 @@ export default function PipelineSettings(): React.ReactElement {
     reordered[swapIdx] = temp
 
     const orderedStages = reordered.map((s, i) => ({ id: s.id, order: i }))
-    const res = await apiCall('/api/customers/pipeline-stages/reorder', {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ stages: orderedStages }),
-    })
-    if (!res.ok) {
-      flash(t('customers.pipelines.errors.reorderFailed', 'Failed to reorder stages'), 'error')
+    try {
+      await runMutation({
+        operation: async () => {
+          const res = await apiCall('/api/customers/pipeline-stages/reorder', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ stages: orderedStages }),
+          })
+          if (!res.ok) {
+            throw new Error(t('customers.pipelines.errors.reorderFailed', 'Failed to reorder stages'))
+          }
+        },
+        context: stageMutationContext,
+        mutationPayload: { action: 'reorder', stages: orderedStages },
+      })
+    } catch (err) {
+      const msg = err instanceof Error && err.message ? err.message : t('customers.pipelines.errors.reorderFailed', 'Failed to reorder stages')
+      flash(msg, 'error')
       return
     }
     await loadStages(stage.pipelineId)
-  }, [stages, loadStages, t])
+  }, [stages, loadStages, runMutation, stageMutationContext, t])
 
   const handleKeyDown = React.useCallback(
     (handler: () => void) => (e: React.KeyboardEvent) => {

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

@@ -7,11 +7,12 @@ 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 { useLocale, 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 { eventDisplayTitle, pluralCategory } from '../../lib/calendar/labels'
 import type { AgendaListProps, CalendarCategory, CalendarItem } from './types'
 
 const MAX_AVATARS_PER_ROW = 2
@@ -84,8 +85,15 @@ function buildDayGroups(anchor: Date, horizonDays: number, items: CalendarItem[]
 
 function AgendaDayHeader({ date, count }: { date: Date; count: number }) {
   const t = useT()
+  const locale = useLocale()
   const todayMarker = isToday(date)
   const tomorrowMarker = !todayMarker && isTomorrow(date)
+  const countKey = `customers.calendar.agenda.eventsCount.${pluralCategory(locale, count)}`
+  const resolvedCount = t(countKey, { count })
+  const countLabel =
+    resolvedCount === countKey
+      ? t('customers.calendar.agenda.eventsCount.other', '{count} events', { count })
+      : resolvedCount
   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>
@@ -95,11 +103,7 @@ function AgendaDayHeader({ date, count }: { date: Date; count: number }) {
         </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>
+      <span className="text-xs font-medium text-muted-foreground">{countLabel}</span>
     </div>
   )
 }
@@ -116,6 +120,7 @@ function AgendaRow({
   const t = useT()
   const canceled = item.status === 'canceled'
   const done = item.status === 'done'
+  const title = eventDisplayTitle(item.title, t('customers.calendar.grid.untitled', 'Untitled'))
   const typeLabel = typeLabels?.[item.interactionType] ?? deriveTypeLabel(item.interactionType)
   const platformLabels: Record<string, string> = {
     zoom: t('customers.calendar.platformFull.zoom', 'Zoom'),
@@ -135,7 +140,7 @@ function AgendaRow({
     <Button
       type="button"
       variant="ghost"
-      aria-label={`${item.title} · ${ariaTime}`}
+      aria-label={`${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',
@@ -161,7 +166,7 @@ function AgendaRow({
             canceled && 'line-through',
           )}
         >
-          {item.title}
+          {title}
         </span>
         <span className="truncate text-xs text-muted-foreground">
           {locationLabel ? `${typeLabel} · ${locationLabel}` : typeLabel}

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

@@ -78,6 +78,10 @@ export function CalendarSettingsModal({
   ]
 
   const title = t('customers.calendar.settings.title', 'Customization')
+  const removeTagLabel = React.useCallback(
+    (tag: string) => t('customers.calendar.settings.removeTag', 'Remove {tag}', { tag }),
+    [t],
+  )
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -119,6 +123,7 @@ export function CalendarSettingsModal({
             placeholder={t('customers.calendar.settings.addCategory', 'Add a category…')}
             value={draft.eventCategories}
             maxTags={MAX_EVENT_CATEGORIES}
+            removeTagLabel={removeTagLabel}
             onChange={(eventCategories) => setDraft((current) => ({ ...current, eventCategories }))}
           />
           <SettingsTagInput
@@ -131,6 +136,7 @@ export function CalendarSettingsModal({
             placeholder={t('customers.calendar.settings.addType', 'Add a type…')}
             value={draft.activityTypes}
             maxTags={MAX_ACTIVITY_TYPES}
+            removeTagLabel={removeTagLabel}
             onChange={(activityTypes) => setDraft((current) => ({ ...current, activityTypes }))}
           />
           {toggleRows.map((row) => (
@@ -186,10 +192,11 @@ type SettingsTagInputProps = {
   placeholder: string
   value: string[]
   maxTags: number
+  removeTagLabel: (tag: string) => string
   onChange(value: string[]): void
 }
 
-function SettingsTagInput({ label, maxLabel, hint, placeholder, value, maxTags, onChange }: SettingsTagInputProps) {
+function SettingsTagInput({ label, maxLabel, hint, placeholder, value, maxTags, removeTagLabel, onChange }: SettingsTagInputProps) {
   return (
     <div className="flex flex-col gap-1">
       <div className="flex items-center gap-1">
@@ -201,7 +208,14 @@ function SettingsTagInput({ label, maxLabel, hint, placeholder, value, maxTags,
           </span>
         </SimpleTooltip>
       </div>
-      <TagInput value={value} onChange={onChange} placeholder={placeholder} maxTags={maxTags} aria-label={label} />
+      <TagInput
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        maxTags={maxTags}
+        aria-label={label}
+        removeTagLabel={removeTagLabel}
+      />
     </div>
   )
 }

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

@@ -11,6 +11,7 @@ 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'
 
 const MAX_PILLS_PER_DAY = 2
@@ -61,7 +62,9 @@ function groupItemsByDay(items: CalendarItem[]): Map<string, CalendarItem[]> {
 }
 
 function MonthPill({ item, onItemClick }: { item: CalendarItem; onItemClick: (item: CalendarItem) => void }) {
+  const t = useT()
   const canceled = item.status === 'canceled'
+  const title = eventDisplayTitle(item.title, t('customers.calendar.grid.untitled', 'Untitled'))
   const timeLabel = item.allDay ? '' : ` · ${formatTime(item.start)} – ${formatTime(item.end)}`
   const tintStyle = item.color
     ? { backgroundColor: `${item.color}${SOFT_TINT_ALPHA}`, color: item.color }
@@ -70,7 +73,7 @@ function MonthPill({ item, onItemClick }: { item: CalendarItem; onItemClick: (it
     <Button
       type="button"
       variant="ghost"
-      aria-label={`${item.title}${timeLabel}`}
+      aria-label={`${title}${timeLabel}`}
       onClick={(event) => {
         event.stopPropagation()
         onItemClick(item)
@@ -94,7 +97,7 @@ function MonthPill({ item, onItemClick }: { item: CalendarItem; onItemClick: (it
           canceled && 'line-through',
         )}
       >
-        {item.title}
+        {title}
       </span>
     </Button>
   )

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

@@ -7,6 +7,7 @@ import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { Button } from '@open-mercato/ui/primitives/button'
 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'
 
@@ -119,6 +120,11 @@ export function PeopleField({
                   variant="ghost"
                   role="option"
                   aria-selected={false}
+                  aria-label={composeAccessibleName([
+                    option.name,
+                    option.email,
+                    option.isCustomer ? t('customers.calendar.editor.customerBadge', 'Customer') : null,
+                  ])}
                   onClick={() => {
                     const participant: EditorParticipant = {
                       userId: option.userId,

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

@@ -8,6 +8,7 @@ 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 { EditorRelatedTo } from '../../../lib/calendar/editorPayload'
+import { composeAccessibleName } from '../../../lib/calendar/labels'
 import {
   fetchDealsForEntity,
   searchRelatedEntities,
@@ -178,6 +179,7 @@ export function RelatedToField({
                   variant="ghost"
                   role="option"
                   aria-selected={value?.id === option.id}
+                  aria-label={composeAccessibleName([option.label, option.subtitle, kindLabel(option.kind)])}
                   onClick={() => {
                     onChange({ id: option.id, kind: option.kind, label: option.label })
                     if (value?.id !== option.id) onDealChange(null)

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

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { EditorDateLabel } from '../../../lib/calendar/editorPayload'
+import { multiDayEventSpan } from '../../../lib/calendar/labels'
 import { AllDayToggle, DateControl, LABEL_CLASS, TimeControl } from './inputs'
 
 const DATE_LABEL_TEXT: Record<EditorDateLabel, { key: string; fallback: string }> = {
@@ -76,6 +77,7 @@ export function ScheduleSection({
 }) {
   const t = useT()
   const showTime = !(hasAllDay && allDay)
+  const multiDaySpan = hasEnd && !endsError ? multiDayEventSpan(date, endDate) : 0
   return (
     <div className="flex w-full flex-col gap-2.5">
       {hasAllDay ? (
@@ -105,6 +107,11 @@ export function ScheduleSection({
         />
       ) : null}
       {endsError ? <p className="text-xs text-status-error-text">{endsError}</p> : null}
+      {multiDaySpan > 0 ? (
+        <p className="text-xs text-muted-foreground">
+          {t('customers.calendar.editor.multiDayHint', 'Multi-day event · {count} days', { count: multiDaySpan })}
+        </p>
+      ) : null}
     </div>
   )
 }

package/src/modules/customers/i18n/de.json

@@ -151,11 +151,11 @@
   "customers.audit.entityRoles.create": "Create entity role",
   "customers.audit.entityRoles.delete": "Delete entity role",
   "customers.audit.entityRoles.update": "Update entity role",
-  "customers.audit.interactions.cancel": "Interaction abbrechen",
-  "customers.audit.interactions.complete": "Interaction abschliessen",
-  "customers.audit.interactions.create": "Interaction erstellen",
-  "customers.audit.interactions.delete": "Interaction loeschen",
-  "customers.audit.interactions.update": "Interaction aktualisieren",
+  "customers.audit.interactions.cancel": "Interaktion abbrechen",
+  "customers.audit.interactions.complete": "Interaktion abschließen",
+  "customers.audit.interactions.create": "Interaktion erstellen",
+  "customers.audit.interactions.delete": "Interaktion löschen",
+  "customers.audit.interactions.update": "Interaktion aktualisieren",
   "customers.audit.labels.assign": "Label zuweisen",
   "customers.audit.labels.create": "Label erstellen",
   "customers.audit.labels.unassign": "Labelzuweisung entfernen",
@@ -174,8 +174,10 @@
   "customers.audit.todos.link": "To-do verknüpfen",
   "customers.audit.todos.unlink": "To-do-Verknüpfung lösen",
   "customers.calendar.actions.newEvent": "Neuer Termin",
-  "customers.calendar.agenda.eventCount": "1 Termin",
-  "customers.calendar.agenda.eventsCount": "{count} Termine",
+  "customers.calendar.agenda.eventsCount.few": "{count} Termine",
+  "customers.calendar.agenda.eventsCount.many": "{count} Termine",
+  "customers.calendar.agenda.eventsCount.one": "{count} Termin",
+  "customers.calendar.agenda.eventsCount.other": "{count} Termine",
   "customers.calendar.agenda.today": "Heute",
   "customers.calendar.agenda.tomorrow": "Morgen",
   "customers.calendar.cards.allDay": "Ganztägig",
@@ -230,6 +232,7 @@
   "customers.calendar.editor.error": "Termin konnte nicht gespeichert werden",
   "customers.calendar.editor.location": "Ort",
   "customers.calendar.editor.locationPlaceholder": "Ort oder Link hinzufügen…",
+  "customers.calendar.editor.multiDayHint": "Mehrtägiger Termin · {count} Tage",
   "customers.calendar.editor.noResults": "Keine Ergebnisse",
   "customers.calendar.editor.participants": "Teilnehmer",
   "customers.calendar.editor.phoneLink": "Telefon / Link",
@@ -334,6 +337,7 @@
   "customers.calendar.settings.eventCategories": "Ereigniskategorien",
   "customers.calendar.settings.eventCategoriesHint": "Eigene Gruppierungslabels (z. B. Teammeeting, Verkaufsanruf). Werden beim Erstellen eines Ereignisses angeboten.",
   "customers.calendar.settings.max": "(max. {count})",
+  "customers.calendar.settings.removeTag": "{tag} entfernen",
   "customers.calendar.settings.save": "Änderungen speichern",
   "customers.calendar.settings.saved": "Kalendereinstellungen gespeichert",
   "customers.calendar.settings.showCrmActivities": "CRM-Aktivitäten im Kalender anzeigen",

package/src/modules/customers/i18n/en.json

@@ -174,8 +174,10 @@
   "customers.audit.todos.link": "Link todo",
   "customers.audit.todos.unlink": "Unlink todo",
   "customers.calendar.actions.newEvent": "New event",
-  "customers.calendar.agenda.eventCount": "1 event",
-  "customers.calendar.agenda.eventsCount": "{count} events",
+  "customers.calendar.agenda.eventsCount.few": "{count} events",
+  "customers.calendar.agenda.eventsCount.many": "{count} events",
+  "customers.calendar.agenda.eventsCount.one": "{count} event",
+  "customers.calendar.agenda.eventsCount.other": "{count} events",
   "customers.calendar.agenda.today": "Today",
   "customers.calendar.agenda.tomorrow": "Tomorrow",
   "customers.calendar.cards.allDay": "All day",
@@ -230,6 +232,7 @@
   "customers.calendar.editor.error": "Failed to save event",
   "customers.calendar.editor.location": "Location",
   "customers.calendar.editor.locationPlaceholder": "Add a location or link…",
+  "customers.calendar.editor.multiDayHint": "Multi-day event · {count} days",
   "customers.calendar.editor.noResults": "No results",
   "customers.calendar.editor.participants": "Participants",
   "customers.calendar.editor.phoneLink": "Phone / link",
@@ -334,6 +337,7 @@
   "customers.calendar.settings.eventCategories": "Event Categories",
   "customers.calendar.settings.eventCategoriesHint": "Your own grouping labels (e.g. Team Meeting, Sales Call). Offered when creating an event.",
   "customers.calendar.settings.max": "(max. {count})",
+  "customers.calendar.settings.removeTag": "Remove {tag}",
   "customers.calendar.settings.save": "Save Changes",
   "customers.calendar.settings.saved": "Calendar settings saved",
   "customers.calendar.settings.showCrmActivities": "Show CRM activities on calendar",