Dashboard - Copy this React, Tailwind Component to your project
Barra de Navegación Superior: Debe ser moderna, con un diseño minimalista y claro. Incluir opciones como "Dashboard", "Componentes", "Ajustes" y "Perfil". La barra de navegación debe tener un fondo oscuro con texto claro y botones de acción. Sección Central: El espacio central debe ser dinámico y mostrar widgets interactivos como: Gráfico de Barras: Mostrar información cuantitativa (por ejemplo, ventas por mes) en un gráfico de barras. Gráfico de Líneas: Visualizar tendencias a lo largo del tiempo, como el crecimiento de usuarios. Medidor de Progreso: Un widget que muestra el progreso de algún objetivo, como el porcentaje alcanzado de una meta de ventas. Los widgets deben ser redimensionables por el usuario, lo que significa que los tamaños pueden ajustarse manualmente después de cargarse. Colores y diseño: El diseño debe ser limpio, moderno, y visualmente atractivo, utilizando colores suaves y tonos neutros para un enfoque minimalista. Los gráficos y medidores deben actualizarse en tiempo real, mostrando datos que cambian constantemente. Interactividad: Los componentes, como los gráficos y medidores, deben reflejar las selecciones hechas en la segunda página (de gestión de componentes) y su tamaño puede ajustarse una vez cargado el dashboard. Página 2: Interfaz de Gestión de Componentes Estructura de la Página: Dividir la página en dos secciones principales: Componentes Seleccionados: Mostrar una lista de componentes ya agregados al dashboard. Deben incluir tanto los componentes visuales (gráficos, medidores) como el nombre y las opciones para redimensionarlos. Los componentes deben poder moverse o reordenarse dentro de esta sección para cambiar su disposición. Componentes Disponibles: Mostrar una lista de todos los componentes que el usuario puede seleccionar, como gráficos de barras, líneas, medidores y otros widgets. Cada componente tendrá una casilla de selección que permitirá al usuario elegir el componente para agregarlo al dashboard. Cuando un componente es seleccionado, debe moverse a la sección de "Componentes Seleccionados". Selección de Componentes: Los componentes disponibles deben ser visualmente representados (no solo un nombre, sino con un pequeño gráfico representativo). Cuando el usuario elija un componente, este se trasladará automáticamente a "Componentes Seleccionados", y será visible y editable en el dashboard de la Página 1. Flujo Interactivo: Los componentes seleccionados no deben volver a aparecer en la sección de componentes disponibles una vez hayan sido añadidos a la lista de "Componentes Seleccionados". Los componentes en la sección "Componentes Seleccionados" deben poder ser eliminados o desmarcados para volver a la lista de "Componentes Disponibles". La interfaz debe tener iconos y representaciones claras de los componentes. Redimensionamiento: En la Página 1, después de que los componentes sean seleccionados y añadidos al dashboard, deben permitir redimensionarse de manera fluida, similar a cómo funciona en aplicaciones como Chrome o VSCode. El componente debe tener un tamaño inicial predeterminado, pero el usuario debe poder ajustarlo según sus necesidades. Diseño: El diseño de esta página también debe ser limpio y organizado, con iconos representativos y un flujo de interacción claro. La interfaz debe ser fácil de usar, permitiendo al usuario arrastrar y soltar los componentes seleccionados y organizarlos en el dashboard.
