🗺️ Roadmap Frontend (Next.js)

🌟 Fase 1: MVP Funcional

🎯 Objetivo: Interfaz básica conectada al backend
🔧 Tecnologías Clave:

📋 Tareas Detalladas:

1. Configuración inicial del proyecto:

   • Crear proyecto con Next.js 14 (App Router) + TypeScript.
   • Configurar estructura de carpetas: /autenticacion, /panel, /catalogo.

2. Sistema de autenticación visual:

   • Usar NextAuth.js para manejar 2 roles:
     • Vendedor: Gestión de inventario y órdenes.
     • Cliente: Compra y seguimiento de pedidos.
   • Diseñar pantallas de login/registro con componentes de shadcn/ui.

3. Vistas principales:

   • Catálogo de vehículos:
     • Tabla filtrable por marca/año .
     • Modal para añadir nuevos vehículos con validación.
   • Listado de repuestos:
     • Grid de cards responsive con imágenes optimizadas.
     • Botones de acción rápida (añadir al carrito/favoritos).
   • Carrito de compras:
     • Resumen de compra con cálculo de impuestos.

---

🎨 Fase 2: Experiencia de Usuario Avanzada

🎯 Objetivo: Interfaz fluida y optimizada
🔧 Tecnologías Clave:

📋 Tareas Detalladas:

1. Búsqueda inteligente:

   • Autocompletado predictivo.
   • Filtros por compatibilidad usando chips seleccionables.
   • Historial de búsquedas almacenado en localStorage.

2. Componentes interactivos:

   • Galería de imágenes con zoom.
   • Comparador de repuestos con arrastrar/soltar (dnd-kit).
   • Transiciones suaves entre páginas.

3. Optimizaciones clave:

   • Convertir imágenes a WebP usando Image de Next.js.

4. Sistema de diseño:

   • Diseñar tema oscuro/claro con variables CSS.

---

📈 Fase 3: Soporte a Business Intelligence

🎯 Objetivo: Integración con analítica y recomendaciones del backend
🔧 Tecnologías Clave:

📋 Tareas Detalladas:

1. Paneles de control:

   • Gráficos en tiempo real (ventas/inventario).

2. Sistema de recomendaciones:

   • Sección "Clientes también compraron..." (datos del backend).
   • Carrusel de repuestos populares por categoría.

3. Automatizaciones frontend:

   • Notificaciones push para alertas de stock.
   • Recordatorios de carrito abandonado.

4. Generación de reportes:

   • Exportar datos a PDF (usar pdf-lib).
   • Botón "Descargar Excel" con datos filtrados.

---

🚀 Live Preview

¡Explora nuestra versión en vivo!