@birhaus/financial
Version:
Financial components and utilities for BIRHAUS design system - SEPRELAD compliant
518 lines (503 loc) • 19.2 kB
text/typescript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactNode } from 'react';
/**
* Financial types for BIRHAUS components
* SEPRELAD compliant and Spanish-first
*/
type CurrencyCode = 'PYG' | 'USD' | 'EUR' | 'BRL' | 'ARS';
type CurrencySymbol = '₲' | '$' | '€' | 'R$' | '$';
interface Currency {
code: CurrencyCode;
symbol: CurrencySymbol;
nameEs: string;
nameEn: string;
decimals: number;
thousandSeparator: string;
decimalSeparator: string;
}
type TransactionType = 'ingreso' | 'gasto' | 'transferencia' | 'inversion';
type TransactionStatus = 'pendiente' | 'procesando' | 'completada' | 'fallida' | 'cancelada';
type TransactionCategory = 'educacion' | 'salario' | 'servicios' | 'alimentacion' | 'transporte' | 'salud' | 'entretenimiento' | 'otros';
interface Transaction {
id: string;
tipo: TransactionType;
monto: number;
moneda: CurrencyCode;
estado: TransactionStatus;
categoria: TransactionCategory;
descripcionEs: string;
descripcionEn?: string;
fecha: Date;
cuentaOrigen?: string;
cuentaDestino?: string;
referencia?: string;
comision?: number;
documentoIdentidad?: string;
tipoDocumento?: 'CI' | 'RUC' | 'PASAPORTE';
requiereReporte?: boolean;
montoUSD?: number;
}
type AccountType = 'corriente' | 'ahorros' | 'credito' | 'inversion';
type AccountStatus = 'activa' | 'inactiva' | 'bloqueada' | 'cerrada';
interface Account {
id: string;
numero: string;
tipo: AccountType;
estado: AccountStatus;
nombreEs: string;
nombreEn?: string;
saldo: number;
moneda: CurrencyCode;
fechaCreacion: Date;
ultimaActividad: Date;
limiteDiario?: number;
limiteMensual?: number;
}
type PaymentMethod = 'efectivo' | 'tarjeta_debito' | 'tarjeta_credito' | 'transferencia' | 'billetera_digital';
interface PaymentMethodInfo {
tipo: PaymentMethod;
nombreEs: string;
nombreEn: string;
icono: ReactNode;
requiereVerificacion: boolean;
limiteTransaccion?: number;
comision?: number;
tiempoProcesamientoMinutos?: number;
}
type MetricType = 'saldo' | 'ingresos' | 'gastos' | 'ahorros' | 'objetivo' | 'credito_disponible';
type MetricTrendDirection = 'subida' | 'bajada' | 'estable';
type MetricStatus = 'saludable' | 'precaucion' | 'critico';
type MetricCategory = 'ingresos' | 'gastos' | 'balance' | 'proyeccion';
interface MetricTrend {
direccion: MetricTrendDirection;
porcentaje: number;
anterior?: number;
actual?: number;
periodo: string;
}
interface FinancialMetric {
id: string;
tipo: MetricType;
nombreEs: string;
nombreEn?: string;
valor: number;
unidad?: 'moneda' | 'porcentaje' | 'cantidad';
tendencia?: MetricTrend;
estado?: MetricStatus;
categoria?: MetricCategory;
objetivo?: {
valor: number;
fechaLimite?: Date;
};
descripcion?: string;
descripcionEs: string;
descripcionEn?: string;
moneda?: CurrencyCode | 'PERCENT';
informacionAdicional?: string[];
ultimaActualizacion?: Date;
}
type BudgetCategory = 'alimentacion' | 'transporte' | 'vivienda' | 'entretenimiento' | 'salud' | 'educacion' | 'servicios' | 'otros' | 'compras' | 'tecnologia';
type BudgetPeriod = 'semanal' | 'mensual' | 'anual';
interface Budget {
id: string;
nombreEs: string;
nombreEn?: string;
categoria: BudgetCategory;
montoPresupuesto: number;
montoGastado: number;
moneda: CurrencyCode;
fechaInicio: Date;
fechaFin: Date;
alertas: {
porcentaje75: boolean;
porcentaje90: boolean;
excedido: boolean;
};
limite?: number;
gastado?: number;
ultimaActualizacion?: Date;
}
type InvestmentType = 'acciones' | 'bonos' | 'plazo_fijo' | 'fondo_mutuo' | 'crypto' | 'etf' | 'criptomonedas' | 'inmuebles';
type InvestmentRisk = 'bajo' | 'medio' | 'alto';
interface Investment {
id: string;
nombreEs: string;
nombreEn?: string;
nombre?: string;
tipo: InvestmentType;
montoInvertido: number;
valorActual: number;
moneda: CurrencyCode;
fechaInversion: Date;
fechaCompra?: Date;
rendimiento: number;
riesgo: InvestmentRisk;
nivelRiesgo?: InvestmentRisk;
liquidez: 'alta' | 'media' | 'baja';
costoBase?: number;
cantidad?: number;
simbolo?: string;
}
interface BirhausCurrencyDisplayProps {
amount: number;
currency: CurrencyCode;
locale?: string;
showSymbol?: boolean;
showCode?: boolean;
className?: string;
}
interface BirhausTransactionListProps {
transactions: Transaction[];
onTransactionClick?: (transaction: Transaction) => void;
showCategory?: boolean;
showStatus?: boolean;
groupByDate?: boolean;
maxItems?: number;
className?: string;
loading?: boolean;
pageSize?: number;
showFilters?: boolean;
showSearch?: boolean;
showExport?: boolean;
onExport?: (transactions: Transaction[]) => void;
}
interface BirhausAccountSummaryProps {
accounts: Account[];
showBalances?: boolean;
showInactive?: boolean;
onAccountClick?: (account: Account) => void;
className?: string;
}
interface BirhausFinancialMetricCardProps {
metric: FinancialMetric;
showTrend?: boolean;
showTarget?: boolean;
compact?: boolean;
onClick?: () => void;
className?: string;
showGoalProgress?: boolean;
allowPrivacyToggle?: boolean;
variant?: 'default' | 'outline' | 'filled' | 'gradient';
size?: 'small' | 'medium' | 'large';
}
interface BirhausPaymentFormProps {
availablePaymentMethods: PaymentMethodInfo[];
onPaymentSubmit: (data: PaymentFormData) => void;
amount: number;
currency: CurrencyCode;
recipientInfo?: {
nombreEs: string;
nombreEn?: string;
documento: string;
cuenta?: string;
};
className?: string;
}
interface PaymentFormData {
metodo: PaymentMethod;
monto: number;
moneda: CurrencyCode;
destinatario: {
nombre: string;
documento: string;
cuenta?: string;
};
concepto: string;
programada?: boolean;
fechaProgramada?: Date;
}
interface BirhausBudgetTrackerProps {
budgets: Budget[];
onBudgetClick?: (budget: Budget) => void;
showProgress?: boolean;
showAlerts?: boolean;
className?: string;
periodo?: BudgetPeriod;
moneda?: CurrencyCode;
showAddButton?: boolean;
showEditButtons?: boolean;
onAddBudget?: () => void;
onEditBudget?: (budget: Budget) => void;
onDeleteBudget?: (budget: Budget) => void;
}
interface BirhausInvestmentPortfolioProps {
investments: Investment[];
totalValue: number;
currency: CurrencyCode;
showAllocation?: boolean;
showPerformance?: boolean;
onInvestmentClick?: (investment: Investment) => void;
className?: string;
showPrivacyToggle?: boolean;
showPerformanceMetrics?: boolean;
moneda?: CurrencyCode;
}
interface CurrencyFormatOptions {
currency: CurrencyCode;
locale?: string;
showSymbol?: boolean;
showCode?: boolean;
minimumFractionDigits?: number;
maximumFractionDigits?: number;
}
interface TransactionFilters {
tipo?: TransactionType[];
estado?: TransactionStatus[];
categoria?: TransactionCategory[];
fechaDesde?: Date | string;
fechaHasta?: Date | string;
montoMinimo?: number;
montoMaximo?: number;
moneda?: CurrencyCode[];
}
interface FinancialCalculations {
ingresosMensuales: number;
gastosMensuales: number;
ahorrosMensuales: number;
porcentajeAhorros: number;
proyeccionAnual: number;
metaAhorros?: number;
diasParaMeta?: number;
}
interface UseCurrencyReturn {
formatCurrency: (amount: number, options?: Partial<CurrencyFormatOptions>) => string;
parseCurrency: (value: string) => number | null;
convertCurrency: (amount: number, from: CurrencyCode, to: CurrencyCode) => Promise<number>;
getCurrencyInfo: (code: CurrencyCode) => Currency;
validateAmount: (amount: number, currency?: CurrencyCode) => {
valid: boolean;
errors: string[];
warnings: string[];
};
formatForInput: (amount: number, currency?: CurrencyCode) => string;
getExchangeRate: (from: CurrencyCode, to: CurrencyCode) => Promise<number>;
isCurrencySupported: (currency: string) => currency is CurrencyCode;
getCurrencyName: (currency: CurrencyCode, locale?: 'es' | 'en') => string;
formatPercentage: (value: number, decimals?: number) => string;
calculateCompoundInterest: (principal: number, rate: number, time: number, compounding?: number) => {
finalAmount: number;
interestEarned: number;
};
formatAbbreviated: (amount: number, currency?: CurrencyCode) => string;
}
interface UseTransactionsReturn {
transactions: Transaction[];
filteredTransactions: Transaction[];
filters: TransactionFilters;
setFilters: (filters: TransactionFilters) => void;
addTransaction: (transaction: Omit<Transaction, 'id'>) => void;
updateTransaction: (id: string, updates: Partial<Transaction>) => void;
deleteTransaction: (id: string) => void;
calculateSummary: () => FinancialCalculations;
}
interface UseFinancialMetricsReturn {
metrics: FinancialMetric[];
loading: boolean;
error: Error | null;
refreshMetrics: () => Promise<void>;
getMetricsByCategory: (category: MetricCategory) => FinancialMetric[];
getMetricTrend: (metricId: string, days: number) => {
fecha: Date;
valor: number;
}[];
}
/**
* BirhausCurrencyDisplay - Currency amount display component
*
* Features:
* - Paraguay-first currency formatting (Guaraní as default)
* - SEPRELAD compliant number formatting
* - Multiple currency support (PYG, USD, EUR, BRL, ARS)
* - Accessibility with proper ARIA labels
* - Spanish-first localization
* - Configurable symbol and code display
*/
declare function BirhausCurrencyDisplay({ amount, currency, locale, showSymbol, showCode, className, ...props }: BirhausCurrencyDisplayProps): react_jsx_runtime.JSX.Element;
/**
* BirhausPaymentForm - Payment form component
*
* Features:
* - SEPRELAD compliant payment processing
* - Multiple payment method support
* - Real-time validation and limits checking
* - Spanish-first labels and messages
* - Accessibility compliant form structure
* - Progressive disclosure of payment details
* - Commission and processing time display
*/
declare function BirhausPaymentForm({ availablePaymentMethods, onPaymentSubmit, amount, currency, recipientInfo, className, ...props }: BirhausPaymentFormProps): react_jsx_runtime.JSX.Element;
/**
* BirhausAccountSummary - Account summary display component
*
* Features:
* - Multiple account types with appropriate icons and colors
* - Balance visibility toggle for privacy
* - Account status indicators
* - Spanish-first account type and status names
* - Accessibility compliant with proper ARIA labels
* - Responsive layout for different screen sizes
* - Click handlers for account selection
* - Support for inactive/closed account filtering
*/
declare function BirhausAccountSummary({ accounts, showBalances, showInactive, onAccountClick, className, ...props }: BirhausAccountSummaryProps): react_jsx_runtime.JSX.Element;
/**
* BirhausTransactionList - Transaction history display component
*
* Features:
* - Comprehensive transaction filtering and search
* - SEPRELAD compliance flagging for large transactions
* - Spanish-first transaction type and status names
* - Miller's Law compliance (max 7 visible transactions per page)
* - Responsive layout for different screen sizes
* - Export functionality for transaction reports
* - Real-time status updates and error handling
* - Accessibility compliant with proper ARIA labels
*/
declare function BirhausTransactionList({ transactions, loading, pageSize, showFilters, showSearch, showExport, onTransactionClick, onExport, className, ...props }: BirhausTransactionListProps): react_jsx_runtime.JSX.Element;
/**
* BirhausFinancialMetricCard - Financial KPI display component
*
* Features:
* - Multiple metric types with appropriate icons and colors
* - Trend analysis with percentage change indicators
* - Privacy toggle for sensitive financial information
* - Goal progress tracking and alerts
* - Spanish-first metric names and descriptions
* - Accessibility compliant with proper ARIA labels
* - Responsive layout for different screen sizes
* - Warning indicators for concerning metrics
* - Historical comparison support
*/
declare function BirhausFinancialMetricCard({ metric, showTrend, showGoalProgress, allowPrivacyToggle, variant, size, className, ...props }: BirhausFinancialMetricCardProps): react_jsx_runtime.JSX.Element;
/**
* BirhausBudgetTracker - Budget management and tracking component
*
* Features:
* - Multiple budget categories with appropriate icons and colors
* - Real-time spending tracking with progress indicators
* - Budget alerts and warnings when approaching/exceeding limits
* - Period-based budget management (monthly, weekly, yearly)
* - Spanish-first category names and descriptions
* - Miller's Law compliance (max 7 visible categories)
* - CRUD operations for budget management
* - Accessibility compliant with proper ARIA labels
* - Responsive layout for different screen sizes
* - Summary statistics and recommendations
*/
declare function BirhausBudgetTracker({ budgets, periodo, moneda, showAddButton, showEditButtons, onAddBudget, onEditBudget, onDeleteBudget, className, ...props }: BirhausBudgetTrackerProps): react_jsx_runtime.JSX.Element;
/**
* BirhausInvestmentPortfolio - Investment portfolio tracking component
*
* Features:
* - Multiple investment types with appropriate icons and colors
* - Real-time performance tracking with gains/losses
* - Risk level indicators and portfolio diversification analysis
* - Portfolio allocation visualization and recommendations
* - Spanish-first investment terminology
* - Miller's Law compliance (max 7 visible investments)
* - Privacy toggle for sensitive financial information
* - Accessibility compliant with proper ARIA labels
* - Responsive layout for different screen sizes
* - Performance alerts and investment recommendations
*/
declare function BirhausInvestmentPortfolio({ investments, showPrivacyToggle, showAllocation, showPerformanceMetrics, moneda, onInvestmentClick, className, ...props }: BirhausInvestmentPortfolioProps): react_jsx_runtime.JSX.Element;
/**
* useCurrency - Hook for currency operations and formatting
*
* Features:
* - Paraguay-first currency formatting with Guaraní support
* - SEPRELAD compliance checking and reporting
* - Multi-currency conversion with exchange rates
* - Currency parsing and validation
* - Spanish-first localization
* - Error handling and validation
* - Real-time exchange rate simulation (mock)
*/
declare function useCurrency(): UseCurrencyReturn;
/**
* useTransactions - Hook for transaction operations and state management
*
* Features:
* - Complete transaction CRUD operations
* - Real-time filtering and search capabilities
* - SEPRELAD compliance checking and alerts
* - Transaction categorization and analytics
* - Spanish-first error messages and validation
* - Optimistic updates for better UX
* - Error handling and retry logic
* - Export functionality for transaction reports
* - Transaction status tracking and updates
*/
declare function useTransactions(accountId?: string): UseTransactionsReturn;
/**
* useFinancialMetrics - Hook for financial KPI calculation and management
*
* Features:
* - Real-time financial metric calculation from transactions and accounts
* - Trend analysis with historical comparisons
* - Goal tracking and progress monitoring
* - Multi-currency support with automatic conversion
* - Spanish-first metric names and descriptions
* - Performance optimization with memoized calculations
* - Alert system for concerning financial trends
* - Export functionality for financial reports
* - Customizable metric periods and groupings
*/
declare function useFinancialMetrics(accounts?: Account[], transactions?: Transaction[], budgets?: Budget[]): UseFinancialMetricsReturn;
/**
* Currency utilities for BIRHAUS Financial components
* SEPRELAD compliant and Paraguay-first
*/
/**
* Supported currencies with Paraguay-first configuration
*/
declare const SUPPORTED_CURRENCIES: Record<CurrencyCode, Currency>;
/**
* Exchange rates (mock data - in production, fetch from API)
* Base currency: USD
*/
declare const EXCHANGE_RATES: Record<CurrencyCode, number>;
/**
* SEPRELAD reporting thresholds in USD
*/
declare const SEPRELAD_THRESHOLDS: {
CASH_OPERATION: number;
SUSPICIOUS_OPERATION: number;
DAILY_CUMULATIVE: number;
};
/**
* Format currency amount according to locale and currency rules
*/
declare function formatCurrency(amount: number, options?: Partial<CurrencyFormatOptions>): string;
/**
* Parse currency string back to number
*/
declare function parseCurrency(value: string, currency?: CurrencyCode): number | null;
/**
* Convert amount from one currency to another
*/
declare function convertCurrency(amount: number, fromCurrency: CurrencyCode, toCurrency: CurrencyCode): number;
/**
* Check if amount exceeds SEPRELAD reporting thresholds
*/
declare function checkSEPRELADThreshold(amount: number, currency: CurrencyCode, operationType?: 'cash' | 'suspicious' | 'cumulative'): {
requiresReport: boolean;
thresholdUSD: number;
amountUSD: number;
};
/**
* Get currency info
*/
declare function getCurrencyInfo(currency: CurrencyCode): Currency;
/**
* Validate currency amount for display and processing
*/
declare function validateCurrencyAmount(amount: number, currency: CurrencyCode): {
valid: boolean;
errors: string[];
};
/**
* Format currency for form inputs (removes symbols, keeps numbers)
*/
declare function formatCurrencyForInput(amount: number, currency?: CurrencyCode): string;
export { type Account, type AccountStatus, type AccountType, BirhausAccountSummary, type BirhausAccountSummaryProps, BirhausBudgetTracker, type BirhausBudgetTrackerProps, BirhausCurrencyDisplay, type BirhausCurrencyDisplayProps, BirhausFinancialMetricCard, type BirhausFinancialMetricCardProps, BirhausInvestmentPortfolio, BirhausPaymentForm, type BirhausPaymentFormProps, BirhausTransactionList, type BirhausTransactionListProps, type Budget, type Currency, type CurrencyCode, type CurrencyFormatOptions, EXCHANGE_RATES, type FinancialMetric, type Investment, type InvestmentRisk, type InvestmentType, type MetricCategory, type MetricStatus, type MetricTrend, type PaymentMethod, type PaymentMethodInfo, SEPRELAD_THRESHOLDS, SUPPORTED_CURRENCIES, type Transaction, type TransactionCategory, type TransactionFilters, type TransactionStatus, type TransactionType, type UseCurrencyReturn, type UseFinancialMetricsReturn, type UseTransactionsReturn, checkSEPRELADThreshold, convertCurrency, formatCurrency, formatCurrencyForInput, getCurrencyInfo, parseCurrency, useCurrency, useFinancialMetrics, useTransactions, validateCurrencyAmount };