Dummy Accounts - Copy this React, Tailwind Component to your project
Descripción del proyecto: Estamos desarrollando una aplicación contable y necesitamos diseñar la página principal del módulo Catálogo de Cuentas Contables. Este módulo permite a los usuarios gestionar cuentas contables basadas en una estructura jerárquica, incluyendo operaciones como creación, edición, eliminación, y visualización de detalles. Los datos de las cuentas contables provienen de las tablas definidas en un archivo SQL que contiene información sobre cuentas, jerarquías y estados. Objetivos de la interfaz: Facilitar la visualización jerárquica de las cuentas (clase, grupo, cuenta, subcuenta). Incluir acciones rápidas para crear, editar, y eliminar cuentas. Proveer filtros y búsquedas para encontrar cuentas específicas. Mostrar datos relevantes de cada cuenta: número, nombre, tipo, jerarquía, estado. Componentes de la interfaz: Barra de encabezado: Título: "Catálogo de Cuentas". Botones de acción: "Nueva Cuenta" con ícono PlusCircleIcon de Heroicons. "Importar Cuentas" con ícono UploadIcon. Campo de búsqueda para filtrar cuentas por número o nombre. Vista principal: Jerarquía de cuentas contables: Representar la estructura jerárquica basada en las relaciones definidas en la base de datos SQL. Usar nodos expandibles/colapsables (ChevronDownIcon y ChevronRightIcon de Heroicons). Tabla de cuentas contables: Columnas: Número de cuenta. Nombre de cuenta. Tipo de cuenta (Activo, Pasivo, etc.). Estado (Activo/Inactivo). Acciones rápidas. Cada fila debe tener iconos para editar (PencilIcon) y eliminar (TrashIcon) cuentas. Modales y formularios: Modal de Crear/Editar Cuenta: Campos basados en la estructura SQL: Número de cuenta. Nombre de cuenta. Selección de tipo de cuenta. Jerarquía superior (dropdown con opciones de cuenta padre). Estado de la cuenta (checkbox o toggle para Activo/Inactivo). Modal de confirmación para eliminación: Texto: "¿Está seguro de que desea eliminar esta cuenta contable?" Botones: "Cancelar" con XIcon y "Eliminar" con CheckIcon. Paginación y filtros: Botones de paginación para listas largas de cuentas. Filtros avanzados por tipo de cuenta, estado y nivel jerárquico. Estilo visual: Diseño limpio y profesional. Uso de colores: Azul para acciones positivas (crear, guardar). Rojo para acciones destructivas (eliminar). Botones redondeados y tablas con bordes sutiles. Efectos hover para filas y botones interactivos. Referencias para el diseño: Los datos de las cuentas provienen de las tablas definidas en el archivo SQL del proyecto, que incluye información clave como jerarquías y estados. Asegúrate de que la estructura jerárquica sea fiel a la base de datos. Los iconos deben ser de Heroicons y representativos de cada acción. Resultado esperado: Una interfaz moderna y funcional que permita a los usuarios gestionar el catálogo de cuentas contables de manera eficiente, con soporte para jerarquías complejas, acciones rápidas y navegación intuitiva.
