Hugging Face's logo

Spaces:
safetrack
/
edtech
Running

App Files Community
edtech / tasks /admin-ux-plan.md
CognxSafeTrack
feat(admin): UX non-tech complète + i18n 4 langues
66ff7a1
preview code
|
raw
history blame contribute delete
7.81 kB

Plan d'implémentation — Admin UX/UI Non-Tech

Créé le : 2026-05-13
Objectif : Rendre l'interface admin utilisable par des non-développeurs, en s'appuyant sur l'IA conversationnelle pour guider chaque action clé.

Statut global

Phase Description Statut
Phase 1 Gains immédiats — corrections sans refonte ✅ Terminé
Phase 2 Chat IA global toutes les pages ✅ Terminé
Phase 3 Onboarding WhatsApp guidé ✅ Terminé
Phase 4 Templates assistés par IA ✅ Terminé
Phase 5 Agent IA — setup guidé ✅ Terminé

Phase 1 — Gains immédiats (sans refonte)

Objectif : corriger les points de friction les plus bloquants en touchant un minimum de code.

1.1 — Masquer Flow Config JSON (SettingsPage)

  • Fichier : apps/admin/src/pages/SettingsPage.tsx
  • Action : Enrober le textarea flowConfig dans un <details> collapsé par défaut avec le label "⚙️ Configuration avancée (développeurs)"
  • Statut : ✅ Terminé

1.2 — Remplacer "X chunks" (AIAgentSetup)

  • Fichier : apps/admin/src/pages/AIAgentSetup.tsx
  • Action : Indicateur de couverture qualitative (Excellente/Bonne/Insuffisante) + texte humain "X passages analysés" + conseil si volume insuffisant
  • Statut : ✅ Terminé

1.3 — Placeholder guidé pour le champ Rôle (AIAgentSetup)

  • Fichier : apps/admin/src/pages/AIAgentSetup.tsx
  • Action : Placeholder exemple concret + texte d'aide sous le champ
  • Statut : ✅ Terminé

1.4 — Bloc d'aide contextuel — Connexion WhatsApp (OnboardingWizard)

  • Fichier : apps/admin/src/pages/OnboardingWizard.tsx
  • Action : <details> collapsable expliquant WABA ID, Business ID, Token système avec liens directs Meta + conseil de basculer vers Facebook Signup si nouveau
  • Statut : ✅ Terminé

1.5 — Labels humains pour les clés API (SettingsPage)

  • Fichier : apps/admin/src/pages/SettingsPage.tsx
  • Action : Texte explicatif enrichi : état locked (ce que SCALE débloque) + état unlocked (clés chiffrées, impact sur les crédits)
  • Statut : ✅ Terminé

Phase 2 — Chat IA global (toutes les pages)

Objectif : étendre le chat billing à toute l'interface, avec un contexte qui change selon la page.

2.1 — Extraire AdminChat en composant générique

  • Fichier : apps/admin/src/components/AdminChat.tsx (nouveau)
  • Action : Widget flottant (bouton 💬 + panneau) avec prop page: AdminChatPage, questions rapides contextuelles par page, reset automatique au changement de page
  • Statut : ✅ Terminé

2.2 — Endpoint API contextualisé

  • Fichier : apps/api/src/routes/billing.ts
  • Action : Param page ajouté au body du POST /chat. Si page === 'billing' → contexte complet (wallet + usage). Sinon → contexte léger (org + mode + aide contextuelle par page : settings, templates, agent, onboarding)
  • Statut : ✅ Terminé

2.3 — Intégrer AdminChat dans MainLayout

  • Fichier : apps/admin/src/components/layouts/MainLayout.tsx
  • Action : Hook useAdminChatPage() mappe la route courante vers la page de chat. Widget masqué sur /billing (qui a son propre chat inline). Affiché uniquement si une organisation est sélectionnée.
  • Statut : ✅ Terminé

Phase 3 — Onboarding WhatsApp guidé

Objectif : zéro abandon sur l'étape de connexion WhatsApp.

3.1 — Stepper visuel dans l'étape WhatsApp

  • Fichier : apps/admin/src/pages/OnboardingWizard.tsx
  • Action : Badges numérotés ①②③ devant chaque champ (WABA ID → Business ID → Token) avec lien direct Meta pour chacun
  • Statut : ✅ Terminé

3.2 — Validation token WhatsApp en temps réel

  • Fichiers : OnboardingWizard.tsx + apps/api/src/routes/organizations.ts
  • Action : Endpoint POST /v1/organizations/whatsapp-validate-token (ping graph.facebook.com/me). Feedback visuel sur le champ : ✓ vert / ✗ rouge / … checking + message explicatif sous le champ
  • Statut : ✅ Terminé

3.3 — Détection d'expiration du token (SettingsPage)

  • Fichiers : SettingsPage.tsx + apps/api/src/routes/organizations.ts
  • Action : Endpoint GET /v1/organizations/:id/whatsapp-status (déchiffre le token + ping Meta). SettingsPage charge le statut au mount. Bannière rouge avec instructions si token invalide/expiré.
  • Statut : ✅ Terminé

Phase 4 — Création de templates assistée par IA

Objectif : un non-tech peut créer un template WhatsApp correct du premier coup.

4.1 — Générateur de template via IA

  • Fichiers : TemplatesPage.tsx + apps/api/src/routes/billing.ts
  • Action : Endpoint POST /v1/billing/template-generate (gpt-4o-mini, response_format JSON). Dans la modal : champ description + bouton "Générer" → auto-remplit nom, corps, catégorie.
  • Statut : ✅ Terminé

4.2 — Validation en temps réel des variables

  • Fichier : apps/admin/src/pages/TemplatesPage.tsx
  • Action : Regex {{...}} sur le body en temps réel. Badges colorés pour chaque variable : bleu si {{1}} (valide), amber si {{texte}} (invalide). Bouton Submit bloqué si variables invalides.
  • Statut : ✅ Terminé

4.3 — Prévisualisation rendu WhatsApp

  • Fichier : apps/admin/src/pages/TemplatesPage.tsx
  • Action : Bulle WhatsApp (fond #ECE5DD, bulle blanche) avec {{1}} → exemples réels (Jean Dupont, 3 000 FCFA…). Apparaît dès que le corps n'est pas vide.
  • Statut : ✅ Terminé

4.4 — Explication politique d'approbation Meta

  • Fichier : apps/admin/src/pages/TemplatesPage.tsx
  • Action : Texte contextuel sous le sélecteur Catégorie : Marketing → "24-48h, évitez les mots trop commerciaux" / Utilitaire → "approbation plus rapide, confirmations/rappels".
  • Statut : ✅ Terminé

Phase 5 — Agent IA — Setup guidé

Objectif : configurer un agent opérationnel sans comprendre ce qu'est un LLM.

5.1 — Feedback post-upload enrichi

  • Fichier : apps/admin/src/pages/AIAgentSetup.tsx
  • Action : Après upload succès → card "✨ Que se passe-t-il maintenant ?" expliquant le délai d'indexing et invitant à tester dans le panneau de droite
  • Statut : ✅ Terminé

5.2 — Suggestion de ton selon le secteur

  • Fichier : apps/admin/src/pages/AIAgentSetup.tsx
  • Action : Fetch org mode au chargement → pré-sélection automatique (EDTECH→Pédagogue, CRM→Amical, AI_AGENT→Professionnel, CUSTOMER_SERVICE→Direct). Badge ✦ sur le ton recommandé. Description contexuelle + "recommandé pour votre secteur" sous les boutons.
  • Statut : ✅ Terminé

5.3 — Blocage activation si KB vide

  • Fichier : apps/admin/src/pages/AIAgentSetup.tsx
  • Action : Bannière amber en haut de page si KB vide + mode AI_AGENT. Bouton Save désactivé avec message explicatif.
  • Statut : ✅ Terminé

5.4 — Test de l'agent en direct (chat preview)

  • Fichiers : AIAgentSetup.tsx + apps/api/src/routes/billing.ts
  • Action : Endpoint POST /v1/billing/agent-test (personalityConfig → system prompt → gpt-4o-mini). Panneau de droite remplacé par un chat interactif avec input + bulles. Indicateur de chargement animé.
  • Statut : ✅ Terminé

Ordre d'exécution recommandé 

Phase 1 → Phase 2 → Phase 3 → Phase 4 → Phase 5

Les phases 1 sont indépendantes et peuvent être faites en parallèle.
Les phases 3–5 dépendent de la Phase 2 (AdminChat générique).

Légende

Symbole Signification
✅ Terminé
⏳ En cours
🔲 À faire
❌ Bloqué