feat: interfaz clara unificada en Centro de Mando

Shell con nav agrupada y activa, PageHeader común, tipografía y tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/dashboard/layout.tsx

@@ -1,24 +1,9 @@
 import React from 'react';
-import Link from 'next/link';
-import { 
-  BarChart3, 
-  Target, 
-  FolderGit2, 
-  Bot, 
-  ShieldCheck,
-  Layers,
-  LogOut,
-  UserCheck,
-  CalendarDays,
-  Radio,
-  Megaphone,
-  Contact
-} from 'lucide-react';
 import { createClient } from '@/lib/supabase/server';
 import { logoutAction } from '@/app/auth/actions';
-import TenantSwitcher from '@/components/TenantSwitcher';
 import { cookies } from 'next/headers';
 import { VIEW_TENANT_NAME_COOKIE } from '@/lib/agency';
+import DashboardShell from '@/components/DashboardShell';
 
 export default async function DashboardLayout({
   children,
@@ -26,9 +11,12 @@ export default async function DashboardLayout({
   children: React.ReactNode;
 }) {
   const supabase = await createClient();
-  const { data: { user } } = await supabase.auth.getUser();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
 
-  const role = user?.user_metadata?.role || user?.app_metadata?.role || 'client';
+  const role =
+    user?.user_metadata?.role || user?.app_metadata?.role || 'client';
   const company = user?.user_metadata?.company || '4Ventures Central';
   const email = user?.email || 'usuario@4ventures.es';
   const isAgency = role === 'admin' || role === 'team';
@@ -36,156 +24,15 @@ export default async function DashboardLayout({
   const viewName = cookieStore.get(VIEW_TENANT_NAME_COOKIE)?.value;
 
   return (
-    <div className="flex min-h-screen bg-[#0B0F19]">
-      {/* Sidebar */}
-      <aside className="w-64 border-r border-gray-800 bg-[#0D121F] flex flex-col justify-between p-4 shrink-0">
-        <div>
-          <div className="flex items-center gap-3 px-2 py-4 border-b border-gray-800/80 mb-6">
-            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-brand-500 to-amber-600 flex items-center justify-center font-bold text-white shadow-lg shadow-brand-500/20">
-              4V
-            </div>
-            <div>
-              <h1 className="font-bold text-sm tracking-wide text-white">4VENTURES</h1>
-              <p className="text-xs text-gray-400 font-medium">Centro de Mando</p>
-            </div>
-          </div>
-
-          <nav className="space-y-1.5">
-            <Link
-              href="/dashboard/kpis"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-200 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <BarChart3 className="w-4 h-4 text-brand-500" />
-              Métricas
-            </Link>
-            <Link
-              href="/dashboard/crm"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Contact className="w-4 h-4 text-teal-400" />
-              CRM
-            </Link>
-            <Link
-              href="/dashboard/seguimiento"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Radio className="w-4 h-4 text-sky-400" />
-              Seguimiento
-            </Link>
-            <Link
-              href="/dashboard/estrategia"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Target className="w-4 h-4 text-emerald-400" />
-              Objetivos del Mes
-            </Link>
-            <Link
-              href="/dashboard/calendario"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <CalendarDays className="w-4 h-4 text-pink-400" />
-              Calendario Editorial
-            </Link>
-            <Link
-              href="/dashboard/ad-tracker"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Megaphone className="w-4 h-4 text-violet-400" />
-              Ad Tracker
-            </Link>
-            <Link
-              href="/dashboard/activos"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <FolderGit2 className="w-4 h-4 text-blue-400" />
-              Biblioteca de Activos
-            </Link>
-            <Link
-              href="/dashboard/creatives"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <FolderGit2 className="w-4 h-4 text-orange-400" />
-              Pipeline creatividades
-            </Link>
-            <Link
-              href="/dashboard/asistente"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Bot className="w-4 h-4 text-purple-400" />
-              Asistente IA Financiero
-            </Link>
-
-            {isAgency && (
-              <div className="pt-4 mt-4 border-t border-gray-800/60">
-                <span className="px-3 text-[10px] font-bold uppercase tracking-wider text-gray-400">Agencia OS</span>
-                <Link
-                  href="/dashboard/agencia"
-                  className="flex items-center gap-3 px-3 py-2.5 mt-1 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-                >
-                  <Layers className="w-4 h-4 text-amber-400" />
-                  Portafolio Agencia
-                </Link>
-              </div>
-            )}
-          </nav>
-        </div>
-
-        {/* Sidebar Footer with User Info & Logout */}
-        <div className="pt-4 border-t border-gray-800/80 space-y-3">
-          <div className="px-2 py-2 rounded-xl bg-gray-900/60 border border-gray-800/80">
-            <div className="flex items-center gap-2 mb-1">
-              <UserCheck className="w-3.5 h-3.5 text-brand-400 shrink-0" />
-              <p className="text-xs font-medium text-white truncate">{email}</p>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-[10px] text-gray-400 capitalize">{company}</span>
-              <span className="text-[9px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded bg-brand-500/20 text-brand-400">
-                {role}
-              </span>
-            </div>
-          </div>
-
-          <form action={logoutAction}>
-            <button
-              type="submit"
-              className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-gray-400 hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 transition-all cursor-pointer"
-            >
-              <LogOut className="w-3.5 h-3.5" />
-              Cerrar Sesión
-            </button>
-          </form>
-
-          <div className="flex items-center justify-between px-2 pt-1 text-[11px] text-gray-500">
-            <span className="flex items-center gap-1 text-emerald-400">
-              <ShieldCheck className="w-3 h-3" /> RLS Activo
-            </span>
-            <span>VPS Hostinger</span>
-          </div>
-        </div>
-      </aside>
-
-      {/* Main Content Area */}
-      <div className="flex-1 flex flex-col min-w-0">
-        <header className="h-16 border-b border-gray-800 bg-[#0D121F]/50 backdrop-blur px-8 flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-gray-400">
-            <span>{isAgency ? 'Contexto:' : 'Cliente / Portal:'}</span>
-            <TenantSwitcher
-              isAgency={isAgency}
-              initialName={viewName || company}
-            />
-          </div>
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2 text-xs bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2.5 py-1 rounded-full">
-              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
-              Sync Meta Ads · warehouse
-            </div>
-          </div>
-        </header>
-
-        <main className="flex-1 p-8 overflow-y-auto max-w-7xl mx-auto w-full">
-          {children}
-        </main>
-      </div>
-    </div>
+    <DashboardShell
+      email={email}
+      company={company}
+      role={role}
+      isAgency={isAgency}
+      viewName={viewName}
+      logoutAction={logoutAction}
+    >
+      {children}
+    </DashboardShell>
   );
 }