╔══════════════════════════════════════════════════════════════════════════════╗
║  MYKOLLECTOR® — PROMPT PHASE 4 : FRONTEND FAB                              ║
║  À utiliser avec : MKO_FAB.docx + token design                             ║
╚══════════════════════════════════════════════════════════════════════════════╝

## CONTEXTE

Tu vas générer le portail fabricant fab.mykollector.com complet.
Deux espaces distincts sous le même domaine :
- Espace opérateur fabricant (/)
- Espace admin MKO (/admin/)

La bible technique complète est dans MKO_FAB.docx — elle fait autorité.

## CONTRAINTES TECHNIQUES ABSOLUES

- Stack : HTML5 / CSS3 / JS vanilla — zéro framework JS — zéro dépendance externe
- Design : mode CLAIR — fond #F5F7FA — accents or #C8A84B — texte #1A2638
- Police : Montserrat — fichiers locaux dans font/montserrat/ — PAS de CDN Google
- Auth : JWT stocké en localStorage (key: mko_token)
- API : https://api.mykollector.com
- Polling notifications : toutes les 30 secondes
- Polling chat : toutes les 5 secondes
- Desktop first (pas mobile)

## TOKENS DESIGN

Utiliser exactement les variables CSS du token design fourni.
Mode clair — pas dark mode comme chrono.

## ARBORESCENCE COMPLÈTE À GÉNÉRER

fab.mykollector.com/
├── index.html                   ← Login opérateur fabricant
├── dashboard.html               ← Dashboard opérateur (lots, KPIs, stock)
├── lot.html                     ← Vue détail d'un lot
├── commande.html                ← Vue détail d'une commande (texte gravure read-only)
├── expedition.html              ← Formulaire expédition unitaire
├── expedition-batch.html        ← Expédition en lot
├── sav.html                     ← Formulaire SAV
├── chat.html                    ← Interface chat (polling 5s)
├── notifications.html           ← Centre notifications
├── admin/
│   ├── index.html               ← Login admin + redirect dashboard admin
│   ├── dashboard.html           ← Dashboard admin (KPIs, alertes, dernières commandes)
│   ├── commandes.html           ← Liste commandes avec filtres
│   ├── commande.html            ← Détail commande admin (contrôles avancés)
│   ├── sportifs.html            ← Recherche sportifs
│   ├── parcours.html            ← Gestion parcours + config GPS
│   ├── parcours-edit.html       ← Édition parcours + tracking_config + fabricant/graveur
│   ├── contacts.html            ← Carnet de contacts universel
│   ├── contact-edit.html        ← Création/édition contact
│   ├── prestashop.html          ← Sync PS + config OAuth2
│   ├── rapports.html            ← Stats et rapports
│   ├── sav-admin.html           ← Gestion tickets SAV
│   ├── config.html              ← Configuration système
│   ├── config-backup.html       ← Configuration Dropbox backup
│   └── users.html               ← Gestion utilisateurs (super_admin)
├── agent/
│   └── index.html               ← Page téléchargement agent DXF + guide installation
├── js/
│   ├── api.js                   ← Wrapper fetch (base URL + JWT + refresh auto)
│   ├── auth.js                  ← Login, logout, vérification rôle
│   ├── notifications.js         ← Polling 30s + badge header
│   └── chat.js                  ← Polling 5s + affichage messages
└── css/
    └── fab.css                  ← Styles globaux mode clair MKO

## SPÉCIFICATIONS PAR PAGE

### index.html (Login opérateur)
- Formulaire email + password
- POST /api/auth/login
- Si rôle admin_fab ou super_admin → redirect /admin/dashboard.html
- Si rôle operateur_fab → redirect /dashboard.html
- Lien "Mot de passe oublié ?"
- Lien "Vous êtes administrateur MKO ? → Espace Admin"

### dashboard.html (Opérateur)
Voir wireframe MKO_FAB.docx §2.2
- 3 KPIs : nouveaux lots / en cours / expédiés ce mois
- Liste lots en attente (statut=genere) avec bouton [Voir le lot]
- Jauge stock emballages par type avec alerte si bas
- Badge notifications dans header
- Polling notifications 30s

### lot.html (Détail lot)
Voir wireframe MKO_FAB.docx §2.3
- Statut lot + nb commandes
- Boutons : [Prendre en charge] / [Télécharger DXF ZIP] / [Exporter CSV]
- Tableau commandes du lot : référence + texte gravure (READ ONLY) + adresse
- Mention visible : "🔒 Textes de gravure verrouillés — non modifiables"
- Bouton [Terminer gravure] quand statut=en_gravure

### commande.html (Détail commande)
Voir wireframe MKO_FAB.docx §2.4
- Texte gravure dans un encadré distinct avec mention "🔒 VERROUILLÉ"
- Aucun champ éditable sur cet écran
- Type commande + parcours + chrono source
- Adresse d'expédition
- Boutons : [Télécharger DXF] / [Étiquette PDF] / [SAV — Signaler un problème]

### expedition.html (Expédition unitaire)
Voir wireframe MKO_FAB.docx §2.5
- Destinataire affiché
- Sélecteur transporteur (Colissimo, La Poste, Chronopost, DHL, Autre)
- Champ numéro suivi (optionnel)
- Date expédition (défaut aujourd'hui)
- Bouton [Confirmer l'expédition]
- POST /api/fab/expedition

### expedition-batch.html (Expédition en lot)
Voir wireframe MKO_FAB.docx §2.6
- Transporteur unique pour tout le lot
- Option numéros suivi individuels ou pas de suivi
- Avertissement : "⚠️ Cette action enverra X emails aux sportifs"
- POST /api/fab/expedition/batch

### sav.html (SAV fabricant)
Voir wireframe MKO_FAB.docx §2.7
- Radio buttons types de problème
- Champ description
- Upload photo (optionnel)
- POST /api/fab/sav/express

### chat.html
Voir wireframe MKO_FAB.docx §2.8
- Polling GET /api/chat/:id/messages?since=timestamp toutes les 5s
- Affichage bulles gauche/droite selon auteur
- Champ saisie + bouton Envoyer
- POST /api/chat/:id/messages

### admin/dashboard.html
Voir wireframe MKO_FAB.docx §3.1
- 4 KPIs : total commandes / en lot / en gravure / CA mois
- Section alertes (SAV ouverts, stocks bas, tokens expiration)
- Tableau dernières commandes importées
- Bouton [Sync PS maintenant]
- Alerte rouge si commandes PS statut 2 non importées depuis > 15 min (via GET /api/admin/stats → champ ps_desync_count)
- Limite appels Groq quotidiens : affichage compteur dans section config

### admin/commandes.html
Voir wireframe MKO_FAB.docx §3.2
- Filtres : statut + parcours + type commande
- Recherche par référence ou nom sportif
- Pagination
- Lien vers commande détail

### admin/parcours-edit.html
Voir wireframe MKO_FAB.docx §3.5
- Infos générales du parcours
- Section "Machine à états GPS v6" : tous les seuils configurables
- Section "Anti-triche" : vitesse max + temps minimum
- Sélecteurs Fabricant et Graveur (liste contacts avec peut_fabriquer=1 / peut_graver=1)
- MKO Interne toujours en premier avec ⭐
- PATCH /api/parcours/:id

### admin/config-backup.html
Voir wireframe MKO_INFRA.docx §9.1b
- Champ token Dropbox (masqué avec bouton 👁)
- Champ dossier destination
- Statut dernier backup : date + taille + ✅/❌
- Boutons [Tester la connexion] + [Backup maintenant]
- Guide 4 étapes pour obtenir un token Dropbox
- POST /api/admin/backup/dropbox-config
- POST /api/admin/backup/dropbox-test
- POST /api/admin/backup/dropbox-now

### agent/index.html
Voir wireframe MKO_FAB.docx §4.1
- Version actuelle de l'agent
- Bouton [Télécharger agent_mykollector_v1.1.0.zip]
- Guide installation 5 étapes
- Statut des agents connectés (GET /api/admin/agent-status)
- Pour chaque atelier : dernier heartbeat + statut ok/alerte

## COMPOSANTS PARTAGÉS

### js/api.js
- Base URL : https://api.mykollector.com
- Wrapper fetch avec Authorization: Bearer {token}
- Refresh automatique si réponse 401 → POST /api/auth/refresh
- Si refresh échoue → effacer localStorage → redirect index.html
- Gestion erreurs centralisée avec affichage toast

### js/notifications.js
- setInterval 30000ms → GET /api/fab/notifications
- Mettre à jour badge dans le header (nombre non lus)
- Afficher toast pour nouvelles notifications

### js/chat.js
- setInterval 5000ms → GET /api/chat/:id/messages?since={lastTimestamp}
- Ajouter les nouveaux messages au DOM sans recharger toute la liste

## RÈGLES UX IMPORTANTES

- Spinner sur tous les appels API
- Toast de confirmation après chaque action (expédition, prise en charge, etc.)
- Confirmation modale avant actions irréversibles (expédier, terminer gravure)
- Tableau texte_gravure toujours en lecture seule avec mention visible
- Les admins voient un badge [ADMIN] dans le header
- Responsive desktop — pas nécessaire mobile

## FORMAT DE LIVRAISON ATTENDU

Livrer l'arborescence complète avec tous les fichiers listés.
Chaque page HTML doit être autonome et fonctionner avec js/api.js.
fab.css doit définir toutes les variables CSS du design system mode clair.
Tester mentalement chaque wireframe de MKO_FAB.docx avant de livrer.
