@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/operations/store.ts

@@ -0,0 +1,230 @@
+"use client"
+import * as React from 'react'
+import type { OperationMetadataPayload } from '@open-mercato/shared/lib/commands/operationMetadata'
+
+export type OperationEntry = OperationMetadataPayload & {
+  receivedAt: number
+}
+
+export type UndoneEntry = OperationEntry & {
+  undoneAt: number
+}
+
+type OperationStoreState = {
+  stack: OperationEntry[]
+  undone: UndoneEntry[]
+}
+
+const DEFAULT_STATE: OperationStoreState = { stack: [], undone: [] }
+
+const STORAGE_KEY = 'om:last-operations:v1'
+const STACK_LIMIT = 20
+const LAST_OPERATION_TTL_MS = 60_000
+const STACK_RETENTION_MS = 10 * 60_000
+
+let internalState: OperationStoreState = DEFAULT_STATE
+
+if (typeof window !== 'undefined') {
+  internalState = loadState()
+}
+
+const emitter = new EventTarget()
+
+function now() {
+  return typeof performance !== 'undefined' && performance.now
+    ? Math.round(performance.timeOrigin + performance.now())
+    : Date.now()
+}
+
+function loadState(): OperationStoreState {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return DEFAULT_STATE
+    const parsed = JSON.parse(raw)
+    if (!parsed || typeof parsed !== 'object') return DEFAULT_STATE
+    const stack = Array.isArray(parsed.stack) ? parsed.stack.filter(isValidEntry).map(hydrateEntry) : []
+    const undone = Array.isArray(parsed.undone)
+      ? parsed.undone.filter(isValidEntry).map((raw: unknown) => {
+          const hydrated = hydrateEntry(raw)
+          const candidate = raw as { undoneAt?: unknown }
+          const undoneAt = typeof candidate.undoneAt === 'number' ? candidate.undoneAt : now()
+          return { ...hydrated, undoneAt }
+        })
+      : []
+    return pruneState({ stack, undone })
+  } catch {
+    return DEFAULT_STATE
+  }
+}
+
+function isValidEntry(entry: unknown): entry is OperationEntry {
+  if (entry == null || typeof entry !== 'object') return false
+  const candidate = entry as Record<string, unknown>
+  return (
+    typeof candidate.id === 'string'
+    && typeof candidate.undoToken === 'string'
+    && typeof candidate.commandId === 'string'
+    && typeof candidate.receivedAt === 'number'
+    && typeof candidate.executedAt === 'string'
+  )
+}
+
+function hydrateEntry(entry: unknown): OperationEntry {
+  const source = entry as Partial<OperationEntry> & Record<string, unknown>
+  return {
+    id: String(source.id),
+    undoToken: String(source.undoToken),
+    commandId: String(source.commandId),
+    actionLabel: typeof source.actionLabel === 'string' ? source.actionLabel : source.actionLabel === null ? null : null,
+    resourceKind: typeof source.resourceKind === 'string' ? source.resourceKind : null,
+    resourceId: typeof source.resourceId === 'string' ? source.resourceId : null,
+    executedAt: typeof source.executedAt === 'string' ? source.executedAt : new Date((source.receivedAt as number | undefined) || now()).toISOString(),
+    receivedAt: typeof source.receivedAt === 'number' ? source.receivedAt : now(),
+  }
+}
+
+function persist(state: OperationStoreState) {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+  } catch {
+    // ignore storage quota errors
+  }
+}
+
+function pruneState(state: OperationStoreState): OperationStoreState {
+  const timestamp = now()
+  const stack = state.stack
+    .filter((entry, index, arr) => {
+      // Deduplicate by id/undoToken keeping latest
+      const duplicateIndex = arr.findIndex((candidate) => candidate.id === entry.id || candidate.undoToken === entry.undoToken)
+      if (duplicateIndex !== index) return false
+      return timestamp - entry.receivedAt <= STACK_RETENTION_MS
+    })
+    .sort((a, b) => a.receivedAt - b.receivedAt)
+    .slice(-STACK_LIMIT)
+  const undone = state.undone
+    .filter((entry) => timestamp - entry.undoneAt <= STACK_RETENTION_MS)
+    .sort((a, b) => a.undoneAt - b.undoneAt)
+    .slice(-STACK_LIMIT)
+  const next = { stack, undone }
+  return next
+}
+
+function emit() {
+  emitter.dispatchEvent(new Event('change'))
+}
+
+function updateState(updater: (prev: OperationStoreState) => OperationStoreState) {
+  const next = pruneState(updater(internalState))
+  internalState = next
+  persist(next)
+  emit()
+}
+
+function subscribe(listener: () => void) {
+  const wrapped = () => listener()
+  emitter.addEventListener('change', wrapped)
+  return () => emitter.removeEventListener('change', wrapped)
+}
+
+function getClientSnapshot(): OperationStoreState {
+  internalState = pruneState(internalState)
+  return internalState
+}
+
+export function useOperationStore<T>(selector: (state: OperationStoreState) => T): T {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => selector(getClientSnapshot()),
+    () => selector(DEFAULT_STATE),
+  )
+}
+
+export function pushOperation(meta: OperationMetadataPayload) {
+  if (typeof window === 'undefined') return
+  updateState((prev) => {
+    const entry: OperationEntry = {
+      ...meta,
+      receivedAt: now(),
+    }
+    const stack = prev.stack.filter((item) => item.id !== entry.id && item.undoToken !== entry.undoToken)
+    stack.push(entry)
+    return { stack, undone: [] }
+  })
+}
+
+export function markUndoSuccess(undoToken: string) {
+  if (typeof window === 'undefined') return
+  const removed: OperationEntry[] = []
+  updateState((prev) => {
+    const stack = prev.stack.filter((entry) => {
+      if (entry.undoToken === undoToken) {
+        removed.push(entry)
+        return false
+      }
+      return true
+    })
+    const undone = removed.length
+      ? [...prev.undone, ...removed.map((entry) => ({ ...entry, undoneAt: now() }))]
+      : prev.undone
+    return { stack, undone }
+  })
+}
+
+export function markRedoConsumed(logId: string) {
+  if (typeof window === 'undefined') return
+  updateState((prev) => ({
+    stack: prev.stack,
+    undone: prev.undone.filter((entry) => entry.id !== logId),
+  }))
+}
+
+export function getLastOperation(): OperationEntry | null {
+  const state = getClientSnapshot()
+  if (!state.stack.length) return null
+  const last = state.stack[state.stack.length - 1]
+  const lastExecuted = Date.parse(last.executedAt)
+  const cutoff = now() - LAST_OPERATION_TTL_MS
+  if (Number.isFinite(lastExecuted) && lastExecuted < cutoff) return null
+  if (!Number.isFinite(lastExecuted) && last.receivedAt < cutoff) return null
+  return last
+}
+
+export function useLastOperation(): OperationEntry | null {
+  return useOperationStore(getLastOperationFromState)
+}
+
+function getLastOperationFromState(state: OperationStoreState): OperationEntry | null {
+  if (!state.stack.length) return null
+  const last = state.stack[state.stack.length - 1]
+  const timestamp = now()
+  const executedAt = Date.parse(last.executedAt)
+  const cutoff = timestamp - LAST_OPERATION_TTL_MS
+  if (Number.isFinite(executedAt)) {
+    return executedAt >= cutoff ? last : null
+  }
+  return last.receivedAt >= cutoff ? last : null
+}
+
+export function useRedoCandidate(): UndoneEntry | null {
+  return useOperationStore((state) => (state.undone.length ? state.undone[state.undone.length - 1] : null))
+}
+
+export function hasRedoCandidate(logId: string): boolean {
+  const state = getClientSnapshot()
+  if (!state.undone.length) return false
+  const top = state.undone[state.undone.length - 1]
+  return top.id === logId
+}
+
+export function clearAllOperations() {
+  if (typeof window === 'undefined') return
+  internalState = DEFAULT_STATE
+  persist(internalState)
+  emit()
+}
+
+export const operationStackConstants = {
+  LAST_OPERATION_TTL_MS,
+}

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 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 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 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-[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-[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-[180px]"
+            placeholder={t('schedule.range.timezone.placeholder', 'UTC')}
+          />
+        </label>
+      </div>
+    </div>
+  )
+}