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

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

@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from 'react'
+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 type { ConflictScope } from '../../../lib/calendar/preferences'
+import { mapInteractionToCalendarItem } from '../../../lib/calendar/mapItem'
+import { expandOccurrences } from '../../../lib/calendar/recurrence'
+import { getFetchWindow } from '../../../lib/calendar/range'
+import type { CalendarItem } from '../types'
+import { fetchInteractionWindow } from '../useCalendarItems'
+import { fetchDealById, fetchRelatedEntityById, findStaffMemberName } from './lookups'
+
+// Edit-mode prefill stores ids only (parseItemToFormState is pure); resolve the
+// human labels for the related entity, the deal chip and the task assignee.
+export function useEditorLabelResolution(
+  open: boolean,
+  form: EditorFormState,
+  update: (patch: Partial<EditorFormState>) => void,
+): void {
+  React.useEffect(() => {
+    if (!open) return
+    const controller = new AbortController()
+    let cancelled = false
+    async function resolveLabels() {
+      if (form.relatedTo && form.relatedTo.kind === 'unknown') {
+        const resolved = await fetchRelatedEntityById(form.relatedTo.id, controller.signal)
+        if (!cancelled && resolved) update({ relatedTo: { id: resolved.id, kind: resolved.kind, label: resolved.label } })
+      }
+      if (form.dealId && !form.dealLabel) {
+        const deal = await fetchDealById(form.dealId, controller.signal)
+        if (!cancelled && deal) update({ dealLabel: deal.label })
+      }
+      if (form.assigneeUserId && !form.assigneeName) {
+        const name = await findStaffMemberName(form.assigneeUserId, controller.signal)
+        if (!cancelled && name) update({ assigneeName: name })
+      }
+    }
+    resolveLabels().catch(() => {
+      if (cancelled || controller.signal.aborted || !form.relatedTo || form.relatedTo.kind !== 'unknown' || form.relatedTo.label) {
+        return
+      }
+      update({ relatedTo: { ...form.relatedTo, label: form.relatedTo.id } })
+    })
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+  }, [open, form.relatedTo, form.dealId, form.dealLabel, form.assigneeUserId, form.assigneeName, update])
+}
+
+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
+// 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.
+export function useConflictProbe(
+  open: boolean,
+  form: EditorFormState,
+  config: EditorKindConfig,
+  excludeId: string | null,
+  draftOwnerUserId: string | null,
+  scope: ConflictScope,
+  currentUserId: string | null,
+): string | null {
+  const t = useT()
+  const [conflict, setConflict] = React.useState<string | null>(null)
+  const participantsKey = form.participants.map((participant) => participant.userId).join(',')
+  React.useEffect(() => {
+    if (!open || !form.date) {
+      setConflict(null)
+      return
+    }
+    // Resolve the draft's [start, end] span exactly as the grid will after save:
+    // all-day spans startOfDay..endOfDay (matching mapInteractionToCalendarItem),
+    // timed events use the start + computed duration (multi-day endDate included).
+    const isAllDay = config.hasAllDay && form.allDay
+    let start: Date
+    let end: Date
+    if (isAllDay) {
+      const dayDate = new Date(`${form.date}T00:00:00`)
+      if (Number.isNaN(dayDate.getTime())) {
+        setConflict(null)
+        return
+      }
+      start = startOfDay(dayDate)
+      end = endOfDay(dayDate)
+    } else {
+      if (!form.startTime) {
+        setConflict(null)
+        return
+      }
+      start = new Date(`${form.date}T${form.startTime}:00`)
+      if (Number.isNaN(start.getTime())) {
+        setConflict(null)
+        return
+      }
+      const durationMinutes = config.hasEnd ? computeDurationMinutes(form) ?? 30 : 30
+      end = new Date(start.getTime() + durationMinutes * 60_000)
+    }
+    // The same padded window + recurrence expansion the grid uses, so the probe
+    // sees the exact candidate set behind the grid's conflict badges/rings. The
+    // window pads ±1 day around the FULL draft span so multi-day drafts still
+    // catch neighbours near their end, not just their start day.
+    const dayStart = startOfDay(start)
+    dayStart.setDate(dayStart.getDate() - 1)
+    const dayEnd = endOfDay(end)
+    dayEnd.setDate(dayEnd.getDate() + 1)
+    const fetchWindow = getFetchWindow({ from: dayStart, to: dayEnd })
+    const controller = new AbortController()
+    let active = true
+    const timer = setTimeout(async () => {
+      try {
+        const { payloads } = await fetchInteractionWindow(fetchWindow, controller.signal)
+        if (!active) return
+        const others: CalendarItem[] = []
+        for (const payload of payloads) {
+          const item = mapInteractionToCalendarItem(payload, {})
+          if (!item) continue
+          others.push(...expandOccurrences(item, fetchWindow))
+        }
+        const conflictItems = findEditorConflictItems(
+          {
+            start,
+            end,
+            ownerUserId: draftOwnerUserId,
+            participants: form.participants.map((participant) => ({ userId: participant.userId, name: participant.name })),
+            status: form.status,
+          },
+          others,
+          excludeId,
+          { scope, currentUserId },
+        )
+        if (!active) return
+        if (conflictItems.length === 0) {
+          setConflict(null)
+          return
+        }
+        const summary = conflictItems
+          .map((item) => `${formatClock(item.start)}–${formatClock(item.end)}: ${item.title || t('customers.calendar.grid.untitled', 'Untitled')}`)
+          .join(', ')
+        setConflict(summary ? t('customers.calendar.editor.conflictWarning', 'Overlaps with: {items}', { items: summary }) : null)
+      } catch {
+        if (active) setConflict(null)
+      }
+    }, 500)
+    return () => {
+      active = false
+      clearTimeout(timer)
+      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
+  return conflict
+}

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

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from 'react'
+import { ChevronDown, Plus } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+
+export const CONTROL_BORDER = 'border border-input'
+export const CONTROL_TEXT = 'text-sm text-foreground placeholder:text-muted-foreground'
+export const LABEL_CLASS = 'text-xs font-medium text-muted-foreground'
+export const DROPDOWN_PANEL_CLASS =
+  'absolute z-50 mt-1 max-h-56 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md'
+
+export function Field({ label, children, error }: { label: string; children: React.ReactNode; error?: string | null }) {
+  return (
+    <div className="flex w-full flex-col gap-1.5">
+      <span className={LABEL_CLASS}>{label}</span>
+      {children}
+      {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
+    </div>
+  )
+}
+
+export function UppercaseBadge({ style, className, children }: { style?: React.CSSProperties; className?: string; children: React.ReactNode }) {
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center rounded-full bg-muted px-2 py-0.5 text-overline font-medium uppercase text-muted-foreground',
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </span>
+  )
+}
+
+// Mockup tint colors are illustrative; runtime pills derive from the
+// dictionary entry color using the appearanceColor hex-alpha tint technique
+// (see EventBlock.softTintStyle) with a darkened text shade of the same hue.
+export function categoryPillStyle(color: string | null | undefined): React.CSSProperties {
+  if (typeof color === 'string' && /^#[0-9a-fA-F]{6}$/.test(color)) {
+    return { backgroundColor: `${color}59`, color: `color-mix(in srgb, ${color} 55%, black)` }
+  }
+  if (typeof color === 'string' && color.length > 0) {
+    return {
+      backgroundColor: `color-mix(in srgb, ${color} 35%, white)`,
+      color: `color-mix(in srgb, ${color} 55%, black)`,
+    }
+  }
+  return {}
+}
+
+export function AllDayToggle({ checked, onCheckedChange, label }: { checked: boolean; onCheckedChange(next: boolean): void; label: string }) {
+  return (
+    <Switch
+      checked={checked}
+      aria-label={label}
+      onCheckedChange={onCheckedChange}
+      className="h-6 w-10"
+    />
+  )
+}
+
+function formatDisplayDate(value: string, locale: string): string {
+  const parsed = new Date(`${value}T00:00:00`)
+  if (Number.isNaN(parsed.getTime())) return value
+  return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }).format(parsed)
+}
+
+export function DateControl({
+  value,
+  onChange,
+  ariaLabel,
+  locale,
+  className,
+}: {
+  value: string
+  onChange(next: string): void
+  ariaLabel: string
+  locale: string
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        'relative flex h-9 w-full items-center justify-between rounded-md bg-background px-3',
+        CONTROL_BORDER,
+        className,
+      )}
+    >
+      <span className="truncate text-sm text-foreground">{formatDisplayDate(value, locale)}</span>
+      <span aria-hidden className="h-px w-2 shrink-0" />
+      <ChevronDown aria-hidden className="size-4 shrink-0 opacity-60" />
+      <Input
+        type="date"
+        value={value}
+        onChange={(event) => { if (event.target.value) onChange(event.target.value) }}
+        aria-label={ariaLabel}
+        className="absolute inset-0 h-full w-full cursor-pointer border-0 bg-transparent p-0 opacity-0 shadow-none hover:bg-transparent"
+        inputClassName="h-full cursor-pointer"
+      />
+    </div>
+  )
+}
+
+export function TimeControl({ value, onChange, ariaLabel }: { value: string; onChange(next: string): void; ariaLabel: string }) {
+  return (
+    <Input
+      type="time"
+      value={value}
+      onChange={(event) => { if (event.target.value) onChange(event.target.value) }}
+      aria-label={ariaLabel}
+      className="h-9 w-32 shrink-0"
+    />
+  )
+}
+
+export function PersonChip({
+  name,
+  badge,
+  compact,
+  onRemove,
+  removeLabel,
+}: {
+  name: string
+  badge?: React.ReactNode
+  compact?: boolean
+  onRemove?: () => void
+  removeLabel?: string
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted pl-1 pr-2',
+        compact ? 'py-0.5' : 'py-1',
+      )}
+    >
+      <Avatar size="xs" label={name} />
+      <span className="max-w-40 truncate text-xs font-medium text-foreground">{name}</span>
+      {badge}
+      {onRemove ? (
+        <IconButton
+          variant="ghost"
+          size="xs"
+          onClick={(event) => { event.stopPropagation(); onRemove() }}
+          aria-label={removeLabel}
+          className="size-5 shrink-0"
+        >
+          <Plus aria-hidden className="size-3.5 rotate-45 opacity-50" />
+        </IconButton>
+      ) : null}
+    </span>
+  )
+}

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

@@ -0,0 +1,160 @@
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { fetchAssignableStaffMembers } from '../../detail/assignableStaff'
+
+export type RelatedEntityKind = 'person' | 'company'
+
+export type RelatedEntityOption = {
+  id: string
+  kind: RelatedEntityKind
+  label: string
+  subtitle: string | null
+}
+
+export type DealOption = {
+  id: string
+  label: string
+}
+
+export type PersonOption = {
+  userId: string
+  name: string
+  email: string | null
+  isCustomer: boolean
+}
+
+function readNonEmptyString(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed.length > 0 ? trimmed : null
+}
+
+function extractRelatedEntityOption(item: Record<string, unknown>, kind: RelatedEntityKind): RelatedEntityOption | null {
+  const id = typeof item.id === 'string' ? item.id : null
+  if (!id) return null
+  const displayName = readNonEmptyString(item.displayName) ?? readNonEmptyString(item.display_name)
+  const detail = kind === 'person'
+    ? readNonEmptyString(item.primaryEmail) ?? readNonEmptyString(item.primary_email)
+    : readNonEmptyString(item.domain)
+      ?? readNonEmptyString(item.websiteUrl)
+      ?? readNonEmptyString(item.website_url)
+  const label = displayName ?? detail ?? id
+  return { id, kind, label, subtitle: detail && detail !== label ? detail : null }
+}
+
+// Same lookup source as the deal-association pattern in DealForm
+// (useDealAssociationLookups): the people/companies CRUD list APIs with
+// `search` + name sorting, merged into a single related-to picker.
+export async function searchRelatedEntities(
+  kind: RelatedEntityKind,
+  query: string,
+  signal: AbortSignal,
+): Promise<RelatedEntityOption[]> {
+  const params = new URLSearchParams({ page: '1', pageSize: '20', sortField: 'name', sortDir: 'asc' })
+  if (query.length) params.set('search', query)
+  const endpoint = kind === 'person'
+    ? `/api/customers/people?${params.toString()}`
+    : `/api/customers/companies?${params.toString()}`
+  const data = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(endpoint, { signal })
+  const items = Array.isArray(data?.items) ? data.items : []
+  return items
+    .map((item) => (item && typeof item === 'object' ? extractRelatedEntityOption(item, kind) : null))
+    .filter((option): option is RelatedEntityOption => option !== null)
+}
+
+async function fetchRelatedEntityOfKind(
+  kind: RelatedEntityKind,
+  entityId: string,
+  signal: AbortSignal,
+): Promise<RelatedEntityOption | null> {
+  const params = new URLSearchParams({ page: '1', pageSize: '1', ids: entityId })
+  const endpoint = kind === 'person'
+    ? `/api/customers/people?${params.toString()}`
+    : `/api/customers/companies?${params.toString()}`
+  try {
+    const data = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(endpoint, { signal })
+    const item = Array.isArray(data?.items) ? data.items[0] : null
+    return item && typeof item === 'object' ? extractRelatedEntityOption(item, kind) : null
+  } catch {
+    return null
+  }
+}
+
+export async function fetchRelatedEntityById(entityId: string, signal: AbortSignal): Promise<RelatedEntityOption | null> {
+  const [person, company] = await Promise.all([
+    fetchRelatedEntityOfKind('person', entityId, signal),
+    fetchRelatedEntityOfKind('company', entityId, signal),
+  ])
+  return person ?? company
+}
+
+function extractDealOption(item: Record<string, unknown>): DealOption | null {
+  const id = typeof item.id === 'string' ? item.id : null
+  if (!id) return null
+  const label = readNonEmptyString(item.title) ?? id
+  return { id, label }
+}
+
+export async function fetchDealsForEntity(
+  entity: { id: string; kind: RelatedEntityKind },
+  signal: AbortSignal,
+): Promise<DealOption[]> {
+  const params = new URLSearchParams({ page: '1', pageSize: '20' })
+  params.set(entity.kind === 'person' ? 'personId' : 'companyId', entity.id)
+  const data = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
+    `/api/customers/deals?${params.toString()}`,
+    { signal },
+  )
+  const items = Array.isArray(data?.items) ? data.items : []
+  return items
+    .map((item) => (item && typeof item === 'object' ? extractDealOption(item) : null))
+    .filter((option): option is DealOption => option !== null)
+}
+
+export async function fetchDealById(dealId: string, signal: AbortSignal): Promise<DealOption | null> {
+  try {
+    const params = new URLSearchParams({ page: '1', pageSize: '1', ids: dealId })
+    const data = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
+      `/api/customers/deals?${params.toString()}`,
+      { signal },
+    )
+    const item = Array.isArray(data?.items) ? data.items[0] : null
+    return item && typeof item === 'object' ? extractDealOption(item) : null
+  } catch {
+    return null
+  }
+}
+
+export async function searchPeopleOptions(
+  query: string,
+  options: { includeCustomers: boolean; signal: AbortSignal },
+): Promise<PersonOption[]> {
+  const [staff, customers] = await Promise.all([
+    fetchAssignableStaffMembers(query, { pageSize: 10, signal: options.signal }),
+    options.includeCustomers
+      ? searchRelatedEntities('person', query, options.signal)
+      : Promise.resolve<RelatedEntityOption[]>([]),
+  ])
+  const staffOptions: PersonOption[] = staff.map((member) => ({
+    userId: member.userId,
+    name: member.displayName,
+    email: member.email,
+    isCustomer: false,
+  }))
+  const customerOptions: PersonOption[] = customers.map((person) => ({
+    userId: person.id,
+    name: person.label,
+    email: person.subtitle,
+    isCustomer: true,
+  }))
+  return [...staffOptions, ...customerOptions]
+}
+
+export async function findStaffMemberName(userId: string, signal: AbortSignal): Promise<string | null> {
+  try {
+    const members = await fetchAssignableStaffMembers('', { pageSize: 100, signal })
+    const match = members.find((member) => member.userId === userId)
+    return match ? match.displayName : null
+  } catch {
+    return null
+  }
+}

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

@@ -0,0 +1,163 @@
+import { z } from 'zod'
+
+export type CalendarView = 'day' | 'week' | 'month' | 'agenda'
+
+export type CalendarCategory = 'meeting' | 'event' | 'task' | 'other'
+
+export type CalendarItemStatus = 'planned' | 'done' | 'canceled'
+
+export type CalendarPlatform = 'zoom' | 'meet' | 'slack' | 'teams'
+
+export type CalendarLocationKind = 'url' | 'venue' | 'platform'
+
+export type CalendarTab = 'all' | 'meetings' | 'events'
+
+export type CalendarRangePreset = 'thisWeek' | 'next7' | 'thisMonth' | 'next30'
+
+export type CalendarRange = { from: Date; to: Date }
+
+const calendarParticipantSchema = z
+  .object({
+    userId: z.string(),
+    name: z.string().optional(),
+    email: z.string().optional(),
+  })
+  .passthrough()
+
+export const calendarInteractionPayloadSchema = z
+  .object({
+    id: z.string(),
+    interactionType: z.string(),
+    title: z.string().nullable().optional(),
+    status: z.string(),
+    scheduledAt: z.string().nullable().optional(),
+    occurredAt: z.string().nullable().optional(),
+    durationMinutes: z.number().nullable().optional(),
+    allDay: z.boolean().nullable().optional(),
+    location: z.string().nullable().optional(),
+    participants: z.array(calendarParticipantSchema).nullable().optional(),
+    recurrenceRule: z.string().nullable().optional(),
+    recurrenceEnd: z.string().nullable().optional(),
+    appearanceIcon: z.string().nullable().optional(),
+    appearanceColor: z.string().nullable().optional(),
+    ownerUserId: z.string().nullable().optional(),
+    entityId: z.string().nullable().optional(),
+    dealId: z.string().nullable().optional(),
+    updatedAt: z.string().nullable().optional(),
+  })
+  .passthrough()
+
+export type CalendarInteractionPayload = z.infer<typeof calendarInteractionPayloadSchema>
+
+export type CalendarParticipant = { userId: string; name?: string; email?: string }
+
+export interface CalendarItem {
+  id: string
+  title: string
+  interactionType: string
+  category: CalendarCategory
+  status: CalendarItemStatus
+  start: Date
+  end: Date
+  allDay: boolean
+  location: string | null
+  platform: CalendarPlatform | null
+  locationKind: CalendarLocationKind | null
+  participants: CalendarParticipant[]
+  ownerUserId: string | null
+  entityId: string | null
+  dealId: string | null
+  color: string | null
+  isRecurringOccurrence: boolean
+  updatedAt: string | null
+  raw: CalendarInteractionPayload
+}
+
+export interface CalendarFiltersValue {
+  types: string[]
+  status: string | null
+  ownerUserId: string | null
+}
+
+export interface TimeGridProps {
+  days: 1 | 7
+  anchor: Date
+  items: CalendarItem[]
+  conflictIds: Set<string>
+  showWeekends: boolean
+  showConflicts: boolean
+  aiSummaries: boolean
+  highlightItemId?: string | null
+  onItemClick(item: CalendarItem): void
+  onJoin(item: CalendarItem): void
+  onNavigate(deltaDays: number): void
+  onCreate?: () => void
+  onCreateRange?(start: Date, end: Date): void
+}
+
+export interface MonthGridProps {
+  anchor: Date
+  items: CalendarItem[]
+  onItemClick(item: CalendarItem): void
+  onDayOpen(date: Date): void
+}
+
+export interface AgendaListProps {
+  anchor: Date
+  horizonDays: number
+  items: CalendarItem[]
+  typeLabels?: Record<string, string>
+  onItemClick(item: CalendarItem): void
+}
+
+export interface UpcomingCard {
+  item: CalendarItem
+  kind: 'today' | 'conflicted' | 'cancelled' | 'future'
+  conflictCount: number
+}
+
+export interface UpcomingCardsProps {
+  cards: UpcomingCard[]
+  canManage?: boolean
+  onJoin(item: CalendarItem): void
+  onSeeConflict(item: CalendarItem): void
+  onOpen(item: CalendarItem): void
+  onEdit(item: CalendarItem): void
+  onCancel(item: CalendarItem): void
+}
+
+export interface CalendarHeaderProps {
+  view: CalendarView
+  anchor: Date
+  onNewEvent?: () => void
+}
+
+export interface CalendarToolbarProps {
+  view: CalendarView
+  anchor: Date
+  range: CalendarRange
+  preset: CalendarRangePreset | null
+  search: string
+  filters: CalendarFiltersValue
+  typeOptions: Array<{ value: string; label: string }>
+  ownerOptions: Array<{ value: string; label: string }>
+  onToday(): void
+  onPresetChange(preset: CalendarRangePreset): void
+  onAnchorChange(date: Date): void
+  onSearchChange(value: string): void
+  onFiltersChange(value: CalendarFiltersValue): void
+  onOpenSettings(): void
+}
+
+export interface CalendarTabsProps {
+  tab: CalendarTab
+  counts: { all: number; meetings: number; events: number }
+  view: CalendarView
+  onTabChange(tab: CalendarTab): void
+  onViewChange(view: CalendarView): void
+}
+
+export interface CalendarFooterProps {
+  timezoneLabel: string
+  onOpenShortcuts?: () => void
+}