@fayz-ai/plugin-financial 0.1.2 → 0.1.4

package/src/views/InvoiceDetailView.tsx

@@ -20,15 +20,19 @@ const STATUS_COLORS: Record<string, { bg: string; icon: React.ElementType; label
   cancelled: { bg: 'bg-muted text-muted-foreground', icon: Ban, labelKey: 'financial.invoice.statusCancelled' },
 }
 
-export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit }: {
+export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit, backLabel }: {
   invoiceId: string
   direction: TransactionDirection
   onBack: () => void
   onEdit: () => void
+  /** Label for the back link — defaults to the invoice's parent list (payables/receivables). */
+  backLabel?: string
 }) {
   const t = useTranslation()
   const config = useFinancialConfig()
   const { currency } = config
+  // Back link target: where the user actually came from, else the parent list.
+  const parentLabel = backLabel ?? (direction === 'debit' ? t('financial.nav.payables') : t('financial.nav.receivables'))
   const provider = useFinancialProvider()
   const paymentMethods = useFinancialStore((s) => s.paymentMethods)
   const paymentMethodTypes = useFinancialStore((s) => s.paymentMethodTypes)
@@ -41,6 +45,7 @@ export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit }: {
   const [invoice, setInvoice] = useState<Invoice | null>(null)
   const [items, setItems] = useState<InvoiceItem[]>([])
   const [movements, setMovements] = useState<FinancialMovement[]>([])
+  const [payments, setPayments] = useState<FinancialMovement[]>([])
   const [loading, setLoading] = useState(true)
   const [payingMovement, setPayingMovement] = useState<FinancialMovement | null>(null)
   const [expandedMovId, setExpandedMovId] = useState<string | null>(null)
@@ -64,6 +69,12 @@ export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit }: {
         .filter((m) => m.invoiceId === invoiceId && m.movementKind === 'bill')
         .sort((a, b) => (a.installmentNumber ?? 0) - (b.installmentNumber ?? 0))
     )
+    // Individual cash events (one row per payment) — listed under each installment.
+    setPayments(
+      movResult.data
+        .filter((m) => m.invoiceId === invoiceId && m.movementKind === 'payment')
+        .sort((a, b) => (a.paymentDate ?? '').localeCompare(b.paymentDate ?? ''))
+    )
     setLoading(false)
   }
 
@@ -110,7 +121,7 @@ export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit }: {
   if (loading) {
     return (
       <div className="space-y-5">
-        <SubpageHeader title="" onBack={onBack} parentLabel={direction === 'debit' ? t('financial.nav.payables') : t('financial.nav.receivables')} />
+        <SubpageHeader title="" onBack={onBack} parentLabel={parentLabel} />
 
         {/* Invoice card skeleton */}
         <div className="rounded-xl border bg-card shadow-sm overflow-hidden">
@@ -187,7 +198,7 @@ export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit }: {
   if (!invoice) {
     return (
       <div className="space-y-6">
-        <SubpageHeader title={t('financial.invoice.notFound')} onBack={onBack} parentLabel={direction === 'debit' ? t('financial.nav.payables') : t('financial.nav.receivables')} />
+        <SubpageHeader title={t('financial.invoice.notFound')} onBack={onBack} parentLabel={parentLabel} />
         <p className="text-sm text-muted-foreground">{t('financial.invoice.notFoundDesc')}</p>
       </div>
     )
@@ -234,7 +245,7 @@ export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit }: {
       <SubpageHeader
         title={invoice.fiscalNumber ? `#${invoice.fiscalNumber}` : invoice.contactName ?? invoice.invoiceDate}
         onBack={onBack}
-        parentLabel={direction === 'debit' ? t('financial.nav.payables') : t('financial.nav.receivables')}
+        parentLabel={parentLabel}
         actions={
           <div className="flex items-center gap-1.5">
             {invoice.status !== 'cancelled' && invoice.status !== 'paid' && (
@@ -410,10 +421,8 @@ export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit }: {
                 const movStatus = STATUS_COLORS[mov.status] ?? STATUS_COLORS.pending
                 const MovIcon = movStatus.icon
 
-                // Resolve names for payment details
-                const method = paymentMethods.find((m) => m.id === mov.paymentMethodId)
-                const methodType = paymentMethodTypes.find((t) => t.id === (method?.paymentMethodTypeId ?? mov.paymentMethodTypeId))
-                const account = bankAccounts.find((a) => a.id === mov.bankAccountId)
+                // Cash events recorded against this installment (one per payment).
+                const instPayments = payments.filter((p) => (p.installmentNumber ?? null) === (mov.installmentNumber ?? null))
 
                 return (
                   <div key={mov.id}>
@@ -471,50 +480,60 @@ export function InvoiceDetailView({ invoiceId, direction, onBack, onEdit }: {
                               <div className="h-3 w-16 rounded bg-muted/30 animate-pulse" />
                               <div className="h-3 w-24 rounded bg-muted/40 animate-pulse" />
                             </div>
+                          ) : instPayments.length === 0 ? (
+                            <div className="text-[11px] text-muted-foreground">{t('financial.invoice.noDetails')}</div>
                           ) : (
-                            <div className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[11px] text-muted-foreground">
-                              {methodType && (
-                                <>
-                                  <span className="font-medium text-foreground">{methodType.name}</span>
-                                  {method && <span>({method.name})</span>}
-                                </>
-                              )}
-                              {mov.cardBrand && (
-                                <>
-                                  {methodType && <span>&middot;</span>}
-                                  <CreditCard className="h-3 w-3 shrink-0" />
-                                  <span className="font-medium text-foreground">{mov.cardBrand}</span>
-                                  {mov.cardInstallments && <span>{mov.cardInstallments}x</span>}
-                                </>
-                              )}
-                              {account && (
-                                <>
-                                  {(methodType || mov.cardBrand) && <span>&middot;</span>}
-                                  <Building2 className="h-3 w-3 shrink-0" />
-                                  <span>{account.name}</span>
-                                </>
-                              )}
-                              {mov.paidAmount > 0 && (
-                                <>
-                                  <span>&middot;</span>
-                                  <span className="font-medium text-success">{formatCurrency(mov.paidAmount, currency)}</span>
-                                </>
-                              )}
-                              {mov.paymentDate && (
-                                <>
-                                  <span>&middot;</span>
-                                  <span>{mov.paymentDate}</span>
-                                </>
-                              )}
-                              {mov.notes && (
-                                <>
-                                  <span>&middot;</span>
-                                  <span className="italic truncate max-w-[200px]">{mov.notes}</span>
-                                </>
-                              )}
-                              {!methodType && !mov.cardBrand && !account && !mov.notes && (
-                                <span>{t('financial.invoice.noDetails')}</span>
-                              )}
+                            <div className="space-y-1">
+                              {instPayments.map((p) => {
+                                const pMethod = paymentMethods.find((m) => m.id === p.paymentMethodId)
+                                const pType = paymentMethodTypes.find((tp) => tp.id === (pMethod?.paymentMethodTypeId ?? p.paymentMethodTypeId))
+                                const pAccount = bankAccounts.find((a) => a.id === p.bankAccountId)
+                                return (
+                                  <div key={p.id} className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[11px] text-muted-foreground">
+                                    <span className="font-medium text-success">{formatCurrency(p.paidAmount, currency)}</span>
+                                    {pType && (
+                                      <>
+                                        <span>&middot;</span>
+                                        <span className="font-medium text-foreground">{pType.name}</span>
+                                        {pMethod && <span>({pMethod.name})</span>}
+                                      </>
+                                    )}
+                                    {p.cardBrand && (
+                                      <>
+                                        <span>&middot;</span>
+                                        <CreditCard className="h-3 w-3 shrink-0" />
+                                        <span className="font-medium text-foreground">{p.cardBrand}</span>
+                                        {p.cardInstallments && <span>{p.cardInstallments}x</span>}
+                                      </>
+                                    )}
+                                    {pAccount && (
+                                      <>
+                                        <span>&middot;</span>
+                                        <Building2 className="h-3 w-3 shrink-0" />
+                                        <span>{pAccount.name}</span>
+                                      </>
+                                    )}
+                                    {(p.feeAmount ?? 0) > 0 && (
+                                      <>
+                                        <span>&middot;</span>
+                                        <span className="text-warning">{t('financial.statements.columnFee')} {formatCurrency(p.feeAmount ?? 0, currency)}</span>
+                                      </>
+                                    )}
+                                    {p.paymentDate && (
+                                      <>
+                                        <span>&middot;</span>
+                                        <span>{p.paymentDate}</span>
+                                      </>
+                                    )}
+                                    {p.notes && (
+                                      <>
+                                        <span>&middot;</span>
+                                        <span className="italic truncate max-w-[200px]">{p.notes}</span>
+                                      </>
+                                    )}
+                                  </div>
+                                )
+                              })}
                             </div>
                           )}
                         </div>

package/src/views/InvoiceFormView.tsx

@@ -122,7 +122,7 @@ interface FormItem extends CreateInvoiceItemInput {
   _id: string
 }
 
-function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdate, onRemove, entityLookups }: {
+function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdate, onRemove, entityLookups, showTypeSelector }: {
   item: FormItem
   index: number
   itemTypes: Array<{ value: string; label: string; icon?: string }>
@@ -132,6 +132,8 @@ function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdat
   onUpdate: (data: Partial<FormItem>) => void
   onRemove: () => void
   entityLookups: EntityLookupMap
+  /** Whether to show the per-row Service/Product/Other type pills. Hidden when no item type is lookup-backed. */
+  showTypeSelector: boolean
 }) {
   const t = useTranslation()
   const total = item.quantity * item.unitPrice - (item.discount ?? 0) + (item.surcharge ?? 0)
@@ -139,6 +141,14 @@ function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdat
   const hasAdjustments = (item.discount ?? 0) > 0 || (item.surcharge ?? 0) > 0
   const [showAdjustments, setShowAdjustments] = useState(hasAdjustments)
 
+  // Enter in any of the row's edit fields commits the row (same as "Done").
+  function handleFieldKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      onToggle()
+    }
+  }
+
   return (
     <div className="border-b last:border-0">
       {/* Compact row — always visible */}
@@ -166,22 +176,24 @@ function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdat
       {/* Expanded detail — edit fields */}
       {expanded && (
         <div className="px-4 pb-4 pt-1 ml-8 space-y-3 bg-muted/10">
-          {/* Type selector */}
-          <div className="flex gap-1.5">
-            {itemTypes.map((tp) => (
-              <button
-                key={tp.value}
-                onClick={() => onUpdate({ itemKind: tp.value })}
-                className={`rounded-full px-2.5 py-1 text-[10px] font-medium transition-colors ${
-                  item.itemKind === tp.value
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
-                }`}
-              >
-                {tp.label}
-              </button>
-            ))}
-          </div>
+          {/* Type selector — hidden when no item type is lookup-backed (manual-only entry) */}
+          {showTypeSelector && (
+            <div className="flex gap-1.5">
+              {itemTypes.map((tp) => (
+                <button
+                  key={tp.value}
+                  onClick={() => onUpdate({ itemKind: tp.value })}
+                  className={`rounded-full px-2.5 py-1 text-[10px] font-medium transition-colors ${
+                    item.itemKind === tp.value
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                  }`}
+                >
+                  {tp.label}
+                </button>
+              ))}
+            </div>
+          )}
 
           {/* Main fields */}
           <div className="grid gap-3 grid-cols-12">
@@ -225,6 +237,7 @@ function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdat
                     type="text"
                     value={item.description}
                     onChange={(e) => onUpdate({ description: e.target.value })}
+                    onKeyDown={handleFieldKeyDown}
                     placeholder={t('financial.invoiceForm.itemDescription')}
                     autoFocus
                     className="w-full mt-0.5 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"
@@ -239,10 +252,11 @@ function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdat
                 min={1}
                 value={item.quantity}
                 onChange={(e) => onUpdate({ quantity: Number(e.target.value) || 1 })}
+                onKeyDown={handleFieldKeyDown}
                 className="w-full mt-0.5 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1.5 text-sm text-center focus:outline-none focus:ring-2 focus:ring-ring"
               />
             </div>
-            <div className="col-span-4">
+            <div className="col-span-4" onKeyDown={handleFieldKeyDown}>
               <CurrencyInput
                 label={t('financial.invoiceForm.unitPrice')}
                 value={item.unitPrice}
@@ -274,6 +288,7 @@ function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdat
                     step={0.01}
                     value={item.discount ?? 0}
                     onChange={(e) => onUpdate({ discount: Number(e.target.value) || 0 })}
+                    onKeyDown={handleFieldKeyDown}
                     className="flex-1 bg-transparent px-2 py-1 text-xs outline-none"
                   />
                 </div>
@@ -288,6 +303,7 @@ function ItemRow({ item, index, itemTypes, currency, expanded, onToggle, onUpdat
                     step={0.01}
                     value={item.surcharge ?? 0}
                     onChange={(e) => onUpdate({ surcharge: Number(e.target.value) || 0 })}
+                    onKeyDown={handleFieldKeyDown}
                     className="flex-1 bg-transparent px-2 py-1 text-xs outline-none"
                   />
                 </div>
@@ -374,6 +390,16 @@ export function InvoiceFormView({ direction, editId, onSaved }: {
   const config = useFinancialConfig()
   const { currency, itemTypes, locations } = config
   const provider = useFinancialProvider()
+
+  // Whether any item type is backed by an entity lookup (product/service catalog).
+  // When none are, item entry is manual-only: skip the type-select step and add
+  // an "Other" line directly so the user can type the description right away.
+  const hasItemLookups = itemTypes.some((tp) => config.entityLookups[tp.value])
+  const defaultItemKind =
+    itemTypes.find((tp) => tp.value === 'other')?.value ??
+    itemTypes.find((tp) => !config.entityLookups[tp.value])?.value ??
+    itemTypes[0]?.value ??
+    'other'
   const createInvoice = useFinancialStore((s) => s.createInvoice)
   const hasLocations = locations.length > 0
   const isEdit = !!editId
@@ -504,6 +530,14 @@ export function InvoiceFormView({ direction, editId, onSaved }: {
     setAddingItem(false)
   }
 
+  // Entry point for the "Add Item" / "Add your first item" buttons. With
+  // lookup-backed types we ask which type first; otherwise we add an "Other"
+  // line straight away so the user types directly.
+  function startAddItem() {
+    if (hasItemLookups) setAddingItem(true)
+    else addItemOfKind(defaultItemKind)
+  }
+
   function updateItem(id: string, data: Partial<FormItem>) {
     setItems(items.map((it) => it._id === id ? { ...it, ...data } : it))
   }
@@ -737,7 +771,7 @@ export function InvoiceFormView({ direction, editId, onSaved }: {
               <h3 className="text-sm font-semibold">{t('financial.invoiceForm.items')}</h3>
             </div>
             <button
-              onClick={() => setAddingItem(true)}
+              onClick={startAddItem}
               className="inline-flex items-center gap-1.5 rounded-lg bg-primary border border-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 shadow-button-primary active:shadow-button-inset transition-colors"
             >
               <Plus className="h-3 w-3" /> {t('financial.invoiceForm.addItem')}
@@ -760,7 +794,7 @@ export function InvoiceFormView({ direction, editId, onSaved }: {
               <div className="py-10 text-center">
                 <LayoutList className="h-8 w-8 text-muted-foreground/30 mx-auto mb-2" />
                 <p className="text-sm text-muted-foreground">{t('financial.invoiceForm.noItems')}</p>
-                <button onClick={() => setAddingItem(true)} className="text-xs text-primary hover:underline mt-1">
+                <button onClick={startAddItem} className="text-xs text-primary hover:underline mt-1">
                   {t('financial.invoiceForm.addFirstItem')}
                 </button>
               </div>
@@ -777,6 +811,7 @@ export function InvoiceFormView({ direction, editId, onSaved }: {
                   onUpdate={(data) => updateItem(item._id, data)}
                   onRemove={() => { removeItem(item._id); if (expandedItemId === item._id) setExpandedItemId(null) }}
                   entityLookups={config.entityLookups}
+                  showTypeSelector={hasItemLookups}
                 />
               ))
             )}

package/src/views/PayablesView.tsx

@@ -1,13 +1,21 @@
 import React from 'react'
+import { useTranslation } from '@fayz-ai/core'
 import { InvoiceListView } from './InvoiceListView'
 import { InvoiceFormView } from './InvoiceFormView'
 import { InvoiceDetailView } from './InvoiceDetailView'
+import { referrerLabel } from './navReferrer'
 import type { ViewIntent } from '../FinancialPage'
 
-export function PayablesView({ intent, onNavigate }: {
+export function PayablesView({ intent, onNavigate, previousView, back }: {
   intent: ViewIntent
   onNavigate: (view: string) => void
+  /** The in-module view the user came from — drives the context-aware back link. */
+  previousView?: string | null
+  /** Return to the actual previous page (falls back to the given view). */
+  back?: (fallbackView?: string) => void
 }) {
+  const t = useTranslation()
+
   if (intent.mode === 'new') {
     return <InvoiceFormView direction="debit" onSaved={(id) => onNavigate(id ? `payables-detail:${id}` : 'payables-list')} />
   }
@@ -17,11 +25,14 @@ export function PayablesView({ intent, onNavigate }: {
   }
 
   if (intent.mode === 'detail' && intent.editId) {
+    // Back to where the user actually came from (e.g. statements), else the list.
+    const prevLabel = referrerLabel(previousView, t)
     return (
       <InvoiceDetailView
         invoiceId={intent.editId}
         direction="debit"
-        onBack={() => onNavigate('payables-list')}
+        backLabel={prevLabel ?? undefined}
+        onBack={prevLabel && back ? () => back('payables-list') : () => onNavigate('payables-list')}
         onEdit={() => onNavigate(`payables-edit:${intent.editId}`)}
       />
     )

package/src/views/ReceivablesView.tsx

@@ -1,13 +1,21 @@
 import React from 'react'
+import { useTranslation } from '@fayz-ai/core'
 import { InvoiceListView } from './InvoiceListView'
 import { InvoiceFormView } from './InvoiceFormView'
 import { InvoiceDetailView } from './InvoiceDetailView'
+import { referrerLabel } from './navReferrer'
 import type { ViewIntent } from '../FinancialPage'
 
-export function ReceivablesView({ intent, onNavigate }: {
+export function ReceivablesView({ intent, onNavigate, previousView, back }: {
   intent: ViewIntent
   onNavigate: (view: string) => void
+  /** The in-module view the user came from — drives the context-aware back link. */
+  previousView?: string | null
+  /** Return to the actual previous page (falls back to the given view). */
+  back?: (fallbackView?: string) => void
 }) {
+  const t = useTranslation()
+
   if (intent.mode === 'new') {
     return <InvoiceFormView direction="credit" onSaved={(id) => onNavigate(id ? `receivables-detail:${id}` : 'receivables-list')} />
   }
@@ -17,11 +25,14 @@ export function ReceivablesView({ intent, onNavigate }: {
   }
 
   if (intent.mode === 'detail' && intent.editId) {
+    // Back to where the user actually came from (e.g. statements), else the list.
+    const prevLabel = referrerLabel(previousView, t)
     return (
       <InvoiceDetailView
         invoiceId={intent.editId}
         direction="credit"
-        onBack={() => onNavigate('receivables-list')}
+        backLabel={prevLabel ?? undefined}
+        onBack={prevLabel && back ? () => back('receivables-list') : () => onNavigate('receivables-list')}
         onEdit={() => onNavigate(`receivables-edit:${intent.editId}`)}
       />
     )

package/src/views/ReconciliationView.tsx

@@ -0,0 +1,211 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { Landmark, RefreshCw, Check, Link2, Sparkles, ArrowDownCircle, ArrowUpCircle } from 'lucide-react'
+import { Button, toast } from '@fayz-ai/ui'
+import { useFinancialConfig, useFinancialProvider, formatCurrency } from '../FinancialContext'
+import { useTranslation } from '@fayz-ai/core'
+import type { FinancialMovement, ReconciliationCandidate } from '../types'
+
+// ---------------------------------------------------------------------------
+// Reconciliation (conciliação) — match imported bank lines to internal movements
+//
+// Imported bank-statement lines live in financial_movements tagged with an
+// externalSource. This screen lets the operator link each pending line to the
+// internal movement it settles (suggested by amount + date proximity), or
+// accept it standalone. Reusable across apps — fed by any bank connector that
+// imports through the financial provider's reconciliation methods.
+// ---------------------------------------------------------------------------
+
+export function ReconciliationView() {
+  const t = useTranslation()
+  const { currency } = useFinancialConfig()
+  const provider = useFinancialProvider()
+  const fmt = (n: number) => formatCurrency(n, currency)
+
+  const [lines, setLines] = useState<FinancialMovement[]>([])
+  const [loading, setLoading] = useState(true)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [candidates, setCandidates] = useState<ReconciliationCandidate[]>([])
+  const [candidatesLoading, setCandidatesLoading] = useState(false)
+  const [busy, setBusy] = useState(false)
+
+  const supported = typeof provider.getUnreconciled === 'function'
+
+  const load = useCallback(async () => {
+    if (!provider.getUnreconciled) return
+    setLoading(true)
+    try {
+      const data = await provider.getUnreconciled()
+      setLines(data)
+      // Keep the selection valid; otherwise drop the right panel.
+      setSelectedId((prev) => (prev && data.some((l) => l.id === prev) ? prev : null))
+    } finally {
+      setLoading(false)
+    }
+  }, [provider])
+
+  useEffect(() => { void load() }, [load])
+
+  // Load suggestions whenever the selected line changes.
+  useEffect(() => {
+    if (!selectedId || !provider.suggestReconciliation) { setCandidates([]); return }
+    let cancelled = false
+    setCandidatesLoading(true)
+    provider.suggestReconciliation(selectedId)
+      .then((c) => { if (!cancelled) setCandidates(c) })
+      .finally(() => { if (!cancelled) setCandidatesLoading(false) })
+    return () => { cancelled = true }
+  }, [selectedId, provider])
+
+  async function match(bankMovementId: string, matchedMovementId?: string) {
+    if (!provider.reconcileMovement) return
+    setBusy(true)
+    try {
+      await provider.reconcileMovement({ bankMovementId, matchedMovementId })
+      toast.success(t('financial.reconciliation.match'))
+      await load()
+    } catch {
+      toast.error(t('common.error'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (!supported) {
+    return (
+      <div className="py-16 text-center">
+        <Landmark className="h-8 w-8 text-muted-foreground/30 mx-auto mb-2" />
+        <p className="text-sm text-muted-foreground">{t('financial.reconciliation.empty')}</p>
+      </div>
+    )
+  }
+
+  const selected = lines.find((l) => l.id === selectedId) ?? null
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold tracking-tight">{t('financial.reconciliation.title')}</h2>
+          <p className="text-sm text-muted-foreground">{t('financial.reconciliation.subtitle')}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">
+            {lines.length > 0
+              ? t('financial.reconciliation.pending', { count: lines.length })
+              : t('financial.reconciliation.allDone')}
+          </span>
+          <Button variant="outline" size="sm" onClick={() => void load()} disabled={loading || busy}>
+            <RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
+            {t('financial.reconciliation.refresh')}
+          </Button>
+        </div>
+      </div>
+
+      {lines.length === 0 && !loading ? (
+        <div className="rounded-lg border bg-card shadow-sm py-16 text-center">
+          <Check className="h-8 w-8 text-success/40 mx-auto mb-2" />
+          <p className="text-sm font-medium">{t('financial.reconciliation.empty')}</p>
+          <p className="text-xs text-muted-foreground mt-1">{t('financial.reconciliation.emptyHint')}</p>
+        </div>
+      ) : (
+        <div className="grid gap-4 lg:grid-cols-2">
+          {/* Left — pending bank lines */}
+          <div className="rounded-lg border bg-card shadow-sm overflow-hidden">
+            <div className="flex items-center gap-2 px-4 py-3 border-b">
+              <Landmark className="h-4 w-4 text-muted-foreground" />
+              <h3 className="text-sm font-semibold">{t('financial.reconciliation.bankLines')}</h3>
+            </div>
+            <div className="divide-y max-h-[60vh] overflow-auto">
+              {lines.map((line) => {
+                const isCredit = line.direction === 'credit'
+                return (
+                  <button
+                    key={line.id}
+                    onClick={() => setSelectedId(line.id)}
+                    className={`w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/40 transition-colors ${
+                      selectedId === line.id ? 'bg-muted/50' : ''
+                    }`}
+                  >
+                    {isCredit
+                      ? <ArrowDownCircle className="h-4 w-4 text-success shrink-0" />
+                      : <ArrowUpCircle className="h-4 w-4 text-destructive shrink-0" />}
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm truncate">{line.notes || line.externalId}</p>
+                      <p className="text-[10px] text-muted-foreground">
+                        {line.paymentDate ?? line.dueDate}
+                        {line.externalSource && <span className="ml-1 uppercase tracking-wide">· {line.externalSource}</span>}
+                      </p>
+                    </div>
+                    <span className={`text-sm font-semibold shrink-0 ${isCredit ? 'text-success' : 'text-destructive'}`}>
+                      {fmt(line.amount)}
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Right — suggested matches for the selected line */}
+          <div className="rounded-lg border bg-card shadow-sm overflow-hidden">
+            <div className="flex items-center gap-2 px-4 py-3 border-b">
+              <Sparkles className="h-4 w-4 text-muted-foreground" />
+              <h3 className="text-sm font-semibold">{t('financial.reconciliation.candidates')}</h3>
+            </div>
+
+            {!selected ? (
+              <p className="px-4 py-16 text-center text-sm text-muted-foreground">
+                {t('financial.reconciliation.selectLine')}
+              </p>
+            ) : (
+              <div className="p-3 space-y-2">
+                {candidatesLoading ? (
+                  <div className="py-10 text-center text-xs text-muted-foreground">…</div>
+                ) : (
+                  <>
+                    {candidates.map((c) => (
+                      <div key={c.movement.id} className="flex items-center gap-3 rounded-md border p-2.5">
+                        <div className="min-w-0 flex-1">
+                          <p className="text-sm truncate">
+                            {c.invoice?.contactName || c.movement.notes || c.invoice?.fiscalNumber || t('financial.reconciliation.match')}
+                          </p>
+                          <p className="text-[10px] text-muted-foreground">
+                            {c.movement.dueDate}
+                            <span className="ml-1.5 inline-flex items-center rounded px-1 py-px bg-primary/10 text-primary font-medium">
+                              {t('financial.reconciliation.matchScore', { score: Math.round(c.score * 100) })}
+                            </span>
+                          </p>
+                        </div>
+                        <span className="text-sm font-semibold shrink-0">{fmt(c.movement.amount)}</span>
+                        <Button size="sm" disabled={busy} onClick={() => match(selected.id, c.movement.id)}>
+                          <Link2 className="h-3.5 w-3.5" />
+                          {t('financial.reconciliation.match')}
+                        </Button>
+                      </div>
+                    ))}
+                    {candidates.length === 0 && (
+                      <p className="py-6 text-center text-xs text-muted-foreground">
+                        {t('financial.reconciliation.noCandidates')}
+                      </p>
+                    )}
+
+                    {/* Accept the line standalone (no internal counterpart) */}
+                    <div className="pt-2 mt-1 border-t">
+                      <Button variant="outline" size="sm" className="w-full" disabled={busy} onClick={() => match(selected.id)}>
+                        <Check className="h-3.5 w-3.5" />
+                        {t('financial.reconciliation.accept')}
+                      </Button>
+                      <p className="text-[10px] text-muted-foreground text-center mt-1">
+                        {t('financial.reconciliation.acceptHint')}
+                      </p>
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}