set admin behind a cookie and check role on profile

components/AdminLeftNavigation.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type React from "react";
+import Link from "next/link";
 import {
   LayoutDashboard,
   Download,
@@ -12,74 +13,37 @@ import {
   LucideMail,
   Wand2,
 } from "lucide-react";
-import Link from "next/link";
+
+export type AdminNavItem = {
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+};
 
 type AdminLeftNavigationProps = {
   collapsed: boolean;
   onToggleCollapsed: () => void;
+  items?: AdminNavItem[]; // ✅ NEW
 };
 
-const navItems = [
-  {
-    label: "Dashboard",
-    href: "/admin",
-    icon: <LayoutDashboard className="h-4 w-4" />,
-  },
-  {
-    label: "Imports",
-    href: "/admin/import-status",
-    icon: <Download className="h-4 w-4" />,
-  },
-  {
-    label: "Mappings",
-    href: "/admin/mapping",
-    icon: <Layers className="h-4 w-4" />,
-  },
-  {
-    label: "Products",
-    href: "/admin/products",
-    icon: <Boxes className="h-4 w-4" />,
-  },
-  {
-    label: "Merchants",
-    href: "/admin/merchants",
-    icon: <Store className="h-4 w-4" />,
-  },
-  {
-    label: "Platforms",
-    href: "/admin/platforms",
-    icon: <Layers className="h-4 w-4" />,
-  },
-  {
-    label: "Enrichment",
-    href: "/admin/enrichment",
-    icon: <Wand2 className="h-4 w-4" />,
-  },
-  {
-    label: "Users",
-    href: "/admin/users",
-    icon: <Users className="h-4 w-4" />,
-  },
-  {
-    label: "Settings",
-    href: "/admin/settings",
-    icon: <Settings className="h-4 w-4" />,
-  },
-  {
-    label: "Manage Emails",
-    href: "/admin/email/manage",
-    icon: <LucideMail className="h-4 w-4" />,
-  },
-  {
-    label: "Send a Email",
-    href: "/admin/email/send",
-    icon: <LucideMail className="h-4 w-4" />,
-  },
+const defaultNavItems: AdminNavItem[] = [
+  { label: "Dashboard", href: "/admin", icon: <LayoutDashboard className="h-4 w-4" /> },
+  { label: "Imports", href: "/admin/import-status", icon: <Download className="h-4 w-4" /> },
+  { label: "Mappings", href: "/admin/mapping", icon: <Layers className="h-4 w-4" /> },
+  { label: "Products", href: "/admin/products", icon: <Boxes className="h-4 w-4" /> },
+  { label: "Merchants", href: "/admin/merchants", icon: <Store className="h-4 w-4" /> },
+  { label: "Platforms", href: "/admin/platforms", icon: <Layers className="h-4 w-4" /> },
+  { label: "Enrichment", href: "/admin/enrichment", icon: <Wand2 className="h-4 w-4" /> },
+  { label: "Users", href: "/admin/users", icon: <Users className="h-4 w-4" /> },
+  { label: "Settings", href: "/admin/settings", icon: <Settings className="h-4 w-4" /> },
+  { label: "Manage Emails", href: "/admin/email/manage", icon: <LucideMail className="h-4 w-4" /> },
+  { label: "Send an Email", href: "/admin/email/send", icon: <LucideMail className="h-4 w-4" /> },
 ];
 
 export default function AdminLeftNavigation({
   collapsed,
   onToggleCollapsed,
+  items = defaultNavItems, // ✅ NEW default
 }: AdminLeftNavigationProps) {
   return (
     <aside
@@ -104,7 +68,9 @@ export default function AdminLeftNavigation({
         {!collapsed && (
           <div>
             <p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
-              <Link href={"/"} title={"Back to Battl Dashboard"} >Battl Builders</Link>
+              <Link href="/" title="Back to Battl Dashboard">
+                Battl Builders
+              </Link>
             </p>
             <p className="text-[10px] text-zinc-600">Admin Command</p>
           </div>
@@ -112,8 +78,8 @@ export default function AdminLeftNavigation({
       </div>
 
       <nav className="flex-1 space-y-1 text-sm">
-        {navItems.map((item) => (
-          <a
+        {items.map((item) => (
+          <Link
             key={item.href}
             href={item.href}
             className="flex items-center justify-between rounded-md px-2 py-1.5 text-zinc-300 transition hover:bg-zinc-900 hover:text-amber-300"
@@ -123,15 +89,13 @@ export default function AdminLeftNavigation({
               {!collapsed && <span>{item.label}</span>}
             </div>
             {!collapsed && <span className="text-[10px] text-zinc-600">›</span>}
-          </a>
+          </Link>
         ))}
       </nav>
 
       {!collapsed && (
         <div className="mt-6 border-t border-zinc-900 pt-4 text-[11px] text-zinc-600">
-          <p className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
-            Status
-          </p>
+          <p className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">Status</p>
           <p className="mt-1">
             Import engine: <span className="text-emerald-400">online</span>
           </p>
@@ -140,4 +104,4 @@ export default function AdminLeftNavigation({
       )}
     </aside>
   );
-}
+}