╔══════════════════════════════════════════════════════════════════════════════╗
║  MYKOLLECTOR® — PROMPT PHASE 5 : FRONTEND WORKFLOW                         ║
║  À utiliser avec : MKO_WORKFLOW.docx + token design                        ║
╚══════════════════════════════════════════════════════════════════════════════╝

## CONTEXTE

Tu vas générer le cockpit de pilotage personnel de Julien Carpentier —
workflow.mykollector.com. C'est l'outil de travail quotidien de l'entrepreneur :
supervision de la plateforme MKO + outils personnels (todo, calendrier,
journal de bord, assistant IA).

29 modules. La bible technique complète est dans MKO_WORKFLOW.docx.

## 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 — rôle requis : admin_fab ou super_admin
- API métier : https://api.mykollector.com
- API Groq : https://api.groq.com/openai/v1/chat/completions (M29, M28, M05, M24)
  Modèle Groq : llama-3.3-70b-versatile
- Layout : sidebar fixe gauche + contenu à droite
- Desktop first

## TOKENS DESIGN

Utiliser exactement les variables CSS du token design fourni.
Mode clair — même palette que fab.mykollector.com.

## ARCHITECTURE LAYOUT

Voir wireframe MKO_WORKFLOW.docx §2 :

- Header fixe : logo + titre + utilisateur connecté + déconnexion
- Sidebar gauche fixe (280px) : navigation par groupes de modules
- Contenu principal : zone de rendu du module actif
- Chargement des modules : via fetch() HTML ou JS inline selon complexité

Groupes sidebar :
- TABLEAU DE BORD : M01, M02
- PRODUCTION : M03, M04, M07, M17
- CONTACTS : M06, M10
- STOCK : M08, M11
- FINANCES : M12, M13, M14, M15
- ANALYSE : M19, M20, M21
- MARKETING : M05, M23, M24
- CONFIG : M09, M18, M22, M16, M25
- MON ESPACE : M26, M27, M28, M29

## ARBORESCENCE À GÉNÉRER

workflow.mykollector.com/
├── index.html                   ← Login + redirect dashboard
├── app.html                     ← Shell principal (header + sidebar + zone contenu)
├── modules/
│   ├── m01-dashboard.html
│   ├── m02-notifications.html
│   ├── m03-commandes.html
│   ├── m04-lots.html
│   ├── m05-emails.html
│   ├── m06-contacts.html
│   ├── m07-sportifs.html
│   ├── m08-stock-mko.html
│   ├── m09-parcours.html
│   ├── m10-fabricants.html
│   ├── m11-stock-fab.html
│   ├── m12-comptabilite.html
│   ├── m13-factures.html
│   ├── m14-depenses.html
│   ├── m15-tresorerie.html
│   ├── m16-scrum.html
│   ├── m17-sav.html
│   ├── m18-evenements.html
│   ├── m19-statistiques.html
│   ├── m20-classements.html
│   ├── m21-revue-chronos.html
│   ├── m22-utilisateurs.html
│   ├── m23-social-media.html
│   ├── m24-seo.html
│   ├── m25-vue-parcours.html
│   ├── m26-todo.html
│   ├── m27-calendrier.html
│   ├── m28-journal.html
│   └── m29-assistant.html
├── js/
│   ├── api.js                   ← Wrapper fetch API MKO
│   ├── auth.js                  ← Login/logout/vérification rôle
│   ├── router.js                ← Chargement modules dans la zone contenu
│   └── groq.js                  ← Wrapper appels API Groq
└── css/
    └── workflow.css             ← Styles globaux + layout sidebar

## SPÉCIFICATIONS DÉTAILLÉES PAR MODULE

### M01 — Dashboard
Voir wireframe MKO_WORKFLOW.docx §3 M01
- 4 KPIs : total commandes / en lot / en gravure / CA mois
- Résumé IA Groq quotidien (appel Groq avec contexte KPIs + alertes)
- Si Groq indisponible ou limite atteinte → afficher 'IA indisponible' sans bloquer le dashboard
- Section alertes : SAV ouverts, stocks bas, tokens expiration, backup Dropbox
- Graphe CA 30 jours (barres SVG natif — pas de librairie externe)
- Tâches urgentes du jour (depuis M26 todos avec deadline aujourd'hui)
- Alerte rouge si ps_desync_count > 0 : '🔴 X commandes PS non importées depuis 15 min'
- Compteur appels Groq du jour vs limite configurée

### M26 — Pense-bête & Todo
Voir wireframe MKO_WORKFLOW.docx §3 M26

FONCTIONNALITÉS :
- Arborescence illimitée : idée → sous-idées → sous-sous-idées (parent_id récursif)
- Chaque item : titre + description + deadline + couleur + statut (ouvert/en_cours/fait)
- Cocher = marquer "fait" + horodatage dans todo_journal
- Décocher = rouvrir avec horodatage "reouvert" dans todo_journal
- Bouton [+ Nouvelle idée] → formulaire inline
- Bouton [+ Sous-idée] sur chaque item
- Bouton [✨ Décomposer avec IA] → appel Groq qui génère des sous-tâches
- Filtre : Tout / En cours / Fait / Avec deadline
- Drag & drop pour réordonner (optionnel)

ALGORITHME DÉCOMPOSITION IA (Groq) :
Prompt : "Tu es un assistant de productivité pour MyKollectOr, une plateforme
de médailles sportives. Décompose cette tâche en 3-5 sous-tâches concrètes et
actionnables. Réponds UNIQUEMENT en JSON : [{titre, description}].
Tâche : {titre_todo}"

Endpoints API :
- GET /api/wf/todos
- POST /api/wf/todos
- PATCH /api/wf/todos/:id
- POST /api/wf/todos/:id/cocher
- DELETE /api/wf/todos/:id

### M27 — Calendrier
Voir wireframe MKO_WORKFLOW.docx §3 M27

FONCTIONNALITÉS :
- Vue mois (défaut) + vue semaine + vue jour
- Afficher par catégorie avec couleur :
  🔴 Tâches avec deadline (depuis todos M26)
  📸 Publications Instagram planifiées (depuis M23)
  📘 Publications Facebook planifiées (depuis M23)
  ⚙️ Lots en gravure (depuis mykollufab via API)
  📦 Expéditions prévues (depuis mykollufab via API)
  🟡 Réceptions B2B
  💡 Événements manuels
- Clic sur un jour → voir détail + ajouter événement
- Récurrence configurable (quotidien/hebdo/mensuel)
- Navigation précédent/suivant mois

Endpoints API :
- GET /api/wf/calendrier?debut=&fin=
- POST /api/wf/calendrier/event
- PATCH /api/wf/calendrier/event/:id
- DELETE /api/wf/calendrier/event/:id

### M28 — Journal de bord
Voir wireframe MKO_WORKFLOW.docx §3 M28

FONCTIONNALITÉS :
- Une entrée par jour (UNIQUE sur date)
- Zone de texte libre (rich text basique : gras, liste, emoji)
- Sélecteur humeur : 😊 Super / 🙂 Bien / 😐 Moyen / 😔 Difficile
- Historique scrollable des entrées précédentes
- Résumé IA hebdomadaire Groq (généré automatiquement chaque lundi)
  Prompt Groq : "Voici les entrées de journal de la semaine : {entries}.
  Génère un résumé bienveillant en 3-4 phrases : ce qui a avancé, ce qui bloque,
  encouragement pour la semaine à venir."

Endpoints API :
- GET /api/wf/journal?page=1
- POST /api/wf/journal (crée ou met à jour l'entrée du jour)
- GET /api/wf/journal/resume-semaine

### M29 — Assistant IA
Voir wireframe MKO_WORKFLOW.docx §3 M29

FONCTIONNALITÉS :
- Interface conversationnelle (bulles gauche/droite)
- Historique persisté dans assistant_history (10 derniers échanges injectés)
- Contexte automatiquement injecté dans chaque prompt :
  * Tâches ouvertes avec deadline imminente (M26)
  * Dernières entrées journal 7 jours (M28)
  * KPIs du jour : commandes en attente, lots en cours
  * Deadlines dans les 7 prochains jours (M27)
- Boutons de suggestion : [Que faire cette semaine ?] [Décomposer une tâche] [Rédiger un email]
- Bouton [Effacer la conversation]

Appel Groq :
- Modèle : llama-3.3-70b-versatile
- Température : 0.7
- Max tokens : 500
- System prompt :
  "Tu es l'assistant personnel de Julien Carpentier, fondateur de MyKollectOr®,
  une plateforme de médailles sportives gravées. Tu connais son projet en détail.
  Tu l'aides à prioriser, organiser et avancer. Sois concis, pratique et
  bienveillant. Parle en français. Contexte actuel : {context}"

Endpoints API :
- GET /api/wf/assistant/historique
- POST /api/wf/assistant/chat
- DELETE /api/wf/assistant/historique

### M05 — Emails
- Liste emails envoyés (depuis logs_audit action=email_*)
- Templates sauvegardables
- Bouton [Générer avec IA Groq] → prompt pour générer un template email
- Envoi manuel : POST /api/admin/email/send

### M16 — Scrum
- Tableau Kanban : Backlog / En cours / En test / Terminé
- Drag & drop entre colonnes
- 1 tâche = titre + assigné + description
- Pas d'intégration externe — gestion locale

### M23 — Social Media
- Affichage tokens Facebook + Instagram avec date d'expiration
- Alerte rouge si expiration dans < 7 jours
- Planning des publications (date + heure + réseau + texte)
- Bouton [Générer texte avec IA Groq]
- Groq prompt : "Génère un post {Instagram/Facebook} court et inspirant (max 150 mots)
  pour promouvoir {sujet}. Ton : authentique, sportif, motivant. #MyKollectOr"

### M24 — SEO
- Tableau pages www.mykollector.com avec score SEO estimé
- Bouton [Suggestions IA] → Groq analyse le contenu et propose title + meta description
- Mise à jour manuelle des balises

### M12-M15 — Finances
- M12 Comptabilité : CA par période/parcours (READ depuis mykollufab commandes)
- M13 Factures : liste avec téléchargement PDF
- M14 Dépenses : formulaire ajout dépense + liste + total par mois
- M15 Trésorerie : CA - Dépenses = Résultat + graphe SVG 6 mois

## SYSTÈME DE PERMISSIONS

Masquer dans la sidebar les modules non autorisés selon le rôle JWT :
- super_admin : tous les modules
- admin_fab : tous sauf M09, M16, M22
- comptable : M01, M02, M12, M13, M14, M15 uniquement

## GRAPHES SVG NATIFS

Pour M01, M12, M15, M19 : implémenter les graphes en SVG natif sans librairie.
Format barres verticales simple — pas besoin d'animations complexes.

## APPELS GROQ — js/groq.js

Wrapper centralisé pour tous les appels Groq :

fetch("https://api.groq.com/openai/v1/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + GROQ_API_KEY
  },
  body: JSON.stringify({
    model: "llama-3.3-70b-versatile",
    messages: messages,
    max_tokens: maxTokens || 500,
    temperature: 0.7
  })
})

La GROQ_API_KEY est récupérée depuis GET /api/wf/config → champ groq_api_key
(jamais exposée en dur dans le JS côté client)

## FORMAT DE LIVRAISON ATTENDU

Livrer l'arborescence complète avec les 29 fichiers modules + les fichiers partagés.
app.html charge les modules via fetch() dans la zone contenu selon la navigation.
workflow.css définit le layout sidebar + toutes les variables CSS.
Chaque module est une page HTML autonome chargée dynamiquement.
Tester mentalement chaque wireframe de MKO_WORKFLOW.docx avant de livrer.
