put adminleftnavigation in a component, toi unclutter the page

app/admin/layout.tsx

@@ -1,6 +1,7 @@
 "use client";
 import type React from "react";
 import { useState } from "react";
+import AdminLeftNavigation from "@/components/AdminLeftNavigation";
 import {
   LayoutDashboard,
   Download,
@@ -8,10 +9,10 @@ import {
   Boxes,
   Store,
   Users,
-  Settings, LucideMail,
+  Settings,
+  LucideMail,
 } from "lucide-react";
 
-
 const navItems = [
   {
     label: "Dashboard",
@@ -38,13 +39,18 @@ const navItems = [
     href: "/admin/merchants",
     icon: <Store className="h-4 w-4" />,
   },
+  {
+    label: "Platforms",
+    href: "/admin/platforms",
+    icon: <Layers className="h-4 w-4" />,
+  },
   {
     label: "Users",
     href: "/admin/users",
     icon: <Users className="h-4 w-4" />,
   },
   {
-    label: "Settings (TO DO)",
+    label: "Settings",
     href: "/admin/settings",
     icon: <Settings className="h-4 w-4" />,
   },
@@ -60,6 +66,7 @@ const navItems = [
   },
 ];
 
+// ... existing code ...
 // ADMIN CHECK FOR LOGIN
 // const { user, loading } = useAuth();
 
@@ -69,72 +76,17 @@ const navItems = [
 
 export default function AdminLayout({
                                       children,
-}: {
+                                    }: {
   children: React.ReactNode;
 }) {
   const [collapsed, setCollapsed] = useState(false);
+
   return (
       <div className="flex min-h-screen bg-black text-zinc-50">
-      {/* Sidebar */}
+        <AdminLeftNavigation
-      <aside
+            collapsed={collapsed}
-        className={`hidden border-r border-zinc-900 bg-zinc-950/80 px-3 py-6 md:flex md:flex-col transition-all duration-200 ${
+            onToggleCollapsed={() => setCollapsed((v) => !v)}
-          collapsed ? "w-16" : "w-60"
+        />
-        }`}
-      >
-        <div className="mb-6 flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => setCollapsed((v) => !v)}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 transition hover:border-amber-400/60 hover:text-amber-300"
-          >
-            <span className="sr-only">Toggle sidebar</span>
-            <div className="space-y-0.5">
-              <span className="block h-[1px] w-3 bg-current" />
-              <span className="block h-[1px] w-3 bg-current" />
-              <span className="block h-[1px] w-3 bg-current" />
-            </div>
-          </button>
-
-          {!collapsed && (
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
-                Battl Builders
-              </p>
-              <p className="text-[10px] text-zinc-600">Admin Command</p>
-            </div>
-          )}
-        </div>
-
-        <nav className="flex-1 space-y-1 text-sm">
-          {navItems.map((item) => (
-            <a
-              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"
-            >
-              <div className="flex items-center gap-2">
-                {item.icon}
-                {!collapsed && <span>{item.label}</span>}
-              </div>
-              {!collapsed && (
-                <span className="text-[10px] text-zinc-600">›</span>
-              )}
-            </a>
-          ))}
-        </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="mt-1">
-              Import engine: <span className="text-emerald-400">online</span>
-            </p>
-            <p className="text-zinc-500">Builder UI: in progress</p>
-          </div>
-        )}
-      </aside>
 
         {/* Main column */}
         <div className="flex min-h-screen flex-1 flex-col">

app/admin/platforms/page.tsx

@@ -0,0 +1,301 @@
+// app/admin/platforms/page.tsx
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Plus, Pencil, Trash2, X } from "lucide-react";
+import { useAuth } from "@/context/AuthContext";
+import {
+  createPlatform,
+  deletePlatform,
+  fetchPlatforms,
+  updatePlatform,
+  type Platform,
+  type CreatePlatformDto,
+  type UpdatePlatformDto,
+} from "@/lib/api/platforms";
+
+export default function AdminPlatformsPage() {
+  const { getAuthHeaders } = useAuth();
+
+  const [platforms, setPlatforms] = useState<Platform[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [showModal, setShowModal] = useState(false);
+  const [modalMode, setModalMode] = useState<"create" | "edit">("create");
+  const [selected, setSelected] = useState<Platform | null>(null);
+
+  const [form, setForm] = useState<CreatePlatformDto>({
+    key: "",
+    label: "",
+    isActive: true,
+  });
+
+  async function load() {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await fetchPlatforms(getAuthHeaders());
+      setPlatforms(data);
+    } catch (e: any) {
+      console.error(e);
+      setError(e?.message ?? "Failed to load platforms");
+      setPlatforms([]);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const sorted = useMemo(() => {
+    return [...platforms].sort((a, b) => a.key.localeCompare(b.key));
+  }, [platforms]);
+
+  function openCreate() {
+    setModalMode("create");
+    setSelected(null);
+    setForm({ key: "", label: "", isActive: true });
+    setShowModal(true);
+  }
+
+  function openEdit(p: Platform) {
+    setModalMode("edit");
+    setSelected(p);
+    setForm({ key: p.key, label: p.label, isActive: p.isActive });
+    setShowModal(true);
+  }
+
+  async function onDelete(p: Platform) {
+    if (!window.confirm(`Delete platform "${p.key}"? This cannot be undone.`)) return;
+
+    try {
+      setSaving(true);
+      setError(null);
+      await deletePlatform(getAuthHeaders(), p.id);
+      await load();
+    } catch (e: any) {
+      console.error(e);
+      setError(e?.message ?? "Failed to delete platform");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    const key = (form.key ?? "").trim();
+    const label = (form.label ?? "").trim();
+
+    if (!key || !label) {
+      setError("Key and Label are required.");
+      return;
+    }
+
+    try {
+      setSaving(true);
+      setError(null);
+
+      if (modalMode === "create") {
+        await createPlatform(getAuthHeaders(), { ...form, key, label });
+      } else if (selected) {
+        const update: UpdatePlatformDto = {};
+        if (key !== selected.key) update.key = key;
+        if (label !== selected.label) update.label = label;
+        if ((form.isActive ?? true) !== selected.isActive) update.isActive = form.isActive;
+
+        await updatePlatform(getAuthHeaders(), selected.id, update);
+      }
+
+      setShowModal(false);
+      await load();
+    } catch (e: any) {
+      console.error(e);
+      setError(e?.message ?? "Failed to save platform");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-1 flex-col gap-4">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h1 className="text-base font-semibold text-zinc-100">Platforms</h1>
+          <p className="mt-1 text-xs text-zinc-500">
+            Manage canonical platforms used across products and filtering.
+          </p>
+        </div>
+
+        <button
+          type="button"
+          onClick={openCreate}
+          className="inline-flex items-center gap-2 rounded-md bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-50"
+          disabled={loading || saving}
+        >
+          <Plus size={14} />
+          Add Platform
+        </button>
+      </div>
+
+      {error && (
+        <div className="rounded-md border border-red-900/60 bg-red-950/40 px-3 py-2 text-xs text-red-200">
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="text-sm text-zinc-400">Loading…</div>
+      ) : sorted.length === 0 ? (
+        <div className="rounded-md border border-zinc-900 bg-zinc-950 px-4 py-6 text-sm text-zinc-400">
+          No platforms found.
+        </div>
+      ) : (
+        <div className="overflow-hidden rounded-md border border-zinc-900 bg-zinc-950">
+          <table className="min-w-full border-separate border-spacing-0 text-xs">
+            <thead className="bg-zinc-950/80">
+              <tr className="text-left text-[11px] uppercase tracking-[0.16em] text-zinc-500">
+                <th className="border-b border-zinc-900 px-3 py-2">ID</th>
+                <th className="border-b border-zinc-900 px-3 py-2">Key</th>
+                <th className="border-b border-zinc-900 px-3 py-2">Label</th>
+                <th className="border-b border-zinc-900 px-3 py-2">Active</th>
+                <th className="border-b border-zinc-900 px-3 py-2 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map((p, idx) => (
+                <tr
+                  key={p.id}
+                  className={idx % 2 === 0 ? "bg-zinc-950" : "bg-zinc-950/60"}
+                >
+                  <td className="border-b border-zinc-900 px-3 py-2 text-zinc-400">
+                    {p.id}
+                  </td>
+                  <td className="border-b border-zinc-900 px-3 py-2 text-zinc-100">
+                    {p.key}
+                  </td>
+                  <td className="border-b border-zinc-900 px-3 py-2 text-zinc-300">
+                    {p.label}
+                  </td>
+                  <td className="border-b border-zinc-900 px-3 py-2">
+                    <span
+                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                        p.isActive
+                          ? "border border-emerald-500/40 bg-emerald-500/10 text-emerald-200"
+                          : "border border-zinc-700 bg-zinc-900 text-zinc-400"
+                      }`}
+                    >
+                      {p.isActive ? "ACTIVE" : "INACTIVE"}
+                    </span>
+                  </td>
+                  <td className="border-b border-zinc-900 px-3 py-2 text-right">
+                    <div className="inline-flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() => openEdit(p)}
+                        className="rounded p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+                        title="Edit"
+                        disabled={saving}
+                      >
+                        <Pencil size={14} />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => void onDelete(p)}
+                        className="rounded p-1 text-zinc-400 hover:bg-red-900/50 hover:text-red-400"
+                        title="Delete"
+                        disabled={saving}
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+          <div className="w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-950 p-6 shadow-xl">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-base font-semibold">
+                {modalMode === "create" ? "Create Platform" : "Edit Platform"}
+              </h2>
+              <button
+                type="button"
+                onClick={() => setShowModal(false)}
+                className="rounded p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <form onSubmit={onSubmit} className="space-y-4">
+              <div>
+                <label className="mb-1 block text-xs font-medium text-zinc-300">
+                  Key
+                </label>
+                <input
+                  value={form.key}
+                  onChange={(e) => setForm((s) => ({ ...s, key: e.target.value }))}
+                  className="w-full rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-amber-400/80 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                  placeholder="AR15"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="mb-1 block text-xs font-medium text-zinc-300">
+                  Label
+                </label>
+                <input
+                  value={form.label}
+                  onChange={(e) => setForm((s) => ({ ...s, label: e.target.value }))}
+                  className="w-full rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-amber-400/80 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                  placeholder="AR-15"
+                  required
+                />
+              </div>
+
+              <label className="flex items-center gap-2 text-xs text-zinc-300">
+                <input
+                  type="checkbox"
+                  checked={!!form.isActive}
+                  onChange={(e) => setForm((s) => ({ ...s, isActive: e.target.checked }))}
+                  className="h-4 w-4 rounded border-zinc-700 bg-zinc-900 text-amber-400"
+                />
+                Active
+              </label>
+
+              <div className="flex gap-2 pt-2">
+                <button
+                  type="button"
+                  onClick={() => setShowModal(false)}
+                  className="flex-1 rounded-md border border-zinc-700 px-4 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800"
+                  disabled={saving}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 rounded-md bg-emerald-600 px-4 py-2 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-50"
+                  disabled={saving}
+                >
+                  {saving ? "Saving…" : modalMode === "create" ? "Create" : "Update"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/settings/page.tsx

@@ -0,0 +1,34 @@
+// app/admin/settings/page.tsx
+"use client";
+
+import { Settings } from "lucide-react";
+
+export default function Page() {
+  return (
+    <div className="flex flex-1 flex-col gap-4">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h1 className="text-base font-semibold text-zinc-100">Settings</h1>
+          <p className="mt-1 text-xs text-zinc-500">
+            Admin configuration and environment controls.
+          </p>
+        </div>
+      </div>
+
+      <div className="rounded-md border border-zinc-900 bg-zinc-950 px-6 py-10">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-300">
+            <Settings className="h-5 w-5" />
+          </div>
+
+          <div>
+            <p className="text-sm font-semibold text-zinc-100">Coming soon</p>
+            <p className="mt-1 text-xs text-zinc-500">
+              This section is under construction. Check back after the next deploy.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/AdminLeftNavigation.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import type React from "react";
+import {
+  LayoutDashboard,
+  Download,
+  Layers,
+  Boxes,
+  Store,
+  Users,
+  Settings,
+  LucideMail,
+} from "lucide-react";
+
+type AdminLeftNavigationProps = {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+};
+
+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: "Users",
+    href: "/admin/users",
+    icon: <Users className="h-4 w-4" />,
+  },
+  {
+    label: "Settings",
+    href: "/admin/settings",
+    icon: <Settings className="h-4 w-4" />,
+  },
+  {
+    label: "List Emails",
+    href: "/admin/email",
+    icon: <LucideMail className="h-4 w-4" />,
+  },
+  {
+    label: "Send a Email",
+    href: "/admin/email/send",
+    icon: <LucideMail className="h-4 w-4" />,
+  },
+];
+
+export default function AdminLeftNavigation({
+  collapsed,
+  onToggleCollapsed,
+}: AdminLeftNavigationProps) {
+  return (
+    <aside
+      className={`hidden border-r border-zinc-900 bg-zinc-950/80 px-3 py-6 md:flex md:flex-col transition-all duration-200 ${
+        collapsed ? "w-16" : "w-60"
+      }`}
+    >
+      <div className="mb-6 flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onToggleCollapsed}
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 transition hover:border-amber-400/60 hover:text-amber-300"
+        >
+          <span className="sr-only">Toggle sidebar</span>
+          <div className="space-y-0.5">
+            <span className="block h-[1px] w-3 bg-current" />
+            <span className="block h-[1px] w-3 bg-current" />
+            <span className="block h-[1px] w-3 bg-current" />
+          </div>
+        </button>
+
+        {!collapsed && (
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
+              Battl Builders
+            </p>
+            <p className="text-[10px] text-zinc-600">Admin Command</p>
+          </div>
+        )}
+      </div>
+
+      <nav className="flex-1 space-y-1 text-sm">
+        {navItems.map((item) => (
+          <a
+            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"
+          >
+            <div className="flex items-center gap-2">
+              {item.icon}
+              {!collapsed && <span>{item.label}</span>}
+            </div>
+            {!collapsed && <span className="text-[10px] text-zinc-600">›</span>}
+          </a>
+        ))}
+      </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="mt-1">
+            Import engine: <span className="text-emerald-400">online</span>
+          </p>
+          <p className="text-zinc-500">Builder UI: in progress</p>
+        </div>
+      )}
+    </aside>
+  );
+}

lib/api/platforms.ts

@@ -0,0 +1,103 @@
+// lib/api/platforms.ts
+export type Platform = {
+  id: number;
+  key: string;
+  label: string;
+  isActive: boolean;
+};
+
+export type CreatePlatformDto = {
+  key: string;
+  label: string;
+  isActive?: boolean;
+};
+
+export type UpdatePlatformDto = Partial<CreatePlatformDto>;
+
+const API_BASE =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+function normalizePlatform(raw: any): Platform {
+  const id = Number(raw?.id);
+  const key = String(raw?.key ?? "").trim();
+  const label = String(raw?.label ?? "").trim();
+
+  const activeRaw = raw?.isActive ?? raw?.is_active ?? true;
+  const isActive =
+    typeof activeRaw === "boolean"
+      ? activeRaw
+      : typeof activeRaw === "number"
+        ? activeRaw === 1
+        : String(activeRaw).toLowerCase() === "true";
+
+  return { id, key, label, isActive };
+}
+
+export async function fetchPlatforms(tokenHeaders: HeadersInit): Promise<Platform[]> {
+  const res = await fetch(`${API_BASE}/api/platforms`, {
+    headers: { ...tokenHeaders },
+  });
+
+  if (!res.ok) {
+    throw new Error(`Failed to load platforms (${res.status})`);
+  }
+
+  const data = (await res.json()) as unknown;
+  const items = Array.isArray(data) ? data : [];
+  return items.map(normalizePlatform).filter((p) => Number.isFinite(p.id) && p.key && p.label);
+}
+
+export async function createPlatform(
+  tokenHeaders: HeadersInit,
+  dto: CreatePlatformDto
+): Promise<Platform> {
+  const res = await fetch(`${API_BASE}/api/platforms`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...tokenHeaders,
+    },
+    body: JSON.stringify(dto),
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(text || `Failed to create platform (${res.status})`);
+  }
+
+  return normalizePlatform(await res.json());
+}
+
+export async function updatePlatform(
+  tokenHeaders: HeadersInit,
+  id: number,
+  dto: UpdatePlatformDto
+): Promise<Platform> {
+  const res = await fetch(`${API_BASE}/api/platforms/${id}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      ...tokenHeaders,
+    },
+    body: JSON.stringify(dto),
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(text || `Failed to update platform (${res.status})`);
+  }
+
+  return normalizePlatform(await res.json());
+}
+
+export async function deletePlatform(tokenHeaders: HeadersInit, id: number): Promise<void> {
+  const res = await fetch(`${API_BASE}/api/platforms/${id}`, {
+    method: "DELETE",
+    headers: { ...tokenHeaders },
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(text || `Failed to delete platform (${res.status})`);
+  }
+}