110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
LayoutDashboard,
|
|
Radio,
|
|
Package,
|
|
MapPin,
|
|
CreditCard,
|
|
ShoppingBag,
|
|
ArrowLeft,
|
|
Sparkles,
|
|
Store,
|
|
Users,
|
|
MessageSquare,
|
|
Building2,
|
|
} 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/proveedores', label: 'Proveedores & Bodegas', icon: Building2, badge: 'Activos/Inactivos' },
|
|
{ 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-neutral-950 text-neutral-100 flex flex-col md:flex-row font-sans">
|
|
{/* Sidebar */}
|
|
<aside className="w-full md:w-64 bg-neutral-900/90 backdrop-blur-xl border-r border-purple-500/20 flex flex-col justify-between shrink-0 p-4">
|
|
<div className="space-y-6">
|
|
{/* Logo */}
|
|
<div className="flex items-center space-x-3 px-2">
|
|
<div className="relative w-10 h-10 rounded-xl overflow-hidden border border-purple-500/40 shadow-[0_0_15px_rgba(168,85,247,0.4)] shrink-0 bg-neutral-950">
|
|
<Image
|
|
src="/d-emblem.png"
|
|
alt="DripZone Admin"
|
|
width={40}
|
|
height={40}
|
|
priority
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h2 className="font-black text-sm text-white tracking-wider">DRIPZONE</h2>
|
|
<p className="text-[10px] text-purple-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-purple-600 to-fuchsia-500 text-white shadow-[0_0_15px_rgba(168,85,247,0.4)]'
|
|
: 'text-neutral-400 hover:text-white hover:bg-neutral-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-purple-950 text-purple-300 border border-purple-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-neutral-800">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center space-x-2 text-xs font-semibold text-neutral-400 hover:text-purple-400 px-3 py-2 rounded-xl hover:bg-neutral-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-neutral-950">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|