100 lines
3.9 KiB
TypeScript
100 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
LayoutDashboard,
|
|
Radio,
|
|
Package,
|
|
MapPin,
|
|
CreditCard,
|
|
ShoppingBag,
|
|
ArrowLeft,
|
|
Sparkles,
|
|
Store,
|
|
Users,
|
|
MessageSquare,
|
|
} from 'lucide-react';
|
|
|
|
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: '/admin', label: 'Resumen & KPIs', icon: LayoutDashboard },
|
|
{ href: '/admin/grupos-whatsapp', label: 'Grupos WhatsApp', icon: MessageSquare, badge: 'Monitoreo 24/7' },
|
|
{ href: '/admin/usuarios', label: 'Control de Usuarios', icon: Users, badge: 'Roles & Accesos' },
|
|
{ href: '/admin/configuracion', label: 'Datos de la Tienda', icon: Store },
|
|
{ href: '/admin/feed-whatsapp', label: 'Feed WhatsApp & IA', icon: Radio, badge: 'Anti-Duplicados' },
|
|
{ href: '/admin/productos', label: 'Catálogo de Zapatillas', icon: Package },
|
|
{ href: '/admin/ciudades', label: 'Ciudades & Fletes', icon: MapPin },
|
|
{ href: '/admin/metodos-pago', label: 'Medios de Pago & Anticipos', icon: CreditCard },
|
|
{ href: '/admin/pedidos', label: 'Pedidos & Logística', icon: ShoppingBag },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col md:flex-row font-sans">
|
|
{/* Sidebar */}
|
|
<aside className="w-full md:w-64 bg-slate-900/90 backdrop-blur-xl border-r border-cyan-500/20 flex flex-col justify-between shrink-0 p-4">
|
|
<div className="space-y-6">
|
|
{/* Logo */}
|
|
<div className="flex items-center space-x-2.5 px-2">
|
|
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-white shadow-[0_0_15px_rgba(6,182,212,0.4)]">
|
|
<span className="font-black text-sm">A</span>
|
|
</div>
|
|
<div>
|
|
<h2 className="font-black text-sm text-white tracking-wider">ALMEIRA STORE</h2>
|
|
<p className="text-[10px] text-cyan-400 font-bold uppercase tracking-widest">Backoffice Admin</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="space-y-1">
|
|
{NAV_ITEMS.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex items-center justify-between px-3 py-2.5 rounded-xl text-xs font-bold transition-all ${
|
|
isActive
|
|
? 'bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-[0_0_15px_rgba(6,182,212,0.4)]'
|
|
: 'text-slate-400 hover:text-white hover:bg-slate-800'
|
|
}`}
|
|
>
|
|
<div className="flex items-center space-x-2.5">
|
|
<Icon className="w-4 h-4" />
|
|
<span>{item.label}</span>
|
|
</div>
|
|
{item.badge && (
|
|
<span className="text-[9px] bg-cyan-950 text-cyan-300 border border-cyan-500/30 px-1.5 py-0.5 rounded font-mono">
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Return to Store */}
|
|
<div className="pt-4 border-t border-slate-800">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center space-x-2 text-xs font-semibold text-slate-400 hover:text-cyan-300 px-3 py-2 rounded-xl hover:bg-slate-800 transition-all"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>Volver a la Tienda</span>
|
|
</Link>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="flex-1 p-4 sm:p-8 overflow-y-auto bg-slate-950">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|