refactor: extract shell and sidebar to MainLayout

- Improved component modularity by separating layout from routing
- Cleaned up App.tsx (removed unused imports and complex UI logic)
- Standardized navigation and organization selection in a dedicated Layout

apps/admin/src/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
-import { Users, BookOpen, Lightbulb, BarChart2, Mic, Activity, Building2, TrendingUp } from 'lucide-react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 
 import { AuthProvider, useAuth } from './lib/auth';
 import { TenantProvider } from './lib/tenant';
@@ -24,6 +23,8 @@ import CrmConversationalDashboard from './pages/CrmConversationalDashboard'; //
 import { useTenant } from './lib/tenant';
 import { api } from './lib/api';
 
+import MainLayout from './components/layouts/MainLayout';
+
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
     const { token } = useAuth();
     if (!token) return <Navigate to="/login" replace />;
@@ -31,8 +32,8 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
 }
 
 function AppShell() {
-    const { logout, token, user } = useAuth();
-    const { selectedOrgId, setSelectedOrgId, currentOrg } = useTenant();
+    const { token, user } = useAuth();
+    const { setSelectedOrgId, currentOrg } = useTenant();
     const [orgs, setOrgs] = React.useState<any[]>([]);
 
     const isSuperAdmin = user?.role === 'SUPER_ADMIN' || user?.role === 'ADMIN';
@@ -53,114 +54,41 @@ function AppShell() {
 
     const isCrmMode = currentOrg?.useCase === 'CRM_WHATSAPP';
 
-    const allNavItems = [
-        { to: '/', label: 'Dashboard', icon: <BarChart2 className="w-4 h-4" /> },
-        { to: '/analytics', label: 'Statistiques', icon: <TrendingUp className="w-4 h-4 text-amber-500" /> },
-        { to: '/contacts', label: 'Clients', icon: <Users className="w-4 h-4 text-blue-400" />, show: isCrmMode },
-        { to: '/content', label: 'Parcours', icon: <BookOpen className="w-4 h-4" />, show: !isCrmMode },
-        { to: '/live-feed', label: 'Modération', icon: <Mic className="w-4 h-4 text-emerald-500" />, show: !isCrmMode },
-        { to: '/clients', label: 'Clients B2B', icon: <Building2 className="w-4 h-4 text-indigo-400" />, superOnly: true, show: !isCrmMode },
-        { to: '/training', label: 'Training Lab', icon: <Activity className="w-4 h-4 text-purple-400" />, superOnly: true, show: !isCrmMode },
-        { to: '/users', label: 'Utilisateurs', icon: <Users className="w-4 h-4" />, show: !isCrmMode },
-        { to: '/settings', label: 'Paramètres', icon: <Lightbulb className="w-4 h-4" /> },
-    ];
-
-    const navItems = allNavItems.filter(item => {
-        if (item.superOnly && !isSuperAdmin) return false;
-        if (item.show === false) return false;
-        return true;
-    });
-    
     return (
-        <div className="min-h-screen bg-gray-50 flex">
-            <aside className="w-64 bg-slate-900 text-white p-6 flex flex-col shrink-0">
-                <div className="text-xl font-bold mb-8 flex items-center gap-3">
-                    {currentOrg?.brandingData?.logoUrl ? (
-                        <img src={currentOrg.brandingData.logoUrl} className="h-8 w-8 object-contain" alt="Logo" />
-                    ) : (
-                        <span className="text-2xl">🎓</span>
-                    )}
-                    <span className="truncate">{currentOrg?.name || 'EdTech Admin'}</span>
-                </div>
-                
-                {isSuperAdmin && (
-                    <div className="mb-8">
-                        <label className="block text-[10px] uppercase font-bold text-slate-500 tracking-wider mb-2">Gestion Multi-Tenant</label>
-                        <select 
-                            value={selectedOrgId || ''} 
-                            onChange={e => setSelectedOrgId(e.target.value)}
-                            className="w-full bg-slate-800 text-slate-200 text-xs px-3 py-2.5 rounded-xl outline-none focus:ring-1 focus:ring-slate-600 appearance-none cursor-pointer"
-                        >
-                            <option value="">Sélectionner une école...</option>
-                            {orgs.map(o => (
-                                <option key={o.id} value={o.id}>{o.name}</option>
-                            ))}
-                        </select>
-                    </div>
-                )}
-
-                <nav className="space-y-1 flex-1">
-                    {navItems.map(n => (
-                        <Link 
-                            key={n.to} 
-                            to={n.to} 
-                            className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-slate-300 hover:text-white hover:bg-white/10 transition"
-                        >
-                            {n.icon}{n.label}
-                        </Link>
-                    ))}
-                </nav>
-                
-                <div className="pt-6 mt-6 border-t border-slate-800">
-                    <div className="flex items-center gap-3 px-4 mb-4">
-                        <div className="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center font-bold text-xs">
-                            {user?.name?.[0] || 'U'}
-                        </div>
-                        <div className="flex-1 min-w-0">
-                            <p className="text-sm font-bold truncate">{user?.name}</p>
-                            <p className="text-[10px] text-slate-500 truncate capitalize">{user?.role?.toLowerCase()}</p>
-                        </div>
-                    </div>
-                    <button onClick={logout} className="w-full flex items-center gap-3 px-4 py-2 text-xs text-slate-500 hover:text-white transition">
-                        🔓 Se déconnecter
-                    </button>
-                </div>
-            </aside>
-            <main className="flex-1 overflow-auto">
-                <Routes>
-                    <Route 
-                        path="/" 
-                        element={
-                            isCrmMode 
-                            ? <CrmConversationalDashboard /> 
-                            : <DashboardPage />
-                        } 
-                    />
-                    <Route path="/analytics" element={<AnalyticsPage />} />
-                    <Route 
-                        path="/crm" 
-                        element={
-                            isCrmMode 
-                            ? <CrmConversationalDashboard /> 
-                            : <ConversationalDashboard />
-                        } 
-                    />
-                    <Route path="/contacts" element={<ContactsPage />} />
-                    <Route path="/content" element={<TrackListPage />} />
-                    <Route path="/content/new" element={<TrackFormPage />} />
-                    <Route path="/content/:id" element={<TrackFormPage />} />
-                    <Route path="/content/:trackId/days" element={<TrackDaysPage />} />
-                    <Route path="/live-feed" element={<LiveFeed />} />
-                    <Route path="/ai-setup" element={<AIAgentSetup />} />
-                    <Route path="/clients" element={<ClientsManagementView />} />
-                    <Route path="/training" element={<TrainingLab />} />
-                    <Route path="/users" element={<UserListPage />} />
-                    <Route path="/settings" element={<SettingsPage />} />
-                    <Route path="/onboarding" element={<OnboardingWizard />} />
-                    <Route path="/reset-password" element={<div className="p-8">Page de réinitialisation (À implémenter)</div>} />
-                </Routes>
-            </main>
-        </div>
+        <MainLayout isSuperAdmin={isSuperAdmin} orgs={orgs}>
+            <Routes>
+                <Route 
+                    path="/" 
+                    element={
+                        isCrmMode 
+                        ? <CrmConversationalDashboard /> 
+                        : <DashboardPage />
+                    } 
+                />
+                <Route path="/analytics" element={<AnalyticsPage />} />
+                <Route 
+                    path="/crm" 
+                    element={
+                        isCrmMode 
+                        ? <CrmConversationalDashboard /> 
+                        : <ConversationalDashboard />
+                    } 
+                />
+                <Route path="/contacts" element={<ContactsPage />} />
+                <Route path="/content" element={<TrackListPage />} />
+                <Route path="/content/new" element={<TrackFormPage />} />
+                <Route path="/content/:id" element={<TrackFormPage />} />
+                <Route path="/content/:trackId/days" element={<TrackDaysPage />} />
+                <Route path="/live-feed" element={<LiveFeed />} />
+                <Route path="/ai-setup" element={<AIAgentSetup />} />
+                <Route path="/clients" element={<ClientsManagementView />} />
+                <Route path="/training" element={<TrainingLab />} />
+                <Route path="/users" element={<UserListPage />} />
+                <Route path="/settings" element={<SettingsPage />} />
+                <Route path="/onboarding" element={<OnboardingWizard />} />
+                <Route path="/reset-password" element={<div className="p-8">Page de réinitialisation (À implémenter)</div>} />
+            </Routes>
+        </MainLayout>
     );
 }
 

apps/admin/src/components/layouts/MainLayout.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../../lib/auth';
+import { useTenant } from '../../lib/tenant';
+import { BarChart2, TrendingUp, Users, BookOpen, Mic, Building2, Activity, Lightbulb } from 'lucide-react';
+
+interface MainLayoutProps {
+    children: React.ReactNode;
+    isSuperAdmin: boolean;
+    orgs: any[];
+}
+
+export default function MainLayout({ children, isSuperAdmin, orgs }: MainLayoutProps) {
+    const { logout, user } = useAuth();
+    const { selectedOrgId, setSelectedOrgId, currentOrg } = useTenant();
+
+    const isCrmMode = currentOrg?.useCase === 'CRM_WHATSAPP';
+
+    const allNavItems = [
+        { to: '/', label: 'Dashboard', icon: <BarChart2 className="w-4 h-4" /> },
+        { to: '/analytics', label: 'Statistiques', icon: <TrendingUp className="w-4 h-4 text-amber-500" /> },
+        { to: '/contacts', label: 'Clients', icon: <Users className="w-4 h-4 text-blue-400" />, show: isCrmMode },
+        { to: '/content', label: 'Parcours', icon: <BookOpen className="w-4 h-4" />, show: !isCrmMode },
+        { to: '/live-feed', label: 'Modération', icon: <Mic className="w-4 h-4 text-emerald-500" />, show: !isCrmMode },
+        { to: '/clients', label: 'Clients B2B', icon: <Building2 className="w-4 h-4 text-indigo-400" />, superOnly: true, show: !isCrmMode },
+        { to: '/training', label: 'Training Lab', icon: <Activity className="w-4 h-4 text-purple-400" />, superOnly: true, show: !isCrmMode },
+        { to: '/users', label: 'Utilisateurs', icon: <Users className="w-4 h-4" />, show: !isCrmMode },
+        { to: '/settings', label: 'Paramètres', icon: <Lightbulb className="w-4 h-4" /> },
+    ];
+
+    const navItems = allNavItems.filter(item => {
+        if (item.superOnly && !isSuperAdmin) return false;
+        if (item.show === false) return false;
+        return true;
+    });
+
+    return (
+        <div className="min-h-screen bg-gray-50 flex">
+            <aside className="w-64 bg-slate-900 text-white p-6 flex flex-col shrink-0">
+                <div className="text-xl font-bold mb-8 flex items-center gap-3">
+                    {currentOrg?.brandingData?.logoUrl ? (
+                        <img src={currentOrg.brandingData.logoUrl} className="h-8 w-8 object-contain" alt="Logo" />
+                    ) : (
+                        <span className="text-2xl">🎓</span>
+                    )}
+                    <span className="truncate">{currentOrg?.name || 'EdTech Admin'}</span>
+                </div>
+                
+                {isSuperAdmin && (
+                    <div className="mb-8">
+                        <label className="block text-[10px] uppercase font-bold text-slate-500 tracking-wider mb-2">Gestion Multi-Tenant</label>
+                        <select 
+                            value={selectedOrgId || ''} 
+                            onChange={e => setSelectedOrgId(e.target.value)}
+                            className="w-full bg-slate-800 text-slate-200 text-xs px-3 py-2.5 rounded-xl outline-none focus:ring-1 focus:ring-slate-600 appearance-none cursor-pointer"
+                        >
+                            <option value="">Sélectionner une école...</option>
+                            {orgs.map(o => (
+                                <option key={o.id} value={o.id}>{o.name}</option>
+                            ))}
+                        </select>
+                    </div>
+                )}
+
+                <nav className="space-y-1 flex-1">
+                    {navItems.map(n => (
+                        <Link 
+                            key={n.to} 
+                            to={n.to} 
+                            className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-slate-300 hover:text-white hover:bg-white/10 transition"
+                        >
+                            {n.icon}{n.label}
+                        </Link>
+                    ))}
+                </nav>
+                
+                <div className="pt-6 mt-6 border-t border-slate-800">
+                    <div className="flex items-center gap-3 px-4 mb-4">
+                        <div className="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center font-bold text-xs">
+                            {user?.name?.[0] || 'U'}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                            <p className="text-sm font-bold truncate">{user?.name}</p>
+                            <p className="text-[10px] text-slate-500 truncate capitalize">{user?.role?.toLowerCase()}</p>
+                        </div>
+                    </div>
+                    <button onClick={logout} className="w-full flex items-center gap-3 px-4 py-2 text-xs text-slate-500 hover:text-white transition">
+                        🔓 Se déconnecter
+                    </button>
+                </div>
+            </aside>
+            <main className="flex-1 overflow-auto">
+                {children}
+            </main>
+        </div>
+    );
+}