ux: clear messages for tenant selection in admin dashboard

apps/admin/src/pages/DashboardPage.tsx

@@ -1,18 +1,29 @@
 import { useEffect, useState } from 'react';
-import { Users, PlayCircle, CheckCircle, Lightbulb, DollarSign, Download } from 'lucide-react';
+import { Users, PlayCircle, CheckCircle, Lightbulb, DollarSign, Download, Building2, Loader2 } from 'lucide-react';
 import { useAuth } from '../lib/auth';
+import { useTenant } from '../lib/tenant';
 import { API_URL } from '../lib/api';
 
 export default function DashboardPage() {
     const { apiKey, logout } = useAuth();
+    const { selectedOrgId } = useTenant();
     const [stats, setStats] = useState<any>(null);
     const [enrollments, setEnrollments] = useState<any[]>([]);
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
+        if (!selectedOrgId) {
+            setLoading(false);
+            return;
+        }
+
         (async () => {
+            setLoading(true);
             try {
-                const h = { 'Authorization': `Bearer ${apiKey}` };
+                const h = { 
+                    'Authorization': `Bearer ${apiKey}`,
+                    'x-organization-id': selectedOrgId
+                };
                 const [sRes, eRes] = await Promise.all([
                     fetch(`${API_URL}/v1/admin/stats`, { headers: h }),
                     fetch(`${API_URL}/v1/admin/enrollments`, { headers: h })
@@ -22,7 +33,7 @@ export default function DashboardPage() {
                 setEnrollments(await eRes.json());
             } finally { setLoading(false); }
         })();
-    }, [apiKey, logout]);
+    }, [apiKey, logout, selectedOrgId]);
 
     const exportCSV = () => {
         if (!enrollments.length) return alert('Aucune inscription.');
@@ -34,7 +45,29 @@ export default function DashboardPage() {
         a.click();
     };
 
-    if (loading) return <div className="p-8 text-slate-400">Chargement...</div>;
+    if (!selectedOrgId) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[80vh] text-slate-400">
+                <Building2 className="w-16 h-16 mb-6 opacity-20" />
+                <h2 className="text-2xl font-bold text-slate-900">Bienvenue sur EdTech Admin</h2>
+                <p className="max-w-md text-center mt-3 text-lg">
+                    Pour commencer, veuillez sélectionner une **organisation** dans le menu déroulant à gauche.
+                </p>
+                <div className="mt-8 p-4 bg-blue-50 text-blue-700 rounded-2xl text-sm font-medium border border-blue-100">
+                    💡 L'isolation des données garantit que vous ne voyez que les statistiques de l'organisation active.
+                </div>
+            </div>
+        );
+    }
+
+    if (loading) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[80vh] text-slate-400">
+                <Loader2 className="w-10 h-10 animate-spin mb-4 text-slate-900" />
+                <p className="text-lg font-medium">Analyse des données en cours...</p>
+            </div>
+        );
+    }
 
     const statCards = [
         { icon: <Users className="w-6 h-6 text-slate-400" />, label: 'Utilisateurs', value: stats?.totalUsers || 0, color: 'text-slate-900' },

apps/admin/src/pages/TrackListPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { BookOpen, Plus, Edit2, Trash2, ChevronRight } from 'lucide-react';
+import { BookOpen, Plus, Edit2, Trash2, ChevronRight, Building2 } from 'lucide-react';
 import { useAuth } from '../lib/auth';
 import { useTenant } from '../lib/tenant';
 import { API_URL } from '../lib/api';
@@ -36,7 +36,24 @@ export default function TrackListPage() {
         load(); 
     };
 
-    if (loading) return <div className="p-8 text-slate-400">Chargement...</div>;
+    if (!selectedOrgId) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[60vh] text-slate-400">
+                <Building2 className="w-12 h-12 mb-4 opacity-20" />
+                <h3 className="text-lg font-bold text-slate-900">Aucune organisation sélectionnée</h3>
+                <p className="max-w-xs text-center mt-2">Veuillez sélectionner une organisation dans le menu en haut à gauche pour voir ses parcours.</p>
+            </div>
+        );
+    }
+
+    if (loading) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[60vh] text-slate-400">
+                <div className="w-8 h-8 border-4 border-slate-200 border-t-slate-900 rounded-full animate-spin mb-4"></div>
+                <p>Chargement des parcours...</p>
+            </div>
+        );
+    }
 
     return (
         <div className="p-8">

apps/admin/src/pages/UserListPage.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
-import { X } from 'lucide-react';
+import { X, Building2, Loader2 } from 'lucide-react';
 import { useAuth } from '../lib/auth';
+import { useTenant } from '../lib/tenant';
 import { API_URL } from '../lib/api';
 
 export default function UserListPage() {
     const { apiKey } = useAuth();
+    const { selectedOrgId } = useTenant();
     const [users, setUsers] = useState<any[]>([]); 
     const [total, setTotal] = useState(0); 
     const [loading, setLoading] = useState(true);
@@ -12,9 +14,18 @@ export default function UserListPage() {
     const [messages, setMessages] = useState<any[]>([]); 
     const [loadingMsg, setLoadingMsg] = useState(false);
 
-    const ah = (k: string) => ({ 'Authorization': `Bearer ${k}`, 'Content-Type': 'application/json' });
+    const ah = (k: string) => ({ 
+        'Authorization': `Bearer ${k}`, 
+        'Content-Type': 'application/json',
+        ...(selectedOrgId ? { 'x-organization-id': selectedOrgId } : {})
+    });
 
     useEffect(() => { 
+        if (!selectedOrgId) {
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
         fetch(`${API_URL}/v1/admin/users`, { headers: ah(apiKey!) })
             .then(r => r.json())
             .then(d => { 
@@ -22,7 +33,7 @@ export default function UserListPage() {
                 setTotal(d.total || 0); 
                 setLoading(false); 
             }); 
-    }, [apiKey]);
+    }, [apiKey, selectedOrgId]);
 
     const viewMessages = async (userId: string) => {
         setLoadingMsg(true); 
@@ -39,7 +50,24 @@ export default function UserListPage() {
         }
     };
 
-    if (loading) return <div className="p-8 text-slate-400">Chargement...</div>;
+    if (!selectedOrgId) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[60vh] text-slate-400">
+                <Building2 className="w-12 h-12 mb-4 opacity-20" />
+                <h3 className="text-lg font-bold text-slate-900">Aucune organisation sélectionnée</h3>
+                <p className="max-w-xs text-center mt-2">Sélectionnez une organisation pour gérer ses utilisateurs.</p>
+            </div>
+        );
+    }
+
+    if (loading) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[60vh] text-slate-400">
+                <Loader2 className="w-8 h-8 animate-spin mb-4 text-slate-900" />
+                <p>Chargement des utilisateurs...</p>
+            </div>
+        );
+    }
 
     return (
         <div className="p-8">