Company Visualization Module - Copy this Angular, Tailwind Component to your project
Diseña una interfaz de usuario para un módulo de visualización de empresas dentro de un sistema. Este módulo debe mostrar la información de las empresas de manera clara y organizada, sin mostrar los identificadores (ID), sino los nombres relacionados a cada uno. La información debe presentarse en una tabla que contenga las siguientes columnas: Datos de ejemplo de empresas: | Nombre de la Empresa | RUC / Identificación | Representante Legal | Código de Empresa | Página Web | Estado de Firma Electrónica | Logo | Gran Contribuyente | Retención de Agencia | | | | | | | | | | | | | SANCHEZ OBANDO RENY MARTIN | 1755997085001 | NULL | NULL | https://imaginevosas.com | Expiración en 2025 | NULL | No | No | | Otra Empresa SRL | 1723783743001 | PEDRO RIVERA | 0001 | https://ejemploempresa.com | Válida hasta 2026 | logo1.png | Sí | Sí | Filtros: Agrega filtros de búsqueda para facilitar la localización de empresas. Los filtros deben ser: Buscar por nombre o RUC (campo de texto) Filtro de tipo de contribuyente (listado de opciones: Gran contribuyente, Contribuyente especial, No aplica) Filtro de estado de firma electrónica (desplegable con opciones: Válida, Expirada, No disponible) Filtro de retención de agencia (opciones: Sí, No) Interacción y Acciones: En la parte izquierda de cada fila de la tabla, incluye botones de acción con colores identificables y con íconos (no letras). Los botones deben tener las siguientes funcionalidades: Ver detalles: Ícono de ojo. Este botón debe abrir una ventana modal mostrando toda la información detallada de la empresa seleccionada. Editar: Ícono de lápiz. Al hacer clic, se debe permitir editar los datos de la empresa, con formularios adaptados a cada tipo de dato. Eliminar: Ícono de papelera. Al hacer clic, debe solicitar una confirmación antes de eliminar la empresa. Acciones personalizadas: Ícono de engranaje. Un menú adicional debe aparecer para realizar configuraciones específicas de la empresa (ej. renovar firma electrónica). Estilo de la Interfaz: El diseño debe ser intuitivo, sencillo y limpio, con colores distintivos para cada acción (por ejemplo: verde para "Ver detalles", azul para "Editar", rojo para "Eliminar", gris para "Acciones personalizadas"). Los íconos deben ser claramente visibles y de fácil entendimiento. Puedes usar íconos de librerías como Font Awesome o Material Icons. La tabla debe ser responsive y adaptarse bien a dispositivos móviles y de escritorio. El módulo debe tener una barra de navegación para filtrar y ordenar las empresas por nombre, fecha de expiración de firma electrónica, entre otros. Incluir una opción de paginación en caso de que haya muchas empresas para mostrar, de forma que el usuario pueda navegar por las diferentes páginas de resultados sin saturar la interfaz.
