@fayz-ai/plugin-financial 0.9.0 → 0.9.2

package/src/views/InvoiceListView.tsx

@@ -1,323 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react'
-import { FileText, CircleDashed, CircleEllipsis, CircleCheckBig, CircleAlert, Ban } from 'lucide-react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { ListView } from '@fayz-ai/ui'
-import { useFinancialConfig, useFinancialProvider, useFinancialStore, formatCurrency } from '../FinancialContext'
-import { SubpageHeader } from '@fayz-ai/ui'
-import { PersonLink, usePermissionOptional } from '@fayz-ai/saas'
-import { useTranslation } from '@fayz-ai/core'
-import type { TransactionDirection, InvoiceStatus, Invoice, ChartOfAccountsNode, CostCenter } from '../types'
-
-const STATUS_OPTIONS: { value: InvoiceStatus; labelKey: string; color: string; icon: React.ElementType }[] = [
-  { value: 'open', labelKey: 'financial.invoice.statusOpen', color: 'bg-info-soft text-info-soft-foreground', icon: CircleDashed },
-  { value: 'partial', labelKey: 'financial.invoice.statusPartial', color: 'bg-warning-soft text-warning-soft-foreground', icon: CircleEllipsis },
-  { value: 'paid', labelKey: 'financial.invoice.statusPaid', color: 'bg-success-soft text-success-soft-foreground', icon: CircleCheckBig },
-  { value: 'overdue', labelKey: 'financial.invoice.statusOverdue', color: 'bg-destructive-soft text-destructive-soft-foreground', icon: CircleAlert },
-  { value: 'cancelled', labelKey: 'financial.invoice.statusCancelled', color: 'bg-muted text-muted-foreground', icon: Ban },
-]
-
-const DATE_PRESETS = ['thisMonth', 'lastMonth', 'last30', 'thisYear'] as const
-type DatePreset = (typeof DATE_PRESETS)[number]
-
-const isoDate = (d: Date) =>
-  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
-
-/** Local-time boundaries so "this month" means the user's month, not UTC's. */
-function presetRange(preset: DatePreset): { from: string; to: string } {
-  const now = new Date()
-  switch (preset) {
-    case 'thisMonth':
-      return { from: isoDate(new Date(now.getFullYear(), now.getMonth(), 1)), to: isoDate(new Date(now.getFullYear(), now.getMonth() + 1, 0)) }
-    case 'lastMonth':
-      return { from: isoDate(new Date(now.getFullYear(), now.getMonth() - 1, 1)), to: isoDate(new Date(now.getFullYear(), now.getMonth(), 0)) }
-    case 'last30': {
-      const from = new Date(now)
-      from.setDate(from.getDate() - 29)
-      return { from: isoDate(from), to: isoDate(now) }
-    }
-    case 'thisYear':
-      return { from: isoDate(new Date(now.getFullYear(), 0, 1)), to: isoDate(new Date(now.getFullYear(), 11, 31)) }
-  }
-}
-
-function StatusBadge({ status }: { status: string }) {
-  const t = useTranslation()
-  const opt = STATUS_OPTIONS.find((o) => o.value === status)
-  const Icon = opt?.icon ?? CircleDashed
-  return (
-    <span className={`inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-[10px] font-medium ${opt?.color ?? 'bg-muted text-muted-foreground'}`}>
-      <Icon className="h-2.5 w-2.5" /> {opt ? t(opt.labelKey) : status}
-    </span>
-  )
-}
-
-function useInvoiceColumns(currency: { code: string; locale: string; symbol: string }): ColumnDef<Invoice, any>[] {
-  const t = useTranslation()
-  return useMemo(() => [
-    {
-      accessorKey: 'fiscalNumber', header: '#', size: 110,
-      cell: ({ getValue }) => {
-        const num = getValue() as string | undefined
-        return num ? <span className="text-xs font-mono text-muted-foreground">#{num}</span> : <span className="text-muted-foreground">—</span>
-      },
-    },
-    {
-      accessorKey: 'invoiceDate', header: t('financial.invoice.columnDate'),
-      cell: ({ getValue }) => <span className="text-muted-foreground text-xs">{getValue() as string}</span>,
-    },
-    {
-      id: 'description', header: t('financial.invoice.columnDescription'),
-      cell: ({ row }) => (
-        <div onClick={(e) => e.stopPropagation()}>
-          {row.original.contactName ? (
-            <PersonLink personId={row.original.contactId} name={row.original.contactName} size="sm" className="text-sm font-medium" />
-          ) : (
-            <p className="font-medium">—</p>
-          )}
-          {row.original.itemsSummary && <p className="text-[10px] text-muted-foreground truncate max-w-[250px]">{row.original.itemsSummary}</p>}
-        </div>
-      ),
-    },
-    {
-      accessorKey: 'totalAmount', header: t('financial.invoice.columnAmount'), enableSorting: true,
-      cell: ({ row }) => (
-        <span className={`font-medium ${row.original.status === 'cancelled' ? 'line-through text-muted-foreground' : ''}`}>
-          {formatCurrency(row.original.totalAmount, currency)}
-        </span>
-      ),
-    },
-    {
-      accessorKey: 'paidAmount', header: t('financial.invoice.columnPaid'),
-      cell: ({ row }) => (
-        <span className={row.original.status === 'cancelled' ? 'line-through text-muted-foreground' : 'text-muted-foreground'}>
-          {formatCurrency(row.original.paidAmount, currency)}
-        </span>
-      ),
-    },
-    {
-      accessorKey: 'status', header: t('financial.invoice.columnStatus'),
-      cell: ({ getValue }) => <StatusBadge status={getValue() as string} />,
-    },
-    {
-      accessorKey: 'totalInstallments', header: t('financial.invoice.columnInst'),
-      cell: ({ getValue }) => <span className="text-muted-foreground">{getValue() as number}</span>,
-    },
-  ], [currency, t])
-}
-
-export function InvoiceListView({ direction, onNew, onEdit }: {
-  direction: TransactionDirection
-  onNew?: () => void
-  onEdit?: (id: string) => void
-}) {
-  const t = useTranslation()
-  // Role-side create gate: hide the "new invoice" affordance (header + empty-state
-  // action) when the role lacks `create` — the module's single route only guards read.
-  const can = usePermissionOptional()
-  const onNewGated = can('financial', 'create') ? onNew : undefined
-  const { currency } = useFinancialConfig()
-  const provider = useFinancialProvider()
-  const invoices = useFinancialStore((s) => s.invoices)
-  const invoicesTotal = useFinancialStore((s) => s.invoicesTotal)
-  const invoicesLoading = useFinancialStore((s) => s.invoicesLoading)
-  const fetchInvoices = useFinancialStore((s) => s.fetchInvoices)
-
-  const [search, setSearch] = useState('')
-  const [statusFilter, setStatusFilter] = useState<InvoiceStatus[]>([])
-  const [accountId, setAccountId] = useState('')
-  const [costCenterId, setCostCenterId] = useState('')
-  const [accounts, setAccounts] = useState<ChartOfAccountsNode[]>([])
-  const [costCenters, setCostCenters] = useState<CostCenter[]>([])
-  const [datePreset, setDatePreset] = useState<DatePreset | 'all' | 'custom'>('all')
-  const [dateFrom, setDateFrom] = useState('')
-  const [dateTo, setDateTo] = useState('')
-
-  // Open-ended on either side: a missing bound becomes a sentinel the providers can compare against.
-  const dateRange = useMemo(() => {
-    if (!dateFrom && !dateTo) return undefined
-    return { from: dateFrom || '0001-01-01', to: dateTo || '9999-12-31' }
-  }, [dateFrom, dateTo])
-
-  const applyPreset = (value: DatePreset | 'all' | 'custom') => {
-    setDatePreset(value)
-    if (value === 'all') { setDateFrom(''); setDateTo(''); return }
-    if (value === 'custom') return
-    const range = presetRange(value)
-    setDateFrom(range.from)
-    setDateTo(range.to)
-  }
-
-  useEffect(() => {
-    let active = true
-    Promise.all([provider.getChartOfAccounts(), provider.getCostCenters()])
-      .then(([accountRows, costCenterRows]) => {
-        if (!active) return
-        setAccounts(accountRows.filter((account) => account.nodeType === 'leaf'))
-        setCostCenters(costCenterRows)
-      })
-      .catch(() => {
-        if (!active) return
-        setAccounts([])
-        setCostCenters([])
-      })
-    return () => { active = false }
-  }, [provider])
-
-  useEffect(() => {
-    fetchInvoices({
-      direction,
-      status: statusFilter.length > 0 ? statusFilter : undefined,
-      search: search || undefined,
-      accountId: accountId || undefined,
-      costCenterId: costCenterId || undefined,
-      dateRange,
-    })
-  }, [direction, statusFilter, search, accountId, costCenterId, dateRange])
-
-  const filtered = invoices.filter((inv) => inv.direction === direction)
-  const listTitle = direction === 'debit' ? t('financial.invoice.accountsPayable') : t('financial.invoice.accountsReceivable')
-  const columns = useInvoiceColumns(currency)
-  const tags = useMemo(
-    () => STATUS_OPTIONS.filter((o) => o.value !== 'cancelled').map((o) => ({ value: o.value, label: t(o.labelKey) })),
-    [t],
-  )
-
-  // Summary totals from currently visible data
-  const summary = useMemo(() => {
-    let totalAmount = 0
-    let paidAmount = 0
-    let openAmount = 0
-    for (const inv of filtered) {
-      if (inv.status === 'cancelled') continue
-      totalAmount += inv.totalAmount
-      paidAmount += inv.paidAmount
-    }
-    openAmount = totalAmount - paidAmount
-    return { totalAmount, paidAmount, openAmount }
-  }, [filtered])
-
-  const receivedLabel = direction === 'debit' ? t('financial.invoice.summaryPaid') : t('financial.invoice.summaryReceived')
-  const pendingLabel = direction === 'debit' ? t('financial.invoice.summaryPayable') : t('financial.invoice.summaryReceivable')
-
-  return (
-    <div className="space-y-4">
-      <SubpageHeader
-        title={listTitle}
-        subtitle={t('financial.invoice.invoices', { count: filtered.length })}
-      />
-      <div className="flex flex-wrap items-end gap-3 rounded-lg border bg-muted/20 px-4 py-3">
-          <label className="flex min-w-[180px] flex-col gap-1 text-xs font-medium text-muted-foreground">
-            {t('financial.invoice.filterPeriod')}
-            <select
-              className="h-9 rounded-md border bg-background px-3 text-sm text-foreground"
-              value={datePreset}
-              onChange={(event) => applyPreset(event.target.value as DatePreset | 'all' | 'custom')}
-            >
-              <option value="all">{t('financial.invoice.filterAllPeriods')}</option>
-              <option value="thisMonth">{t('financial.invoice.filterThisMonth')}</option>
-              <option value="lastMonth">{t('financial.invoice.filterLastMonth')}</option>
-              <option value="last30">{t('financial.invoice.filterLast30')}</option>
-              <option value="thisYear">{t('financial.invoice.filterThisYear')}</option>
-              <option value="custom">{t('financial.invoice.filterCustom')}</option>
-            </select>
-          </label>
-          <label className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
-            {t('financial.invoice.filterFrom')}
-            <input
-              type="date"
-              className="h-9 rounded-md border bg-background px-3 text-sm text-foreground"
-              value={dateFrom}
-              max={dateTo || undefined}
-              onChange={(event) => { setDateFrom(event.target.value); setDatePreset('custom') }}
-            />
-          </label>
-          <label className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
-            {t('financial.invoice.filterTo')}
-            <input
-              type="date"
-              className="h-9 rounded-md border bg-background px-3 text-sm text-foreground"
-              value={dateTo}
-              min={dateFrom || undefined}
-              onChange={(event) => { setDateTo(event.target.value); setDatePreset('custom') }}
-            />
-          </label>
-          {(dateFrom || dateTo) && (
-            <button
-              type="button"
-              className="h-9 rounded-md px-2 text-xs font-medium text-muted-foreground hover:text-foreground"
-              onClick={() => applyPreset('all')}
-            >
-              {t('financial.invoice.filterClear')}
-            </button>
-          )}
-          {accounts.length > 0 && (
-            <label className="flex min-w-[220px] flex-col gap-1 text-xs font-medium text-muted-foreground">
-              {t('financial.invoice.filterAccount')}
-              <select
-                className="h-9 rounded-md border bg-background px-3 text-sm text-foreground"
-                value={accountId}
-                onChange={(event) => setAccountId(event.target.value)}
-              >
-                <option value="">{t('financial.invoice.filterAllAccounts')}</option>
-                {accounts.map((account) => (
-                  <option key={account.id} value={account.id}>{account.code} - {account.name}</option>
-                ))}
-              </select>
-            </label>
-          )}
-          {costCenters.length > 0 && (
-            <label className="flex min-w-[220px] flex-col gap-1 text-xs font-medium text-muted-foreground">
-              {t('financial.invoice.filterCostCenter')}
-              <select
-                className="h-9 rounded-md border bg-background px-3 text-sm text-foreground"
-                value={costCenterId}
-                onChange={(event) => setCostCenterId(event.target.value)}
-              >
-                <option value="">{t('financial.invoice.filterAllCostCenters')}</option>
-                {costCenters.map((costCenter) => (
-                  <option key={costCenter.id} value={costCenter.id}>{costCenter.code} - {costCenter.name}</option>
-                ))}
-              </select>
-            </label>
-          )}
-      </div>
-      <ListView<Invoice>
-        columns={columns}
-        data={filtered}
-        loading={invoicesLoading}
-        searchPlaceholder={t('financial.invoice.searchPlaceholder')}
-        search={search}
-        onSearchChange={setSearch}
-        searchDebounce={0}
-        tags={tags}
-        activeTag={statusFilter.length === 1 ? statusFilter[0] : undefined}
-        onTagChange={(v) => setStatusFilter(v ? [v as InvoiceStatus] : [])}
-        newLabel={t('financial.invoice.new')}
-        onNew={onNewGated}
-        onRowClick={(row) => onEdit?.(row.id)}
-        emptyIcon={FileText}
-        emptyMessage={t('financial.invoice.noInvoices')}
-        emptyActionLabel={onNewGated ? t('financial.invoice.createFirst') : undefined}
-        onEmptyAction={onNewGated}
-      />
-      {filtered.length > 0 && !invoicesLoading && (
-        <div className="flex items-center justify-end gap-6 rounded-lg border bg-muted/30 px-5 py-3 text-sm">
-          <div className="flex items-center gap-2">
-            <span className="text-muted-foreground">{t('financial.invoice.summaryTotal')}</span>
-            <span className="font-semibold">{formatCurrency(summary.totalAmount, currency)}</span>
-          </div>
-          <div className="h-4 w-px bg-border" />
-          <div className="flex items-center gap-2">
-            <span className="text-muted-foreground">{receivedLabel}</span>
-            <span className="font-semibold text-success">{formatCurrency(summary.paidAmount, currency)}</span>
-          </div>
-          <div className="h-4 w-px bg-border" />
-          <div className="flex items-center gap-2">
-            <span className="text-muted-foreground">{pendingLabel}</span>
-            <span className="font-semibold text-warning">{formatCurrency(summary.openAmount, currency)}</span>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/views/NotasFiscaisView.tsx

@@ -1,209 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { FileText, Plus, Send, Ban, ExternalLink, FileCheck2 } from 'lucide-react'
-import { SubpageHeader, Button, Input, Skeleton } from '@fayz-ai/ui'
-import { PermissionGate } from '@fayz-ai/saas'
-import { useFinancialProvider, useFinancialConfig, formatCurrency } from '../FinancialContext'
-import type { NotaFiscal, NotaFiscalModel, NotaFiscalStatus, CreateNotaFiscalInput } from '../types'
-
-// ---------------------------------------------------------------------------
-// Notas Fiscais — fiscal-document tracking (NF-e / NFC-e / NFS-e). Structure +
-// UI; issuing is delegated (provider.issueNota assigns número/série locally
-// until a SEFAZ emissor is wired). Draft → Emitir → Emitida, with cancel and
-// links to the authorized XML / DANFE once an emissor populates them.
-// ---------------------------------------------------------------------------
-
-const MODEL_LABEL: Record<NotaFiscalModel, string> = {
-  nfe: 'NF-e', nfce: 'NFC-e', nfse: 'NFS-e',
-}
-
-const STATUS_META: Record<NotaFiscalStatus, { label: string; className: string }> = {
-  draft:      { label: 'Rascunho',   className: 'bg-muted text-muted-foreground' },
-  processing: { label: 'Processando', className: 'bg-blue-100 text-blue-800' },
-  issued:     { label: 'Emitida',    className: 'bg-emerald-100 text-emerald-800' },
-  cancelled:  { label: 'Cancelada',  className: 'bg-red-100 text-red-700' },
-  error:      { label: 'Erro',       className: 'bg-orange-100 text-orange-700' },
-}
-
-export function NotasFiscaisView() {
-  const provider = useFinancialProvider()
-  const { currency } = useFinancialConfig()
-  const [notas, setNotas] = useState<NotaFiscal[]>([])
-  const [loading, setLoading] = useState(true)
-  const [creating, setCreating] = useState(false)
-  const [busy, setBusy] = useState<string | null>(null)
-
-  const supported = typeof provider.getNotas === 'function'
-
-  const reload = useCallback(async () => {
-    if (!provider.getNotas) { setLoading(false); return }
-    setLoading(true)
-    try {
-      const res = await provider.getNotas({ pageSize: 100 })
-      setNotas(res.data)
-    } finally {
-      setLoading(false)
-    }
-  }, [provider])
-
-  useEffect(() => { void reload() }, [reload])
-
-  const create = async (input: CreateNotaFiscalInput) => {
-    if (!provider.createNota) return
-    await provider.createNota(input)
-    setCreating(false)
-    await reload()
-  }
-
-  const issue = async (id: string) => {
-    if (!provider.issueNota) return
-    setBusy(id)
-    try { await provider.issueNota(id); await reload() } finally { setBusy(null) }
-  }
-
-  const cancel = async (id: string) => {
-    if (!provider.cancelNota) return
-    setBusy(id)
-    try { await provider.cancelNota(id); await reload() } finally { setBusy(null) }
-  }
-
-  if (!supported) {
-    return (
-      <div className="p-1">
-        <SubpageHeader title="Notas Fiscais" subtitle="Emissão e acompanhamento de NF-e / NFC-e / NFS-e" icon="FileText" />
-        <p className="mt-4 text-sm text-muted-foreground">Este provedor financeiro ainda não expõe notas fiscais.</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="p-1">
-      <SubpageHeader
-        title="Notas Fiscais"
-        subtitle="Emissão e acompanhamento de NF-e / NFC-e / NFS-e"
-        icon="FileText"
-        actions={
-          <PermissionGate feature="financial" action="create">
-            <Button size="sm" onClick={() => setCreating(true)}>
-              <Plus className="mr-1.5 h-4 w-4" /> Nova nota
-            </Button>
-          </PermissionGate>
-        }
-      />
-
-      <div className="mt-3 rounded-md border border-amber-300/50 bg-amber-50 px-3 py-2 text-xs text-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
-        Emissão fiscal (SEFAZ) ainda não integrada — "Emitir" atribui número/série localmente para acompanhamento. A integração com o emissor entra sem mudar esta tela.
-      </div>
-
-      {creating && <CreateForm onCancel={() => setCreating(false)} onCreate={create} />}
-
-      {loading ? (
-        <div className="mt-4 space-y-2">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="flex items-center gap-3 rounded-card border border-border bg-card p-3">
-              <Skeleton className="h-9 w-9 shrink-0 rounded-full" />
-              <div className="min-w-0 flex-1 space-y-2">
-                <Skeleton className="h-3.5 w-40 rounded" />
-                <Skeleton className="h-3 w-56 rounded" />
-              </div>
-              <Skeleton className="h-8 w-20 shrink-0 rounded-md" />
-            </div>
-          ))}
-        </div>
-      ) : notas.length === 0 ? (
-        <div className="mt-4 rounded-card border border-dashed border-border p-8 text-center">
-          <FileText className="mx-auto h-8 w-8 text-muted-foreground" />
-          <p className="mt-2 text-sm font-medium text-foreground">Nenhuma nota fiscal ainda</p>
-          <p className="mt-1 text-xs text-muted-foreground">Crie uma nota a partir de um pedido ou manualmente.</p>
-        </div>
-      ) : (
-        <div className="mt-4 space-y-2">
-          {notas.map((n) => {
-            const meta = STATUS_META[n.status]
-            return (
-              <div key={n.id} className="flex items-center gap-3 rounded-card border border-border bg-card p-3">
-                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10">
-                  <FileText className="h-4 w-4 text-primary" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-foreground">
-                      {MODEL_LABEL[n.model]} {n.number ? `#${n.number}` : '(rascunho)'}
-                    </span>
-                    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${meta.className}`}>{meta.label}</span>
-                  </div>
-                  <p className="truncate text-xs text-muted-foreground">
-                    {n.contactName || 'Sem destinatário'} · {formatCurrency(n.totalAmount, currency)}
-                    {n.issuedAt ? ` · ${n.issuedAt.slice(0, 10)}` : ''}
-                  </p>
-                </div>
-                <div className="flex shrink-0 items-center gap-1">
-                  {n.danfeUrl && (
-                    <Button size="sm" variant="ghost" onClick={() => window.open(n.danfeUrl!, '_blank', 'noopener,noreferrer')} title="DANFE">
-                      <FileCheck2 className="h-4 w-4" />
-                    </Button>
-                  )}
-                  {n.xmlUrl && (
-                    <Button size="sm" variant="ghost" onClick={() => window.open(n.xmlUrl!, '_blank', 'noopener,noreferrer')} title="XML">
-                      <ExternalLink className="h-4 w-4" />
-                    </Button>
-                  )}
-                  {n.status === 'draft' && (
-                    <PermissionGate feature="financial" action="edit">
-                      <Button size="sm" disabled={busy === n.id} onClick={() => issue(n.id)}>
-                        <Send className="mr-1.5 h-3.5 w-3.5" /> Emitir
-                      </Button>
-                    </PermissionGate>
-                  )}
-                  {n.status === 'issued' && (
-                    <PermissionGate feature="financial" action="edit">
-                      <Button size="sm" variant="ghost" disabled={busy === n.id} onClick={() => cancel(n.id)} title="Cancelar">
-                        <Ban className="h-4 w-4 text-red-500" />
-                      </Button>
-                    </PermissionGate>
-                  )}
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function CreateForm({ onCancel, onCreate }: { onCancel: () => void; onCreate: (input: CreateNotaFiscalInput) => void }) {
-  const [model, setModel] = useState<NotaFiscalModel>('nfe')
-  const [contactName, setContactName] = useState('')
-  const [total, setTotal] = useState('')
-  const [observations, setObservations] = useState('')
-
-  const models: NotaFiscalModel[] = ['nfe', 'nfce', 'nfse']
-
-  return (
-    <div className="mt-4 rounded-card border border-border bg-card p-4">
-      <p className="mb-3 text-sm font-semibold text-foreground">Nova nota fiscal</p>
-      <div className="mb-3 flex flex-wrap gap-2">
-        {models.map((m) => (
-          <button key={m} type="button" onClick={() => setModel(m)} className={`rounded-full px-3 py-1 text-xs font-medium ${m === model ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:text-foreground'}`}>
-            {MODEL_LABEL[m]}
-          </button>
-        ))}
-      </div>
-      <div className="flex flex-col gap-2 sm:flex-row">
-        <Input value={contactName} placeholder="Destinatário" onChange={(e) => setContactName(e.target.value)} className="flex-1" />
-        <Input value={total} placeholder="Valor total" inputMode="decimal" onChange={(e) => setTotal(e.target.value)} className="sm:w-40" />
-      </div>
-      <Input value={observations} placeholder="Observações (opcional)" onChange={(e) => setObservations(e.target.value)} className="mt-2" />
-      <div className="mt-3 flex gap-2">
-        <Button
-          size="sm"
-          disabled={!total || Number.isNaN(Number(total))}
-          onClick={() => onCreate({ model, contactName: contactName || undefined, totalAmount: Number(total) || 0, observations: observations || undefined })}
-        >
-          Criar rascunho
-        </Button>
-        <Button size="sm" variant="outline" onClick={onCancel}>Cancelar</Button>
-      </div>
-    </div>
-  )
-}

package/src/views/PayablesView.tsx

@@ -1,48 +0,0 @@
-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, 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')} />
-  }
-
-  if (intent.mode === 'edit' && intent.editId) {
-    return <InvoiceFormView direction="debit" editId={intent.editId} onSaved={() => onNavigate(`payables-detail:${intent.editId}`)} />
-  }
-
-  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"
-        backLabel={prevLabel ?? undefined}
-        onBack={prevLabel && back ? () => back('payables-list') : () => onNavigate('payables-list')}
-        onEdit={() => onNavigate(`payables-edit:${intent.editId}`)}
-      />
-    )
-  }
-
-  return (
-    <InvoiceListView
-      direction="debit"
-      onNew={() => onNavigate('payables-new')}
-      onEdit={(id) => onNavigate(`payables-detail:${id}`)}
-    />
-  )
-}