lots of admin stuff. admin layout, user mangement page, new landing page, etc

2025-12-08 07:08:54 -05:00
parent ce05593127
commit 2cd871b529
18 changed files with 807 additions and 80 deletions
@@ -0,0 +1,157 @@
+"use client";
+import type React from "react";
+import { useState } from "react";
+import {
+  LayoutDashboard,
+  Download,
+  Layers,
+  Boxes,
+  Store,
+  Users,
+  Settings,
+} from "lucide-react";
+
+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 (TO DO)",
+    href: "/admin/products",
+    icon: <Boxes className="h-4 w-4" />,
+  },
+  {
+    label: "Merchants",
+    href: "/admin/merchants",
+    icon: <Store className="h-4 w-4" />,
+  },
+  {
+    label: "Users (TO DO)",
+    href: "/admin/users",
+    icon: <Users className="h-4 w-4" />,
+  },
+  {
+    label: "Settings (TO DO)",
+    href: "/admin/settings",
+    icon: <Settings className="h-4 w-4" />,
+  },
+];
+
+// ADMIN CHECK FOR LOGIN
+// const { user, loading } = useAuth();
+
+// if (!loading && user?.role !== "ADMIN") {
+//   redirect("/"); // or /login
+// }
+
+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 */}
+      <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={() => 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">
+        {/* Top bar */}
+        <header className="flex items-center justify-between border-b border-zinc-900 bg-zinc-950/70 px-4 py-3">
+          <div>
+            <p className="text-xs uppercase tracking-[0.18em] text-zinc-500">
+              Admin
+            </p>
+            <p className="text-sm text-zinc-200">
+              Battl Builders Control Panel
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="rounded-full border border-amber-500/30 bg-amber-500/10 px-3 py-1 text-[11px] font-medium text-amber-300">
+              Internal • v0.1
+            </span>
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-900 text-[11px] text-zinc-300">
+              ADMIN
+            </div>
+          </div>
+        </header>
+
+        {/* Content */}
+        <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}