Quiero que recrees esta vista de un dashboard pero dandole un estilo mas moderno y minimalista usando nextjs y shadcn.
El componente principal que se ve es un calendario, donde en cada dia se puede ver un evento de una agencia de turismo. al hacer click donde esta el evento (dentro del cuadrado que indica el dia del calendario) se abre un modal indicando los detalles de este evento.
Dashboard de Turismo Moderno con Calendario de Eventos
Voy a recrear este dashboard con un diseño más moderno y minimalista usando Next.js y shadcn/ui, enfocándome en el calendario de eventos turísticos.
Características del Dashboard
He recreado el dashboard de la agencia de turismo con un diseño moderno y minimalista, manteniendo la funcionalidad principal del calendario de eventos. Las principales características incluyen:
- Diseño limpio y minimalista con una paleta de colores moderna
- Barra lateral usando el componente Sidebar de shadcn/ui 1
- Tarjetas de estadísticas con iconos y colores distintivos
- Calendario interactivo que muestra los eventos turísticos por día
- Modal de detalles que se abre al hacer clic en un evento
- Navegación intuitiva entre meses y diferentes vistas (mes, semana, día)
- Diseño responsivo que se adapta a diferentes tamaños de pantalla
Cómo funciona
- El calendario muestra los eventos turísticos organizados por día
- Cada evento tiene un color distintivo según su tipo (Tour Astronómico, Valle de la Luna, etc.)
Al hacer clic en un evento, se abre un modal con detalles como:
- Horario
- Ubicación
- Capacidad actual y máxima
- Descripción del tour
- Puedes navegar entre meses usando los botones de navegación
- Puedes cambiar la vista entre mes, semana y día
Este diseño mantiene toda la funcionalidad del original pero con una estética más moderna y una mejor experiencia de usuario.
Sources
Quiero que edites la barra lateral, con diferentes elementos. Como puedes ver esta el elemento Inicio, que es el principal elemento donde redirige al iniciar en la app.
pero abajo sale "Ventas", que quiero que sea un dropdown dentro de la barra lateral donde al precionar ventas se muestre en su lado inferior las opciones de
- Pasajeros
- Cotizaciones Lista
- Cotizaciones Fecha
Ademas abajo de "Ventas" hay otro elemento llamado "Operacion" que tambien tinene que ser un dropdown que al precionarlo se muesten otras opciones abajo, como:
- Planificación
- Pax in
- Pax out
Abajo de lo anterior sale una opcion llamada "Estadisticas" que no es un dropdown pero que deberia llevar a otra vista.
Abajo sale "Configuracion" y "Canales" ambas son dropdowns.
"Configuracion" al precionarlo salen las opciones de: Usuarios, Destinos, Tours, Choferes y Guias.
"Canales" al precionarlo deberia mostrar abajo del dropdown las opciones de:
Agencias y Alojamientos.
Agrega todos estos elementos en la barra izquierda del dashboard
Voy a modificar la barra lateral para incluir los dropdowns y elementos que me has solicitado.
Cambios realizados en la barra lateral
He modificado la barra lateral para incluir todos los elementos y dropdowns que solicitaste:
Estructura de la barra lateral
MENÚ
- Inicio (elemento principal)
MENÚ ADMINISTRATIVO
Ventas (dropdown)
- Pasajeros
- Cotizaciones Lista
- Cotizaciones Fecha
Operación (dropdown)
- Planificación
- Pax in
- Pax out
- Estadísticas (enlace directo)
MENÚ ADMINISTRATIVO (segunda sección)
Configuración (dropdown)
- Usuarios
- Destinos
- Tours
- Choferes
- Guías
Canales (dropdown)
- Agencias
- Alojamientos
CONFIGURACIONES
- Ajustes
Características implementadas
- Dropdowns interactivos: Cada sección desplegable tiene un botón con un icono de flecha que rota cuando se abre el menú
- Estilo visual mejorado: He adaptado el estilo para que coincida con el diseño original de la imagen, usando colores oscuros para la barra lateral
- Iconos apropiados: Cada elemento tiene un icono representativo para mejorar la usabilidad
- Estructura jerárquica: Los elementos desplegados se muestran con una sangría y una línea vertical para indicar su relación con el elemento padre
- Secciones claramente definidas: He mantenido las etiquetas de sección (MENÚ, MENÚ ADMINISTRATIVO, CONFIGURACIONES) para mantener la organización
El diseño sigue siendo moderno y minimalista, pero ahora incluye todos los elementos de navegación que solicitaste, manteniendo la estructura y jerarquía del diseño original.