426 lines
12 KiB
TypeScript
426 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
BarChart3,
|
|
Target,
|
|
FolderGit2,
|
|
Bot,
|
|
ShieldCheck,
|
|
Layers,
|
|
LogOut,
|
|
UserCheck,
|
|
CalendarDays,
|
|
Radio,
|
|
Megaphone,
|
|
Share2,
|
|
Contact,
|
|
Menu,
|
|
X,
|
|
Leaf,
|
|
BookMarked,
|
|
Sparkles,
|
|
Images,
|
|
History,
|
|
} from 'lucide-react';
|
|
import TenantSwitcher from '@/components/TenantSwitcher';
|
|
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;
|
|
label: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
iconClass: string;
|
|
moduleId: DashboardModuleId;
|
|
};
|
|
|
|
const NAV_ITEMS: NavItem[] = [
|
|
{
|
|
href: '/dashboard/kpis',
|
|
label: 'Métricas',
|
|
icon: BarChart3,
|
|
iconClass: 'text-brand-500',
|
|
moduleId: 'kpis',
|
|
},
|
|
{
|
|
href: '/dashboard/crm',
|
|
label: 'CRM',
|
|
icon: Contact,
|
|
iconClass: 'text-teal-500',
|
|
moduleId: 'crm',
|
|
},
|
|
{
|
|
href: '/dashboard/seguimiento',
|
|
label: 'Seguimiento',
|
|
icon: Radio,
|
|
iconClass: 'text-sky-500',
|
|
moduleId: 'seguimiento',
|
|
},
|
|
{
|
|
href: '/dashboard/estrategia',
|
|
label: 'Objetivos del Mes',
|
|
icon: Target,
|
|
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',
|
|
icon: Megaphone,
|
|
iconClass: 'text-violet-500',
|
|
moduleId: 'ad-tracker',
|
|
},
|
|
{
|
|
href: '/dashboard/social',
|
|
label: 'Social',
|
|
icon: Share2,
|
|
iconClass: 'text-fuchsia-500',
|
|
moduleId: 'social',
|
|
},
|
|
{
|
|
href: '/dashboard/organico',
|
|
label: 'Orgánico',
|
|
icon: Leaf,
|
|
iconClass: 'text-lime-600',
|
|
moduleId: 'organico',
|
|
},
|
|
{
|
|
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',
|
|
},
|
|
];
|
|
|
|
function isActive(pathname: string, href: string): boolean {
|
|
if (pathname === href) return true;
|
|
if (href !== '/dashboard' && pathname.startsWith(href + '/')) return true;
|
|
return false;
|
|
}
|
|
|
|
function NavLink({
|
|
item,
|
|
onNavigate,
|
|
}: {
|
|
item: NavItem | (Omit<NavItem, 'moduleId'> & { moduleId?: string });
|
|
onNavigate?: () => void;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const active = isActive(pathname, item.href);
|
|
const Icon = item.icon;
|
|
return (
|
|
<Link
|
|
href={item.href}
|
|
onClick={onNavigate}
|
|
aria-current={active ? 'page' : undefined}
|
|
className={`group relative flex items-center gap-3 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}
|
|
<Icon className={`h-4 w-4 shrink-0 ${active ? 'text-brand-500' : 'text-mist-400 group-hover:text-mist-300'}`} />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default function DashboardShell({
|
|
children,
|
|
email,
|
|
company,
|
|
role,
|
|
isAgency,
|
|
viewName,
|
|
enabledModules,
|
|
clientLogoUrl,
|
|
brandLabel,
|
|
logoutAction,
|
|
}: {
|
|
children: React.ReactNode;
|
|
email: string;
|
|
company: string;
|
|
role: string;
|
|
isAgency: boolean;
|
|
viewName?: string;
|
|
/** 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 moduleOn = (id: DashboardModuleId) => {
|
|
if (isAgency) return true;
|
|
if (!enabledModules) return true;
|
|
return enabledModules[id] !== false;
|
|
};
|
|
|
|
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>
|
|
<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 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';
|
|
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'
|
|
}`;
|
|
return (
|
|
<div key={item.href} className="space-y-0.5">
|
|
<NavLink item={item} onNavigate={close} />
|
|
{underSocial ? (
|
|
<>
|
|
{moduleOn('calendario') ? (
|
|
<Link
|
|
href="/dashboard/calendario"
|
|
onClick={close}
|
|
className={subLinkCls('/dashboard/calendario')}
|
|
>
|
|
<CalendarDays className="h-3.5 w-3.5 shrink-0" />
|
|
Calendario editorial
|
|
</Link>
|
|
) : null}
|
|
{moduleOn('pipeline') ? (
|
|
<Link
|
|
href="/dashboard/creatives"
|
|
onClick={close}
|
|
className={subLinkCls('/dashboard/creatives')}
|
|
>
|
|
<Images className="h-3.5 w-3.5 shrink-0" />
|
|
Pipeline RRSS
|
|
</Link>
|
|
) : null}
|
|
</>
|
|
) : 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">
|
|
<NavLink
|
|
item={{
|
|
href: '/dashboard/agencia',
|
|
label: 'Portafolio Agencia',
|
|
icon: Layers,
|
|
iconClass: 'text-amber-500',
|
|
}}
|
|
onNavigate={close}
|
|
/>
|
|
<NavLink
|
|
item={{
|
|
href: '/dashboard/historial',
|
|
label: 'Historial de cambios',
|
|
icon: History,
|
|
iconClass: 'text-slate-500',
|
|
}}
|
|
onNavigate={close}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</nav>
|
|
|
|
<div className="mt-4 space-y-3 border-t border-white/10 pt-4">
|
|
<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 className="flex items-center justify-between px-2 pt-1 text-[12px] text-mist-400">
|
|
<span className="flex items-center gap-1.5">
|
|
<ShieldCheck className="h-3 w-3 text-mint-200" /> Datos aislados por cliente
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
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">
|
|
{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">
|
|
{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 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>
|
|
</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}
|
|
/>
|
|
</div>
|
|
{isAgency ? <SyncNowButton /> : null}
|
|
</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>
|
|
);
|
|
}
|