@freighttech/ui 0.13.18

package/src/backend/progress/useProgressSse.ts

@@ -0,0 +1,118 @@
+"use client"
+import * as React from 'react'
+import { apiCall } from '../utils/apiCall'
+import { useAppEvent } from '../injection/useAppEvent'
+import type { ProgressJobDto, UseProgressPollResult } from './useProgressPoll'
+
+function isVisibleProgressJob(job: ProgressJobDto): boolean {
+  return job.meta?.hiddenFromTopBar !== true
+}
+
+function upsertJob(list: ProgressJobDto[], job: ProgressJobDto): ProgressJobDto[] {
+  if (!isVisibleProgressJob(job)) {
+    return list.filter((item) => item.id !== job.id)
+  }
+  const next = [job, ...list.filter((item) => item.id !== job.id)]
+  return next.sort(
+    (a, b) =>
+      new Date(b.startedAt ?? b.finishedAt ?? 0).getTime()
+      - new Date(a.startedAt ?? a.finishedAt ?? 0).getTime(),
+  )
+}
+
+export function useProgressSse(): UseProgressPollResult {
+  const [activeJobs, setActiveJobs] = React.useState<ProgressJobDto[]>([])
+  const [recentlyCompleted, setRecentlyCompleted] = React.useState<ProgressJobDto[]>([])
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const fetchJobs = React.useCallback(async () => {
+    try {
+      const result = await apiCall<{ active: ProgressJobDto[]; recentlyCompleted: ProgressJobDto[] }>(
+        '/api/progress/active',
+      )
+      if (result.ok && result.result) {
+        setActiveJobs(result.result.active.filter(isVisibleProgressJob))
+        setRecentlyCompleted(result.result.recentlyCompleted.filter(isVisibleProgressJob))
+        setError(null)
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch progress')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  const refresh = React.useCallback(() => {
+    void fetchJobs()
+  }, [fetchJobs])
+
+  React.useEffect(() => {
+    void fetchJobs()
+  }, [fetchJobs])
+
+  useAppEvent(
+    'progress.job.updated',
+    (event) => {
+      const payload = event.payload as Partial<ProgressJobDto> & { jobId?: string }
+      const jobId = payload?.jobId
+      if (!jobId) {
+        void fetchJobs()
+        return
+      }
+      setActiveJobs((prev) =>
+        upsertJob(prev, {
+          id: jobId,
+          jobType: payload.jobType ?? 'progress',
+          name: payload.name ?? payload.jobType ?? 'Progress job',
+          description: payload.description ?? null,
+          meta: (payload.meta && typeof payload.meta === 'object') ? payload.meta as Record<string, unknown> : null,
+          status: (payload.status as ProgressJobDto['status']) ?? 'running',
+          progressPercent: payload.progressPercent ?? 0,
+          processedCount: payload.processedCount ?? 0,
+          totalCount: payload.totalCount ?? null,
+          etaSeconds: payload.etaSeconds ?? null,
+          cancellable: payload.cancellable ?? false,
+          startedAt: payload.startedAt ?? null,
+          finishedAt: payload.finishedAt ?? null,
+          errorMessage: payload.errorMessage ?? null,
+        }),
+      )
+    },
+    [fetchJobs],
+  )
+
+  useAppEvent('progress.job.created', () => {
+    void fetchJobs()
+  }, [fetchJobs])
+
+  useAppEvent('progress.job.started', () => {
+    void fetchJobs()
+  }, [fetchJobs])
+
+  useAppEvent('progress.job.completed', () => {
+    void fetchJobs()
+  }, [fetchJobs])
+
+  useAppEvent('progress.job.failed', () => {
+    void fetchJobs()
+  }, [fetchJobs])
+
+  useAppEvent('progress.job.cancelled', () => {
+    void fetchJobs()
+  }, [fetchJobs])
+
+  useAppEvent('om:bridge:reconnected', () => {
+    void fetchJobs()
+  }, [fetchJobs])
+
+  React.useEffect(() => {
+    const onFocus = () => {
+      void fetchJobs()
+    }
+    window.addEventListener('focus', onFocus)
+    return () => window.removeEventListener('focus', onFocus)
+  }, [fetchJobs])
+
+  return { activeJobs, recentlyCompleted, isLoading, error, refresh }
+}

package/src/backend/schedule/ScheduleAgenda.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from 'react'
+import type { ScheduleItem, ScheduleRange, ScheduleSlot } from './types'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Badge } from '../../primitives/badge'
+import { Button } from '../../primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { expandRecurringItems } from './recurrence'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+
+function startOfDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate())
+}
+
+function endOfDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate(), 23, 59, 59, 999)
+}
+
+function eachDay(start: Date, end: Date): Date[] {
+  const days: Date[] = []
+  let cursor = startOfDay(start)
+  const last = startOfDay(end)
+  while (cursor <= last) {
+    days.push(new Date(cursor))
+    cursor = new Date(cursor.getTime() + DAY_MS)
+  }
+  return days
+}
+
+function overlapsDay(item: ScheduleItem, day: Date): boolean {
+  const dayStart = startOfDay(day)
+  const dayEnd = endOfDay(day)
+  return item.startsAt <= dayEnd && item.endsAt >= dayStart
+}
+
+function formatDayLabel(day: Date): string {
+  return day.toLocaleDateString(undefined, { weekday: 'long', month: 'short', day: 'numeric' })
+}
+
+function formatTimeRange(item: ScheduleItem, timezone?: string): string {
+  const options: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' }
+  if (timezone) options.timeZone = timezone
+  const startLabel = item.startsAt.toLocaleTimeString(undefined, options)
+  const endLabel = item.endsAt.toLocaleTimeString(undefined, options)
+  return `${startLabel}-${endLabel}`
+}
+
+function getStatusLabel(status: ScheduleItem['status'], t: (key: string, fallback?: string) => string): string | null {
+  if (!status) return null
+  if (status === 'draft') return t('schedule.item.status.draft', 'Draft')
+  if (status === 'negotiation') return t('schedule.item.status.negotiation', 'Negotiation')
+  if (status === 'confirmed') return t('schedule.item.status.confirmed', 'Confirmed')
+  if (status === 'cancelled') return t('schedule.item.status.cancelled', 'Cancelled')
+  return null
+}
+
+function getKindStyles(kind: ScheduleItem['kind']): string {
+  if (kind === 'event') return 'border-blue-500/40 bg-blue-500/10 text-blue-950'
+  if (kind === 'exception') return 'border-amber-500/40 bg-amber-500/10 text-amber-950'
+  return 'border-emerald-500/40 bg-emerald-500/10 text-emerald-950'
+}
+
+export type ScheduleAgendaProps = {
+  items: ScheduleItem[]
+  range: ScheduleRange
+  timezone?: string
+  onItemClick?: (item: ScheduleItem) => void
+  onSlotClick?: (slot: ScheduleSlot) => void
+  className?: string
+}
+
+export function ScheduleAgenda({ items, range, timezone, onItemClick, onSlotClick, className }: ScheduleAgendaProps) {
+  const t = useT()
+  const days = React.useMemo(() => eachDay(range.start, range.end), [range])
+  const expandedItems = React.useMemo(() => expandRecurringItems(items, range), [items, range])
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {days.map((day) => {
+        const dayItems = expandedItems.filter((item) => overlapsDay(item, day))
+        const slotStart = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 9, 0, 0)
+        const slotEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 10, 0, 0)
+        return (
+          <div key={day.toISOString()} className="rounded-xl border bg-card p-4">
+            <div className="flex items-center justify-between gap-2">
+              <div className="text-sm font-semibold text-foreground">{formatDayLabel(day)}</div>
+              {onSlotClick ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onSlotClick({ start: slotStart, end: slotEnd })}
+                >
+                  {t('schedule.actions.add', 'Add')}
+                </Button>
+              ) : null}
+            </div>
+            <div className="mt-3 space-y-2">
+              {dayItems.length === 0 ? (
+                <div className="rounded-lg border border-dashed p-3 text-xs text-muted-foreground">
+                  {t('schedule.emptyDay', 'No scheduled items')}
+                </div>
+              ) : (
+                dayItems.map((item) => {
+                  const statusLabel = getStatusLabel(item.status, t)
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      className={cn(
+                        'flex w-full cursor-pointer flex-col gap-2 rounded-lg border px-3 py-2 text-left text-xs transition hover:shadow-sm',
+                        getKindStyles(item.kind)
+                      )}
+                      onClick={() => onItemClick?.(item)}
+                    >
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="font-semibold">{item.title}</span>
+                        {statusLabel ? <Badge variant="secondary">{statusLabel}</Badge> : null}
+                      </div>
+                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                        <span>{formatTimeRange(item, timezone)}</span>
+                        <span className="capitalize">{item.kind}</span>
+                      </div>
+                    </button>
+                  )
+                })
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/backend/schedule/ScheduleGrid.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from 'react'
+import type { ScheduleItem, ScheduleRange, ScheduleSlot } from './types'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Badge } from '../../primitives/badge'
+import { Button } from '../../primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { expandRecurringItems } from './recurrence'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+
+function startOfDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate())
+}
+
+function endOfDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate(), 23, 59, 59, 999)
+}
+
+function eachDay(start: Date, end: Date): Date[] {
+  const days: Date[] = []
+  let cursor = startOfDay(start)
+  const last = startOfDay(end)
+  while (cursor <= last) {
+    days.push(new Date(cursor))
+    cursor = new Date(cursor.getTime() + DAY_MS)
+  }
+  return days
+}
+
+function overlapsDay(item: ScheduleItem, day: Date): boolean {
+  const dayStart = startOfDay(day)
+  const dayEnd = endOfDay(day)
+  return item.startsAt <= dayEnd && item.endsAt >= dayStart
+}
+
+function formatDayLabel(day: Date): string {
+  return day.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
+}
+
+function formatTimeRange(item: ScheduleItem, timezone?: string): string {
+  const options: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' }
+  if (timezone) options.timeZone = timezone
+  const startLabel = item.startsAt.toLocaleTimeString(undefined, options)
+  const endLabel = item.endsAt.toLocaleTimeString(undefined, options)
+  return `${startLabel}-${endLabel}`
+}
+
+function getStatusLabel(status: ScheduleItem['status'], t: (key: string, fallback?: string) => string): string | null {
+  if (!status) return null
+  if (status === 'draft') return t('schedule.item.status.draft', 'Draft')
+  if (status === 'negotiation') return t('schedule.item.status.negotiation', 'Negotiation')
+  if (status === 'confirmed') return t('schedule.item.status.confirmed', 'Confirmed')
+  if (status === 'cancelled') return t('schedule.item.status.cancelled', 'Cancelled')
+  return null
+}
+
+function getKindStyles(kind: ScheduleItem['kind']): string {
+  if (kind === 'event') return 'border-blue-500/40 bg-blue-500/10 text-blue-950'
+  if (kind === 'exception') return 'border-amber-500/40 bg-amber-500/10 text-amber-950'
+  return 'border-emerald-500/40 bg-emerald-500/10 text-emerald-950'
+}
+
+export type ScheduleGridProps = {
+  items: ScheduleItem[]
+  range: ScheduleRange
+  timezone?: string
+  onItemClick?: (item: ScheduleItem) => void
+  onSlotClick?: (slot: ScheduleSlot) => void
+  className?: string
+}
+
+export function ScheduleGrid({ items, range, timezone, onItemClick, onSlotClick, className }: ScheduleGridProps) {
+  const t = useT()
+  const days = React.useMemo(() => eachDay(range.start, range.end), [range])
+  const expandedItems = React.useMemo(() => expandRecurringItems(items, range), [items, range])
+
+  return (
+    <div className={cn('grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3', className)}>
+      {days.map((day) => {
+        const dayItems = expandedItems.filter((item) => overlapsDay(item, day))
+        const slotStart = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 9, 0, 0)
+        const slotEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 10, 0, 0)
+        return (
+          <div key={day.toISOString()} className="rounded-xl border bg-card p-4 shadow-sm">
+            <div className="flex items-center justify-between gap-2">
+              <div className="text-sm font-semibold text-foreground">{formatDayLabel(day)}</div>
+              {onSlotClick ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onSlotClick({ start: slotStart, end: slotEnd })}
+                >
+                  {t('schedule.actions.add', 'Add')}
+                </Button>
+              ) : null}
+            </div>
+            <div className="mt-3 space-y-2">
+              {dayItems.length === 0 ? (
+                <div className="rounded-lg border border-dashed p-3 text-xs text-muted-foreground">
+                  {t('schedule.emptyDay', 'No scheduled items')}
+                </div>
+              ) : (
+                dayItems.map((item) => {
+                  const statusLabel = getStatusLabel(item.status, t)
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      className={cn(
+                        'flex w-full cursor-pointer flex-col gap-2 rounded-lg border px-3 py-2 text-left text-xs transition hover:shadow-sm',
+                        getKindStyles(item.kind)
+                      )}
+                      onClick={() => onItemClick?.(item)}
+                    >
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="font-semibold">{item.title}</span>
+                        {statusLabel ? <Badge variant="secondary">{statusLabel}</Badge> : null}
+                      </div>
+                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                        <span>{formatTimeRange(item, timezone)}</span>
+                        <span className="capitalize">{item.kind}</span>
+                      </div>
+                    </button>
+                  )
+                })
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/backend/schedule/ScheduleToolbar.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from 'react'
+import { Button } from '../../primitives/button'
+import { Input } from '../../primitives/input'
+import type { ScheduleRange, ScheduleViewMode } from './types'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { addDays, addMonths, addWeeks, differenceInCalendarDays, endOfDay, endOfMonth, endOfWeek, format, startOfDay, startOfMonth, startOfWeek } from 'date-fns'
+import { enUS } from 'date-fns/locale/en-US'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+const VIEW_OPTIONS: Array<{ id: ScheduleViewMode; labelKey: string; fallback: string }> = [
+  { id: 'day', labelKey: 'schedule.view.day', fallback: 'Day' },
+  { id: 'week', labelKey: 'schedule.view.week', fallback: 'Week' },
+  { id: 'month', labelKey: 'schedule.view.month', fallback: 'Month' },
+  { id: 'agenda', labelKey: 'schedule.view.agenda', fallback: 'Agenda' },
+]
+
+function formatDateInputValue(value: Date): string {
+  const year = value.getFullYear()
+  const month = String(value.getMonth() + 1).padStart(2, '0')
+  const day = String(value.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function parseDateInputValue(value: string, fallback: Date): Date {
+  if (!value) return fallback
+  const next = new Date(`${value}T00:00:00`)
+  return Number.isNaN(next.getTime()) ? fallback : next
+}
+
+export type ScheduleToolbarProps = {
+  view: ScheduleViewMode
+  range: ScheduleRange
+  timezone?: string
+  onViewChange: (view: ScheduleViewMode) => void
+  onRangeChange: (range: ScheduleRange) => void
+  onTimezoneChange?: (timezone: string) => void
+  className?: string
+}
+
+export function ScheduleToolbar({
+  view,
+  range,
+  timezone,
+  onViewChange,
+  onRangeChange,
+  onTimezoneChange,
+  className,
+}: ScheduleToolbarProps) {
+  const t = useT()
+  const rangeLength = React.useMemo(
+    () => Math.max(1, differenceInCalendarDays(range.end, range.start) + 1),
+    [range.end, range.start],
+  )
+  const deriveRangeForView = React.useCallback((base: Date, nextView: ScheduleViewMode): ScheduleRange => {
+    if (nextView === 'day') {
+      const start = startOfDay(base)
+      return { start, end: endOfDay(start) }
+    }
+    if (nextView === 'week') {
+      return { start: startOfWeek(base, { locale: enUS }), end: endOfWeek(base, { locale: enUS }) }
+    }
+    if (nextView === 'month') {
+      return { start: startOfMonth(base), end: endOfMonth(base) }
+    }
+    const start = startOfDay(base)
+    return { start, end: endOfDay(addDays(start, rangeLength - 1)) }
+  }, [rangeLength])
+  const rangeLabel = React.useMemo(() => {
+    if (view === 'day') {
+      return format(range.start, 'EEE, MMM d')
+    }
+    if (view === 'week') {
+      const startLabel = format(range.start, 'MMM d')
+      const endLabel = format(range.end, 'MMM d')
+      const yearLabel = format(range.start, 'yyyy')
+      return `${startLabel} - ${endLabel}, ${yearLabel}`
+    }
+    if (view === 'month') {
+      return format(range.start, 'MMMM yyyy')
+    }
+    const startLabel = format(range.start, 'MMM d')
+    const endLabel = format(range.end, 'MMM d, yyyy')
+    return `${startLabel} - ${endLabel}`
+  }, [range.end, range.start, view])
+
+  const shiftRange = React.useCallback((direction: 'prev' | 'next') => {
+    const multiplier = direction === 'prev' ? -1 : 1
+    if (view === 'day') {
+      const nextStart = startOfDay(addDays(range.start, multiplier))
+      onRangeChange({ start: nextStart, end: endOfDay(nextStart) })
+      return
+    }
+    if (view === 'week') {
+      const base = addWeeks(range.start, multiplier)
+      onRangeChange({
+        start: startOfWeek(base, { locale: enUS }),
+        end: endOfWeek(base, { locale: enUS }),
+      })
+      return
+    }
+    if (view === 'month') {
+      const base = addMonths(range.start, multiplier)
+      onRangeChange({ start: startOfMonth(base), end: endOfMonth(base) })
+      return
+    }
+    const nextStart = startOfDay(addDays(range.start, multiplier * rangeLength))
+    onRangeChange({ start: nextStart, end: endOfDay(addDays(nextStart, rangeLength - 1)) })
+  }, [onRangeChange, range.start, rangeLength, view])
+
+  return (
+    <div className={cn('flex flex-col gap-3 rounded-xl border bg-card p-4 md:flex-row md:items-center md:justify-between', className)}>
+      <div className="flex flex-wrap items-center gap-2">
+        {VIEW_OPTIONS.map((option) => (
+          <Button
+            key={option.id}
+            variant={view === option.id ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => {
+              if (option.id === view) return
+              onViewChange(option.id)
+              onRangeChange(deriveRangeForView(new Date(), option.id))
+            }}
+          >
+            {t(option.labelKey, option.fallback)}
+          </Button>
+        ))}
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button type="button" variant="outline" size="sm" onClick={() => shiftRange('prev')} aria-label={t('schedule.range.prev', 'Previous')}>
+          <ChevronLeft className="size-4" aria-hidden />
+        </Button>
+        <div className="text-sm font-medium text-foreground">{rangeLabel}</div>
+        <Button type="button" variant="outline" size="sm" onClick={() => shiftRange('next')} aria-label={t('schedule.range.next', 'Next')}>
+          <ChevronRight className="size-4" aria-hidden />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-3">
+        <label className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span>{t('schedule.range.start', 'Start')}</span>
+          <Input
+            type="date"
+            value={formatDateInputValue(range.start)}
+            onChange={(event) => {
+              const nextStart = parseDateInputValue(event.target.value, range.start)
+              onRangeChange({ start: nextStart, end: range.end })
+            }}
+            className="h-8 w-full sm:w-[140px]"
+          />
+        </label>
+        <label className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span>{t('schedule.range.end', 'End')}</span>
+          <Input
+            type="date"
+            value={formatDateInputValue(range.end)}
+            onChange={(event) => {
+              const nextEnd = parseDateInputValue(event.target.value, range.end)
+              onRangeChange({ start: range.start, end: nextEnd })
+            }}
+            className="h-8 w-full sm:w-[140px]"
+          />
+        </label>
+        <label className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span>{t('schedule.range.timezone', 'Timezone')}</span>
+          <Input
+            type="text"
+            value={timezone ?? ''}
+            onChange={(event) => onTimezoneChange?.(event.target.value)}
+            className="h-8 w-full sm:w-[180px]"
+            placeholder={t('schedule.range.timezone.placeholder', 'UTC')}
+          />
+        </label>
+      </div>
+    </div>
+  )
+}