feat: Implement dashboard layout with new sidebar, bulk AI analysis, supplier AI context modal, and floating summary bar.

src/app/(dashboard)/layout.tsx

@@ -5,9 +5,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
     return (
         <div className="flex h-screen w-full overflow-hidden" style={{ background: "var(--bg-base)" }}>
             <Sidebar />
-            <main className="flex-1 ml-60 flex flex-col h-full overflow-hidden">
+            <main className="flex-1 ml-16 flex flex-col h-full min-w-0 overflow-hidden">
                 <Header />
-                <div className="flex-1 overflow-y-auto p-8">
+                <div className="flex-1 overflow-auto p-4 md:p-8">
                     {children}
                 </div>
             </main>

src/components/shared/sidebar.tsx

@@ -32,23 +32,18 @@ export function Sidebar() {
 
     return (
         <aside
-            className="w-60 flex-shrink-0 flex flex-col h-screen fixed left-0 top-0 z-30 glass"
+            className="w-16 flex-shrink-0 flex flex-col items-center h-screen fixed left-0 top-0 z-30 glass"
             style={{ borderRight: "1px solid var(--border)" }}
         >
             {/* Logo */}
-            <div className="px-5 py-[18px]" style={{ borderBottom: "1px solid var(--border)" }}>
+            <div className="py-[18px] w-full flex justify-center" style={{ borderBottom: "1px solid var(--border)" }}>
-                <div className="flex items-center gap-2.5">
+                <div className="w-8 h-8 rounded-xl bg-[var(--accent)] flex items-center justify-center shadow-sm border border-white/10" title="CollectFlow">
-                    <div className="w-7 h-7 rounded-[8px] bg-[var(--accent)] flex items-center justify-center shadow-sm border border-white/10">
+                    <Package className="w-[18px] h-[18px] text-white" strokeWidth={2.2} />
-                        <Package className="w-[15px] h-[15px] text-white" strokeWidth={2.2} />
-                    </div>
-                    <span className="text-[15px] font-semibold tracking-[-0.3px] text-[var(--text-primary)]">
-                        CollectFlow
-                    </span>
                 </div>
             </div>
 
             {/* Navigation */}
-            <nav className="px-2 pt-2.5 space-y-0.5 flex-1">
+            <nav className="w-full flex-1 flex flex-col items-center py-4 space-y-2">
                 {filteredItems.map(({ icon: Icon, label, href }) => {
                     const isActive = pathname.startsWith(href);
 
@@ -61,43 +56,26 @@ export function Sidebar() {
                         <Link
                             key={href}
                             href={resolvedHref}
+                            title={label}
                             style={{
                                 color: isActive ? "var(--text-primary)" : "var(--text-secondary)",
                                 background: isActive ? "var(--bg-elevated)" : "transparent",
                             }}
                             className={cn(
-                                "flex items-center gap-2.5 px-3 py-[7px] rounded-[8px] text-[13px] font-medium transition-all duration-150",
+                                "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-150",
                                 !isActive && "hover:bg-[var(--bg-elevated)]"
                             )}
                         >
-                            <Icon className="w-[15px] h-[15px] shrink-0" strokeWidth={1.8} />
+                            <Icon className="w-[18px] h-[18px] shrink-0" strokeWidth={1.8} />
-                            {label}
                         </Link>
                     );
                 })}
             </nav>
 
             {/* User Profile & Logout */}
-            <div className="px-3 pb-3 space-y-2">
+            <div className="w-full pb-4 flex flex-col items-center gap-3">
-                <div className="flex items-center gap-3 px-3 py-3 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)]">
+                <div className="w-10 h-10 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)] flex items-center justify-center shadow-sm" title={session?.user?.name || "Profil"}>
-                    <div className="w-8 h-8 rounded-lg bg-[var(--accent-bg)] flex items-center justify-center border border-[var(--accent-border)]">
+                    <UserIcon className="w-5 h-5 text-[var(--accent)]" />
-                        <UserIcon className="w-4 h-4 text-[var(--accent)]" />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                        {session?.user ? (
-                            <>
-                                <p className="text-[12px] font-bold text-[var(--text-primary)] truncate">{session.user.name}</p>
-                                <p className="text-[10px] uppercase font-black text-[var(--text-muted)] tracking-wider">
-                                    {userRole === "admin" ? "Administrateur" : "Utilisateur"}
-                                </p>
-                            </>
-                        ) : (
-                            <div className="flex items-center gap-2">
-                                <Loader2 className="w-3 h-3 animate-spin text-[var(--accent)]" />
-                                <p className="text-[10px] text-[var(--text-muted)] animate-pulse">Session...</p>
-                            </div>
-                        )}
-                    </div>
                 </div>
 
                 <button
@@ -105,17 +83,12 @@ export function Sidebar() {
                         await signOut({ redirect: false });
                         window.location.href = "/login";
                     }}
-                    className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] font-medium text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] transition-colors"
+                    title="Déconnexion"
+                    className="w-10 h-10 flex items-center justify-center rounded-xl text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] transition-colors"
                 >
-                    <LogOut className="w-[15px] h-[15px]" strokeWidth={1.8} />
+                    <LogOut className="w-[18px] h-[18px]" strokeWidth={1.8} />
-                    Déconnexion
                 </button>
             </div>
-
-            {/* Footer */}
-            <div className="px-4 py-3" style={{ borderTop: "1px solid var(--border)" }}>
-                <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>v1.0.0-beta</p>
-            </div>
         </aside>
     );
 }

src/features/grid/components/bulk-ai-analyzer.tsx

@@ -210,53 +210,48 @@ export function BulkAiAnalyzer() {
         setTimeout(() => setIsAnalyzing(false), 3000);
     };
 
-    if (isAnalyzing) {
-        return (
-            <div className="flex items-center gap-4 h-10 px-4 rounded-xl bg-[var(--accent-bg)] border border-[var(--accent-border)] shadow-sm">
-                <Loader2 className="w-4 h-4 text-[var(--accent)] animate-spin" />
-                <div className="flex flex-col min-w-[150px]">
-                    <span className="text-[10px] font-bold text-[var(--accent)] leading-none">
-                        {progress.message}
-                    </span>
-                    <div className="w-full bg-[var(--bg-elevated)] rounded-full h-1 mt-1 overflow-hidden">
-                        <div
-                            className="bg-[var(--accent)] h-1 rounded-full transition-all duration-300"
-                            style={{ width: `${Math.max(5, (progress.current / progress.total) * 100)}%` }}
-                        ></div>
-                    </div>
-                </div>
-                <button
-                    onClick={handleStop}
-                    className="p-1 hover:bg-[var(--bg-elevated)] rounded-lg transition-colors text-[var(--text-muted)] hover:text-[var(--accent-error)]"
-                    title="Arrêter l'analyse"
-                >
-                    <XCircle className="w-4 h-4" />
-                </button>
-            </div>
-        );
-    }
-
-    if (progress.current > 0 && !isAnalyzing) {
-        return (
-            <div className="flex items-center gap-2 h-10 px-4 rounded-xl bg-[var(--accent-success-bg)] border border-[var(--accent-success)] shadow-sm cursor-default">
-                <CheckCircle2 className="w-4 h-4 text-[var(--accent-success)]" />
-                <span className="text-xs font-bold text-[var(--accent-success)]">
-                    {progress.errors > 0 ? `Terminé (${progress.current - progress.errors}/${progress.total})` : `Analyse Terminée`}
-                </span>
-            </div>
-        );
-    }
-
     return (
         <div className="flex items-center gap-3">
             <SupplierAiContextModal codeFournisseur={supplierCode} nomFournisseur={supplierName} />
-            <button
+
-                onClick={handleAnalyze}
+            {isAnalyzing ? (
-                className="group flex items-center justify-center gap-2 h-10 px-6 rounded-xl text-sm font-black transition-all shadow-md bg-[var(--accent)] text-white hover:brightness-110 active:scale-95 border border-white/10"
+                <div className="flex items-center gap-4 h-10 px-4 rounded-xl bg-[var(--accent-bg)] border border-[var(--accent-border)] shadow-sm">
-            >
+                    <Loader2 className="w-4 h-4 text-[var(--accent)] animate-spin" />
-                <Sparkles className="w-4 h-4" />
+                    <div className="flex flex-col min-w-[150px]">
-                Analyse IA
+                        <span className="text-[10px] font-bold text-[var(--accent)] leading-none">
-            </button>
+                            {progress.message}
+                        </span>
+                        <div className="w-full bg-[var(--bg-elevated)] rounded-full h-1 mt-1 overflow-hidden">
+                            <div
+                                className="bg-[var(--accent)] h-1 rounded-full transition-all duration-300"
+                                style={{ width: `${Math.max(5, (progress.current / progress.total) * 100)}%` }}
+                            ></div>
+                        </div>
+                    </div>
+                    <button
+                        onClick={handleStop}
+                        className="p-1 hover:bg-[var(--bg-elevated)] rounded-lg transition-colors text-[var(--text-muted)] hover:text-[var(--accent-error)]"
+                        title="Arrêter l'analyse"
+                    >
+                        <XCircle className="w-4 h-4" />
+                    </button>
+                </div>
+            ) : progress.current > 0 ? (
+                <div className="flex items-center gap-2 h-10 px-4 rounded-xl bg-[var(--accent-success-bg)] border border-[var(--accent-success)] shadow-sm cursor-default">
+                    <CheckCircle2 className="w-4 h-4 text-[var(--accent-success)]" />
+                    <span className="text-xs font-bold text-[var(--accent-success)]">
+                        {progress.errors > 0 ? `Terminé (${progress.current - progress.errors}/${progress.total})` : `Analyse Terminée`}
+                    </span>
+                </div>
+            ) : (
+                <button
+                    onClick={handleAnalyze}
+                    className="group flex items-center justify-center gap-2 h-10 px-6 rounded-xl text-sm font-black transition-all shadow-md bg-[var(--accent)] text-white hover:brightness-110 active:scale-95 border border-white/10"
+                >
+                    <Sparkles className="w-4 h-4" />
+                    Analyse IA
+                </button>
+            )}
         </div>
     );
 }

src/features/grid/components/floating-summary-bar.tsx

@@ -133,8 +133,8 @@ export function FloatingSummaryBar() {
                 </button>
                 <div className="w-[1px] h-4 bg-slate-200 dark:bg-slate-800 mx-1.5" />
                 {hasDrafts && (
-                    <span className="text-[10px] font-black uppercase text-amber-600 dark:text-amber-500 bg-amber-100 dark:bg-amber-900/30 px-2 py-0.5 rounded border border-amber-200 dark:border-amber-800">
+                    <span className="text-[12px] font-black tracking-tight text-[#b45309] bg-[#fef08a] px-3 py-1 rounded-md border border-[#fde047] ml-2">
-                        {count} modif.
+                        {count} MODIF.
                     </span>
                 )}
             </div>

src/features/grid/components/supplier-ai-context-modal.tsx

@@ -94,7 +94,7 @@ export function SupplierAiContextModal({ codeFournisseur, nomFournisseur }: Supp
                     <Button variant="outline" onClick={() => setOpen(false)} disabled={isSaving}>
                         Annuler
                     </Button>
-                    <Button onClick={handleSave} disabled={isSaving || isLoading} className="gap-2 bg-gradient-to-r from-violet-600 to-indigo-600 text-white hover:from-violet-700 hover:to-indigo-700">
+                    <Button onClick={handleSave} disabled={isSaving || isLoading} className="gap-2 bg-emerald-600 hover:bg-emerald-700 text-white">
                         {isSaving ? "Enregistrement..." : "Enregistrer les règles"}
                     </Button>
                 </DialogFooter>