@fayz-ai/plugin-agenda 0.9.0 → 0.10.0

package/src/components/AppointmentPopover.tsx

@@ -1,231 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { X, Pencil, Trash2, Clock, MapPin, User, FileText, DollarSign, Check, AlertTriangle, HandCoins } from 'lucide-react'
-import { PersonLink } from '@fayz-ai/saas'
-import { FloatingPanel, type FloatingPanelRef } from './FloatingPanel'
-import { useAgendaConfig, useAgendaStore } from '../AgendaContext'
-import { useTranslation } from '@fayz-ai/core'
-import { isStatusAvailable } from '../types'
-import type { CalendarBooking } from '../types'
-
-interface Props {
-  booking: CalendarBooking
-  position: { x: number; y: number }
-  onClose: () => void
-  onEdit: (id: string) => void
-}
-
-function fmtTime(iso: string) {
-  return new Date(iso).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
-}
-function fmtDate(iso: string) {
-  return new Date(iso).toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })
-}
-function fmtCurrency(amount: number, locale: string, code: string) {
-  return new Intl.NumberFormat(locale, { style: 'currency', currency: code }).format(amount)
-}
-
-// Inline status select for the popover
-function PopoverStatusSelect({ value, statuses, bookingStartsAt, onChange }: {
-  value: string; statuses: Array<{ value: string; label: string; color: string; availableWhen?: string }>
-  bookingStartsAt: string; onChange: (v: string) => void
-}) {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-  const current = statuses.find((s) => s.value === value)
-
-  useEffect(() => {
-    if (!open) return
-    const h = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) }
-    document.addEventListener('mousedown', h)
-    return () => document.removeEventListener('mousedown', h)
-  }, [open])
-
-  return (
-    <div ref={ref} className="relative inline-block">
-      <button type="button" onClick={() => setOpen((p) => !p)}
-        className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors hover:opacity-80"
-        style={{ backgroundColor: (current?.color ?? '#6b7280') + '18', color: current?.color ?? '#6b7280' }}>
-        <span className="h-2 w-2 rounded-full" style={{ backgroundColor: current?.color }} />
-        {current?.label ?? value}
-        <svg className="h-3 w-3 opacity-50" viewBox="0 0 16 16" fill="none">
-          <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-        </svg>
-      </button>
-      {open && (
-        <div className="fayz-glass-surface absolute bottom-full left-0 z-50 mb-1 rounded-lg border bg-popover shadow-lg py-1 animate-in fade-in zoom-in-95 duration-100 min-w-[140px]">
-          {statuses.map((s) => {
-            const available = isStatusAvailable(s as any, bookingStartsAt)
-            return (
-            <button key={s.value} type="button" disabled={!available}
-              onClick={() => { if (available) { onChange(s.value); setOpen(false) } }}
-              className={`flex w-full items-center gap-2 px-3 py-1.5 text-xs transition-colors ${
-                !available ? 'opacity-30 cursor-not-allowed' : s.value === value ? 'bg-muted/30' : 'hover:bg-muted/50'
-              }`}>
-              <span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
-              <span>{s.label}</span>
-            </button>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function AppointmentPopover({ booking, position, onClose, onEdit }: Props) {
-  const t = useTranslation()
-  const config = useAgendaConfig()
-  const deleteBooking = useAgendaStore((s) => s.deleteBooking)
-  const updateStatus = useAgendaStore((s) => s.updateBookingStatus)
-  const openModal = useAgendaStore((s) => s.openAppointmentModal)
-  const [confirmingDelete, setConfirmingDelete] = useState(false)
-  const [deleting, setDeleting] = useState(false)
-  const statusConfig = config.statuses.find((s) => s.value === booking.status)
-  const color = statusConfig?.color ?? '#6b7280'
-  const timeRange = `${fmtTime(booking.startsAt)}${booking.endsAt ? ' – ' + fmtTime(booking.endsAt) : ''}`
-
-  async function handleDelete() {
-    setDeleting(true)
-    try { await deleteBooking(booking.id); onClose() } catch { setDeleting(false) }
-  }
-
-  return (
-    <>
-    <FloatingPanel position={position} width={320} height={340} onClose={onClose}>
-      {(panel) => (
-        <>
-          {/* Action bar */}
-          <div className="flex items-center justify-end gap-0.5 px-3 pt-3 pb-1">
-            {confirmingDelete ? (
-              <>
-                <span className="text-xs text-destructive font-medium mr-auto pl-1">{t('agenda.appointment.deleteConfirm')}</span>
-                <button onClick={() => setConfirmingDelete(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>
-              </>
-            ) : (
-              <>
-                <button onClick={() => panel.expandThen(() => onEdit(booking.id))}
-                  className="p-1.5 rounded-full hover:bg-muted transition-colors" title={t('common.edit')}>
-                  <Pencil className="h-4 w-4 text-muted-foreground" />
-                </button>
-                <button onClick={() => setConfirmingDelete(true)}
-                  className="p-1.5 rounded-full hover:bg-destructive/10 transition-colors" title={t('common.delete')}>
-                  <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive" />
-                </button>
-                <button onClick={panel.dismiss} className="p-1.5 rounded-full hover:bg-muted transition-colors">
-                  <X className="h-4 w-4 text-muted-foreground" />
-                </button>
-              </>
-            )}
-          </div>
-
-          {/* Content */}
-          <div className="px-5 pb-5 space-y-3">
-            <div className="flex items-start gap-3">
-              <span className="mt-1.5 h-3 w-3 rounded shrink-0" style={{ backgroundColor: color }} />
-              <div className="min-w-0">
-                {/* Client agendas link to the person; simple events (no client
-                    capability) render the free-text title as a plain heading —
-                    booking.clientName carries the event title in that model. */}
-                {config.capabilities.client ? (
-                  <PersonLink personId={booking.clientId} name={booking.clientName ?? 'Unknown'} className="text-base" />
-                ) : (
-                  <p className="text-base font-medium truncate">{booking.clientName || t('agenda.appointment.untitled')}</p>
-                )}
-                <p className="text-sm text-muted-foreground mt-0.5">{fmtDate(booking.startsAt)} &middot; {timeRange}</p>
-              </div>
-            </div>
-
-            {booking.services && booking.services.length > 0 && (
-              <div className="flex items-start gap-3">
-                <Clock className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
-                <div className="text-sm space-y-0.5">
-                  {booking.services.map((svc) => (
-                    <p key={svc.id}>{svc.name} <span className="text-muted-foreground">({svc.durationMinutes}min)</span></p>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {config.capabilities.professional && booking.professionalName && (
-              <div className="flex items-center gap-3">
-                <User className="h-4 w-4 text-muted-foreground shrink-0" />
-                <span className="text-sm">{booking.professionalName}</span>
-              </div>
-            )}
-
-            {booking.locationName && (
-              <div className="flex items-center gap-3">
-                <MapPin className="h-4 w-4 text-muted-foreground shrink-0" />
-                <span className="text-sm">{booking.locationName}</span>
-              </div>
-            )}
-
-            {booking.notes && (
-              <div className="flex items-start gap-3">
-                <FileText className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
-                <p className="text-sm text-muted-foreground">{booking.notes}</p>
-              </div>
-            )}
-
-            {booking.orderTotal != null && booking.orderTotal > 0 && (() => {
-              const total = fmtCurrency(booking.orderTotal, config.currency.locale, config.currency.code)
-              const ps = booking.paymentStatus ?? 'none'
-              const hasFinancial = config.modules.financial && booking.orderId
-
-              // No financial module — just show total
-              if (!hasFinancial) {
-                return (
-                  <div className="pt-2 border-t fayz-glass-divider flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">{t('agenda.appointment.total')}</span>
-                    <span className="font-medium">{total}</span>
-                  </div>
-                )
-              }
-
-              const badgeConfig: Record<string, { icon: React.ElementType; bg: string; text: string; label: string }> = {
-                none: { icon: HandCoins, bg: 'bg-warning/10 hover:bg-warning/15', text: 'text-warning', label: `${total} · ${t('agenda.payment.collect')}` },
-                pending: { icon: Clock, bg: 'bg-warning/10 hover:bg-warning/15', text: 'text-warning', label: `${total} · ${t('agenda.payment.pending')}` },
-                partial: { icon: DollarSign, bg: 'bg-warning/10 hover:bg-warning/15', text: 'text-warning', label: `${total} · ${t('agenda.payment.partial')}` },
-                paid: { icon: Check, bg: 'bg-success/10 hover:bg-success/15', text: 'text-success', label: `${total} · ${t('agenda.payment.paid')}` },
-                overdue: { icon: AlertTriangle, bg: 'bg-destructive/10 hover:bg-destructive/15', text: 'text-destructive', label: `${total} · ${t('agenda.payment.overdue')}` },
-                cancelled: { icon: X, bg: 'bg-muted hover:bg-muted/80', text: 'text-muted-foreground', label: `${total} · ${t('agenda.payment.cancelled')}` },
-              }
-              const cfg = badgeConfig[ps] ?? badgeConfig.none
-              const StatusIcon = cfg.icon
-
-              return (
-                <div className="pt-2 border-t fayz-glass-divider flex items-center justify-between">
-                  <span className="text-xs text-muted-foreground">{t('agenda.appointment.total')}</span>
-                  <button
-                    type="button"
-                    onClick={() => { onClose(); openModal('edit', { bookingId: booking.id, initialTab: 'financial' }) }}
-                    className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium transition-colors ${cfg.bg} ${cfg.text}`}
-                  >
-                    <StatusIcon className="h-3 w-3" />
-                    {cfg.label}
-                  </button>
-                </div>
-              )
-            })()}
-
-            {/* Status workflow — hidden for simple events (no status capability). */}
-            {config.capabilities.status && (
-              <div className="pt-2 border-t fayz-glass-divider">
-                <PopoverStatusSelect
-                  value={booking.status}
-                  statuses={config.statuses}
-                  bookingStartsAt={booking.startsAt}
-                  onChange={(v) => { updateStatus(booking.id, v); onClose() }}
-                />
-              </div>
-            )}
-          </div>
-        </>
-      )}
-    </FloatingPanel>
-    </>
-  )
-}

package/src/components/BookingPaymentPanel.tsx

@@ -1,394 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { createPortal } from 'react-dom'
-import { X, Check, Banknote, QrCode, CreditCard, ArrowRightLeft, FileCheck, ExternalLink } from 'lucide-react'
-import { useAgendaConfig } from '../AgendaContext'
-import { useTranslation } from '@fayz-ai/core'
-import type { BookingPaymentDetail } from '../financial-bridge'
-
-// ---------------------------------------------------------------------------
-// Payment method type visuals (mirrors financial PaymentModal)
-// ---------------------------------------------------------------------------
-
-const TYPE_ICONS: Record<string, React.ElementType> = {
-  cash: Banknote, pix: QrCode, credit_card: CreditCard, debit_card: CreditCard,
-  bank_transfer: ArrowRightLeft, check: FileCheck,
-}
-
-const TYPE_COLORS: Record<string, string> = {
-  cash: 'border-success/30 bg-success/5 hover:bg-success/10 data-[active=true]:border-success data-[active=true]:bg-success/15',
-  pix: 'border-teal-500/30 bg-teal-500/5 hover:bg-teal-500/10 data-[active=true]:border-teal-500 data-[active=true]:bg-teal-500/15',
-  credit_card: 'border-info/30 bg-info/5 hover:bg-info/10 data-[active=true]:border-info data-[active=true]:bg-info/15',
-  debit_card: 'border-magic/30 bg-magic/5 hover:bg-magic/10 data-[active=true]:border-magic data-[active=true]:bg-magic/15',
-  bank_transfer: 'border-warning/30 bg-warning/5 hover:bg-warning/10 data-[active=true]:border-warning data-[active=true]:bg-warning/15',
-  check: 'border-input/30 bg-muted/5 hover:bg-muted/10 data-[active=true]:border-input data-[active=true]:bg-muted/15',
-}
-
-const ICON_COLORS: Record<string, string> = {
-  cash: 'text-success', pix: 'text-teal-500', credit_card: 'text-info',
-  debit_card: 'text-magic', bank_transfer: 'text-warning', check: 'text-muted-foreground',
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-interface Props {
-  orderId: string
-  orderTotal: number
-  services?: Array<{ name: string; price: number; durationMinutes: number }>
-  onClose: () => void
-  onPaymentChange?: () => void
-  formatCurrency: (amount: number) => string
-  /** Render inline (no portal overlay) — for embedding in tabs */
-  inline?: boolean
-}
-
-export function BookingPaymentPanel({ orderId, orderTotal, services, onClose, onPaymentChange, formatCurrency, inline }: Props) {
-  const t = useTranslation()
-  const config = useAgendaConfig()
-  const bridge = config.financialBridge!
-
-  const [visible, setVisible] = useState(false)
-  const [loading, setLoading] = useState(true)
-  const [detail, setDetail] = useState<BookingPaymentDetail | null>(null)
-
-  // Payment form
-  const [selectedTypeId, setSelectedTypeId] = useState('')
-  const [paymentTypes, setPaymentTypes] = useState<Array<{ id: string; name: string; transactionType?: string }>>([])
-  const [bankAccounts, setBankAccounts] = useState<Array<{ id: string; name: string; accountType: string }>>([])
-  const [filteredMethods, setFilteredMethods] = useState<Array<{ id: string; name: string }>>([])
-  const [selectedBankId, setSelectedBankId] = useState('')
-  const [paymentMethodId, setPaymentMethodId] = useState('')
-  const [cardBrand, setCardBrand] = useState('')
-  const [cardInstallments, setCardInstallments] = useState(1)
-  const [processing, setProcessing] = useState(false)
-  const [justPaid, setJustPaid] = useState(false)
-
-  useEffect(() => { requestAnimationFrame(() => setVisible(true)) }, [])
-
-  // Single combined fetch for all initial data
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    Promise.all([
-      bridge.getPaymentDetail(orderId).catch(() => null),
-      bridge.getPaymentMethodTypes().catch(() => [] as typeof paymentTypes),
-      bridge.getBankAccounts().catch(() => [] as typeof bankAccounts),
-    ]).then(([d, types, accounts]) => {
-      if (cancelled) return
-      setDetail(d)
-      setPaymentTypes(types)
-      setBankAccounts(accounts)
-      setLoading(false)
-    })
-    return () => { cancelled = true }
-  }, [orderId])
-
-  function handleClose() {
-    setVisible(false)
-    setTimeout(onClose, 200)
-  }
-
-  const selectedType = paymentTypes.find((t) => t.id === selectedTypeId)
-  const txType = selectedType?.transactionType ?? ''
-  const needsBank = ['bank_transfer', 'pix', 'check'].includes(txType)
-  const needsCard = txType === 'credit_card' || txType === 'debit_card'
-  const needsCardInstallments = txType === 'credit_card'
-
-  function handleSelectType(typeId: string) {
-    setSelectedTypeId(typeId)
-    setSelectedBankId('')
-    setPaymentMethodId('')
-    setCardBrand('')
-    setCardInstallments(1)
-    // Fetch specific payment methods for this type
-    if (bridge.getPaymentMethods) {
-      bridge.getPaymentMethods(typeId).then(setFilteredMethods).catch(() => setFilteredMethods([]))
-    }
-  }
-
-  async function handleCheckout() {
-    if (!selectedTypeId) return
-    setProcessing(true)
-    try {
-      const result = await bridge.checkout(orderId, {
-        paymentMethodTypeId: selectedTypeId,
-        paymentMethodId: paymentMethodId || undefined,
-        bankAccountId: needsBank ? selectedBankId || undefined : undefined,
-        cardBrand: needsCard ? cardBrand || undefined : undefined,
-        cardInstallments: needsCardInstallments ? cardInstallments : undefined,
-      })
-      setDetail(result)
-      setJustPaid(true)
-      onPaymentChange?.()
-      // Show confirmation animation, then transition to summary
-      setTimeout(() => setJustPaid(false), 2200)
-    } catch { /* toast */ }
-    setProcessing(false)
-  }
-
-  const isPaid = detail?.status === 'paid'
-
-  const content = (
-    <div className="px-5 py-4 space-y-4">
-
-      {/* Loading */}
-      {loading && (
-        <div className="space-y-3 py-2">
-          {[...Array(3)].map((_, i) => (
-            <div key={i} className="h-8 rounded-lg bg-muted animate-pulse" />
-          ))}
-        </div>
-      )}
-
-      {/* Just paid — confirmation animation */}
-      {!loading && isPaid && justPaid && (
-        <div className="text-center py-8 space-y-2 animate-in fade-in zoom-in-95 duration-300">
-          <div className="flex h-14 w-14 mx-auto items-center justify-center rounded-full bg-success/10 animate-bounce" style={{ animationDuration: '600ms', animationIterationCount: '2' }}>
-            <Check className="h-7 w-7 text-success" />
-          </div>
-          <p className="text-sm font-semibold text-success">{t('agenda.payment.checkoutComplete')}</p>
-          <p className="text-xs text-muted-foreground">{formatCurrency(detail!.totalAmount)}</p>
-        </div>
-      )}
-
-      {/* Invoice summary — shown after animation or when returning to an already-paid/pending booking */}
-      {!loading && detail && detail.status !== 'none' && !justPaid && (
-        <div className="space-y-3 animate-in fade-in duration-300">
-          {/* Movement rows with inline status badge */}
-          {detail.movements.length > 0 ? (
-            <div className="space-y-1.5">
-              {detail.movements.map((mov) => {
-                const methodName = mov.paymentMethodTypeName
-                const txKey = (methodName ?? '').toLowerCase().replace(/\s+/g, '_')
-                const Icon = TYPE_ICONS[txKey] ?? Banknote
-                const iconColor = ICON_COLORS[txKey] ?? 'text-muted-foreground'
-                const isMovPaid = mov.status === 'paid'
-                const isPartial = mov.status === 'partial'
-                const isOverdue = mov.status === 'overdue'
-
-                return (
-                  <div key={mov.id} className="flex items-center gap-3 rounded-lg border px-3 py-2.5">
-                    <Icon className={`h-4 w-4 shrink-0 ${isMovPaid ? iconColor : 'text-muted-foreground'}`} />
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium truncate">
-                        {methodName ?? '—'}
-                        {mov.cardBrand ? ` · ${mov.cardBrand}` : ''}
-                        {mov.cardInstallments && mov.cardInstallments > 1 ? ` ${mov.cardInstallments}x` : ''}
-                      </p>
-                      <p className="text-[10px] text-muted-foreground">
-                        {mov.paymentDate ?? mov.dueDate}
-                        {detail.movements.length > 1 && mov.installmentNumber ? ` · ${t('agenda.payment.installment')} ${mov.installmentNumber}` : ''}
-                      </p>
-                    </div>
-                    <div className="flex items-center gap-2 shrink-0">
-                      {isMovPaid && (
-                        <span className="inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-[10px] font-medium text-success">
-                          <Check className="h-2.5 w-2.5" /> {t('agenda.payment.paid')}
-                        </span>
-                      )}
-                      {isPartial && (
-                        <span className="inline-flex items-center gap-1 rounded-full bg-warning/10 px-2 py-0.5 text-[10px] font-medium text-warning">
-                          ! {formatCurrency(mov.paidAmount)}/{formatCurrency(mov.amount)}
-                        </span>
-                      )}
-                      {isOverdue && (
-                        <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-[10px] font-medium text-destructive">
-                          ! {t('agenda.payment.overdue')}
-                        </span>
-                      )}
-                      {mov.status === 'pending' && (
-                        <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                          {t('agenda.payment.pending')}
-                        </span>
-                      )}
-                      <span className="text-sm font-semibold">{formatCurrency(mov.paidAmount || mov.amount)}</span>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          ) : (
-            <div className="flex items-center justify-between text-sm px-1">
-              <span className="text-muted-foreground">{t('agenda.payment.total')}</span>
-              <span className="font-semibold">{formatCurrency(detail.totalAmount)}</span>
-            </div>
-          )}
-
-          {/* Invoice ref + link */}
-          <div className="flex items-center justify-between">
-            {detail.referenceNumber && (
-              <span className="text-[10px] font-mono text-muted-foreground">#{detail.referenceNumber}</span>
-            )}
-            <a
-              href={`#/financial/receivables/detail/${detail.invoiceId}`}
-              className="inline-flex items-center gap-1.5 text-xs font-medium text-primary hover:underline ml-auto"
-            >
-              {t('agenda.payment.viewInvoice')}
-              <ExternalLink className="h-3 w-3" />
-            </a>
-          </div>
-        </div>
-      )}
-
-      {/* Checkout view — only when no invoice exists yet */}
-      {!loading && (!detail || detail.movements.length === 0) && (
-        <>
-          {/* Service summary */}
-          {services && services.length > 0 && (
-            <div>
-              <p className="text-[11px] font-medium text-muted-foreground mb-2">{t('agenda.payment.serviceSummary')}</p>
-              <div className="space-y-0.5">
-                {services.map((svc, i) => (
-                  <div key={i} className="flex items-center justify-between text-sm py-1">
-                    <span className="truncate">{svc.name}</span>
-                    <span className="shrink-0 text-muted-foreground">{formatCurrency(svc.price)}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Total */}
-          <div className="flex items-center justify-between text-sm font-semibold pt-2 border-t">
-            <span>{t('agenda.payment.total')}</span>
-            <span>{formatCurrency(orderTotal)}</span>
-          </div>
-
-          {/* Payment method grid */}
-          <div>
-            <p className="text-[11px] font-medium text-muted-foreground mb-2">{t('agenda.payment.paymentMethod')}</p>
-            {paymentTypes.length === 0 ? (
-              <div className="rounded-lg border border-dashed border-input bg-muted/30 px-3 py-3 text-center">
-                <p className="text-xs text-muted-foreground">{t('agenda.payment.noMethods')}</p>
-                <a href="#/financial/settings" className="mt-1.5 inline-block text-xs font-medium text-primary hover:underline">
-                  {t('agenda.payment.configureMethods')} →
-                </a>
-              </div>
-            ) : (
-            <div className="grid grid-cols-3 gap-1.5">
-              {paymentTypes.map((pt) => {
-                const ptTx = pt.transactionType ?? pt.name.toLowerCase().replace(/\s+/g, '_')
-                const Icon = TYPE_ICONS[ptTx] ?? Banknote
-                const colorClass = TYPE_COLORS[ptTx] ?? TYPE_COLORS.cash
-                const iconColor = ICON_COLORS[ptTx] ?? ICON_COLORS.cash
-                const isActive = selectedTypeId === pt.id
-                return (
-                  <button
-                    key={pt.id}
-                    type="button"
-                    data-active={isActive}
-                    onClick={() => handleSelectType(pt.id)}
-                    className={`flex flex-col items-center gap-1 rounded-lg border p-2.5 text-[10px] font-medium transition-all ${colorClass}`}
-                  >
-                    <Icon className={`h-4 w-4 ${iconColor}`} />
-                    <span className="truncate w-full text-center">{pt.name}</span>
-                  </button>
-                )
-              })}
-            </div>
-            )}
-          </div>
-
-          {/* Extra fields based on payment type */}
-          {selectedTypeId && (
-            <div className="space-y-3">
-              {/* Specific payment method (filtered by type) */}
-              {filteredMethods.length > 0 && (
-                <div>
-                  <label className="text-[11px] font-medium text-muted-foreground">
-                    {needsCard ? t('agenda.payment.card') : t('agenda.payment.method')}
-                  </label>
-                  <select value={paymentMethodId} onChange={(e) => setPaymentMethodId(e.target.value)}
-                    className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                    <option value="">{t('agenda.payment.select')}</option>
-                    {filteredMethods.map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}
-                  </select>
-                </div>
-              )}
-
-              {/* Card brand + installments */}
-              {needsCard && (
-                <div className={`grid gap-2.5 ${needsCardInstallments ? 'grid-cols-2' : 'grid-cols-1'}`}>
-                  <div>
-                    <label className="text-[11px] font-medium text-muted-foreground">{t('agenda.payment.cardBrand')}</label>
-                    <select value={cardBrand} onChange={(e) => setCardBrand(e.target.value)}
-                      className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                      <option value="">{t('agenda.payment.selectBrand')}</option>
-                      {['Visa', 'Mastercard', 'American Express', 'Elo', 'Hipercard', 'Diners Club'].map((b) => (
-                        <option key={b} value={b}>{b}</option>
-                      ))}
-                    </select>
-                  </div>
-                  {needsCardInstallments && (
-                    <div>
-                      <label className="text-[11px] font-medium text-muted-foreground">{t('agenda.payment.cardInstallments')}</label>
-                      <select value={cardInstallments} onChange={(e) => setCardInstallments(Number(e.target.value))}
-                        className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                        {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (
-                          <option key={n} value={n}>{n}x {n > 1 ? formatCurrency(orderTotal / n) : ''}</option>
-                        ))}
-                      </select>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Bank account */}
-              {needsBank && bankAccounts.length > 0 && (
-                <div>
-                  <label className="text-[11px] font-medium text-muted-foreground">{t('agenda.payment.bankAccount')}</label>
-                  <select value={selectedBankId} onChange={(e) => setSelectedBankId(e.target.value)}
-                    className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                    <option value="">{t('agenda.payment.selectAccount')}</option>
-                    {bankAccounts.map((a) => (
-                      <option key={a.id} value={a.id}>{a.name}</option>
-                    ))}
-                  </select>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Confirm button */}
-          <button
-            type="button"
-            onClick={handleCheckout}
-            disabled={processing || !selectedTypeId}
-            className="w-full rounded-lg bg-primary border border-primary py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 shadow-button-primary active:shadow-button-inset disabled:opacity-40 transition-colors"
-          >
-            {processing
-              ? t('agenda.payment.checkingOut')
-              : `${t('agenda.payment.checkout')} ${formatCurrency(orderTotal)}`
-            }
-          </button>
-        </>
-      )}
-    </div>
-  )
-
-  if (inline) return content
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center transition-colors duration-200"
-      style={{ backgroundColor: visible ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0)' }}
-      onClick={handleClose}
-    >
-      <div
-        className="w-full max-w-md rounded-xl border bg-card shadow-2xl mx-4 transition-all duration-200 max-h-[90vh] overflow-y-auto"
-        style={{ opacity: visible ? 1 : 0, transform: visible ? 'scale(1) translateY(0)' : 'scale(0.95) translateY(8px)' }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between px-5 py-4 border-b sticky top-0 bg-card z-10">
-          <h3 className="text-base font-semibold">{t('agenda.payment.title')}</h3>
-          <button onClick={handleClose} className="p-1 text-muted-foreground hover:text-foreground transition-colors">
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-        {content}
-      </div>
-    </div>,
-    document.body,
-  )
-}