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

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

@@ -0,0 +1,205 @@
+"use client"
+
+import * as React from 'react'
+import { Globe, MapPin } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { CalendarItem, CalendarPlatform } from './types'
+
+const SHOW_TIME_MIN_HEIGHT_PX = 44
+const SHOW_META_MIN_HEIGHT_PX = 96
+const WRAP_TITLE_MIN_HEIGHT_PX = 128
+const MAX_VISIBLE_AVATARS = 3
+
+const PLATFORM_LABELS: Record<CalendarPlatform, { key: string; fallback: string }> = {
+  zoom: { key: 'customers.calendar.platform.zoom', fallback: 'Zoom' },
+  meet: { key: 'customers.calendar.platform.meet', fallback: 'Meet' },
+  slack: { key: 'customers.calendar.platform.slack', fallback: 'Slack' },
+  teams: { key: 'customers.calendar.platform.teams', fallback: 'Teams' },
+}
+
+export type EventTone = {
+  surfaceClassName: string
+  titleClassName: string
+  subClassName: string
+  style?: React.CSSProperties
+}
+
+function softTintStyle(color: string): React.CSSProperties {
+  if (/^#[0-9a-fA-F]{6}$/.test(color)) return { backgroundColor: `${color}1A` }
+  return { backgroundColor: `color-mix(in srgb, ${color} 10%, transparent)` }
+}
+
+export function resolveEventTone(item: CalendarItem, nowMs: number): EventTone {
+  if (item.status === 'canceled') {
+    return {
+      surfaceClassName: 'bg-muted/60',
+      titleClassName: 'text-muted-foreground line-through',
+      subClassName: 'text-muted-foreground/70',
+    }
+  }
+  if (item.status === 'done' || item.end.getTime() < nowMs) {
+    return {
+      surfaceClassName: 'bg-muted',
+      titleClassName: 'text-muted-foreground',
+      subClassName: 'text-muted-foreground',
+    }
+  }
+  if (item.color) {
+    return {
+      surfaceClassName: '',
+      titleClassName: 'text-foreground',
+      subClassName: 'text-muted-foreground',
+      style: softTintStyle(item.color),
+    }
+  }
+  return {
+    surfaceClassName: 'bg-muted/60',
+    titleClassName: 'text-foreground',
+    subClassName: 'text-muted-foreground',
+  }
+}
+
+export function formatTimeRange(locale: string, start: Date, end: Date): string {
+  const formatter = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' })
+  try {
+    return formatter.formatRange(start, end)
+  } catch {
+    return `${formatter.format(start)} - ${formatter.format(end)}`
+  }
+}
+
+function participantLabel(participant: CalendarItem['participants'][number]): string {
+  return participant.name ?? participant.email ?? '?'
+}
+
+type LocationMetaProps = {
+  item: CalendarItem
+  subClassName: string
+  accentColor: string | null
+}
+
+function LocationMeta({ item, subClassName, accentColor }: LocationMetaProps) {
+  const t = useT()
+  if (!item.location || !item.locationKind) return null
+  const iconStyle = accentColor ? { color: accentColor } : undefined
+  if (item.locationKind === 'platform' && item.platform) {
+    const platform = PLATFORM_LABELS[item.platform]
+    return (
+      <span className={cn('truncate text-xs', subClassName)}>
+        {t('customers.calendar.grid.onPlatform', 'on {platform}', { platform: t(platform.key, platform.fallback) })}
+      </span>
+    )
+  }
+  if (item.locationKind === 'url') {
+    return (
+      <>
+        <Globe className={cn('size-4 shrink-0', !accentColor && subClassName)} style={iconStyle} aria-hidden />
+        <span className="truncate text-xs text-foreground">{item.location}</span>
+      </>
+    )
+  }
+  return (
+    <>
+      <MapPin className={cn('size-4 shrink-0', !accentColor && subClassName)} style={iconStyle} aria-hidden />
+      <span className="truncate text-xs text-foreground">
+        {t('customers.calendar.grid.venue', 'Venue: {name}', { name: item.location })}
+      </span>
+    </>
+  )
+}
+
+export type EventBlockProps = {
+  item: CalendarItem
+  top: number
+  height: number
+  insetInlineStart: string
+  width: string
+  conflicted: boolean
+  highlighted: boolean
+  selected?: boolean
+  nowMs: number
+} & Omit<React.ComponentProps<typeof Button>, 'style' | 'children'>
+
+export const EventBlock = React.forwardRef<HTMLButtonElement, EventBlockProps>(function EventBlock(
+  {
+    item,
+    top,
+    height,
+    insetInlineStart,
+    width,
+    conflicted,
+    highlighted,
+    selected,
+    nowMs,
+    className,
+    ...buttonProps
+  },
+  ref,
+) {
+  const t = useT()
+  const locale = useLocale()
+  const tone = resolveEventTone(item, nowMs)
+  const title = item.title || t('customers.calendar.grid.untitled', 'Untitled')
+  const timeRange = formatTimeRange(locale, item.start, item.end)
+  const showTime = height >= SHOW_TIME_MIN_HEIGHT_PX
+  const wrapTitle = height >= WRAP_TITLE_MIN_HEIGHT_PX
+  const hasMetaContent = item.participants.length > 0 || (item.location !== null && item.locationKind !== null)
+  const showMeta = height >= SHOW_META_MIN_HEIGHT_PX && hasMetaContent
+  const visibleParticipants = item.participants.slice(0, MAX_VISIBLE_AVATARS)
+  const overflowCount = item.participants.length - visibleParticipants.length
+
+  return (
+    <Button
+      ref={ref}
+      type="button"
+      variant="ghost"
+      aria-label={`${title}, ${timeRange}`}
+      className={cn(
+        'pointer-events-auto absolute h-auto flex-col items-start justify-start gap-1 whitespace-normal overflow-hidden rounded-md px-1.5 text-start outline-none hover:bg-muted/70 sm:px-3',
+        height >= SHOW_TIME_MIN_HEIGHT_PX ? 'py-1 sm:py-2' : 'py-0.5 sm:py-1',
+        tone.surfaceClassName,
+        conflicted && 'ring-1 ring-status-warning-icon',
+        selected && 'shadow-md ring-2 ring-foreground',
+        highlighted && 'motion-safe:animate-pulse',
+        conflicted || highlighted || selected ? 'z-30' : 'z-10',
+        'focus-visible:z-30 focus-visible:ring-2 focus-visible:ring-ring',
+        className,
+      )}
+      style={{ top, height, insetInlineStart, width, ...tone.style }}
+      {...buttonProps}
+    >
+      <span className={cn('w-full text-xs font-medium leading-4', wrapTitle ? 'line-clamp-2' : 'truncate', tone.titleClassName)}>
+        {title}
+      </span>
+      {showTime ? (
+        <span className={cn('w-full truncate text-overline uppercase tracking-wide', tone.subClassName)}>
+          {timeRange}
+        </span>
+      ) : null}
+      {showMeta ? (
+        <span className="mt-auto flex w-full min-w-0 items-center gap-1.5">
+          {visibleParticipants.length > 0 ? (
+            <>
+              <AvatarStack size="xs" max={MAX_VISIBLE_AVATARS} className="shrink-0 gap-px [&>*:not(:first-child)]:-ml-1">
+                {visibleParticipants.map((participant) => (
+                  <Avatar key={participant.userId} size="xs" label={participantLabel(participant)} />
+                ))}
+              </AvatarStack>
+              {overflowCount > 0 ? (
+                <span className={cn('shrink-0 text-xs', tone.subClassName)}>+{overflowCount}</span>
+              ) : null}
+            </>
+          ) : null}
+          <span className="ms-auto flex min-w-0 items-center gap-1.5">
+            <LocationMeta item={item} subClassName={tone.subClassName} accentColor={item.color} />
+          </span>
+        </span>
+      ) : null}
+    </Button>
+  )
+})
+
+EventBlock.displayName = 'EventBlock'

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

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from 'react'
+import { Sparkles } from 'lucide-react'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { formatTimeRange } from './EventBlock'
+import type { CalendarItem, CalendarPlatform } from './types'
+
+const PLATFORM_FULL_LABELS: Record<CalendarPlatform, { key: string; fallback: string }> = {
+  zoom: { key: 'customers.calendar.platformFull.zoom', fallback: 'Zoom' },
+  meet: { key: 'customers.calendar.platformFull.meet', fallback: 'Google Meet' },
+  slack: { key: 'customers.calendar.platformFull.slack', fallback: 'Slack' },
+  teams: { key: 'customers.calendar.platformFull.teams', fallback: 'Microsoft Teams' },
+}
+
+export type EventPeekPopoverProps = {
+  item: CalendarItem
+  open: boolean
+  joinUrl: string | null
+  aiSummaries: boolean
+  onOpenChange(open: boolean): void
+  onJoin(item: CalendarItem): void
+  onEdit(item: CalendarItem): void
+  children: React.ReactNode
+}
+
+export function EventPeekPopover({
+  item,
+  open,
+  joinUrl,
+  aiSummaries,
+  onOpenChange,
+  onJoin,
+  onEdit,
+  children,
+}: EventPeekPopoverProps) {
+  const t = useT()
+  const locale = useLocale()
+  const title = item.title || t('customers.calendar.grid.untitled', 'Untitled')
+  const dateLabel = React.useMemo(
+    () => new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric' }).format(item.start),
+    [locale, item.start],
+  )
+  const timeRange = item.allDay
+    ? t('customers.calendar.grid.allDay', 'All day')
+    : formatTimeRange(locale, item.start, item.end)
+
+  const attendeeCount = item.participants.length
+  const attendeesLabel =
+    attendeeCount === 1
+      ? t('customers.calendar.peek.attendee', '1 attendee')
+      : t('customers.calendar.peek.attendees', '{count} attendees', { count: attendeeCount })
+  const platformLabel =
+    item.locationKind === 'platform' && item.platform
+      ? t(PLATFORM_FULL_LABELS[item.platform].key, PLATFORM_FULL_LABELS[item.platform].fallback)
+      : null
+  const metaParts = [platformLabel, attendeeCount > 0 ? attendeesLabel : null].filter(
+    (part): part is string => Boolean(part),
+  )
+  const showSummary = aiSummaries && metaParts.length > 0
+  const showJoin = aiSummaries && Boolean(joinUrl)
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent align="start" side="right" sideOffset={8} className="w-56 p-3">
+        <div className="flex flex-col gap-2">
+          <p className="text-sm font-semibold leading-5 text-foreground">{title}</p>
+          <p className="text-xs leading-4 text-muted-foreground">{`${dateLabel} · ${timeRange}`}</p>
+          {showSummary ? (
+            <p className="flex items-center gap-1 text-xs leading-4 text-muted-foreground">
+              <Sparkles aria-hidden className="size-3.5 shrink-0" />
+              <span className="truncate">{metaParts.join(' · ')}</span>
+            </p>
+          ) : null}
+          <div className="flex items-center gap-2 pt-1">
+            {showJoin ? (
+              <Button type="button" size="sm" onClick={() => onJoin(item)}>
+                {t('customers.calendar.peek.join', 'Join')}
+              </Button>
+            ) : null}
+            <Button
+              type="button"
+              size="sm"
+              variant="secondary"
+              onClick={() => {
+                onOpenChange(false)
+                onEdit(item)
+              }}
+            >
+              {t('customers.calendar.peek.edit', 'Edit')}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from 'react'
+import { addDays } from 'date-fns/addDays'
+import { format } from 'date-fns/format'
+import { isSameMonth } from 'date-fns/isSameMonth'
+import { isToday } from 'date-fns/isToday'
+import { CalendarDays } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { getVisibleRange } from '../../lib/calendar/range'
+import type { CalendarItem, MonthGridProps } from './types'
+
+const MAX_PILLS_PER_DAY = 2
+const SOFT_TINT_ALPHA = '1A'
+
+function dayKeyOf(date: Date): string {
+  return format(date, 'yyyy-MM-dd')
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })
+}
+
+function fullDateLabel(date: Date): string {
+  return date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+function isWeekend(date: Date): boolean {
+  const weekday = date.getDay()
+  return weekday === 0 || weekday === 6
+}
+
+function buildWeeks(anchor: Date): Date[][] {
+  const range = getVisibleRange('month', anchor, 0)
+  const weeks: Date[][] = []
+  let cursor = range.from
+  while (cursor.getTime() <= range.to.getTime()) {
+    const week: Date[] = []
+    for (let dayIndex = 0; dayIndex < 7; dayIndex += 1) {
+      week.push(cursor)
+      cursor = addDays(cursor, 1)
+    }
+    weeks.push(week)
+  }
+  return weeks
+}
+
+function groupItemsByDay(items: CalendarItem[]): Map<string, CalendarItem[]> {
+  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])
+  }
+  return byDay
+}
+
+function MonthPill({ item, onItemClick }: { item: CalendarItem; onItemClick: (item: CalendarItem) => void }) {
+  const canceled = item.status === 'canceled'
+  const timeLabel = item.allDay ? '' : ` · ${formatTime(item.start)} – ${formatTime(item.end)}`
+  const tintStyle = item.color
+    ? { backgroundColor: `${item.color}${SOFT_TINT_ALPHA}`, color: item.color }
+    : undefined
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      aria-label={`${item.title}${timeLabel}`}
+      onClick={(event) => {
+        event.stopPropagation()
+        onItemClick(item)
+      }}
+      className={cn(
+        'h-4 w-full min-w-0 justify-center gap-0 rounded-full p-0 pr-2',
+        !item.color && 'bg-muted text-muted-foreground',
+        canceled && 'opacity-60',
+      )}
+      style={tintStyle}
+    >
+      <span aria-hidden="true" className="flex size-4 shrink-0 items-center justify-center">
+        <span
+          className={cn('size-1.5 rounded-full', !item.color && 'bg-muted-foreground')}
+          style={item.color ? { backgroundColor: item.color } : undefined}
+        />
+      </span>
+      <span
+        className={cn(
+          'min-w-0 truncate text-overline font-medium uppercase tracking-wide',
+          canceled && 'line-through',
+        )}
+      >
+        {item.title}
+      </span>
+    </Button>
+  )
+}
+
+function MonthDayCell({
+  day,
+  anchor,
+  items,
+  onItemClick,
+  onDayOpen,
+}: {
+  day: Date
+  anchor: Date
+  items: CalendarItem[]
+  onItemClick: (item: CalendarItem) => void
+  onDayOpen: (date: Date) => void
+}) {
+  const t = useT()
+  const inMonth = isSameMonth(day, anchor)
+  const today = isToday(day)
+  const visibleItems = items.slice(0, MAX_PILLS_PER_DAY)
+  const hiddenCount = items.length - visibleItems.length
+  const dayLabel = fullDateLabel(day)
+  return (
+    <div
+      className={cn(
+        'relative flex h-full min-w-0 flex-1 flex-col items-start gap-1 overflow-hidden border-r border-border p-2 text-left last:border-r-0',
+        isWeekend(day) ? 'bg-muted/40' : 'bg-background',
+      )}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        aria-label={dayLabel}
+        onClick={() => onDayOpen(day)}
+        className="absolute inset-0 z-0 h-full w-full rounded-none p-0 hover:bg-muted/50"
+      >
+        <span className="sr-only">{dayLabel}</span>
+      </Button>
+      {today ? (
+        <span className="pointer-events-none relative z-10 flex items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-xs font-semibold text-primary-foreground">
+          {day.getDate()}
+        </span>
+      ) : (
+        <span className={cn('pointer-events-none relative z-10 text-xs font-medium', inMonth ? 'text-foreground' : 'text-muted-foreground')}>
+          {day.getDate()}
+        </span>
+      )}
+      <span className="relative z-20 hidden w-full flex-col gap-1 sm:flex">
+        {visibleItems.map((item) => (
+          <MonthPill key={item.id} item={item} onItemClick={onItemClick} />
+        ))}
+        {hiddenCount > 0 ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-auto self-start p-0 text-overline font-medium text-muted-foreground hover:bg-transparent hover:underline"
+            onClick={(event) => {
+              event.stopPropagation()
+              onDayOpen(day)
+            }}
+          >
+            {t('customers.calendar.grid.more', '+{count} more', { count: hiddenCount })}
+          </Button>
+        ) : null}
+      </span>
+      {items.length > 0 ? (
+        <span aria-hidden="true" className="pointer-events-none relative z-10 flex w-full flex-wrap items-center gap-0.5 sm:hidden">
+          {items.slice(0, 4).map((item) => (
+            <span
+              key={item.id}
+              className={cn('size-1.5 rounded-full', !item.color && 'bg-muted-foreground')}
+              style={item.color ? { backgroundColor: item.color } : undefined}
+            />
+          ))}
+          {items.length > 4 ? (
+            <span className="text-overline font-medium leading-none text-muted-foreground">
+              +{items.length - 4}
+            </span>
+          ) : null}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export function MonthGrid({ anchor, items, onItemClick, onDayOpen }: MonthGridProps) {
+  const t = useT()
+  const weeks = React.useMemo(() => buildWeeks(anchor), [anchor])
+  const itemsByDay = React.useMemo(() => groupItemsByDay(items), [items])
+  return (
+    <div className="relative flex h-full w-full flex-col overflow-hidden border border-border bg-background">
+      <div className="flex h-9 w-full shrink-0 border-b border-border">
+        {weeks[0]?.map((day) => {
+          const label = day.toLocaleDateString(undefined, { weekday: 'short' }).toUpperCase()
+          return (
+            <div
+              key={dayKeyOf(day)}
+              className="flex min-w-0 flex-1 items-center justify-center border-r border-border last:border-r-0 sm:justify-start sm:pl-2.5"
+            >
+              <span className="truncate text-overline font-medium uppercase tracking-widest text-muted-foreground">
+                <span className="sm:hidden">{label.charAt(0)}</span>
+                <span className="hidden sm:inline">{label}</span>
+              </span>
+            </div>
+          )
+        })}
+      </div>
+      {weeks.map((week) => (
+        <div
+          key={dayKeyOf(week[0])}
+          className="flex w-full flex-1 border-b border-border last:border-b-0 min-h-14 sm:min-h-[86px]"
+        >
+          {week.map((day) => (
+            <MonthDayCell
+              key={dayKeyOf(day)}
+              day={day}
+              anchor={anchor}
+              items={itemsByDay.get(dayKeyOf(day)) ?? []}
+              onItemClick={onItemClick}
+              onDayOpen={onDayOpen}
+            />
+          ))}
+        </div>
+      ))}
+      {items.length === 0 ? (
+        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center p-6">
+          <EmptyState
+            icon={<CalendarDays className="h-6 w-6" aria-hidden="true" />}
+            title={t('customers.calendar.empty.month', 'Nothing scheduled this month')}
+            className="bg-background/90"
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Kbd } from '@open-mercato/ui/primitives/kbd'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { CALENDAR_SHORTCUTS } from './CalendarFooter'
+
+export type ShortcutsDialogProps = {
+  open: boolean
+  onOpenChange(open: boolean): void
+}
+
+export function ShortcutsDialog({ open, onOpenChange }: ShortcutsDialogProps) {
+  const t = useT()
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        size="sm"
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault()
+            onOpenChange(false)
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>
+            {t('customers.calendar.shortcuts.title', 'Keyboard shortcuts')}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              'customers.calendar.shortcuts.description',
+              'Navigate the calendar faster with these keys.',
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <ul className="flex flex-col gap-2">
+          {CALENDAR_SHORTCUTS.map((shortcut) => (
+            <li key={shortcut.key} className="flex items-center justify-between gap-3">
+              <span className="text-sm text-muted-foreground">
+                {t(shortcut.labelKey, shortcut.fallback)}
+              </span>
+              <Kbd>{shortcut.key}</Kbd>
+            </li>
+          ))}
+        </ul>
+      </DialogContent>
+    </Dialog>
+  )
+}