Rutas y funcionalidades - FactoriaF5-Asturias/project-p5-digital-academy-team3-restaurant-frontend GitHub Wiki

Listado de rutas, control de acceso y funcionalidades de cada vista.

Tabla de rutas

Path Name Componente requiresAuth roles
/ home HomeView.vue No —
/cart cart CartPageView.vue No —
/login login LoginView.vue No —
/change-password change-password ChangePasswordView.vue No —
/order-success/:id order-success OrderSuccessView.vue No —
/admin admin AdminView.vue Sí ADMIN
/admin (hija '') — AdminWelcome.vue Sí (heredado) ADMIN (heredado)
/admin/products — AdminProducts.vue Sí (heredado) ADMIN (heredado)
/admin/orders — AdminOrders.vue Sí (heredado) ADMIN (heredado)
/admin/reports — SalesReportView.vue Sí (heredado) ADMIN (heredado)
/kitchen kitchen KitchenDashboardView.vue Sí KITCHEN
/:pathMatch(.*)* not-found NotFoundView.vue No —

Las rutas hijas de /admin heredan requiresAuth y roles del padre mediante el merge de meta que aplica Vue Router.

Guards y control de acceso

El acceso a las rutas protegidas se controla con un guard global en router.beforeEach. Se ejecuta antes de cada navegación y decide si el usuario puede pasar.

Lógica del guard:

  1. Lee isAuthenticated y user del composable useAuth.
  2. Si la ruta requiere autenticación (meta.requiresAuth) y el usuario no está autenticado, redirige a login.
  3. Si la ruta requiere un rol (meta.roles) y el usuario no tiene ninguno de los roles permitidos, redirige a home.
  4. Si ninguna condición se cumple, deja pasar la navegación.

Roles existentes en el sistema:

  • ADMIN: acceso al panel de administración. Gestiona productos, pedidos e informes.
  • KITCHEN: acceso al dashboard de cocina. Gestiona el estado de los pedidos.

Un usuario con ADMIN no accede a /kitchen con la configuración actual. Si en el futuro se quiere permitir, se añade 'ADMIN' al array de roles de esa ruta.

Funcionalidades por vista

Home (/)

Vista principal para el cliente. Contiene:

  • Hero: título, subtítulo y botón para revisar el pedido.
  • Búsqueda: input para filtrar productos por nombre o descripción.
  • Filtros de categoría: botones para filtrar por Especialidades, Postres, Bebidas, etc.
  • Catálogo: grid de tarjetas de producto con imagen, nombre, descripción, precio y selector de cantidad.
  • Añadir al carrito: cada tarjeta emite add-to-cart con el id y la cantidad seleccionada.
  • Ubicación: dirección, horarios, teléfono y mapa embebido de Google Maps.
  • Footer: logo, nombre del restaurante y copyright.

Carrito (/cart)

Vista de revisión del pedido antes de finalizarlo. Contiene:

  • Listado de items: cada producto con imagen, nombre, precio, cantidad y controles de +/-.
  • Subtotal, envío y total: calculados en tiempo real.
  • Método de entrega: alterna entre "en local" y "a domicilio".
  • Botón de completar pedido: envía el pedido al backend (POST /api/v1/orders), limpia el carrito y navega a la vista de confirmación.
  • Estados: cargando, error, carrito vacío, éxito.

Login (/login)

Formulario de acceso. Contiene:

  • Usuario y contraseña.
  • Toggle de visibilidad de la contraseña.
  • Al enviar: llama a POST /api/v1/auth/token.
    • 200: guarda el token, redirige a /.
    • 401: muestra "Credenciales incorrectas".
    • 409: redirige a /change-password porque la contraseña requiere cambio obligatorio.

Cambio de contraseña (/change-password)

Vista accesible sin sesión para el cambio obligatorio de contraseña en el primer login del admin. Contiene:

  • Cuatro campos: usuario, contraseña actual, nueva contraseña, repetir contraseña.
  • Validaciones en cliente: la nueva debe tener al menos 8 caracteres y coincidir con la confirmación.
  • Al enviar: llama a POST /api/v1/auth/change-password.
    • 200: guarda el token, redirige a /admin/products.
    • 400: la nueva contraseña es igual a la actual.
    • 401: credenciales incorrectas.
    • 409: la contraseña no requiere cambio.

Confirmación de pedido (/order-success/:id)

Vista informativa tras completar un pedido. Muestra:

  • Icono de éxito.
  • Número de pedido formateado (#P5-<id>).
  • Mensaje explicativo.
  • Botón "Seguir comprando" que vuelve a la home.

Panel de administración (/admin)

Layout con sidebar y secciones internas para el admin. Solo accesible con rol ADMIN.

Secciones:

  • /admin (vacío): AdminWelcome.vue. Página de bienvenida al panel.
  • /admin/products: gestión de productos. Listado, búsqueda, creación, edición y eliminación (soft delete cambiando el estado).
  • /admin/orders: listado de pedidos. Estados, filtros y acciones.
  • /admin/reports: informes de ventas. Resumen por día, mes, trimestre y año. Descarga de PDF.

Dashboard de cocina (/kitchen)

Vista para el personal de cocina. Solo accesible con rol KITCHEN. Contiene:

  • Listado de pedidos activos.
  • Filtros por estado (todos, pendientes, en curso, listos, cancelados) y por tipo de pedido.
  • Cambio de estado de cada pedido: pendiente → aceptado → listo → cancelado.
  • Acciones sobre los pedidos.

404 (/:pathMatch(.*)*)

Vista de error cuando el usuario navega a una ruta que no existe. Muestra:

  • Icono de error.
  • Título "¡Página no encontrada!".
  • Mensaje explicativo.
  • Botón "Volver a la página principal" que vuelve a /.