@fayz-ai/plugin-financial 0.9.0 → 0.9.2

package/src/components/FinancialOnboarding.tsx

@@ -1,87 +0,0 @@
-import React, { useState } from 'react'
-import { DollarSign, Landmark, CreditCard, BookOpen, ChevronRight, Check } from 'lucide-react'
-import { useTranslation } from '@fayz-ai/core'
-import { Button } from '@fayz-ai/ui'
-
-const STEPS = [
-  { id: 'welcome', icon: DollarSign, titleKey: 'financial.onboarding.welcome', descKey: 'financial.onboarding.description' },
-  { id: 'accounts', icon: Landmark, titleKey: 'financial.onboarding.accounts.title', descKey: 'financial.onboarding.accounts.description' },
-  { id: 'payments', icon: CreditCard, titleKey: 'financial.onboarding.payments.title', descKey: 'financial.onboarding.payments.description' },
-  { id: 'chart', icon: BookOpen, titleKey: 'financial.onboarding.chart.title', descKey: 'financial.onboarding.chart.description' },
-]
-
-export function FinancialOnboarding({ onComplete }: { onComplete: () => void }) {
-  const t = useTranslation()
-  const [step, setStep] = useState(0)
-  const current = STEPS[step]
-  const isLast = step === STEPS.length - 1
-  const Icon = current.icon
-
-  return (
-    <div className="flex items-center justify-center py-12">
-      <div className="w-full max-w-lg">
-        {/* Progress */}
-        <div className="flex items-center gap-1 mb-8">
-          {STEPS.map((s, i) => (
-            <div
-              key={s.id}
-              className={`h-1 flex-1 rounded-full transition-colors ${
-                i <= step ? 'bg-primary' : 'bg-muted'
-              }`}
-            />
-          ))}
-        </div>
-
-        {/* Card */}
-        <div className="rounded-card border bg-card p-8 text-center space-y-6 shadow-sm">
-          <div className="flex justify-center">
-            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
-              <Icon className="h-8 w-8 text-primary" />
-            </div>
-          </div>
-
-          <div>
-            <h2 className="text-xl font-bold">{t(current.titleKey)}</h2>
-            <p className="text-sm text-muted-foreground mt-2 max-w-sm mx-auto">{t(current.descKey)}</p>
-          </div>
-
-          {/* Step-specific hint */}
-          {step > 0 && step < STEPS.length - 1 && (
-            <div className="rounded-lg bg-muted/30 px-4 py-3 text-xs text-muted-foreground">
-              {t('financial.onboarding.configureHint')}
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="flex items-center justify-center gap-3 pt-2">
-            {step > 0 && (
-              <Button variant="outline" size="lg" onClick={() => setStep(step - 1)}>
-                {t('financial.onboarding.back')}
-              </Button>
-            )}
-            {isLast ? (
-              <Button variant="default" size="lg" onClick={onComplete}>
-                <Check className="h-4 w-4" /> {t('financial.onboarding.startUsing')}
-              </Button>
-            ) : (
-              <Button variant="default" size="lg" onClick={() => setStep(step + 1)}>
-                {step === 0 ? t('financial.onboarding.getStarted') : t('financial.onboarding.next')}
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-
-          {/* Skip */}
-          {!isLast && step === 0 && (
-            <button
-              onClick={onComplete}
-              className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-            >
-              {t('financial.onboarding.skip')}
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/FinancialSettings.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { ChevronLeft } from 'lucide-react'
-import { PluginRegistryManager } from '@fayz-ai/saas'
-import type { PluginRegistryDef } from '@fayz-ai/core'
-import { useTranslation } from '@fayz-ai/core'
-
-export function FinancialSettings({ registries, routeBase, onClose }: {
-  registries: PluginRegistryDef[]
-  routeBase: string
-  onClose: () => void
-}) {
-  const t = useTranslation()
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onClose}
-          className="flex h-8 w-8 items-center justify-center rounded-lg border hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors"
-        >
-          <ChevronLeft className="h-4 w-4" />
-        </button>
-        <div>
-          <h2 className="text-lg font-bold">{t('financial.settingsPage.title')}</h2>
-          <p className="text-xs text-muted-foreground">{t('financial.settingsPage.subtitle')}</p>
-        </div>
-      </div>
-
-      <PluginRegistryManager registries={registries} routeBase={routeBase} />
-    </div>
-  )
-}

package/src/components/PaymentModal.tsx

@@ -1,369 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import { createPortal } from 'react-dom'
-import { X, Check, Banknote, QrCode, CreditCard, Building2, ArrowRightLeft, FileCheck, Pencil } from 'lucide-react'
-import { useFinancialConfig, useFinancialStore, formatCurrency } from '../FinancialContext'
-import { useTranslation } from '@fayz-ai/core'
-import { CurrencyInput } from '@fayz-ai/ui'
-import { DatePicker } from '@fayz-ai/ui'
-import { Button } from '@fayz-ai/ui'
-import type { FinancialMovement, PaymentMethodType, BankAccountType } from '../types'
-
-// Which bank-account types make sense for each payment type — mirrors beautyplace's
-// payment_method_types.allowed_account_types. Used to filter + default the destination
-// account so every payment lands in a real account (and shows up in that account's extract).
-const ACCOUNT_TYPES_FOR_TX: Record<string, BankAccountType[]> = {
-  cash: ['cash_register'],
-  credit_card: ['credit_card', 'bank_account'],
-  debit_card: ['bank_account', 'cash_register'],
-  pix: ['bank_account', 'digital_wallet'],
-  bank_transfer: ['bank_account'],
-  check: ['bank_account'],
-  voucher: ['bank_account', 'digital_wallet'],
-}
-
-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-border bg-muted/40 hover:bg-muted/60 data-[active=true]:border-foreground data-[active=true]:bg-muted',
-}
-
-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',
-}
-
-export function PaymentModal({ movement, onClose, onPaid }: {
-  movement: FinancialMovement
-  onClose: () => void
-  onPaid: () => void
-}) {
-  const t = useTranslation()
-  const { currency } = useFinancialConfig()
-  const payMovement = useFinancialStore((s) => s.payMovement)
-  const bankAccounts = useFinancialStore((s) => s.bankAccounts)
-  const paymentMethods = useFinancialStore((s) => s.paymentMethods)
-  const paymentMethodTypes = useFinancialStore((s) => s.paymentMethodTypes)
-  const fetchBankAccounts = useFinancialStore((s) => s.fetchBankAccounts)
-  const fetchPaymentMethods = useFinancialStore((s) => s.fetchPaymentMethods)
-
-  const remaining = movement.amount - movement.paidAmount
-  const [amount, setAmount] = useState(remaining)
-  const [paymentDate, setPaymentDate] = useState(new Date().toISOString().slice(0, 10))
-  const [selectedTypeId, setSelectedTypeId] = useState('')
-  const [paymentMethodId, setPaymentMethodId] = useState('')
-  const [bankAccountId, setBankAccountId] = useState('')
-  const [cardBrand, setCardBrand] = useState('')
-  const [cardInstallments, setCardInstallments] = useState(1)
-  const [notes, setNotes] = useState('')
-  const [saving, setSaving] = useState(false)
-  const [visible, setVisible] = useState(false)
-  const [expandMethodPicker, setExpandMethodPicker] = useState(true)
-
-  useEffect(() => {
-    fetchBankAccounts()
-    fetchPaymentMethods()
-    requestAnimationFrame(() => setVisible(true))
-  }, [])
-
-  const selectedType = useMemo(() =>
-    paymentMethodTypes.find((tp) => tp.id === selectedTypeId),
-    [paymentMethodTypes, selectedTypeId]
-  )
-
-  const txType = selectedType?.transactionType ?? ''
-
-  const filteredMethods = useMemo(() =>
-    paymentMethods.filter((m) => m.paymentMethodTypeId === selectedTypeId),
-    [paymentMethods, selectedTypeId]
-  )
-
-  const needsCard = txType === 'credit_card' || txType === 'debit_card'
-  const needsCardInstallments = txType === 'credit_card'
-
-  // Accounts eligible for the selected payment type. Prefer the type's configured
-  // allowedAccountTypes, else the tx-type mapping, else all active accounts.
-  const eligibleAccounts = useMemo(() => {
-    const allowed = (selectedType?.allowedAccountTypes && selectedType.allowedAccountTypes.length)
-      ? selectedType.allowedAccountTypes
-      : ACCOUNT_TYPES_FOR_TX[txType]
-    if (!allowed || !allowed.length) return bankAccounts
-    const filtered = bankAccounts.filter((a) => allowed.includes(a.accountType))
-    return filtered.length ? filtered : bankAccounts
-  }, [bankAccounts, selectedType, txType])
-
-  // Auto-pick a sensible destination account so the payment is always linked to one.
-  useEffect(() => {
-    if (selectedTypeId && !bankAccountId && eligibleAccounts.length) {
-      setBankAccountId(eligibleAccounts[0].id)
-    }
-  }, [selectedTypeId, eligibleAccounts])
-
-  function handleSelectType(typeId: string) {
-    setSelectedTypeId(typeId)
-    setExpandMethodPicker(false)
-    setPaymentMethodId('')
-    setBankAccountId('')
-    setCardBrand('')
-    setCardInstallments(1)
-  }
-
-  function handleClose() {
-    setVisible(false)
-    setTimeout(onClose, 200)
-  }
-
-  // Enter anywhere in the modal submits (unless typing in a textarea / Shift+Enter).
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key !== 'Enter' || e.shiftKey) return
-    if ((e.target as HTMLElement).tagName === 'TEXTAREA') return
-    e.preventDefault()
-    if (amount > 0 && selectedTypeId && bankAccountId && !saving) void handlePay()
-  }
-
-  async function handlePay() {
-    if (amount <= 0 || !selectedTypeId || !bankAccountId) return
-    setSaving(true)
-    try {
-      await payMovement({
-        movementId: movement.id,
-        amount,
-        paymentDate,
-        paymentMethodId: paymentMethodId || undefined,
-        paymentMethodTypeId: selectedTypeId || undefined,
-        bankAccountId: bankAccountId || undefined,
-        cardBrand: needsCard ? cardBrand || undefined : undefined,
-        cardInstallments: needsCardInstallments ? cardInstallments : undefined,
-        notes: notes.trim() || undefined,
-      })
-      setVisible(false)
-      setTimeout(onPaid, 200)
-    } catch {
-      // toast handled by store
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const SelectedIcon = selectedType ? (TYPE_ICONS[txType] ?? Banknote) : null
-
-  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-modal border bg-card shadow-lg 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()}
-        onKeyDown={handleKeyDown}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b sticky top-0 bg-card z-10">
-          <div>
-            <h3 className="text-base font-semibold">{t('financial.payment.title')}</h3>
-            <p className="text-xs text-muted-foreground">
-              {t('financial.payment.installment', { number: String(movement.installmentNumber ?? 1) })} &middot; {t('financial.payment.remaining', { amount: formatCurrency(remaining, currency) })}
-            </p>
-          </div>
-          <button onClick={handleClose} className="p-1 text-muted-foreground hover:text-foreground transition-colors">
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="px-5 py-4 space-y-4">
-          {/* Payment method type selector */}
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('financial.payment.method')}</label>
-
-            {/* Collapsed: show selected as inline chip */}
-            <div
-              className="grid transition-all duration-200 ease-out"
-              style={{ gridTemplateRows: selectedTypeId && !expandMethodPicker ? '1fr' : '0fr' }}
-            >
-              <div className="overflow-hidden">
-                {selectedType && (
-                  <button
-                    onClick={() => setExpandMethodPicker(true)}
-                    className={`flex items-center gap-2 mt-1.5 w-full rounded-lg border px-3 py-2.5 text-left transition-colors hover:bg-muted/30 ${TYPE_COLORS[txType] ?? ''}`}
-                    data-active="true"
-                  >
-                    {SelectedIcon && <SelectedIcon className={`h-4 w-4 ${ICON_COLORS[txType] ?? ''}`} />}
-                    <span className="text-sm font-medium flex-1">{selectedType?.name}</span>
-                    <Pencil className="h-3 w-3 text-muted-foreground" />
-                  </button>
-                )}
-              </div>
-            </div>
-
-            {/* Expanded: full grid */}
-            <div
-              className="grid transition-all duration-200 ease-out"
-              style={{ gridTemplateRows: expandMethodPicker ? '1fr' : '0fr' }}
-            >
-              <div className="overflow-hidden">
-                {paymentMethodTypes.length === 0 ? (
-                  <div className="rounded-lg border border-dashed border-input bg-muted/30 px-3 py-3 text-center mt-1.5">
-                    <p className="text-xs text-muted-foreground">{t('financial.payment.noMethods')}</p>
-                    <a href="#/financial/settings" className="mt-1.5 inline-block text-xs font-medium text-primary hover:underline">
-                      {t('financial.payment.configureMethods')} →
-                    </a>
-                  </div>
-                ) : (
-                <div className="grid grid-cols-3 gap-2 mt-1.5">
-                  {paymentMethodTypes.map((type) => {
-                    const tt = type.transactionType ?? ''
-                    const Icon = TYPE_ICONS[tt] ?? Banknote
-                    const isActive = selectedTypeId === type.id
-                    return (
-                      <button
-                        key={type.id}
-                        data-active={isActive}
-                        onClick={() => handleSelectType(type.id)}
-                        className={`flex flex-col items-center gap-1.5 rounded-lg border px-2 py-3 text-center transition-all ${TYPE_COLORS[tt] ?? TYPE_COLORS.cash}`}
-                      >
-                        <Icon className={`h-5 w-5 ${isActive ? ICON_COLORS[tt] ?? '' : 'text-muted-foreground'}`} />
-                        <span className={`text-[11px] font-medium leading-tight ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}>{type.name}</span>
-                      </button>
-                    )
-                  })}
-                </div>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* Form fields — only after method selected */}
-          {selectedTypeId && (
-            <div key={selectedTypeId} className="space-y-4">
-              {/* Amount + Date side by side */}
-              <div className="grid grid-cols-2 gap-3 stagger-field" style={{ animationDelay: '0ms' }}>
-                <CurrencyInput
-                  label={t('financial.payment.amount')}
-                  value={amount}
-                  onChange={setAmount}
-                  symbol={currency.symbol}
-                  locale={currency.locale}
-                  currencyCode={currency.code}
-                />
-                <div>
-                  <label className="text-xs font-medium text-muted-foreground">{t('financial.payment.date')}</label>
-                  <DatePicker value={paymentDate} onChange={setPaymentDate} className="mt-1" />
-                </div>
-              </div>
-
-              {/* Specific payment method */}
-              {filteredMethods.length > 0 && (
-                <div className="stagger-field" style={{ animationDelay: '50ms' }}>
-                  <label className="text-xs font-medium text-muted-foreground">
-                    {needsCard ? t('financial.payment.card') : t('financial.payment.account')}
-                  </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-3 py-2 text-sm">
-                    <option value="">{t('financial.payment.select')}</option>
-                    {filteredMethods.map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}
-                  </select>
-                </div>
-              )}
-
-              {/* Card fields side by side */}
-              {needsCard && (
-                <div className={`grid gap-3 stagger-field ${needsCardInstallments ? 'grid-cols-2' : 'grid-cols-1'}`} style={{ animationDelay: '100ms' }}>
-                  <div>
-                    <label className="text-xs font-medium text-muted-foreground">{t('financial.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-3 py-2 text-sm">
-                      <option value="">{t('financial.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-xs font-medium text-muted-foreground">{t('financial.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-3 py-2 text-sm">
-                        {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (
-                          <option key={n} value={n}>{n}x {n > 1 ? formatCurrency(amount / n, currency) : ''}</option>
-                        ))}
-                      </select>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Destination account — always shown so every payment links to an account */}
-              <div className="stagger-field" style={{ animationDelay: '100ms' }}>
-                <label className="text-xs font-medium text-muted-foreground">{t('financial.payment.bankAccount')}</label>
-                {eligibleAccounts.length === 0 ? (
-                  <div className="mt-1 rounded-lg border border-dashed border-input bg-muted/30 px-3 py-2.5 text-center">
-                    <p className="text-xs text-muted-foreground">{t('financial.payment.noAccounts')}</p>
-                    <a href="#/settings/financial/bank-accounts" className="mt-1 inline-block text-xs font-medium text-primary hover:underline">
-                      {t('financial.payment.configureAccounts')} →
-                    </a>
-                  </div>
-                ) : (
-                  <select value={bankAccountId} onChange={(e) => setBankAccountId(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-3 py-2 text-sm">
-                    <option value="">{t('financial.payment.selectAccount')}</option>
-                    {eligibleAccounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
-                  </select>
-                )}
-              </div>
-
-              {/* Notes */}
-              <div className="stagger-field" style={{ animationDelay: '150ms' }}>
-                <label className="text-xs font-medium text-muted-foreground">{t('financial.payment.notes')}</label>
-                <input type="text" value={notes} onChange={(e) => setNotes(e.target.value)} placeholder={t('financial.payment.optionalNotes')} className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" />
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Keyframe for staggered field entrance */}
-        <style>{`
-          .stagger-field {
-            animation: field-slide-in 250ms ease-out both;
-          }
-          @keyframes field-slide-in {
-            from { opacity: 0; transform: translateY(8px); }
-            to { opacity: 1; transform: translateY(0); }
-          }
-        `}</style>
-
-        {/* Actions */}
-        <div className="flex justify-end gap-2 px-5 py-4 border-t sticky bottom-0 bg-card">
-          <Button variant="outline" size="sm" onClick={handleClose}>
-            {t('financial.payment.cancel')}
-          </Button>
-          <Button
-            variant="default"
-            size="sm"
-            onClick={handlePay}
-            disabled={amount <= 0 || !selectedTypeId || !bankAccountId || saving}
-          >
-            <Check className="h-3.5 w-3.5" />
-            {saving ? t('financial.payment.processing') : t('financial.payment.payAmount', { amount: formatCurrency(amount, currency) })}
-          </Button>
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}

package/src/components/PersonStatementWidget.tsx

@@ -1,133 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react'
-import { Wallet } from 'lucide-react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { DataTable } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { formatCurrency, type ResolvedFinancialConfig } from '../FinancialContext'
-import type { FinancialDataProvider } from '../data/types'
-import type { Invoice } from '../types'
-
-const STATUS_STYLE: Record<string, string> = {
-  paid: 'bg-success/15 text-success',
-  partial: 'bg-warning/15 text-warning',
-  overdue: 'bg-destructive/15 text-destructive',
-  open: 'bg-muted text-muted-foreground',
-  cancelled: 'bg-muted text-muted-foreground line-through',
-}
-
-/**
- * Per-person financial statement (account_central-style extract): every invoice where
- * this person is the contact — a client paying receivables, or a professional receiving
- * commissions/payables. Rendered as a tab on the person detail page via the
- * `person.detail.financial` widget zone.
- */
-export function PersonStatementWidget({ person, provider, config }: {
-  person: { id?: string; name?: string }
-  provider: FinancialDataProvider
-  config: ResolvedFinancialConfig
-}) {
-  const t = useTranslation()
-  const currency = config.currency
-  const [invoices, setInvoices] = useState<Invoice[]>([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    let alive = true
-    if (!person?.id) { setLoading(false); return }
-    setLoading(true)
-    provider.getInvoices({ contactId: person.id, pageSize: 200 })
-      .then((r) => { if (alive) { setInvoices(r.data); setLoading(false) } })
-      .catch(() => { if (alive) setLoading(false) })
-    return () => { alive = false }
-  }, [person?.id, provider])
-
-  const fmt = (n: number) => formatCurrency(n, currency)
-
-  const totals = useMemo(() => {
-    const active = invoices.filter((i) => i.status !== 'cancelled')
-    const billed = active.reduce((s, i) => s + (i.totalAmount ?? 0), 0)
-    const paid = active.reduce((s, i) => s + (i.paidAmount ?? 0), 0)
-    return { billed, paid, balance: billed - paid }
-  }, [invoices])
-
-  const openInvoice = (inv: Invoice) => {
-    const base = inv.direction === 'credit' ? 'receivables' : 'payables'
-    window.location.hash = `/financial/${base}/detail/${inv.id}`
-  }
-
-  const columns: ColumnDef<Invoice, any>[] = useMemo(() => [
-    {
-      id: 'date', header: t('financial.invoice.columnDate'),
-      cell: ({ row }) => <span className="text-muted-foreground text-xs">{row.original.invoiceDate}</span>,
-    },
-    {
-      id: 'description', header: t('financial.invoice.columnDescription'),
-      cell: ({ row }) => {
-        const inv = row.original
-        return (
-          <button onClick={() => openInvoice(inv)} className="text-left">
-            <span className="text-xs font-medium text-primary hover:underline">
-              {inv.itemsSummary || inv.contactName || t('financial.invoice.invoice')}
-            </span>
-            {inv.fiscalNumber && <span className="ml-1.5 text-[10px] text-muted-foreground font-mono">{inv.fiscalNumber}</span>}
-          </button>
-        )
-      },
-    },
-    {
-      id: 'amount', header: t('financial.invoice.columnAmount'),
-      cell: ({ row }) => (
-        <span className={`text-right block text-xs ${row.original.direction === 'credit' ? 'text-success' : 'text-destructive'}`}>
-          {fmt(row.original.totalAmount)}
-        </span>
-      ),
-    },
-    {
-      id: 'paid', header: t('financial.invoice.columnPaid'),
-      cell: ({ row }) => <span className="text-right block text-xs text-muted-foreground">{fmt(row.original.paidAmount)}</span>,
-    },
-    {
-      id: 'balance', header: t('financial.statements.columnBalance'),
-      cell: ({ row }) => <span className="text-right block text-xs font-medium">{fmt((row.original.totalAmount ?? 0) - (row.original.paidAmount ?? 0))}</span>,
-    },
-    {
-      id: 'status', header: t('financial.invoice.columnStatus'),
-      cell: ({ row }) => (
-        <span className={`inline-flex rounded-full px-1.5 py-0.5 text-[9px] font-medium capitalize ${STATUS_STYLE[row.original.status] ?? STATUS_STYLE.open}`}>
-          {row.original.status}
-        </span>
-      ),
-    },
-  ], [currency, t])
-
-  return (
-    <div className="space-y-3">
-      {/* Totals */}
-      <div className="grid grid-cols-3 gap-2">
-        <Stat label={t('financial.invoice.summaryTotal')} value={fmt(totals.billed)} />
-        <Stat label={t('financial.invoice.summaryPaid')} value={fmt(totals.paid)} positive />
-        <Stat label={t('financial.statements.columnBalance')} value={fmt(totals.balance)} accent />
-      </div>
-
-      {loading ? (
-        <DataTable columns={columns} data={[]} loading skeletonRows={5} compact />
-      ) : invoices.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-10 text-center rounded-lg border-2 border-dashed border-muted">
-          <Wallet className="h-7 w-7 text-muted-foreground mb-2" />
-          <p className="text-sm text-muted-foreground">{t('financial.person.empty')}</p>
-        </div>
-      ) : (
-        <DataTable columns={columns} data={invoices} compact />
-      )}
-    </div>
-  )
-}
-
-function Stat({ label, value, accent, positive }: { label: string; value: string; accent?: boolean; positive?: boolean }) {
-  return (
-    <div className={`rounded-lg border px-3 py-2 ${accent ? 'bg-muted/40' : 'bg-card'}`}>
-      <p className="text-[10px] font-medium text-muted-foreground uppercase truncate">{label}</p>
-      <p className={`text-sm font-semibold mt-0.5 ${positive ? 'text-success' : 'text-foreground'}`}>{value}</p>
-    </div>
-  )
-}