@fayz-ai/plugin-financial 0.1.7 → 0.8.0

package/src/store.ts

@@ -9,6 +9,7 @@ import type {
   InvoiceQuery, MovementQuery, StatementQuery,
   CreateInvoiceInput, PayMovementInput, CreateTransferInput,
   OpenCashSessionInput, CloseCashSessionInput,
+  QuickTransactionInput,
   DateRange,
 } from './types'
 
@@ -55,6 +56,8 @@ export interface FinancialUIState {
   fetchStatement(query: StatementQuery): Promise<void>
   fetchCardTransactions(dateRange?: DateRange): Promise<void>
   createInvoice(input: CreateInvoiceInput): Promise<Invoice>
+  /** FAY-1225 "log money in a few taps": one call → the right provider plumbing + full surface refresh. */
+  createQuickTransaction(input: QuickTransactionInput): Promise<void>
   payMovement(input: PayMovementInput): Promise<void>
   createTransfer(input: CreateTransferInput): Promise<void>
   cancelInvoice(invoiceId: string): Promise<void>
@@ -169,6 +172,91 @@ export function createFinancialStore(provider: FinancialDataProvider): StoreApi<
       }
     },
 
+    async createQuickTransaction(input) {
+      try {
+        if (input.type === 'transfer') {
+          if (!input.bankAccountId || !input.toAccountId) {
+            throw new Error('Select source and destination accounts')
+          }
+          await provider.createTransfer({
+            fromAccountId: input.bankAccountId,
+            toAccountId: input.toAccountId,
+            amount: input.amount,
+            date: input.date,
+            notes: input.description?.trim() || undefined,
+          })
+        } else {
+          const direction: 'debit' | 'credit' = input.type === 'income' ? 'credit' : 'debit'
+          const desc = input.description?.trim() || (input.type === 'income' ? 'Receita' : 'Despesa')
+          // 1. The obligation (invoice + bill movement).
+          // Persist the recurring flag + the snapped-receipt data URL (FAY-1226)
+          // on the invoice metadata so the transaction feed can indicate/preview it.
+          const invoiceMeta: Record<string, unknown> = {}
+          if (input.recurring) invoiceMeta.recurring = true
+          if (input.receiptUrl) invoiceMeta.receiptUrl = input.receiptUrl
+          const invoice = await provider.createInvoice({
+            direction,
+            invoiceDate: input.date,
+            contactName: desc,
+            metadata: Object.keys(invoiceMeta).length > 0 ? invoiceMeta : undefined,
+            items: [{
+              itemKind: 'other',
+              description: desc,
+              quantity: 1,
+              unitPrice: input.amount,
+              accountId: input.categoryId,
+            }],
+            installments: [{
+              direction,
+              movementKind: 'bill',
+              amount: input.amount,
+              dueDate: input.date,
+              installmentNumber: 1,
+              bankAccountId: input.bankAccountId,
+              notes: desc,
+            }],
+          })
+          // 2. Settle it now when marked paid → a realized cash event that shows in
+          //    the statement/extract and feeds the monthly cash-flow KPIs.
+          if (input.paid) {
+            const movements = await provider.getMovements({ direction, status: 'pending' })
+            const bill = movements.data.find((m) => m.invoiceId === invoice.id && m.movementKind === 'bill')
+            if (bill) {
+              await provider.payMovement({
+                movementId: bill.id,
+                amount: input.amount,
+                paymentDate: input.date,
+                bankAccountId: input.bankAccountId,
+                notes: desc,
+              })
+            }
+          }
+        }
+        // Refresh every surface this store feeds: Home/Resumo KPIs (summary),
+        // the mobile transaction list (statement), balances, and the payables/
+        // receivables tables (invoices).
+        const invoiceQuery = get().invoiceQuery
+        const statementQuery = get().statementQuery
+        const [summary, bankAccounts, invoicesRes, statement] = await Promise.all([
+          provider.getSummary(),
+          provider.getBankAccounts(),
+          provider.getInvoices(invoiceQuery),
+          statementQuery ? provider.getStatement(statementQuery) : Promise.resolve(get().statement),
+        ])
+        set({
+          summary,
+          bankAccounts,
+          invoices: invoicesRes.data,
+          invoicesTotal: invoicesRes.total,
+          statement,
+        })
+        toast.success('Transaction saved')
+      } catch (err: any) {
+        toast.error('Failed to save transaction', { description: err?.message })
+        throw err
+      }
+    },
+
     async payMovement(input) {
       try {
         await provider.payMovement(input)

package/src/types.ts

@@ -199,6 +199,16 @@ export interface ChartOfAccountsNode {
   createdAt: string
 }
 
+export interface CostCenter {
+  id: string
+  code: string
+  name: string
+  isActive: boolean
+  tenantId: string
+  createdAt: string
+  updatedAt: string
+}
+
 export interface CardTransaction {
   id: string
   movementId: string
@@ -316,6 +326,8 @@ export interface InvoiceQuery {
   direction?: TransactionDirection
   status?: InvoiceStatus | InvoiceStatus[]
   contactId?: string
+  accountId?: string
+  costCenterId?: string
   dateRange?: DateRange
   search?: string
   page?: number
@@ -347,6 +359,39 @@ export interface CreateTransferInput {
   notes?: string
 }
 
+/**
+ * "Log money in a few taps" (FAY-1225). A single-transaction quick-add that the
+ * store expands into the right provider calls: expense/income → createInvoice
+ * (+ payMovement when marked paid); transfer → createTransfer. Keeps the
+ * Mobills-style form dumb — it only collects fields, the store does the plumbing.
+ */
+export type QuickTransactionType = 'expense' | 'income' | 'transfer'
+
+export interface QuickTransactionInput {
+  type: QuickTransactionType
+  /** Positive amount in the account currency */
+  amount: number
+  /** YYYY-MM-DD */
+  date: string
+  /** When true, the movement is settled immediately (creates a paid cash event). */
+  paid: boolean
+  description?: string
+  /** Chart-of-accounts / cost-center id (category chip) */
+  categoryId?: string
+  /** expense/income: bank account or card. transfer: source account. */
+  bankAccountId?: string
+  /** transfer: destination account */
+  toAccountId?: string
+  /** Marks the transaction as recurring (stored in metadata; UI affordance). */
+  recurring?: boolean
+  /**
+   * FAY-1226 "snap a receipt": a captured/attached receipt image as a data URL
+   * (mock mode has no Supabase bucket). Persisted on the created invoice's
+   * metadata so the transaction feed can show a 📎 indicator + preview.
+   */
+  receiptUrl?: string
+}
+
 export interface TransferResult {
   /** Shared correlation id stored in both legs' metadata */
   transferId: string

package/src/views/CardsView.tsx

@@ -1,74 +1,210 @@
-import React, { useEffect } from 'react'
-import { CreditCard, Check } from 'lucide-react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { CreditCard, Plus, CalendarClock } from 'lucide-react'
 import { useFinancialConfig, useFinancialStore, formatCurrency } from '../FinancialContext'
 import { SubpageHeader } from '@fayz-ai/ui'
 import { useTranslation } from '@fayz-ai/core'
+import type { BankAccount } from '../types'
+import { QuickTransactionForm } from './QuickTransactionForm'
+
+// ---------------------------------------------------------------------------
+// Per-card money math. Credit-card balances are stored as debt (negative), so
+// the current bill (fatura) is the magnitude owed; the available limit is what
+// remains of the credit line.
+// ---------------------------------------------------------------------------
+
+function cardMath(acc: BankAccount) {
+  const limit = acc.creditLimit ?? 0
+  const used = Math.max(0, -acc.currentBalance)
+  const available = Math.max(0, limit - used)
+  const pct = limit > 0 ? Math.min(100, (used / limit) * 100) : 0
+  return { limit, used, available, pct }
+}
 
 export function CardsView() {
   const t = useTranslation()
-  const { currency, labels } = useFinancialConfig()
-  const cardTransactions = useFinancialStore((s) => s.cardTransactions)
-  const cardsLoading = useFinancialStore((s) => s.cardsLoading)
-  const fetchCardTransactions = useFinancialStore((s) => s.fetchCardTransactions)
-
-  useEffect(() => { fetchCardTransactions() }, [])
-
-  // Group by card brand
-  const byBrand: Record<string, typeof cardTransactions> = {}
-  for (const tx of cardTransactions) {
-    const brand = tx.cardBrand || 'Other'
-    if (!byBrand[brand]) byBrand[brand] = []
-    byBrand[brand].push(tx)
+  const { currency } = useFinancialConfig()
+  const bankAccounts = useFinancialStore((s) => s.bankAccounts)
+  const bankAccountsLoading = useFinancialStore((s) => s.bankAccountsLoading)
+  const fetchBankAccounts = useFinancialStore((s) => s.fetchBankAccounts)
+
+  const [tab, setTab] = useState<'open' | 'closed'>('open')
+  const [addOpen, setAddOpen] = useState(false)
+  const [addCardId, setAddCardId] = useState<string | undefined>()
+
+  useEffect(() => { fetchBankAccounts() }, [])
+
+  const cards = useMemo(
+    () => bankAccounts.filter((a) => a.accountType === 'credit_card'),
+    [bankAccounts],
+  )
+  const openCards = useMemo(() => cards.filter((c) => c.isActive), [cards])
+  const closedCards = useMemo(() => cards.filter((c) => !c.isActive), [cards])
+  const visibleCards = tab === 'open' ? openCards : closedCards
+
+  // Summary strip is computed over the active (open) cards — the money that is
+  // actually in play this cycle.
+  const summary = useMemo(() => {
+    let totalAvailable = 0
+    let totalBills = 0
+    for (const c of openCards) {
+      const { available, used } = cardMath(c)
+      totalAvailable += available
+      totalBills += used
+    }
+    return { totalAvailable, totalBills }
+  }, [openCards])
+
+  function openAddExpense(cardId: string) {
+    setAddCardId(cardId)
+    setAddOpen(true)
   }
 
   return (
     <div className="space-y-4">
       <SubpageHeader title={t('financial.cards.title')} subtitle={t('financial.cards.subtitle')} />
-      {cardsLoading ? (
+
+      {bankAccountsLoading && cards.length === 0 ? (
         <div className="text-center py-12 text-sm text-muted-foreground">Loading...</div>
-      ) : cardTransactions.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-12 text-center rounded-lg border-2 border-dashed border-muted">
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-500/20 mb-2">
-            <CreditCard className="h-5 w-5 text-indigo-500" />
+      ) : cards.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-center rounded-2xl border-2 border-dashed border-muted">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-amber-300 to-yellow-600 mb-3 text-white shadow-sm">
+            <CreditCard className="h-6 w-6" />
           </div>
-          <p className="text-sm text-muted-foreground">{t('financial.cards.noTransactions')}</p>
-          <p className="text-xs text-muted-foreground mt-0.5">{t('financial.cards.transactionsAppear')}</p>
+          <p className="text-sm font-medium">{t('financial.cards.noCards')}</p>
+          <p className="text-xs text-muted-foreground mt-0.5 max-w-xs">{t('financial.cards.noCardsHint')}</p>
         </div>
       ) : (
-        Object.entries(byBrand).map(([brand, txs]) => (
-          <div key={brand} className="rounded-lg border bg-card shadow-sm">
-            <div className="flex items-center gap-2 px-4 py-3 border-b">
-              <CreditCard className="h-4 w-4 text-indigo-500" />
-              <h3 className="text-sm font-semibold">{brand}</h3>
-              <span className="text-xs text-muted-foreground">({txs.length} transactions)</span>
+        <>
+          {/* Summary strip — available limit + total bills across open cards */}
+          <div className="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border bg-border shadow-sm">
+            <div className="bg-card px-4 py-3">
+              <p className="text-xs text-muted-foreground">{t('financial.cards.availableLimit')}</p>
+              <p className="mt-0.5 text-lg font-bold tabular-nums text-success">
+                {formatCurrency(summary.totalAvailable, currency)}
+              </p>
+            </div>
+            <div className="bg-card px-4 py-3">
+              <p className="text-xs text-muted-foreground">{t('financial.cards.allBillsValue')}</p>
+              <p className="mt-0.5 text-lg font-bold tabular-nums">
+                {formatCurrency(summary.totalBills, currency)}
+              </p>
             </div>
-            <div className="divide-y">
-              {txs.map((tx) => (
-                <div key={tx.id} className="px-4 py-3 flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium">
-                      Installment {tx.currentInstallment}/{tx.installmentCount}
-                    </p>
-                    <p className="text-xs text-muted-foreground">Due: {tx.expectedDate}</p>
+          </div>
+
+          {/* Open / Closed tabs (only when there are closed cards to switch to) */}
+          {closedCards.length > 0 && (
+            <div className="flex gap-1 rounded-full bg-muted p-1 w-full max-w-xs">
+              {(['open', 'closed'] as const).map((k) => (
+                <button
+                  key={k}
+                  onClick={() => setTab(k)}
+                  className={`flex-1 rounded-full px-3 py-1.5 text-xs font-medium transition-colors ${
+                    tab === k ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  {k === 'open' ? t('financial.cards.tabOpen') : t('financial.cards.tabClosed')}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Card tiles — stacked on mobile, grid on desktop */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {visibleCards.map((card) => {
+              const { limit, used, available, pct } = cardMath(card)
+              const over = pct >= 90
+              // Per-brand color so cards match the bank (and the Home card), not a uniform gold.
+              const brand = `${card.bankName ?? ''} ${card.name ?? ''}`.toLowerCase()
+              const headerGrad =
+                brand.includes('nubank') || brand.includes('nu ') ? 'from-purple-500 via-purple-600 to-indigo-700'
+                : brand.includes('ita') ? 'from-orange-400 via-orange-500 to-amber-600'
+                : brand.includes('inter') ? 'from-orange-500 via-orange-600 to-orange-700'
+                : 'from-indigo-500 via-indigo-600 to-violet-700'
+              const barGrad =
+                brand.includes('nubank') || brand.includes('nu ') ? 'from-purple-500 to-indigo-600'
+                : brand.includes('ita') ? 'from-orange-400 to-amber-500'
+                : brand.includes('inter') ? 'from-orange-500 to-orange-600'
+                : 'from-indigo-500 to-violet-600'
+              return (
+                <div key={card.id} className="overflow-hidden rounded-2xl border bg-card shadow-sm">
+                  {/* Per-brand header */}
+                  <div className={`bg-gradient-to-br ${headerGrad} px-4 py-4 text-white`}>
+                    <div className="flex items-start justify-between">
+                      <div className="flex items-center gap-2">
+                        <CreditCard className="h-5 w-5" />
+                        <span className="text-sm font-semibold">{card.name}</span>
+                      </div>
+                      {card.bankName && (
+                        <span className="text-[11px] font-medium uppercase tracking-wide opacity-80">
+                          {card.bankName}
+                        </span>
+                      )}
+                    </div>
+                    <div className="mt-4">
+                      <p className="text-[11px] uppercase tracking-wide opacity-80">
+                        {t('financial.cards.currentBill')}
+                      </p>
+                      <p className="text-2xl font-bold tabular-nums leading-tight">
+                        {formatCurrency(used, currency)}
+                      </p>
+                    </div>
                   </div>
-                  <div className="flex items-center gap-3">
-                    <span className="text-sm font-medium">{formatCurrency(tx.installmentAmount, currency)}</span>
-                    {tx.status === 'received' ? (
-                      <span className="inline-flex items-center gap-1 rounded-full bg-success/15 px-2 py-0.5 text-[10px] font-medium text-success dark:bg-success/20">
-                        <Check className="h-2.5 w-2.5" /> Received
-                      </span>
-                    ) : (
-                      <span className="inline-flex items-center rounded-full bg-warning/15 px-2 py-0.5 text-[10px] font-medium text-warning dark:bg-warning/20">
-                        Pending
-                      </span>
-                    )}
+
+                  {/* Body */}
+                  <div className="space-y-3 px-4 py-3">
+                    {/* Usage progress bar */}
+                    <div>
+                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                        <span>{t('financial.cards.usedOfLimit', { percent: String(Math.round(pct)) })}</span>
+                        <span className="tabular-nums">{formatCurrency(limit, currency)}</span>
+                      </div>
+                      <div className="mt-1 h-2 overflow-hidden rounded-full bg-muted">
+                        <div
+                          className={`h-full rounded-full ${
+                            over ? 'bg-destructive' : `bg-gradient-to-r ${barGrad}`
+                          }`}
+                          style={{ width: `${pct}%` }}
+                        />
+                      </div>
+                    </div>
+
+                    {/* Available limit + due date */}
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="text-[11px] text-muted-foreground">{t('financial.cards.availableLimit')}</p>
+                        <p className="text-sm font-semibold tabular-nums">{formatCurrency(available, currency)}</p>
+                      </div>
+                      {card.dueDay != null && (
+                        <div className="flex items-center gap-1.5 text-right text-xs text-muted-foreground">
+                          <CalendarClock className="h-3.5 w-3.5" />
+                          <span>{t('financial.cards.dueOn', { day: String(card.dueDay) })}</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Add expense against this card */}
+                    <button
+                      type="button"
+                      onClick={() => openAddExpense(card.id)}
+                      className="flex w-full items-center justify-center gap-1.5 rounded-input border border-input bg-card px-3 py-2 text-xs font-medium text-foreground transition-colors hover:bg-muted/40"
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      {t('financial.cards.addExpense')}
+                    </button>
                   </div>
                 </div>
-              ))}
-            </div>
+              )
+            })}
           </div>
-        ))
+        </>
       )}
+
+      <QuickTransactionForm
+        open={addOpen}
+        onOpenChange={setAddOpen}
+        defaultType="expense"
+        defaultAccountId={addCardId}
+      />
     </div>
   )
 }

package/src/views/InvoiceListView.tsx

@@ -2,11 +2,11 @@ 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, useFinancialStore, formatCurrency } from '../FinancialContext'
+import { useFinancialConfig, useFinancialProvider, useFinancialStore, formatCurrency } from '../FinancialContext'
 import { SubpageHeader } from '@fayz-ai/ui'
 import { PersonLink } from '@fayz-ai/saas'
 import { useTranslation } from '@fayz-ai/core'
-import type { TransactionDirection, InvoiceStatus, Invoice } from '../types'
+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 },
@@ -88,6 +88,7 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
 }) {
   const t = useTranslation()
   const { currency } = useFinancialConfig()
+  const provider = useFinancialProvider()
   const invoices = useFinancialStore((s) => s.invoices)
   const invoicesTotal = useFinancialStore((s) => s.invoicesTotal)
   const invoicesLoading = useFinancialStore((s) => s.invoicesLoading)
@@ -95,14 +96,36 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
 
   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[]>([])
+
+  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,
     })
-  }, [direction, statusFilter, search])
+  }, [direction, statusFilter, search, accountId, costCenterId])
 
   const filtered = invoices.filter((inv) => inv.direction === direction)
   const listTitle = direction === 'debit' ? t('financial.invoice.accountsPayable') : t('financial.invoice.accountsReceivable')
@@ -135,6 +158,40 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
         title={listTitle}
         subtitle={t('financial.invoice.invoices', { count: filtered.length })}
       />
+      {(accounts.length > 0 || costCenters.length > 0) && (
+        <div className="flex flex-wrap items-end gap-3 rounded-lg border bg-muted/20 px-4 py-3">
+          {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}