01 Vue d'ensemble Overview

Le panneau d'administration contrôle le catalogue de produits, les prix et la configuration exposée sur le site menuiserie-surmesure.fr et dans le configurateur de fenêtres/portes.

The admin panel controls the product catalogue, pricing and configuration exposed on menuiserie-surmesure.fr and in the window/door configurator.

02 Authentification Authentication

Au premier accès, un overlay de connexion apparaît. Seuls les utilisateurs avec le rôle ADMIN_SALES ou SUPER_ADMIN ont accès.

On first access, a login overlay appears. Only users with role ADMIN_SALES or SUPER_ADMIN have access.

1. Entrez votre email — le même que dans le backend (ex: admin@tech-menuiserie.fr)
2. Entrez le mot de passe et cliquez Connecter
3. Succès : l'overlay disparaît, le badge utilisateur apparaît dans l'en-tête
4. Erreur de rôle : message "Accès interdit — rôle insuffisant"

1. Enter your email — the same as in the backend (e.g. admin@tech-menuiserie.fr)
2. Enter the password and click Connect
3. Success: the overlay disappears, the user badge appears in the header
4. Role error: message "Access denied — insufficient role"

03 Onglets Admin Admin Tabs

La navigation se fait depuis la barre latérale gauche. Chaque onglet gère une partie du catalogue :

Navigation is done from the left sidebar. Each tab manages a part of the catalogue:

04 Produits Site (Nouveau) Site Products (New)

Cet onglet gère les produits affichés sur le site public. Chaque produit a une version FR et EN, peut être lié à une série du catalogue, et possède des champs SEO.

This tab manages products displayed on the public site. Each product has FR and EN versions, can be linked to a catalogue series, and has SEO fields.

Créer un produit

Create a product

1. Cliquez + Ajouter produit
2. Remplissez Nom FR (obligatoire) et optionnellement Nom EN
3. Choisissez la Catégorie (Fenêtres, Portes, etc.)
4. Sélectionnez un Badge : Populaire ou Nouveau (optionnel)
5. Liez à une Série du catalogue admin (optionnel)
6. Définissez Prix à partir de en EUR (ou laissez vide pour auto)
7. Remplissez les champs SEO : Meta Title (max 60 car.) et Meta Description (max 160 car.)
8. Cliquez Créer

1. Click + Add product
2. Fill in Name FR (required) and optionally Name EN
3. Choose the Category (Windows, Doors, etc.)
4. Select a Badge: Popular or New (optional)
5. Link to a Series from the admin catalogue (optional)
6. Set Price from in EUR (or leave blank for auto)
7. Fill in SEO fields: Meta Title (max 60 chars) and Meta Description (max 160 chars)
8. Click Create

Actions rapides

Quick actions

05 Sauvegarde & Synchronisation Save & Synchronisation

Boutons de l'en-tête

Header buttons

Indicateur de synchronisation

Sync indicator

06Export / Import

Export/Import local (fichier JSON)

Local Export/Import (JSON file)

• Exporter JSON : télécharge la configuration actuelle
• Importer JSON : restaure une configuration sauvegardée
• Publish All : génère filter-config.json + pricing-engine.json

• Export JSON: downloads current configuration
• Import JSON: restores a saved configuration
• Publish All: generates filter-config.json + pricing-engine.json

Synchronisation API (Backend)

API Sync (Backend)

1. Sélectionnez le module (Séries, Couleurs, Vitrages, Quincaillerie, Accessoires)
2. Export depuis API : télécharge les données actuelles du backend en JSON
3. Import dans API : sélectionnez un fichier JSON → aperçu du diff
4. Cliquez Appliquer pour sauvegarder ou Annuler
5. Après import : bouton ↩ Rollback disponible pour annuler

1. Select the module (Series, Colours, Glazing, Hardware, Accessories)
2. Export from API: download current backend data as JSON
3. Import to API: select a JSON file → diff preview appears
4. Click Apply to save or Cancel
5. After import: ↩ Rollback button available to undo

07 Intégration API API Integration

Configuration

Configuration

// Before admin-app.js:
<script>window.ADMIN_API_BASE = 'https://api.menuiserie-surmesure.fr/api';</script>

// Default: '/api' (relative to current domain)

Comportement

Behaviour

08Architecture

Modules JS

JS Modules

09 Dépannage Troubleshooting

10 Gestion des utilisateurs User Management

PUT /api/admin/users/{userId}/role
{ "role": "ADMIN_PRODUCTION" }

PUT /api/admin/users/{userId}/active
{ "active": false }

PUT /api/admin/users/{userId}/role
{ "role": "ADMIN_PRODUCTION" }

PUT /api/admin/users/{userId}/active
{ "active": false }

11 Fichiers & Structure Files & Structure

admin/
├── index.html              ← Admin panel
├── guide.html              ← This guide (FR/EN)
├── css/
│   └── admin.css           ← Styles (auth, products, import)
├── js/
│   ├── admin-app.js        ← Main orchestrator (ES module)
│   ├── api-client.js       ← API client (JWT auth)
│   ├── auth-gate.js        ← Login overlay + user badge
│   └── produse-site.js     ← Site products manager (CRUD)
├── images/
└── docs/
    └── S2-IMPLEMENTATION.md