Ubigeo Management Dashboard - Copy this React, Tailwind Component to your project
Eres un experto desarrollador y diseñador en Bootstrap. Por favor, ayúdame a diseñar un panel básico para la gestión configurable de ubigeos, destinos y proveedores en una aplicación web. Este panel debe tener las siguientes características: CRUD de Ubigeos: Una tabla donde se muestren los datos organizados en las siguientes columnas: Número de dato. Ubigeo. Distrito. Provincia. Departamento. Zona. Acciones en cada fila: Botón Editar. Botón Eliminar. Checkbox Habilitar (para activar o desactivar un registro). Un botón para Agregar un nuevo registro. Un botón para Buscar ubigeos. Paginación para navegar entre las páginas de registros. Gestión de Proveedores y Zonas: Otro cuadro en la misma pantalla que muestre dos listas desplegables: Proveedores disponibles. Zonas asociadas a los proveedores. Opciones para agregar y modificar asociaciones entre proveedores y zonas. Exportar Datos: Un botón que permita exportar todos los datos visibles en formato Excel. Interfaz Responsiva y Moderna: Estilo limpio y funcional utilizando Bootstrap. Encabezados claros en cada tabla/cuadro. Botones bien distribuidos y visibles, con colores que indiquen su propósito: Azul para Editar. Rojo para Eliminar. Verde para Agregar. Checkbox habilitado/deshabilitado. Búsqueda y Filtrado: Un campo de búsqueda en la parte superior de la tabla para buscar ubigeos por cualquier criterio (e.g., distrito o provincia). Paginación: Navegación entre páginas de registros (e.g., "Página 1 de 5"). Por favor, crea un diseño esquemático o layout que refleje esta funcionalidad en una aplicación web. La interfaz debe ser clara, sencilla de implementar y práctica para el usuario final.
