feat(shell): selector de cliente en sidebar, layout fijo, cabecera contextual y reordenacion de menu

src/components/DashboardShell.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React, { useState } from 'react';
-import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import {
@@ -26,11 +25,10 @@ import {
   Images,
   History,
 } from 'lucide-react';
-import TenantSwitcher from '@/components/TenantSwitcher';
+import SidebarTenantSwitcher from '@/components/SidebarTenantSwitcher';
 import type { DashboardModuleId } from '@/lib/tenant-modules';
 import DateRangePicker from '@/components/DateRangePicker';
 import { useDateRange } from '@/components/DateRangeContext';
-import SyncNowButton from '@/components/SyncNowButton';
 
 type NavItem = {
   href: string;
@@ -69,13 +67,6 @@ const NAV_ITEMS: NavItem[] = [
     iconClass: 'text-emerald-500',
     moduleId: 'estrategia',
   },
-  {
-    href: '/dashboard/marca',
-    label: 'Zona de marca',
-    icon: BookMarked,
-    iconClass: 'text-rose-500',
-    moduleId: 'marca',
-  },
   {
     href: '/dashboard/ad-tracker',
     label: 'Ads',
@@ -97,6 +88,13 @@ const NAV_ITEMS: NavItem[] = [
     iconClass: 'text-lime-600',
     moduleId: 'organico',
   },
+  {
+    href: '/dashboard/marca',
+    label: 'Zona de marca',
+    icon: BookMarked,
+    iconClass: 'text-rose-500',
+    moduleId: 'marca',
+  },
   {
     href: '/dashboard/activos',
     label: 'Biblioteca de Activos',
@@ -120,6 +118,23 @@ const NAV_ITEMS: NavItem[] = [
   },
 ];
 
+const EXCLUDED_DATE_HEADER_ROUTES = [
+  '/dashboard/seguimiento',
+  '/dashboard/marca',
+  '/dashboard/activos',
+  '/dashboard/creatividades',
+  '/dashboard/creatives',
+  '/dashboard/asistente',
+  '/dashboard/agencia',
+];
+
+function shouldShowDateHeader(pathname: string | null): boolean {
+  if (!pathname) return true;
+  return !EXCLUDED_DATE_HEADER_ROUTES.some(
+    (route) => pathname === route || pathname.startsWith(route + '/')
+  );
+}
+
 function isActive(pathname: string, href: string): boolean {
   if (pathname === href) return true;
   if (href !== '/dashboard' && pathname.startsWith(href + '/')) return true;
@@ -163,6 +178,7 @@ export default function DashboardShell({
   role,
   isAgency,
   viewName,
+  activeTenantId,
   enabledModules,
   clientLogoUrl,
   brandLabel,
@@ -174,6 +190,7 @@ export default function DashboardShell({
   role: string;
   isAgency: boolean;
   viewName?: string;
+  activeTenantId?: string | null;
   /** null = show all (agency default). */
   enabledModules?: Record<DashboardModuleId, boolean> | null;
   clientLogoUrl?: string | null;
@@ -184,6 +201,7 @@ export default function DashboardShell({
   const close = () => setOpen(false);
   const dateRange = useDateRange();
   const pathname = usePathname();
+  const showDateHeader = shouldShowDateHeader(pathname);
 
   const moduleOn = (id: DashboardModuleId) => {
     if (isAgency) return true;
@@ -193,48 +211,17 @@ export default function DashboardShell({
 
   const visibleNav = NAV_ITEMS.filter((item) => moduleOn(item.moduleId));
 
-  // Agencia siempre mantiene identidad 4Ventures (aunque esté "viendo" un cliente).
-  const title = isAgency
-    ? '4VENTURES'
-    : clientLogoUrl
-      ? brandLabel || company
-      : '4VENTURES';
-  const subtitle = isAgency
-    ? viewName
-      ? `Agencia · viendo ${viewName}`
-      : 'Centro de Mando'
-    : 'Portal cliente';
-
   const sidebar = (
     <div className="flex h-full flex-col">
-      <div className="mb-6 flex items-center gap-3 border-b border-white/10 px-2 pb-4 pt-2">
-        {clientLogoUrl ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={clientLogoUrl}
-            alt={title}
-            width={40}
-            height={40}
-            className="h-10 w-10 shrink-0 rounded-md bg-white object-contain p-1"
-          />
-        ) : (
-          <Image
-            src="/logo-4ventures.png"
-            alt="4Ventures"
-            width={40}
-            height={40}
-            className="h-10 w-10 shrink-0 rounded-md object-cover"
-            priority
-          />
-        )}
-        <div className="min-w-0">
-          <p className="truncate text-[15px] font-medium leading-tight text-white">
-            {title}
-          </p>
-          <p className="mt-0.5 text-[12px] leading-tight text-mist-400">
-            {subtitle}
-          </p>
-        </div>
+      <div className="mb-4 flex shrink-0 items-center gap-2 border-b border-white/10 px-1 pb-3 pt-1">
+        <SidebarTenantSwitcher
+          isAgency={isAgency}
+          initialActiveId={activeTenantId}
+          initialActiveName={viewName}
+          clientLogoUrl={clientLogoUrl}
+          brandLabel={brandLabel}
+          company={company}
+        />
         <button
           type="button"
           className="ml-auto rounded-md p-2 text-mist-400 hover:bg-white/10 hover:text-white md:hidden"
@@ -245,7 +232,7 @@ export default function DashboardShell({
         </button>
       </div>
 
-      <nav className="flex-1 space-y-0.5 overflow-y-auto pr-1">
+      <nav className="flex-1 min-h-0 space-y-0.5 overflow-y-auto pr-1">
         {visibleNav.map((item) => {
           // Sub-enlaces de Social: siempre que Social esté en el menú.
           const underSocial = item.moduleId === 'social';
@@ -315,7 +302,7 @@ export default function DashboardShell({
         ) : null}
       </nav>
 
-      <div className="mt-4 space-y-3 border-t border-white/10 pt-4">
+      <div className="mt-auto shrink-0 space-y-2.5 border-t border-white/10 pt-3">
         <div className="rounded-md bg-white/[0.05] px-3 py-2.5">
           <div className="mb-1 flex items-center gap-2">
             <UserCheck className="h-3.5 w-3.5 shrink-0 text-mist-400" />
@@ -358,8 +345,8 @@ export default function DashboardShell({
   );
 
   return (
-    <div className="flex min-h-screen bg-background text-ink">
-      <aside className="hidden w-[248px] shrink-0 flex-col bg-sidebar p-4 text-white md:flex">
+    <div className="flex h-screen overflow-hidden bg-background text-ink">
+      <aside className="sticky top-0 hidden h-screen w-[248px] shrink-0 flex-col bg-sidebar p-4 text-white md:flex overflow-hidden">
         {sidebar}
       </aside>
 
@@ -371,48 +358,51 @@ export default function DashboardShell({
             aria-label="Cerrar menú"
             onClick={close}
           />
-          <aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar p-4 text-white shadow-xl">
+          <aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar p-4 text-white shadow-xl overflow-hidden">
             {sidebar}
           </aside>
         </div>
       ) : null}
 
-      <div className="flex min-w-0 flex-1 flex-col">
-        <header className="sticky top-0 z-30 space-y-2 border-b border-border bg-background/90 px-4 py-2.5 backdrop-blur-md md:px-8">
-          <div className="flex items-center gap-3 min-h-10">
-            <button
-              type="button"
-              className="rounded-md p-2 text-ink-muted hover:bg-mist-100 md:hidden"
-              onClick={() => setOpen(true)}
-              aria-label="Abrir menú"
-            >
-              <Menu className="w-5 h-5" />
-            </button>
+      <div className="flex min-w-0 flex-1 flex-col h-full overflow-hidden">
+        {showDateHeader ? (
+          <header className="shrink-0 z-30 border-b border-border bg-background/90 px-4 py-2.5 backdrop-blur-md md:px-8">
+            <div className="flex min-h-10 flex-wrap items-center gap-3">
+              <button
+                type="button"
+                className="rounded-md p-2 text-ink-muted hover:bg-mist-100 md:hidden"
+                onClick={() => setOpen(true)}
+                aria-label="Abrir menú"
+              >
+                <Menu className="w-5 h-5" />
+              </button>
 
-            <div className="flex min-w-0 items-center gap-2 text-sm text-ink-muted">
-              <span className="hidden sm:inline shrink-0">
-                {isAgency ? 'Contexto:' : 'Cliente / Portal:'}
-              </span>
-              <TenantSwitcher
-                isAgency={isAgency}
-                initialName={viewName || company}
-              />
+              <div className="min-w-0 flex-1">
+                <DateRangePicker
+                  compact
+                  preset={dateRange.preset}
+                  customSince={dateRange.customSince}
+                  customUntil={dateRange.customUntil}
+                  onPreset={dateRange.setPreset}
+                  onCustomChange={dateRange.setCustom}
+                />
+              </div>
             </div>
-          </div>
-          <div className="flex flex-wrap items-center gap-3">
-            <div className="min-w-0 flex-1">
-              <DateRangePicker
-                compact
-                preset={dateRange.preset}
-                customSince={dateRange.customSince}
-                customUntil={dateRange.customUntil}
-                onPreset={dateRange.setPreset}
-                onCustomChange={dateRange.setCustom}
-              />
+          </header>
+        ) : (
+          <header className="shrink-0 z-30 border-b border-border bg-background/90 px-4 py-2.5 backdrop-blur-md md:hidden">
+            <div className="flex min-h-10 items-center">
+              <button
+                type="button"
+                className="rounded-md p-2 text-ink-muted hover:bg-mist-100"
+                onClick={() => setOpen(true)}
+                aria-label="Abrir menú"
+              >
+                <Menu className="w-5 h-5" />
+              </button>
             </div>
-            {isAgency ? <SyncNowButton /> : null}
-          </div>
-        </header>
+          </header>
+        )}
 
         <main className="canvas-dots flex-1 overflow-y-auto">
           <div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-8 md:py-9">