@fayz-ai/plugin-agenda 0.1.3

package/src/components/CalendarSidebar.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import { Filter, X } from 'lucide-react'
+import { useAgendaConfig, useAgendaStore } from '../AgendaContext'
+import { useTranslation } from '@fayz-ai/core'
+import type { Professional } from '../types'
+
+export function CalendarSidebar() {
+  const t = useTranslation()
+  const config = useAgendaConfig()
+  const professionals = useAgendaStore((s) => s.professionals)
+  const selectedProfIds = useAgendaStore((s) => s.selectedProfessionalIds)
+  const selectedStatuses = useAgendaStore((s) => s.selectedStatuses)
+  const selectedLocationId = useAgendaStore((s) => s.selectedLocationId)
+  const setFilters = useAgendaStore((s) => s.setFilters)
+
+  const hasFilters = selectedProfIds.length > 0 || selectedStatuses.length > 0 || !!selectedLocationId
+
+  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 })
+  }
+
+  function clearFilters() {
+    setFilters({ professionalIds: [], statuses: [], locationId: null })
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Filters header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <Filter className="h-4 w-4" />
+          {config.labels.filters}
+        </div>
+        {hasFilters && (
+          <button onClick={clearFilters} className="text-xs text-muted-foreground hover:text-foreground">
+            <X className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+
+      {/* Professional filter */}
+      <div>
+        <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          {t('agenda.sidebar.agendas')}
+        </label>
+        <div className="mt-2 space-y-1">
+          {professionals.map((prof) => (
+            <label key={prof.id} className="flex items-center gap-2 cursor-pointer rounded px-2 py-1 hover:bg-muted/50">
+              <input
+                type="checkbox"
+                checked={selectedProfIds.length === 0 || selectedProfIds.includes(prof.id)}
+                onChange={() => toggleProfessional(prof.id)}
+                className="h-3.5 w-3.5 rounded border-muted-foreground/30"
+              />
+              <div className="flex items-center gap-2 min-w-0">
+                <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
+                  {prof.name.split(' ').map((n) => n[0]).join('').slice(0, 2)}
+                </div>
+                <span className="text-sm truncate">{prof.name}</span>
+              </div>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {/* Status filter */}
+      <div>
+        <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          {t('agenda.sidebar.status')}
+        </label>
+        <div className="mt-2 space-y-1">
+          {config.statuses.map((status) => (
+            <label key={status.value} className="flex items-center gap-2 cursor-pointer rounded px-2 py-1 hover:bg-muted/50">
+              <input
+                type="checkbox"
+                checked={selectedStatuses.length === 0 || selectedStatuses.includes(status.value)}
+                onChange={() => toggleStatus(status.value)}
+                className="h-3.5 w-3.5 rounded border-muted-foreground/30"
+              />
+              <div className="flex items-center gap-2">
+                <div className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: status.color }} />
+                <span className="text-sm">{status.label}</span>
+              </div>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {/* Location filter */}
+      {config.locations.length > 1 && (
+        <div>
+          <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+            {t('agenda.sidebar.location')}
+          </label>
+          <select
+            value={selectedLocationId ?? ''}
+            onChange={(e) => setFilters({ locationId: e.target.value || null })}
+            className="mt-2 block w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1.5 text-sm"
+          >
+            <option value="">{t('agenda.sidebar.allLocations')}</option>
+            {config.locations.map((loc) => (
+              <option key={loc.id} value={loc.id}>{loc.name}</option>
+            ))}
+          </select>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/CalendarToolbar.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { ChevronLeft, ChevronRight, Plus, Calendar } from 'lucide-react'
+import { SegmentedControl } from '@fayz-ai/ui'
+import { useAgendaConfig } from '../AgendaContext'
+import { useTranslation } from '@fayz-ai/core'
+
+interface CalendarToolbarProps {
+  title: string
+  onPrev: () => void
+  onNext: () => void
+  onToday: () => void
+  onViewChange: (view: string) => void
+  currentView: string
+  onNewAppointment: () => void
+}
+
+const VIEW_OPTION_KEYS = [
+  { key: 'dayGridMonth', labelKey: 'agenda.calendar.viewMonth' },
+  { key: 'resourceTimeGridWeek', labelKey: 'agenda.calendar.viewWeek' },
+  { key: 'resourceTimeGridDay', labelKey: 'agenda.calendar.viewDay' },
+  { key: 'listWeek', labelKey: 'agenda.calendar.viewAgenda' },
+] as const
+
+export function CalendarToolbar({
+  title, onPrev, onNext, onToday, onViewChange, currentView, onNewAppointment,
+}: CalendarToolbarProps) {
+  const config = useAgendaConfig()
+  const t = useTranslation()
+
+  return (
+    <div className="flex items-center justify-between pb-4">
+      {/* Left: nav controls + date */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1">
+          <button
+            onClick={onPrev}
+            className="flex h-8 items-center justify-center rounded-lg border px-2 text-sm hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors"
+          >
+            <ChevronLeft className="h-4 w-4" />
+            <span className="hidden sm:inline">{t('agenda.toolbar.previous')}</span>
+          </button>
+          <button
+            onClick={onToday}
+            className="flex h-8 items-center justify-center rounded-lg border px-3 text-sm font-medium hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors"
+          >
+            {t('agenda.toolbar.today')}
+          </button>
+          <button
+            onClick={onNext}
+            className="flex h-8 items-center justify-center rounded-lg border px-2 text-sm hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors"
+          >
+            <span className="hidden sm:inline">{t('agenda.toolbar.next')}</span>
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Calendar className="h-4 w-4 text-muted-foreground" />
+          <h2 className="text-lg font-semibold">{title}</h2>
+        </div>
+      </div>
+
+      {/* Right: view switcher + new */}
+      <div className="flex items-center gap-3">
+        <SegmentedControl
+          size="md"
+          options={VIEW_OPTION_KEYS.map((opt) => ({ value: opt.key, label: t(opt.labelKey) }))}
+          value={currentView}
+          onChange={onViewChange}
+          aria-label="Calendar view"
+        />
+
+        <button
+          onClick={onNewAppointment}
+          className="flex items-center gap-2 rounded-lg bg-primary border border-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 shadow-button-primary active:shadow-button-inset transition-colors"
+        >
+          <Plus className="h-4 w-4" />
+          <span className="hidden sm:inline">{config.labels.newAppointment}</span>
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/EventContextMenu.tsx

@@ -0,0 +1,122 @@
+import React, { useRef, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom'
+import { Pencil, Trash2, Check } from 'lucide-react'
+import { FloatingPanel } from './FloatingPanel'
+import { useAgendaConfig, useAgendaStore } from '../AgendaContext'
+import { useTranslation } from '@fayz-ai/core'
+import { isStatusAvailable } from '../types'
+import type { CalendarBooking } from '../types'
+
+// ---------------------------------------------------------------------------
+// Tooltip — portaled to body
+// ---------------------------------------------------------------------------
+
+function Tooltip({ anchor, label }: { anchor: DOMRect; label: string }) {
+  return createPortal(
+    <div style={{ position: 'fixed', left: anchor.left + anchor.width / 2, top: anchor.bottom + 6, transform: 'translateX(-50%)', zIndex: 120 }}
+      className="pointer-events-none">
+      <div className="rounded-md bg-foreground text-background px-2 py-0.5 text-[11px] font-medium whitespace-nowrap shadow-lg">
+        {label}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Status dot with portaled tooltip
+// ---------------------------------------------------------------------------
+
+function StatusDot({ color, label, isActive, disabled, onClick }: {
+  color: string; label: string; isActive: boolean; disabled?: boolean; onClick: () => void
+}) {
+  const [hover, setHover] = useState(false)
+  const btnRef = useRef<HTMLButtonElement>(null)
+  const [rect, setRect] = useState<DOMRect | null>(null)
+
+  return (
+    <>
+      <button ref={btnRef} type="button" onClick={disabled ? undefined : onClick} disabled={disabled}
+        onMouseEnter={() => { setHover(true); if (btnRef.current) setRect(btnRef.current.getBoundingClientRect()) }}
+        onMouseLeave={() => setHover(false)}
+        className={`flex h-7 w-7 items-center justify-center rounded-full transition-all ${
+          disabled ? 'opacity-25 cursor-not-allowed' : isActive ? 'ring-2 ring-offset-2 ring-offset-popover' : 'hover:scale-110'
+        }`}
+        style={{ backgroundColor: color, ['--tw-ring-color' as any]: isActive ? color : undefined }}>
+        {isActive && <Check className="h-3.5 w-3.5 text-white" strokeWidth={2.5} />}
+      </button>
+      {hover && rect && <Tooltip anchor={rect} label={label} />}
+    </>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Context Menu
+// ---------------------------------------------------------------------------
+
+interface Props {
+  booking: CalendarBooking
+  position: { x: number; y: number }
+  onClose: () => void
+  onEdit: (id: string) => void
+}
+
+export function EventContextMenu({ booking, position, onClose, onEdit }: Props) {
+  const t = useTranslation()
+  const config = useAgendaConfig()
+  const updateStatus = useAgendaStore((s) => s.updateBookingStatus)
+  const deleteBooking = useAgendaStore((s) => s.deleteBooking)
+  const [confirming, setConfirming] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+
+  async function handleDelete() {
+    setDeleting(true)
+    try { await deleteBooking(booking.id); onClose() } catch { setDeleting(false) }
+  }
+
+  return (
+    <FloatingPanel position={position} width={230} height={180} offset={{ x: 4, y: 4 }} onClose={onClose} zIndex={110}>
+      {(panel) => (
+        <>
+          <div className="py-1">
+            <button onClick={() => panel.expandThen(() => onEdit(booking.id))}
+              className="flex w-full items-center gap-3 px-4 py-2 text-sm hover:bg-muted/50 transition-colors">
+              <Pencil className="h-4 w-4 text-muted-foreground" /> {t('agenda.contextMenu.edit')}
+            </button>
+            {confirming ? (
+              <div className="flex items-center justify-between px-4 py-2">
+                <span className="text-xs text-destructive font-medium">{t('agenda.appointment.deleteConfirm')}</span>
+                <div className="flex items-center gap-1.5">
+                  <button onClick={() => setConfirming(false)}
+                    className="rounded px-2 py-0.5 text-[11px] font-medium hover:bg-muted/50 transition-colors">{t('agenda.appointment.cancel')}</button>
+                  <button onClick={handleDelete} disabled={deleting}
+                    className="rounded bg-destructive border border-destructive px-2 py-0.5 text-[11px] font-medium text-destructive-foreground hover:bg-destructive/90 shadow-button-primary active:shadow-button-inset disabled:opacity-40 transition-colors">{deleting ? t('agenda.appointment.deleting') : t('agenda.appointment.confirmDelete')}</button>
+                </div>
+              </div>
+            ) : (
+              <button onClick={() => setConfirming(true)}
+                className="flex w-full items-center gap-3 px-4 py-2 text-sm hover:bg-muted/50 transition-colors text-destructive">
+                <Trash2 className="h-4 w-4" /> {t('agenda.contextMenu.delete')}
+              </button>
+            )}
+          </div>
+
+          <div className="border-t px-4 py-3">
+            <p className="text-[11px] font-medium text-muted-foreground mb-2">{t('agenda.contextMenu.changeStatus')}</p>
+            <div className="flex items-center gap-1.5">
+              {config.statuses.map((s) => {
+                const available = isStatusAvailable(s, booking.startsAt)
+                return (
+                  <StatusDot key={s.value} color={s.color} label={available ? s.label : `${s.label} ${t('agenda.contextMenu.notAvailable')}`}
+                    isActive={booking.status === s.value}
+                    disabled={!available}
+                    onClick={() => { if (available) { updateStatus(booking.id, s.value); panel.dismiss() } }} />
+                )
+              })}
+            </div>
+          </div>
+        </>
+      )}
+    </FloatingPanel>
+  )
+}

package/src/components/FloatingPanel.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+
+// ---------------------------------------------------------------------------
+// Inject animations once
+// ---------------------------------------------------------------------------
+
+const STYLE_ID = 'saas-floating-panel'
+if (typeof document !== 'undefined' && !document.getElementById(STYLE_ID)) {
+  const s = document.createElement('style')
+  s.id = STYLE_ID
+  s.textContent = `
+    @keyframes _fp-dismiss { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(.96) } }
+    @keyframes _fp-expand  { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(1.08) } }
+    .saas-fp-dismissing { animation: _fp-dismiss 150ms ease-in forwards; pointer-events: none }
+    .saas-fp-expanding  { animation: _fp-expand 200ms ease-in forwards; pointer-events: none }
+  `
+  document.head.appendChild(s)
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type Phase = 'visible' | 'dismissing' | 'expanding'
+
+export interface FloatingPanelRef {
+  /** Dismiss with fade-out, then call onClose */
+  dismiss: () => void
+  /** Expand-out animation (e.g. popover → modal), then call callback */
+  expandThen: (callback: () => void) => void
+}
+
+interface FloatingPanelProps {
+  position: { x: number; y: number }
+  width: number
+  height: number
+  /** Offset from cursor (default: { x: 0, y: 0 }) */
+  offset?: { x: number; y: number }
+  onClose: () => void
+  className?: string
+  children: (ref: FloatingPanelRef) => React.ReactNode
+  zIndex?: number
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function FloatingPanel({
+  position, width, height, offset, onClose, className, children, zIndex = 100,
+}: FloatingPanelProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [phase, setPhase] = useState<Phase>('visible')
+  const phaseRef = useRef<Phase>('visible')
+  phaseRef.current = phase
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+  const expandCallbackRef = useRef<(() => void) | null>(null)
+
+  const dismiss = useCallback(() => {
+    if (phaseRef.current !== 'visible') return
+    setPhase('dismissing')
+    setTimeout(() => onCloseRef.current(), 150)
+  }, [])
+
+  const expandThen = useCallback((callback: () => void) => {
+    if (phaseRef.current !== 'visible') return
+    expandCallbackRef.current = callback
+    setPhase('expanding')
+    setTimeout(() => {
+      callback()
+      onCloseRef.current()
+    }, 220)
+  }, [])
+
+  // Outside click + Escape
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (phaseRef.current !== 'visible') return
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        // Don't dismiss if clicking another calendar event — let eventClick handle it
+        const target = e.target as HTMLElement
+        if (target.closest('.fc-event')) return
+        dismiss()
+      }
+    }
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') dismiss()
+    }
+    document.addEventListener('mousedown', handleClick)
+    document.addEventListener('keydown', handleKey)
+    return () => {
+      document.removeEventListener('mousedown', handleClick)
+      document.removeEventListener('keydown', handleKey)
+    }
+  }, [dismiss])
+
+  // Clamp position to viewport
+  const ox = offset?.x ?? 0
+  const oy = offset?.y ?? 0
+  let x = position.x + ox
+  let y = position.y + oy
+  if (x + width > window.innerWidth - 12) x = x - width - ox * 2
+  if (y + height > window.innerHeight - 12) y = y - height - oy * 2
+  if (x < 12) x = 12
+  if (y < 12) y = 12
+
+  const panelRef: FloatingPanelRef = { dismiss, expandThen }
+
+  return createPortal(
+    <div ref={ref}
+      style={{ position: 'fixed', left: x, top: y, zIndex, transition: phase === 'visible' ? 'left 200ms ease-out, top 200ms ease-out' : undefined }}
+      className={`fayz-glass-surface rounded-modal border bg-popover shadow-lg overflow-hidden ${
+        phase === 'expanding' ? 'saas-fp-expanding'
+        : phase === 'dismissing' ? 'saas-fp-dismissing'
+        : 'animate-in fade-in zoom-in-95 duration-150'
+      } ${className ?? ''}`}>
+      {children(panelRef)}
+    </div>,
+    document.body,
+  )
+}

package/src/components/MiniCalendar.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { getCurrentLocale } from '@fayz-ai/core'
+
+interface MiniCalendarProps {
+  selectedDate: Date
+  onDateSelect: (date: Date) => void
+  onMonthChange?: (date: Date) => void
+}
+
+const DAY_LABELS: Record<string, string[]> = {
+  en: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+  'pt-BR': ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+}
+
+function isSameDay(a: Date, b: Date) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+function isToday(d: Date) {
+  return isSameDay(d, new Date())
+}
+
+function toDateLocale(locale: string): string {
+  if (locale === 'pt-BR') return 'pt-BR'
+  return 'en-US'
+}
+
+export function MiniCalendar({ selectedDate, onDateSelect, onMonthChange }: MiniCalendarProps) {
+  const locale = getCurrentLocale()
+  const [viewMonth, setViewMonth] = React.useState(() => new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1))
+
+  const monthLabel = viewMonth.toLocaleDateString(toDateLocale(locale), { month: 'long', year: 'numeric' })
+  const dayLabels = DAY_LABELS[locale] ?? DAY_LABELS.en
+
+  const weeks = useMemo(() => {
+    const year = viewMonth.getFullYear()
+    const month = viewMonth.getMonth()
+    const firstDay = new Date(year, month, 1)
+    const startOffset = firstDay.getDay()
+    const daysInMonth = new Date(year, month + 1, 0).getDate()
+
+    const cells: (Date | null)[] = []
+    for (let i = 0; i < startOffset; i++) cells.push(null)
+    for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d))
+    while (cells.length % 7 !== 0) cells.push(null)
+
+    const rows: (Date | null)[][] = []
+    for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7))
+    return rows
+  }, [viewMonth])
+
+  function prevMonth() {
+    const d = new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1)
+    setViewMonth(d)
+    onMonthChange?.(d)
+  }
+
+  function nextMonth() {
+    const d = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1)
+    setViewMonth(d)
+    onMonthChange?.(d)
+  }
+
+  function handleClick(date: Date) {
+    onDateSelect(date)
+  }
+
+  return (
+    <div className="select-none">
+      {/* Month header */}
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium capitalize">{monthLabel}</span>
+        <div className="flex items-center gap-0.5">
+          <button onClick={prevMonth} className="flex h-6 w-6 items-center justify-center rounded-full hover:bg-muted transition-colors">
+            <ChevronLeft className="h-3.5 w-3.5" />
+          </button>
+          <button onClick={nextMonth} className="flex h-6 w-6 items-center justify-center rounded-full hover:bg-muted transition-colors">
+            <ChevronRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Day labels */}
+      <div className="grid grid-cols-7 mb-0.5">
+        {dayLabels.map((label, i) => (
+          <div key={i} className="flex h-6 w-6 items-center justify-center text-[10px] font-medium text-muted-foreground mx-auto">
+            {label}
+          </div>
+        ))}
+      </div>
+
+      {/* Dates */}
+      {weeks.map((week, wi) => (
+        <div key={wi} className="grid grid-cols-7">
+          {week.map((date, di) => {
+            if (!date) return <div key={di} className="h-6 w-6 mx-auto" />
+            const selected = isSameDay(date, selectedDate)
+            const today = isToday(date)
+            return (
+              <button
+                key={di}
+                onClick={() => handleClick(date)}
+                className={`flex h-6 w-6 items-center justify-center rounded-full text-[11px] mx-auto transition-colors ${
+                  selected
+                    ? 'bg-primary text-primary-foreground'
+                    : today
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'hover:bg-muted text-foreground'
+                }`}
+              >
+                {date.getDate()}
+              </button>
+            )
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/PaymentStatusBadge.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { DollarSign, Check, AlertTriangle, Clock } from 'lucide-react'
+import type { BookingPaymentStatus } from '../financial-bridge'
+import { useTranslation } from '@fayz-ai/core'
+
+const STATUS_CONFIG: Record<BookingPaymentStatus, {
+  dot: string
+  text: string
+  bg: string
+  icon: React.ElementType
+}> = {
+  none: { dot: '', text: 'text-muted-foreground', bg: 'hover:bg-muted/50', icon: DollarSign },
+  pending: { dot: 'bg-warning', text: 'text-warning', bg: 'bg-warning/10', icon: Clock },
+  partial: { dot: 'bg-warning', text: 'text-warning', bg: 'bg-warning/10', icon: Clock },
+  paid: { dot: 'bg-success', text: 'text-success', bg: 'bg-success/10', icon: Check },
+  overdue: { dot: 'bg-destructive', text: 'text-destructive', bg: 'bg-destructive/10', icon: AlertTriangle },
+  cancelled: { dot: 'bg-muted-foreground', text: 'text-muted-foreground', bg: 'bg-muted/30', icon: DollarSign },
+}
+
+interface PaymentStatusBadgeProps {
+  status: BookingPaymentStatus
+  totalAmount?: number
+  paidAmount?: number
+  formatCurrency?: (amount: number) => string
+  onClick?: () => void
+  compact?: boolean
+}
+
+export function PaymentStatusBadge({
+  status, totalAmount, paidAmount, formatCurrency, onClick, compact,
+}: PaymentStatusBadgeProps) {
+  const t = useTranslation()
+  const cfg = STATUS_CONFIG[status] ?? STATUS_CONFIG.none
+
+  const label = status === 'none'
+    ? t('agenda.payment.title')
+    : t(`agenda.payment.${status}`)
+
+  const amount = formatCurrency && totalAmount != null
+    ? status === 'partial' && paidAmount != null
+      ? `${formatCurrency(paidAmount)}/${formatCurrency(totalAmount)}`
+      : formatCurrency(totalAmount)
+    : null
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors ${cfg.bg} ${cfg.text} ${
+        onClick ? 'cursor-pointer hover:opacity-80' : 'cursor-default'
+      }`}
+    >
+      {status === 'none' ? (
+        <DollarSign className="h-3 w-3 shrink-0" />
+      ) : (
+        <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${cfg.dot}`} />
+      )}
+      {!compact && <span>{label}</span>}
+      {amount && <span className="font-normal opacity-75">{amount}</span>}
+    </button>
+  )
+}