624 lines
21 KiB
TypeScript
624 lines
21 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
BarChart3,
|
|
Target,
|
|
FolderGit2,
|
|
Bot,
|
|
Layers,
|
|
LogOut,
|
|
UserCheck,
|
|
CalendarDays,
|
|
Radio,
|
|
Megaphone,
|
|
Share2,
|
|
Contact,
|
|
Menu,
|
|
X,
|
|
Leaf,
|
|
BookMarked,
|
|
Sparkles,
|
|
Images,
|
|
History,
|
|
Plug,
|
|
ChevronDown,
|
|
} from 'lucide-react';
|
|
import SidebarTenantSwitcher from '@/components/SidebarTenantSwitcher';
|
|
import type { DashboardModuleId } from '@/lib/tenant-modules';
|
|
import DateRangePicker from '@/components/DateRangePicker';
|
|
import { useDateRange } from '@/components/DateRangeContext';
|
|
|
|
type NavItem = {
|
|
href: string;
|
|
label: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
iconClass: string;
|
|
moduleId: DashboardModuleId;
|
|
};
|
|
|
|
const NAV_ITEMS: NavItem[] = [
|
|
{
|
|
href: '/dashboard/estrategia',
|
|
label: 'Objetivos del Mes',
|
|
icon: Target,
|
|
iconClass: 'text-emerald-500',
|
|
moduleId: 'estrategia',
|
|
},
|
|
{
|
|
href: '/dashboard/seguimiento',
|
|
label: 'Seguimiento',
|
|
icon: Radio,
|
|
iconClass: 'text-sky-500',
|
|
moduleId: 'seguimiento',
|
|
},
|
|
{
|
|
href: '/dashboard/kpis',
|
|
label: 'Métricas',
|
|
icon: BarChart3,
|
|
iconClass: 'text-brand-500',
|
|
moduleId: 'kpis',
|
|
},
|
|
{
|
|
href: '/dashboard/marca',
|
|
label: 'Zona de marca',
|
|
icon: BookMarked,
|
|
iconClass: 'text-rose-500',
|
|
moduleId: 'marca',
|
|
},
|
|
{
|
|
href: '/dashboard/activos',
|
|
label: 'Biblioteca de Activos',
|
|
icon: FolderGit2,
|
|
iconClass: 'text-blue-500',
|
|
moduleId: 'activos',
|
|
},
|
|
{
|
|
href: '/dashboard/creatividades',
|
|
label: 'Creatividades Ads',
|
|
icon: Sparkles,
|
|
iconClass: 'text-brand-500',
|
|
moduleId: 'creatives',
|
|
},
|
|
{
|
|
href: '/dashboard/asistente',
|
|
label: 'Asistente IA Financiero',
|
|
icon: Bot,
|
|
iconClass: 'text-purple-500',
|
|
moduleId: 'asistente',
|
|
},
|
|
];
|
|
|
|
const EXCLUDED_DATE_HEADER_ROUTES = [
|
|
'/dashboard/seguimiento',
|
|
'/dashboard/marca',
|
|
'/dashboard/activos',
|
|
'/dashboard/creatividades',
|
|
'/dashboard/creatives',
|
|
'/dashboard/asistente',
|
|
'/dashboard/agencia',
|
|
'/dashboard/historial',
|
|
];
|
|
|
|
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' && href !== '/dashboard/agencia' && pathname.startsWith(href + '/')) return true;
|
|
return false;
|
|
}
|
|
|
|
function NavLink({
|
|
item,
|
|
onNavigate,
|
|
hasSubItems,
|
|
isOpen,
|
|
onToggle,
|
|
}: {
|
|
item: NavItem | (Omit<NavItem, 'moduleId'> & { moduleId?: string });
|
|
onNavigate?: () => void;
|
|
hasSubItems?: boolean;
|
|
isOpen?: boolean;
|
|
onToggle?: () => void;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const active = isActive(pathname, item.href);
|
|
const Icon = item.icon;
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
if (hasSubItems && onToggle) {
|
|
if (active) {
|
|
// Si ya está en esta página, hacer clic en la sección pliega/despliega sin recargar
|
|
e.preventDefault();
|
|
onToggle();
|
|
return;
|
|
} else if (!isOpen) {
|
|
// Al entrar a la sección, asegurar que se abre
|
|
onToggle();
|
|
}
|
|
}
|
|
if (onNavigate) {
|
|
onNavigate();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Link
|
|
href={item.href}
|
|
onClick={handleClick}
|
|
aria-current={active ? 'page' : undefined}
|
|
className={`group relative flex items-center justify-between gap-2 rounded-md px-3 py-2 text-[14px] font-medium transition-colors ${
|
|
active
|
|
? 'bg-white/[0.07] text-white'
|
|
: 'text-mist-300 hover:bg-white/[0.05] hover:text-white'
|
|
}`}
|
|
>
|
|
{active ? (
|
|
<span aria-hidden className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-r bg-brand-500" />
|
|
) : null}
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<Icon className={`h-4 w-4 shrink-0 ${active ? 'text-brand-500' : 'text-mist-400 group-hover:text-mist-300'}`} />
|
|
<span className="truncate">{item.label}</span>
|
|
</div>
|
|
{hasSubItems ? (
|
|
<span
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onToggle?.();
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onToggle?.();
|
|
}
|
|
}}
|
|
className="p-1 rounded hover:bg-white/10 text-mist-400 hover:text-white transition-colors shrink-0"
|
|
aria-label={isOpen ? 'Ocultar páginas' : 'Mostrar páginas'}
|
|
>
|
|
<ChevronDown
|
|
className={`h-3.5 w-3.5 transition-transform duration-200 ${
|
|
isOpen ? 'rotate-0 text-white' : '-rotate-90 text-mist-400'
|
|
}`}
|
|
/>
|
|
</span>
|
|
) : null}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default function DashboardShell({
|
|
children,
|
|
email,
|
|
company,
|
|
role,
|
|
isAgency,
|
|
viewName,
|
|
activeTenantId,
|
|
enabledModules,
|
|
clientLogoUrl,
|
|
brandLabel,
|
|
logoutAction,
|
|
}: {
|
|
children: React.ReactNode;
|
|
email: string;
|
|
company: string;
|
|
role: string;
|
|
isAgency: boolean;
|
|
viewName?: string;
|
|
activeTenantId?: string | null;
|
|
/** null = show all (agency default). */
|
|
enabledModules?: Record<DashboardModuleId, boolean> | null;
|
|
clientLogoUrl?: string | null;
|
|
brandLabel?: string;
|
|
logoutAction: () => void | Promise<void>;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const close = () => setOpen(false);
|
|
const dateRange = useDateRange();
|
|
const pathname = usePathname();
|
|
const showDateHeader = shouldShowDateHeader(pathname);
|
|
|
|
const isSocialRoute =
|
|
pathname === '/dashboard/social' ||
|
|
pathname === '/dashboard/calendario' ||
|
|
pathname === '/dashboard/creatives';
|
|
|
|
const isAgenciaRoute =
|
|
pathname === '/dashboard/agencia' ||
|
|
(pathname !== null && pathname.startsWith('/dashboard/agencia/'));
|
|
|
|
const isMetricasRoute =
|
|
pathname === '/dashboard/kpis' ||
|
|
(pathname !== null && pathname.startsWith('/dashboard/kpis/')) ||
|
|
pathname === '/dashboard/crm' ||
|
|
(pathname !== null && pathname.startsWith('/dashboard/crm/')) ||
|
|
pathname === '/dashboard/ad-tracker' ||
|
|
(pathname !== null && pathname.startsWith('/dashboard/ad-tracker/')) ||
|
|
isSocialRoute ||
|
|
pathname === '/dashboard/organico' ||
|
|
(pathname !== null && pathname.startsWith('/dashboard/organico/'));
|
|
|
|
const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({});
|
|
|
|
const isMetricasOpen = expandedSections['metricas'] ?? isMetricasRoute;
|
|
const isSocialOpen = expandedSections['social'] ?? isSocialRoute;
|
|
const isAgenciaOpen = expandedSections['agencia'] ?? isAgenciaRoute;
|
|
|
|
const toggleSection = (key: 'metricas' | 'social' | 'agencia') => {
|
|
setExpandedSections((prev) => {
|
|
const current =
|
|
key === 'metricas'
|
|
? (prev['metricas'] ?? isMetricasRoute)
|
|
: key === 'social'
|
|
? (prev['social'] ?? isSocialRoute)
|
|
: (prev['agencia'] ?? isAgenciaRoute);
|
|
return {
|
|
...prev,
|
|
[key]: !current,
|
|
};
|
|
});
|
|
};
|
|
|
|
const moduleOn = (id: DashboardModuleId) => {
|
|
if (isAgency) return true;
|
|
if (!enabledModules) return true;
|
|
return enabledModules[id] !== false;
|
|
};
|
|
|
|
const isItemVisible = (item: NavItem) => {
|
|
if (item.moduleId === 'kpis') {
|
|
return (
|
|
moduleOn('kpis') ||
|
|
moduleOn('crm') ||
|
|
moduleOn('ad-tracker') ||
|
|
moduleOn('social') ||
|
|
moduleOn('organico')
|
|
);
|
|
}
|
|
return moduleOn(item.moduleId);
|
|
};
|
|
|
|
const visibleNav = NAV_ITEMS.filter(isItemVisible);
|
|
|
|
const subLinkCls = (href: string) =>
|
|
`ml-7 flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] font-medium transition-colors ${
|
|
isActive(pathname, href)
|
|
? 'bg-white/[0.07] text-white'
|
|
: 'text-mist-400 hover:bg-white/[0.05] hover:text-white'
|
|
}`;
|
|
|
|
const sidebar = (
|
|
<div className="flex h-full flex-col">
|
|
<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"
|
|
onClick={close}
|
|
aria-label="Cerrar menú"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<nav className="flex-1 min-h-0 space-y-0.5 overflow-y-auto pr-1">
|
|
{visibleNav.map((item) => {
|
|
const underMetricas = item.moduleId === 'kpis';
|
|
return (
|
|
<div key={item.href} className="space-y-0.5">
|
|
<NavLink
|
|
item={item}
|
|
hasSubItems={underMetricas}
|
|
isOpen={isMetricasOpen}
|
|
onToggle={() => toggleSection('metricas')}
|
|
onNavigate={close}
|
|
/>
|
|
{underMetricas && isMetricasOpen ? (
|
|
<div className="space-y-0.5 my-0.5">
|
|
{moduleOn('crm') ? (
|
|
<Link
|
|
href="/dashboard/crm"
|
|
onClick={close}
|
|
className={subLinkCls('/dashboard/crm')}
|
|
>
|
|
<Contact
|
|
className={`h-3.5 w-3.5 shrink-0 ${
|
|
isActive(pathname, '/dashboard/crm')
|
|
? 'text-teal-400'
|
|
: 'text-mist-400 group-hover:text-mist-300'
|
|
}`}
|
|
/>
|
|
<span className="truncate">CRM</span>
|
|
</Link>
|
|
) : null}
|
|
|
|
{moduleOn('ad-tracker') ? (
|
|
<Link
|
|
href="/dashboard/ad-tracker"
|
|
onClick={close}
|
|
className={subLinkCls('/dashboard/ad-tracker')}
|
|
>
|
|
<Megaphone
|
|
className={`h-3.5 w-3.5 shrink-0 ${
|
|
isActive(pathname, '/dashboard/ad-tracker')
|
|
? 'text-violet-400'
|
|
: 'text-mist-400 group-hover:text-mist-300'
|
|
}`}
|
|
/>
|
|
<span className="truncate">Ads</span>
|
|
</Link>
|
|
) : null}
|
|
|
|
{moduleOn('social') ? (
|
|
<div className="space-y-0.5">
|
|
<Link
|
|
href="/dashboard/social"
|
|
onClick={(e) => {
|
|
if (moduleOn('calendario') || moduleOn('pipeline')) {
|
|
if (pathname === '/dashboard/social') {
|
|
e.preventDefault();
|
|
toggleSection('social');
|
|
return;
|
|
} else if (!isSocialOpen) {
|
|
toggleSection('social');
|
|
}
|
|
}
|
|
close();
|
|
}}
|
|
className={`${subLinkCls('/dashboard/social')} justify-between`}
|
|
>
|
|
<div className="flex items-center gap-2.5 min-w-0">
|
|
<Share2
|
|
className={`h-3.5 w-3.5 shrink-0 ${
|
|
isActive(pathname, '/dashboard/social')
|
|
? 'text-fuchsia-400'
|
|
: 'text-mist-400 group-hover:text-mist-300'
|
|
}`}
|
|
/>
|
|
<span className="truncate">Social</span>
|
|
</div>
|
|
{moduleOn('calendario') || moduleOn('pipeline') ? (
|
|
<span
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleSection('social');
|
|
}}
|
|
className="p-0.5 rounded hover:bg-white/10 text-mist-400 hover:text-white transition-colors shrink-0"
|
|
aria-label={isSocialOpen ? 'Ocultar páginas' : 'Mostrar páginas'}
|
|
>
|
|
<ChevronDown
|
|
className={`h-3 w-3 transition-transform duration-200 ${
|
|
isSocialOpen ? 'rotate-0 text-white' : '-rotate-90 text-mist-400'
|
|
}`}
|
|
/>
|
|
</span>
|
|
) : null}
|
|
</Link>
|
|
{isSocialOpen ? (
|
|
<div className="space-y-0.5 my-0.5">
|
|
{moduleOn('calendario') ? (
|
|
<Link
|
|
href="/dashboard/calendario"
|
|
onClick={close}
|
|
className={`ml-11 flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors ${
|
|
isActive(pathname, '/dashboard/calendario')
|
|
? 'bg-white/[0.07] text-white'
|
|
: 'text-mist-400 hover:bg-white/[0.05] hover:text-white'
|
|
}`}
|
|
>
|
|
<CalendarDays className="h-3 w-3 shrink-0" />
|
|
<span className="truncate">Calendario editorial</span>
|
|
</Link>
|
|
) : null}
|
|
{moduleOn('pipeline') ? (
|
|
<Link
|
|
href="/dashboard/creatives"
|
|
onClick={close}
|
|
className={`ml-11 flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors ${
|
|
isActive(pathname, '/dashboard/creatives')
|
|
? 'bg-white/[0.07] text-white'
|
|
: 'text-mist-400 hover:bg-white/[0.05] hover:text-white'
|
|
}`}
|
|
>
|
|
<Images className="h-3 w-3 shrink-0" />
|
|
<span className="truncate">Pipeline RRSS</span>
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{moduleOn('organico') ? (
|
|
<Link
|
|
href="/dashboard/organico"
|
|
onClick={close}
|
|
className={subLinkCls('/dashboard/organico')}
|
|
>
|
|
<Leaf
|
|
className={`h-3.5 w-3.5 shrink-0 ${
|
|
isActive(pathname, '/dashboard/organico')
|
|
? 'text-lime-400'
|
|
: 'text-mist-400 group-hover:text-mist-300'
|
|
}`}
|
|
/>
|
|
<span className="truncate">Orgánico</span>
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{isAgency ? (
|
|
<div className="mt-5 border-t border-white/10 pt-4">
|
|
<span className="px-3 text-[12px] font-medium text-mist-400">
|
|
Agencia
|
|
</span>
|
|
<div className="mt-1 space-y-0.5">
|
|
<div className="space-y-0.5">
|
|
<NavLink
|
|
item={{
|
|
href: '/dashboard/agencia',
|
|
label: 'Portafolio Agencia',
|
|
icon: Layers,
|
|
iconClass: 'text-amber-500',
|
|
}}
|
|
hasSubItems
|
|
isOpen={isAgenciaOpen}
|
|
onToggle={() => toggleSection('agencia')}
|
|
onNavigate={close}
|
|
/>
|
|
{isAgenciaOpen ? (
|
|
<Link
|
|
href="/dashboard/agencia/conexiones"
|
|
onClick={close}
|
|
className={subLinkCls('/dashboard/agencia/conexiones')}
|
|
>
|
|
<Plug className="h-3.5 w-3.5 shrink-0" />
|
|
Panel de control · clientes y conexiones
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
<NavLink
|
|
item={{
|
|
href: '/dashboard/historial',
|
|
label: 'Historial de cambios',
|
|
icon: History,
|
|
iconClass: 'text-slate-500',
|
|
}}
|
|
onNavigate={close}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</nav>
|
|
|
|
<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" />
|
|
<p className="truncate text-[13px] font-medium text-white">{email}</p>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="truncate text-[12px] capitalize text-mist-400">
|
|
{company}
|
|
</span>
|
|
<span
|
|
className="shrink-0 rounded-sm bg-brand-500/15 px-1.5 py-0.5 text-[11px] font-medium capitalize text-brand-400"
|
|
title={role}
|
|
>
|
|
{role === 'admin'
|
|
? 'Agencia'
|
|
: role === 'team'
|
|
? 'Equipo'
|
|
: 'Cliente'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form action={logoutAction}>
|
|
<button
|
|
type="submit"
|
|
className="flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] font-medium text-mist-400 transition-colors hover:bg-white/[0.06] hover:text-white"
|
|
>
|
|
<LogOut className="w-3.5 h-3.5" />
|
|
Cerrar Sesión
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<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>
|
|
|
|
{open ? (
|
|
<div className="fixed inset-0 z-50 md:hidden">
|
|
<button
|
|
type="button"
|
|
className="absolute inset-0 bg-ink/50"
|
|
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 overflow-hidden">
|
|
{sidebar}
|
|
</aside>
|
|
</div>
|
|
) : null}
|
|
|
|
<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="min-w-0 flex-1">
|
|
<DateRangePicker
|
|
compact
|
|
preset={dateRange.preset}
|
|
customSince={dateRange.customSince}
|
|
customUntil={dateRange.customUntil}
|
|
onPreset={dateRange.setPreset}
|
|
onCustomChange={dateRange.setCustom}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</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">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|