@fayz-ai/plugin-agenda 0.1.3

package/src/components/SearchCombobox.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { Search, Plus } from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Reusable search combobox with keyboard navigation + optional create
+// ---------------------------------------------------------------------------
+
+export interface ComboboxOption {
+  id: string
+  label: string
+  subtitle?: string
+  price?: number
+  data?: Record<string, unknown>
+}
+
+interface SearchComboboxProps {
+  value: string
+  onChange: (value: string) => void
+  onSelect: (option: ComboboxOption) => void
+  options: ComboboxOption[]
+  placeholder?: string
+  autoFocus?: boolean
+  onBlurEmpty?: () => void
+  renderRight?: (option: ComboboxOption) => React.ReactNode
+  /** Show a "+ Create ..." option when search has no exact match */
+  allowCreate?: boolean
+  /** Called when user clicks the create option. Receives the current search text. */
+  onCreateNew?: (searchText: string) => void
+  /** Label for the create option (default: 'Create') */
+  createLabel?: string
+  className?: string
+  /** Minimal style — no border/bg, just underline on focus. For inline use. */
+  minimal?: boolean
+  /** Inline label shown when collapsed. Click reveals the search input. */
+  inlineLabel?: string
+  /** Icon for the inline label: 'search' (default) or 'plus' (for "add" actions) */
+  inlineIcon?: 'search' | 'plus'
+  /** Show a loading skeleton in the dropdown while results are being fetched */
+  loading?: boolean
+  /** Called when the input gains focus */
+  onFocus?: () => void
+}
+
+export function SearchCombobox({
+  value, onChange, onSelect, options, placeholder, autoFocus, onBlurEmpty,
+  renderRight, allowCreate, onCreateNew, createLabel = 'Create', className, minimal, inlineLabel, inlineIcon = 'search',
+  loading, onFocus: onFocusProp,
+}: SearchComboboxProps) {
+  const [open, setOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const [expanded, setExpanded] = useState(!inlineLabel)
+  const [dropRect, setDropRect] = useState<DOMRect | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  // When value is set externally (e.g. edit mode), auto-expand; collapse when cleared
+  useEffect(() => {
+    if (value && inlineLabel) setExpanded(true)
+    if (!value && inlineLabel && !open) setExpanded(false)
+  }, [value, open])
+
+  function updateRect() {
+    if (wrapperRef.current) setDropRect(wrapperRef.current.getBoundingClientRect())
+  }
+
+  // Show create option only when dropdown is open, has text, and no exact match
+  const showCreate = open && allowCreate && onCreateNew && value.trim().length > 0 &&
+    !options.some((o) => o.label.toLowerCase() === value.trim().toLowerCase())
+
+  const totalItems = options.length + (showCreate ? 1 : 0)
+
+  useEffect(() => { setActiveIndex(-1) }, [options])
+  useEffect(() => {
+    if ((options.length > 0 || showCreate || loading) && document.activeElement === inputRef.current) setOpen(true)
+  }, [options, showCreate, loading])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!open || totalItems === 0) {
+      if (e.key === 'ArrowDown' && totalItems > 0) {
+        e.preventDefault()
+        setOpen(true)
+        setActiveIndex(0)
+      }
+      return
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        setActiveIndex((prev) => (prev + 1) % totalItems)
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setActiveIndex((prev) => (prev <= 0 ? totalItems - 1 : prev - 1))
+        break
+      case 'Enter':
+        e.preventDefault()
+        if (activeIndex >= 0 && activeIndex < options.length) {
+          onSelect(options[activeIndex])
+          setOpen(false)
+          setActiveIndex(-1)
+        } else if (showCreate && activeIndex === options.length) {
+          onCreateNew?.(value.trim())
+          setOpen(false)
+          setActiveIndex(-1)
+        }
+        break
+      case 'Escape':
+        e.preventDefault()
+        setOpen(false)
+        setActiveIndex(-1)
+        break
+    }
+  }, [open, options, totalItems, activeIndex, onSelect, showCreate, onCreateNew, value])
+
+  useEffect(() => {
+    if (activeIndex < 0 || !listRef.current) return
+    const items = listRef.current.children
+    if (items[activeIndex]) (items[activeIndex] as HTMLElement).scrollIntoView({ block: 'nearest' })
+  }, [activeIndex])
+
+  function handleBlur() {
+    setTimeout(() => {
+      setOpen(false)
+      setActiveIndex(-1)
+      if (!value && onBlurEmpty) onBlurEmpty()
+      if (!value && inlineLabel) setExpanded(false)
+    }, 200)
+  }
+
+  const hasDropdown = open && (options.length > 0 || showCreate || loading)
+
+  // Collapsed inline label — click to expand
+  if (!expanded && inlineLabel) {
+    const isPlus = inlineIcon === 'plus'
+    return (
+      <button type="button" onClick={() => { setExpanded(true); setTimeout(() => inputRef.current?.focus(), 50) }}
+        className={`flex items-center gap-1.5 w-full text-left text-sm py-1.5 pl-2 transition-colors ${
+          isPlus ? 'text-primary hover:text-primary/80' : 'text-muted-foreground hover:text-foreground'
+        } ${className ?? ''}`}>
+        {isPlus && <Plus className="h-3.5 w-3.5 shrink-0" />}
+        {inlineLabel}
+      </button>
+    )
+  }
+
+  return (
+    <div ref={wrapperRef} className={`relative ${className ?? ''}`}>
+      {!minimal && (
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+      )}
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={(e) => { onChange(e.target.value); updateRect(); setOpen(true) }}
+        onFocus={() => { updateRect(); onFocusProp?.(); if (options.length > 0 || showCreate || loading) setOpen(true) }}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        className={minimal
+          ? 'w-full bg-transparent pl-2 pr-3 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none border-b border-transparent hover:border-border focus:border-foreground transition-colors'
+          : 'w-full rounded-lg border bg-background pl-8 pr-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring'
+        }
+        role="combobox"
+        aria-expanded={hasDropdown}
+        aria-autocomplete="list"
+        aria-activedescendant={activeIndex >= 0 ? `combobox-opt-${activeIndex}` : undefined}
+      />
+      {hasDropdown && dropRect && createPortal(
+        <div ref={listRef} role="listbox" data-modal-passthrough
+          style={{ position: 'fixed', left: dropRect.left, top: dropRect.bottom + 4, width: dropRect.width, zIndex: 9999, pointerEvents: 'auto' }}
+          className="fayz-glass-surface max-h-52 overflow-y-auto rounded-lg border bg-popover shadow-lg py-0.5 animate-in fade-in zoom-in-95 duration-100">
+          {loading && options.length === 0 && (
+            <div className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground">
+              <svg className="h-3.5 w-3.5 animate-spin shrink-0" viewBox="0 0 16 16" fill="none">
+                <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.5" opacity="0.25" />
+                <path d="M14.5 8a6.5 6.5 0 00-6.5-6.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+              <span>Buscando…</span>
+            </div>
+          )}
+          {options.map((opt, i) => (
+            <div key={opt.id} id={`combobox-opt-${i}`} role="option" aria-selected={i === activeIndex}
+              onMouseDown={(e) => { e.preventDefault(); onSelect(opt); setOpen(false) }}
+              onMouseEnter={() => setActiveIndex(i)}
+              className={`flex w-full items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors ${
+                i === activeIndex ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50'
+              }`}>
+              <div className="flex-1 min-w-0">
+                <p className="truncate font-medium">{opt.label}</p>
+                {opt.subtitle && <p className="truncate text-[11px] text-muted-foreground">{opt.subtitle}</p>}
+              </div>
+              {renderRight && <div className="shrink-0">{renderRight(opt)}</div>}
+            </div>
+          ))}
+          {showCreate && (
+            <div id={`combobox-opt-${options.length}`} role="option" aria-selected={activeIndex === options.length}
+              onMouseDown={(e) => { e.preventDefault(); onCreateNew?.(value.trim()); setOpen(false) }}
+              onMouseEnter={() => setActiveIndex(options.length)}
+              className={`flex w-full items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors border-t ${
+                activeIndex === options.length ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50'
+              }`}>
+              <Plus className="h-3.5 w-3.5 shrink-0" />
+              <span>{createLabel} &ldquo;<span className="font-medium">{value.trim()}</span>&rdquo;</span>
+            </div>
+          )}
+        </div>,
+        document.body,
+      )}
+    </div>
+  )
+}

package/src/components/StatusBadge.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useAgendaConfig } from '../AgendaContext'
+
+export function StatusBadge({ status }: { status: string }) {
+  const config = useAgendaConfig()
+  const statusConfig = config.statuses.find((s) => s.value === status)
+  const color = statusConfig?.color ?? '#6b7280'
+  const label = statusConfig?.label ?? status
+
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium"
+      style={{
+        backgroundColor: `${color}15`,
+        color,
+        border: `1px solid ${color}30`,
+      }}
+    >
+      <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: color }} />
+      {label}
+    </span>
+  )
+}

package/src/config.ts

@@ -0,0 +1,269 @@
+import type { PluginScope, VerticalId } from '@fayz-ai/core'
+import type { EntityLookup } from '@fayz-ai/saas'
+import type { AgendaDataProvider } from './data/types'
+import type { StatusConfig, BookingTypeConfig } from './types'
+import type { AgendaFinancialBridge } from './financial-bridge'
+import type { EntityDef } from '@fayz-ai/core'
+
+// ---------------------------------------------------------------------------
+// Public options interface
+// ---------------------------------------------------------------------------
+
+export interface AgendaPluginLabels {
+  pageTitle: string
+  pageSubtitle: string
+  calendar: string
+  dayView: string
+  weekView: string
+  monthView: string
+  listView: string
+  workingHours: string
+  confirmations: string
+  newAppointment: string
+  filters: string
+}
+
+export interface ConfirmationChannelOption {
+  id: string
+  label: string
+  icon: string
+}
+
+export interface LocationOption {
+  id: string
+  name: string
+  isHQ?: boolean
+}
+
+export interface AgendaPluginOptions {
+  modules?: {
+    workingHours?: boolean
+    confirmations?: boolean
+    conflictDetection?: boolean
+    dragAndDrop?: boolean
+    locationSelection?: boolean
+    /** Enable financial integration (auto-enabled when financialBridge is provided) */
+    financial?: boolean
+  }
+  labels?: Partial<AgendaPluginLabels>
+  currency?: { code?: string; locale?: string; symbol?: string }
+
+  /** Booking kind used in saas_core.bookings.kind (default: 'appointment') */
+  bookingKind?: string
+
+  /** Order kind for financial records (default: 'service_order') */
+  orderKind?: string
+
+  /** Schedule kind in saas_core.schedules.kind (default: 'working_hours') */
+  scheduleKind?: string
+
+  /** Booking type tabs shown in the appointment modal */
+  bookingTypes?: BookingTypeConfig[]
+
+  /** Booking status options */
+  statuses?: StatusConfig[]
+
+  /** Default calendar view (default: 'resourceTimeGridWeek'). Options: 'dayGridMonth', 'timeGridWeek', 'resourceTimeGridWeek', 'listWeek' */
+  defaultCalendarView?: string
+
+  /** Calendar visible time range (default: '07:00'-'21:00') */
+  businessHours?: { startTime: string; endTime: string }
+
+  /** Slot duration in minutes (default: 30) */
+  slotDuration?: number
+
+  /** Person kind for professionals (default: 'staff') */
+  professionalKind?: string
+
+  /** Person kind for clients (default: 'customer') */
+  clientKind?: string
+
+  /** Auto-create an order when creating a booking (default: true) */
+  autoCreateOrder?: boolean
+
+  /** Contact/client lookup */
+  contactLookup?: EntityLookup
+
+  /** Client entity definition for the Client tab in booking modal */
+  clientEntityDef?: EntityDef
+
+  /** Service lookup */
+  serviceLookup?: EntityLookup
+
+  /** Professional/staff lookup */
+  professionalLookup?: EntityLookup
+
+  /** Location lookup */
+  locationLookup?: EntityLookup
+
+  /** Called when user clicks a selected entity link (e.g. view client profile) */
+  onEntityClick?: (type: 'client' | 'service' | 'professional', id: string) => void
+
+  /** Business locations for unit filtering */
+  locations?: LocationOption[]
+
+  /** Confirmation channel options */
+  confirmationChannels?: ConfirmationChannelOption[]
+
+  /** Financial bridge for agenda × financial cross-plugin integration */
+  financialBridge?: AgendaFinancialBridge
+
+  /** Data provider — defaults to Supabase, falls back to mock */
+  dataProvider?: AgendaDataProvider
+
+  /** Default values for schedule block advanced settings */
+  scheduleBlockDefaults?: {
+    bufferMinutes?: number
+    maxConcurrent?: number
+    minAdvanceHours?: number
+    maxAdvanceDays?: number
+  }
+
+  navPosition?: number
+  navSection?: 'main' | 'secondary'
+  scope?: PluginScope
+  verticalId?: VerticalId
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULT_LABELS: AgendaPluginLabels = {
+  pageTitle: 'Agenda',
+  pageSubtitle: 'Calendar and appointment management',
+  calendar: 'Calendar',
+  dayView: 'Day',
+  weekView: 'Week',
+  monthView: 'Month',
+  listView: 'Agenda',
+  workingHours: 'Working Hours',
+  confirmations: 'Confirmations',
+  newAppointment: 'New Appointment',
+  filters: 'Filters',
+}
+
+const DEFAULT_CURRENCY = { code: 'BRL', locale: 'pt-BR', symbol: 'R$' }
+
+const DEFAULT_STATUSES: StatusConfig[] = [
+  { value: 'scheduled', label: 'Scheduled', color: '#6366f1' },
+  { value: 'confirmed', label: 'Confirmed', color: '#3b82f6' },
+  { value: 'in_progress', label: 'In Progress', color: '#f59e0b', availableWhen: 'today_only' },
+  { value: 'completed', label: 'Completed', color: '#10b981', availableWhen: 'today_or_past' },
+  { value: 'cancelled', label: 'Cancelled', color: '#ef4444' },
+  { value: 'no_show', label: 'No Show', color: '#6b7280', availableWhen: 'today_or_past' },
+]
+
+const DEFAULT_BOOKING_TYPES: BookingTypeConfig[] = [
+  {
+    id: 'appointment', label: 'Appointment', icon: 'Calendar', color: '#6366f1',
+    fields: { client: true, professional: true, services: true, location: true, status: true },
+    requiresServices: true, requiresClient: true,
+  },
+  {
+    id: 'task', label: 'Task', icon: 'CheckSquare', color: '#f59e0b',
+    fields: { client: false, professional: true, services: false, location: false, status: true },
+    requiresServices: false, requiresClient: false,
+  },
+  {
+    id: 'block', label: 'Block', icon: 'Ban', color: '#6b7280',
+    fields: { client: false, professional: true, services: false, location: false, status: false },
+    requiresServices: false, requiresClient: false,
+  },
+]
+
+// ---------------------------------------------------------------------------
+// Resolved config — fully merged, no optionals
+// ---------------------------------------------------------------------------
+
+export interface AgendaModules {
+  workingHours: boolean
+  confirmations: boolean
+  conflictDetection: boolean
+  dragAndDrop: boolean
+  locationSelection: boolean
+  financial: boolean
+}
+
+export interface AgendaCurrency {
+  code: string
+  locale: string
+  symbol: string
+}
+
+export interface ResolvedAgendaConfig {
+  modules: AgendaModules
+  labels: AgendaPluginLabels
+  currency: AgendaCurrency
+  bookingKind: string
+  orderKind: string
+  scheduleKind: string
+  statuses: StatusConfig[]
+  bookingTypes: BookingTypeConfig[]
+  businessHours: { startTime: string; endTime: string }
+  slotDuration: number
+  professionalKind: string
+  clientKind: string
+  autoCreateOrder: boolean
+  locations: LocationOption[]
+  confirmationChannels: ConfirmationChannelOption[]
+  contactLookup?: EntityLookup
+  clientEntityDef?: EntityDef
+  serviceLookup?: EntityLookup
+  professionalLookup?: EntityLookup
+  locationLookup?: EntityLookup
+  onEntityClick?: (type: 'client' | 'service' | 'professional', id: string) => void
+  financialBridge?: AgendaFinancialBridge
+  scheduleBlockDefaults: {
+    bufferMinutes: number
+    maxConcurrent: number
+    minAdvanceHours: number
+    maxAdvanceDays: number
+  }
+  defaultCalendarView: string
+}
+
+// ---------------------------------------------------------------------------
+// Config resolver
+// ---------------------------------------------------------------------------
+
+export function resolveConfig(options?: AgendaPluginOptions): ResolvedAgendaConfig {
+  return {
+    modules: {
+      workingHours: options?.modules?.workingHours !== false,
+      confirmations: options?.modules?.confirmations !== false,
+      conflictDetection: options?.modules?.conflictDetection !== false,
+      dragAndDrop: options?.modules?.dragAndDrop !== false,
+      locationSelection: options?.modules?.locationSelection === true,
+      financial: options?.modules?.financial ?? !!options?.financialBridge,
+    },
+    labels: { ...DEFAULT_LABELS, ...options?.labels },
+    currency: { ...DEFAULT_CURRENCY, ...options?.currency },
+    bookingKind: options?.bookingKind ?? 'appointment',
+    orderKind: options?.orderKind ?? 'service_order',
+    scheduleKind: options?.scheduleKind ?? 'working_hours',
+    statuses: options?.statuses ?? DEFAULT_STATUSES,
+    bookingTypes: options?.bookingTypes ?? DEFAULT_BOOKING_TYPES,
+    businessHours: options?.businessHours ?? { startTime: '07:00', endTime: '21:00' },
+    slotDuration: options?.slotDuration ?? 30,
+    professionalKind: options?.professionalKind ?? 'staff',
+    clientKind: options?.clientKind ?? 'customer',
+    autoCreateOrder: options?.autoCreateOrder !== false,
+    locations: options?.locations ?? [],
+    confirmationChannels: options?.confirmationChannels ?? [],
+    contactLookup: options?.contactLookup,
+    clientEntityDef: options?.clientEntityDef,
+    serviceLookup: options?.serviceLookup,
+    professionalLookup: options?.professionalLookup,
+    locationLookup: options?.locationLookup,
+    onEntityClick: options?.onEntityClick,
+    financialBridge: options?.financialBridge,
+    scheduleBlockDefaults: {
+      bufferMinutes: options?.scheduleBlockDefaults?.bufferMinutes ?? 0,
+      maxConcurrent: options?.scheduleBlockDefaults?.maxConcurrent ?? 1,
+      minAdvanceHours: options?.scheduleBlockDefaults?.minAdvanceHours ?? 0,
+      maxAdvanceDays: options?.scheduleBlockDefaults?.maxAdvanceDays ?? 60,
+    },
+    defaultCalendarView: options?.defaultCalendarView ?? 'resourceTimeGridWeek',
+  }
+}

package/src/data/index.ts

@@ -0,0 +1,3 @@
+export type { AgendaDataProvider } from './types'
+export { createMockAgendaProvider } from './mock'
+export { createSupabaseAgendaProvider } from './supabase'