feat(billing): refonte UX non-tech + enrichissement contexte IA

Frontend (BillingPage):
- Renommage "Wallet" → "Crédits disponibles" (langage non-technique)
- Badge projection dynamique "À ce rythme : encore ~X jours" calculé
depuis les transactions des 7 derniers jours
- Questions suggérées cliquables (quick-reply chips) avant le 1er message
- Suppression "Tokens entrants/sortants" (jargon incompréhensible)
- Transactions filtrées : BYOK masqué, layout liste simple vs tableau
- Section "Où vont vos crédits IA ?" remplace le jargon feature/type
- Indicateur de frappe animé (3 points) dans le chat
- Packs recharge avec explication "≈ N messages IA" et badge populaire
- Texte WhatsApp clarifié : "Gratuit pour vous — Meta facture directement"

Backend (billing.ts /chat):
- Wallet balance + isHardStopped ajoutés dans le contexte IA
→ l'assistant peut maintenant répondre "combien de crédits me reste-t-il"
- Burn rate (débit moyen 7j) calculé et injecté : "À ce rythme,
votre solde durera encore X jours"
- Statut wallet (SUSPENDU / bas / actif) explicité dans le contexte
- Requêtes regroupées en Promise.all (1 aller-retour DB au lieu de 4)
- System prompt révisé : sans jargon, rassurante, pour non-techniques

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/admin/src/pages/BillingPage.tsx

@@ -1,16 +1,34 @@
 import { useState, useEffect, useRef } from 'react';
-import { Brain, MessageCircle, TrendingUp, Send, Loader2, AlertCircle, Zap, X } from 'lucide-react';
+import { Brain, MessageCircle, TrendingUp, Send, Loader2, AlertCircle, Zap, X, Flame, HelpCircle } from 'lucide-react';
 import { api } from '@/lib/api';
 import { useAuth } from '@/lib/auth';
 import { useTenant } from '@/lib/tenant';
 
 const CREDIT_PACKS = [
-    { label: '500 crédits', price: '10 000 FCFA', credits: 500 },
-    { label: '2 000 crédits', price: '35 000 FCFA', credits: 2000 },
-    { label: '5 000 crédits', price: '75 000 FCFA', credits: 5000 },
+    { label: '500 crédits', price: '5 000 FCFA', credits: 500, popular: false },
+    { label: '2 000 crédits', price: '18 000 FCFA', credits: 2000, popular: true },
+    { label: '5 000 crédits', price: '40 000 FCFA', credits: 5000, popular: false },
 ];
 
-const SUPPORT_WA_URL = 'https://wa.me/221700000000?text=Bonjour%2C%20je%20souhaite%20recharger%20mes%20cr%C3%A9dits%20IA%20Xaml%C3%A9%20Studio.';
+const SUPPORT_WA_URL = 'https://wa.me/221700000000?text=Bonjour%2C%20je%20souhaite%20recharger%20mes%20cr%C3%A9dits%20Xaml%C3%A9.';
+
+const QUICK_QUESTIONS = [
+    'Combien de crédits me reste-t-il ?',
+    'Dans combien de jours serai-je à court ?',
+    'Quelle fonctionnalité consomme le plus ?',
+    "Combien j'ai dépensé cette semaine ?",
+];
+
+const FEATURE_LABELS: Record<string, string> = {
+    LESSON: '📚 Leçons envoyées',
+    FEEDBACK: '✅ Feedbacks exercices',
+    DEEPDIVE: '🔍 Approfondissements',
+    TRANSCRIPTION: '🎤 Transcriptions audio',
+    IMAGE_ANALYSIS: '🖼️ Analyses image',
+    CAMPAIGN: '📣 Campagnes',
+    ONBOARDING: '👋 Accueil nouveaux apprenants',
+    OTHER: '⚙️ Autres',
+};
 
 function RechargeModal({ onClose }: { onClose: () => void }) {
     useEffect(() => {
@@ -32,18 +50,19 @@ function RechargeModal({ onClose }: { onClose: () => void }) {
                 className="bg-white w-full sm:max-w-md rounded-t-3xl sm:rounded-2xl shadow-2xl flex flex-col max-h-[90vh]"
                 onClick={e => e.stopPropagation()}
             >
-                {/* Header — fixe */}
                 <div className="flex items-center justify-between px-6 py-5 border-b border-slate-100 shrink-0">
-                    <h2 className="text-lg font-bold text-slate-900">Recharger les crédits IA</h2>
+                    <div>
+                        <h2 className="text-lg font-bold text-slate-900">Recharger les crédits</h2>
+                        <p className="text-xs text-slate-400 mt-0.5">1 crédit = 10 FCFA · utilisé pour chaque message IA</p>
+                    </div>
                     <button
                         onClick={onClose}
-                        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors"
+                        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-400 transition-colors"
                     >
                         <X className="w-5 h-5" />
                     </button>
                 </div>
 
-                {/* Contenu scrollable */}
                 <div className="overflow-y-auto flex-1 px-6 py-5 space-y-3">
                     {CREDIT_PACKS.map(pack => (
                         <a
@@ -51,21 +70,25 @@ function RechargeModal({ onClose }: { onClose: () => void }) {
                             href={`${SUPPORT_WA_URL}%20-%20Pack%20${pack.label}`}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="flex items-center justify-between p-4 border border-slate-200 rounded-xl hover:border-indigo-400 hover:bg-indigo-50 active:bg-indigo-100 transition-all group"
+                            className={`relative flex items-center justify-between p-4 border rounded-xl transition-all group ${pack.popular ? 'border-indigo-400 bg-indigo-50' : 'border-slate-200 hover:border-indigo-300 hover:bg-indigo-50'}`}
                         >
+                            {pack.popular && (
+                                <span className="absolute -top-2.5 left-4 px-2 py-0.5 bg-indigo-600 text-white text-xs font-bold rounded-full">
+                                    Le plus populaire
+                                </span>
+                            )}
                             <div>
                                 <p className="font-semibold text-slate-800 group-hover:text-indigo-700">{pack.label}</p>
-                                <p className="text-xs text-slate-400">Pack recharge unique</p>
+                                <p className="text-xs text-slate-400 mt-0.5">≈ {pack.credits} messages IA</p>
                             </div>
                             <span className="text-indigo-600 font-bold shrink-0 ml-4">{pack.price}</span>
                         </a>
                     ))}
                 </div>
 
-                {/* Footer — fixe */}
                 <div className="px-6 py-4 border-t border-slate-100 shrink-0">
                     <p className="text-xs text-slate-400 text-center">
-                        En cliquant sur un pack, vous serez redirigé vers WhatsApp pour finaliser votre commande avec notre équipe.
+                        Cliquez sur un pack → WhatsApp s'ouvre → notre équipe finalise la recharge en moins de 2 heures.
                     </p>
                 </div>
             </div>
@@ -90,34 +113,27 @@ interface WalletData {
 interface BillingSummary {
     plan: string;
     planLabel: string;
-    subscriptionStatus: string;
     period: { start: string; end: string };
     ai: {
         creditsUsed: number;
         creditsLimit: number;
         percentUsed: number;
         totalCalls: number;
-        tokensIn: number;
-        tokensOut: number;
-        costUsd: number;
         costFcfa: number;
     };
-    whatsapp: { messagesSent: number; note: string };
+    whatsapp: { messagesSent: number };
 }
 
 interface HistoryDay {
     date: string;
     aiCalls: number;
     whatsappMessages: number;
-    costUsd: number;
     costFcfa: number;
 }
 
 interface BreakdownItem {
     feature: string;
-    type: string;
     calls: number;
-    costFcfa: number;
 }
 
 interface ChatMessage {
@@ -125,23 +141,26 @@ interface ChatMessage {
     text: string;
 }
 
-const FEATURE_LABELS: Record<string, string> = {
-    LESSON: '📚 Leçons',
-    FEEDBACK: '✅ Feedbacks exercice',
-    DEEPDIVE: '🔍 Deep dives',
-    TRANSCRIPTION: '🎤 Transcriptions audio',
-    IMAGE_ANALYSIS: '🖼️ Analyses image',
-    CAMPAIGN: '📣 Campagnes',
-    ONBOARDING: '👋 Onboarding',
-    OTHER: '⚙️ Autres',
-};
+function DaysRemainingBadge({ walletBalance, transactions }: { walletBalance: number; transactions: WalletData['transactions'] }) {
+    const sevenDaysAgo = Date.now() - 7 * 86_400_000;
+    const weeklyDebit = transactions
+        .filter(tx => tx.amount < 0 && new Date(tx.createdAt).getTime() > sevenDaysAgo)
+        .reduce((sum, tx) => sum + Math.abs(tx.amount), 0);
 
-const PLAN_COLORS: Record<string, string> = {
-    STARTER: 'bg-slate-100 text-slate-700',
-    GROWTH: 'bg-emerald-100 text-emerald-700',
-    SCALE: 'bg-indigo-100 text-indigo-700',
-    ENTERPRISE: 'bg-amber-100 text-amber-700',
-};
+    if (weeklyDebit === 0) return null;
+
+    const dailyBurn = weeklyDebit / 7;
+    const days = Math.floor(walletBalance / dailyBurn);
+
+    const color = days <= 3 ? 'text-red-600 bg-red-50' : days <= 10 ? 'text-amber-600 bg-amber-50' : 'text-emerald-600 bg-emerald-50';
+    const icon = days <= 3 ? '🔴' : days <= 10 ? '🟡' : '🟢';
+
+    return (
+        <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold ${color}`}>
+            {icon} À ce rythme : encore <strong>~{days} jour{days > 1 ? 's' : ''}</strong>
+        </span>
+    );
+}
 
 export default function BillingPage() {
     const { token, user } = useAuth();
@@ -156,7 +175,6 @@ export default function BillingPage() {
     const [error, setError] = useState<string | null>(null);
     const [showRecharge, setShowRecharge] = useState(false);
 
-    // Chat state
     const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
     const [chatInput, setChatInput] = useState('');
     const [chatLoading, setChatLoading] = useState(false);
@@ -183,14 +201,14 @@ export default function BillingPage() {
         chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, [chatMessages]);
 
-    const sendChat = async () => {
-        if (!chatInput.trim() || chatLoading || !orgId || !token) return;
-        const question = chatInput.trim();
+    const sendChat = async (question?: string) => {
+        const q = (question ?? chatInput).trim();
+        if (!q || chatLoading || !orgId || !token) return;
         setChatInput('');
-        setChatMessages(prev => [...prev, { role: 'user', text: question }]);
+        setChatMessages(prev => [...prev, { role: 'user', text: q }]);
         setChatLoading(true);
         try {
-            const res = await api.post('/v1/billing/chat', { question, language: user?.language ?? 'FR' }, token, orgId);
+            const res = await api.post('/v1/billing/chat', { question: q, language: user?.language ?? 'FR' }, token, orgId);
             setChatMessages(prev => [...prev, { role: 'assistant', text: res.answer }]);
         } catch {
             setChatMessages(prev => [...prev, { role: 'assistant', text: 'Désolé, je ne peux pas répondre pour le moment.' }]);
@@ -199,7 +217,6 @@ export default function BillingPage() {
         }
     };
 
-    // Bar chart: max value for scaling
     const maxCalls = Math.max(...history.map(d => d.aiCalls + d.whatsappMessages), 1);
 
     if (!orgId) {
@@ -230,20 +247,31 @@ export default function BillingPage() {
     if (!summary) return null;
 
     const periodLabel = new Date(summary.period.start).toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' });
-
     const walletExhausted = wallet ? (wallet.isHardStopped || wallet.walletBalance <= 0) : false;
     const walletLow = wallet ? (wallet.walletBalance > 0 && wallet.walletBalance <= 200) : false;
 
+    const TX_LABELS: Record<string, string> = {
+        TOP_UP_MANUAL: '➕ Recharge',
+        TOP_UP_PAYMENT: '➕ Recharge',
+        ADJUSTMENT: '🔧 Ajustement',
+        DEBIT_AI: '🤖 Message IA',
+        DEBIT_WHATSAPP: '💬 Message WhatsApp',
+        DEBIT_BROADCAST: '📣 Campagne',
+    };
+
     return (
         <div className="p-6 max-w-5xl mx-auto space-y-6">
             {showRecharge && <RechargeModal onClose={() => setShowRecharge(false)} />}
 
-            {/* Wallet exhausted banner */}
+            {/* Alerte service suspendu */}
             {walletExhausted && (
                 <div className="flex items-center justify-between gap-4 px-5 py-4 bg-red-50 border border-red-200 rounded-2xl">
                     <div className="flex items-center gap-3 text-red-700">
                         <AlertCircle className="w-5 h-5 shrink-0" />
-                        <span className="font-semibold text-sm">Wallet épuisé — vos services sont suspendus. Rechargez pour rétablir.</span>
+                        <div>
+                            <p className="font-bold text-sm">Service suspendu — vos crédits sont épuisés</p>
+                            <p className="text-xs text-red-500 mt-0.5">Rechargez pour rétablir les messages IA immédiatement.</p>
+                        </div>
                     </div>
                     <button
                         onClick={() => setShowRecharge(true)}
@@ -254,12 +282,15 @@ export default function BillingPage() {
                 </div>
             )}
 
-            {/* Wallet low banner */}
+            {/* Alerte solde bas */}
             {!walletExhausted && walletLow && (
                 <div className="flex items-center justify-between gap-4 px-5 py-4 bg-amber-50 border border-amber-200 rounded-2xl">
                     <div className="flex items-center gap-3 text-amber-700">
                         <AlertCircle className="w-5 h-5 shrink-0" />
-                        <span className="font-semibold text-sm">Solde bas — {wallet!.walletBalance} crédits restants. Rechargez pour éviter une interruption.</span>
+                        <div>
+                            <p className="font-bold text-sm">Crédits presque épuisés — {wallet!.walletBalance} crédits restants</p>
+                            <p className="text-xs text-amber-600 mt-0.5">Rechargez avant interruption du service.</p>
+                        </div>
                     </div>
                     <button
                         onClick={() => setShowRecharge(true)}
@@ -270,131 +301,117 @@ export default function BillingPage() {
                 </div>
             )}
 
-            {/* Header */}
+            {/* En-tête */}
             <div className="flex items-center justify-between">
                 <div>
-                    <h1 className="text-2xl font-bold text-slate-900">Facturation</h1>
+                    <h1 className="text-2xl font-bold text-slate-900">Mes crédits & consommation</h1>
                     <p className="text-slate-500 text-sm mt-1">Période : {periodLabel}</p>
                 </div>
-                <div className="flex items-center gap-3">
-                    <span className={`px-3 py-1 rounded-full text-sm font-semibold ${PLAN_COLORS[summary.plan] ?? PLAN_COLORS.STARTER}`}>
-                        Plan {summary.planLabel}
-                    </span>
-                    <button
-                        onClick={() => setShowRecharge(true)}
-                        className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition-colors shadow-sm"
-                    >
-                        <Zap className="w-4 h-4" />
-                        Recharger
-                    </button>
-                </div>
+                <button
+                    onClick={() => setShowRecharge(true)}
+                    className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition-colors shadow-sm"
+                >
+                    <Zap className="w-4 h-4" />
+                    Recharger
+                </button>
             </div>
 
-            {/* Wallet balance card */}
+            {/* Carte principale — Crédits disponibles */}
             {wallet && (
-                <div className={`bg-white rounded-2xl border p-6 shadow-sm flex items-center justify-between ${walletExhausted ? 'border-red-300 bg-red-50' : walletLow ? 'border-amber-300 bg-amber-50' : 'border-slate-200'}`}>
-                    <div className="flex items-center gap-4">
-                        <div className={`w-12 h-12 rounded-2xl flex items-center justify-center text-xl ${walletExhausted ? 'bg-red-100' : walletLow ? 'bg-amber-100' : 'bg-emerald-100'}`}>
-                            💰
+                <div className={`rounded-2xl border p-6 shadow-sm ${walletExhausted ? 'border-red-200 bg-red-50' : walletLow ? 'border-amber-200 bg-amber-50' : 'bg-white border-slate-200'}`}>
+                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                        <div className="flex items-center gap-4">
+                            <div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0 ${walletExhausted ? 'bg-red-100' : walletLow ? 'bg-amber-100' : 'bg-emerald-100'}`}>
+                                💳
+                            </div>
+                            <div>
+                                <p className="text-sm font-medium text-slate-500">Crédits disponibles</p>
+                                <p className={`text-4xl font-black leading-tight ${walletExhausted ? 'text-red-600' : walletLow ? 'text-amber-600' : 'text-slate-900'}`}>
+                                    {wallet.walletBalance.toLocaleString('fr-FR')}
+                                    <span className="text-lg font-normal text-slate-400 ml-1.5">crédits</span>
+                                </p>
+                                <p className="text-sm text-slate-400 mt-1">
+                                    ≈ {(wallet.walletBalance * 10).toLocaleString('fr-FR')} FCFA
+                                </p>
+                                <div className="mt-2">
+                                    <DaysRemainingBadge walletBalance={wallet.walletBalance} transactions={wallet.transactions} />
+                                </div>
+                            </div>
                         </div>
-                        <div>
-                            <p className="text-sm text-slate-500">Solde Wallet</p>
-                            <p className={`text-3xl font-black ${walletExhausted ? 'text-red-600' : walletLow ? 'text-amber-600' : 'text-emerald-600'}`}>
-                                {wallet.walletBalance.toLocaleString('fr-FR')}
-                                <span className="text-base font-normal text-slate-400 ml-1">crédits</span>
-                            </p>
-                            <p className="text-xs text-slate-400 mt-0.5">
-                                ≈ {(wallet.walletBalance * 10).toLocaleString('fr-FR')} FCFA · 1 crédit = 10 FCFA
-                            </p>
+                        <div className="flex flex-col items-start sm:items-end gap-2 shrink-0">
+                            <button
+                                onClick={() => setShowRecharge(true)}
+                                className="px-5 py-2.5 bg-slate-900 hover:bg-slate-700 text-white rounded-xl font-bold text-sm transition-colors"
+                            >
+                                Recharger les crédits
+                            </button>
+                            <p className="text-xs text-slate-400">1 crédit = 1 message IA = 10 FCFA</p>
                         </div>
                     </div>
-                    <button
-                        onClick={() => setShowRecharge(true)}
-                        className={`px-5 py-2.5 rounded-xl font-bold text-sm transition-colors ${walletExhausted ? 'bg-red-600 hover:bg-red-700 text-white' : 'bg-slate-900 hover:bg-slate-700 text-white'}`}
-                    >
-                        {walletExhausted ? '🔴 Recharger' : 'Recharger'}
-                    </button>
                 </div>
             )}
 
-            {/* 2 metric cards */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Deux métriques simples */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 
-                {/* AI Credits Card */}
-                <div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
-                    <div className="flex items-center gap-3 mb-4">
+                {/* Messages IA ce mois */}
+                <div className="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
+                    <div className="flex items-center gap-3 mb-3">
                         <div className="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center">
                             <Brain className="w-5 h-5 text-indigo-600" />
                         </div>
-                        <div>
-                            <p className="text-sm text-slate-500">Crédits IA</p>
-                            <p className="text-2xl font-bold text-slate-900">
-                                {summary.ai.creditsUsed.toLocaleString('fr-FR')}
-                                <span className="text-base font-normal text-slate-400"> / {summary.ai.creditsLimit.toLocaleString('fr-FR')}</span>
-                            </p>
-                        </div>
-                    </div>
-                    {/* Progress bar */}
-                    <div className="w-full bg-slate-100 rounded-full h-2.5 mb-3">
-                        <div
-                            className={`h-2.5 rounded-full transition-all ${summary.ai.percentUsed > 85 ? 'bg-red-500' : summary.ai.percentUsed > 60 ? 'bg-amber-500' : 'bg-indigo-500'}`}
-                            style={{ width: `${Math.min(summary.ai.percentUsed, 100)}%` }}
-                        />
-                    </div>
-                    <div className="flex justify-between text-sm text-slate-500">
-                        <span>{summary.ai.percentUsed}% utilisé</span>
-                        <span className="font-semibold text-slate-700">
-                            ~{summary.ai.costFcfa.toLocaleString('fr-FR')} FCFA
-                        </span>
+                        <p className="text-sm font-semibold text-slate-600">Messages IA ce mois</p>
                     </div>
+                    <p className="text-3xl font-black text-slate-900">
+                        {summary.ai.totalCalls.toLocaleString('fr-FR')}
+                    </p>
+                    <p className="text-sm text-slate-400 mt-1">
+                        ≈ {summary.ai.costFcfa.toLocaleString('fr-FR')} FCFA de coût IA
+                    </p>
                     {summary.ai.percentUsed > 85 && (
-                        <button
-                            onClick={() => setShowRecharge(true)}
-                            className="mt-3 w-full flex items-center gap-2 text-xs text-red-600 bg-red-50 hover:bg-red-100 px-3 py-2 rounded-lg transition-colors text-left"
-                        >
-                            <AlertCircle className="w-3.5 h-3.5 flex-shrink-0" />
-                            Quota bientôt épuisé — cliquez pour recharger
-                        </button>
+                        <div className="mt-3">
+                            <div className="w-full bg-slate-100 rounded-full h-2 mb-1">
+                                <div className="h-2 rounded-full bg-red-500" style={{ width: `${Math.min(summary.ai.percentUsed, 100)}%` }} />
+                            </div>
+                            <button
+                                onClick={() => setShowRecharge(true)}
+                                className="flex items-center gap-1.5 text-xs text-red-600 hover:underline mt-1"
+                            >
+                                <AlertCircle className="w-3.5 h-3.5" />
+                                Quota mensuel bientôt atteint ({summary.ai.percentUsed}%)
+                            </button>
+                        </div>
                     )}
                 </div>
 
-                {/* WhatsApp Messages Card */}
-                <div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
-                    <div className="flex items-center gap-3 mb-4">
+                {/* Messages WhatsApp ce mois */}
+                <div className="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
+                    <div className="flex items-center gap-3 mb-3">
                         <div className="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
                             <MessageCircle className="w-5 h-5 text-emerald-600" />
                         </div>
-                        <div>
-                            <p className="text-sm text-slate-500">Messages WhatsApp</p>
-                            <p className="text-2xl font-bold text-slate-900">
-                                {summary.whatsapp.messagesSent.toLocaleString('fr-FR')}
-                            </p>
-                        </div>
+                        <p className="text-sm font-semibold text-slate-600">Messages WhatsApp ce mois</p>
                     </div>
-                    <div className="bg-emerald-50 rounded-xl p-3 mt-2">
+                    <p className="text-3xl font-black text-slate-900">
+                        {summary.whatsapp.messagesSent.toLocaleString('fr-FR')}
+                    </p>
+                    <div className="mt-3 bg-emerald-50 rounded-xl px-3 py-2.5">
                         <p className="text-xs text-emerald-700">
-                            ✅ Aucun coût pour vous — Meta facture directement sur votre compte WABA
+                            ✅ Gratuit pour vous — Meta facture directement votre compte WhatsApp Business
                         </p>
                     </div>
-                    <div className="mt-3 grid grid-cols-2 gap-2 text-sm">
-                        <div className="text-slate-500">Appels IA total</div>
-                        <div className="text-right font-semibold text-slate-700">{summary.ai.totalCalls.toLocaleString('fr-FR')}</div>
-                        <div className="text-slate-500">Tokens entrants</div>
-                        <div className="text-right font-semibold text-slate-700">{(summary.ai.tokensIn / 1000).toFixed(1)}K</div>
-                        <div className="text-slate-500">Tokens sortants</div>
-                        <div className="text-right font-semibold text-slate-700">{(summary.ai.tokensOut / 1000).toFixed(1)}K</div>
-                    </div>
                 </div>
             </div>
 
-            {/* Bar chart — last 30 days */}
+            {/* Graphique activité 30 jours */}
             <div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
-                <div className="flex items-center gap-2 mb-4">
+                <div className="flex items-center gap-2 mb-1">
                     <TrendingUp className="w-4 h-4 text-slate-400" />
                     <h2 className="text-sm font-semibold text-slate-700">Activité des 30 derniers jours</h2>
                 </div>
+                <p className="text-xs text-slate-400 mb-4">Chaque barre = nombre de messages IA + WhatsApp ce jour-là</p>
                 {history.length === 0 ? (
-                    <p className="text-slate-400 text-sm text-center py-8">Aucune donnée pour cette période</p>
+                    <p className="text-slate-400 text-sm text-center py-8">Aucune activité sur cette période</p>
                 ) : (
                     <div className="flex items-end gap-1 h-28 overflow-x-auto pb-2">
                         {history.map(day => {
@@ -404,38 +421,35 @@ export default function BillingPage() {
                             return (
                                 <div key={day.date} className="flex flex-col items-center gap-1 flex-1 min-w-[24px] group relative">
                                     <div
-                                        className="w-full rounded-t-sm bg-indigo-400 group-hover:bg-indigo-600 transition-colors cursor-pointer"
+                                        className="w-full rounded-t-sm bg-indigo-300 group-hover:bg-indigo-500 transition-colors cursor-pointer"
                                         style={{ height: `${Math.max(heightPct, 2)}%` }}
-                                        title={`${dateLabel} — IA: ${day.aiCalls} | WA: ${day.whatsappMessages} | ${day.costFcfa} FCFA`}
+                                        title={`${dateLabel} — IA: ${day.aiCalls} msg | WA: ${day.whatsappMessages} msg`}
                                     />
                                 </div>
                             );
                         })}
                     </div>
                 )}
-                <div className="flex gap-4 mt-3 text-xs text-slate-400">
-                    <span className="flex items-center gap-1"><span className="w-3 h-3 bg-indigo-400 rounded-sm inline-block" /> Appels IA + Messages WA</span>
-                </div>
             </div>
 
-            {/* Feature breakdown */}
+            {/* Répartition par fonctionnalité */}
             {breakdown.length > 0 && (
                 <div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
-                    <h2 className="text-sm font-semibold text-slate-700 mb-4">Répartition par fonctionnalité (ce mois)</h2>
-                    <div className="space-y-2">
-                        {breakdown.slice(0, 6).map(item => {
+                    <h2 className="text-sm font-semibold text-slate-700 mb-1">Où vont vos crédits IA ?</h2>
+                    <p className="text-xs text-slate-400 mb-4">Répartition de l'utilisation par type de message ce mois</p>
+                    <div className="space-y-3">
+                        {breakdown.slice(0, 5).map(item => {
                             const totalCalls = breakdown.reduce((s, i) => s + i.calls, 0);
                             const pct = totalCalls > 0 ? Math.round((item.calls / totalCalls) * 100) : 0;
                             return (
-                                <div key={`${item.feature}-${item.type}`} className="flex items-center gap-3">
-                                    <span className="text-sm text-slate-600 w-44 flex-shrink-0">
+                                <div key={item.feature} className="flex items-center gap-3">
+                                    <span className="text-sm text-slate-600 w-48 flex-shrink-0 truncate">
                                         {FEATURE_LABELS[item.feature] ?? item.feature}
                                     </span>
-                                    <div className="flex-1 bg-slate-100 rounded-full h-2">
-                                        <div className="h-2 rounded-full bg-indigo-400" style={{ width: `${pct}%` }} />
+                                    <div className="flex-1 bg-slate-100 rounded-full h-2.5">
+                                        <div className="h-2.5 rounded-full bg-indigo-400" style={{ width: `${pct}%` }} />
                                     </div>
-                                    <span className="text-xs text-slate-400 w-8 text-right">{pct}%</span>
-                                    <span className="text-xs text-slate-500 w-24 text-right">{item.calls} appels</span>
+                                    <span className="text-sm font-semibold text-slate-700 w-10 text-right">{pct}%</span>
                                 </div>
                             );
                         })}
@@ -443,76 +457,85 @@ export default function BillingPage() {
                 </div>
             )}
 
-            {/* Wallet transactions */}
+            {/* Historique des transactions — simplifié */}
             {wallet && wallet.transactions.length > 0 && (
                 <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                     <div className="px-6 py-4 border-b border-slate-100">
-                        <h2 className="text-sm font-semibold text-slate-700">Dernières transactions wallet</h2>
+                        <h2 className="text-sm font-semibold text-slate-700">Derniers mouvements de crédits</h2>
+                        <p className="text-xs text-slate-400 mt-0.5">Les 20 dernières opérations sur votre solde</p>
                     </div>
-                    <div className="overflow-x-auto">
-                        <table className="w-full text-sm">
-                            <thead>
-                                <tr className="border-b border-slate-100 text-xs text-slate-400 uppercase">
-                                    <th className="px-6 py-3 text-left font-semibold">Date</th>
-                                    <th className="px-6 py-3 text-left font-semibold">Type</th>
-                                    <th className="px-6 py-3 text-left font-semibold">Description</th>
-                                    <th className="px-6 py-3 text-right font-semibold">Montant</th>
-                                    <th className="px-6 py-3 text-right font-semibold">Solde après</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {wallet.transactions.map(tx => {
-                                    const isCredit = tx.amount > 0;
-                                    const typeLabels: Record<string, string> = {
-                                        TOP_UP_MANUAL: '➕ Recharge manuelle',
-                                        TOP_UP_PAYMENT: '➕ Paiement',
-                                        ADJUSTMENT: '🔧 Ajustement',
-                                        DEBIT_AI: '🤖 IA',
-                                        DEBIT_WHATSAPP: '💬 WhatsApp',
-                                        DEBIT_BROADCAST: '📣 Broadcast',
-                                    };
-                                    return (
-                                        <tr key={tx.id} className="border-b border-slate-50 hover:bg-slate-50 transition-colors">
-                                            <td className="px-6 py-3 text-slate-500 whitespace-nowrap">
-                                                {new Date(tx.createdAt).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
-                                            </td>
-                                            <td className="px-6 py-3 text-slate-600 whitespace-nowrap">
-                                                {typeLabels[tx.type] ?? tx.type}
-                                                {tx.byok && <span className="ml-1 text-xs text-slate-400">(BYOK)</span>}
-                                            </td>
-                                            <td className="px-6 py-3 text-slate-500 max-w-[200px] truncate">
-                                                {tx.description ?? '—'}
-                                            </td>
-                                            <td className={`px-6 py-3 text-right font-mono font-semibold whitespace-nowrap ${isCredit ? 'text-emerald-600' : 'text-slate-700'}`}>
-                                                {isCredit ? '+' : ''}{tx.amount.toLocaleString('fr-FR')} cr
-                                            </td>
-                                            <td className="px-6 py-3 text-right font-mono text-slate-500 whitespace-nowrap">
-                                                {tx.balanceAfter >= 0 ? tx.balanceAfter.toLocaleString('fr-FR') : '—'}
-                                            </td>
-                                        </tr>
-                                    );
-                                })}
-                            </tbody>
-                        </table>
+                    <div className="divide-y divide-slate-50">
+                        {wallet.transactions.filter(tx => !tx.byok).map(tx => {
+                            const isCredit = tx.amount > 0;
+                            return (
+                                <div key={tx.id} className="flex items-center justify-between px-6 py-3 hover:bg-slate-50 transition-colors">
+                                    <div className="flex items-center gap-3 min-w-0">
+                                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0 ${isCredit ? 'bg-emerald-100' : 'bg-slate-100'}`}>
+                                            {isCredit ? '➕' : '▪️'}
+                                        </div>
+                                        <div className="min-w-0">
+                                            <p className="text-sm font-medium text-slate-700 truncate">
+                                                {TX_LABELS[tx.type] ?? tx.type}
+                                            </p>
+                                            <p className="text-xs text-slate-400">
+                                                {new Date(tx.createdAt).toLocaleDateString('fr-FR', {
+                                                    day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit'
+                                                })}
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="text-right ml-4 flex-shrink-0">
+                                        <p className={`text-sm font-bold ${isCredit ? 'text-emerald-600' : 'text-slate-700'}`}>
+                                            {isCredit ? '+' : ''}{tx.amount.toLocaleString('fr-FR')} cr
+                                        </p>
+                                        <p className="text-xs text-slate-400">
+                                            Solde : {tx.balanceAfter >= 0 ? tx.balanceAfter.toLocaleString('fr-FR') : '—'}
+                                        </p>
+                                    </div>
+                                </div>
+                            );
+                        })}
                     </div>
                 </div>
             )}
 
-            {/* AI Chat Widget */}
-            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
-                <div className="px-6 py-4 border-b border-slate-100 bg-slate-50">
-                    <h2 className="text-sm font-semibold text-slate-700">💬 Pose une question sur ta facturation</h2>
-                    <p className="text-xs text-slate-400 mt-0.5">Exemples : "Combien j'ai dépensé cette semaine ?" · "Quelle fonctionnalité consomme le plus ?"</p>
+            {/* Assistant IA facturation */}
+            <div className="bg-white rounded-2xl border border-indigo-100 shadow-sm overflow-hidden">
+                <div className="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-indigo-50 to-white">
+                    <div className="flex items-center gap-2">
+                        <HelpCircle className="w-4 h-4 text-indigo-500" />
+                        <h2 className="text-sm font-bold text-slate-800">Posez une question sur votre consommation</h2>
+                    </div>
+                    <p className="text-xs text-slate-400 mt-0.5">Réponses basées sur vos vraies données · en français</p>
                 </div>
 
-                {/* Chat messages */}
-                <div className="p-4 space-y-3 max-h-64 overflow-y-auto">
+                {/* Questions suggérées */}
+                {chatMessages.length === 0 && (
+                    <div className="px-4 pt-4 flex flex-wrap gap-2">
+                        {QUICK_QUESTIONS.map(q => (
+                            <button
+                                key={q}
+                                onClick={() => sendChat(q)}
+                                disabled={chatLoading}
+                                className="text-xs px-3 py-1.5 bg-slate-100 hover:bg-indigo-100 hover:text-indigo-700 text-slate-600 rounded-full transition-colors border border-transparent hover:border-indigo-200"
+                            >
+                                {q}
+                            </button>
+                        ))}
+                    </div>
+                )}
+
+                {/* Messages */}
+                <div className="p-4 space-y-3 max-h-72 overflow-y-auto">
                     {chatMessages.length === 0 && (
-                        <p className="text-slate-300 text-sm text-center py-4">Aucune question posée pour l'instant</p>
+                        <p className="text-slate-300 text-sm text-center py-6">
+                            <Flame className="w-8 h-8 mx-auto mb-2 text-slate-200" />
+                            Cliquez sur une question ci-dessus ou écrivez la vôtre
+                        </p>
                     )}
                     {chatMessages.map((msg, i) => (
                         <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-                            <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl text-sm leading-relaxed ${
+                            <div className={`max-w-xs lg:max-w-md px-4 py-2.5 rounded-2xl text-sm leading-relaxed whitespace-pre-wrap ${
                                 msg.role === 'user'
                                     ? 'bg-indigo-600 text-white rounded-br-sm'
                                     : 'bg-slate-100 text-slate-800 rounded-bl-sm'
@@ -523,8 +546,10 @@ export default function BillingPage() {
                     ))}
                     {chatLoading && (
                         <div className="flex justify-start">
-                            <div className="bg-slate-100 px-4 py-2 rounded-2xl rounded-bl-sm">
-                                <Loader2 className="w-4 h-4 animate-spin text-slate-400" />
+                            <div className="bg-slate-100 px-4 py-3 rounded-2xl rounded-bl-sm flex items-center gap-1.5">
+                                <span className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                                <span className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                                <span className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
                             </div>
                         </div>
                     )}
@@ -538,14 +563,14 @@ export default function BillingPage() {
                         value={chatInput}
                         onChange={e => setChatInput(e.target.value)}
                         onKeyDown={e => e.key === 'Enter' && sendChat()}
-                        placeholder="Pose ta question..."
-                        className="flex-1 text-sm border border-slate-200 rounded-xl px-4 py-2 outline-none focus:ring-2 focus:ring-indigo-300"
+                        placeholder="Ex: Combien de crédits ai-je utilisé cette semaine ?"
+                        className="flex-1 text-sm border border-slate-200 rounded-xl px-4 py-2.5 outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-300"
                         disabled={chatLoading}
                     />
                     <button
-                        onClick={sendChat}
+                        onClick={() => sendChat()}
                         disabled={!chatInput.trim() || chatLoading}
-                        className="bg-indigo-600 hover:bg-indigo-700 disabled:opacity-40 text-white rounded-xl px-4 py-2 flex items-center gap-1 text-sm font-medium transition-colors"
+                        className="bg-indigo-600 hover:bg-indigo-700 disabled:opacity-40 text-white rounded-xl px-4 py-2.5 flex items-center gap-1 text-sm font-medium transition-colors"
                     >
                         <Send className="w-4 h-4" />
                     </button>

apps/api/src/routes/billing.ts

@@ -144,53 +144,91 @@ export async function billingRoutes(fastify: FastifyInstance) {
         const { question, language = 'FR' } = req.body;
         if (!question?.trim()) return reply.code(400).send({ error: 'Question is required' });
 
-        // Fetch context
+        // Fetch context (org + wallet)
         const org = await prisma.organization.findUnique({
             where: { id: organizationId },
-            select: { name: true, subscriptionPlan: true, aiCreditsUsed: true, aiCreditsLimit: true, whatsappMessagesSent: true, billingPeriodStart: true }
+            select: {
+                name: true, subscriptionPlan: true,
+                aiCreditsUsed: true, aiCreditsLimit: true,
+                whatsappMessagesSent: true, billingPeriodStart: true,
+                walletBalance: true, isHardStopped: true,
+            }
         });
         if (!org) return reply.code(404).send({ error: 'Organization not found' });
 
         const periodStart = org.billingPeriodStart ?? new Date(new Date().getFullYear(), new Date().getMonth(), 1);
-        const costAgg = await prisma.usageEvent.aggregate({
-            where: { organizationId, createdAt: { gte: periodStart } },
-            _sum: { costUsd: true },
-            _count: { id: true },
-        });
-
-        const week = new Date(); week.setDate(week.getDate() - 7);
-        const weekAgg = await prisma.usageEvent.aggregate({
-            where: { organizationId, createdAt: { gte: week }, type: { not: 'WHATSAPP_SENT' } },
-            _sum: { costUsd: true },
-            _count: { id: true },
-        });
 
-        const breakdown = await prisma.usageEvent.groupBy({
-            by: ['feature'],
-            where: { organizationId, createdAt: { gte: periodStart }, type: { not: 'WHATSAPP_SENT' } },
-            _count: { id: true },
-            orderBy: { _count: { id: 'desc' } },
-        });
+        const [costAgg, weekAgg, breakdown, recentDebits] = await Promise.all([
+            prisma.usageEvent.aggregate({
+                where: { organizationId, createdAt: { gte: periodStart } },
+                _sum: { costUsd: true },
+                _count: { id: true },
+            }),
+            prisma.usageEvent.aggregate({
+                where: { organizationId, type: { not: 'WHATSAPP_SENT' }, createdAt: { gte: new Date(Date.now() - 7 * 86_400_000) } },
+                _sum: { costUsd: true },
+                _count: true,
+            }),
+            prisma.usageEvent.groupBy({
+                by: ['feature'],
+                where: { organizationId, createdAt: { gte: periodStart }, type: { not: 'WHATSAPP_SENT' } },
+                _count: { id: true },
+                orderBy: { _count: { id: 'desc' } },
+            }),
+            // Last 7 days of wallet debits to estimate burn rate
+            prisma.walletTransaction.aggregate({
+                where: {
+                    organizationId,
+                    amount: { lt: 0 },
+                    createdAt: { gte: new Date(Date.now() - 7 * 86_400_000) },
+                },
+                _sum: { amount: true },
+            }),
+        ]);
 
         const topFeature = breakdown[0]?.feature ?? 'FEEDBACK';
         const topFeaturePct = breakdown[0] && costAgg._count.id > 0
             ? Math.round((breakdown[0]._count.id / costAgg._count.id) * 100)
             : 0;
 
+        const featureLabels: Record<string, string> = {
+            LESSON: 'Leçons', FEEDBACK: 'Feedbacks exercices', DEEPDIVE: 'Approfondissements',
+            TRANSCRIPTION: 'Transcriptions audio', IMAGE_ANALYSIS: 'Analyses image',
+            CAMPAIGN: 'Campagnes', ONBOARDING: 'Onboarding', OTHER: 'Autres',
+        };
+
+        // Burn rate: average daily wallet debit over last 7 days
+        const weeklyDebit = Math.abs(recentDebits._sum.amount ?? 0);
+        const dailyBurn = weeklyDebit / 7;
+        const daysRemaining = dailyBurn > 0 ? Math.floor(org.walletBalance / dailyBurn) : null;
+        const burnInfo = daysRemaining !== null
+            ? `À ce rythme (${Math.round(dailyBurn)} crédits/jour), le solde durera encore environ ${daysRemaining} jour(s).`
+            : 'Aucune consommation récente détectée.';
+
+        const walletStatus = org.isHardStopped
+            ? 'SERVICE SUSPENDU (solde épuisé)'
+            : org.walletBalance <= 200
+            ? `Solde bas (${org.walletBalance} crédits)`
+            : `Actif (${org.walletBalance} crédits)`;
+
         const context = `Organisation: ${org.name}
 Plan: ${org.subscriptionPlan}
 Période actuelle: depuis le ${periodStart.toLocaleDateString('fr-FR')}
-Crédits IA utilisés: ${org.aiCreditsUsed} / ${org.aiCreditsLimit}
-Appels IA ce mois: ${costAgg._count.id}
-Coût IA ce mois: ${Math.round((costAgg._sum.costUsd ?? 0) * 600)} FCFA ($${((costAgg._sum.costUsd ?? 0)).toFixed(4)})
-Appels IA cette semaine: ${weekAgg._count.id}
-Coût IA cette semaine: ${Math.round((weekAgg._sum.costUsd ?? 0) * 600)} FCFA
-Messages WhatsApp envoyés ce mois: ${org.whatsappMessagesSent}
-Feature la plus consommatrice: ${topFeature} (${topFeaturePct}% des appels)`;
+--- SOLDE DE CRÉDITS ---
+Statut: ${walletStatus}
+Crédits disponibles: ${org.walletBalance} (1 crédit = 10 FCFA)
+Projection: ${burnInfo}
+--- UTILISATION CE MOIS ---
+Appels IA: ${costAgg._count.id}
+Messages WhatsApp envoyés: ${org.whatsappMessagesSent}
+Fonctionnalité la plus utilisée: ${featureLabels[topFeature] ?? topFeature} (${topFeaturePct}% des appels)
+--- UTILISATION CETTE SEMAINE ---
+Appels IA: ${typeof weekAgg._count === 'number' ? weekAgg._count : (weekAgg._count as any)?.id ?? 0}
+Crédits consommés: ${weeklyDebit} crédits (= ${weeklyDebit * 10} FCFA)`;
 
         const systemPrompt = language === 'FR'
-            ? `Tu es un assistant facturation pour la plateforme Welfin/Xamlé. Tu aides les administrateurs à comprendre leur consommation IA et WhatsApp. Réponds de façon simple, concrète, en français. Utilise les données ci-dessous. Ne fais pas de suppositions au-delà des données fournies.`
-            : `You are a billing assistant for the Welfin/Xamlé platform. Help administrators understand their AI and WhatsApp usage. Reply simply and concretely in English. Use the data below. Do not assume beyond the data provided.`;
+            ? `Tu es un assistant facturation pour la plateforme Xamlé. Tu aides des administrateurs non-techniques à comprendre leur consommation et leur solde de crédits. Réponds de façon simple, concrète et rassurante, en français. Évite tout jargon technique (tokens, API, etc.). Utilise uniquement les données ci-dessous. Si tu ne sais pas, dis-le clairement.`
+            : `You are a billing assistant for the Xamlé platform. Help non-technical administrators understand their credit balance and usage. Reply simply and concretely in English. Avoid technical jargon. Use only the data below. If you don't know, say so clearly.`;
 
         try {
             const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });