@fayz-ai/plugin-agenda 0.1.3

package/src/components/AppointmentPopover.tsx

@@ -0,0 +1,221 @@
+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">
+                <PersonLink personId={booking.clientId} name={booking.clientName ?? 'Unknown'} className="text-base" />
+                <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>
+            )}
+
+            {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>
+              )
+            })()}
+
+            <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

@@ -0,0 +1,394 @@
+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,
+  )
+}