fix: tema claro blanco, logo 4Ventures y menú original
Fondo blanco en la app; menú con labels/iconos originales; logo en sidebar y login. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import {
|
||||
@@ -18,46 +19,70 @@ import {
|
||||
Contact,
|
||||
Menu,
|
||||
X,
|
||||
Images,
|
||||
} from 'lucide-react';
|
||||
import TenantSwitcher from '@/components/TenantSwitcher';
|
||||
|
||||
type NavItem = {
|
||||
href: string;
|
||||
label: string;
|
||||
hint?: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
iconClass: string;
|
||||
};
|
||||
|
||||
type NavGroup = {
|
||||
title: string;
|
||||
items: NavItem[];
|
||||
};
|
||||
|
||||
const CLIENT_GROUPS: NavGroup[] = [
|
||||
const NAV_ITEMS: NavItem[] = [
|
||||
{
|
||||
title: 'Rendimiento',
|
||||
items: [
|
||||
{ href: '/dashboard/kpis', label: 'Métricas', hint: 'KPIs y canales', icon: BarChart3 },
|
||||
{ href: '/dashboard/crm', label: 'CRM', hint: 'Leads y clientes', icon: Contact },
|
||||
{ href: '/dashboard/seguimiento', label: 'Seguimiento', hint: 'Estado operativo', icon: Radio },
|
||||
{ href: '/dashboard/ad-tracker', label: 'Ad Tracker', hint: 'Creatividades y ads', icon: Megaphone },
|
||||
],
|
||||
href: '/dashboard/kpis',
|
||||
label: 'Métricas',
|
||||
icon: BarChart3,
|
||||
iconClass: 'text-brand-500',
|
||||
},
|
||||
{
|
||||
title: 'Contenido',
|
||||
items: [
|
||||
{ href: '/dashboard/estrategia', label: 'Objetivos', hint: 'Plan del mes', icon: Target },
|
||||
{ href: '/dashboard/calendario', label: 'Calendario', hint: 'Editorial', icon: CalendarDays },
|
||||
{ href: '/dashboard/activos', label: 'Activos', hint: 'Biblioteca de archivos', icon: FolderGit2 },
|
||||
{ href: '/dashboard/creatives', label: 'Pipeline', hint: 'Creatividades', icon: Images },
|
||||
],
|
||||
href: '/dashboard/crm',
|
||||
label: 'CRM',
|
||||
icon: Contact,
|
||||
iconClass: 'text-teal-500',
|
||||
},
|
||||
{
|
||||
title: 'Herramientas',
|
||||
items: [
|
||||
{ href: '/dashboard/asistente', label: 'Asistente', hint: 'IA financiera', icon: Bot },
|
||||
],
|
||||
href: '/dashboard/seguimiento',
|
||||
label: 'Seguimiento',
|
||||
icon: Radio,
|
||||
iconClass: 'text-sky-500',
|
||||
},
|
||||
{
|
||||
href: '/dashboard/estrategia',
|
||||
label: 'Objetivos del Mes',
|
||||
icon: Target,
|
||||
iconClass: 'text-emerald-500',
|
||||
},
|
||||
{
|
||||
href: '/dashboard/calendario',
|
||||
label: 'Calendario Editorial',
|
||||
icon: CalendarDays,
|
||||
iconClass: 'text-pink-500',
|
||||
},
|
||||
{
|
||||
href: '/dashboard/ad-tracker',
|
||||
label: 'Ad Tracker',
|
||||
icon: Megaphone,
|
||||
iconClass: 'text-violet-500',
|
||||
},
|
||||
{
|
||||
href: '/dashboard/activos',
|
||||
label: 'Biblioteca de Activos',
|
||||
icon: FolderGit2,
|
||||
iconClass: 'text-blue-500',
|
||||
},
|
||||
{
|
||||
href: '/dashboard/creatives',
|
||||
label: 'Pipeline creatividades',
|
||||
icon: FolderGit2,
|
||||
iconClass: 'text-orange-500',
|
||||
},
|
||||
{
|
||||
href: '/dashboard/asistente',
|
||||
label: 'Asistente IA Financiero',
|
||||
icon: Bot,
|
||||
iconClass: 'text-purple-500',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -81,29 +106,14 @@ function NavLink({
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={onNavigate}
|
||||
className={`group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-colors ${
|
||||
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
|
||||
active
|
||||
? 'bg-brand-500/15 text-white border border-brand-500/30'
|
||||
: 'text-gray-300 border border-transparent hover:bg-white/[0.04] hover:text-white'
|
||||
? 'bg-brand-50 text-gray-900 border border-brand-200'
|
||||
: 'text-gray-600 border border-transparent hover:text-gray-900 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
className={`w-4 h-4 shrink-0 ${
|
||||
active ? 'text-brand-400' : 'text-gray-500 group-hover:text-gray-300'
|
||||
}`}
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block font-medium leading-tight">{item.label}</span>
|
||||
{item.hint ? (
|
||||
<span
|
||||
className={`block text-[10px] leading-tight mt-0.5 ${
|
||||
active ? 'text-brand-200/70' : 'text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{item.hint}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<Icon className={`w-4 h-4 shrink-0 ${item.iconClass}`} />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -128,40 +138,28 @@ export default function DashboardShell({
|
||||
const [open, setOpen] = useState(false);
|
||||
const close = () => setOpen(false);
|
||||
|
||||
const groups: NavGroup[] = [
|
||||
...CLIENT_GROUPS,
|
||||
...(isAgency
|
||||
? [
|
||||
{
|
||||
title: 'Agencia',
|
||||
items: [
|
||||
{
|
||||
href: '/dashboard/agencia',
|
||||
label: 'Portafolio',
|
||||
hint: 'Todos los clientes',
|
||||
icon: Layers,
|
||||
},
|
||||
],
|
||||
} satisfies NavGroup,
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
const sidebar = (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center gap-3 px-1 py-1 mb-5">
|
||||
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center font-bold text-white text-sm shadow-lg shadow-brand-500/20">
|
||||
4V
|
||||
</div>
|
||||
<div className="flex items-center gap-3 px-2 py-3 border-b border-gray-200 mb-5">
|
||||
<Image
|
||||
src="/logo-4ventures.png"
|
||||
alt="4Ventures"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-lg object-cover shrink-0"
|
||||
priority
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="font-semibold text-sm tracking-wide text-white leading-tight">
|
||||
4Ventures
|
||||
<p className="font-bold text-sm tracking-wide text-gray-900 leading-tight">
|
||||
4VENTURES
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 font-medium leading-tight">
|
||||
Centro de Mando
|
||||
</p>
|
||||
<p className="text-[11px] text-gray-500 leading-tight">Centro de Mando</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="ml-auto md:hidden rounded-lg p-2 text-gray-400 hover:bg-white/5"
|
||||
className="ml-auto md:hidden rounded-lg p-2 text-gray-500 hover:bg-gray-100"
|
||||
onClick={close}
|
||||
aria-label="Cerrar menú"
|
||||
>
|
||||
@@ -169,30 +167,42 @@ export default function DashboardShell({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 overflow-y-auto space-y-5 pr-1">
|
||||
{groups.map((group) => (
|
||||
<div key={group.title}>
|
||||
<p className="px-3 mb-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-gray-600">
|
||||
{group.title}
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{group.items.map((item) => (
|
||||
<NavLink key={item.href} item={item} onNavigate={close} />
|
||||
))}
|
||||
<nav className="flex-1 overflow-y-auto space-y-1.5 pr-1">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<NavLink key={item.href} item={item} onNavigate={close} />
|
||||
))}
|
||||
|
||||
{isAgency ? (
|
||||
<div className="pt-4 mt-4 border-t border-gray-200">
|
||||
<span className="px-3 text-[10px] font-bold uppercase tracking-wider text-gray-400">
|
||||
Agencia OS
|
||||
</span>
|
||||
<div className="mt-1">
|
||||
<NavLink
|
||||
item={{
|
||||
href: '/dashboard/agencia',
|
||||
label: 'Portafolio Agencia',
|
||||
icon: Layers,
|
||||
iconClass: 'text-amber-500',
|
||||
}}
|
||||
onNavigate={close}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
) : null}
|
||||
</nav>
|
||||
|
||||
<div className="pt-4 mt-4 border-t border-white/[0.06] space-y-3">
|
||||
<div className="px-3 py-2.5 rounded-xl bg-white/[0.03] border border-white/[0.06]">
|
||||
<div className="pt-4 mt-4 border-t border-gray-200 space-y-3">
|
||||
<div className="px-2 py-2 rounded-xl bg-gray-50 border border-gray-200">
|
||||
<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>
|
||||
<UserCheck className="w-3.5 h-3.5 text-brand-500 shrink-0" />
|
||||
<p className="text-xs font-medium text-gray-900 truncate">{email}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[10px] text-gray-500 truncate">{company}</span>
|
||||
<span className="text-[9px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded bg-brand-500/15 text-brand-400 shrink-0">
|
||||
<span className="text-[10px] text-gray-500 capitalize truncate">
|
||||
{company}
|
||||
</span>
|
||||
<span className="text-[9px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded bg-brand-50 text-brand-600 shrink-0">
|
||||
{role}
|
||||
</span>
|
||||
</div>
|
||||
@@ -201,70 +211,62 @@ export default function DashboardShell({
|
||||
<form action={logoutAction}>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-xl text-xs font-medium text-gray-400 hover:text-red-300 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 transition-colors"
|
||||
className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-gray-500 hover:text-red-600 hover:bg-red-50 border border-transparent hover:border-red-100 transition-all"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
Cerrar sesión
|
||||
Cerrar Sesión
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="flex items-center gap-1.5 px-2 text-[10px] text-emerald-500/80">
|
||||
<ShieldCheck className="w-3 h-3" />
|
||||
Aislamiento RLS multi-tenant
|
||||
</p>
|
||||
<div className="flex items-center justify-between px-2 pt-1 text-[11px] text-gray-400">
|
||||
<span className="flex items-center gap-1 text-emerald-600">
|
||||
<ShieldCheck className="w-3 h-3" /> RLS Activo
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-background text-gray-100">
|
||||
{/* Desktop sidebar */}
|
||||
<aside className="hidden md:flex w-[260px] shrink-0 flex-col border-r border-white/[0.06] bg-sidebar p-4">
|
||||
<div className="flex min-h-screen bg-background text-gray-900">
|
||||
<aside className="hidden md:flex w-64 shrink-0 flex-col border-r border-gray-200 bg-sidebar p-4">
|
||||
{sidebar}
|
||||
</aside>
|
||||
|
||||
{/* Mobile drawer */}
|
||||
{open ? (
|
||||
<div className="fixed inset-0 z-50 md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-0 bg-black/70"
|
||||
className="absolute inset-0 bg-black/40"
|
||||
aria-label="Cerrar menú"
|
||||
onClick={close}
|
||||
/>
|
||||
<aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar border-r border-white/[0.08] p-4 shadow-2xl">
|
||||
<aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar border-r border-gray-200 p-4 shadow-xl">
|
||||
{sidebar}
|
||||
</aside>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<header className="sticky top-0 z-30 h-14 border-b border-white/[0.06] bg-sidebar/90 backdrop-blur-md px-4 md:px-6 flex items-center gap-3">
|
||||
<header className="sticky top-0 z-30 h-14 border-b border-gray-200 bg-white/90 backdrop-blur-md px-4 md:px-8 flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
className="md:hidden rounded-lg p-2 text-gray-300 hover:bg-white/5"
|
||||
className="md:hidden rounded-lg p-2 text-gray-600 hover:bg-gray-100"
|
||||
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">
|
||||
<span className="hidden sm:inline text-gray-500 shrink-0">
|
||||
{isAgency ? 'Cliente' : 'Portal'}
|
||||
<div className="flex min-w-0 items-center gap-2 text-sm text-gray-500">
|
||||
<span className="hidden sm:inline shrink-0">
|
||||
{isAgency ? 'Contexto:' : 'Cliente / Portal:'}
|
||||
</span>
|
||||
<TenantSwitcher
|
||||
isAgency={isAgency}
|
||||
initialName={viewName || company}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto hidden sm:flex items-center gap-2 text-[11px] text-gray-500">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-2.5 py-1">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||
Operativo
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
|
||||
Reference in New Issue
Block a user