@fayz-ai/plugin-agenda 0.9.0 → 0.9.1

package/src/views/CalendarView.tsx

@@ -1,1112 +0,0 @@
-import React, { useRef, useEffect, useCallback, useMemo, useState } from 'react'
-import { injectCalendarStyles } from '../calendar-styles'
-import FullCalendar from '@fullcalendar/react'
-import dayGridPlugin from '@fullcalendar/daygrid'
-import timeGridPlugin from '@fullcalendar/timegrid'
-import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid'
-import interactionPlugin from '@fullcalendar/interaction'
-import listPlugin from '@fullcalendar/list'
-import ptBrLocale from '@fullcalendar/core/locales/pt-br'
-import type { EventInput, EventClickArg, DateSelectArg, EventDropArg } from '@fullcalendar/core'
-import { ChevronLeft, ChevronRight, Plus, ChevronDown, Settings } from 'lucide-react'
-import { usePluginPrefs } from '@fayz-ai/saas'
-import { getCurrentLocale } from '@fayz-ai/core'
-import { useTranslation, useDataChanged } from '@fayz-ai/core'
-import { useAgendaConfig, useAgendaStore } from '../AgendaContext'
-import { useAgendaSettings } from '../hooks/useAgendaSettings'
-import { MiniCalendar } from '../components/MiniCalendar'
-import { AppointmentModal } from '../components/AppointmentModal'
-import { AppointmentPopover } from '../components/AppointmentPopover'
-import { PersonLink } from '@fayz-ai/saas'
-import { EventContextMenu } from '../components/EventContextMenu'
-import { AgendaMobileList } from '../components/AgendaMobileList'
-import { ConfirmDialog } from '@fayz-ai/ui'
-import { Button } from '@fayz-ai/ui'
-import type { CalendarBooking, Schedule } from '../types'
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function bookingToEvent(booking: CalendarBooking, statusColors: Record<string, string>): EventInput {
-  const color = statusColors[booking.status] ?? '#6b7280'
-  const serviceNames = booking.services?.map((s) => s.name).join(', ') ?? ''
-  return {
-    id: booking.id,
-    resourceId: booking.professionalId ?? undefined,
-    title: booking.clientName ?? 'Unknown',
-    start: booking.startsAt,
-    end: booking.endsAt ?? undefined,
-    backgroundColor: color + '30',
-    borderColor: color,
-    textColor: color,
-    extendedProps: { booking, serviceNames },
-  }
-}
-
-/**
- * Generate FullCalendar background events showing unavailable time.
- * For each day, creates background blocks for the gaps OUTSIDE working hours
- * within the visible business hours window. This grays out non-working time.
- */
-function generateAvailabilityEvents(
-  schedules: Schedule[],
-  professionals: { id: string }[],
-  dateRange: { start: string; end: string } | null,
-  businessHours?: { startTime: string; endTime: string },
-  locationMap?: Map<string, string>,
-): EventInput[] {
-  if (!dateRange || schedules.length === 0) return []
-
-  const bgEvents: EventInput[] = []
-  const startDate = new Date(dateRange.start)
-  const endDate = new Date(dateRange.end)
-  const bizStart = businessHours?.startTime ?? '08:00'
-  const bizEnd = businessHours?.endTime ?? '20:00'
-
-  // Group schedules by assignee
-  const byAssignee = new Map<string, Schedule[]>()
-  for (const s of schedules) {
-    const aid = s.assigneeId
-    if (!aid) continue
-    const list = byAssignee.get(aid) ?? []
-    list.push(s)
-    byAssignee.set(aid, list)
-  }
-
-  function timeToMinutes(t: string): number {
-    const [h, m] = t.split(':').map(Number)
-    return h * 60 + m
-  }
-
-  function minutesToTime(m: number): string {
-    return `${String(Math.floor(m / 60)).padStart(2, '0')}:${String(m % 60).padStart(2, '0')}`
-  }
-
-  const bizStartMin = timeToMinutes(bizStart)
-  const bizEndMin = timeToMinutes(bizEnd)
-
-  for (const prof of professionals) {
-    const profSchedules = byAssignee.get(prof.id) ?? []
-
-    // Separate weekly and date-specific schedules
-    const weekly = profSchedules.filter((s) => s.dayOfWeek != null && !s.specificDate)
-    const exceptions = profSchedules.filter((s) => s.specificDate != null)
-    const exceptionDates = new Set(exceptions.map((s) => s.specificDate!))
-
-    const current = new Date(startDate)
-    while (current < endDate) {
-      const dateStr = current.toISOString().slice(0, 10)
-      const dayOfWeek = current.getDay()
-
-      // Get working periods for this day
-      let daySchedules: Schedule[]
-      if (exceptionDates.has(dateStr)) {
-        daySchedules = exceptions.filter((s) => s.specificDate === dateStr && s.isActive)
-      } else {
-        daySchedules = weekly.filter((s) => s.dayOfWeek === dayOfWeek && s.isActive)
-      }
-
-      // Convert working periods to sorted minute ranges, preserving locationId
-      const workRanges = daySchedules
-        .map((s) => {
-          const locId = s.locationId ?? (s.metadata?.locationId as string | undefined)
-          return {
-            start: timeToMinutes(s.startsAt),
-            end: timeToMinutes(s.endsAt),
-            locationName: locId && locationMap ? locationMap.get(locId) : undefined,
-          }
-        })
-        .sort((a, b) => a.start - b.start)
-
-      // Compute unavailable gaps within business hours
-      let cursor = bizStartMin
-      for (const range of workRanges) {
-        const availStart = Math.max(range.start, bizStartMin)
-        const availEnd = Math.min(range.end, bizEndMin)
-
-        // Gap before this working range = unavailable
-        if (cursor < availStart) {
-          bgEvents.push({
-            resourceId: prof.id,
-            start: dateStr + 'T' + minutesToTime(cursor) + ':00',
-            end: dateStr + 'T' + minutesToTime(availStart) + ':00',
-            display: 'background',
-            classNames: ['fc-unavailable-bg'],
-          })
-        }
-
-        // Location label on available range
-        if (availStart < availEnd && range.locationName) {
-          bgEvents.push({
-            id: `loc-${prof.id}-${dateStr}-${minutesToTime(availStart)}`,
-            resourceId: prof.id,
-            start: dateStr + 'T' + minutesToTime(availStart) + ':00',
-            end: dateStr + 'T' + minutesToTime(availStart + 20) + ':00',
-            title: range.locationName,
-            display: 'auto',
-            editable: false,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            textColor: '#a3a3a3',
-            classNames: ['fc-location-label'],
-            extendedProps: { isLocationLabel: true },
-          })
-        }
-
-        cursor = Math.max(cursor, availEnd)
-      }
-
-      // Gap after last working range = unavailable
-      if (cursor < bizEndMin) {
-        bgEvents.push({
-          resourceId: prof.id,
-          start: dateStr + 'T' + minutesToTime(cursor) + ':00',
-          end: dateStr + 'T' + minutesToTime(bizEndMin) + ':00',
-          display: 'background',
-          classNames: ['fc-unavailable-bg'],
-        })
-      }
-
-
-      current.setDate(current.getDate() + 1)
-    }
-  }
-
-  return bgEvents
-}
-
-// ---------------------------------------------------------------------------
-// Loading skeleton — mimics the resource-timegrid-week layout
-// ---------------------------------------------------------------------------
-
-function CalendarSkeleton({ profCount = 2 }: { profCount?: number }) {
-  const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
-  const hours = ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00']
-
-  return (
-    <div className="flex-1 overflow-hidden animate-pulse">
-      <div className="flex border-b" style={{ paddingLeft: 56 }}>
-        {Array.from({ length: profCount }).map((_, pi) => (
-          <div key={pi} className="flex-1 border-r last:border-r-0 py-2 px-3">
-            <div className="flex items-center justify-center gap-2">
-              <div className="h-6 w-6 rounded-full bg-muted" />
-              <div className="h-3 w-20 rounded bg-muted" />
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className="flex border-b" style={{ paddingLeft: 56 }}>
-        {Array.from({ length: profCount }).map((_, pi) => (
-          <div key={pi} className="flex-1 flex border-r last:border-r-0">
-            {days.map((d) => (
-              <div key={d} className="flex-1 py-1.5 text-center">
-                <span className="text-[10px] text-muted-foreground/40">{d}</span>
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-      <div className="relative">
-        {hours.map((h) => (
-          <div key={h} className="flex border-b border-border/30" style={{ height: 50 }}>
-            <div className="w-14 shrink-0 pr-2 text-right">
-              <span className="text-[10px] text-muted-foreground/30">{h}</span>
-            </div>
-            <div className="flex-1 flex">
-              {Array.from({ length: profCount * 7 }).map((_, ci) => (
-                <div key={ci} className={`flex-1 border-r border-border/20 ${Math.floor(ci / 7) % 2 === 1 ? 'bg-muted/20' : ''}`} />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// Resource views — one column per professional. Used when the app has staff.
-const RESOURCE_VIEW_OPTIONS = [
-  { key: 'resourceTimeGridDay', labelKey: 'agenda.calendar.viewDay' },
-  { key: 'resourceTimeGridWeek', labelKey: 'agenda.calendar.viewWeek' },
-  { key: 'dayGridMonth', labelKey: 'agenda.calendar.viewMonth' },
-] as const
-
-// Non-resource variants — used when there are no professionals/resources (e.g. a
-// personal-finance agenda). A resource timegrid renders an EMPTY grid with zero
-// resource columns and drops events that have no resourceId, so those apps fall
-// back to a plain month/day/week calendar.
-const PLAIN_VIEW_OPTIONS = [
-  { key: 'timeGridDay', labelKey: 'agenda.calendar.viewDay' },
-  { key: 'timeGridWeek', labelKey: 'agenda.calendar.viewWeek' },
-  { key: 'dayGridMonth', labelKey: 'agenda.calendar.viewMonth' },
-  { key: 'listMonth', labelKey: 'agenda.calendar.viewList' },
-] as const
-
-// Sentinel view key for the thumb-friendly mobile agenda list (AgendaMobileList),
-// which is NOT a FullCalendar view. Selected by default on <md so B2C opens on the
-// list; picking any grid option (Dia/Semana/Mês) mounts the real calendar instead.
-const MOBILE_LIST_VIEW = '__mobileList__'
-
-/** Collapse a resource view to a plain month calendar when there are no resources. */
-function viewForNoResources(view: string): string {
-  return view.startsWith('resource') ? 'dayGridMonth' : view
-}
-
-/** Promote a plain timegrid to its resource variant when the app has resources. */
-function viewForResources(view: string): string {
-  if (view === 'timeGridWeek') return 'resourceTimeGridWeek'
-  if (view === 'timeGridDay') return 'resourceTimeGridDay'
-  return view
-}
-
-/** Small viewport (<md) → render the thumb-friendly agenda list instead of the grid. */
-function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = useState(() =>
-    typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches)
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const mq = window.matchMedia('(max-width: 767px)')
-    const onChange = () => setIsMobile(mq.matches)
-    mq.addEventListener('change', onChange)
-    return () => mq.removeEventListener('change', onChange)
-  }, [])
-  return isMobile
-}
-
-// ---------------------------------------------------------------------------
-// Calendar View
-// ---------------------------------------------------------------------------
-
-export function CalendarView() {
-  injectCalendarStyles()
-  const config = useAgendaConfig()
-  const t = useTranslation()
-  const currentLocale = getCurrentLocale()
-  const fcLocale = currentLocale === 'pt-BR' ? ptBrLocale : undefined
-  const calendarRef = useRef<FullCalendar>(null)
-  const prefs = usePluginPrefs('agenda', { calendarView: config.defaultCalendarView ?? 'resourceTimeGridWeek' })
-  const agendaSettings = useAgendaSettings()
-  const effectiveBusinessHours = {
-    startTime: agendaSettings.startTime,
-    endTime: agendaSettings.endTime,
-  }
-
-  const bookings = useAgendaStore((s) => s.bookings)
-  const bookingsLoading = useAgendaStore((s) => s.bookingsLoading)
-  const professionals = useAgendaStore((s) => s.professionals)
-  const professionalsLoading = useAgendaStore((s) => s.professionalsLoading)
-  const currentView = useAgendaStore((s) => s.currentView)
-  const selectedProfIds = useAgendaStore((s) => s.selectedProfessionalIds)
-  const selectedStatuses = useAgendaStore((s) => s.selectedStatuses)
-  const schedules = useAgendaStore((s) => s.schedules)
-  const fetchBookings = useAgendaStore((s) => s.fetchBookings)
-  const fetchProfessionals = useAgendaStore((s) => s.fetchProfessionals)
-  const fetchLocations = useAgendaStore((s) => s.fetchLocations)
-  const storeLocations = useAgendaStore((s) => s.locations)
-  const fetchSchedules = useAgendaStore((s) => s.fetchSchedules)
-  const rescheduleBooking = useAgendaStore((s) => s.rescheduleBooking)
-  const setView = useAgendaStore((s) => s.setView)
-  const setFilters = useAgendaStore((s) => s.setFilters)
-  const _openModal = useAgendaStore((s) => s.openAppointmentModal)
-  const closeModal = useAgendaStore((s) => s.closeAppointmentModal)
-  const modalState = useAgendaStore((s) => s.appointmentModal)
-
-  // Resource-capable = the app has professionals/staff. When it doesn't (e.g. a
-  // personal-finance agenda), resource views render empty, so we force plain
-  // (non-resource) views and default to a month calendar.
-  const isMobile = useIsMobile()
-  const resourceCapable = professionals.length > 0
-  const viewOptions = resourceCapable ? RESOURCE_VIEW_OPTIONS : PLAIN_VIEW_OPTIONS
-
-  // Mobile (<md) has its own view selection, independent of the desktop pref: it
-  // defaults to the thumb-friendly list and lets the user switch to any grid view
-  // (Dia/Semana/Mês) without changing the desktop's stored calendarView. The list
-  // sentinel replaces FullCalendar's own listMonth so mobile always gets the rich
-  // AgendaMobileList, and a list option is offered even for resource apps.
-  const [mobileView, setMobileView] = useState<string>(MOBILE_LIST_VIEW)
-  const mobileViewOptions = useMemo(
-    () => [
-      ...viewOptions.filter((o) => o.key !== 'listMonth'),
-      { key: MOBILE_LIST_VIEW, labelKey: 'agenda.calendar.viewList' },
-    ],
-    [viewOptions],
-  )
-  const mobileGridActive = isMobile && mobileView !== MOBILE_LIST_VIEW
-
-  const [selectedBooking, setSelectedBooking] = useState<CalendarBooking | null>(null)
-  const [popoverAnchor, setPopoverAnchor] = useState<{ x: number; y: number } | null>(null)
-  const [popoverVisible, _setPopoverVisible] = useState(false)
-  const popoverVisibleRef = useRef(false)
-  const setPopoverVisible = useCallback((v: boolean) => { popoverVisibleRef.current = v; _setPopoverVisible(v) }, [])
-  const [contextMenu, setContextMenu] = useState<{ booking: CalendarBooking; x: number; y: number } | null>(null)
-  const [contextMenuVisible, _setContextMenuVisible] = useState(false)
-  const contextMenuVisibleRef = useRef(false)
-  const setContextMenuVisible = useCallback((v: boolean) => { contextMenuVisibleRef.current = v; _setContextMenuVisible(v) }, [])
-  const [scheduleConfirm, setScheduleConfirm] = useState<{ onConfirm: () => void } | null>(null)
-  const [calendarTitle, setCalendarTitle] = useState('')
-  const [selectedDate, setSelectedDate] = useState(new Date())
-  const [profSectionOpen, setProfSectionOpen] = useState(true)
-  const [statusSectionOpen, setStatusSectionOpen] = useState(false)
-  const [visibleRange, setVisibleRange] = useState<{ start: string; end: string } | null>(null)
-
-  // Wrap openModal to always dismiss popover/context menu first
-  const openModal: typeof _openModal = useCallback((...args) => {
-    setPopoverVisible(false); setSelectedBooking(null); setPopoverAnchor(null)
-    setContextMenuVisible(false); setContextMenu(null)
-    _openModal(...args)
-  }, [_openModal])
-
-  const statusColors = useMemo(() => {
-    const map: Record<string, string> = {}
-    for (const s of config.statuses) map[s.value] = s.color
-    return map
-  }, [config.statuses])
-
-  useEffect(() => {
-    fetchProfessionals(); fetchSchedules()
-    if (config.modules.locationSelection) fetchLocations()
-  }, [])
-
-  // Keep the view consistent with resource-capability, in case a stale/shared
-  // pref selected the wrong variant. No resources → a resource view is an empty
-  // grid that drops the seeded events; resources → a plain timegrid loses the
-  // per-professional columns.
-  useEffect(() => {
-    const api = calendarRef.current?.getApi()
-    if (!api) return
-    if (!resourceCapable && currentView.startsWith('resource')) {
-      api.changeView('dayGridMonth')
-    } else if (resourceCapable && (currentView === 'timeGridWeek' || currentView === 'timeGridDay')) {
-      api.changeView(viewForResources(currentView))
-    }
-  }, [resourceCapable, currentView])
-
-  // Mobile renders the agenda list (no FullCalendar), so the grid's datesSet —
-  // which normally drives fetchBookings — never fires. Fetch a wide upcoming
-  // window directly so the list has data.
-  useEffect(() => {
-    if (!isMobile) return
-    const start = new Date(); start.setHours(0, 0, 0, 0); start.setDate(start.getDate() - 1)
-    const end = new Date(start); end.setDate(end.getDate() + 91)
-    fetchBookings({ start: start.toISOString(), end: end.toISOString() })
-  }, [isMobile, fetchBookings])
-
-  // A booking created outside the grid — the assistant, the public page,
-  // another device — repaints the calendar it belongs to. Without this the
-  // manager who just said "agenda a Maria amanhã às 10" still sees yesterday's
-  // grid and reloads the tab by hand.
-  useDataChanged({}, () => {
-    if (visibleRange) {
-      fetchBookings(visibleRange)
-      return
-    }
-    const start = new Date(); start.setHours(0, 0, 0, 0); start.setDate(start.getDate() - 1)
-    const end = new Date(start); end.setDate(end.getDate() + 91)
-    fetchBookings({ start: start.toISOString(), end: end.toISOString() })
-  }, [visibleRange, fetchBookings])
-
-  const resources = useMemo(() => {
-    const filtered = selectedProfIds.length > 0
-      ? professionals.filter((p) => selectedProfIds.includes(p.id))
-      : professionals
-    return filtered.map((p) => ({
-      id: p.id, title: p.name,
-      extendedProps: { avatarUrl: p.avatarUrl, locationName: p.locationName },
-    }))
-  }, [professionals, selectedProfIds])
-
-  const bookingEvents = useMemo(() =>
-    bookings.map((b) => bookingToEvent(b, statusColors)), [bookings, statusColors])
-
-  // Merge static config locations with dynamically fetched locations
-  const allLocations = useMemo(() => {
-    const map = new Map<string, string>()
-    for (const loc of config.locations) map.set(loc.id, loc.name)
-    for (const loc of storeLocations) map.set(loc.id, loc.name)
-    return map
-  }, [config.locations, storeLocations])
-
-  const locationMap = useMemo(() => {
-    if (!config.modules.locationSelection || allLocations.size === 0) return undefined
-    return allLocations
-  }, [config.modules.locationSelection, allLocations])
-
-  const availabilityEvents = useMemo(() =>
-    generateAvailabilityEvents(schedules, professionals, visibleRange, effectiveBusinessHours, locationMap),
-    [schedules, professionals, visibleRange, effectiveBusinessHours, locationMap])
-
-  const events = useMemo(() =>
-    [...bookingEvents, ...availabilityEvents], [bookingEvents, availabilityEvents])
-
-  const storedView = prefs.get('calendarView')
-  const effectiveInitialView = resourceCapable ? viewForResources(storedView) : viewForNoResources(storedView)
-
-  // ── Calendar handlers ──
-  const handleDatesSet = useCallback((arg: { startStr: string; endStr: string; view: { title: string; type: string } }) => {
-    setCalendarTitle(arg.view.title)
-    setView(arg.view.type)
-    setVisibleRange({ start: arg.startStr, end: arg.endStr })
-    fetchBookings({ start: arg.startStr, end: arg.endStr })
-  }, [fetchBookings, setView])
-
-  // Double-click → open edit directly
-  // Right-click → context menu
-  const handleEventDidMount = useCallback((arg: { event: any; el: HTMLElement }) => {
-    const booking = arg.event.extendedProps?.booking as CalendarBooking | undefined
-    if (booking) arg.el.setAttribute('data-booking-id', booking.id)
-    arg.el.addEventListener('dblclick', (e) => {
-      e.preventDefault()
-      e.stopPropagation()
-      skipClickRef.current = true
-      const booking = arg.event.extendedProps.booking as CalendarBooking
-      setSelectedBooking(null)
-      setPopoverAnchor(null)
-      setContextMenu(null)
-      openModal('edit', { bookingId: booking.id })
-    })
-    arg.el.addEventListener('contextmenu', (e) => {
-      e.preventDefault()
-      const booking = arg.event.extendedProps.booking as CalendarBooking
-      const menuW = 210, menuH = 200
-      let x = e.clientX + 4
-      let y = e.clientY + 4
-      if (x + menuW > window.innerWidth - 12) x = x - menuW
-      if (y + menuH > window.innerHeight - 12) y = y - menuH
-      setContextMenu({ booking, x, y })
-      setContextMenuVisible(true)
-      setSelectedBooking(null)
-      setPopoverAnchor(null)
-    })
-  }, [])
-
-  // Flag to suppress single-click after a double-click
-  const skipClickRef = useRef(false)
-
-  // Hover timer — show popover after 4s hover on a booking event
-  const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  const handleEventMouseEnter = useCallback((arg: { event: any; el: HTMLElement }) => {
-    if (arg.event.display === 'background') return
-    if (arg.event.extendedProps?.isLocationLabel) return
-    const booking = arg.event.extendedProps.booking as CalendarBooking
-    if (!booking) return
-
-    hoverTimerRef.current = setTimeout(() => {
-      const rect = arg.el.getBoundingClientRect()
-      const popW = 320, popH = 340
-      let x = rect.right + 8
-      let y = rect.top + rect.height / 2 - popH / 2
-      if (x + popW > window.innerWidth - 16) x = rect.left - popW - 8
-      if (x < 16) x = Math.max(16, rect.left + rect.width / 2 - popW / 2)
-      if (y + popH > window.innerHeight - 16) y = window.innerHeight - popH - 16
-      if (y < 16) y = 16
-      setSelectedBooking(booking)
-      setPopoverAnchor({ x, y })
-      setPopoverVisible(true)
-    }, 3000)
-  }, [])
-
-  const handleEventMouseLeave = useCallback(() => {
-    if (hoverTimerRef.current) {
-      clearTimeout(hoverTimerRef.current)
-      hoverTimerRef.current = null
-    }
-  }, [])
-
-  // Single click — open popover instantly, or slide to new position if already open
-  const handleEventClick = useCallback((arg: EventClickArg) => {
-    if (skipClickRef.current) { skipClickRef.current = false; return }
-    // Ignore clicks on background availability events and location labels
-    if (arg.event.display === 'background') return
-    if (arg.event.extendedProps?.isLocationLabel) return
-    setContextMenu(null); setContextMenuVisible(false)
-    const booking = arg.event.extendedProps.booking as CalendarBooking
-    if (!booking) return
-    const rect = arg.el.getBoundingClientRect()
-    const popW = 320, popH = 340
-    let x = rect.right + 8
-    let y = rect.top + rect.height / 2 - popH / 2
-    if (x + popW > window.innerWidth - 16) x = rect.left - popW - 8
-    if (x < 16) x = Math.max(16, rect.left + rect.width / 2 - popW / 2)
-    if (y + popH > window.innerHeight - 16) y = window.innerHeight - popH - 16
-    if (y < 16) y = 16
-    // Always update — if popover is already open it slides to the new position
-    setSelectedBooking(booking)
-    setPopoverAnchor({ x, y })
-    setPopoverVisible(true)
-  }, [])
-
-  // Find the schedule block covering a given time slot for a professional
-  const findScheduleForSlot = useCallback((professionalId: string | undefined, dateTimeStr: string): Schedule | null => {
-    if (!professionalId) return null
-    const dt = new Date(dateTimeStr)
-    const dateStr = dt.toISOString().slice(0, 10)
-    const dayOfWeek = dt.getDay()
-    const timeMin = dt.getHours() * 60 + dt.getMinutes()
-
-    const profSchedules = schedules.filter((s) => s.assigneeId === professionalId)
-    const exceptions = profSchedules.filter((s) => s.specificDate === dateStr && s.isActive)
-    const weekly = profSchedules.filter((s) => s.dayOfWeek === dayOfWeek && s.isActive && !s.specificDate)
-    const daySchedules = exceptions.length > 0 ? exceptions : weekly
-
-    for (const s of daySchedules) {
-      const [sh, sm] = s.startsAt.split(':').map(Number)
-      const [eh, em] = s.endsAt.split(':').map(Number)
-      if (timeMin >= sh * 60 + sm && timeMin < eh * 60 + em) return s
-    }
-    return null
-  }, [schedules])
-
-  const handleSelect = useCallback((arg: DateSelectArg) => {
-    calendarRef.current?.getApi().unselect()
-
-    // Don't open create if popover/context menu is showing — dismiss them instead
-    if (popoverVisibleRef.current || contextMenuVisibleRef.current) {
-      setPopoverVisible(false); setSelectedBooking(null); setPopoverAnchor(null)
-      setContextMenuVisible(false); setContextMenu(null)
-      return
-    }
-
-    const professionalId = arg.resource?.id
-    const schedule = findScheduleForSlot(professionalId, arg.startStr)
-
-    const proceed = () => {
-      const locId = schedule?.locationId ?? (schedule?.metadata?.locationId as string | undefined)
-      openModal('create', { prefill: { startsAt: arg.startStr, endsAt: arg.endStr, professionalId, locationId: locId || undefined } })
-    }
-
-    // Warn if no schedule covers this slot — only when the working-hours module
-    // is on (off by default in eventMode:'simple', so simple/Google-Calendar
-    // events never surface the "no open schedule for this professional" dialog).
-    if (config.modules.workingHours && !schedule) {
-      setScheduleConfirm({ onConfirm: proceed })
-      return
-    }
-
-    proceed()
-  }, [openModal, findScheduleForSlot, config.modules.workingHours])
-
-  const handleEventDrop = useCallback(async (arg: EventDropArg) => {
-    const booking = arg.event.extendedProps.booking as CalendarBooking
-    try { await rescheduleBooking(booking.id, arg.event.startStr, arg.event.endStr, arg.newResource?.id ?? undefined) }
-    catch { arg.revert() }
-  }, [rescheduleBooking])
-
-  const handleViewChange = useCallback((v: string) => {
-    calendarRef.current?.getApi().changeView(v)
-    prefs.set('calendarView', v)
-  }, [prefs])
-  // Mobile switcher: swap between the list sentinel and a real grid view. When a
-  // grid is picked we also sync the store's currentView so the resource-collapse
-  // effect doesn't fight the freshly-mounted mobile calendar; if it's already
-  // mounted (grid → grid), changeView animates in place.
-  const handleMobileViewChange = useCallback((v: string) => {
-    setMobileView(v)
-    if (v === MOBILE_LIST_VIEW) return
-    setView(v)
-    calendarRef.current?.getApi()?.changeView(v)
-  }, [setView])
-  const handlePrev = useCallback(() => calendarRef.current?.getApi().prev(), [])
-  const handleNext = useCallback(() => calendarRef.current?.getApi().next(), [])
-  const handleToday = useCallback(() => { calendarRef.current?.getApi().today(); setSelectedDate(new Date()) }, [])
-
-  function handleMiniDateSelect(date: Date) {
-    setSelectedDate(date)
-    calendarRef.current?.getApi().gotoDate(date)
-  }
-
-  function toggleProfessional(id: string) {
-    const next = selectedProfIds.includes(id)
-      ? selectedProfIds.filter((p) => p !== id)
-      : [...selectedProfIds, id]
-    setFilters({ professionalIds: next })
-  }
-
-  function toggleStatus(value: string) {
-    const next = selectedStatuses.includes(value)
-      ? selectedStatuses.filter((s) => s !== value)
-      : [...selectedStatuses, value]
-    setFilters({ statuses: next })
-  }
-
-  // Alternating resource backgrounds — apply via DOM after render
-  const wrapperRef = useRef<HTMLDivElement>(null)
-
-  // FullCalendar measures its columns once and only re-measures on a WINDOW
-  // resize. Opening/closing the assistant rail (or the sidebar) resizes the
-  // container without one, so the grid stayed locked at the narrow width until
-  // a real window resize came along. Watch the container and hand FC the new box.
-  useEffect(() => {
-    const container = wrapperRef.current
-    if (!container) return
-    let frame = 0
-    let lastWidth = container.clientWidth
-    let lastHeight = container.clientHeight
-    const ro = new ResizeObserver(() => {
-      const width = container.clientWidth
-      const height = container.clientHeight
-      if (width === lastWidth && height === lastHeight) return
-      lastWidth = width
-      lastHeight = height
-      // Next frame, not inline: measuring inside the observer callback reads a
-      // mid-layout box (and trips the RO loop warning). The rail animates, so
-      // this fires on each frame and the last one settles on the final width.
-      cancelAnimationFrame(frame)
-      frame = requestAnimationFrame(() => calendarRef.current?.getApi()?.updateSize())
-    })
-    ro.observe(container)
-    return () => { cancelAnimationFrame(frame); ro.disconnect() }
-    // Re-attach whenever the calendar branch remounts (skeleton → grid, mobile
-    // list → grid), since the observed node is gone on the other branches.
-  }, [isMobile, mobileGridActive, professionalsLoading, professionals.length])
-
-  // Responsive day headers — collapse weekday names to a single initial (S M T
-  // W T F S, Google-Calendar style) when day columns get too narrow. Measured
-  // from the actual rendered column width so it adapts to resource count + view.
-  const [dayHeaderCompact, setDayHeaderCompact] = useState(false)
-  useEffect(() => {
-    const container = wrapperRef.current
-    if (!container) return
-    let frame = 0
-    const measure = () => {
-      // Measure an actual DAY column ([data-date]) — in resource views the first
-      // .fc-col-header-cell is the wide resource header, not a day column.
-      const cell = container.querySelector('.fc-col-header-cell[data-date]') as HTMLElement | null
-      if (!cell) return
-      const colWidth = cell.getBoundingClientRect().width
-      // Collapse to single-letter ONLY when the full weekday label can't fit.
-      // Measure the widest full line ("WED" / "12/14") in the header's font so
-      // the breakpoint adapts to font + locale instead of a magic number.
-      const cushion = (cell.querySelector('.fc-col-header-cell-cushion') as HTMLElement | null) ?? cell
-      const cs = getComputedStyle(cushion)
-      const probe = document.createElement('span')
-      probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;top:-9999px'
-      probe.style.fontSize = cs.fontSize
-      probe.style.fontWeight = cs.fontWeight
-      probe.style.fontFamily = cs.fontFamily
-      probe.style.letterSpacing = cs.letterSpacing
-      probe.style.textTransform = cs.textTransform
-      document.body.appendChild(probe)
-      probe.textContent = 'Wed'
-      const weekdayWidth = probe.getBoundingClientRect().width
-      probe.textContent = '12/14'
-      const dateWidth = probe.getBoundingClientRect().width
-      probe.remove()
-      const needed = Math.max(weekdayWidth, dateWidth) + 12 // text + cushion padding
-      setDayHeaderCompact(colWidth < needed)
-    }
-    // FullCalendar reflows its inner day columns on a later tick than the
-    // container resize, so re-measure across a few frames to read settled widths.
-    const timers: ReturnType<typeof setTimeout>[] = []
-    const schedule = () => {
-      cancelAnimationFrame(frame)
-      frame = requestAnimationFrame(measure)
-      timers.forEach(clearTimeout)
-      timers.length = 0
-      timers.push(setTimeout(measure, 130), setTimeout(measure, 330))
-    }
-    schedule()
-    const ro = new ResizeObserver(schedule)
-    ro.observe(container)
-    return () => { cancelAnimationFrame(frame); timers.forEach(clearTimeout); ro.disconnect() }
-  }, [resources, currentView, visibleRange])
-
-  const applyResourceStriping = useCallback(() => {
-    const container = wrapperRef.current
-    if (!container) return
-    const resourceIds = resources.map((r: { id: string }) => r.id)
-    if (resourceIds.length < 2) return
-    container.querySelectorAll('[data-resource-id]').forEach((el: Element) => {
-      const rid = el.getAttribute('data-resource-id')
-      const idx = rid ? resourceIds.indexOf(rid) : -1
-      el.classList.toggle('fc-resource-alt', idx % 2 === 1)
-    })
-  }, [resources])
-
-  useEffect(() => {
-    applyResourceStriping()
-    const t1 = setTimeout(applyResourceStriping, 100)
-    const t2 = setTimeout(applyResourceStriping, 300)
-    return () => { clearTimeout(t1); clearTimeout(t2) }
-  }, [applyResourceStriping, currentView, visibleRange, bookings])
-
-  // Listen for cross-plugin booking open requests (e.g., from financial invoice detail)
-  useEffect(() => {
-    function handleOpenBooking(e: Event) {
-      const detail = (e as CustomEvent).detail ?? {}
-      const externalSource = detail.source
-        ? { type: String(detail.source), id: detail.waitlistId, waitlistId: detail.waitlistId }
-        : undefined
-      if (detail.bookingId) {
-        openModal('edit', { bookingId: detail.bookingId, externalSource })
-        return
-      }
-      openModal('create', {
-        prefill: detail.prefill ?? {
-          clientId: detail.clientId,
-          professionalId: detail.professionalId,
-          locationId: detail.locationId,
-          startsAt: detail.startsAt,
-        },
-        externalSource,
-      })
-    }
-    window.addEventListener('agenda:open-booking', handleOpenBooking)
-    return () => window.removeEventListener('agenda:open-booking', handleOpenBooking)
-  }, [openModal])
-
-  // Custom day header: weekday + date stacked. When columns get narrow it
-  // collapses the weekday to a single initial (S / 16, Google-Calendar style).
-  // Always returns explicit content — returning undefined renders an EMPTY
-  // header in the React adapter rather than falling back to the default.
-  const dayHeaderContent = useCallback((arg: any) => {
-    const date: Date = arg.date
-    const dateLocale = currentLocale === 'pt-BR' ? 'pt-BR' : 'en'
-    // Inline styles (not CSS classes) so stacking is guaranteed regardless of
-    // the runtime style-injection state.
-    const wrapStyle: React.CSSProperties = { display: 'flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1.15 }
-    const dateStyle: React.CSSProperties = { fontSize: '0.65rem', opacity: 0.75 }
-    if (dayHeaderCompact) {
-      const letter = date.toLocaleDateString(dateLocale, { weekday: 'narrow' })
-      return (
-        <div style={wrapStyle}>
-          <span style={{ fontWeight: 600 }}>{letter}</span>
-          <span style={dateStyle}>{date.getDate()}</span>
-        </div>
-      )
-    }
-    const weekday = date.toLocaleDateString(dateLocale, { weekday: 'short' })
-    return (
-      <div style={wrapStyle}>
-        <span>{weekday}</span>
-        <span style={dateStyle}>{`${date.getMonth() + 1}/${date.getDate()}`}</span>
-      </div>
-    )
-  }, [dayHeaderCompact, currentLocale])
-
-  const resourceLabelContent = useCallback((arg: any) => {
-    const { id, title, extendedProps } = arg.resource
-    const initials = title.split(' ').map((n: string) => n[0]).join('').slice(0, 2)
-    return (
-      <div className="flex items-center gap-2 px-2 py-1.5">
-        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[10px] font-bold text-primary">{initials}</div>
-        <div className="min-w-0">
-          <PersonLink
-            personId={id}
-            name={title}
-            size="sm"
-            tab="schedule"
-            profileHref={`#/registry/staff/${id}/schedule`}
-          />
-          {extendedProps?.locationName && <p className="text-[10px] text-muted-foreground truncate">{extendedProps.locationName}</p>}
-        </div>
-      </div>
-    )
-  }, [])
-
-  const eventContent = useCallback((arg: any) => {
-    // Location label events — render as a small tag
-    if (arg.event.extendedProps?.isLocationLabel) {
-      return (
-        <div className="px-1.5 py-0.5 overflow-hidden">
-          <p className="text-[10px] font-medium truncate">{arg.event.title}</p>
-        </div>
-      )
-    }
-    const serviceNames = arg.event.extendedProps?.serviceNames
-    const start = arg.event.start
-    const end = arg.event.end
-    const fmt = (d: Date) => `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
-    const timeRange = start && end ? `${fmt(start)} – ${fmt(end)}` : start ? fmt(start) : ''
-    return (
-      <div className="px-1.5 py-0.5 overflow-hidden leading-tight h-full">
-        <div className="flex items-start justify-between gap-1">
-          <p className="text-[11px] font-semibold truncate">{arg.event.title}</p>
-          {serviceNames && <p className="text-[10px] opacity-60 truncate shrink-0 max-w-[45%] text-right">{serviceNames}</p>}
-        </div>
-        {timeRange && <p className="text-[9px] opacity-50">{timeRange}</p>}
-      </div>
-    )
-  }, [])
-
-  return (
-    <div className="flex h-[calc(100vh-7.5rem)]">
-      {/* ═══ LEFT SIDEBAR — hidden on mobile ═══ */}
-      <div className="hidden md:flex w-[220px] shrink-0 flex-col overflow-y-auto py-4 px-3 mr-4">
-        {/* + Create button */}
-        <button
-          onClick={() => openModal('create')}
-          className="flex items-center gap-2 rounded-button bg-primary text-primary-foreground border border-primary pl-3 pr-4 py-1.5 text-sm font-semibold hover:bg-primary/90 shadow-button-primary active:shadow-button-inset transition-all mb-6 w-fit"
-        >
-          <Plus className="h-4 w-4" />
-          {t('agenda.sidebar.create')}
-        </button>
-
-        {/* Mini month calendar */}
-        <MiniCalendar selectedDate={selectedDate} onDateSelect={handleMiniDateSelect} />
-
-        {/* Agendas (professional filter) — hidden when no booking type uses a
-            professional (e.g. eventMode:'simple'). */}
-        {config.capabilities.professional && (<>
-        <div className="h-px bg-border my-4" />
-
-        <button onClick={() => setProfSectionOpen((p) => !p)}
-          className="flex items-center justify-between w-full text-xs font-medium text-muted-foreground hover:text-foreground py-1 transition-colors">
-          <span>Agendas</span>
-          <ChevronDown className={`h-3.5 w-3.5 transition-transform ${profSectionOpen ? '' : '-rotate-90'}`} />
-        </button>
-        {profSectionOpen && (
-          <div className="mt-1.5 space-y-0.5">
-            {professionals.map((prof) => {
-              const active = selectedProfIds.length === 0 || selectedProfIds.includes(prof.id)
-              return (
-                <label key={prof.id} className="flex items-center gap-2.5 rounded px-1 py-1 cursor-pointer hover:bg-muted/50 transition-colors">
-                  <span className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-2 transition-colors ${
-                    active ? 'border-primary bg-primary' : 'border-muted-foreground/30'
-                  }`}>
-                    {active && <svg className="h-2.5 w-2.5 text-primary-foreground" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}
-                  </span>
-                  <span className={`text-xs truncate ${active ? 'text-foreground' : 'text-muted-foreground'}`}>{prof.name}</span>
-                  <input type="checkbox" className="sr-only" checked={active} onChange={() => toggleProfessional(prof.id)} />
-                </label>
-              )
-            })}
-          </div>
-        )}
-        </>)}
-
-        {/* Status filter — hidden when no booking type uses a status workflow
-            (e.g. eventMode:'simple'). */}
-        {config.capabilities.status && (<>
-        <div className="h-px bg-border my-4" />
-
-        <button onClick={() => setStatusSectionOpen((p) => !p)}
-          className="flex items-center justify-between w-full text-xs font-medium text-muted-foreground hover:text-foreground py-1 transition-colors">
-          <span>Status</span>
-          <ChevronDown className={`h-3.5 w-3.5 transition-transform ${statusSectionOpen ? '' : '-rotate-90'}`} />
-        </button>
-        {statusSectionOpen && (
-          <div className="mt-1.5 space-y-0.5">
-            {config.statuses.map((st) => {
-              const active = selectedStatuses.length === 0 || selectedStatuses.includes(st.value)
-              return (
-                <label key={st.value} className="flex items-center gap-2.5 rounded px-1 py-1 cursor-pointer hover:bg-muted/50 transition-colors">
-                  <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-2 transition-colors"
-                    style={{ borderColor: active ? st.color : st.color + '40', backgroundColor: active ? st.color : 'transparent' }}>
-                    {active && <svg className="h-2.5 w-2.5 text-white" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}
-                  </span>
-                  <span className={`text-xs ${active ? 'text-foreground' : 'text-muted-foreground'}`}>{st.label}</span>
-                  <input type="checkbox" className="sr-only" checked={active} onChange={() => toggleStatus(st.value)} />
-                </label>
-              )
-            })}
-          </div>
-        )}
-        </>)}
-      </div>
-
-      {/* ═══ MAIN AREA ═══ */}
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-        {/* Toolbar */}
-        <div className="shrink-0 border-b">
-          {/* Row 1 — create + date nav + title (left), desktop switcher + settings
-              (right). Extra right padding on mobile clears the transparent header's
-              floating profile avatar, which otherwise overlaps the settings gear. */}
-          <div className="flex items-center justify-between pl-4 pr-14 md:px-4 h-12">
-            <div className="flex items-center gap-3 min-w-0">
-              {/* Mobile create button */}
-              <button onClick={() => openModal('create')}
-                className="md:hidden flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
-                <Plus className="h-4 w-4" />
-              </button>
-
-              {/* Date navigation drives the FullCalendar api — shown on desktop and,
-                  on mobile, only when a grid view is active (the list paginates
-                  itself, so it has no grid to page through). */}
-              <div className={`${mobileGridActive ? 'flex' : 'hidden'} md:flex items-center gap-3`}>
-                <button onClick={handleToday}
-                  className="rounded-md border px-3 py-1 text-sm font-medium hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors">
-                  {t('agenda.toolbar.today')}
-                </button>
-                <div className="flex items-center gap-0.5">
-                  <button onClick={handlePrev} className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted transition-colors">
-                    <ChevronLeft className="h-4 w-4" />
-                  </button>
-                  <button onClick={handleNext} className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted transition-colors">
-                    <ChevronRight className="h-4 w-4" />
-                  </button>
-                </div>
-              </div>
-              <h1 className="text-base sm:text-lg font-normal truncate">{isMobile && !mobileGridActive ? t('agenda.calendar.viewAgenda') : calendarTitle}</h1>
-            </div>
-
-            <div className="flex items-center gap-1 shrink-0">
-              <div className="hidden md:flex items-center gap-1">
-                {viewOptions.map((opt) => (
-                  <button key={opt.key} onClick={() => handleViewChange(opt.key)}
-                    className={`rounded-md px-3 py-1 text-sm transition-colors ${
-                      currentView === opt.key
-                        ? 'bg-primary/10 text-primary font-medium'
-                        : 'text-muted-foreground hover:bg-muted/50'
-                    }`}>
-                    {t(opt.labelKey)}
-                  </button>
-                ))}
-              </div>
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={() => window.location.hash = '/settings/agenda'}
-                title="Agenda Settings"
-                className="ml-1"
-              >
-                <Settings className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-
-          {/* Row 2 (mobile only) — compact segmented view switcher on its own row so
-              it never collides with the floating avatar. Dia/Semana/Mês mount the
-              calendar; Lista returns to the thumb-friendly agenda list. */}
-          <div className="flex md:hidden items-center gap-1 overflow-x-auto px-3 pb-2">
-            {mobileViewOptions.map((opt) => (
-              <button key={opt.key} onClick={() => handleMobileViewChange(opt.key)}
-                className={`shrink-0 rounded-md px-3 py-1 text-sm transition-colors ${
-                  mobileView === opt.key
-                    ? 'bg-primary/10 text-primary font-medium'
-                    : 'text-muted-foreground hover:bg-muted/50'
-                }`}>
-                {t(opt.labelKey)}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Mobile list view → thumb-friendly agenda list; otherwise (desktop, or a
-            mobile grid view the user switched to) → FullCalendar grid. */}
-        {isMobile && !mobileGridActive ? (
-          <AgendaMobileList
-            bookings={bookings}
-            statusColors={statusColors}
-            currencyCode={config.currency.code}
-            onSelect={(b) => openModal('edit', { bookingId: b.id })}
-          />
-        ) : professionalsLoading && professionals.length === 0 ? (
-          <CalendarSkeleton profCount={2} />
-        ) : (
-        <div ref={wrapperRef} className="flex-1 overflow-hidden agenda-calendar">
-          <FullCalendar
-            ref={calendarRef}
-            plugins={[dayGridPlugin, timeGridPlugin, resourceTimeGridPlugin, interactionPlugin, listPlugin]}
-            initialView={mobileGridActive ? mobileView : effectiveInitialView}
-            schedulerLicenseKey="CC-Attribution-NonCommercial-NoDerivatives"
-            resources={resourceCapable ? resources : undefined}
-            events={events}
-            headerToolbar={false}
-            locale={fcLocale}
-            height="100%"
-            slotMinTime={effectiveBusinessHours.startTime + ':00'}
-            slotMaxTime={effectiveBusinessHours.endTime + ':00'}
-            slotDuration={{ minutes: config.slotDuration }}
-            allDaySlot={false}
-            nowIndicator={true}
-            editable={config.modules.dragAndDrop}
-            selectable={true}
-            selectMirror={true}
-            eventOverlap={false}
-            datesSet={handleDatesSet}
-            eventDidMount={handleEventDidMount}
-            eventClick={handleEventClick}
-            eventMouseEnter={handleEventMouseEnter}
-            eventMouseLeave={handleEventMouseLeave}
-            select={handleSelect}
-            eventDrop={handleEventDrop}
-            resourceLabelContent={resourceLabelContent}
-            dayHeaderContent={dayHeaderContent}
-            eventContent={eventContent}
-            resourceOrder="title"
-            stickyHeaderDates={true}
-            expandRows={false}
-            eventTimeFormat={{ hour: '2-digit', minute: '2-digit', hour12: false }}
-            slotLabelFormat={{ hour: '2-digit', minute: '2-digit', hour12: false }}
-          />
-        </div>
-        )}
-      </div>
-
-      {/* Popover — stays mounted until animation finishes */}
-      {selectedBooking && popoverAnchor && popoverVisible && (
-        <AppointmentPopover booking={selectedBooking} position={popoverAnchor}
-          onClose={() => {
-            // Called AFTER the popover's exit animation finishes
-            setPopoverVisible(false)
-            setSelectedBooking(null)
-            setPopoverAnchor(null)
-          }}
-          onEdit={(id) => {
-            setPopoverVisible(false)
-            setSelectedBooking(null)
-            setPopoverAnchor(null)
-            openModal('edit', { bookingId: id })
-          }} />
-      )}
-
-      {/* Context Menu */}
-      {contextMenu && (
-        <EventContextMenu
-          booking={contextMenu.booking}
-          position={{ x: contextMenu.x, y: contextMenu.y }}
-          onClose={() => { setContextMenuVisible(false); setContextMenu(null) }}
-          onEdit={(id) => { setContextMenuVisible(false); setContextMenu(null); openModal('edit', { bookingId: id }) }}
-        />
-      )}
-
-      {/* No-schedule confirm */}
-      <ConfirmDialog
-        open={!!scheduleConfirm}
-        variant="warning"
-        title={t('agenda.calendar.noScheduleConfirm')}
-        confirmLabel={t('common.confirm')}
-        cancelLabel={t('common.cancel')}
-        onConfirm={() => { const cb = scheduleConfirm?.onConfirm; setScheduleConfirm(null); cb?.() }}
-        onCancel={() => setScheduleConfirm(null)}
-      />
-
-      {/* Modal — always mounted, Radix controls open/close animation */}
-      <AppointmentModal
-        open={modalState.open}
-        mode={modalState.mode}
-        bookingId={modalState.bookingId}
-        prefill={modalState.prefill}
-        initialTab={modalState.initialTab}
-        externalSource={modalState.externalSource}
-        onClose={closeModal}
-        onCreated={(newId, source) => {
-          if (config.onBookingCreated) {
-            void Promise.resolve(config.onBookingCreated({ bookingId: newId, source })).catch((error: unknown) => {
-              console.error('Failed to run agenda booking-created bridge', error)
-            })
-          }
-          // After a short delay (let calendar re-render), find the event and show popover
-          setTimeout(() => {
-            const booking = bookings.find((b: CalendarBooking) => b.id === newId)
-            if (!booking) return
-            const el = document.querySelector(`[data-booking-id="${newId}"]`) as HTMLElement | null
-            if (el) {
-              const rect = el.getBoundingClientRect()
-              const popW = 320, popH = 340
-              let x = rect.right + 8
-              let y = rect.top + rect.height / 2 - popH / 2
-              if (x + popW > window.innerWidth - 16) x = rect.left - popW - 8
-              if (y + popH > window.innerHeight - 16) y = window.innerHeight - popH - 16
-              if (y < 16) y = 16
-              setSelectedBooking(booking)
-              setPopoverAnchor({ x, y })
-              setPopoverVisible(true)
-            }
-          }, 400)
-        }} />
-    </div>
-  )
-}