Guide Dev — S3 Espace Client

Vue d'ensemble

Module: Espace client authentifié avec 6 sous-pages (SPA hash routing).

Progrès global:

100% — Implementare completà. 27 fichiers, ~5200 lignes. Prêt pour test et déploiement.

Complet

DONE Login/Register/Reset (shared, bilingue FR/EN)
DONE SPA shell HTML (header, sidebar, footer, a11y)
DONE CSS layout + components + pages (1493 lignes)
DONE Router + Auth guard + App entry
DONE API Client + Mock data + i18n FR/EN
DONE WebSocket manager (SockJS + STOMP)
DONE 6 page modules JS (commandes, détail, profil, factures, devis, support)
DONE Vendor lib stubs (remplacer par vrais pour prod)

Pré-déploiement

TODO Remplacer stubs SockJS/STOMP par versions réelles
TODO Tester avec ?mock=1 localement
TODO Déployer sur VPS (scp)
TODO Intégrer avec backend réel

Structure des fichiers

login/
├── index.html              DONE
├── css/
│   ├── variables.css       DONE
│   └── login.css           DONE
└── js/
    ├── api-client.js       DONE
    └── login-app.js        DONE

mon-compte/
├── index.html              DONE
├── guide.html              DONE ← cette page
├── STATUS.md               DONE
├── css/
│   ├── variables.css       DONE
│   ├── layout.css          DONE  365 lignes
│   ├── components.css      DONE  643 lignes
│   └── pages.css           DONE  488 lignes
├── js/
│   ├── app.js              TODO
│   ├── router.js           TODO
│   ├── api-client.js       TODO
│   ├── auth.js             TODO
│   ├── ws-manager.js       TODO
│   ├── mock-data.js        TODO
│   └── pages/
│       ├── commandes.js    TODO
│       ├── commande-detail.js TODO
│       ├── profil.js       TODO
│       ├── factures.js     TODO
│       ├── devis.js        TODO
│       └── support.js      TODO
└── lib/
    ├── sockjs.min.js       TODO
    └── stomp.min.js        TODO

Quick Start

1. Tester le login (mock mode)

# Ouvrir dans le navigateur:
# file:///Users/pavelmaxim/Code/ERP-Termopane/login/index.html?mock=1

# Ou avec un serveur local:
cd /Users/pavelmaxim/Code/ERP-Termopane
python3 -m http.server 8000
# → http://localhost:8000/login/?mock=1

En mode mock, n'importe quel email/password fonctionne. Après login, redirige vers /mon-compte/.

2. Tester l'espace client

# Après le login (token stocké dans localStorage):
# http://localhost:8000/mon-compte/?mock=1

# Note: nécessite app.js (pas encore créé) pour fonctionner

3. Vérifier le design

Le CSS est complet. Ouvrir index.html pour voir le shell (header, sidebar, footer). Le contenu dynamique sera vide tant que app.js n'existe pas.

4. Déployer

# Login (shared pour tous les modules)
scp -r login/ root@83.228.246.186:/var/www/ui.menuiserie-surmesure.fr/login/

# Espace Client
scp -r mon-compte/ root@83.228.246.186:/var/www/ui.menuiserie-surmesure.fr/mon-compte/

Architecture

SPA Hash Routing

Un seul index.html avec un conteneur #app-content. Le router écoute hashchange et charge le module de page correspondant.

Routes:
  #/commandes         → pages/commandes.js    (défaut)
  #/commandes/:id     → pages/commande-detail.js
  #/profil            → pages/profil.js
  #/factures          → pages/factures.js
  #/devis             → pages/devis.js
  #/support           → pages/support.js

Auth Flow

                     ┌─────────────┐
                     │  /login/    │
                     │ ?redirect=  │
                     └──────┬──────┘
                            │ POST /auth/login
                            ▼
                     ┌─────────────┐
                     │ localStorage│
                     │ token+user  │
                     └──────┬──────┘
                            │ redirect
                            ▼
                     ┌─────────────┐
                     │ /mon-compte/│
                     │ auth.guard()│
                     └──────┬──────┘
                            │ token missing?
                            │ → redirect /login/
                            ▼
                     ┌─────────────┐
                     │  API calls  │
                     │ Bearer token│
                     └─────────────┘

WebSocket (Real-time)

SockJS → STOMP.js → Spring Boot /ws
  ├── /topic/orders/{userId}       → order status updates
  └── /topic/notifications/{userId} → general notifications

Events dispatchés:
  window.dispatchEvent(new CustomEvent('ws:order-update', {detail}))
  → commandes.js écoute et anime le changement de status

Mock Mode

Ajouter ?mock=1 à l'URL. Le MockApiClient remplace le vrai ApiClient et retourne des données hardcodées (Jean Dupont, commandes AM-2025-0847/0512).

API Contract

Tous les endpoints retournent du JSON. Auth via header Authorization: Bearer {token}.

Auth

Méthode	Path	Body	Response
POST	`/auth/login`	{email, password}	{token, userId, firstName, lastName, role}
POST	`/auth/register`	{email, password, firstName, lastName, phone}	{token, userId, role}
POST	`/auth/reset-password`	{email}	{message}
POST	`/auth/refresh`	{token}	{token}

Profile

Méthode	Path	Description
GET	`/api/auth/profile`	Données profil utilisateur
PUT	`/api/auth/profile`	Mettre à jour le profil

Commandes

Méthode	Path	Description
GET	`/api/orders`	Liste des commandes
GET	`/api/orders/{id}`	Détail d'une commande
GET	`/api/orders/{id}/messages`	Messages de la commande
POST	`/api/orders/{id}/messages`	Envoyer un message
GET	`/api/orders/{id}/documents`	Documents associés

Factures

Méthode	Path	Description
GET	`/api/invoices`	Liste des factures
GET	`/api/invoices/{id}/pdf`	Télécharger PDF (blob)

Devis

Méthode	Path	Description
GET	`/api/devis`	Liste des devis
POST	`/api/devis/{id}/accept`	Accepter un devis → crée commande
POST	`/api/devis/{id}/decline`	Refuser un devis (+ raison optionnelle)

Support

Méthode	Path	Description
GET	`/api/tickets`	Liste des tickets
POST	`/api/tickets`	Créer un ticket
GET	`/api/tickets/{id}`	Détail + messages du ticket
POST	`/api/tickets/{id}/messages`	Répondre au ticket

WebSocket

Endpoint	Protocol	Topics
`/ws`	SockJS + STOMP	`/topic/orders/{userId}`, `/topic/notifications/{userId}`

Design System (CODEX VALI)

Couleurs

#003168 — Navy (primary)

#ef7c1a — Orange (accent)

#faf9f7 — Off-white (bg-alt)

#1f2937 — Dark gray (text)

#10b981 — Green (success)

#ef4444 — Red (error)

Typographie

DM Serif Display — Headings (h1-h4), font-weight: 400

Inter — Body, forms, navigation (400, 500, 600, 700)

DM Mono — Prix, numéros de commande, codes (400, 500)

Règles CODEX

Style Mercedes — élégant, subtil, premium
Ton consultant — pas vendeur agressif
Animations: 0.2-0.3s ease (pas de bounce/shake)
Ombres douces: 0 2px 8px rgba(0,0,0,0.08)
Prix toujours TTC (obligation légale française)
Contact en footer uniquement

Breakpoints

Breakpoint	Layout
> 900px	Sidebar 240px + Content flex
≤ 900px	Single column, sidebar en overlay mobile (hamburger)
≤ 480px	Stats 1 colonne, cards compactes

Détail des 6 pages

1. Mes Commandes `#/commandes`

Page par défaut. Affiche stats grid (4 cards) + liste des commandes avec status badges.

Status: pending confirmed production shipped delivered installed cancelled
Actions: "Suivre" → détail, "Facture" → PDF download
WebSocket: mise à jour status en temps réel
Empty state si aucune commande

2. Commande Détail `#/commandes/:id`

Timeline verticale (5 étapes): Commandé → Fabrication → Expédié → Livré → Installé
Liste produits avec config détaillée
Documents téléchargeables (facture, attestation RGE, garantie)
Thread de messages (bulles alternées client/entreprise)

3. Mon Profil `#/profil`

Formulaire 2 colonnes: prénom, nom, email, téléphone, adresse
Section changement de mot de passe
Préférences notifications
Validation: format email, téléphone français

4. Mes Factures `#/factures`

Liste document-row avec icone, numéro, date, montant TTC, status
Filtres: Toutes | Payées | En attente
Download PDF via blob URL

5. Mes Devis `#/devis`

Cards similaires aux commandes
Status: en attente / accepté / refusé / expiré
Actions: Accepter (modal confirmation) / Refuser (modal + raison)
Devis accepté → lien vers commande créée

6. Support `#/support`

Liste des tickets + bouton "Nouveau ticket"
Formulaire: sujet, catégorie (Commande/Livraison/Installation/Facturation/Autre), message
Vue thread (bulles messages) en cliquant sur un ticket

Déploiement

Prérequis

VPS ce-dev-01 configuré (S0)
Nginx servant ui.menuiserie-surmesure.fr depuis /var/www/ui.menuiserie-surmesure.fr/
SSL actif (Certbot)

Commandes

# Déployer login (shared)
scp -r login/ root@83.228.246.186:/var/www/ui.menuiserie-surmesure.fr/login/

# Déployer mon-compte
scp -r mon-compte/ root@83.228.246.186:/var/www/ui.menuiserie-surmesure.fr/mon-compte/

# Vérifier
curl -I https://ui.menuiserie-surmesure.fr/login/
curl -I https://ui.menuiserie-surmesure.fr/mon-compte/

Structure sur le VPS

/var/www/ui.menuiserie-surmesure.fr/
├── login/           ← S3 shared auth
├── mon-compte/      ← S3 espace client
├── configurateur/   ← S1
├── admin/           ← S2
├── dashboard/       ← S4
├── finance/         ← S5
└── index.html       ← S6 (staging)