Analysis and Diagrams - FactoriaF5-Asturias/project-p5-digital-academy-team1-restaurant-frontend GitHub Wiki

Roles and Routes

The application adapts its views to the role of the logged-in user. Each route declares its allowed roles in meta.roles (src/router/index.js). Role values match the ones returned by the backend.

Role Backend value
GUEST null (no session)
CUSTOMER ROLE_CUSTOMER
COOK ROLE_COOK
DELIVERY ROLE_DELIVERYMAN
ADMIN ROLE_ADMIN
Route View Roles allowed Purpose
/ CartaView Everyone Hero + paginated product catalog
/cesta CestaView Guest, Customer Cart, channel, table, payment, chef note and confirmation
/mi-pedido MiPedidoView Guest, Customer Last order ticket; order history for customers
/perfil PerfilView Customer, Admin Profile form and exclusive offers
/cocina CocinaView Cook, Admin Kitchen metrics and active orders
/reparto RepartoView Delivery, Admin Delivery summary
/admin AdminHomeView Admin Administration sections
/admin/productos AdminProductsView Admin Product management
/admin/facturacion AdminInvoicesView Admin Paid orders / invoicing
/admin/kpi AdminKpiView Admin Sales KPIs (today, month, quarter, year)
/admin/resumen-ventas AdminSalesReportView Admin Sales summary by period + PDF download
/login LoginView Guest Login
/register RegisterView Guest Registration
/forgot-password ForgotPasswordView Guest Request password reset
/reset-password ResetPasswordView Guest Set a new password
/acceso-denegado AccessDeniedView Logged-in users Shown when the role is not allowed

Navigation rules

flowchart TD
    A[User navigates to a URL] --> B{Route exists?}
    B -->|No| C{Logged in?}
    C -->|No| L[Login]
    C -->|Yes| H[Carta]
    B -->|Yes| D{Role allowed?}
    D -->|Yes| V[Show view]
    D -->|No| E{Logged in?}
    E -->|No| L
    E -->|Yes| F{Guest-only route?<br/>login, register...}
    F -->|Yes| H
    F -->|No| X[Acceso denegado]
Loading

User Flows

Dine-in order (no account required)

flowchart TD
    A[Customer opens the Carta on the tablet] --> B[Adds products to the cart]
    B --> C[Goes to Cesta]
    C --> D{Channel}
    D -->|En sala| E[Table detected automatically<br/>or entered manually]
    E --> F[Chooses payment: cashier or card at table]
    F --> G[Optional note for the chef]
    G --> H[Confirms the order]
    H -->|POST /orders| I{Response}
    I -->|Error| J[Error message, cart is kept]
    J --> H
    I -->|Success| K[Payment status shown]
    K --> M[Mi pedido: order ticket]
Loading

Home delivery order (account required)

flowchart TD
    A[Customer in Cesta] --> B[Selects 'A domicilio']
    B --> C{Logged in?}
    C -->|No| D[Redirect to Login]
    D --> E[Login / Register]
    E --> A
    C -->|Yes| F[Delivery address]
    F --> G[Payment: online card or cash on delivery]
    G --> H[Exclusive offers applied automatically]
    H --> I[Confirms the order]
    I --> J[Applied offers marked as used]
    J --> K[Mi pedido]
Loading

Order Lifecycle

States defined by the backend OrderStatus enum and the role that changes each one:

stateDiagram-v2
    [*] --> PLACED: Customer confirms
    PLACED --> PROCESSING: Kitchen
    PROCESSING --> DELAYED: Kitchen
    DELAYED --> READY: Kitchen
    PROCESSING --> READY: Kitchen
    READY --> PAID: Payment (on-site)
    READY --> ONTHEWAY: Delivery driver
    ONTHEWAY --> DELIVERED: Delivery driver
    PAID --> [*]
    DELIVERED --> [*]
Loading

Data Model

The frontend consumes the entities defined by the backend. Consult the backend Analysis and Diagrams page for the full database schema and the Chen / crow's foot diagrams.


Prototype

Every screen was designed before development.

Screen Mockup
Menu and cart Menu and cart
Cart and checkout Cart and checkout
Login and registration Login and registration
Customer profile Customer profile
Customer dashboard Customer dashboard
Kitchen dashboard Kitchen dashboard
Delivery dashboard Delivery dashboard
Admin dashboard Admin dashboard

⚠️ **GitHub.com Fallback** ⚠️