Analysis and Diagrams - FactoriaF5-Asturias/project-p5-digital-academy-team1-restaurant-frontend GitHub Wiki
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 |
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]
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]
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]
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 --> [*]
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.
Every screen was designed before development.
| Screen | Mockup |
|---|---|
| Menu and cart | |
| Cart and checkout | |
| Login and registration | |
| Customer profile | |
| Customer dashboard | |
| Kitchen dashboard | |
| Delivery dashboard | |
| Admin dashboard |