Flujos de usuario - FactoriaF5-Asturias/project-p5-digital-academy-team3-restaurant-frontend GitHub Wiki

Descripción de los flujos principales de la aplicación organizados por rol. Cada flujo describe los pasos que sigue el usuario y las pantallas que atraviesa.

Cliente

El cliente navega la carta del restaurante, elige productos y realiza un pedido. No necesita registrarse para hacer un pedido.

Ver la carta y añadir productos al carrito

  1. El cliente entra en /.
  2. La aplicación carga los productos desde el backend y los muestra en un grid de tarjetas.
  3. El cliente puede filtrar por categoría con los botones de filtro.
  4. El cliente puede buscar por nombre o descripción con el buscador.
  5. En cada tarjeta, el cliente ajusta la cantidad con los botones + y -. La cantidad mínima es 1.
  6. El cliente pulsa "Añadir a la cesta".
  7. El contador del carrito en el header se actualiza en tiempo real.
  8. La cantidad del selector se resetea a 1 y el cliente puede seguir añadiendo productos.

Revisar el carrito y confirmar el pedido

  1. El cliente pulsa el icono del carrito en el header.
  2. Se abre /cart con el listado de productos.
  3. El cliente puede incrementar o reducir la cantidad de cada producto, o eliminarlo.
  4. El subtotal, el envío y el total se recalculan automáticamente.
  5. El cliente elige el método de entrega.
  6. El cliente pulsa "Completar pedido".
  7. La aplicación envía el pedido al backend con POST /api/v1/orders.
  8. El carrito se vacía.
  9. La aplicación navega a /order-success/:id con el id del pedido recién creado.

Ver la confirmación del pedido

  1. La aplicación muestra la vista de confirmación con el número de pedido formateado (#P5-<id>).
  2. El cliente puede pulsar "Seguir comprando" para volver a la home.

Administrador

El administrador gestiona la carta, los pedidos y los informes. Requiere autenticación con rol ADMIN.

Primer login y cambio de contraseña obligatorio

  1. El administrador entra en /login.
  2. Introduce su usuario y su contraseña inicial.
  3. La aplicación llama a POST /api/v1/auth/token.
  4. El backend responde con 409 Conflict porque la contraseña requiere cambio.
  5. La aplicación redirige a /change-password.
  6. El administrador rellena el usuario, la contraseña actual, la nueva contraseña y su confirmación.
  7. La aplicación valida en cliente que las contraseñas coincidan y que la nueva tenga al menos 8 caracteres.
  8. La aplicación llama a POST /api/v1/auth/change-password.
  9. El backend responde con un token nuevo. La aplicación lo guarda en localStorage.
  10. La aplicación redirige a /admin/products.

Acceder al panel de administración

  1. El administrador entra en /login.
  2. Introduce sus credenciales.
  3. La aplicación llama a POST /api/v1/auth/token.
  4. El backend devuelve el token. La aplicación lo guarda en localStorage.
  5. La aplicación redirige a /.
  6. El administrador pulsa el icono de perfil en el header.
  7. El icono enlaza a /admin/products.
  8. La aplicación renderiza el panel de administración con el sidebar.

Gestionar productos

  1. El administrador accede a /admin/products.
  2. La aplicación carga el listado de productos y las categorías desde el backend.
  3. El administrador ve cada producto con su información y las acciones disponibles.
  4. Puede buscar productos con el buscador.
  5. Puede cambiar el estado de un producto (activar/desactivar) con el botón correspondiente.
  6. Puede editar un producto pulsando "Editar". Se abre un formulario con los datos precargados.
  7. Puede eliminar un producto pulsando "Eliminar". Se muestra una confirmación.
  8. Puede añadir un producto nuevo pulsando "Añadir producto". Se abre el mismo formulario vacío.
  9. Al guardar, la aplicación llama al backend y actualiza el listado.

Gestionar pedidos

  1. El administrador accede a /admin/orders.
  2. La aplicación carga el listado de pedidos.
  3. El administrador filtra por tipo y por estado.
  4. Puede consultar los detalles de un pedido.
  5. Puede cambiar el estado de un pedido.

Consultar informes de ventas

  1. El administrador accede a /admin/reports.
  2. La aplicación muestra el resumen de ventas por día, mes, trimestre y año.
  3. El administrador puede solicitar la descarga del informe en PDF.
  4. La aplicación llama al backend y descarga el PDF.

Cocina

El personal de cocina gestiona el estado de los pedidos. Requiere autenticación con rol KITCHEN.

Acceder al dashboard de cocina

  1. El cocinero entra en /login.
  2. Introduce sus credenciales.
  3. La aplicación llama a POST /api/v1/auth/token.
  4. El backend devuelve el token. La aplicación lo guarda en localStorage.
  5. La aplicación redirige a /.
  6. El cocinero pulsa el icono de perfil en el header.
  7. El icono enlaza a /kitchen.
  8. La aplicación renderiza el dashboard de cocina.

Gestionar pedidos en cocina

  1. El cocinero ve el listado de pedidos activos en el dashboard.
  2. Puede filtrar los pedidos por estado (todos, pendientes, en curso, listos, cancelados).
  3. Puede filtrar por tipo de pedido (todos, para llevar, en sala, a domicilio).
  4. Cada pedido muestra su información: número, tipo, hora, items, estado actual.
  5. El cocinero cambia el estado del pedido con las acciones disponibles:
    • Aceptar un pedido pendiente.
    • Marcar como listo un pedido aceptado.
    • Rechazar un pedido pendiente.
  6. El cambio de estado se envía al backend con PUT /api/v1/orders/:id/status.
  7. El listado se actualiza automáticamente.