-
+ {/* Avatar with initials */}
+
+
+ {getUserInitials()}
+
-
- {user?.firstName || user?.email || 'Usuario'}
-
-
+
+ {/* User info */}
+
+
+ {user?.firstName || user?.email?.split('@')[0] || 'Usuario'}
+
+
+ {user?.role || 'Usuario'}
+
+
+
+
+ {/* Dropdown menu */}
{userMenuOpen && (
-
-
+
+ {/* User info header */}
+
+
+ {user?.firstName} {user?.lastName}
+
+
+ {user?.email}
+
+
+
+ {/* Menu items */}
+
+ setUserMenuOpen(false)}
+ className="flex items-center w-full px-4 py-2.5 text-sm text-foreground dark:text-foreground hover:bg-background-muted dark:hover:bg-background-emphasis transition-colors"
+ >
+
+ Mi Perfil
+
+ setUserMenuOpen(false)}
+ className="flex items-center w-full px-4 py-2.5 text-sm text-foreground dark:text-foreground hover:bg-background-muted dark:hover:bg-background-emphasis transition-colors"
+ >
+
+ Configuración
+
+
+
+ {/* Logout */}
+
+
+
)}
diff --git a/web/src/pages/admin/finanzas/CuentasContablesPage.tsx b/web/src/pages/admin/finanzas/CuentasContablesPage.tsx
new file mode 100644
index 0000000..1f4a22d
--- /dev/null
+++ b/web/src/pages/admin/finanzas/CuentasContablesPage.tsx
@@ -0,0 +1,497 @@
+/**
+ * CuentasContablesPage - Catálogo de Cuentas Contables
+ */
+
+import { useState } from 'react';
+import { Plus, Pencil, Trash2, ChevronRight, ChevronDown, FolderTree } from 'lucide-react';
+import {
+ useAccountsTree,
+ useCreateAccount,
+ useUpdateAccount,
+ useDeleteAccount,
+} from '../../../hooks/useFinance';
+import type { Account, AccountType, CreateAccountDto } from '../../../types/finance.types';
+import { ACCOUNT_TYPE_OPTIONS } from '../../../types/finance.types';
+import {
+ PageHeader,
+ PageHeaderAction,
+ SearchInput,
+ SelectField,
+ StatusBadgeFromOptions,
+ ConfirmDialog,
+ Modal,
+ ModalFooter,
+ TextInput,
+ FormGroup,
+ LoadingOverlay,
+ EmptyState,
+} from '../../../components/common';
+
+export function CuentasContablesPage() {
+ const [search, setSearch] = useState('');
+ const [typeFilter, setTypeFilter] = useState
('');
+ const [showModal, setShowModal] = useState(false);
+ const [editingItem, setEditingItem] = useState(null);
+ const [parentAccount, setParentAccount] = useState(null);
+ const [deleteId, setDeleteId] = useState(null);
+ const [expandedIds, setExpandedIds] = useState>(new Set());
+
+ const { data: accounts, isLoading, error } = useAccountsTree();
+ const createMutation = useCreateAccount();
+ const updateMutation = useUpdateAccount();
+ const deleteMutation = useDeleteAccount();
+
+ const toggleExpand = (id: string) => {
+ const newExpanded = new Set(expandedIds);
+ if (newExpanded.has(id)) {
+ newExpanded.delete(id);
+ } else {
+ newExpanded.add(id);
+ }
+ setExpandedIds(newExpanded);
+ };
+
+ const expandAll = () => {
+ const allIds = new Set();
+ const collectIds = (items: Account[]) => {
+ items.forEach(item => {
+ if (item.children?.length) {
+ allIds.add(item.id);
+ collectIds(item.children);
+ }
+ });
+ };
+ if (accounts) collectIds(accounts);
+ setExpandedIds(allIds);
+ };
+
+ const collapseAll = () => {
+ setExpandedIds(new Set());
+ };
+
+ const handleDelete = async () => {
+ if (deleteId) {
+ await deleteMutation.mutateAsync(deleteId);
+ setDeleteId(null);
+ }
+ };
+
+ const handleSubmit = async (formData: CreateAccountDto) => {
+ if (editingItem) {
+ await updateMutation.mutateAsync({ id: editingItem.id, data: formData });
+ } else {
+ await createMutation.mutateAsync(formData);
+ }
+ setShowModal(false);
+ setEditingItem(null);
+ setParentAccount(null);
+ };
+
+ const openCreate = (parent?: Account) => {
+ setEditingItem(null);
+ setParentAccount(parent || null);
+ setShowModal(true);
+ };
+
+ const openEdit = (item: Account) => {
+ setEditingItem(item);
+ setParentAccount(null);
+ setShowModal(true);
+ };
+
+ // Filter accounts
+ const filterAccounts = (items: Account[]): Account[] => {
+ return items.filter(item => {
+ const matchesSearch = !search ||
+ item.code.toLowerCase().includes(search.toLowerCase()) ||
+ item.name.toLowerCase().includes(search.toLowerCase());
+ const matchesType = !typeFilter || item.type === typeFilter;
+
+ if (matchesSearch && matchesType) return true;
+
+ // Check children
+ if (item.children?.length) {
+ const filteredChildren = filterAccounts(item.children);
+ if (filteredChildren.length > 0) return true;
+ }
+
+ return false;
+ }).map(item => ({
+ ...item,
+ children: item.children ? filterAccounts(item.children) : undefined,
+ }));
+ };
+
+ const filteredAccounts = accounts ? filterAccounts(accounts) : [];
+
+ if (isLoading) {
+ return ;
+ }
+
+ if (error) {
+ return (
+
+ );
+ }
+
+ return (
+
+
openCreate()}>
+
+ Nueva Cuenta
+
+ }
+ />
+
+
+
+
+
+ ({ value: o.value, label: o.label }))]}
+ value={typeFilter}
+ onChange={(e) => setTypeFilter(e.target.value as AccountType | '')}
+ className="sm:w-48"
+ />
+
+
+
+
+
+
+
+ {filteredAccounts.length === 0 ? (
+
}
+ title="No hay cuentas"
+ description="Crea la primera cuenta para comenzar a estructurar tu catálogo."
+ />
+ ) : (
+
+
+
Cuenta
+
Tipo
+
Saldo
+
Estado
+
Acciones
+
+ {filteredAccounts.map(account => (
+
+ ))}
+
+ )}
+
+
+ {hasChildren ? (
+
+ ) : (
+
+ )}
+
+ {account.code}
+ {account.name}
+
+
+
+
+
+
+ {formatCurrency(account.balance)}
+
+
+
+ {account.isActive ? 'Activa' : 'Inactiva'}
+
+
+
+
+
+
+
+
+
{item.documentNumber}
+
{item.documentType}
+
+
Emisión: {formatDate(item.documentDate)}
+
0 ? 'text-red-600 font-medium' : ''}>
+ Vence: {formatDate(item.dueDate)}
+
+
+
Original: {formatCurrency(item.originalAmount)}
+
Saldo: {formatCurrency(item.balanceAmount)}
+
+
+ {item.daysOverdue > 0 && (
+
{item.daysOverdue} días vencido
+ )}
+
+
+
+
+ {item.status !== 'paid' && item.status !== 'cancelled' && (
+ <>
+
+ {item.daysOverdue > 0 && (
+
+ )}
+
+ )}
+
+ ),
+ },
+ ];
+
+ if (isLoading) {
+ return ;
+ }
+
+ return (
+
+
+
+ {/* KPI Cards */}
+ {stats && (
+
+ }
+ color="blue"
+ />
+ }
+ color="green"
+ />
+ }
+ color="red"
+ />
+ }
+ color="gray"
+ />
+
+ )}
+
+ {/* Aging Summary */}
+ {stats && (
+
+
Antigüedad de Saldos
+
+
+ )}
+
+ {/* Filters */}
+
+
+
+ ({ value: o.value, label: o.label }))]}
+ value={statusFilter}
+ onChange={(e) => setStatusFilter(e.target.value as ARStatus | '')}
+ className="sm:w-48"
+ />
+
+
+
+
+
+
+ {paymentModal && (
+
setPaymentModal(null)}
+ onSubmit={handlePayment}
+ isLoading={paymentMutation.isPending}
+ />
+ )}
+
+
+ {label}
+ {formatCurrency(value)}
+
+
+
{percentage.toFixed(1)}%
+
+
Documento: {item.documentNumber}
+
Cliente: {item.partnerName}
+
Saldo pendiente: {formatCurrency(item.balanceAmount)}
+
+
{item.documentNumber}
+
{item.documentType}
+
+
Recepción: {formatDate(item.documentDate)}
+
0 ? 'text-red-600 font-medium' : ''}>
+ Vence: {formatDate(item.dueDate)}
+
+
+
Original: {formatCurrency(item.originalAmount)}
+
Saldo: {formatCurrency(item.balanceAmount)}
+
+
+ {item.daysOverdue > 0 && (
+
{item.daysOverdue} días vencido
+ )}
+
+
+
+
+ {item.status !== 'paid' && item.status !== 'cancelled' && (
+
+ )}
+
+ ),
+ },
+ ];
+
+ if (isLoading) {
+ return ;
+ }
+
+ return (
+
+
+
+ {/* KPI Cards */}
+ {stats && (
+
+ }
+ color="blue"
+ />
+ }
+ color="green"
+ />
+ }
+ color="red"
+ />
+ }
+ color="gray"
+ />
+
+ )}
+
+ {/* Aging Summary */}
+ {stats && (
+
+
Antigüedad de Saldos
+
+
+ )}
+
+ {/* Filters */}
+
+
+
+ ({ value: o.value, label: o.label }))]}
+ value={statusFilter}
+ onChange={(e) => setStatusFilter(e.target.value as APStatus | '')}
+ className="sm:w-48"
+ />
+
+
+
+
+
+
+ {paymentModal && (
+
setPaymentModal(null)}
+ onSubmit={handlePayment}
+ isLoading={paymentMutation.isPending}
+ />
+ )}
+
+
+ {label}
+ {formatCurrency(value)}
+
+
+
{percentage.toFixed(1)}%
+
+
Documento: {item.documentNumber}
+
Proveedor: {item.partnerName}
+
Saldo pendiente: {formatCurrency(item.balanceAmount)}
+
+
{item.number || item.invoiceNumber}
+ {(item.cfdiUuid || item.uuid) && (
+
+ {(item.cfdiUuid || item.uuid || '').substring(0, 8)}...
+
+ )}
+
+
{item.partnerName || item.customerName}
+ {(item.partnerRfc || item.customerRfc) && (
+
{item.partnerRfc || item.customerRfc}
+ )}
+
+
Emisión: {formatDate(item.date)}
+ {item.dueDate && (
+
Vence: {formatDate(item.dueDate)}
+ )}
+
+
Subtotal: {formatCurrency(item.subtotal)}
+
Total: {formatCurrency(item.total)}
+
+
+ {item.cfdiStatus && item.cfdiStatus !== 'none' && (
+
+ CFDI: {item.cfdiStatus === 'stamped' ? 'Timbrada' : item.cfdiStatus === 'cancelled' ? 'Cancelada' : item.cfdiStatus}
+
+ )}
+
+
+
+
+
+ {/* Download PDF */}
+
+
+ {/* Draft actions */}
+ {item.status === 'draft' && (
+ <>
+
+
+
+
+
+
+ )}
+
+ {/* Sent actions - can stamp for CFDI */}
+ {item.status === 'sent' && (!item.cfdiStatus || item.cfdiStatus === 'none') && (
+
+ )}
+
+ {/* Cancel action for sent/partial */}
+ {(item.status === 'sent' || item.status === 'partial') && (
+
+ )}
+
+
+
+ Nueva Factura
+
+ }
+ />
+
+ {/* Stats Cards */}
+ {stats && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Filters */}
+
+
+
+ ({ value: o.value, label: o.label }))]}
+ value={statusFilter}
+ onChange={(e) => setStatusFilter(e.target.value as InvoiceStatus | '')}
+ />
+
+
+
+
+
+ {/* Period Selector */}
+
+
+
+
+ Período:
+ setPeriod(e.target.value as CashFlowPeriodType)}
+ className="w-40"
+ />
+
+
+
+ Proyección:
+ setForecastDays(parseInt(e.target.value))}
+ className="w-32"
+ />
+
+
+
+
+ {/* KPI Cards */}
+ {summaryData && (
+
+ }
+ color="gray"
+ />
+ }
+ color="green"
+ />
+ }
+ color="red"
+ />
+ = 0 ? 'Positivo' : 'Negativo'}
+ icon={}
+ color={summaryData.netChange >= 0 ? 'blue' : 'orange'}
+ />
+
+ )}
+
+ {/* Cash Flow Forecast */}
+ {!forecastLoading && forecastData && (
+
+
+
+ Proyección de Flujo ({forecastDays} días)
+
+
+ {/* Warning if projected balance is negative */}
+ {forecastData.projectedBalance < 0 && (
+
+
+
+ Alerta: Se proyecta un saldo negativo de {formatCurrency(forecastData.projectedBalance)} al final del período
+
+
+ )}
+
+
+
+
Cobros Esperados
+
{formatCurrency(forecastData.expectedInflows)}
+
+
+
Pagos Programados
+
{formatCurrency(forecastData.expectedOutflows)}
+
+
+
Saldo Proyectado
+
= 0 ? 'text-blue-600' : 'text-red-600'}`}>
+ {formatCurrency(forecastData.projectedBalance)}
+
+
+
+
+ {/* Daily Projection Table */}
+ {forecastData.dailyProjection.length > 0 && (
+
+
+
+
+ | Período |
+ Entradas |
+ Salidas |
+ Neto |
+ Saldo |
+
+
+
+ {forecastData.dailyProjection.slice(0, 10).map((day: DailyProjection, index: number) => (
+
+ | {formatDate(day.date)} |
+
+ {day.inflows > 0 ? formatCurrency(day.inflows) : '-'}
+ |
+
+ {day.outflows > 0 ? formatCurrency(day.outflows) : '-'}
+ |
+ = 0 ? 'text-green-600' : 'text-red-600'}`}>
+ {formatCurrency(day.net)}
+ |
+ = 0 ? 'text-gray-900' : 'text-red-600'}`}>
+ {formatCurrency(day.balance)}
+ |
+
+ ))}
+
+
+ {forecastData.dailyProjection.length > 10 && (
+
+ Mostrando 10 de {forecastData.dailyProjection.length} períodos
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Empty State */}
+ {!summaryData && !summaryLoading && (
+
+
+
Sin datos de flujo
+
No hay movimientos de efectivo para el período seleccionado.
+
+ )}
+
+
+
+
{title}
+
{value}
+ {subtitle &&
{subtitle}
}
+
+
+ {icon}
+
+
+
+
{item.entryNumber}
+ {item.reference && (
+
{item.reference}
+ )}
+
+
{item.description}
+
{item.lines?.length || 0} líneas
+
+
{formatCurrency(item.totalDebit)}
+ {item.totalDebit !== item.totalCredit && (
+
Descuadre: {formatCurrency(Math.abs(item.totalDebit - item.totalCredit))}
+ )}
+
+
+
+
+ {item.status === 'draft' && (
+ <>
+
+
+
+
+
+
+ )}
+ {item.status === 'posted' && (
+
+ )}
+
+
+
+ Nueva Póliza
+
+ }
+ />
+
+ {/* Stats Cards */}
+
+ i.status === 'draft').length || 0}
+ color="yellow"
+ />
+ i.status === 'posted').length || 0}
+ color="green"
+ />
+ i.status === 'reversed').length || 0}
+ color="orange"
+ />
+
+
+
+ {/* Filters */}
+
+
+
+ ({ value: o.value, label: o.label }))]}
+ value={statusFilter}
+ onChange={(e) => setStatusFilter(e.target.value as EntryStatus | '')}
+ />
+ ({ value: o.value, label: o.label }))]}
+ value={typeFilter}
+ onChange={(e) => setTypeFilter(e.target.value as EntryType | '')}
+ />
+
+
+