Merge remote-tracking branch 'refs/remotes/origin/develop' into develop

.env-local

@@ -1 +0,0 @@
-NEXT_PUBLIC_API_BASE_URL=http://localhost:8080

.env.local

@@ -0,0 +1,10 @@
+
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
+BACKEND_BASE_URL=http://localhost:8080
+
+# Middleware to limited site to only root page
+NEXT_PUBLIC_LAUNCH_ONLY_ROOT=false
+
+# Brevo API key for beta sign up collection
+BREVO_API_KEY=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
+BREVO_LIST_ID=9

.env.production

@@ -0,0 +1,9 @@
+
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
+
+# Middleware to limited site to only root page
+NEXT_PUBLIC_LAUNCH_ONLY_ROOT=false
+
+# Brevo API key for beta sign up collection
+BREVO_API_KEY=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
+BREVO_LIST_ID=9

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/dataSources.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="postgres@r710.dev.gofwd.group" uuid="54ed6f82-1373-4766-8855-7dd5f698a5ec">
+      <driver-ref>postgresql</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>org.postgresql.Driver</jdbc-driver>
+      <jdbc-url>jdbc:postgresql://r710.dev.gofwd.group:5433/postgres</jdbc-url>
+      <jdbc-additional-properties>
+        <property name="com.intellij.clouds.kubernetes.db.host.port" />
+        <property name="com.intellij.clouds.kubernetes.db.enabled" value="false" />
+        <property name="com.intellij.clouds.kubernetes.db.container.port" />
+      </jdbc-additional-properties>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>

.idea/data_source_mapping.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourcePerFileMappings">
+    <file url="file://$PROJECT_DIR$/.idea/queries/Query.sql" value="54ed6f82-1373-4766-8855-7dd5f698a5ec" />
+  </component>
+</project>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/shadow-gunbuilder-ai-proto.iml" filepath="$PROJECT_DIR$/.idea/shadow-gunbuilder-ai-proto.iml" />
+    </modules>
+  </component>
+</project>

.idea/shadow-gunbuilder-ai-proto.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/sqldialects.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SqlDialectMappings">
+    <file url="file://$PROJECT_DIR$/.idea/queries/Query.sql" dialect="PostgreSQL" />
+    <file url="file://$PROJECT_DIR$/schema-example.sql" dialect="PostgreSQL" />
+    <file url="PROJECT" dialect="PostgreSQL" />
+  </component>
+</project>

.idea/vcs.xml

@@ -3,4 +3,4 @@
   <component name="VcsDirectoryMappings">
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
-</project>
+</project>

.idea/workspace.xml

@@ -1,93 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AutoImportSettings">
-    <option name="autoReloadType" value="SELECTIVE" />
-  </component>
-  <component name="ChangeListManager">
-    <list default="true" id="261566a2-3672-4898-b754-916bbdb2063b" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/next-env.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/next-env.d.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/tsconfig.json" afterDir="false" />
-    </list>
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-  </component>
-  <component name="ProjectColorInfo">{
-  &quot;associatedIndex&quot;: 1
-}</component>
-  <component name="ProjectId" id="361l08WqyxLtDro87xvcOWn3FhH" />
-  <component name="ProjectViewState">
-    <option name="hideEmptyMiddlePackages" value="true" />
-    <option name="showLibraryContents" value="true" />
-  </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;js.debugger.nextJs.config.created.client&quot;: &quot;true&quot;,
-    &quot;js.debugger.nextJs.config.created.server&quot;: &quot;true&quot;,
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;//wsl.localhost/Arch/home/don/code/shadow-gunbuilder-ai-proto&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
-  }
-}</component>
-  <component name="RunManager" selected="npm.Next.js: server-side">
-    <configuration name="Next.js: debug client-side" type="JavascriptDebugType" uri="http://localhost:3000/">
-      <method v="2" />
-    </configuration>
-    <configuration name="Next.js: server-side" type="js.build_tools.npm">
-      <package-json value="$PROJECT_DIR$/package.json" />
-      <command value="run" />
-      <scripts>
-        <script value="dev" />
-      </scripts>
-      <node-interpreter value="project" />
-      <envs />
-      <method v="2" />
-    </configuration>
-  </component>
-  <component name="SharedIndexes">
-    <attachedChunks>
-      <set>
-        <option value="bundled-jdk-9823dce3aa75-bf35d07a577b-intellij.indexing.shared.core-IU-252.27397.103" />
-        <option value="bundled-js-predefined-d6986cc7102b-3aa1da707db6-JavaScript-IU-252.27397.103" />
-      </set>
-    </attachedChunks>
-  </component>
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="261566a2-3672-4898-b754-916bbdb2063b" name="Changes" comment="" />
-      <created>1764181733358</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1764181733358</updated>
-      <workItem from="1764181734592" duration="78000" />
-      <workItem from="1764181824336" duration="9367000" />
-    </task>
-    <servers />
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="3" />
-  </component>
-  <component name="github-copilot-workspace">
-    <instructionFileLocations>
-      <option value=".github/instructions" />
-    </instructionFileLocations>
-    <promptFileLocations>
-      <option value=".github/prompts" />
-    </promptFileLocations>
-  </component>
-</project>

README.md

@@ -11,7 +11,7 @@ This is an internal tool built for speed, clarity, and capability.
 # 🚀 What This Admin UI Does
 
 ## Merchant Feeds  
-Path: `/gunbuilder/admin/merchants`
+Path: `//admin/merchants`
 
 A clean dashboard for all merchants feeding the system.
 
@@ -26,7 +26,7 @@ Purpose: keep the catalog alive, current, and trustworthy.
 ---
 
 ## Category Mapping  
-Path: `/gunbuilder/admin/category-mapping`
+Path: `/builder/admin/category-mapping`
 
 This is where raw merchant chaos gets cleaned up.
 
@@ -42,7 +42,7 @@ Once mapped, future imports classify parts automatically.
 
 ## Builder Integration
 
-The admin UI powers the consumer-facing Builder at `/gunbuilder`.
+The admin UI powers the consumer-facing Builder at `/builder`.
 
 Today:
 - Load compatible parts  
@@ -80,13 +80,13 @@ pnpm install
 Create `.env.local`:
 
 NEXT_PUBLIC_API_BASE_URL=http://localhost:8080  
-NEXT_PUBLIC_ADMIN_BASE_PATH=/gunbuilder/admin  
+NEXT_PUBLIC_ADMIN_BASE_PATH=/builder/admin  
 
 ## Start Dev Server
 npm run dev  
 
 Then visit:  
-http://localhost:3000/gunbuilder/admin
+http://localhost:3000/builder/admin
 
 ---
 
@@ -103,7 +103,7 @@ If CORS fails, the admin cannot communicate with the API.
 # 🧭 Project Structure
 
 app/  
-  gunbuilder/  
+  builder/  
     admin/  
       merchants/  
       category-mapping/  

app/(account)/account/page.tsx

@@ -0,0 +1,44 @@
+// app/(account)/account/page.tsx
+"use client";
+
+import { useAuth } from "@/context/AuthContext";
+
+export default function AccountPage() {
+  const { user, loading } = useAuth();
+
+  if (loading) return <div className="text-sm opacity-70">Loading…</div>;
+
+  if (!user) {
+    return (
+      <div className="text-sm opacity-70">
+        You’re not logged in. Please log in to view your account.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold">Profile</h2>
+        <p className="text-sm opacity-70">
+          Basic account info (we’ll expand this soon).
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-white/10 bg-white/5 p-4 space-y-2">
+        <div className="text-sm">
+          <span className="opacity-70">Email:</span>{" "}
+          <span className="font-medium">{user.email}</span>
+        </div>
+        <div className="text-sm">
+          <span className="opacity-70">Display name:</span>{" "}
+          <span className="font-medium">{user.displayName || "—"}</span>
+        </div>
+        <div className="text-sm">
+          <span className="opacity-70">Role:</span>{" "}
+          <span className="font-medium">{user.role}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(account)/layout.tsx

@@ -0,0 +1,60 @@
+// app/(account)/layout.tsx
+import Link from "next/link";
+
+const nav = [
+  { href: "/account", label: "My Account" },
+  { href: "/account/settings", label: "Settings" },
+];
+
+export default function AccountLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen">
+      <div className="mx-auto max-w-6xl px-4 py-6">
+        {/* Header */}
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold">Account</h1>
+            <p className="text-sm opacity-70">
+              Profile, password, and account settings.
+            </p>
+          </div>
+
+          <Link href="/builder" className="text-sm opacity-80 hover:underline">
+            ← Back to Builder
+          </Link>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-[240px_1fr]">
+          <aside className="rounded-xl border border-white/10 bg-white/5 p-3">
+            <nav className="flex flex-col gap-1">
+              {nav.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="rounded-lg px-3 py-2 text-sm opacity-80 hover:bg-white/10 hover:opacity-100"
+                >
+                  {item.label}
+                </Link>
+              ))}
+              <div className="my-2 border-t border-white/10" />
+              <Link
+                href="/vault"
+                className="rounded-lg px-3 py-2 text-sm opacity-80 hover:bg-white/10 hover:opacity-100"
+              >
+                My Vault
+              </Link>
+            </nav>
+          </aside>
+
+          <main className="rounded-xl border border-white/10 bg-white/5 p-4">
+            {children}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(builder)/builder/layout.tsx

@@ -0,0 +1,6 @@
+// app/(builder)/builder/layout.tsx
+import type { ReactNode } from "react";
+
+export default function BuilderLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

app/(builder)/layout.tsx

@@ -0,0 +1,15 @@
+// app/(builder)/layout.tsx
+import type { ReactNode } from "react";
+
+import { BuilderNav } from "@/components/BuilderNav";
+import { TopNav } from "@/components/TopNav";
+
+export default function BuilderLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-white text-zinc-900 dark:bg-neutral-950 dark:text-zinc-50">
+      <TopNav />
+      <BuilderNav />
+      <main className="min-h-screen">{children}</main>
+    </div>
+  );
+}

app/(builder)/parts/[partRole]/[productSlug]/page.tsx

@@ -0,0 +1,431 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import type { CategoryId } from "@/types/gunbuilder";
+import {
+  PART_ROLE_TO_CATEGORY,
+  normalizePartRole,
+} from "@/lib/catalogMappings";
+
+type GunbuilderProductFromApi = {
+  id: number;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  price: number | null;
+  imageUrl: string | null;
+  buyUrl: string | null;
+  inStock?: boolean | null;
+};
+
+type BuildState = Partial<Record<CategoryId, string>>;
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+const STORAGE_KEY = "gunbuilder-build-state";
+
+const PLATFORMS = ["AR-15", "AR-10", "AR-9"] as const;
+
+function extractNumericId(productSlug: string): number | null {
+  if (!productSlug) return null;
+  const first = productSlug.split("-")[0];
+  const n = Number(first);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
+
+function formatPrice(price: number | null | undefined): string {
+  if (price == null) return "—";
+  return `$${price.toFixed(2)}`;
+}
+
+export default function ProductDetailsPage() {
+  const params = useParams();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // NEW ROUTE PARAMS:
+  const platformParam = String(params.platform ?? "");
+  const partRoleParam = String(params.partRole ?? "");
+  const productSlug = String(params.productSlug ?? "");
+
+  // Platform comes from path segment (fallback to ?platform just in case)
+  const platform =
+    platformParam ||
+    (searchParams.get("platform") as string) ||
+    "AR-15";
+
+  const normalizedRole = useMemo(
+    () => normalizePartRole(partRoleParam),
+    [partRoleParam]
+  );
+
+  const categoryId = useMemo(() => {
+    return PART_ROLE_TO_CATEGORY[partRoleParam] ?? PART_ROLE_TO_CATEGORY[normalizedRole] ?? null;
+  }, [partRoleParam, normalizedRole]);
+
+  const numericId = useMemo(
+    () => extractNumericId(productSlug),
+    [productSlug]
+  );
+
+  // Read-only build state (builder page owns writes)
+  const [build] = useState<BuildState>(() => {
+    if (typeof window === "undefined") return {};
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY);
+      return stored ? (JSON.parse(stored) as BuildState) : {};
+    } catch {
+      return {};
+    }
+  });
+
+  const selectedPartIdForCategory = categoryId ? build?.[categoryId] : undefined;
+  const isSelected =
+    !!categoryId &&
+    selectedPartIdForCategory === (numericId ? String(numericId) : "");
+
+  const [product, setProduct] = useState<GunbuilderProductFromApi | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // If platform segment is missing/empty, normalize into the new route (not /builder)
+  useEffect(() => {
+    if (platformParam) return;
+
+    const qp = new URLSearchParams(searchParams.toString());
+    qp.set("platform", platform || "AR-15");
+
+    router.replace(
+      `/parts/p/${encodeURIComponent(platform || "AR-15")}/${encodeURIComponent(
+        partRoleParam
+      )}/${encodeURIComponent(productSlug)}?${qp.toString()}`
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platformParam, platform, partRoleParam, productSlug, router, searchParams]);
+
+  // Fetch product
+  useEffect(() => {
+    if (!numericId) {
+      setError("Invalid product id.");
+      setLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+
+    async function fetchProduct() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const url = `${API_BASE_URL}/api/v1/products/${numericId}`;
+        const res = await fetch(url, { signal: controller.signal });
+
+        if (!res.ok) {
+          throw new Error(`Failed to load product (${res.status})`);
+        }
+
+        const data: GunbuilderProductFromApi = await res.json();
+        setProduct(data);
+      } catch (err: any) {
+        if (err?.name === "AbortError") return;
+        setError(err?.message ?? "Failed to load product");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchProduct();
+
+    return () => controller.abort();
+  }, [numericId]);
+
+  const handleTogglePart = () => {
+    if (!numericId) return;
+
+    // If mapping is missing, don’t send a bogus builder action
+    if (!categoryId) {
+      alert(
+        `No CategoryId mapping found for partRole "${partRoleParam}". Add it in catalogMappings.`
+      );
+      return;
+    }
+
+    const qp = new URLSearchParams();
+    qp.set("platform", platform || "AR-15");
+
+    if (isSelected) {
+      qp.set("remove", String(categoryId));
+      router.push(`/builder?${qp.toString()}`);
+      return;
+    }
+
+    qp.set("select", `${categoryId}:${numericId}`);
+    router.push(`/builder?${qp.toString()}`);
+  };
+
+  if (!categoryId) {
+    return (
+      <main className="min-h-screen bg-black text-zinc-50">
+        <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+          <div className="text-center">
+            <h1 className="text-2xl font-semibold text-zinc-50 mb-4">
+              Unknown Part Role
+            </h1>
+            <p className="text-sm text-zinc-400 mb-6">
+              No mapping found for <span className="text-zinc-200">{partRoleParam}</span>.
+              Add it to <span className="text-zinc-200">catalogMappings</span>.
+            </p>
+            <Link
+              href={`/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(
+                partRoleParam
+              )}`}
+              className="text-amber-300 hover:text-amber-200 underline"
+            >
+              Back to Parts List
+            </Link>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+        {/* Breadcrumbs */}
+        <header className="mb-6">
+          <div className="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
+            <Link
+              href={{ pathname: "/builder", query: platform ? { platform } : {} }}
+              className="hover:text-zinc-300"
+            >
+              The Armory
+            </Link>
+            <span className="text-zinc-700">/</span>
+            <Link
+              href={`/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(
+                partRoleParam
+              )}`}
+              className="hover:text-zinc-300"
+            >
+              Parts
+            </Link>
+            <span className="text-zinc-700">/</span>
+            <span className="text-zinc-300">Details</span>
+          </div>
+
+          <div className="mt-4 flex items-start justify-between gap-4">
+            <div>
+              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+                BATTL BUILDERS
+              </p>
+              <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
+                Product <span className="text-amber-300">Details</span>
+              </h1>
+              <p className="mt-2 text-sm text-zinc-400 max-w-2xl">
+                Live product data pulled from your Ballistic backend. Add it to your build
+                or jump back to compare options.
+              </p>
+            </div>
+
+            {/* Platform switch (updates NEW route) */}
+            <div className="flex items-center gap-2">
+              <label htmlFor="platform-select" className="text-xs text-zinc-500">
+                Platform
+              </label>
+              <select
+                id="platform-select"
+                value={platform}
+                onChange={(e) => {
+                  const next = e.target.value;
+                  router.replace(
+                    `/parts/p/${encodeURIComponent(next)}/${encodeURIComponent(
+                      partRoleParam
+                    )}/${encodeURIComponent(productSlug)}`
+                  );
+                }}
+                className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+              >
+                {PLATFORMS.map((p) => (
+                  <option key={p} value={p}>
+                    {p}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </header>
+
+        {/* Body */}
+        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
+          {loading ? (
+            <p className="py-10 text-center text-sm text-zinc-500">Loading product…</p>
+          ) : error ? (
+            <p className="py-10 text-center text-sm text-red-400">
+              {error} — check that the Ballistic API is running.
+            </p>
+          ) : !product ? (
+            <p className="py-10 text-center text-sm text-zinc-500">Product not found.</p>
+          ) : (
+            <div className="grid gap-6 md:grid-cols-[280px_1fr]">
+              {/* Left: image */}
+              <div className="rounded-md border border-zinc-800 bg-zinc-950/80 p-3">
+                <div className="aspect-square w-full overflow-hidden rounded-md border border-zinc-800 bg-black">
+                  {product.imageUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={product.imageUrl}
+                      alt={product.name}
+                      className="h-full w-full object-contain p-2"
+                      loading="lazy"
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center text-xs text-zinc-600">
+                      No image
+                    </div>
+                  )}
+                </div>
+
+                <div className="mt-3 flex items-center justify-between">
+                  <span className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
+                    Stock
+                  </span>
+                  <span
+                    className={`text-xs font-semibold ${
+                      product.inStock === false ? "text-red-300" : "text-emerald-300"
+                    }`}
+                  >
+                    {product.inStock === false ? "Out of stock" : "In stock"}
+                  </span>
+                </div>
+
+                <div className="mt-3 flex gap-2">
+                  <Link
+                    href={`/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(
+                      partRoleParam
+                    )}`}
+                    className="flex-1 rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-2 text-center text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-800"
+                  >
+                    Back to List
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={handleTogglePart}
+                    className={`flex-1 rounded-md px-3 py-2 text-center text-xs font-semibold transition-colors ${
+                      isSelected
+                        ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
+                        : "bg-amber-400 text-black hover:bg-amber-300"
+                    }`}
+                  >
+                    {isSelected ? "Remove from Build" : "Add to Build"}
+                  </button>
+                </div>
+              </div>
+
+              {/* Right: details */}
+              <div className="min-w-0">
+                <div className="rounded-md border border-zinc-800 bg-zinc-950/80 p-4">
+                  <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                    <div className="min-w-0">
+                      <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+                        {product.brand}
+                      </p>
+                      <h2 className="mt-1 text-xl md:text-2xl font-semibold text-zinc-50">
+                        {product.name}
+                      </h2>
+
+                      <div className="mt-2 flex flex-wrap gap-2 text-xs">
+                        <span className="rounded border border-zinc-800 bg-zinc-900/60 px-2 py-1 text-zinc-300">
+                          Platform:{" "}
+                          <span className="font-semibold text-zinc-100">
+                            {product.platform || platform}
+                          </span>
+                        </span>
+                        <span className="rounded border border-zinc-800 bg-zinc-900/60 px-2 py-1 text-zinc-300">
+                          Role:{" "}
+                          <span className="font-semibold text-zinc-100">
+                            {product.partRole || partRoleParam}
+                          </span>
+                        </span>
+                        <span className="rounded border border-zinc-800 bg-zinc-900/60 px-2 py-1 text-zinc-300">
+                          ID:{" "}
+                          <span className="font-semibold text-zinc-100">
+                            {product.id}
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="shrink-0 text-right">
+                      <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
+                        Current price
+                      </div>
+                      <div className="mt-1 text-2xl font-semibold text-amber-300">
+                        {formatPrice(product.price)}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-4 flex flex-col gap-2 sm:flex-row">
+                    <button
+                      type="button"
+                      onClick={handleTogglePart}
+                      className={`rounded-md px-4 py-2 text-sm font-semibold transition-colors ${
+                        isSelected
+                          ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
+                          : "bg-amber-400 text-black hover:bg-amber-300"
+                      }`}
+                    >
+                      {isSelected ? "Remove from Build" : "Add to Build"}
+                    </button>
+
+                    {product.buyUrl ? (
+                      <a
+                        href={product.buyUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="rounded-md border border-zinc-700 bg-zinc-900/70 px-4 py-2 text-center text-sm font-semibold text-zinc-200 hover:bg-zinc-800"
+                      >
+                        Buy from Merchant →
+                      </a>
+                    ) : (
+                      <span className="rounded-md border border-zinc-800 bg-zinc-950 px-4 py-2 text-center text-sm text-zinc-500">
+                        No buy link available
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="mt-4 border-t border-zinc-800 pt-4">
+                    <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">
+                      Notes
+                    </h3>
+                    <p className="mt-2 text-sm text-zinc-400">
+                      This details page is intentionally “thin” for now — once we wire in
+                      offers, price history, and richer product fields, this section becomes
+                      the spec + comparison hub.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="mt-4 flex flex-wrap gap-2 text-xs text-zinc-500">
+                  <span className="rounded border border-zinc-800 bg-zinc-950/60 px-2 py-1">
+                    Tip: use “Back to List” to compare multiple parts quickly.
+                  </span>
+                  <span className="rounded border border-zinc-800 bg-zinc-950/60 px-2 py-1">
+                    Platform comes from the URL segment:{" "}
+                    <span className="text-zinc-300">/parts/p/{platform}/...</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
+      </div>
+    </main>
+  );
+}

app/(builder)/parts/[partRole]/_old_prod_details/data.ts

@@ -1,4 +1,4 @@
-// app/gunbuilder/[categoryId]/[partId]/data.ts
+// app/builder/[categoryId]/[partId]/data.ts
 
 // Simulated data functions - Replace these with API calls when ready
 // Example: export async function getPricingHistory(partId: string) { ... }
@@ -56,13 +56,13 @@ export function getPricingHistory(
 /**
  * Get retailer offers for a part
  * Real implementation using Ballistic backend:
- *   GET /api/products/{productId}/offers
+ *   GET /api/v1/products/{productId}/offers
  */
 export async function getRetailerOffers(
   productId: string,
 ): Promise<RetailerOffer[]> {
   const res = await fetch(
-    `${API_BASE_URL}/api/products/${productId}/offers`,
+    `${API_BASE_URL}/api/v1/products/${productId}/offers`,
     {
       // This will be called from the client detail page,
       // so we *don't* use cache here.

app/(builder)/parts/[partRole]/_old_prod_details/page.tsx

@@ -0,0 +1,846 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { CATEGORIES } from "@/data/gunbuilderParts";
+import type { CategoryId, Part } from "@/types/gunbuilder";
+import { CATEGORY_TO_PART_ROLES } from "@/data/partRoleMappings";
+
+type ViewMode = "card" | "list";
+
+type GunbuilderProductFromApi = {
+  id: number;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  price: number | null;
+  imageUrl: string | null;
+  buyUrl: string | null;
+  inStock?: boolean | null;
+};
+
+type UiPart = Part & {
+  // local-only stock flag for filtering
+  inStock?: boolean;
+};
+
+const PLATFORMS = ["AR-15", "AR-10", "AR-9"];
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+type BuildState = Partial<Record<CategoryId, string>>; // categoryId -> partId
+
+const STORAGE_KEY = "gunbuilder-build-state";
+
+// sort options
+type SortOption = "relevance" | "price-asc" | "price-desc" | "brand-asc";
+
+// support for url id-slug
+const slugify = (str: string) =>
+  str
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+
+const normalizeRole = (role: string) =>
+  role.trim().toLowerCase().replace(/_/g, "-");
+
+function getNormalizedPartRolesForCategory(categoryId: string): string[] {
+  const roles = (CATEGORY_TO_PART_ROLES as any)[categoryId] as
+    | string[]
+    | undefined;
+  if (!roles || roles.length === 0) return [];
+  return Array.from(new Set(roles.map(normalizeRole)));
+}
+
+export default function CategoryPage() {
+  const params = useParams();
+  const categoryId = params.categoryId as CategoryId;
+  const partRoles = useMemo(
+    () => getNormalizedPartRolesForCategory(String(categoryId)),
+    [categoryId]
+  );
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [viewMode, setViewMode] = useState<ViewMode>("list");
+  const [parts, setParts] = useState<UiPart[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // filter + sort state
+  const [brandFilter, setBrandFilter] = useState<string[]>([]);
+  const [sortBy, setSortBy] = useState<SortOption>("relevance");
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [priceRange, setPriceRange] = useState<{
+    min: number | null;
+    max: number | null;
+  }>({
+    min: null,
+    max: null,
+  });
+  const [inStockOnly, setInStockOnly] = useState<boolean>(false);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const PAGE_SIZE = 24;
+
+  // build state for this page (read-only), hydrated from localStorage
+  // NOTE: The main /builder page is the single source of truth for writing to STORAGE_KEY.
+  const [build] = useState<BuildState>(() => {
+    if (typeof window === "undefined") return {};
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY);
+      return stored ? (JSON.parse(stored) as BuildState) : {};
+    } catch {
+      return {};
+    }
+  });
+
+  const initialPlatform = (searchParams.get("platform") as string) || "AR-15";
+  const [platform, setPlatform] = useState<string>(initialPlatform);
+
+  // If a user lands here without ?platform=..., normalize the URL so downstream navigation keeps platform.
+  useEffect(() => {
+    const qpPlatform = searchParams.get("platform");
+    if (qpPlatform) return;
+
+    const qp = new URLSearchParams(searchParams.toString());
+    qp.set("platform", platform || "AR-15");
+    router.replace(`/builder/${categoryId}?${qp.toString()}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [categoryId, router, searchParams]);
+
+  const category = useMemo(
+    () => CATEGORIES.find((c) => c.id === categoryId),
+    [categoryId]
+  );
+
+  useEffect(() => {
+    if (!categoryId) return;
+
+    const controller = new AbortController();
+
+    async function fetchCategoryParts() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const search = new URLSearchParams();
+        search.set("platform", platform);
+
+        // ✅ Scope results to this category's backend roles
+        for (const r of partRoles) {
+          search.append("partRoles", r);
+        }
+
+        const url = `${API_BASE_URL}/api/v1/products?${search.toString()}`;
+
+        const res = await fetch(url, { signal: controller.signal });
+
+        if (!res.ok) {
+          throw new Error(`Failed to load products (${res.status})`);
+        }
+
+        const data: GunbuilderProductFromApi[] = await res.json();
+
+        const normalized: UiPart[] = data.map((p) => ({
+          id: String(p.id), // normalize to string for BuildState
+          categoryId,
+          name: p.name,
+          brand: p.brand,
+          price: p.price ?? 0,
+          imageUrl: p.imageUrl ?? undefined, // match backend field name
+          url: p.buyUrl ?? undefined,
+          notes: undefined,
+          inStock: p.inStock ?? true,
+        }));
+
+        setParts(normalized);
+      } catch (err: any) {
+        if (err.name === "AbortError") return;
+        setError(err.message ?? "Failed to load products");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchCategoryParts();
+
+    return () => controller.abort();
+  }, [categoryId, platform, partRoles]);
+
+  //  handler to toggle Add / Remove for this category
+  const handleTogglePart = (categoryId: CategoryId, partId: string) => {
+    const isSelected = build[categoryId] === partId;
+
+    const qp = new URLSearchParams();
+    qp.set("platform", platform || "AR-15");
+
+    if (isSelected) {
+      // Tell the main builder to remove this category selection
+      qp.set("remove", String(categoryId));
+      router.push(`/builder?${qp.toString()}`);
+      return;
+    }
+
+    // Tell the main builder to add/replace this category selection
+    qp.set("select", `${categoryId}:${partId}`);
+    router.push(`/builder?${qp.toString()}`);
+  };
+
+  // available brands for filter
+  const availableBrands = useMemo(
+    () =>
+      Array.from(new Set(parts.map((p) => p.brand)))
+        .filter(Boolean)
+        .sort((a, b) => a.localeCompare(b)),
+    [parts]
+  );
+
+  const priceBounds = useMemo(() => {
+    if (parts.length === 0) {
+      return { min: null as number | null, max: null as number | null };
+    }
+
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+
+    for (const p of parts) {
+      const price = p.price ?? 0;
+      if (price < min) min = price;
+      if (price > max) max = price;
+    }
+
+    if (!Number.isFinite(min) || !Number.isFinite(max)) {
+      return { min: null as number | null, max: null as number | null };
+    }
+
+    return { min, max };
+  }, [parts]);
+
+  // initialize / clamp priceRange whenever bounds change
+  useEffect(() => {
+    if (priceBounds.min == null || priceBounds.max == null) return;
+
+    setPriceRange((prev) => {
+      const min = prev.min ?? priceBounds.min!;
+      const max = prev.max ?? priceBounds.max!;
+      return {
+        min: Math.max(priceBounds.min!, Math.min(min, priceBounds.max!)),
+        max: Math.min(priceBounds.max!, Math.max(max, priceBounds.min!)),
+      };
+    });
+  }, [priceBounds.min, priceBounds.max]);
+
+  const filteredParts = useMemo(() => {
+    let result = [...parts];
+
+    // Price range filter
+    const effectiveMin =
+      priceRange.min ?? (priceBounds.min != null ? priceBounds.min : null);
+    const effectiveMax =
+      priceRange.max ?? (priceBounds.max != null ? priceBounds.max : null);
+
+    if (effectiveMin != null && effectiveMax != null) {
+      result = result.filter((p) => {
+        const price = p.price ?? 0;
+        return price >= effectiveMin && price <= effectiveMax;
+      });
+    }
+
+    // Brand filter
+    if (brandFilter.length > 0) {
+      result = result.filter((p) => brandFilter.includes(p.brand));
+    }
+
+    // In-stock filter
+    if (inStockOnly) {
+      result = result.filter((p) => p.inStock ?? true);
+    }
+
+    const normalizedQuery = searchQuery.trim().toLowerCase();
+    if (normalizedQuery) {
+      result = result.filter((p) => {
+        const name = p.name.toLowerCase();
+        const brand = p.brand.toLowerCase();
+        return name.includes(normalizedQuery) || brand.includes(normalizedQuery);
+      });
+    }
+
+    switch (sortBy) {
+      case "price-asc":
+        result.sort((a, b) => a.price - b.price);
+        break;
+      case "price-desc":
+        result.sort((a, b) => b.price - a.price);
+        break;
+      case "brand-asc":
+        result.sort((a, b) => a.brand.localeCompare(b.brand));
+        break;
+      case "relevance":
+      default:
+        // leave in backend order
+        break;
+    }
+
+    // Pin the currently selected part (for this category) to the top, if any
+    const selectedId = build[categoryId];
+    if (selectedId) {
+      const selected = result.filter((p) => p.id === selectedId);
+      const others = result.filter((p) => p.id !== selectedId);
+      result = [...selected, ...others];
+    }
+
+    return result;
+  }, [parts, brandFilter, sortBy, build, categoryId, searchQuery, priceBounds, priceRange, inStockOnly]);
+
+  const totalPages = useMemo(
+    () =>
+      filteredParts.length === 0 ? 1 : Math.ceil(filteredParts.length / PAGE_SIZE),
+    [filteredParts, PAGE_SIZE]
+  );
+
+  const paginatedParts = useMemo(() => {
+    if (filteredParts.length === 0) return [];
+    const startIndex = (currentPage - 1) * PAGE_SIZE;
+    return filteredParts.slice(startIndex, startIndex + PAGE_SIZE);
+  }, [filteredParts, currentPage, PAGE_SIZE]);
+
+  useEffect(() => {
+    // whenever the category or filters change, jump back to page 1
+    setCurrentPage(1);
+  }, [categoryId, brandFilter, sortBy, searchQuery, priceRange, inStockOnly, platform]);
+
+  useEffect(() => {
+    const nextPlatform = (searchParams.get("platform") as string) || "AR-15";
+    setPlatform(nextPlatform);
+  }, [searchParams]);
+
+  // Keep selection highlight in sync if the build is changed elsewhere and user comes back.
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onStorage = (e: StorageEvent) => {
+      if (e.key !== STORAGE_KEY) return;
+      // Force a re-render by reading current storage (since build state is read-only)
+      // This keeps the selected row pinned/highlighted when navigating back.
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      window.localStorage.getItem(STORAGE_KEY);
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  const visibleRange = useMemo(() => {
+    if (filteredParts.length === 0) {
+      return { start: 0, end: 0 };
+    }
+    const start = (currentPage - 1) * PAGE_SIZE + 1;
+    const end = Math.min(start + paginatedParts.length - 1, filteredParts.length);
+    return { start, end };
+  }, [filteredParts.length, currentPage, paginatedParts.length, PAGE_SIZE]);
+
+  if (!category) {
+    return (
+      <main className="min-h-screen bg-black text-zinc-50">
+        <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+          <div className="text-center">
+            <h1 className="text-2xl font-semibold text-zinc-50 mb-4">
+              Category Not Found
+            </h1>
+            <Link
+              href={{ pathname: "/builder", query: platform ? { platform } : {} }}
+              className="text-amber-300 hover:text-amber-200 underline"
+            >
+              Return to Builder
+            </Link>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+        {/* Header */}
+        <header className="mb-6">
+          <Link
+            href={{ pathname: "/builder", query: platform ? { platform } : {} }}
+            className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
+          >
+            ← Back to The Armory
+          </Link>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+                Shadow Standard
+              </p>
+              <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
+                {category.name} <span className="text-amber-300">Parts</span>
+              </h1>
+              <p className="mt-2 text-sm text-zinc-400 max-w-xl">
+                Browse all available {category.name.toLowerCase()} options for your
+                build, pulled live from your Ballistic backend.
+              </p>
+            </div>
+            {!loading && !error && parts.length > 0 && (
+              <div className="flex gap-2 border border-zinc-800 rounded-md p-1 bg-zinc-950/60">
+                <button
+                  type="button"
+                  onClick={() => setViewMode("card")}
+                  className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
+                    viewMode === "card"
+                      ? "bg-zinc-800 text-zinc-50"
+                      : "text-zinc-400 hover:text-zinc-300"
+                  }`}
+                  aria-label="Card view"
+                >
+                  Card
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setViewMode("list")}
+                  className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
+                    viewMode === "list"
+                      ? "bg-zinc-800 text-zinc-50"
+                      : "text-zinc-400 hover:text-zinc-300"
+                  }`}
+                  aria-label="List view"
+                >
+                  List
+                </button>
+              </div>
+            )}
+          </div>
+        </header>
+
+        {/* Parts Grid/List */}
+        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
+          <div className="flex flex-col gap-4 md:flex-row">
+            {/* Left sidebar: filters */}
+            {!loading && !error && parts.length > 0 && (
+              <aside className="w-full md:w-64 shrink-0 rounded-md border border-zinc-800 bg-zinc-950/80 p-3 space-y-4">
+                <div>
+                  <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">
+                    Filters
+                  </h2>
+                  <p className="mt-1 text-[11px] text-zinc-500">
+                    Narrow down the {category.name.toLowerCase()} list.
+                  </p>
+                </div>
+
+                {/* Price range */}
+                <div>
+                  <div className="mb-1.5 flex items-center justify-between">
+                    <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
+                      Price
+                    </span>
+                    {priceRange.min !== null || priceRange.max !== null ? (
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setPriceRange({ min: priceBounds.min, max: priceBounds.max })
+                        }
+                        className="text-[10px] text-zinc-400 hover:text-zinc-200"
+                      >
+                        Reset
+                      </button>
+                    ) : null}
+                  </div>
+                  {priceBounds.min == null || priceBounds.max == null ? (
+                    <p className="text-[11px] text-zinc-500">
+                      No price data available.
+                    </p>
+                  ) : (
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between text-[10px] text-zinc-400">
+                        <span>
+                          Min:{" "}
+                          <span className="font-semibold text-zinc-200">
+                            ${(priceRange.min ?? priceBounds.min).toFixed(0)}
+                          </span>
+                        </span>
+                        <span>
+                          Max:{" "}
+                          <span className="font-semibold text-zinc-200">
+                            ${(priceRange.max ?? priceBounds.max).toFixed(0)}
+                          </span>
+                        </span>
+                      </div>
+                      <div className="space-y-2">
+                        <input
+                          type="range"
+                          min={priceBounds.min ?? 0}
+                          max={priceBounds.max ?? 0}
+                          value={priceRange.min ?? priceBounds.min ?? 0}
+                          onChange={(e) => {
+                            const value = Number(e.target.value);
+                            setPriceRange((prev) => ({
+                              min: Math.min(value, prev.max ?? priceBounds.max ?? value),
+                              max: prev.max ?? priceBounds.max ?? value,
+                            }));
+                          }}
+                          className="w-full"
+                        />
+                        <input
+                          type="range"
+                          min={priceBounds.min ?? 0}
+                          max={priceBounds.max ?? 0}
+                          value={priceRange.max ?? priceBounds.max ?? 0}
+                          onChange={(e) => {
+                            const value = Number(e.target.value);
+                            setPriceRange((prev) => ({
+                              min: prev.min ?? priceBounds.min ?? value,
+                              max: Math.max(value, prev.min ?? priceBounds.min ?? value),
+                            }));
+                          }}
+                          className="w-full"
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Brand multi-select */}
+                <div>
+                  <div className="mb-1.5 flex items-center justify-between">
+                    <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
+                      Brand
+                    </span>
+                    {brandFilter.length > 0 && (
+                      <button
+                        type="button"
+                        onClick={() => setBrandFilter([])}
+                        className="text-[10px] text-zinc-400 hover:text-zinc-200"
+                      >
+                        Clear
+                      </button>
+                    )}
+                  </div>
+                  {availableBrands.length === 0 ? (
+                    <p className="text-[11px] text-zinc-500">
+                      No brands available yet.
+                    </p>
+                  ) : (
+                    <div className="max-h-56 space-y-1 overflow-y-auto pr-1">
+                      {availableBrands.map((b) => {
+                        const checked = brandFilter.includes(b);
+                        return (
+                          <label
+                            key={b}
+                            className="flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-[11px] text-zinc-200 hover:bg-zinc-900/80"
+                          >
+                            <input
+                              type="checkbox"
+                              className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
+                              checked={checked}
+                              onChange={(e) => {
+                                setBrandFilter((prev) =>
+                                  e.target.checked
+                                    ? [...prev, b]
+                                    : prev.filter((brand) => brand !== b)
+                                );
+                              }}
+                            />
+                            <span className="truncate">{b}</span>
+                          </label>
+                        );
+                      })}
+                    </div>
+                  )}
+                  {brandFilter.length === 0 && availableBrands.length > 0 && (
+                    <p className="mt-1 text-[10px] text-zinc-500">
+                      No brands selected — showing all.
+                    </p>
+                  )}
+                </div>
+
+                {/* In-stock toggle */}
+                <div className="border-t border-zinc-800 pt-3">
+                  <label className="flex cursor-pointer items-center justify-between text-[11px] text-zinc-200">
+                    <span className="font-medium uppercase tracking-[0.12em] text-zinc-500">
+                      In stock only
+                    </span>
+                    <input
+                      type="checkbox"
+                      className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
+                      checked={inStockOnly}
+                      onChange={(e) => setInStockOnly(e.target.checked)}
+                    />
+                  </label>
+                  <p className="mt-1 text-[10px] text-zinc-500">
+                    Hides items marked out of stock by the backend.
+                  </p>
+                </div>
+              </aside>
+            )}
+
+            {/* Right side: toolbar + results */}
+            <div className="flex-1">
+              {/* Top toolbar: count + search + sort */}
+              {!loading && !error && parts.length > 0 && (
+                <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+                  <div className="text-xs text-zinc-500">
+                    Showing{" "}
+                    <span className="font-medium text-zinc-200">
+                      {visibleRange.start}-{visibleRange.end}
+                    </span>{" "}
+                    of{" "}
+                    <span className="font-medium text-zinc-200">
+                      {filteredParts.length}
+                    </span>{" "}
+                    matching parts
+                  </div>
+                  <div className="flex flex-wrap gap-3">
+                    <div className="flex items-center gap-2">
+                      <label htmlFor="part-search" className="text-xs text-zinc-500">
+                        Search
+                      </label>
+                      <div className="relative">
+                        <input
+                          id="part-search"
+                          type="text"
+                          value={searchQuery}
+                          onChange={(e) => setSearchQuery(e.target.value)}
+                          placeholder={`Search ${category.name.toLowerCase()}...`}
+                          className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 pr-6 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                        />
+                        {searchQuery && (
+                          <button
+                            type="button"
+                            onClick={() => setSearchQuery("")}
+                            className="absolute right-1 top-1/2 -translate-y-1/2 text-xs leading-none text-zinc-500 hover:text-zinc-300"
+                            aria-label="Clear search"
+                          >
+                            ×
+                          </button>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <label htmlFor="platform-select" className="text-xs text-zinc-500">
+                        Platform
+                      </label>
+                      <select
+                        id="platform-select"
+                        value={platform}
+                        onChange={(e) => {
+                          const next = e.target.value;
+                          setPlatform(next);
+
+                          const qp = new URLSearchParams(searchParams.toString());
+                          qp.set("platform", next);
+                          router.replace(`/builder/${categoryId}?${qp.toString()}`);
+                        }}
+                        className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                      >
+                        {PLATFORMS.map((p) => (
+                          <option key={p} value={p}>
+                            {p}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <label htmlFor="sort-by" className="text-xs text-zinc-500">
+                        Sort
+                      </label>
+                      <select
+                        id="sort-by"
+                        value={sortBy}
+                        onChange={(e) => setSortBy(e.target.value as SortOption)}
+                        className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                      >
+                        <option value="relevance">Relevance</option>
+                        <option value="price-asc">Price: Low → High</option>
+                        <option value="price-desc">Price: High → Low</option>
+                        <option value="brand-asc">Brand: A → Z</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Results / states */}
+              {loading ? (
+                <p className="py-8 text-center text-sm text-zinc-500">
+                  Loading {category.name.toLowerCase()}…
+                </p>
+              ) : error ? (
+                <p className="py-8 text-center text-sm text-red-400">
+                  {error} — check that the Ballistic API is running.
+                </p>
+              ) : filteredParts.length === 0 ? (
+                <p className="py-8 text-center text-sm text-zinc-500">
+                  No parts available for this category yet.
+                </p>
+              ) : viewMode === "card" ? (
+                <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                  {paginatedParts.map((part) => {
+                    const isSelected = build[categoryId] === part.id;
+
+                    return (
+                      <div
+                        key={part.id}
+                        className={`group relative flex flex-col rounded-md border p-3 transition-all duration-200 ${
+                          isSelected
+                            ? "border-amber-400/70 bg-amber-400/10 shadow-[0_0_0_1px_rgba(251,191,36,0.25)]"
+                            : "border-zinc-700 bg-zinc-900/50 hover:border-amber-400/60 hover:bg-amber-400/10"
+                        }`}
+                      >
+                        <div className="mb-3 flex items-center gap-2 justify-between">
+                          <div className="flex-1">
+                            <div className="text-sm font-semibold text-zinc-50">
+                              {part.brand}{" "}
+                              <span className="font-normal">— {part.name}</span>
+                            </div>
+                            {part.notes && (
+                              <p className="mt-1 line-clamp-2 text-xs text-zinc-400">
+                                {part.notes}
+                              </p>
+                            )}
+                          </div>
+                          <div className="whitespace-nowrap text-sm font-semibold text-amber-300">
+                            ${part.price.toFixed(2)}
+                          </div>
+                        </div>
+                        <div className="mt-2 flex gap-2">
+                          <Link
+                            href={{
+                              pathname: `/builder/${categoryId}/${part.id}-${slugify(
+                                part.name
+                              )}`,
+                              query: { platform },
+                            }}
+                            className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
+                          >
+                            View Details
+                          </Link>
+                          <button
+                            type="button"
+                            onClick={() => handleTogglePart(categoryId, part.id)}
+                            className={`flex-1 rounded-md px-3 py-2 text-center text-xs font-semibold transition-colors ${
+                              isSelected
+                                ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
+                                : "bg-amber-400 text-black hover:bg-amber-300"
+                            }`}
+                          >
+                            {isSelected ? "Remove from Build" : "Add to Build"}
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <>
+                  {/* Header row for list view */}
+                  <div className="hidden grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 md:grid">
+                    <span>Part</span>
+                    <span>Brand</span>
+                    <span className="text-right">Price</span>
+                    <span className="pr-2 text-right">Actions</span>
+                  </div>
+
+                  <div className="space-y-2">
+                    {paginatedParts.map((part) => {
+                      const isSelected = build[categoryId] === part.id;
+
+                      return (
+                        <div
+                          key={part.id}
+                          className={`group relative rounded-md border p-3 transition-all duration-200 ${
+                            isSelected
+                              ? "border-amber-400/70 bg-amber-400/10 shadow-[0_0_0_1px_rgba(251,191,36,0.25)]"
+                              : "border-zinc-700 bg-zinc-900/50 hover:border-amber-400/60 hover:bg-amber-400/10"
+                          }`}
+                        >
+                          <div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-center md:gap-4">
+                            <div className="min-w-0 flex-1">
+                              <div className="text-sm font-semibold text-zinc-50">
+                                {part.name}
+                              </div>
+                              {part.notes && (
+                                <p className="mt-1 line-clamp-1 text-xs text-zinc-400">
+                                  {part.notes}
+                                </p>
+                              )}
+                            </div>
+                            <div className="text-xs text-zinc-400 md:text-left md:text-sm">
+                              {part.brand}
+                            </div>
+                            <div className="text-sm font-semibold text-amber-300 md:text-right">
+                              ${part.price.toFixed(2)}
+                            </div>
+                            <div className="flex justify-end gap-2">
+                              <Link
+                                href={{
+                                  pathname: `/builder/${categoryId}/${part.id}-${slugify(
+                                    part.name
+                                  )}`,
+                                  query: { platform },
+                                }}
+                                className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
+                              >
+                                View Details
+                              </Link>
+                              <button
+                                type="button"
+                                onClick={() => handleTogglePart(categoryId, part.id)}
+                                className={`whitespace-nowrap rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${
+                                  isSelected
+                                    ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
+                                    : "bg-amber-400 text-black hover:bg-amber-300"
+                                }`}
+                              >
+                                {isSelected ? "Remove from Build" : "Add to Build"}
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+
+              {/* Pagination controls */}
+              {filteredParts.length > 0 && totalPages > 1 && (
+                <div className="mt-4 flex items-center justify-between text-xs text-zinc-400">
+                  <div>
+                    Page{" "}
+                    <span className="font-semibold text-zinc-200">{currentPage}</span>{" "}
+                    of{" "}
+                    <span className="font-semibold text-zinc-200">{totalPages}</span>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                      disabled={currentPage === 1}
+                      className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
+                    >
+                      Previous
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                      disabled={currentPage === totalPages}
+                      className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
+                    >
+                      Next
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

app/(builder)/parts/[partRole]/page.tsx

@@ -0,0 +1,14 @@
+import { redirect } from "next/navigation";
+
+export default async function PartsRoleRedirectPage({
+  params,
+  searchParams,
+}: {
+  params: { partRole: string };
+  searchParams?: { platform?: string };
+}) {
+  const partRole = params.partRole;
+  const platform = searchParams?.platform ?? "AR-15";
+
+  redirect(`/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}`);
+}

app/(builder)/parts/_components/buildDetailHref.ts

@@ -0,0 +1,24 @@
+// app/(builder)/parts/_components/buildDetailHref.ts
+
+const toSlug = (str: string) =>
+  str
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+
+export type BuildDetailInput = {
+  id: string;
+  name: string;
+  brand?: string;
+};
+
+export function buildDetailHref(
+  platform: string,
+  partRole: string,
+  p: BuildDetailInput
+) {
+  const slug = toSlug(`${p.brand ?? ""} ${p.name ?? ""}`);
+  return `/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(
+    partRole
+  )}/${p.id}-${slug}`;
+}

app/(builder)/parts/p/[platform]/[partRole]/[productSlug]/page.tsx

@@ -0,0 +1,676 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+
+import type { CategoryId } from "@/types/gunbuilder";
+import {
+  PART_ROLE_TO_CATEGORY,
+  normalizePartRole,
+} from "@/lib/catalogMappings";
+
+/**
+ * API Shapes
+ * - OfferFromApi: what /api/v1/products/:id returns in offers[]
+ * - GunbuilderProductFromApi: the product detail contract (v1)
+ */
+type OfferFromApi = {
+  merchantName?: string | null;
+  price?: number | null;
+  buyUrl?: string | null;
+  inStock?: boolean | null;
+  lastUpdated?: string | null;
+};
+
+type GunbuilderProductFromApi = {
+  id: number;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  price: number | null;
+
+  // Optional (legacy fallback label if product.offers is missing)
+  merchantName?: string | null;
+
+  imageUrl?: string | null;
+  mainImageUrl?: string | null;
+
+  buyUrl?: string | null;
+  inStock?: boolean | null;
+
+  shortDescription?: string | null;
+  description?: string | null;
+
+  // New: offers[] from the API
+  offers?: OfferFromApi[] | null;
+};
+
+type BuildState = Partial<Record<CategoryId, string>>;
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+const STORAGE_KEY = "gunbuilder-build-state";
+
+const PLATFORMS = ["AR-15", "AR-10", "AR-9"] as const;
+
+/**
+ * Extract numeric id from slug like: "1217-radian-ar-15..."
+ * This keeps URLs pretty while still letting us fetch by ID.
+ */
+function extractNumericId(productSlug: string): number | null {
+  if (!productSlug) return null;
+  const first = productSlug.split("-")[0];
+  const n = Number(first);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
+
+function formatPrice(price: number | null | undefined): string {
+  if (price == null) return "—";
+  return `$${price.toFixed(2)}`;
+}
+
+/**
+ * Sort offers:
+ * 1) lowest price first
+ * 2) in-stock before out-of-stock
+ * 3) merchant name tiebreaker
+ */
+function sortOffers(offers: OfferFromApi[]): OfferFromApi[] {
+  return [...offers].sort((a, b) => {
+    const ap = a.price ?? Number.POSITIVE_INFINITY;
+    const bp = b.price ?? Number.POSITIVE_INFINITY;
+    if (ap !== bp) return ap - bp;
+
+    // in-stock first (false sorts later)
+    const aStock = a.inStock === false ? 1 : 0;
+    const bStock = b.inStock === false ? 1 : 0;
+    if (aStock !== bStock) return aStock - bStock;
+
+    return (a.merchantName ?? "").localeCompare(b.merchantName ?? "");
+  });
+}
+
+export default function ProductDetailsPage() {
+  const params = useParams();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Route params
+  const platformParam = String(params.platform ?? "");
+  const partRoleParam = String(params.partRole ?? "");
+  const productSlug = String(params.productSlug ?? "");
+
+  // Platform comes from path segment (fallback to ?platform just in case)
+  const platform =
+    platformParam || (searchParams.get("platform") as string) || "AR-15";
+
+  const normalizedRole = useMemo(
+    () => normalizePartRole(partRoleParam),
+    [partRoleParam]
+  );
+
+  /**
+   * categoryId drives builder state selection/removal
+   * (based on partRole -> category mapping).
+   */
+  const categoryId = useMemo(() => {
+    return (
+      PART_ROLE_TO_CATEGORY[partRoleParam] ??
+      PART_ROLE_TO_CATEGORY[normalizedRole] ??
+      null
+    );
+  }, [partRoleParam, normalizedRole]);
+
+  const numericId = useMemo(() => extractNumericId(productSlug), [productSlug]);
+
+  // Read-only build state (builder page owns writes)
+  const [build, setBuild] = useState<BuildState>(() => {
+    if (typeof window === "undefined") return {};
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY);
+      return stored ? (JSON.parse(stored) as BuildState) : {};
+    } catch {
+      return {};
+    }
+  });
+
+  // Keep build in sync if user changes build elsewhere
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onStorage = (e: StorageEvent) => {
+      if (e.key !== STORAGE_KEY) return;
+      try {
+        const stored = window.localStorage.getItem(STORAGE_KEY);
+        setBuild(stored ? (JSON.parse(stored) as BuildState) : {});
+      } catch {
+        // ignore
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  const selectedPartIdForCategory = categoryId
+    ? build?.[categoryId]
+    : undefined;
+  const isSelected =
+    !!categoryId &&
+    selectedPartIdForCategory === (numericId ? String(numericId) : "");
+
+  // Product fetch state
+  const [product, setProduct] = useState<GunbuilderProductFromApi | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Route normalization:
+   * If platform segment is missing/empty, rewrite to canonical /parts/p route.
+   */
+  useEffect(() => {
+    if (platformParam) return;
+
+    const qp = new URLSearchParams(searchParams.toString());
+    qp.set("platform", platform || "AR-15");
+
+    router.replace(
+      `/parts/p/${encodeURIComponent(platform || "AR-15")}/${encodeURIComponent(
+        partRoleParam
+      )}/${encodeURIComponent(productSlug)}?${qp.toString()}`
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    platformParam,
+    platform,
+    partRoleParam,
+    productSlug,
+    router,
+    searchParams,
+  ]);
+
+  /**
+   * Fetch product details from API:
+   * GET /api/v1/products/:id
+   */
+  useEffect(() => {
+    if (!numericId) {
+      setError("Invalid product id.");
+      setLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+
+    async function fetchProduct() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const url = `${API_BASE_URL}/api/v1/products/${numericId}`;
+        const res = await fetch(url, { signal: controller.signal });
+
+        if (!res.ok) {
+          throw new Error(`Failed to load product (${res.status})`);
+        }
+
+        const data: GunbuilderProductFromApi = await res.json();
+        setProduct(data);
+      } catch (err: any) {
+        if (err?.name === "AbortError") return;
+        setError(err?.message ?? "Failed to load product");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchProduct();
+    return () => controller.abort();
+  }, [numericId]);
+
+  /**
+   * Builder selection toggle:
+   * - If selected -> remove from build
+   * - Else -> add to build
+   */
+  const handleTogglePart = () => {
+    if (!numericId) return;
+
+    if (!categoryId) {
+      alert(
+        `No CategoryId mapping found for partRole "${partRoleParam}". Add it in catalogMappings.`
+      );
+      return;
+    }
+
+    const qp = new URLSearchParams();
+    qp.set("platform", platform || "AR-15");
+
+    if (isSelected) {
+      qp.set("remove", String(categoryId));
+      router.push(`/builder?${qp.toString()}`);
+      return;
+    }
+
+    qp.set("select", `${categoryId}:${numericId}`);
+    router.push(`/builder?${qp.toString()}`);
+  };
+
+  const imageUrl = product?.imageUrl ?? product?.mainImageUrl ?? null;
+
+  /**
+   * Offers normalization:
+   * - If product.offers exists, use & sort it (real offers).
+   * - Otherwise, fallback to a single offer derived from product.buyUrl/product.price (legacy).
+   */
+  const offers = useMemo(() => {
+    if (!product) return [];
+
+    const raw = (product.offers ?? []).filter(Boolean) as OfferFromApi[];
+    if (raw.length > 0) return sortOffers(raw);
+
+    if (product.buyUrl) {
+      return sortOffers([
+        {
+          merchantName: product.merchantName ?? "Merchant",
+          price: product.price,
+          buyUrl: product.buyUrl,
+          inStock: product.inStock ?? true,
+        },
+      ]);
+    }
+
+    return [];
+  }, [product]);
+
+  /**
+   * Best offer (for the "Buy from ..." CTA)
+   * IMPORTANT: this must be defined AFTER offers is computed
+   * (do NOT reference `offers` inside the offers useMemo).
+   */
+  const bestOffer = offers[0] ?? null;
+
+  /**
+   * Helper: identify the best offer row
+   * We compare by buyUrl (stable + unique enough for MVP)
+   */
+  const isBestOffer = (offer: OfferFromApi) =>
+    !!bestOffer && offer.buyUrl && offer.buyUrl === bestOffer.buyUrl;
+
+  if (!categoryId) {
+    return (
+      <main className="min-h-screen bg-black text-zinc-50">
+        <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+          <div className="text-center">
+            <h1 className="text-2xl font-semibold text-zinc-50 mb-4">
+              Unknown Part Role
+            </h1>
+            <p className="text-sm text-zinc-400 mb-6">
+              No mapping found for{" "}
+              <span className="text-zinc-200">{partRoleParam}</span>. Add it to{" "}
+              <span className="text-zinc-200">catalogMappings</span>.
+            </p>
+            <Link
+              href={`/parts/p/${encodeURIComponent(
+                platform
+              )}/${encodeURIComponent(partRoleParam)}`}
+              className="text-amber-300 hover:text-amber-200 underline"
+            >
+              Back to Parts List
+            </Link>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+        {/* Breadcrumbs */}
+        <header className="mb-6">
+          <div className="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
+            <Link
+              href={{
+                pathname: "/builder",
+                query: platform ? { platform } : {},
+              }}
+              className="hover:text-zinc-300"
+            >
+              Builder
+            </Link>
+            <span className="text-zinc-700">/</span>
+            <Link
+              href={`/parts/p/${encodeURIComponent(
+                platform
+              )}/${encodeURIComponent(partRoleParam)}`}
+              className="hover:text-zinc-300"
+            >
+              Parts
+            </Link>
+            <span className="text-zinc-700">/</span>
+            <span className="text-zinc-300">Details</span>
+          </div>
+
+          <div className="mt-4 flex items-start justify-between gap-4">
+            <div>
+              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+                BATTL BUILDERS
+              </p>
+              <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
+                Product <span className="text-amber-300">Details</span>
+              </h1>
+              <p className="mt-2 text-sm text-zinc-400 max-w-2xl">
+                Offers, pricing placeholders, and builder actions — all on the
+                canonical /parts/p route.
+              </p>
+            </div>
+
+            {/* Platform switch (updates NEW route) */}
+            <div className="flex items-center gap-2">
+              <label
+                htmlFor="platform-select"
+                className="text-xs text-zinc-500"
+              >
+                Platform
+              </label>
+              <select
+                id="platform-select"
+                value={platform}
+                onChange={(e) => {
+                  const next = e.target.value;
+                  router.replace(
+                    `/parts/p/${encodeURIComponent(next)}/${encodeURIComponent(
+                      partRoleParam
+                    )}/${encodeURIComponent(productSlug)}`
+                  );
+                }}
+                className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+              >
+                {PLATFORMS.map((p) => (
+                  <option key={p} value={p}>
+                    {p}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </header>
+
+        {/* Body */}
+        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
+          {loading ? (
+            <p className="py-10 text-center text-sm text-zinc-500">
+              Loading product…
+            </p>
+          ) : error ? (
+            <p className="py-10 text-center text-sm text-red-400">
+              {error} — check that the Ballistic API is running.
+            </p>
+          ) : !product ? (
+            <p className="py-10 text-center text-sm text-zinc-500">
+              Product not found.
+            </p>
+          ) : (
+            <div className="grid gap-6 md:grid-cols-[280px_1fr]">
+              {/* Left: image + core actions */}
+              <div className="space-y-3">
+                <div className="rounded-md border border-zinc-800 bg-zinc-950/80 p-3">
+                  <div className="aspect-square w-full overflow-hidden rounded-md border border-zinc-800 bg-black">
+                    {imageUrl ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={imageUrl}
+                        alt={product.name}
+                        className="h-full w-full object-contain p-2"
+                        loading="lazy"
+                      />
+                    ) : (
+                      <div className="flex h-full w-full items-center justify-center text-xs text-zinc-600">
+                        No image
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="mt-3 flex items-center justify-between">
+                    <span className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
+                      Stock
+                    </span>
+                    <span
+                      className={`text-xs font-semibold ${
+                        product.inStock === false
+                          ? "text-red-300"
+                          : "text-emerald-300"
+                      }`}
+                    >
+                      {product.inStock === false ? "Out of stock" : "In stock"}
+                    </span>
+                  </div>
+
+                  <div className="mt-3 flex gap-2">
+                    <Link
+                      href={`/parts/p/${encodeURIComponent(
+                        platform
+                      )}/${encodeURIComponent(partRoleParam)}`}
+                      className="flex-1 rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-2 text-center text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-800"
+                    >
+                      Back to List
+                    </Link>
+
+                    <button
+                      type="button"
+                      onClick={handleTogglePart}
+                      className={`flex-1 rounded-md px-3 py-2 text-center text-xs font-semibold transition-colors ${
+                        isSelected
+                          ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
+                          : "bg-amber-400 text-black hover:bg-amber-300"
+                      }`}
+                    >
+                      {isSelected ? "Remove" : "Add"}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Pricing history placeholder */}
+                <div className="rounded-md border border-zinc-800 bg-zinc-950/80 p-3">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">
+                      Price History
+                    </h3>
+                    <span className="text-[10px] text-zinc-600">
+                      placeholder
+                    </span>
+                  </div>
+                  <div className="mt-2 h-28 rounded border border-zinc-800 bg-zinc-950 flex items-center justify-center text-xs text-zinc-600">
+                    Pricing graph will go here
+                  </div>
+                  <p className="mt-2 text-[11px] text-zinc-500">
+                    We’ll wire this to price snapshots once the offer model is
+                    stable.
+                  </p>
+                </div>
+              </div>
+
+              {/* Right: details + offers */}
+              <div className="min-w-0 space-y-4">
+                {/* Product meta */}
+                <div className="rounded-md border border-zinc-800 bg-zinc-950/80 p-4">
+                  <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                    <div className="min-w-0">
+                      <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+                        {product.brand}
+                      </p>
+                      <h2 className="mt-1 text-xl md:text-2xl font-semibold text-zinc-50">
+                        {product.name}
+                      </h2>
+
+                      <div className="mt-2 flex flex-wrap gap-2 text-xs">
+                        <span className="rounded border border-zinc-800 bg-zinc-900/60 px-2 py-1 text-zinc-300">
+                          Platform:{" "}
+                          <span className="font-semibold text-zinc-100">
+                            {product.platform || platform}
+                          </span>
+                        </span>
+                        <span className="rounded border border-zinc-800 bg-zinc-900/60 px-2 py-1 text-zinc-300">
+                          Role:{" "}
+                          <span className="font-semibold text-zinc-100">
+                            {product.partRole || partRoleParam}
+                          </span>
+                        </span>
+                        <span className="rounded border border-zinc-800 bg-zinc-900/60 px-2 py-1 text-zinc-300">
+                          ID:{" "}
+                          <span className="font-semibold text-zinc-100">
+                            {product.id}
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="shrink-0 text-right">
+                      <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
+                        Current price
+                      </div>
+                      <div className="mt-1 text-2xl font-semibold text-amber-300">
+                        {formatPrice(product.price)}
+                      </div>
+                    </div>
+                  </div>
+
+                  {(product.shortDescription || product.description) && (
+                    <div className="mt-4 border-t border-zinc-800 pt-4">
+                      {product.shortDescription ? (
+                        <p className="text-sm text-zinc-300">
+                          {product.shortDescription}
+                        </p>
+                      ) : null}
+                      {product.description ? (
+                        <p className="mt-2 whitespace-pre-wrap text-sm text-zinc-400">
+                          {product.description}
+                        </p>
+                      ) : null}
+                    </div>
+                  )}
+                </div>
+
+                {/* Offers */}
+                <div className="rounded-md border border-zinc-800 bg-zinc-950/80 p-4">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">
+                      Merchant Offers
+                    </h3>
+                    <span className="text-[10px] text-zinc-600">
+                      {offers.length ? `${offers.length} offers` : "no offers"}
+                    </span>
+                  </div>
+
+                  {offers.length ? (
+                    <div className="mt-3 overflow-x-auto rounded border border-zinc-800">
+                      <table className="min-w-full text-sm">
+                        <thead className="bg-zinc-900/60">
+                          <tr className="text-xs uppercase tracking-[0.14em] text-zinc-500">
+                            <th className="px-3 py-2 text-left">Merchant</th>
+                            <th className="px-3 py-2 text-left">Stock</th>
+                            <th className="px-3 py-2 text-right">Price</th>
+                            <th className="px-3 py-2 text-right">Action</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-zinc-800">
+                          {offers.map((o, idx) => (
+                            <tr
+                              key={idx}
+                              className={`hover:bg-zinc-900/40 ${
+                                isBestOffer(o)
+                                  ? "bg-amber-400/10 border-l-2 border-amber-400"
+                                  : ""
+                              }`}
+                            >
+                              {" "}
+                              <td className="px-3 py-2 text-zinc-200 flex items-center">
+                                <span>{o.merchantName ?? "Merchant"}</span>
+
+                                {isBestOffer(o) && (
+                                  <span className="ml-2 inline-flex items-center rounded bg-amber-400 px-2 py-0.5 text-[10px] font-semibold text-black">
+                                    BEST DEAL
+                                  </span>
+                                )}
+                              </td>
+                              <td className="px-3 py-2 text-xs">
+                                {o.inStock === false ? (
+                                  <span className="text-red-300">
+                                    Out of stock
+                                  </span>
+                                ) : (
+                                  <span className="text-emerald-300">
+                                    In stock
+                                  </span>
+                                )}
+                              </td>
+                              <td className="px-3 py-2 text-right font-semibold text-amber-300">
+                                {o.price != null
+                                  ? `$${o.price.toFixed(2)}`
+                                  : "—"}
+                              </td>
+                              <td className="px-3 py-2 text-right">
+                                {o.buyUrl ? (
+                                  <a
+                                    href={o.buyUrl}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    className="inline-flex items-center justify-center rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
+                                  >
+                                    Buy
+                                  </a>
+                                ) : (
+                                  <span className="text-xs text-zinc-600">
+                                    —
+                                  </span>
+                                )}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <p className="mt-3 text-sm text-zinc-500">
+                      No offers attached yet. Once offers are available, this
+                      becomes the “where to buy” table.
+                    </p>
+                  )}
+
+                  {/* Best Offer CTA (uses sorted offers[0]) */}
+                  {bestOffer?.buyUrl ? (
+                    <div className="mt-3 flex justify-end">
+                      <a
+                        href={bestOffer.buyUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="rounded-md border border-zinc-700 bg-zinc-900/70 px-4 py-2 text-sm font-semibold text-zinc-200 hover:bg-zinc-800"
+                      >
+                        Buy from {bestOffer.merchantName ?? "Merchant"} →
+                      </a>
+                    </div>
+                  ) : null}
+                </div>
+
+                {/* Footer tips */}
+                <div className="flex flex-wrap gap-2 text-xs text-zinc-500">
+                  <span className="rounded border border-zinc-800 bg-zinc-950/60 px-2 py-1">
+                    Tip: Add this part, then go back and compare alternates.
+                  </span>
+                  <span className="rounded border border-zinc-800 bg-zinc-950/60 px-2 py-1">
+                    Canonical route:{" "}
+                    <span className="text-zinc-300">
+                      /parts/p/{platform}/{partRoleParam}/{productSlug}
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
+      </div>
+    </main>
+  );
+}

app/(builder)/parts/p/[platform]/[partRole]/page.tsx

@@ -0,0 +1,5 @@
+import PartsBrowseClient from "@/components/parts/PartsBrowseClient";
+
+export default function Page({ params }: { params: { platform: string; partRole: string } }) {
+  return <PartsBrowseClient partRole={params.partRole} platform={params.platform} />;
+}

app/actions/sendEmail.ts

@@ -0,0 +1,57 @@
+"use server";
+
+export type SendEmailPayload = {
+    recipient: string;
+    subject: string;
+    body: string;
+};
+
+export type ApiResponse<T> = {
+    success?: boolean;
+    message?: string;
+    data?: T;
+};
+
+export type EmailRequest = {
+    id: number;
+    recipient: string;
+    subject: string;
+    body: string;
+    sentAt: string | null;
+    status: "PENDING" | "SENT" | "FAILED" | string;
+    errorMessage: string | null;
+    createdAt: string;
+};
+
+export async function sendEmailAction(
+    payload: SendEmailPayload
+): Promise<ApiResponse<EmailRequest>> {
+    const baseUrl = process.env.BACKEND_BASE_URL;
+    if (!baseUrl) {
+        throw new Error("BACKEND_BASE_URL is not set");
+    }
+
+    const res = await fetch(`${baseUrl}/api/email/send`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            // Authorization: `Bearer ${process.env.BACKEND_JWT}`, // if needed
+        },
+        body: JSON.stringify(payload),
+        cache: "no-store",
+    });
+
+    const data: ApiResponse<EmailRequest> | null = await res
+        .json()
+        .catch(() => null);
+
+    if (!res.ok) {
+        throw new Error(data?.message ?? `Request failed with ${res.status}`);
+    }
+
+    if (!data) {
+        throw new Error("Empty response body");
+    }
+
+    return data;
+}

app/admin/email/manage/page.tsx

@@ -0,0 +1,346 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/context/AuthContext";
+import {
+  fetchEmailRequests,
+  createEmailRequest,
+  updateEmailRequest,
+  deleteEmailRequest,
+  type EmailRequest,
+  type CreateEmailRequestDto,
+  type UpdateEmailRequestDto,
+} from "@/lib/api/emailRequests";
+import { Pencil, Trash2, Plus, X } from "lucide-react";
+import { formatDate } from "@/lib/dateFormattingUtility";
+
+type EmailStatusTab = "ALL" | "PENDING" | "SENT" | "FAILED" | "OTHER";
+
+export default function AdminEmailPage() {
+  const { token } = useAuth();
+  const [emails, setEmails] = useState<EmailRequest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [modalMode, setModalMode] = useState<"create" | "edit">("create");
+  const [selectedEmail, setSelectedEmail] = useState<EmailRequest | null>(null);
+  const [formData, setFormData] = useState<CreateEmailRequestDto>({
+    email: "",
+    status: "",
+  });
+  const [submitting, setSubmitting] = useState(false);
+
+  const [statusTab, setStatusTab] = useState<EmailStatusTab>("ALL");
+
+  const loadEmails = async () => {
+    if (!token) return;
+
+    try {
+      setLoading(true);
+      const data = await fetchEmailRequests(token);
+      setEmails(data.data);
+      setError(null);
+    } catch (e: any) {
+      console.error(e);
+      setError(e?.message ?? "Failed to load email requests");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadEmails();
+  }, [token]);
+
+  const normalizeStatus = (s: unknown) => String(s ?? "").trim().toUpperCase();
+
+  const counts = useMemo(() => {
+    const c = { ALL: 0, PENDING: 0, SENT: 0, FAILED: 0, OTHER: 0 } as Record<
+      EmailStatusTab,
+      number
+    >;
+
+    c.ALL = emails.length;
+
+    for (const e of emails) {
+      const st = normalizeStatus(e.status);
+      if (st === "PENDING") c.PENDING += 1;
+      else if (st === "SENT") c.SENT += 1;
+      else if (st === "FAILED") c.FAILED += 1;
+      else c.OTHER += 1;
+    }
+
+    return c;
+  }, [emails]);
+
+  const filteredEmails = useMemo(() => {
+    if (statusTab === "ALL") return emails;
+
+    return emails.filter((e) => {
+      const st = normalizeStatus(e.status);
+      if (statusTab === "OTHER") {
+        return st !== "PENDING" && st !== "SENT" && st !== "FAILED";
+      }
+      return st === statusTab;
+    });
+  }, [emails, statusTab]);
+
+  const tabs: { key: EmailStatusTab; label: string }[] = [
+    { key: "ALL", label: "All" },
+    { key: "PENDING", label: "Pending" },
+    { key: "SENT", label: "Sent" },
+    { key: "FAILED", label: "Failed" },
+    { key: "OTHER", label: "Other" },
+  ];
+
+  const handleCreate = () => {
+    setModalMode("create");
+    setFormData({ email: "", status: "" });
+    setSelectedEmail(null);
+    setShowModal(true);
+  };
+
+  const handleEdit = (email: EmailRequest) => {
+    setModalMode("edit");
+    setFormData({ email: email.email, status: email.status });
+    setSelectedEmail(email);
+    setShowModal(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!token) return;
+    if (!confirm("Are you sure you want to delete this email request?")) return;
+
+    try {
+      await deleteEmailRequest(token, id);
+      await loadEmails();
+    } catch (e: any) {
+      alert(e?.message ?? "Failed to delete email request");
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token) return;
+
+    try {
+      setSubmitting(true);
+      if (modalMode === "create") {
+        await createEmailRequest(token, formData);
+      } else if (selectedEmail) {
+        const updateData: UpdateEmailRequestDto = {};
+        if (formData.email !== selectedEmail.email) updateData.email = formData.email;
+        if (formData.status !== selectedEmail.status) updateData.status = formData.status;
+        await updateEmailRequest(token, selectedEmail.id, updateData);
+      }
+      setShowModal(false);
+      await loadEmails();
+    } catch (e: any) {
+      alert(e?.message ?? "Failed to save email request");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!token) {
+    return (
+      <div className="p-6 text-sm text-red-500">
+        You must be logged in to view this page.
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight">Emails</h1>
+          <p className="mt-1 text-xs text-zinc-400">
+            Manage Email and their statuses.
+          </p>
+        </div>
+        <button
+          onClick={handleCreate}
+          className="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"
+        >
+          <Plus size={14} />
+          Add Email
+        </button>
+      </div>
+
+      {/* Status Tabs */}
+      <div className="flex flex-wrap items-center gap-2">
+        {tabs.map((t) => {
+          const active = statusTab === t.key;
+          return (
+            <button
+              key={t.key}
+              type="button"
+              onClick={() => setStatusTab(t.key)}
+              className={`inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs transition ${
+                active
+                  ? "border-amber-500/60 bg-amber-500/10 text-amber-200"
+                  : "border-zinc-800 bg-zinc-950/60 text-zinc-300 hover:border-amber-400/60 hover:text-amber-300"
+              }`}
+            >
+              <span>{t.label}</span>
+              <span
+                className={`rounded-full px-2 py-0.5 text-[10px] ${
+                  active ? "bg-amber-500/15 text-amber-200" : "bg-zinc-900 text-zinc-400"
+                }`}
+              >
+                {counts[t.key]}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="rounded border border-red-500/60 bg-red-950/30 px-3 py-2 text-xs text-red-200">
+          {error}
+        </div>
+      )}
+
+      {/* Table */}
+      {loading ? (
+        <div className="text-sm text-zinc-400">Loading…</div>
+      ) : (
+        <div className="overflow-x-auto rounded-lg border border-zinc-800 bg-zinc-950/60">
+          <table className="min-w-full text-left text-xs">
+            <thead className="bg-zinc-900/80 text-zinc-400">
+              <tr>
+                <th className="px-3 py-2 font-medium">ID</th>
+                <th className="px-3 py-2 font-medium">Email</th>
+                <th className="px-3 py-2 font-medium">Status</th>
+                <th className="px-3 py-2 font-medium">Created At</th>
+                <th className="px-3 py-2 font-medium">Updated At</th>
+                <th className="px-3 py-2 font-medium text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredEmails.map((email) => (
+                <tr
+                  key={email.id}
+                  className="border-t border-zinc-800/70 hover:bg-zinc-900/60"
+                >
+                  <td className="px-3 py-2 text-zinc-400">{email.id}</td>
+                  <td className="px-3 py-2 text-zinc-100">{email.recipient}</td>
+                  <td className="px-3 py-2">
+                    <span className="inline-flex items-center rounded-full bg-zinc-800 px-2 py-0.5 text-[11px] text-zinc-300">
+                      {email.status}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-[11px] text-zinc-400">
+                    {new Date(email.createdAt).toLocaleString()}
+                  </td>
+                  <td className="px-3 py-2 text-[11px] text-zinc-400">
+                    {email.updatedAt ? formatDate(email.updatedAt) : "—"}
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <button
+                        onClick={() => handleEdit(email)}
+                        className="rounded p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+                        title="Edit"
+                      >
+                        <Pencil size={14} />
+                      </button>
+                      <button
+                        onClick={() => handleDelete(email.id)}
+                        className="rounded p-1 text-zinc-400 hover:bg-red-900/50 hover:text-red-400"
+                        title="Delete"
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+
+              {filteredEmails.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={6}
+                    className="px-3 py-4 text-center text-xs text-zinc-500"
+                  >
+                    No email requests found for{" "}
+                    <span className="text-zinc-300">{tabs.find((t) => t.key === statusTab)?.label}</span>.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Modal */}
+      {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 Email Request" : "Edit Email Request"}
+              </h2>
+              <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={handleSubmit} className="space-y-4">
+              <div>
+                <label className="mb-1 block text-xs font-medium text-zinc-300">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: 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-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                  placeholder="user@example.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="mb-1 block text-xs font-medium text-zinc-300">
+                  Status
+                </label>
+                <input
+                  type="text"
+                  value={formData.status}
+                  onChange={(e) => setFormData({ ...formData, status: 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-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                  placeholder="pending"
+                />
+              </div>
+
+              <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={submitting}
+                >
+                  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={submitting}
+                >
+                  {submitting ? "Saving..." : modalMode === "create" ? "Create" : "Update"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/email/page.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAuth } from "@/context/AuthContext";
+import {
+  fetchEmailRequests,
+  createEmailRequest,
+  updateEmailRequest,
+  deleteEmailRequest,
+  type EmailRequest,
+  type CreateEmailRequestDto,
+  type UpdateEmailRequestDto,
+} from "@/lib/api/emailRequests";
+import { Pencil, Trash2, Plus, X } from "lucide-react";
+import { formatDate } from "@/lib/dateFormattingUtility";
+export default function AdminEmailPage() {
+  const { token } = useAuth();
+  const [emails, setEmails] = useState<EmailRequest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [modalMode, setModalMode] = useState<"create" | "edit">("create");
+  const [selectedEmail, setSelectedEmail] = useState<EmailRequest | null>(null);
+  const [formData, setFormData] = useState<CreateEmailRequestDto>({
+    email: "",
+    status: "",
+  });
+  const [submitting, setSubmitting] = useState(false);
+
+  const loadEmails = async () => {
+    if (!token) return;
+    
+    try {
+      setLoading(true);
+      const data = await fetchEmailRequests(token);
+      setEmails(data.data);
+      setError(null);
+    } catch (e: any) {
+      console.error(e);
+      setError(e?.message ?? "Failed to load email requests");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadEmails();
+  }, [token]);
+
+  const handleCreate = () => {
+    setModalMode("create");
+    setFormData({ email: "", status: "" });
+    setSelectedEmail(null);
+    setShowModal(true);
+  };
+
+  const handleEdit = (email: EmailRequest) => {
+    setModalMode("edit");
+    setFormData({ email: email.email, status: email.status });
+    setSelectedEmail(email);
+    setShowModal(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!token) return;
+    if (!confirm("Are you sure you want to delete this email request?")) return;
+
+    try {
+      await deleteEmailRequest(token, id);
+      await loadEmails();
+    } catch (e: any) {
+      alert(e?.message ?? "Failed to delete email request");
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token) return;
+
+    try {
+      setSubmitting(true);
+      if (modalMode === "create") {
+        await createEmailRequest(token, formData);
+      } else if (selectedEmail) {
+        const updateData: UpdateEmailRequestDto = {};
+        if (formData.email !== selectedEmail.email) updateData.email = formData.email;
+        if (formData.status !== selectedEmail.status) updateData.status = formData.status;
+        await updateEmailRequest(token, selectedEmail.id, updateData);
+      }
+      setShowModal(false);
+      await loadEmails();
+    } catch (e: any) {
+      alert(e?.message ?? "Failed to save email request");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!token) {
+    return (
+      <div className="p-6 text-sm text-red-500">
+        You must be logged in to view this page.
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight">
+            Processed E-mail
+          </h1>
+          <p className="mt-1 text-xs text-zinc-400">
+            Manage email requests and their statuses.
+          </p>
+        </div>
+        <button
+          onClick={handleCreate}
+          className="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"
+        >
+          <Plus size={14} />
+          Add Email Request
+        </button>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="rounded border border-red-500/60 bg-red-950/30 px-3 py-2 text-xs text-red-200">
+          {error}
+        </div>
+      )}
+
+      {/* Table */}
+      {loading ? (
+        <div className="text-sm text-zinc-400">Loading…</div>
+      ) : (
+        <div className="overflow-x-auto rounded-lg border border-zinc-800 bg-zinc-950/60">
+          <table className="min-w-full text-left text-xs">
+            <thead className="bg-zinc-900/80 text-zinc-400">
+              <tr>
+                <th className="px-3 py-2 font-medium">ID</th>
+                <th className="px-3 py-2 font-medium">Email</th>
+                <th className="px-3 py-2 font-medium">Status</th>
+                <th className="px-3 py-2 font-medium">Created At</th>
+                <th className="px-3 py-2 font-medium">Updated At</th>
+                <th className="px-3 py-2 font-medium text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {emails.map((email) => (
+                <tr
+                  key={email.id}
+                  className="border-t border-zinc-800/70 hover:bg-zinc-900/60"
+                >
+                  <td className="px-3 py-2 text-zinc-400">{email.id}</td>
+                  <td className="px-3 py-2 text-zinc-100">{email.recipient}</td>
+                  <td className="px-3 py-2">
+                    <span className="inline-flex items-center rounded-full bg-zinc-800 px-2 py-0.5 text-[11px] text-zinc-300">
+                      {email.status}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-[11px] text-zinc-400">
+                    {new Date(email.createdAt).toLocaleString()}
+                  </td>
+                  <td className="px-3 py-2 text-[11px] text-zinc-400">
+                    {formatDate(email.updatedAt)}
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <button
+                        onClick={() => handleEdit(email)}
+                        className="rounded p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+                        title="Edit"
+                      >
+                        <Pencil size={14} />
+                      </button>
+                      <button
+                        onClick={() => handleDelete(email.id)}
+                        className="rounded p-1 text-zinc-400 hover:bg-red-900/50 hover:text-red-400"
+                        title="Delete"
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+
+              {emails.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={6}
+                    className="px-3 py-4 text-center text-xs text-zinc-500"
+                  >
+                    No email requests found.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Modal */}
+      {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 Email Request" : "Edit Email Request"}
+              </h2>
+              <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={handleSubmit} className="space-y-4">
+              <div>
+                <label className="mb-1 block text-xs font-medium text-zinc-300">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: 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-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                  placeholder="user@example.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="mb-1 block text-xs font-medium text-zinc-300">
+                  Status
+                </label>
+                <input
+                  type="text"
+                  value={formData.status}
+                  onChange={(e) => setFormData({ ...formData, status: 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-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                  placeholder="pending"
+                />
+              </div>
+
+              <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={submitting}
+                >
+                  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={submitting}
+                >
+                  {submitting ? "Saving..." : modalMode === "create" ? "Create" : "Update"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/email/send/page-sendText.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { sendEmailAction, type ApiResponse, type EmailRequest } from "/app/actions/sendEmail";
+import { Button, Field, Input, Textarea } from "@/components/ui/form";
+
+export default function SendEmailForm(): JSX.Element {
+  const [result, setResult] = useState<
+    ApiResponse<EmailRequest> | { error: string } | null
+  >(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const [showSuccess, setShowSuccess] = useState(false);
+  const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (successTimerRef.current) clearTimeout(successTimerRef.current);
+    };
+  }, []);
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
+    e.preventDefault();
+    setResult(null);
+
+    setShowSuccess(false);
+    if (successTimerRef.current) clearTimeout(successTimerRef.current);
+
+    const form = new FormData(e.currentTarget);
+
+    const recipient = String(form.get("recipient") ?? "");
+    const subject = String(form.get("subject") ?? "");
+    const body = String(form.get("body") ?? "");
+
+    try {
+      setSubmitting(true);
+      const data = await sendEmailAction({ recipient, subject, body });
+      setResult(data);
+
+      if (data?.success === true) {
+        setShowSuccess(true);
+
+        successTimerRef.current = setTimeout(() => {
+          setShowSuccess(false);
+        }, 2000);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setResult({ error: message });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-xl px-4 py-10 text-zinc-50">
+      <h1 className="text-2xl font-semibold tracking-tight">
+        Send <span className="text-amber-300">Email</span>
+      </h1>
+      <p className="mt-2 text-sm text-zinc-400">
+        Compose a message and send it from the admin panel.
+      </p>
+
+      <form onSubmit={onSubmit} className="mt-6 space-y-4">
+        {result && "error" in result && (
+          <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+            {result.error}
+          </div>
+        )}
+
+        <Field label="Recipient" htmlFor="recipient">
+          <Input
+            id="recipient"
+            name="recipient"
+            type="email"
+            placeholder="user@example.com"
+            defaultValue="user@example.com"
+            required
+          />
+        </Field>
+
+        <Field label="Subject" htmlFor="subject">
+          <Input
+            id="subject"
+            name="subject"
+            placeholder="Test subject"
+            defaultValue="Test subject"
+            required
+          />
+        </Field>
+
+        <Field label="Body" htmlFor="body">
+          <Textarea
+            id="body"
+            name="body"
+            placeholder="Write your message…"
+            defaultValue="Test body"
+            rows={6}
+            required
+          />
+        </Field>
+
+        <Button type="submit" disabled={submitting}>
+          {submitting ? "Sending…" : showSuccess ? "Success" : "Send"}
+        </Button>
+
+        <div className="rounded-md border border-zinc-800 bg-zinc-950/60 p-3">
+          <div className="text-xs font-medium text-zinc-400">Response</div>
+          <pre className="mt-2 overflow-x-auto text-xs text-zinc-200">
+            {result ? JSON.stringify(result, null, 2) : "No response yet."}
+          </pre>
+        </div>
+      </form>
+    </div>
+  );
+}

app/admin/email/send/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import SendEmailForm from "@/components/SendEmail";
+
+export default function SendEmailPage() {
+    return <SendEmailForm />;
+}

app/admin/layout.tsx

@@ -0,0 +1,120 @@
+"use client";
+import type React from "react";
+import { useState } from "react";
+import AdminLeftNavigation from "@/components/AdminLeftNavigation";
+import {
+  LayoutDashboard,
+  Download,
+  Layers,
+  Boxes,
+  Store,
+  Users,
+  Settings,
+  LucideMail,
+} 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",
+    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" />,
+  },
+];
+
+// ... existing code ...
+// 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">
+        <AdminLeftNavigation
+            collapsed={collapsed}
+            onToggleCollapsed={() => setCollapsed((v) => !v)}
+        />
+
+        {/* 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>
+  );
+}

app/admin/mapping/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 const API_BASE_URL =
   process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
@@ -13,123 +13,58 @@ type PendingBucket = {
   productCount: number;
 };
 
-const PART_ROLE_OPTIONS: string[] = [
+/**
-    // LOWER – receivers
+ * Canonical part roles (kebab-case) — should match what the importer normalizes to.
-    "LOWER_RECEIVER_STRIPPED",
+ * Keep this list tight + intentional so mappings don't create junk roles in the DB.
-    "LOWER_RECEIVER_COMPLETE",
+ */
-    "LOWER_RECEIVER_COMPLETE_PISTOL",
+const PART_ROLE_OPTIONS = [
-    "LOWER_RECEIVER_COMPLETE_RIFLE",
+  // Assemblies / receivers
-    "LOWER_RECEIVER_80",
+  "upper-receiver",
-    "LOWER_RECEIVER_BILLET",
+  "complete-upper",
-    "LOWER_RECEIVER_FORGED",
+  "lower-receiver",
-    "LOWER_RECEIVER_POLYMER",
+  "complete-lower",
-  
-    // LOWER – internals & controls
-    "LOWER_PARTS_KIT",
-    "LOWER_PARTS_KIT_ENHANCED",
 
-    "TRIGGER",
+  // Upper sub-parts
-    "TRIGGER_OTHER",
+  "bcg",
-    "TRIGGER_COMBAT",
+  "barrel",
-    "TRIGGER_MATCH",
+  "gas-block",
-    "TRIGGER_DROP_IN",
+  "gas-tube",
-    "TRIGGER_SINGLE_STAGE",
+  "muzzle-device",
-    "TRIGGER_TWO_STAGE",
+  "suppressor",
-    "TRIGGER_GUARD",
+  "handguard",
-    "PISTOL_GRIP",
+  "charging-handle",
-    "PISTOL_GRIP_ERGO",
-    "PISTOL_GRIP_VERTICAL",
-    "SAFETY_SELECTOR",
-    "SAFETY_SELECTOR_AMBI",
-    "SAFETY_SELECTOR_45_DEG",
-    "MAG_RELEASE",
-    "TAKEDOWN_PINS",
-    "SPRINGS_PINS_MISC",
-  
-    // LOWER – buffer & stock
-    "BUFFER_KIT",
-    "BUFFER_TUBE",
-    "BUFFER_TUBE_MILSPEC",
-    "BUFFER_TUBE_COMMERCIAL",
-    "BUFFER_SPRING",
-    "BUFFER_WEIGHT",
-    "STOCK_ADJUSTABLE",
-    "STOCK_FIXED",
-    "STOCK_FOLDER",
-    "STOCK_PRECISION",
-    "BRACE_PISTOL",
-  
-    // UPPER – receivers & BCG
-    "UPPER_RECEIVER_STRIPPED",
-    "UPPER_RECEIVER_BILLET",
-    "UPPER_RECEIVER_MONOLITHIC",
-    "UPPER_RECEIVER_COMPLETE",
-    "UPPER_RECEIVER_COMPLETE_PISTOL",
-    "UPPER_RECEIVER_COMPLETE_RIFLE",
-    "BOLT_CARRIER_GROUP",
-    "BCG_COMPLETE",
-    "BCG_LIGHTWEIGHT",
-    "BCG_NICKEL_BORON",
-  
-    // UPPER – barrel & gas
-    "BARREL",
-    "BARREL_THREADED",
-    "BARREL_PENCIL",
-    "BARREL_MATCH",
-    "BARREL_HEAVY",
-    "BARREL_14_5_PINNED",
-    "GAS_BLOCK",
-    "GAS_BLOCK_ADJUSTABLE",
-    "GAS_BLOCK_LOW_PROFILE",
-    "GAS_TUBE_PISTOL",
-    "GAS_TUBE_CAR",
-    "GAS_TUBE_MID",
-    "GAS_TUBE_RIFLE",
-  
-    // UPPER – front end / muzzle
-    "HANDGUARD_MLOK",
-    "HANDGUARD_KEYMOD",
-    "HANDGUARD_QUAD",
-    "HANDGUARD_SLICK",
-    "MUZZLE_BRAKE",
-    "MUZZLE_COMPENSATOR",
 
-     // 👇 generic / backup muzzle roles
+  // Lower sub-parts
-    "MUZZLE_DEVICE",
+  "lower-parts",
-    "MUZZLE_DEVICE_OTHER",
+  "trigger",
-    
+  "grip",
-    "FLASH_HIDER",
+  "safety",
-    "MUZZLE_DEVICE_QD_MOUNT",
+  "buffer",
-    "SUPPRESSOR_DIRECT_THREAD",
+  "stock",
-    "SUPPRESSOR_QD",
+
-    "SUPPRESSOR_RIFLE",
+  // Sights / optics
-    "SUPPRESSOR_PISTOL",
+  "sights",
-    "CHARGING_HANDLE",
+  "optic",
-    "CHARGING_HANDLE_AMBI",
+
-    "CHARGING_HANDLE_GAS_BUSTER",
+  // Accessories / gear
-  
+  "magazine",
-    // Sights / optics
+  "weapon-light",
-    "SIGHTS_BACKUP",
+  "foregrip",
-    "SIGHTS_IRON_FIXED",
+  "bipod",
-    "SIGHTS_IRON_FLIP",
+  "sling",
-    "SIGHTS_OFFSET",
+  "rail-accessory",
-    "OPTIC_REDDOT",
+  "tools",
-    "OPTIC_LPVO",
+] as const;
-    "OPTIC_HOLOGRAPHIC",
+
-    "OPTIC_PRISM",
+type PartRole = (typeof PART_ROLE_OPTIONS)[number];
-    "OPTIC_MAGNIFIER",
+
-  
+function toLabel(role: string) {
-    // Accessories
+  // "complete-upper" -> "Complete Upper"
-    "MAGAZINE",
+  return role
-    "SLING",
+    .split("-")
-    "BIPOD",
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-    "MOUNT_SCOPE",
+    .join(" ");
-    "MOUNT_OFFSET",
+}
-    "LIGHT_WEAPON",
-    "LASER_VISIBLE",
-    "LASER_IR",
-    "TOOL",
-  ];
 
 export default function MappingAdminPage() {
   const [rows, setRows] = useState<PendingBucket[]>([]);
@@ -137,17 +72,33 @@ export default function MappingAdminPage() {
   const [savingKey, setSavingKey] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const options = useMemo(
+    () =>
+      PART_ROLE_OPTIONS.map((value) => ({
+        value,
+        label: toLabel(value),
+      })),
+    []
+  );
+
   useEffect(() => {
     async function load() {
       try {
         setLoading(true);
         setError(null);
+
         const res = await fetch(
-          `${API_BASE_URL}/api/admin/mapping/pending-buckets`
+          `${API_BASE_URL}/api/admin/mapping/pending-buckets`,
+          { headers: { Accept: "application/json" } }
         );
+
         if (!res.ok) {
-          throw new Error(`Failed to load pending buckets (${res.status})`);
+          const text = await res.text().catch(() => "");
+          throw new Error(
+            `Failed to load pending buckets (${res.status})${text ? `: ${text}` : ""}`
+          );
         }
+
         const data: PendingBucket[] = await res.json();
         setRows(data);
       } catch (e: any) {
@@ -162,9 +113,14 @@ export default function MappingAdminPage() {
   }, []);
 
   const handleChangeRole = (idx: number, value: string) => {
+    // Always store normalized kebab-case (defensive)
+    const normalized = value
+      ? value.trim().toLowerCase().replace(/_/g, "-")
+      : "";
+
     setRows((prev) => {
       const next = [...prev];
-      next[idx] = { ...next[idx], mappedPartRole: value || null };
+      next[idx] = { ...next[idx], mappedPartRole: normalized || null };
       return next;
     });
   };
@@ -172,6 +128,20 @@ export default function MappingAdminPage() {
   const handleSave = async (row: PendingBucket) => {
     if (!row.mappedPartRole) return;
 
+    const mapped = row.mappedPartRole
+      .trim()
+      .toLowerCase()
+      .replace(/_/g, "-");
+
+    // Basic guard: prevent saving random roles from stale data
+    const allowed = new Set<string>(PART_ROLE_OPTIONS as readonly string[]);
+    if (!allowed.has(mapped)) {
+      setError(
+        `Refusing to save unknown part role: "${row.mappedPartRole}". Pick a role from the dropdown list.`
+      );
+      return;
+    }
+
     const key = `${row.merchantId}-${row.rawCategoryKey}`;
     try {
       setSavingKey(key);
@@ -183,12 +153,15 @@ export default function MappingAdminPage() {
         body: JSON.stringify({
           merchantId: row.merchantId,
           rawCategoryKey: row.rawCategoryKey,
-          mappedPartRole: row.mappedPartRole,
+          mappedPartRole: mapped,
         }),
       });
 
       if (!res.ok) {
-        throw new Error(`Failed to save mapping (${res.status})`);
+        const text = await res.text().catch(() => "");
+        throw new Error(
+          `Failed to save mapping (${res.status})${text ? `: ${text}` : ""}`
+        );
       }
 
       // After save, remove this bucket from the list
@@ -241,8 +214,8 @@ export default function MappingAdminPage() {
                 Pending Buckets
               </h2>
               <span className="text-xs text-zinc-400">
-                {rows.length} buckets • {rows.reduce((s, r) => s + r.productCount, 0)}{" "}
+                {rows.length} buckets •{" "}
-                products
+                {rows.reduce((s, r) => s + r.productCount, 0)} products
               </span>
             </div>
 
@@ -283,7 +256,9 @@ export default function MappingAdminPage() {
                         <td className="px-2 py-1 text-zinc-300">
                           {row.rawCategoryKey}
                         </td>
-                        <td className="px-2 py-1 text-zinc-200">{row.productCount}</td>
+                        <td className="px-2 py-1 text-zinc-200">
+                          {row.productCount}
+                        </td>
                         <td className="px-2 py-1 text-zinc-100">
                           <select
                             className="w-full rounded-md border border-zinc-700 bg-zinc-950/80 px-2 py-1 text-xs text-zinc-100 outline-none focus:border-amber-400"
@@ -293,9 +268,9 @@ export default function MappingAdminPage() {
                             }
                           >
                             <option value="">Select part role…</option>
-                            {PART_ROLE_OPTIONS.map((pr) => (
+                            {options.map((opt) => (
-                              <option key={pr} value={pr}>
+                              <option key={opt.value} value={opt.value}>
-                                {pr}
+                                {opt.label} ({opt.value})
                               </option>
                             ))}
                           </select>

app/admin/merchants/page.tsx

@@ -34,52 +34,50 @@ export default function MerchantsAdminPage() {
 
   // --- load merchants ---
   useEffect(() => {
-    let cancelled = false;
+    const controller = new AbortController();
 
     async function loadMerchants() {
       try {
-        console.log("Loading merchants from:", `${API_BASE_URL}/admin/merchants`);
+        setLoading(true);
-  
+        setError(null);
-        const res = await fetch(`${API_BASE_URL}/admin/merchants`, {
+
+        const url = `${API_BASE_URL}/api/admin/merchants`;
+        console.log("Loading merchants from:", url);
+
+        const res = await fetch(url, {
           method: "GET",
-          headers: {
+          headers: { Accept: "application/json" },
-            Accept: "application/json",
+          signal: controller.signal,
-          },
         });
-  
+
-        console.log("Merchants response status:", res.status);
-  
         if (!res.ok) {
           const text = await res.text().catch(() => "");
           throw new Error(`HTTP ${res.status} ${res.statusText} – ${text}`);
         }
-  
+
         const data: MerchantAdminDto[] = await res.json();
         setMerchants(data);
-        setError(null);
       } catch (err: any) {
+        if (err?.name === "AbortError") return;
         console.error("Error loading merchants", err);
-        setError(err.message ?? "Failed to load merchants");
+        setError(err?.message ?? "Failed to load merchants");
       } finally {
         setLoading(false);
       }
     }
-  
-    loadMerchants();
 
-    return () => {
+    loadMerchants();
-      cancelled = true;
+    return () => controller.abort();
-    };
   }, []);
 
   // --- local field editing ---
   const updateMerchantField = <K extends keyof MerchantAdminDto>(
     id: number,
     field: K,
-    value: MerchantAdminDto[K],
+    value: MerchantAdminDto[K]
   ) => {
     setMerchants((prev) =>
-      prev.map((m) => (m.id === id ? { ...m, [field]: value } : m)),
+      prev.map((m) => (m.id === id ? { ...m, [field]: value } : m))
     );
   };
 
@@ -93,7 +91,7 @@ export default function MerchantsAdminPage() {
       setError(null);
       setBanner(null);
 
-      const res = await fetch(`${API_BASE_URL}/admin/merchants/${id}`, {
+      const res = await fetch(`${API_BASE_URL}/api/admin/merchants/${id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -108,20 +106,16 @@ export default function MerchantsAdminPage() {
       if (!res.ok) {
         const text = await res.text().catch(() => "");
         console.error("Merchant save failed", res.status, text);
-        throw new Error(
+        throw new Error(`Save failed (${res.status})${text ? `: ${text}` : ""}`);
-          `Save failed (${res.status})${text ? `: ${text}` : ""}`,
-        );
       }
 
       const updated: MerchantAdminDto = await res.json();
-      setMerchants((prev) =>
+      setMerchants((prev) => prev.map((m) => (m.id === id ? updated : m)));
-        prev.map((m) => (m.id === id ? updated : m)),
-      );
 
       setBanner("Merchant saved successfully.");
     } catch (e: any) {
       console.error("Error saving merchant", e);
-      setError(e.message ?? "Failed to save merchant");
+      setError(e?.message ?? "Failed to save merchant");
     } finally {
       setSavingId(null);
       setTimeout(() => setBanner(null), 3000);
@@ -135,29 +129,27 @@ export default function MerchantsAdminPage() {
       setError(null);
       setBanner(null);
 
-      const res = await fetch(`${API_BASE_URL}/admin/imports/${id}`, {
+      const res = await fetch(`${API_BASE_URL}/api/admin/imports/${id}`, {
         method: "POST",
       });
 
       if (!res.ok) {
         const text = await res.text().catch(() => "");
         console.error("Full import failed", res.status, text);
-        throw new Error(
+        throw new Error(`Import failed (${res.status})${text ? `: ${text}` : ""}`);
-          `Import failed (${res.status})${text ? `: ${text}` : ""}`,
-        );
       }
 
       setBanner("Full import started successfully.");
     } catch (e: any) {
       console.error("Error starting full import", e);
-      setError(e.message ?? "Failed to start full import");
+      setError(e?.message ?? "Failed to start full import");
     } finally {
       setImportingId(null);
       setTimeout(() => setBanner(null), 3000);
     }
   };
 
-  // --- run offer sync (matches /{merchantId}/offers-only) ---
+  // --- run offer sync ---
   const handleRunOfferSync = async (id: number) => {
     try {
       setOfferSyncId(id);
@@ -165,24 +157,22 @@ export default function MerchantsAdminPage() {
       setBanner(null);
 
       const res = await fetch(
-        `${API_BASE_URL}/admin/imports/${id}/offers-only`,
+        `${API_BASE_URL}/api/admin/imports/${id}/offers-only`,
-        {
+        { method: "POST" }
-          method: "POST",
-        },
       );
 
       if (!res.ok) {
         const text = await res.text().catch(() => "");
         console.error("Offer sync failed", res.status, text);
         throw new Error(
-          `Offer sync failed (${res.status})${text ? `: ${text}` : ""}`,
+          `Offer sync failed (${res.status})${text ? `: ${text}` : ""}`
         );
       }
 
       setBanner("Offer sync started successfully.");
     } catch (e: any) {
       console.error("Error starting offer sync", e);
-      setError(e.message ?? "Failed to start offer sync");
+      setError(e?.message ?? "Failed to start offer sync");
     } finally {
       setOfferSyncId(null);
       setTimeout(() => setBanner(null), 3000);
@@ -202,9 +192,9 @@ export default function MerchantsAdminPage() {
               Merchant Feeds <span className="text-amber-300">Admin</span>
             </h1>
             <p className="mt-2 text-sm text-zinc-400 max-w-2xl">
-              Manage your AvantLink merchants, product feed URLs, and offer
+              Manage your AvantLink merchants, product feed URLs, and offer sync
-              sync settings. Use this to onboard new merchants and keep feeds
+              settings. Use this to onboard new merchants and keep feeds fresh
-              fresh without touching SQL.
+              without touching SQL.
             </p>
           </div>
         </header>
@@ -244,6 +234,7 @@ export default function MerchantsAdminPage() {
                     <th className="py-2 pl-3 text-right">Actions</th>
                   </tr>
                 </thead>
+
                 <tbody className="divide-y divide-zinc-800">
                   {merchants.map((m) => (
                     <tr key={m.id} className="align-top">
@@ -257,71 +248,62 @@ export default function MerchantsAdminPage() {
                           className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm text-zinc-50 focus:border-amber-400/70 focus:outline-none focus:ring-0"
                         />
                       </td>
+
                       <td className="py-2 px-3">
                         <input
                           type="text"
                           value={m.avantlinkMid}
                           onChange={(e) =>
-                            updateMerchantField(
+                            updateMerchantField(m.id, "avantlinkMid", e.target.value)
-                              m.id,
-                              "avantlinkMid",
-                              e.target.value,
-                            )
                           }
                           className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm text-zinc-50 focus:border-amber-400/70 focus:outline-none focus:ring-0"
                         />
                       </td>
+
                       <td className="py-2 px-3">
                         <input
                           type="text"
                           value={m.feedUrl ?? ""}
                           onChange={(e) =>
-                            updateMerchantField(
+                            updateMerchantField(m.id, "feedUrl", e.target.value)
-                              m.id,
-                              "feedUrl",
-                              e.target.value,
-                            )
                           }
                           className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs md:text-sm text-zinc-50 focus:border-amber-400/70 focus:outline-none focus:ring-0"
                         />
                       </td>
+
                       <td className="py-2 px-3">
                         <input
                           type="text"
                           value={m.offerFeedUrl ?? ""}
                           onChange={(e) =>
-                            updateMerchantField(
+                            updateMerchantField(m.id, "offerFeedUrl", e.target.value || null)
-                              m.id,
-                              "offerFeedUrl",
-                              e.target.value || null,
-                            )
                           }
                           className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs md:text-sm text-zinc-50 focus:border-amber-400/70 focus:outline-none focus:ring-0"
                         />
                       </td>
+
                       <td className="py-2 px-3">
                         <label className="inline-flex items-center gap-2 text-xs text-zinc-300">
                           <input
                             type="checkbox"
                             checked={m.isActive}
                             onChange={(e) =>
-                              updateMerchantField(
+                              updateMerchantField(m.id, "isActive", e.target.checked)
-                                m.id,
-                                "isActive",
-                                e.target.checked,
-                              )
                             }
                             className="h-4 w-4 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
                           />
                           Active
                         </label>
                       </td>
+
                       <td className="py-2 px-3 text-xs text-zinc-400 whitespace-nowrap">
                         {formatDate(m.lastFullImportAt)}
                       </td>
+
                       <td className="py-2 px-3 text-xs text-zinc-400 whitespace-nowrap">
                         {formatDate(m.lastOfferSyncAt)}
                       </td>
+
                       <td className="py-2 pl-3">
                         <div className="flex flex-col items-end gap-1">
                           <button
@@ -336,33 +318,27 @@ export default function MerchantsAdminPage() {
                           >
                             {savingId === m.id ? "Saving…" : "Save"}
                           </button>
+
                           <button
                             type="button"
                             onClick={() => handleRunFullImport(m.id)}
                             disabled={importingId === m.id}
                             className={`rounded-md px-3 py-1.5 text-xs font-medium border border-zinc-700 bg-zinc-900 text-zinc-200 hover:bg-zinc-800 transition-colors ${
-                              importingId === m.id
+                              importingId === m.id ? "opacity-60 cursor-wait" : ""
-                                ? "opacity-60 cursor-wait"
-                                : ""
                             }`}
                           >
-                            {importingId === m.id
+                            {importingId === m.id ? "Importing…" : "Run Full Import"}
-                              ? "Importing…"
-                              : "Run Full Import"}
                           </button>
+
                           <button
                             type="button"
                             onClick={() => handleRunOfferSync(m.id)}
                             disabled={offerSyncId === m.id}
                             className={`rounded-md px-3 py-1.5 text-xs font-medium border border-zinc-700 bg-zinc-900 text-zinc-200 hover:bg-zinc-800 transition-colors ${
-                              offerSyncId === m.id
+                              offerSyncId === m.id ? "opacity-60 cursor-wait" : ""
-                                ? "opacity-60 cursor-wait"
-                                : ""
                             }`}
                           >
-                            {offerSyncId === m.id
+                            {offerSyncId === m.id ? "Syncing Offers…" : "Run Offer Sync"}
-                              ? "Syncing Offers…"
-                              : "Run Offer Sync"}
                           </button>
                         </div>
                       </td>

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/products/page.tsx

@@ -0,0 +1,411 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+type ProductSummary = {
+  id: number;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  price: number | null;
+  buyUrl: string | null;
+  imageUrl: string | null;
+};
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+type PlatformOption = {
+  key: string; // e.g. AR15, AR9
+  label: string; // e.g. "Armalite Rifle model 15"
+};
+
+// Backend currently filters products by canonical platform strings like "AR-15".
+// DB platform keys are like "AR15" / "AR9". Translate when calling /api/v1/products.
+const platformKeyToApiPlatform = (key: string) => {
+  const k = (key ?? "").toUpperCase().trim();
+  if (!k) return "AR-15";
+  if (k === "AR15" || k === "AR-15") return "AR-15";
+  if (k === "AR10" || k === "AR-10") return "AR-10";
+  if (k === "AR9" || k === "AR-9") return "AR-9";
+  // Fallback: if it already contains a dash, assume it's canonical.
+  if (k.includes("-")) return k;
+  // Otherwise, best-effort: insert a dash after AR.
+  if (k.startsWith("AR") && k.length > 2) return `AR-${k.slice(2)}`;
+  return k;
+};
+
+const FALLBACK_PLATFORMS: PlatformOption[] = [
+  { key: "AR15", label: "AR-15" },
+  { key: "AR10", label: "AR-10" },
+  { key: "AR9", label: "AR-9" },
+];
+
+export default function AdminProductsPage() {
+  const [platforms, setPlatforms] = useState<PlatformOption[]>(FALLBACK_PLATFORMS);
+  const [platform, setPlatform] = useState<string>("AR15");
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [products, setProducts] = useState<ProductSummary[]>([]);
+  const [query, setQuery] = useState<string>("");
+
+  const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(50);
+
+  // Load available platforms (dynamic if backend supports it; otherwise fallback)
+  useEffect(() => {
+    const controller = new AbortController();
+
+    async function loadPlatforms() {
+      try {
+        const res = await fetch(`${API_BASE_URL}/api/platforms`, {
+          signal: controller.signal,
+        });
+        if (!res.ok) return;
+
+        const data = (await res.json()) as unknown;
+
+        // Expected shape:
+        // [{ id, key, label, is_active, ... }]
+        const items = Array.isArray(data) ? data : [];
+
+        const cleaned: PlatformOption[] = items
+          .map((item) => {
+            if (!item || typeof item !== "object") return null;
+            const obj = item as Record<string, unknown>;
+
+            const key = typeof obj.key === "string" ? obj.key.trim() : "";
+            const label = typeof obj.label === "string" ? obj.label.trim() : "";
+
+            // Some payloads might use isActive; yours currently uses is_active
+            const activeRaw = obj.is_active ?? obj.isActive;
+            const isActive =
+              typeof activeRaw === "boolean"
+                ? activeRaw
+                : typeof activeRaw === "number"
+                  ? activeRaw === 1
+                  : true;
+
+            if (!key || !label || !isActive) return null;
+            return { key, label } as PlatformOption;
+          })
+          .filter((v): v is PlatformOption => v !== null);
+
+        if (cleaned.length === 0) return;
+
+        // Keep them stable and unique by key
+        const byKey = new Map<string, PlatformOption>();
+        for (const p of cleaned) byKey.set(p.key, p);
+        const unique = Array.from(byKey.values());
+
+        setPlatforms(unique);
+        setPlatform((prev) => (unique.some((p) => p.key === prev) ? prev : unique[0].key));
+      } catch (err: any) {
+        if (err?.name === "AbortError") return;
+        // ignore (fallback list stays)
+      }
+    }
+
+    loadPlatforms();
+    return () => controller.abort();
+  }, []);
+
+  // Load products for selected platform
+  useEffect(() => {
+    const controller = new AbortController();
+
+    async function loadProducts() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const apiPlatform = platformKeyToApiPlatform(platform);
+
+        // NOTE: backend endpoint expects `platform`, not `platformKey`.
+        const url = `${API_BASE_URL}/api/v1/products?platform=${encodeURIComponent(
+          apiPlatform
+        )}`;
+
+        const res = await fetch(url, { signal: controller.signal });
+        if (!res.ok) {
+          throw new Error(`Failed to load products (${res.status})`);
+        }
+
+        const data = (await res.json()) as ProductSummary[];
+        setProducts(Array.isArray(data) ? data : []);
+        setPage(1);
+      } catch (err: any) {
+        if (err?.name === "AbortError") return;
+        setError(err?.message ?? "Failed to load products");
+        setProducts([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadProducts();
+    return () => controller.abort();
+  }, [platform]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return products;
+
+    return products.filter((p) => {
+      const name = (p.name ?? "").toLowerCase();
+      const brand = (p.brand ?? "").toLowerCase();
+      const role = (p.partRole ?? "").toLowerCase();
+      return name.includes(q) || brand.includes(q) || role.includes(q);
+    });
+  }, [products, query]);
+
+  // Reset to page 1 when the search query changes
+  useEffect(() => {
+    setPage(1);
+  }, [query, platform, pageSize]);
+
+  const totalPages = useMemo(() => {
+    const total = filtered.length;
+    return total === 0 ? 1 : Math.ceil(total / pageSize);
+  }, [filtered.length, pageSize]);
+
+  const clampedPage = useMemo(() => {
+    if (page < 1) return 1;
+    if (page > totalPages) return totalPages;
+    return page;
+  }, [page, totalPages]);
+
+  const pageStart = useMemo(() => (clampedPage - 1) * pageSize, [clampedPage, pageSize]);
+  const pageEndExclusive = useMemo(
+    () => Math.min(pageStart + pageSize, filtered.length),
+    [pageStart, pageSize, filtered.length]
+  );
+
+  const paginated = useMemo(() => {
+    return filtered.slice(pageStart, pageEndExclusive);
+  }, [filtered, pageStart, pageEndExclusive]);
+
+  return (
+    <main className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+        <header className="mb-6">
+          <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+            Admin
+          </p>
+          <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
+            Products <span className="text-amber-300">Catalog</span>
+          </h1>
+          <p className="mt-2 text-sm text-zinc-400 max-w-2xl">
+            Read-only view of products coming from the Ballistic backend. Filter by
+            platform, search, and spot-check pricing + buy links.
+          </p>
+        </header>
+
+        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
+          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+            <div className="flex flex-wrap items-center gap-3">
+              <label className="text-xs font-medium text-zinc-400 flex items-center gap-2">
+                Platform
+                <select
+                  value={platform}
+                  onChange={(e) => setPlatform(e.target.value)}
+                  className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs text-zinc-100 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                >
+                  {platforms.map((p) => (
+                    <option key={p.key} value={p.key}>
+                      {p.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+
+              <div className="flex items-center gap-2">
+                <label htmlFor="q" className="text-xs text-zinc-500">
+                  Search
+                </label>
+                <input
+                  id="q"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="brand, name, part role…"
+                  className="w-64 max-w-full rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                />
+              </div>
+
+              <label className="text-xs font-medium text-zinc-400 flex items-center gap-2">
+                Page size
+                <select
+                  value={pageSize}
+                  onChange={(e) => setPageSize(Number(e.target.value))}
+                  className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs text-zinc-100 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                >
+                  {[25, 50, 100, 200].map((n) => (
+                    <option key={n} value={n}>
+                      {n}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            </div>
+
+            <div className="text-xs text-zinc-500">
+              {loading ? (
+                <span>Loading…</span>
+              ) : error ? (
+                <span className="text-red-400">{error}</span>
+              ) : (
+                <span>
+                  Showing{" "}
+                  <span className="font-medium text-zinc-200">
+                    {filtered.length === 0 ? 0 : pageStart + 1}-{pageEndExclusive}
+                  </span>
+                  {" "}of{" "}
+                  <span className="font-medium text-zinc-200">{filtered.length}</span>
+                  {" "}{filtered.length === 1 ? "product" : "products"}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {!loading && !error && filtered.length > 0 && (
+            <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+              <div className="text-[0.7rem] text-zinc-500">
+                Page <span className="font-semibold text-zinc-200">{clampedPage}</span> of{" "}
+                <span className="font-semibold text-zinc-200">{totalPages}</span>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  disabled={clampedPage === 1}
+                  className="rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-1.5 text-xs font-semibold text-zinc-200 hover:bg-zinc-800 disabled:opacity-40"
+                >
+                  Previous
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={clampedPage === totalPages}
+                  className="rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-1.5 text-xs font-semibold text-zinc-200 hover:bg-zinc-800 disabled:opacity-40"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+
+          <div className="mt-4 overflow-x-auto rounded-md border border-zinc-800 bg-zinc-950/80">
+            <table className="min-w-full text-xs md:text-sm">
+              <thead>
+                <tr className="border-b border-zinc-800 bg-zinc-900/60">
+                  <th className="px-3 py-2 text-left font-semibold text-zinc-400">Product</th>
+                  <th className="px-3 py-2 text-left font-semibold text-zinc-400">Brand</th>
+                  <th className="px-3 py-2 text-left font-semibold text-zinc-400">Platform</th>
+                  <th className="px-3 py-2 text-left font-semibold text-zinc-400">Part Role</th>
+                  <th className="px-3 py-2 text-right font-semibold text-zinc-400">Price</th>
+                  <th className="px-3 py-2 text-right font-semibold text-zinc-400">Link</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  <tr>
+                    <td className="px-3 py-6 text-center text-sm text-zinc-500" colSpan={6}>
+                      Loading products…
+                    </td>
+                  </tr>
+                ) : error ? (
+                  <tr>
+                    <td className="px-3 py-6 text-center text-sm text-red-400" colSpan={6}>
+                      {error}
+                    </td>
+                  </tr>
+                ) : paginated.length === 0 ? (
+                  <tr>
+                    <td className="px-3 py-6 text-center text-sm text-zinc-500" colSpan={6}>
+                      No products found.
+                    </td>
+                  </tr>
+                ) : (
+                  paginated.map((p) => (
+                    <tr
+                      key={p.id}
+                      className="border-t border-zinc-900 hover:bg-zinc-900/60 transition-colors"
+                    >
+                      <td className="px-3 py-2 align-top">
+                        <div className="font-medium text-zinc-100 line-clamp-2">{p.name}</div>
+                        <div className="mt-0.5 text-[0.7rem] text-zinc-600">ID: {p.id}</div>
+                      </td>
+                      <td className="px-3 py-2 align-top text-zinc-300">{p.brand}</td>
+                      <td className="px-3 py-2 align-top text-zinc-300">
+                        {p.platform ?? platformKeyToApiPlatform(platform)}
+                      </td>
+                      <td className="px-3 py-2 align-top text-zinc-300">{p.partRole}</td>
+                      <td className="px-3 py-2 align-top text-right text-amber-300">
+                        {p.price == null ? "—" : `$${Number(p.price).toFixed(2)}`}
+                      </td>
+                      <td className="px-3 py-2 align-top text-right">
+                        {p.buyUrl ? (
+                          <a
+                            href={p.buyUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="inline-flex items-center justify-center whitespace-nowrap rounded-md bg-amber-400 px-2.5 py-1.5 text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
+                          >
+                            Open
+                          </a>
+                        ) : (
+                          <span className="text-zinc-600">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {!loading && !error && filtered.length > 0 && (
+            <div className="mt-3 flex items-center justify-center gap-3">
+              <button
+                type="button"
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={clampedPage === 1}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-900/70 text-zinc-200 hover:bg-zinc-800 disabled:opacity-40"
+                aria-label="Previous page"
+              >
+                &lt;
+              </button>
+
+              <span className="text-xs text-zinc-500">
+                Page{" "}
+                <span className="font-semibold text-zinc-200">
+                  {clampedPage}
+                </span>{" "}
+                of{" "}
+                <span className="font-semibold text-zinc-200">
+                  {totalPages}
+                </span>
+              </span>
+
+              <button
+                type="button"
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={clampedPage === totalPages}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-900/70 text-zinc-200 hover:bg-zinc-800 disabled:opacity-40"
+                aria-label="Next page"
+              >
+                &gt;
+              </button>
+            </div>
+          )}
+
+          <div className="mt-3 text-[0.7rem] text-zinc-500">
+            Backend: <span className="font-mono text-zinc-400">{API_BASE_URL}</span> · Endpoint: <span className="font-mono text-zinc-400">/api/v1/products?platform=...</span> · Page size: <span className="font-mono text-zinc-400">{pageSize}</span>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

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>
+  );
+}

app/admin/users/page.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAuth } from "@/context/AuthContext"; // adjust path if needed
+import { Loader2 } from "lucide-react";
+
+import type { AdminUser, UserRole } from "@/types/user";
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+export default function AdminUsersPage() {
+  const { getAuthHeaders } = useAuth();
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [savingId, setSavingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function fetchUsers() {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const res = await fetch(`${API_BASE_URL}/admin/users`, {
+        headers: {
+          ...getAuthHeaders(),
+        },
+      });
+
+      if (!res.ok) {
+        throw new Error(`Failed to load users (${res.status})`);
+      }
+
+      const data: AdminUser[] = await res.json();
+      setUsers(data);
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message ?? "Failed to load users");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    fetchUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function handleRoleChange(userId: string, newRole: UserRole) {
+    setSavingId(userId);
+    setError(null);
+
+    const prev = users;
+    setUsers((cur) =>
+      cur.map((u) => (u.id === userId ? { ...u, role: newRole } : u))
+    );
+
+    try {
+      const res = await fetch(`${API_BASE_URL}/admin/users/${userId}/role`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders(),
+        },
+        body: JSON.stringify({ role: newRole }),
+      });
+
+      if (!res.ok) {
+        throw new Error(`Failed to update role (${res.status})`);
+      }
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message ?? "Failed to update role");
+      // rollback
+      setUsers(prev);
+    } finally {
+      setSavingId(null);
+    }
+  }
+
+  function handleRoleSelectChange(user: AdminUser, newRole: UserRole) {
+    if (newRole === user.role) {
+      return;
+    }
+
+    // Confirm promotions to ADMIN
+    if (
+      newRole === "ADMIN" &&
+      !window.confirm(
+        `Promote ${user.email} to ADMIN? This will give them access to the admin console.`
+      )
+    ) {
+      return;
+    }
+
+    // Confirm demotions from ADMIN
+    if (
+      user.role === "ADMIN" &&
+      newRole === "USER" &&
+      !window.confirm(
+        `Remove ADMIN access from ${user.email}? They will lose access to the admin console.`
+      )
+    ) {
+      return;
+    }
+
+    void handleRoleChange(user.id, newRole);
+  }
+
+  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">
+            Users & Roles
+          </h1>
+          <p className="mt-1 text-xs text-zinc-500">
+            Promote trusted accounts to admins. All new signups start as{" "}
+            <span className="font-medium text-zinc-300">USER</span>.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={fetchUsers}
+          className="inline-flex items-center gap-1 rounded-md border border-zinc-800 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-300 transition hover:border-amber-400/60 hover:text-amber-300"
+          disabled={loading}
+        >
+          {loading && (
+            <Loader2 className="h-3 w-3 animate-spin text-zinc-500" />
+          )}
+          <span>Refresh</span>
+        </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="flex flex-1 items-center justify-center text-xs text-zinc-500">
+          <Loader2 className="mr-2 h-4 w-4 animate-spin text-zinc-500" />
+          Loading users…
+        </div>
+      ) : users.length === 0 ? (
+        <div className="rounded-md border border-zinc-900 bg-zinc-950 px-4 py-6 text-sm text-zinc-400">
+          No users found yet. Once people start signing up, they&apos;ll show up
+          here.
+        </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">Email</th>
+                <th className="border-b border-zinc-900 px-3 py-2">
+                  Display Name
+                </th>
+                <th className="border-b border-zinc-900 px-3 py-2">Role</th>
+                <th className="border-b border-zinc-900 px-3 py-2">Created</th>
+                <th className="border-b border-zinc-900 px-3 py-2">
+                  Last Login
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((u, idx) => (
+                <tr
+                  key={u.id}
+                  className={idx % 2 === 0 ? "bg-zinc-950" : "bg-zinc-950/60"}
+                >
+                  <td className="border-b border-zinc-900 px-3 py-2 align-middle text-zinc-100">
+                    {u.email}
+                  </td>
+                  <td className="border-b border-zinc-900 px-3 py-2 align-middle text-zinc-300">
+                    {u.displayName || "—"}
+                  </td>
+                  <td className="border-b border-zinc-900 px-3 py-2 align-middle">
+                    <div className="inline-flex items-center gap-2">
+                      <span
+                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                          u.role === "ADMIN"
+                            ? "border border-amber-500/60 bg-amber-500/10 text-amber-200"
+                            : "border border-zinc-700 bg-zinc-900 text-zinc-300"
+                        }`}
+                      >
+                        {u.role}
+                      </span>
+                      <select
+                        value={u.role}
+                        onChange={(e) =>
+                          handleRoleSelectChange(u, e.target.value as UserRole)
+                        }
+                        disabled={savingId === u.id}
+                        className="rounded-md border border-zinc-800 bg-zinc-950 px-2 py-1 text-[11px] text-zinc-200 outline-none transition hover:border-amber-400/60 focus:border-amber-400/80"
+                      >
+                        <option value="USER">USER</option>
+                        <option value="ADMIN">ADMIN</option>
+                      </select>
+                    </div>
+                  </td>
+                  <td className="border-b border-zinc-900 px-3 py-2 align-middle text-zinc-400">
+                    {u.createdAt
+                      ? new Date(u.createdAt).toLocaleDateString()
+                      : "—"}
+                  </td>
+                  <td className="border-b border-zinc-900 px-3 py-2 align-middle text-zinc-400">
+                    {u.lastLoginAt
+                      ? new Date(u.lastLoginAt).toLocaleDateString()
+                      : "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <p className="mt-2 text-[10px] text-zinc-600">
+        Note: Role changes take effect on the user&apos;s next request. All new
+        accounts are created as <span className="text-zinc-300">USER</span> by
+        default.
+      </p>
+    </div>
+  );
+}

app/api/beta-signup/route.ts

@@ -0,0 +1,61 @@
+import { NextResponse } from "next/server";
+
+const BREVO_API_KEY = process.env.BREVO_API_KEY;
+const BREVO_LIST_ID = process.env.BREVO_LIST_ID; // optional
+
+export async function POST(req: Request) {
+  if (!BREVO_API_KEY) {
+    console.error("BREVO_API_KEY is not set");
+    return NextResponse.json(
+      { error: "Server not configured" },
+      { status: 500 }
+    );
+  }
+
+  try {
+    const { email } = await req.json();
+
+    if (!email || typeof email !== "string") {
+      return NextResponse.json(
+        { error: "Valid email is required" },
+        { status: 400 }
+      );
+    }
+
+    // Brevo contacts API
+    const res = await fetch("https://api.brevo.com/v3/contacts", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "api-key": BREVO_API_KEY,
+      },
+      body: JSON.stringify({
+        email,
+        updateEnabled: true, // update if already exists
+        ...(BREVO_LIST_ID
+          ? { listIds: [Number(BREVO_LIST_ID)] }
+          : {}),
+        attributes: {
+          SOURCE: "Battl Builders Beta",
+        },
+      }),
+    });
+
+    if (!res.ok) {
+      const text = await res.text();
+      console.error("Brevo error:", res.status, text);
+      return NextResponse.json(
+        { error: "Failed to subscribe" },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    console.error(err);
+    return NextResponse.json(
+      { error: "Something went wrong" },
+      { status: 500 }
+    );
+  }
+}

app/builder/[categoryId]/[partId]/page.tsx

@@ -1,436 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { CATEGORIES } from "@/data/gunbuilderParts";
-import type { CategoryId } from "@/types/gunbuilder";
-import {
-  getRetailerOffers,
-  type RetailerOffer,
-} from "./data";
-
-type GunbuilderProductFromApi = {
-  id: string; // backend UUID string
-  name: string;
-  brand: string;
-  platform: string;
-  partRole: string;
-  price: number | null;
-  mainImageUrl: string | null;
-  buyUrl: string | null;
-};
-
-const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
-
-export default function PartDetailPage() {
-  const params = useParams();
-  const categoryId = params.categoryId as CategoryId;
-  const partId = params.partId as string; // this is the UUID we passed in the link
-
-  const [product, setProduct] = useState<GunbuilderProductFromApi | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const [offers, setOffers] = useState<RetailerOffer[]>([]);
-  const [offersLoading, setOffersLoading] = useState(true);
-  const [offersError, setOffersError] = useState<string | null>(null);
-
-  const category = useMemo(
-    () => CATEGORIES.find((c) => c.id === categoryId),
-    [categoryId],
-  );
-
-  // 1) Load product (same as before)
-  useEffect(() => {
-    if (!partId) return;
-
-    const controller = new AbortController();
-
-    async function fetchProduct() {
-      try {
-        setLoading(true);
-        setError(null);
-
-        // For now, pull the full AR-15 list and find by UUID.
-        // We can optimize with a dedicated /api/products/{uuid} later.
-        const url = `${API_BASE_URL}/api/products/gunbuilder?platform=AR-15`;
-        const res = await fetch(url, { signal: controller.signal });
-
-        if (!res.ok) {
-          throw new Error(`Failed to load product (${res.status})`);
-        }
-
-        const data: GunbuilderProductFromApi[] = await res.json();
-        const found = data.find((p) => p.id === partId) ?? null;
-
-        if (!found) {
-          setError("Product not found");
-        }
-
-        setProduct(found);
-      } catch (err: any) {
-        if (err.name === "AbortError") return;
-        setError(err.message ?? "Failed to load product");
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchProduct();
-
-    return () => controller.abort();
-  }, [partId]);
-
-  // 2) Load offers for this product from Ballistic backend
-  useEffect(() => {
-    if (!partId) return;
-
-    let cancelled = false;
-
-    async function fetchOffers() {
-      try {
-        setOffersLoading(true);
-        setOffersError(null);
-
-        const data = await getRetailerOffers(partId);
-
-        if (!cancelled) {
-          setOffers(data);
-        }
-      } catch (err: any) {
-        if (!cancelled) {
-          setOffersError(err.message ?? "Failed to load retailer offers");
-        }
-      } finally {
-        if (!cancelled) {
-          setOffersLoading(false);
-        }
-      }
-    }
-
-    fetchOffers();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [partId]);
-
-  // Best price: prefer live offers, fall back to summary product.price
-  const bestPrice = useMemo(() => {
-    if (offers.length > 0) {
-      return offers[0].price;
-    }
-    return product?.price ?? null;
-  }, [offers, product]);
-
-  if (!category) {
-    return (
-      <main className="min-h-screen bg-black text-zinc-50">
-        <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
-          <h1 className="text-2xl font-semibold mb-4">Category Not Found</h1>
-          <Link
-            href="/gunbuilder"
-            className="text-amber-300 hover:text-amber-200 underline"
-          >
-            Return to Gunbuilder
-          </Link>
-        </div>
-      </main>
-    );
-  }
-
-  return (
-    <main className="min-h-screen bg-black text-zinc-50">
-      <div className="mx-auto max-w-5xl px-4 py-6 lg:py-10">
-        {/* Breadcrumbs */}
-        <nav className="mb-4 text-xs text-zinc-500">
-          <Link
-            href="/gunbuilder"
-            className="hover:text-zinc-300 transition-colors"
-          >
-            Gunbuilder
-          </Link>
-          <span className="mx-1">/</span>
-          <Link
-            href={`/gunbuilder/${categoryId}`}
-            className="hover:text-zinc-300 transition-colors"
-          >
-            {category.name}
-          </Link>
-          {product && (
-            <>
-              <span className="mx-1">/</span>
-              <span className="text-zinc-300">{product.name}</span>
-            </>
-          )}
-        </nav>
-
-        {loading ? (
-          <p className="text-sm text-zinc-500">Loading product…</p>
-        ) : error || !product ? (
-          <div>
-            <h1 className="text-xl font-semibold mb-2">Product Unavailable</h1>
-            <p className="text-sm text-zinc-500 mb-4">
-              {error ?? "We couldn’t find this product."}
-            </p>
-            <Link
-              href={`/gunbuilder/${categoryId}`}
-              className="text-amber-300 hover:text-amber-200 underline text-sm"
-            >
-              Back to {category.name} parts
-            </Link>
-          </div>
-        ) : (
-          <>
-            <div className="grid gap-6 md:grid-cols-[minmax(0,2fr)_minmax(0,1.3fr)] items-start">
-              {/* Left: image + meta */}
-              <div className="space-y-4">
-                {product.mainImageUrl && (
-                  <div className="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950">
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
-                      src={product.mainImageUrl}
-                      alt={product.name}
-                      className="w-full object-contain max-h-80 bg-zinc-950"
-                    />
-                  </div>
-                )}
-                <div className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-                  {product.brand}
-                </div>
-                <h1 className="text-2xl md:text-3xl font-semibold tracking-tight">
-                  {product.name}
-                </h1>
-
-                <div className="grid grid-cols-2 gap-3 text-xs">
-                  <p className="text-zinc-500">
-                    Platform:{" "}
-                    <span className="text-zinc-300">{product.platform}</span>
-                  </p>
-                  <p className="text-zinc-500">
-                    Role:{" "}
-                    <span className="text-zinc-300">{product.partRole}</span>
-                  </p>
-                  <p className="text-zinc-500">
-                    Category:{" "}
-                    <span className="text-zinc-300">{category.name}</span>
-                  </p>
-                  <p className="text-zinc-500">
-                    Offers:{" "}
-                    <span className="text-zinc-300">
-                      {offers.length > 0
-                        ? `${offers.length} live offer${
-                            offers.length === 1 ? "" : "s"
-                          }`
-                        : "No live offers yet"}
-                    </span>
-                  </p>
-                </div>
-
-                {/* Placeholder content until long-form fields are wired up */}
-                <section className="mt-4 space-y-3 text-sm text-zinc-300">
-                  <h2 className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-                    Product Overview
-                  </h2>
-                  <p className="text-zinc-400">
-                    This is placeholder copy for the product overview. Once
-                    the Ballistic backend exposes richer metadata (short
-                    description, feature bullets, etc.), we&apos;ll swap this
-                    text out and surface the real content here.
-                  </p>
-                  <p className="text-zinc-500 text-xs">
-                    Use this section to highlight what makes this part worth
-                    a slot in your build: materials, intended use
-                    (duty/range/competition), and any standout features.
-                  </p>
-                </section>
-
-                <section className="mt-4 rounded-lg border border-zinc-800 bg-zinc-950/70 p-3">
-                  <h2 className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500 mb-2">
-                    Quick Specs (Placeholder)
-                  </h2>
-                  <dl className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs text-zinc-400">
-                    <div>
-                      <dt className="text-zinc-500">Configuration</dt>
-                      <dd className="text-zinc-200">
-                        TBD (Stripped / Complete / Kit)
-                      </dd>
-                    </div>
-                    <div>
-                      <dt className="text-zinc-500">Caliber</dt>
-                      <dd className="text-zinc-200">TBD from feed</dd>
-                    </div>
-                    <div>
-                      <dt className="text-zinc-500">Finish</dt>
-                      <dd className="text-zinc-200">TBD from merchant data</dd>
-                    </div>
-                    <div>
-                      <dt className="text-zinc-500">Weight</dt>
-                      <dd className="text-zinc-200">TBD (oz)</dd>
-                    </div>
-                  </dl>
-                  <p className="mt-2 text-[11px] text-zinc-500">
-                    Specs are placeholders for now. As we normalize more
-                    structured attributes in the importer, this block will
-                    auto-populate per product.
-                  </p>
-                </section>
-              </div>
-
-              {/* Right: pricing + actions */}
-              <aside className="rounded-lg border border-zinc-800 bg-zinc-950/70 p-4 space-y-4">
-                <div>
-                  <p className="text-xs uppercase tracking-[0.2em] text-zinc-500 mb-1">
-                    Price
-                  </p>
-                  <p className="text-2xl font-semibold text-amber-300">
-                    {bestPrice && bestPrice > 0
-                      ? `$${bestPrice.toFixed(2)}`
-                      : "—"}
-                  </p>
-                  {!bestPrice && (
-                    <p className="mt-1 text-xs text-zinc-500">
-                      Pricing not available yet. Live pricing will appear once
-                      offers are imported.
-                    </p>
-                  )}
-                  {offers.length > 0 && (
-                    <p className="mt-1 text-[11px] text-zinc-500">
-                      Showing the best available price across all live
-                      offers for this part.
-                    </p>
-                  )}
-                  {offers.length > 1 && (
-                    <p className="mt-1 text-[11px] text-zinc-500">
-                      Price range across retailers:{" "}
-                      <span className="text-zinc-300">
-                        ${Math.min(...offers.map(o => o.price)).toFixed(2)} – ${Math.max(...offers.map(o => o.price)).toFixed(2)}
-                      </span>
-                    </p>
-                  )}
-                </div>
-
-                {/* Offers list */}
-                <div className="space-y-2">
-                  {offersLoading && (
-                    <p className="text-xs text-zinc-500">Loading offers…</p>
-                  )}
-                  {offersError && (
-                    <p className="text-xs text-red-400">{offersError}</p>
-                  )}
-                  {!offersLoading && !offersError && offers.length > 0 && (
-                    <div className="space-y-1">
-                      {offers.map((offer) => (
-                        <a
-                          key={offer.id}
-                          href={offer.affiliateUrl}
-                          target="_blank"
-                          rel="noreferrer"
-                          className="flex items-center justify-between rounded-md border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-xs hover:bg-zinc-800 transition-colors"
-                        >
-                          <span className="text-zinc-200">
-                            {offer.retailerName}
-                          </span>
-                          <span className="font-semibold text-amber-300">
-                            ${offer.price.toFixed(2)}
-                          </span>
-                        </a>
-                      ))}
-                    </div>
-                  )}
-                  {!offersLoading &&
-                    !offersError &&
-                    offers.length === 0 && (
-                      <p className="text-xs text-zinc-500">
-                        No live retailer offers yet. As feeds are imported,
-                        merchants and pricing will show up here.
-                      </p>
-                    )}
-                </div>
-
-                <div className="space-y-2">
-                  <Link
-                    href={`/gunbuilder?select=${categoryId}:${product.id}`}
-                    className="block w-full rounded-md bg-amber-400 text-black text-sm font-semibold text-center py-2.5 hover:bg-amber-300 transition-colors"
-                  >
-                    Add to Build
-                  </Link>
-
-                  {product.buyUrl ? (
-                    <a
-                      href={product.buyUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="block w-full rounded-md border border-zinc-700 bg-zinc-900 text-xs font-medium text-zinc-200 text-center py-2 hover:bg-zinc-800 transition-colors"
-                    >
-                      View on Merchant Site
-                    </a>
-                  ) : (
-                    <button
-                      type="button"
-                      disabled
-                      className="block w-full rounded-md border border-zinc-800 bg-zinc-900/60 text-xs font-medium text-zinc-500 text-center py-2 cursor-not-allowed"
-                    >
-                      External link coming soon
-                    </button>
-                  )}
-                </div>
-              </aside>
-            </div>
-
-            {/* Lower content: builder-focused helper copy (placeholder) */}
-            <section className="mt-10 grid gap-6 md:grid-cols-3 text-sm md:grid-cols-4">
-              <div className="space-y-2">
-                <h2 className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-                  Why We Like This Part
-                </h2>
-                <p className="text-zinc-400">
-                  Drop in a short blurb here about what makes this part
-                  worth picking over similar options — think reliability,
-                  track record, and value for the money.
-                </p>
-              </div>
-              <div className="space-y-2">
-                <h2 className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-                  Best For
-                </h2>
-                <p className="text-zinc-400">
-                  Use this block to call out ideal use cases:{" "}
-                  <span className="text-zinc-200">
-                    duty rifle, home defense, range toy, competition, night
-                    work
-                  </span>
-                  , etc.
-                </p>
-              </div>
-              <div className="space-y-2">
-                <h2 className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-                  Builder Notes
-                </h2>
-                <p className="text-zinc-400">
-                  Add any compatibility quirks or install tips here once
-                  the compatibility engine is wired up — gas system length,
-                  buffer recommendations, known fitment notes, and more.
-                </p>
-              </div>
-              <div className="space-y-2">
-                <h2 className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-                  Compatibility
-                </h2>
-                <div className="inline-flex items-center gap-2 rounded-md border border-amber-400/30 bg-amber-400/10 px-2 py-1 text-[11px] text-amber-300">
-                  <span className="inline-block h-2 w-2 rounded-full bg-amber-300 animate-pulse"></span>
-                  Compatibility engine coming online soon
-                </div>
-                <p className="text-zinc-500 text-xs">
-                  Fitment checks, caliber validation, buffer/gas system logic, and platform rules will appear here once the engine is active.
-                </p>
-              </div>
-            </section>
-          </>
-        )}
-      </div>
-    </main>
-  );
-}

app/builder/[categoryId]/page.tsx

@@ -1,799 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { CATEGORIES } from "@/data/gunbuilderParts";
-import type { CategoryId, Part } from "@/types/gunbuilder";
-
-type ViewMode = "card" | "list";
-
-type GunbuilderProductFromApi = {
-  id: number;
-  name: string;
-  brand: string;
-  platform: string;
-  partRole: string;
-  price: number | null;
-  imageUrl: string | null;
-  buyUrl: string | null;
-  inStock?: boolean | null;
-};
-
-type UiPart = Part & {
-  // local-only stock flag for filtering
-  inStock?: boolean;
-};
-
-const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
-
-
-// sort options
-type SortOption = "relevance" | "price-asc" | "price-desc" | "brand-asc";
-
-// build state type + storage key (matches /gunbuilder)
-type BuildState = Partial<Record<CategoryId, string>>;
-const STORAGE_KEY = "gunbuilder-build-state";
-
-export default function CategoryPage() {
-  const params = useParams();
-  const categoryId = params.categoryId as CategoryId;
-  const router = useRouter();
-
-  const [viewMode, setViewMode] = useState<ViewMode>("list");
-  const [parts, setParts] = useState<UiPart[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // filter + sort state
-  const [brandFilter, setBrandFilter] = useState<string[]>([]);
-  const [sortBy, setSortBy] = useState<SortOption>("relevance");
-  const [searchQuery, setSearchQuery] = useState<string>("");
-  const [priceRange, setPriceRange] = useState<{ min: number | null; max: number | null }>({
-    min: null,
-    max: null,
-  });
-  const [inStockOnly, setInStockOnly] = useState<boolean>(false);
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const PAGE_SIZE = 24;
-
-  //  build state for this page, synced with localStorage
-  const [build, setBuild] = useState<BuildState>(() => {
-    if (typeof window === "undefined") return {};
-    try {
-      const stored = window.localStorage.getItem(STORAGE_KEY);
-      return stored ? (JSON.parse(stored) as BuildState) : {};
-    } catch {
-      return {};
-    }
-  });
-
-  const category = useMemo(
-    () => CATEGORIES.find((c) => c.id === categoryId),
-    [categoryId],
-  );
-
-  useEffect(() => {
-    if (!categoryId) return;
-
-    const controller = new AbortController();
-
-    async function fetchCategoryParts() {
-      try {
-        setLoading(true);
-        setError(null);
-
-        const search = new URLSearchParams();
-        search.set("platform", "AR-15");
-        search.set("categorySlug", categoryId);
-
-        const url = `${API_BASE_URL}/api/gunbuilder/products/by-category?${search.toString()}`;
-
-        const res = await fetch(url, { signal: controller.signal });
-
-        if (!res.ok) {
-          throw new Error(`Failed to load products (${res.status})`);
-        }
-
-        const data: GunbuilderProductFromApi[] = await res.json();
-
-        const normalized: UiPart[] = data.map((p) => ({
-          id: String(p.id),                 // normalize to string for BuildState
-          categoryId,
-          name: p.name,
-          brand: p.brand,
-          price: p.price ?? 0,
-          imageUrl: p.imageUrl ?? undefined, // match backend field name
-          url: p.buyUrl ?? undefined,
-          notes: undefined,
-          inStock: p.inStock ?? true,
-        }));
-
-        setParts(normalized);
-      } catch (err: any) {
-        if (err.name === "AbortError") return;
-        setError(err.message ?? "Failed to load products");
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchCategoryParts();
-
-    return () => controller.abort();
-  }, [categoryId]);
-
-  //  persist build to localStorage whenever it changes
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    try {
-      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(build));
-    } catch {
-      // ignore
-    }
-  }, [build]);
-
-  useEffect(() => {
-    // whenever the category or filters change, jump back to page 1
-    setCurrentPage(1);
-  }, [categoryId, brandFilter, sortBy, searchQuery]);
-
-  //  handler to toggle Add / Remove for this category
-  const handleTogglePart = (categoryId: CategoryId, partId: string) => {
-    const isSelected = build[categoryId] === partId;
-
-    if (isSelected) {
-      // Remove from build
-      setBuild((prev) => {
-        const updated: BuildState = { ...prev };
-        delete updated[categoryId];
-        return updated;
-      });
-    } else {
-      // Add to build and navigate back to main gunbuilder page
-      setBuild((prev) => ({
-        ...prev,
-        [categoryId]: partId,
-      }));
-      router.push("/builder");
-    }
-  };
-
-  // available brands for filter
-  const availableBrands = useMemo(
-    () =>
-      Array.from(new Set(parts.map((p) => p.brand)))
-        .filter(Boolean)
-        .sort((a, b) => a.localeCompare(b)),
-    [parts],
-  );
-  const priceBounds = useMemo(() => {
-    if (parts.length === 0) {
-      return { min: null as number | null, max: null as number | null };
-    }
-
-    let min = Number.POSITIVE_INFINITY;
-    let max = Number.NEGATIVE_INFINITY;
-
-    for (const p of parts) {
-      const price = p.price ?? 0;
-      if (price < min) min = price;
-      if (price > max) max = price;
-    }
-
-    if (!Number.isFinite(min) || !Number.isFinite(max)) {
-      return { min: null as number | null, max: null as number | null };
-    }
-
-    return { min, max };
-  }, [parts]);
-
-  // initialize / clamp priceRange whenever bounds change
-  useEffect(() => {
-    if (priceBounds.min == null || priceBounds.max == null) return;
-
-    setPriceRange((prev) => {
-      const min = prev.min ?? priceBounds.min!;
-      const max = prev.max ?? priceBounds.max!;
-      return {
-        min: Math.max(priceBounds.min!, Math.min(min, priceBounds.max!)),
-        max: Math.min(priceBounds.max!, Math.max(max, priceBounds.min!)),
-      };
-    });
-  }, [priceBounds.min, priceBounds.max]);
-
-  const filteredParts = useMemo(() => {
-    let result = [...parts];
-
-    // Price range filter
-    const effectiveMin =
-      priceRange.min ?? (priceBounds.min != null ? priceBounds.min : null);
-    const effectiveMax =
-      priceRange.max ?? (priceBounds.max != null ? priceBounds.max : null);
-
-    if (effectiveMin != null && effectiveMax != null) {
-      result = result.filter((p) => {
-        const price = p.price ?? 0;
-        return price >= effectiveMin && price <= effectiveMax;
-      });
-    }
-
-    // Brand filter
-    if (brandFilter.length > 0) {
-      result = result.filter((p) => brandFilter.includes(p.brand));
-    }
-
-    // In-stock filter
-    if (inStockOnly) {
-      result = result.filter((p) => p.inStock ?? true);
-    }
-
-    const normalizedQuery = searchQuery.trim().toLowerCase();
-    if (normalizedQuery) {
-      result = result.filter((p) => {
-        const name = p.name.toLowerCase();
-        const brand = p.brand.toLowerCase();
-        return (
-          name.includes(normalizedQuery) ||
-          brand.includes(normalizedQuery)
-        );
-      });
-    }
-
-    switch (sortBy) {
-      case "price-asc":
-        result.sort((a, b) => a.price - b.price);
-        break;
-      case "price-desc":
-        result.sort((a, b) => b.price - a.price);
-        break;
-      case "brand-asc":
-        result.sort((a, b) => a.brand.localeCompare(b.brand));
-        break;
-      case "relevance":
-      default:
-        // leave in backend order
-        break;
-    }
-
-    // Pin the currently selected part (for this category) to the top, if any
-    const selectedId = build[categoryId];
-    if (selectedId) {
-      const selected = result.filter((p) => p.id === selectedId);
-      const others = result.filter((p) => p.id !== selectedId);
-      result = [...selected, ...others];
-    }
-
-    return result;
-  }, [parts, brandFilter, sortBy, build, categoryId, searchQuery]);
-
-  const totalPages = useMemo(
-    () => (filteredParts.length === 0 ? 1 : Math.ceil(filteredParts.length / PAGE_SIZE)),
-    [filteredParts, PAGE_SIZE]
-  );
-
-  const paginatedParts = useMemo(() => {
-    if (filteredParts.length === 0) return [];
-    const startIndex = (currentPage - 1) * PAGE_SIZE;
-    return filteredParts.slice(startIndex, startIndex + PAGE_SIZE);
-  }, [filteredParts, currentPage, PAGE_SIZE]);
-
-    useEffect(() => {
-    // whenever the category or filters change, jump back to page 1
-    setCurrentPage(1);
-  }, [categoryId, brandFilter, sortBy, searchQuery, priceRange, inStockOnly]);
-
-  const visibleRange = useMemo(() => {
-    if (filteredParts.length === 0) {
-      return { start: 0, end: 0 };
-    }
-    const start = (currentPage - 1) * PAGE_SIZE + 1;
-    const end = Math.min(start + paginatedParts.length - 1, filteredParts.length);
-    return { start, end };
-  }, [filteredParts.length, currentPage, paginatedParts.length, PAGE_SIZE]);
-
-  if (!category) {
-    return (
-      <main className="min-h-screen bg-black text-zinc-50">
-        <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
-          <div className="text-center">
-            <h1 className="text-2xl font-semibold text-zinc-50 mb-4">
-              Category Not Found
-            </h1>
-            <Link
-              href="/builder"
-              className="text-amber-300 hover:text-amber-200 underline"
-            >
-              Return to Gunbuilder
-            </Link>
-          </div>
-        </div>
-      </main>
-    );
-  }
-
-  return (
-    <main className="min-h-screen bg-black text-zinc-50">
-      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
-        {/* Header */}
-        <header className="mb-6">
-          <Link
-            href="/builder"
-            className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
-          >
-            ← Back to The Armory
-          </Link>
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-                Shadow Standard
-              </p>
-              <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
-                {category.name} <span className="text-amber-300">Parts</span>
-              </h1>
-              <p className="mt-2 text-sm text-zinc-400 max-w-xl">
-                Browse all available {category.name.toLowerCase()} options for
-                your build, pulled live from your Ballistic backend.
-              </p>
-            </div>
-            {!loading && !error && parts.length > 0 && (
-              <div className="flex gap-2 border border-zinc-800 rounded-md p-1 bg-zinc-950/60">
-                <button
-                  type="button"
-                  onClick={() => setViewMode("card")}
-                  className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
-                    viewMode === "card"
-                      ? "bg-zinc-800 text-zinc-50"
-                      : "text-zinc-400 hover:text-zinc-300"
-                  }`}
-                  aria-label="Card view"
-                >
-                  Card
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setViewMode("list")}
-                  className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
-                    viewMode === "list"
-                      ? "bg-zinc-800 text-zinc-50"
-                      : "text-zinc-400 hover:text-zinc-300"
-                  }`}
-                  aria-label="List view"
-                >
-                  List
-                </button>
-              </div>
-            )}
-          </div>
-        </header>
-
-        {/* Parts Grid/List */}
-        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
-        <div className="flex flex-col gap-4 md:flex-row">
-          {/* Left sidebar: filters */}
-          {!loading && !error && parts.length > 0 && (
-            <aside className="w-full md:w-64 shrink-0 rounded-md border border-zinc-800 bg-zinc-950/80 p-3 space-y-4">
-              <div>
-                <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">
-                  Filters
-                </h2>
-                <p className="mt-1 text-[11px] text-zinc-500">
-                  Narrow down the {category.name.toLowerCase()} list.
-                </p>
-              </div>
-
-                            {/* Price range */}
-                            <div>
-                <div className="mb-1.5 flex items-center justify-between">
-                  <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
-                    Price
-                  </span>
-                  {priceRange.min !== null || priceRange.max !== null ? (
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setPriceRange({
-                          min: priceBounds.min,
-                          max: priceBounds.max,
-                        })
-                      }
-                      className="text-[10px] text-zinc-400 hover:text-zinc-200"
-                    >
-                      Reset
-                    </button>
-                  ) : null}
-                </div>
-                {priceBounds.min == null || priceBounds.max == null ? (
-                  <p className="text-[11px] text-zinc-500">
-                    No price data available.
-                  </p>
-                ) : (
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between text-[10px] text-zinc-400">
-                      <span>
-                        Min:{" "}
-                        <span className="font-semibold text-zinc-200">
-                          $
-                          {(priceRange.min ?? priceBounds.min).toFixed(0)}
-                        </span>
-                      </span>
-                      <span>
-                        Max:{" "}
-                        <span className="font-semibold text-zinc-200">
-                          $
-                          {(priceRange.max ?? priceBounds.max).toFixed(0)}
-                        </span>
-                      </span>
-                    </div>
-                    <div className="space-y-2">
-                      <input
-                        type="range"
-                        min={priceBounds.min ?? 0}
-                        max={priceBounds.max ?? 0}
-                        value={priceRange.min ?? priceBounds.min ?? 0}
-                        onChange={(e) => {
-                          const value = Number(e.target.value);
-                          setPriceRange((prev) => ({
-                            min: Math.min(
-                              value,
-                              prev.max ?? priceBounds.max ?? value
-                            ),
-                            max:
-                              prev.max ??
-                              priceBounds.max ??
-                              value,
-                          }));
-                        }}
-                        className="w-full"
-                      />
-                      <input
-                        type="range"
-                        min={priceBounds.min ?? 0}
-                        max={priceBounds.max ?? 0}
-                        value={priceRange.max ?? priceBounds.max ?? 0}
-                        onChange={(e) => {
-                          const value = Number(e.target.value);
-                          setPriceRange((prev) => ({
-                            min:
-                              prev.min ??
-                              priceBounds.min ??
-                              value,
-                            max: Math.max(
-                              value,
-                              prev.min ?? priceBounds.min ?? value
-                            ),
-                          }));
-                        }}
-                        className="w-full"
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* Brand multi-select */}
-              <div>
-                <div className="mb-1.5 flex items-center justify-between">
-                  <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
-                    Brand
-                  </span>
-                  {brandFilter.length > 0 && (
-                    <button
-                      type="button"
-                      onClick={() => setBrandFilter([])}
-                      className="text-[10px] text-zinc-400 hover:text-zinc-200"
-                    >
-                      Clear
-                    </button>
-                  )}
-                </div>
-                {availableBrands.length === 0 ? (
-                  <p className="text-[11px] text-zinc-500">
-                    No brands available yet.
-                  </p>
-                ) : (
-                  <div className="max-h-56 space-y-1 overflow-y-auto pr-1">
-                    {availableBrands.map((b) => {
-                      const checked = brandFilter.includes(b);
-                      return (
-                        <label
-                          key={b}
-                          className="flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-[11px] text-zinc-200 hover:bg-zinc-900/80"
-                        >
-                          <input
-                            type="checkbox"
-                            className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
-                            checked={checked}
-                            onChange={(e) => {
-                              setBrandFilter((prev) =>
-                                e.target.checked
-                                  ? [...prev, b]
-                                  : prev.filter((brand) => brand !== b)
-                              );
-                            }}
-                          />
-                          <span className="truncate">{b}</span>
-                        </label>
-                      );
-                    })}
-                  </div>
-                )}
-                {brandFilter.length === 0 && availableBrands.length > 0 && (
-                  <p className="mt-1 text-[10px] text-zinc-500">
-                    No brands selected — showing all.
-                  </p>
-                )}
-              </div>
-
-              {/* In-stock toggle */}
-              <div className="border-t border-zinc-800 pt-3">
-                <label className="flex cursor-pointer items-center justify-between text-[11px] text-zinc-200">
-                  <span className="font-medium uppercase tracking-[0.12em] text-zinc-500">
-                    In stock only
-                  </span>
-                  <input
-                    type="checkbox"
-                    className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
-                    checked={inStockOnly}
-                    onChange={(e) => setInStockOnly(e.target.checked)}
-                  />
-                </label>
-                <p className="mt-1 text-[10px] text-zinc-500">
-                  Hides items marked out of stock by the backend.
-                </p>
-              </div>
-            </aside>
-          )}
-
-          {/* Right side: toolbar + results */}
-          <div className="flex-1">
-            {/* Top toolbar: count + search + sort */}
-            {!loading && !error && parts.length > 0 && (
-              <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-                <div className="text-xs text-zinc-500">
-                  Showing{" "}
-                  <span className="font-medium text-zinc-200">
-                    {visibleRange.start}-{visibleRange.end}
-                  </span>{" "}
-                  of{" "}
-                  <span className="font-medium text-zinc-200">
-                    {filteredParts.length}
-                  </span>{" "}
-                  matching parts
-                </div>
-                <div className="flex flex-wrap gap-3">
-                  <div className="flex items-center gap-2">
-                    <label
-                      htmlFor="part-search"
-                      className="text-xs text-zinc-500"
-                    >
-                      Search
-                    </label>
-                    <div className="relative">
-                      <input
-                        id="part-search"
-                        type="text"
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
-                        placeholder={`Search ${category.name.toLowerCase()}...`}
-                        className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 pr-6 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
-                      />
-                      {searchQuery && (
-                        <button
-                          type="button"
-                          onClick={() => setSearchQuery("")}
-                          className="absolute right-1 top-1/2 -translate-y-1/2 text-xs leading-none text-zinc-500 hover:text-zinc-300"
-                          aria-label="Clear search"
-                        >
-                          ×
-                        </button>
-                      )}
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <label
-                      htmlFor="sort-by"
-                      className="text-xs text-zinc-500"
-                    >
-                      Sort
-                    </label>
-                    <select
-                      id="sort-by"
-                      value={sortBy}
-                      onChange={(e) =>
-                        setSortBy(e.target.value as SortOption)
-                      }
-                      className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
-                    >
-                      <option value="relevance">Relevance</option>
-                      <option value="price-asc">Price: Low → High</option>
-                      <option value="price-desc">Price: High → Low</option>
-                      <option value="brand-asc">Brand: A → Z</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Results / states */}
-            {loading ? (
-              <p className="py-8 text-center text-sm text-zinc-500">
-                Loading {category.name.toLowerCase()}…
-              </p>
-            ) : error ? (
-              <p className="py-8 text-center text-sm text-red-400">
-                {error} — check that the Ballistic API is running.
-              </p>
-            ) : filteredParts.length === 0 ? (
-              <p className="py-8 text-center text-sm text-zinc-500">
-                No parts available for this category yet.
-              </p>
-            ) : viewMode === "card" ? (
-              <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-                {paginatedParts.map((part) => {
-                  const isSelected = build[categoryId] === part.id;
-
-                  return (
-                    <div
-                      key={part.id}
-                      className={`group relative flex flex-col rounded-md border p-3 transition-all duration-200 ${
-                        isSelected
-                          ? "border-amber-400/70 bg-amber-400/10 shadow-[0_0_0_1px_rgba(251,191,36,0.25)]"
-                          : "border-zinc-700 bg-zinc-900/50 hover:border-amber-400/60 hover:bg-amber-400/10"
-                      }`}
-                    >
-                      <div className="mb-3 flex items-center gap-2 justify-between">
-                        <div className="flex-1">
-                          <div className="text-sm font-semibold text-zinc-50">
-                            {part.brand}{" "}
-                            <span className="font-normal">
-                              — {part.name}
-                            </span>
-                          </div>
-                          {part.notes && (
-                            <p className="mt-1 line-clamp-2 text-xs text-zinc-400">
-                              {part.notes}
-                            </p>
-                          )}
-                        </div>
-                        <div className="whitespace-nowrap text-sm font-semibold text-amber-300">
-                          ${part.price.toFixed(2)}
-                        </div>
-                      </div>
-                      <div className="mt-2 flex gap-2">
-                        <Link
-                          href={`/builder/${categoryId}/${part.id}`}
-                          className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
-                        >
-                          View Details
-                        </Link>
-                        <button
-                          type="button"
-                          onClick={() => handleTogglePart(categoryId, part.id)}
-                          className={`flex-1 rounded-md px-3 py-2 text-center text-xs font-semibold transition-colors ${
-                            isSelected
-                              ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
-                              : "bg-amber-400 text-black hover:bg-amber-300"
-                          }`}
-                        >
-                          {isSelected ? "Remove from Build" : "Add to Build"}
-                        </button>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            ) : (
-              <>
-                {/* Header row for list view */}
-                <div className="hidden grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 md:grid">
-                  <span>Part</span>
-                  <span>Brand</span>
-                  <span className="text-right">Price</span>
-                  <span className="pr-2 text-right">Actions</span>
-                </div>
-
-                <div className="space-y-2">
-                  {paginatedParts.map((part) => {
-                    const isSelected = build[categoryId] === part.id;
-
-                    return (
-                      <div
-                        key={part.id}
-                        className={`group relative rounded-md border p-3 transition-all duration-200 ${
-                          isSelected
-                            ? "border-amber-400/70 bg-amber-400/10 shadow-[0_0_0_1px_rgba(251,191,36,0.25)]"
-                            : "border-zinc-700 bg-zinc-900/50 hover:border-amber-400/60 hover:bg-amber-400/10"
-                        }`}
-                      >
-                        <div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-center md:gap-4">
-                          <div className="min-w-0 flex-1">
-                            <div className="text-sm font-semibold text-zinc-50">
-                              {part.name}
-                            </div>
-                            {part.notes && (
-                              <p className="mt-1 line-clamp-1 text-xs text-zinc-400">
-                                {part.notes}
-                              </p>
-                            )}
-                          </div>
-                          <div className="text-xs text-zinc-400 md:text-left md:text-sm">
-                            {part.brand}
-                          </div>
-                          <div className="text-sm font-semibold text-amber-300 md:text-right">
-                            ${part.price.toFixed(2)}
-                          </div>
-                          <div className="flex justify-end gap-2">
-                            <Link
-                              href={`/builder/${categoryId}/${part.id}`}
-                              className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
-                            >
-                              View Details
-                            </Link>
-                            <button
-                              type="button"
-                              onClick={() =>
-                                handleTogglePart(categoryId, part.id)
-                              }
-                              className={`whitespace-nowrap rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${
-                                isSelected
-                                  ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
-                                  : "bg-amber-400 text-black hover:bg-amber-300"
-                              }`}
-                            >
-                              {isSelected ? "Remove from Build" : "Add to Build"}
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </>
-            )}
-
-            {/* Pagination controls */}
-            {filteredParts.length > 0 && totalPages > 1 && (
-              <div className="mt-4 flex items-center justify-between text-xs text-zinc-400">
-                <div>
-                  Page{" "}
-                  <span className="font-semibold text-zinc-200">
-                    {currentPage}
-                  </span>{" "}
-                  of{" "}
-                  <span className="font-semibold text-zinc-200">
-                    {totalPages}
-                  </span>
-                </div>
-                <div className="flex gap-2">
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setCurrentPage((p) => Math.max(1, p - 1))
-                    }
-                    disabled={currentPage === 1}
-                    className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
-                  >
-                    Previous
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setCurrentPage((p) => Math.min(totalPages, p + 1))
-                    }
-                    disabled={currentPage === totalPages}
-                    className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
-                  >
-                    Next
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-        </section>
-      </div>
-    </main>
-  );
-}

app/builder/page.tsx

@@ -1,732 +0,0 @@
-"use client";
-
-import { useMemo, useState, useEffect } from "react";
-import Link from "next/link";
-import { useSearchParams, useRouter } from "next/navigation";
-import { CATEGORIES } from "@/data/gunbuilderParts";
-import { BUILDER_SLOTS, isSlotSatisfied } from "@/data/builderSlots";
-import type { CategoryId, Part } from "@/types/gunbuilder";
-import { PART_ROLE_TO_CATEGORY } from "@/data/partRoleMappings";
-import { Pencil, Link2, Square, CheckSquare } from "lucide-react";
-
-type GunbuilderProductFromApi = {
-  id: number; // backend numeric id
-  name: string;
-  brand: string;
-  platform: string;
-  partRole: string;
-  price: number | null;
-  mainImageUrl: string | null;
-  buyUrl: string | null;
-};
-
-const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
-
-type BuildState = Partial<Record<CategoryId, string>>; // categoryId -> partId
-
-const STORAGE_KEY = "gunbuilder-build-state";
-
-// Category groups for the main grid
-const CATEGORY_GROUPS: {
-  id: string;
-  label: string;
-  description?: string;
-  categoryIds: CategoryId[];
-}[] = [
-  {
-    id: "lower-group",
-    label: "Lower Receiver Parts",
-    description:
-      "Everything from the serialized lower to small parts, fire control, and core controls.",
-    categoryIds: [
-      "lower",
-      "completeLower",
-      "lowerParts",
-      "trigger",
-      "grip",
-      "safety",
-      "buffer",
-      "stock",
-    ],
-  },
-  {
-    id: "upper-group",
-    label: "Upper Receiver Parts",
-    description:
-      "Barrel, upper, gas system, and the parts that keep the rifle cycling.",
-    categoryIds: [
-      "upper",
-      "completeUpper",
-      "bcg",
-      "barrel",
-      "gasBlock",
-      "gasTube",
-      "muzzleDevice",
-      "suppressor",
-      "handguard",
-      "chargingHandle",
-      "sights",
-      "optic",
-    ],
-  },
-  // Optional: future group for accessories/furniture if needed
-  // {
-  //   id: "accessories-group",
-  //   label: "Accessories & Furniture",
-  //   description: "Optics, lights, slings, and other supporting gear.",
-  //   categoryIds: ["optic", "sights", ...] as CategoryId[],
-  // },
-];
-
-export default function GunbuilderPage() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const [parts, setParts] = useState<Part[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [build, setBuild] = useState<BuildState>(() => {
-    if (typeof window !== "undefined") {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored) {
-        try {
-          return JSON.parse(stored);
-        } catch {
-          return {};
-        }
-      }
-    }
-    return {};
-  });
-  const [shareStatus, setShareStatus] = useState<string | null>(null);
-  const [shareUrl, setShareUrl] = useState<string>("");
-
-  useEffect(() => {
-    const controller = new AbortController();
-
-    async function fetchProducts() {
-      try {
-        setLoading(true);
-        setError(null);
-
-        const res = await fetch(
-          `${API_BASE_URL}/api/products/gunbuilder?platform=AR-15`,
-          { signal: controller.signal },
-        );
-
-        if (!res.ok) {
-          throw new Error(`Failed to load products (${res.status})`);
-        }
-
-        const data: GunbuilderProductFromApi[] = await res.json();
-
-        const normalized: Part[] = data
-        .map((p): Part | null => {
-          const categoryId = PART_ROLE_TO_CATEGORY[p.partRole];
-          if (!categoryId) {
-            // Skip any parts we don't know how to map yet
-            return null;
-          }
-
-          const buyUrl = p.buyUrl ?? undefined;
-
-          return {
-            id: String(p.id), // ALWAYS string
-            categoryId,
-            name: p.name,
-            brand: p.brand,
-            price: p.price ?? 0,
-            imageUrl: p.mainImageUrl ?? undefined,
-            affiliateUrl: buyUrl, // main link
-            url: buyUrl,          // 👈optional alias if you still reference .url. maybe pretty url?
-            notes: undefined,
-          };
-        })
-        .filter((p): p is Part => p !== null);
-
-
-        setParts(normalized);
-      } catch (err: any) {
-        if (err.name === "AbortError") return;
-        setError(err.message ?? "Failed to load products");
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchProducts();
-
-    return () => controller.abort();
-  }, []);
-
-  // Handle URL query parameter for part selection (?select=upper:165)
-  useEffect(() => {
-    const selectParam = searchParams.get("select");
-    if (selectParam) {
-      const [categoryId, partId] = selectParam.split(":");
-      if (categoryId && partId && CATEGORIES.some((c) => c.id === categoryId)) {
-        setBuild((prev) => {
-          const updated = {
-            ...prev,
-            [categoryId as CategoryId]: partId,
-          };
-          if (typeof window !== "undefined") {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
-          }
-          return updated;
-        });
-
-        router.replace("/builder", { scroll: false });
-      }
-    }
-  }, [searchParams, router]);
-
-  // Persist build state to localStorage whenever it changes
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(build));
-    }
-  }, [build]);
-
-  const partsByCategory: Record<CategoryId, Part[]> = useMemo(() => {
-    const grouped = {} as Record<CategoryId, Part[]>;
-    for (const category of CATEGORIES) {
-      grouped[category.id] = parts.filter(
-        (p) => p.categoryId === category.id,
-      );
-    }
-    return grouped;
-  }, [parts]);
-
-  const selectedParts: Part[] = useMemo(() => {
-    return Object.entries(build)
-      .map(([categoryId, partId]) =>
-        parts.find((p) => p.id === partId && p.categoryId === categoryId),
-      )
-      .filter(Boolean) as Part[];
-  }, [build, parts]);
-
-  const selectedByCategory: Record<CategoryId, unknown> = useMemo(
-    () =>
-      Object.fromEntries(
-        Object.entries(build).map(([categoryId, partId]) => [
-          categoryId as CategoryId,
-          partId ? true : false,
-        ]),
-      ) as Record<CategoryId, unknown>,
-    [build],
-  );
-
-  const totalPrice = useMemo(
-    () => selectedParts.reduce((sum, p) => sum + p.price, 0),
-    [selectedParts],
-  );
-
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-
-    // If no parts selected, clear the share URL
-    if (Object.keys(build).length === 0) {
-      setShareUrl("");
-      return;
-    }
-
-    try {
-      const payload = JSON.stringify(build);
-      const encoded = window.btoa(payload);
-      const origin = window.location?.origin ?? "";
-      const url = `${origin}/builder/build?build=${encodeURIComponent(
-        encoded,
-      )}`;
-      setShareUrl(url);
-    } catch {
-      setShareUrl("");
-    }
-  }, [build]);
-
-  const handleSelectPart = (categoryId: CategoryId, partId: string) => {
-    setBuild((prev) => ({
-      ...prev,
-      [categoryId]: partId,
-    }));
-  };
-
-  // Use group ordering for the summary as well
-  const summaryCategoryOrder: CategoryId[] = useMemo(
-    () =>
-      CATEGORY_GROUPS.flatMap((group) => group.categoryIds).filter(
-        (id) => CATEGORIES.some((c) => c.id === id),
-      ),
-    [],
-  );
-
-  const handleShare = async () => {
-    if (selectedParts.length === 0) {
-      setShareStatus("Add a few parts before sharing your build.");
-      return;
-    }
-
-    const lines: string[] = [];
-    lines.push("Shadow Standard — The Armory Build");
-    lines.push("");
-    lines.push(`Total: $${totalPrice.toFixed(2)}`);
-    lines.push("");
-
-    summaryCategoryOrder.forEach((categoryId) => {
-      const cat = CATEGORIES.find((c) => c.id === categoryId);
-      if (!cat) return;
-
-      const selectedPartId = build[cat.id];
-      const part = parts.find(
-        (p) => p.id === selectedPartId && p.categoryId === cat.id,
-      );
-
-      if (part) {
-        lines.push(
-          `${cat.name}: ${part.brand} — ${part.name} ($${part.price.toFixed(
-            2,
-          )})`,
-        );
-      } else {
-        lines.push(`${cat.name}: [Not selected]`);
-      }
-    });
-
-    const text = lines.join("\n");
-
-    try {
-      await navigator.clipboard.writeText(text);
-      setShareStatus("Build summary copied to clipboard.");
-    } catch {
-      setShareStatus(
-        "Could not access clipboard. You can copy from the build summary page.",
-      );
-    }
-  };
-
-  const handleCopyLink = async () => {
-    if (!shareUrl) {
-      setShareStatus("No shareable link available yet.");
-      return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(shareUrl);
-      setShareStatus("Shareable link copied to clipboard.");
-    } catch {
-      setShareStatus("Could not copy link to clipboard.");
-    }
-  };
-
-  const handleNativeShare = async () => {
-    if (!shareUrl) {
-      setShareStatus("No shareable link available yet.");
-      return;
-    }
-
-    if (navigator.share) {
-      try {
-        await navigator.share({
-          title: "Shadow Standard — The Armory Build",
-          text: "Check out my Shadow Standard Armory build.",
-          url: shareUrl,
-        });
-        setShareStatus("Share dialog opened.");
-      } catch {
-        // User canceled or share failed; keep it quiet but let them know
-        setShareStatus("Share canceled or unavailable. You can copy the link instead.");
-      }
-    } else {
-      // Fallback to copying the link
-      await handleCopyLink();
-    }
-  };
-
-  return (
-    <main className="min-h-screen bg-black text-zinc-50">
-      
-      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
-        {/* Header */}
-        <header className="mb-6">
-          <div>
-            <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-              BATTL BUILDERS
-            </p>
-            <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
-              BattlBuilder <span className="text-amber-300">Early Access</span>
-            </h1>
-            <p className="mt-2 text-sm text-zinc-400 max-w-xl">
-              Explore components from trusted brands, choose one part per
-              category, track live prices, and watch your total build cost
-              update as you go. This early-access builder keeps your setup saved
-              locally so you can come back and refine it anytime.
-            </p>
-          </div>
-        </header>
-
-
-        {/* Build summary panel */}
-        <section className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3 md:p-4 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-          {/* Left: title + totals + primary actions */}
-          <div className="flex flex-col gap-2">
-            <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-amber-300">
-              My Build Breakdown
-            </h2>
-            <div>
-              <div className="text-xs text-zinc-400">Current build total</div>
-              <div className="text-2xl font-semibold text-amber-300">
-                ${totalPrice.toFixed(2)}
-              </div>
-              <div className="text-xs text-zinc-500 mt-1">
-                {selectedParts.length} / {CATEGORIES.length} categories filled
-              </div>
-            </div>
-
-            {/* Primary actions now live under the total */}
-            <div className="mt-2 flex flex-col items-stretch gap-2 sm:flex-row sm:flex-wrap">
-              <Link
-                href="/builder/build"
-                className={`w-full sm:w-auto rounded-md border border-amber-400/60 bg-amber-400/10 px-3 py-2 text-sm font-medium text-amber-200 hover:bg-amber-400/15 text-center transition-colors ${
-                  selectedParts.length === 0
-                    ? "opacity-40 cursor-not-allowed pointer-events-none"
-                    : ""
-                }`}
-              >
-                Build Summary
-              </Link>
-              <button
-                type="button"
-                onClick={handleShare}
-                className={`w-full sm:w-auto rounded-md px-3 py-2 text-sm font-semibold transition-colors border ${
-                  selectedParts.length === 0
-                    ? "bg-zinc-900/80 text-zinc-600 border-zinc-800 cursor-not-allowed"
-                    : "bg-zinc-900/80 text-zinc-200 border-zinc-700 hover:bg-zinc-800"
-                }`}
-                disabled={selectedParts.length === 0}
-              >
-                Copy Build Summary
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  setBuild({});
-                  if (typeof window !== "undefined") {
-                    localStorage.removeItem(STORAGE_KEY);
-                  }
-                }}
-                disabled={selectedParts.length === 0}
-                className={`w-full sm:w-auto rounded-md border border-zinc-700 bg-zinc-900/50 px-3 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors ${
-                  selectedParts.length === 0 ? "opacity-40 cursor-not-allowed" : ""
-                }`}
-              >
-                Clear Build
-              </button>
-            </div>
-          </div>
-
-          {/* Right: Share Your Build */}
-          <div className="flex flex-col gap-3 md:items-end md:text-right md:flex-1">
-            {selectedParts.length > 0 && shareUrl && (
-              <div className="w-full md:w-auto">
-                <h3 className="text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-zinc-400">
-                  Share Your Build
-                </h3>
-                <p className="mt-1 text-[0.7rem] text-zinc-500">
-                  Share this link to let others view your build or bookmark it to come
-                  back later.
-                </p>
-                <div className="mt-2 flex flex-col gap-2 md:flex-row md:items-center">
-                  <div className="flex-1">
-                    <div className="text-[0.65rem] uppercase tracking-[0.16em] text-zinc-500 mb-1">
-                      Shareable URL
-                    </div>
-                    <input
-                      type="text"
-                      readOnly
-                      value={shareUrl}
-                      className="w-full rounded-md border border-zinc-700 bg-zinc-950/80 px-2 py-1.5 text-[0.7rem] text-zinc-200 font-mono outline-none focus:ring-1 focus:ring-amber-400"
-                    />
-                  </div>
-                  <div className="flex gap-2 md:flex-none md:mt-5">
-                    <button
-                      type="button"
-                      onClick={handleNativeShare}
-                      className="flex-1 md:flex-none rounded-md bg-zinc-900/80 px-3 py-1.5 text-[0.75rem] font-semibold text-zinc-100 border border-zinc-700 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
-                    >
-                      Share
-                    </button>
-                    <button
-                      type="button"
-                      onClick={handleCopyLink}
-                      className="flex-1 md:flex-none rounded-md bg-amber-400 px-3 py-1.5 text-[0.75rem] font-semibold text-black hover:bg-amber-300 transition-colors"
-                    >
-                      Copy Link
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {shareStatus && (
-              <p className="mt-1 text-[0.7rem] text-zinc-500">
-                {shareStatus}
-              </p>
-            )}
-          </div>
-        </section>
-
-        {/* Build status strip */}
-        <section className="mb-6 space-y-3">
-          <h2 className="text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-zinc-500">
-            Build Status (Needs Refined)
-          </h2>
-          <div className="flex flex-wrap gap-2 md:gap-3">
-            {BUILDER_SLOTS.map((slot) => {
-              const satisfied = isSlotSatisfied(slot, selectedByCategory);
-
-              return (
-                <div
-                  key={slot.id}
-                  className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[0.7rem] md:text-xs ${
-                    satisfied
-                      ? "border-emerald-500/70 bg-emerald-950/50 text-emerald-200"
-                      : "border-zinc-800 bg-zinc-950/80 text-zinc-200"
-                  }`}
-                >
-                  {satisfied ? (
-                    <CheckSquare className="h-4 w-4 text-emerald-400" />
-                  ) : (
-                    <Square className="h-4 w-4 text-zinc-600/80" />
-                  )}
-                  <span className="font-medium truncate max-w-[9rem] md:max-w-[11rem]">
-                    {slot.label}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        </section>
-
-        {/* Layout */}
-        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
-          <p className="mb-4 text-xs text-zinc-500">
-            Work top-down through the major sections. Each row shows your
-            current pick for that part type, with price and a direct buy
-            link—or a quick way to choose a part if you haven&apos;t picked
-            one yet.
-          </p>
-
-          {loading && (
-            <p className="text-sm text-zinc-500">
-              Loading parts from backend…
-            </p>
-          )}
-          {error && !loading && (
-            <p className="text-sm text-red-400">
-              {error} — check that the Ballistic API is running and CORS is
-              configured.
-            </p>
-          )}
-
-          {!loading && !error && (
-            <div className="space-y-6">
-              {CATEGORY_GROUPS.map((group) => {
-                const groupCategories = CATEGORIES.filter((c) =>
-                  group.categoryIds.includes(c.id as CategoryId),
-                );
-
-                if (groupCategories.length === 0) {
-                  return null;
-                }
-
-                return (
-                  <div key={group.id} className="space-y-3">
-                    <div className="flex items-baseline justify-between gap-2">
-                      <div>
-                        <h2 className="text-sm font-semibold text-zinc-100">
-                          {group.label}
-                        </h2>
-                        {group.description && (
-                          <p className="text-xs text-zinc-500 mt-1 max-w-xl">
-                            {group.description}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-
-                    <div className="overflow-x-auto rounded-md border border-zinc-800 bg-zinc-950/80">
-                      <table className="min-w-full text-xs md:text-sm">
-                        <thead>
-                          <tr className="border-b border-zinc-800 bg-zinc-900/60">
-                            <th className="px-3 py-2 text-left font-semibold text-zinc-400">
-                              Component / Part Type
-                            </th>
-                            <th className="px-3 py-2 text-left font-semibold text-zinc-400">
-                              Brand
-                            </th>
-                            <th className="px-3 py-2 text-right font-semibold text-zinc-400">
-                              Price
-                            </th>
-                            <th className="px-3 py-2 text-right font-semibold text-zinc-400">
-                              Sale Price
-                            </th>
-                            <th className="px-3 py-2 text-left font-semibold text-zinc-400">
-                              Caliber
-                            </th>
-                            <th className="px-3 py-2 text-right font-semibold text-zinc-400">
-                              Buy / Choose
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {groupCategories.map((category) => {
-                            const categoryParts =
-                              partsByCategory[category.id] ?? [];
-                            const selectedPartId = build[category.id];
-                            const selectedPart = categoryParts.find(
-                              (p) => p.id === selectedPartId,
-                            );
-                            const hasParts = categoryParts.length > 0;
-
-                            return (
-                              <tr
-                                key={category.id}
-                                className="border-t border-zinc-900 hover:bg-zinc-900/60 transition-colors"
-                              >
-                                {/* Component / Part Type */}
-                                <td className="px-3 py-2 align-top">
-                                  <div className="font-medium text-zinc-100">
-                                    {category.name}
-                                  </div>
-                                  {selectedPart ? (
-                                    <div className="text-[0.7rem] text-zinc-500 line-clamp-1">
-                                      {selectedPart.name}
-                                    </div>
-                                  ) : hasParts ? (
-                                    <div className="text-[0.7rem] text-zinc-600">
-                                      No part selected
-                                    </div>
-                                  ) : (
-                                    <div className="text-[0.7rem] text-zinc-600">
-                                      No parts available yet
-                                    </div>
-                                  )}
-                                </td>
-
-                                {/* Brand */}
-                                <td className="px-3 py-2 align-top text-zinc-300">
-                                  {selectedPart ? selectedPart.brand : "—"}
-                                </td>
-
-                                {/* Price */}
-                                <td className="px-3 py-2 align-top text-right text-amber-300">
-                                  {selectedPart
-                                    ? `$${selectedPart.price.toFixed(2)}`
-                                    : "—"}
-                                </td>
-
-                                {/* Sale Price (placeholder until we wire through sale/original) */}
-                                <td className="px-3 py-2 align-top text-right text-zinc-400">
-                                  {/* TODO: wire in sale/original prices from backend */}
-                                  {selectedPart ? "—" : "—"}
-                                </td>
-
-                                {/* Caliber (placeholder for now) */}
-                                <td className="px-3 py-2 align-top text-zinc-400">
-                                  {/* TODO: wire in caliber from ProductSummaryDto when available */}
-                                  —
-                                </td>
-
-                                {/* Buy / Choose */}
-                                <td className="px-3 py-2 align-top">
-                                  <div className="flex justify-end gap-2">
-                                    {selectedPart && selectedPart.url ? (
-                                      <>
-                                        <Link
-                                          href={`/builder/${category.id}`}
-                                          className="hidden md:inline-flex items-center justify-center rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
-                                          aria-label="Change part"
-                                          title="Change part"
-                                        >
-                                          <Pencil className="h-3.5 w-3.5 text-zinc-300" />
-                                        </Link>
-                                        <a
-                                          href={selectedPart.url}
-                                          target="_blank"
-                                          rel="noreferrer"
-                                          className="inline-flex items-center justify-center rounded-md bg-amber-400 px-2 py-1 hover:bg-amber-300 transition-colors"
-                                          aria-label="Buy part"
-                                          title="Buy part"
-                                        >
-                                          <Link2 className="h-3.5 w-3.5 text-black" />
-                                        </a>
-                                      </>
-                                    ) : hasParts ? (
-                                      <Link
-                                        href={`/builder/${category.id}`}
-                                        className="inline-flex rounded-md border border-zinc-700 bg-zinc-900/70 px-2.5 py-1 text-[0.7rem] font-medium text-zinc-200 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
-                                        onClick={() => {
-                                          // If you want to pre-select something later, you can handle here.
-                                        }}
-                                      >
-                                        Choose a Part
-                                      </Link>
-                                    ) : (
-                                      <span className="text-[0.7rem] text-zinc-600">
-                                        —
-                                      </span>
-                                    )}
-                                  </div>
-                                </td>
-                              </tr>
-                            );
-                          })}
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </section>
-
-        {/* What's New */}
-        <section className="mt-8 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3 md:p-4">
-          <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-amber-300">
-            What&apos;s New in Early Access
-          </h2>
-          <ul className="mt-2 space-y-1 text-sm text-zinc-400">
-            <li>• Live parts and pricing pulled from multiple merchants.</li>
-            <li>
-              • Grouped layout for lower and upper receiver parts so you can see
-              at a glance which sections of your build are still missing.
-            </li>
-            <li>
-              • Running build total that updates automatically as you add or
-              swap components.
-            </li>
-            <li>
-              • Local build persistence so your selections stick around between
-              visits on this device.
-            </li>
-          </ul>
-        </section>
-
-        {/* Roadmap */}
-        <section className="mt-8 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3 md:p-4">
-          <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-amber-300">
-            What&apos;s on our roadmap
-          </h2>
-          <ul className="mt-2 space-y-1 text-sm text-zinc-400">
-            <li>• Platform filters (AR-15, AR-9, AR-10)</li>
-            <li>• More part categories and furniture</li>
-            <li>• Richer pricing/stock sync</li>
-            <li>• Smarter compatibility checks between components</li>
-            <li>• AR9/AR10 support and more</li>
-          </ul>
-        </section>
-      </div>
-    </main>
-  );
-}

app/builder/summary/page.tsx

@@ -1,422 +0,0 @@
-"use client";
-
-import { useMemo, useState, useEffect } from "react";
-import Link from "next/link";
-import { useSearchParams, useRouter } from "next/navigation";
-import { CATEGORIES } from "@/data/gunbuilderParts";
-import type { CategoryId, Part } from "@/types/gunbuilder";
-
-type BuildState = Partial<Record<CategoryId, string>>; // categoryId -> partId
-const STORAGE_KEY = "gunbuilder-build-state";
-
-const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
-
-type GunbuilderProductFromApi = {
-  id: string; // backend UUID string
-  name: string;
-  brand: string;
-  platform: string;
-  partRole: string;
-  price: number | null;
-  mainImageUrl: string | null;
-  buyUrl: string | null;
-};
-
-// Map backend partRole -> CategoryId (same as /gunbuilder page)
-const PART_ROLE_TO_CATEGORY: Record<string, CategoryId> = {
-  "upper-receiver": "upper",
-  barrel: "barrel",
-  handguard: "handguard",
-  "charging-handle": "chargingHandle",
-  "buffer-kit": "buffer",
-  "lower-parts-kit": "lowerParts",
-  sight: "sights",
-};
-
-// Encode build state to URL-friendly string
-function encodeBuildState(build: BuildState): string {
-  const entries = Object.entries(build)
-    .filter(([_, partId]) => partId)
-    .map(([categoryId, partId]) => `${categoryId}:${partId}`)
-    .join(",");
-  return btoa(entries);
-}
-
-// Decode URL string to build state
-function decodeBuildState(encoded: string): BuildState {
-  try {
-    const decoded = atob(encoded);
-    const build: BuildState = {};
-    decoded.split(",").forEach((entry) => {
-      const [categoryId, partId] = entry.split(":");
-      if (categoryId && partId) {
-        build[categoryId as CategoryId] = partId;
-      }
-    });
-    return build;
-  } catch {
-    return {};
-  }
-}
-
-export default function BuildDetailsPage() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-
-  const [build, setBuild] = useState<BuildState>({});
-  const [shareUrl, setShareUrl] = useState<string>("");
-  const [copied, setCopied] = useState(false);
-
-  const [parts, setParts] = useState<Part[]>([]);
-  const [loadingParts, setLoadingParts] = useState(true);
-  const [partsError, setPartsError] = useState<string | null>(null);
-
-  // Load build from URL params or localStorage
-  useEffect(() => {
-    const buildParam = searchParams.get("build");
-    if (buildParam) {
-      const decoded = decodeBuildState(buildParam);
-      setBuild(decoded);
-      // Also save to localStorage
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(decoded));
-    } else if (typeof window !== "undefined") {
-      // Load from localStorage
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored) {
-        try {
-          const parsed = JSON.parse(stored);
-          setBuild(parsed);
-        } catch {
-          // Invalid stored data
-        }
-      }
-    }
-  }, [searchParams]);
-
-  // Fetch live parts from backend (same source as /gunbuilder)
-  useEffect(() => {
-    const controller = new AbortController();
-
-    async function fetchProducts() {
-      try {
-        setLoadingParts(true);
-        setPartsError(null);
-
-        const res = await fetch(
-          `${API_BASE_URL}/api/products/gunbuilder?platform=AR-15`,
-          { signal: controller.signal },
-        );
-
-        if (!res.ok) {
-          throw new Error(`Failed to load products (${res.status})`);
-        }
-
-        const data: GunbuilderProductFromApi[] = await res.json();
-
-        const normalized: Part[] = data
-          .map((p): Part | null => {
-            const categoryId = PART_ROLE_TO_CATEGORY[p.partRole];
-            if (!categoryId) return null;
-
-            return {
-              id: p.id, // already a string UUID
-              categoryId,
-              name: p.name,
-              brand: p.brand,
-              price: p.price ?? 0,
-              imageUrl: p.mainImageUrl ?? undefined,
-              url: p.buyUrl ?? undefined,
-              notes: undefined,
-            };
-          })
-          .filter(Boolean) as Part[];
-
-        setParts(normalized);
-      } catch (err: any) {
-        if (err.name === "AbortError") return;
-        setPartsError(err.message ?? "Failed to load products");
-      } finally {
-        setLoadingParts(false);
-      }
-    }
-
-    fetchProducts();
-
-    return () => controller.abort();
-  }, []);
-
-  // Generate shareable URL
-  useEffect(() => {
-    if (typeof window !== "undefined" && Object.keys(build).length > 0) {
-      const encoded = encodeBuildState(build);
-      const url = `${window.location.origin}/gunbuilder/build?build=${encoded}`;
-      setShareUrl(url);
-    }
-  }, [build]);
-
-  const selectedParts: Part[] = useMemo(() => {
-    if (parts.length === 0) return [];
-    return Object.entries(build)
-      .map(([categoryId, partId]) =>
-        parts.find(
-          (p) =>
-            p.id === partId && p.categoryId === (categoryId as CategoryId),
-        ),
-      )
-      .filter(Boolean) as Part[];
-  }, [build, parts]);
-
-  const totalPrice = useMemo(
-    () => selectedParts.reduce((sum, p) => sum + p.price, 0),
-    [selectedParts],
-  );
-
-  const handleCopyLink = async () => {
-    if (shareUrl) {
-      try {
-        await navigator.clipboard.writeText(shareUrl);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      } catch (err) {
-        console.error("Failed to copy:", err);
-      }
-    }
-  };
-
-  const handleShare = async () => {
-    if (navigator.share && shareUrl) {
-      try {
-        await navigator.share({
-          title: "My AR-15 Build",
-          text: `Check out my AR-15 build: $${totalPrice.toFixed(2)}`,
-          url: shareUrl,
-        });
-      } catch {
-        handleCopyLink();
-      }
-    } else {
-      handleCopyLink();
-    }
-  };
-
-  if (!loadingParts && selectedParts.length === 0) {
-    return (
-      <main className="min-h-screen bg-black text-zinc-50">
-        <div className="mx-auto max-w-4xl px-4 py-6 lg:py-10">
-          <div className="text-center">
-            <h1 className="text-2xl font-semibold text-zinc-50 mb-4">
-              No Build Selected
-            </h1>
-            <p className="text-sm text-zinc-400 mb-6">
-              You need to select at least one part to view your build.
-            </p>
-            <Link
-              href="/gunbuilder"
-              className="inline-block rounded-md border border-amber-400/60 bg-amber-400/10 px-4 py-2 text-sm font-medium text-amber-200 hover:bg-amber-400/15 transition-colors"
-            >
-              Go to Gunbuilder
-            </Link>
-          </div>
-        </div>
-      </main>
-    );
-  }
-
-  return (
-    <main className="min-h-screen bg-black text-zinc-50">
-      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
-        {/* Header */}
-        <header className="mb-6">
-          <Link
-            href="/gunbuilder"
-            className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
-          >
-            ← Back to The Armory
-          </Link>
-          <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
-            <div>
-              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-                Shadow Standard
-              </p>
-              <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
-                Build <span className="text-amber-300">Summary</span>
-              </h1>
-              <p className="mt-2 text-sm text-zinc-400 max-w-xl">
-                Review your build, purchase parts from our affiliate partners, or
-                share your build with others.
-              </p>
-            </div>
-
-            <div className="mt-3 md:mt-0">
-              <div className="text-xs text-zinc-400">Total Build Price</div>
-              <div className="text-3xl font-semibold text-amber-300">
-                ${totalPrice.toFixed(2)}
-              </div>
-              <div className="text-xs text-zinc-500">
-                {selectedParts.length} / {CATEGORIES.length} parts selected
-              </div>
-            </div>
-          </div>
-        </header>
-
-        {/* Share Section */}
-        <section className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/60 p-4">
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <div className="flex-1">
-              <h2 className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-2">
-                Share Your Build
-              </h2>
-              <p className="text-sm text-zinc-400">
-                Share this link to let others view your build or bookmark it to
-                come back later.
-              </p>
-            </div>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={handleShare}
-                className="rounded-md border border-zinc-700 bg-zinc-900/50 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
-              >
-                Share
-              </button>
-              <button
-                type="button"
-                onClick={handleCopyLink}
-                className={`rounded-md border px-4 py-2 text-sm font-medium transition-colors ${
-                  copied
-                    ? "border-green-500 bg-green-500/10 text-green-400"
-                    : "border-zinc-700 bg-zinc-900/50 text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600"
-                }`}
-              >
-                {copied ? "Copied!" : "Copy Link"}
-              </button>
-            </div>
-          </div>
-          {shareUrl && (
-            <div className="mt-3 p-3 rounded-md bg-zinc-900/50 border border-zinc-800">
-              <p className="text-xs text-zinc-500 mb-1">Shareable URL:</p>
-              <p className="text-xs text-zinc-400 break-all font-mono">
-                {shareUrl}
-              </p>
-            </div>
-          )}
-        </section>
-
-        {/* Build Parts */}
-        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
-          <h2 className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-4">
-            Selected Parts
-          </h2>
-
-          {loadingParts && (
-            <p className="text-sm text-zinc-500 mb-4">Loading parts…</p>
-          )}
-          {partsError && (
-            <p className="text-sm text-red-400 mb-4">
-              {partsError} — check the Ballistic API.
-            </p>
-          )}
-
-          <div className="space-y-4">
-            {CATEGORIES.map((category) => {
-              const selectedPartId = build[category.id];
-              const part = parts.find(
-                (p) =>
-                  p.id === selectedPartId &&
-                  p.categoryId === (category.id as CategoryId),
-              );
-
-              return (
-                <div
-                  key={category.id}
-                  className="border border-zinc-800 rounded-md p-4 bg-zinc-900/30"
-                >
-                  <div className="flex items-start justify-between gap-4">
-                    <div className="flex-1">
-                      <div className="text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 mb-2">
-                        {category.name}
-                      </div>
-                      {part ? (
-                        <>
-                          <div className="text-lg font-semibold text-zinc-50 mb-1">
-                            <span className="text-zinc-400">{part.brand}</span>{" "}
-                            {part.name}
-                          </div>
-                          <div className="mt-3 flex gap-2 flex-wrap">
-                            {part.url && (
-                              <a
-                                href={part.url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline-flex items-center gap-2 rounded-md border border-amber-400/60 bg-amber-400/10 px-4 py-2 text-sm font-medium text-amber-200 hover:bg-amber-400/15 transition-colors"
-                              >
-                                Purchase from Retailer
-                                <svg
-                                  className="w-4 h-4"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                                  />
-                                </svg>
-                              </a>
-                            )}
-                            <Link
-                              href={`/gunbuilder/${category.id}/${part.id}`}
-                              className="inline-flex items-center rounded-md border border-zinc-700 bg-zinc-900/50 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
-                            >
-                              View Details
-                            </Link>
-                          </div>
-                        </>
-                      ) : (
-                        <div className="text-sm text-zinc-600">
-                          Not selected
-                        </div>
-                      )}
-                    </div>
-                    {part && (
-                      <div className="text-right">
-                        <div className="text-2xl font-semibold text-amber-300">
-                          ${part.price.toFixed(2)}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </section>
-
-        {/* Actions */}
-        <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-between">
-          <Link
-            href="/gunbuilder"
-            className="rounded-md border border-zinc-700 bg-zinc-900/50 px-6 py-3 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors text-center"
-          >
-            Edit Build
-          </Link>
-          <div className="flex gap-3">
-            <button
-              type="button"
-              onClick={() => {
-                localStorage.removeItem(STORAGE_KEY);
-                router.push("/gunbuilder");
-              }}
-              className="rounded-md border border-zinc-700 bg-zinc-900/50 px-6 py-3 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
-            >
-              Clear Build
-            </button>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-}

app/builds/layout.tsx

@@ -0,0 +1,18 @@
+// app/(builder)/layout.tsx
+import type { ReactNode } from "react";
+
+import { AuthProvider } from "@/context/AuthContext";
+import { BuilderNav } from "@/components/BuilderNav";
+import { TopNav } from "@/components/TopNav";
+
+export default function BuilderLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-neutral-950 text-zinc-50">
+      <AuthProvider>
+        <TopNav />
+        <BuilderNav />
+        <main className="min-h-screen">{children}</main>
+      </AuthProvider>
+    </div>
+  );
+}

app/builds/page.tsx

@@ -1,103 +1,182 @@
 "use client";
 
-import { useMemo, useState } from "react";
+/**
+ * app/builds/page.tsx
+ * Community Builds feed (public)
+ *
+ * Dev Notes:
+ * - We are moving to Option B:
+ *   Build (core) + BuildProfile (meta) + Votes/Comments/Media as separate tables.
+ * - This page expects a lightweight "feed card" DTO from the backend, NOT full build items.
+ * - Keep UI/filters here client-side for MVP; move to server-side query params later if needed.
+ *
+ * Backend (target contract):
+ *   GET /api/v1/builds?limit=50  -> BuildFeedCardDto[]
+ *   (Optional later) POST /api/v1/builds/{uuid}/vote { delta: 1 | -1 }
+ */
+
+import { useEffect, useMemo, useState, useCallback } from "react";
 import Link from "next/link";
 
 type BuildClass = "Rifle" | "Pistol" | "NFA";
-type Caliber = "5.56" | "7.62" | "9mm" | ".300 BLK" | "12ga";
 
+/**
+ * Keep this loose. Backend will control the allowed calibers via BuildProfile.
+ * We can tighten once the controlled vocab is finalized.
+ */
+type Caliber = string;
+
+/**
+ * This matches what the UI needs (card format).
+ * It maps cleanly to: builds + build_profiles + aggregated votes (+ optional price).
+ */
 type BuildCard = {
-  id: string;
+  id: string; // we use uuid here (public identifier)
   title: string;
-  slug: string;
+  slug: string; // can be uuid for now; keep property so UI does not change
-  creator: string;
+  creator: string; // placeholder until user profiles are real
   caliber: Caliber;
   buildClass: BuildClass;
-  price: number;
+  price: number; // optional server-side later; for now allow 0 fallback
   votes: number;
   tags: string[];
+  coverImageUrl?: string | null;
 };
 
-const DUMMY_BUILDS: BuildCard[] = [
+type BuildFeedCardDto = {
-  {
+  uuid: string;
-    id: "1",
+  title?: string | null;
-    title: "Duty-Grade 12.5\" AR-15",
+  slug?: string | null; // optional (we can generate from title later)
-    slug: "duty-12-5-ar15",
+  creator?: string | null; // optional
-    creator: "quietpro_01",
+  caliber?: string | null;
-    caliber: "5.56",
+  buildClass?: BuildClass | null;
-    buildClass: "Rifle",
+  price?: number | null;
-    price: 2450,
+  votes?: number | null;
-    votes: 128,
+  tags?: string[] | null;
-    tags: ["Duty", "NV-Ready", "LPVO"],
+  coverImageUrl?: string | null;
-  },
+};
-  {
-    id: "2",
-    title: "Home Defense PCC",
-    slug: "home-defense-pcc",
-    creator: "nerdgunner",
-    caliber: "9mm",
-    buildClass: "Pistol",
-    price: 1650,
-    votes: 74,
-    tags: ["Home Defense", "Red Dot", "Suppressor-Ready"],
-  },
-  {
-    id: "3",
-    title: "Short King .300 BLK SBR",
-    slug: "short-king-300blk-sbr",
-    creator: "subsonic_six",
-    caliber: ".300 BLK",
-    buildClass: "NFA",
-    price: 3125,
-    votes: 201,
-    tags: ["SBR", "Suppressed", "Night Work"],
-  },
-  {
-    id: "4",
-    title: "Budget 16\" Training Rifle",
-    slug: "budget-16-training-rifle",
-    creator: "range_rat",
-    caliber: "5.56",
-    buildClass: "Rifle",
-    price: 975,
-    votes: 53,
-    tags: ["Budget", "Trainer", "Recce-ish"],
-  },
-];
 
-const CALIBER_FILTERS: (Caliber | "all")[] = [
+const API_BASE_URL =
-  "all",
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
-  "5.56",
-  "7.62",
-  "9mm",
-  ".300 BLK",
-  "12ga",
-];
 
+// --- UI Filter Sets (keep; we’ll generate options from data too) ---
 const CLASS_FILTERS: (BuildClass | "all")[] = ["all", "Rifle", "Pistol", "NFA"];
 
 const PRICE_FILTERS = [
   { id: "all", label: "All", min: 0, max: Infinity },
-  { id: "sub1k", label: "< $1k", min: 0, max: 1000 },
+  { id: "sub1k", label: "< $1k", min: 0, max: 1000_00 },
-  { id: "1to2k", label: "$1k–$2k", min: 1000, max: 2000 },
+  { id: "1to2k", label: "$1k–$2k", min: 1000_00, max: 2000_00 },
-  { id: "2to3k", label: "$2k–$3k", min: 2000, max: 3000 },
+  { id: "2to3k", label: "$2k–$3k", min: 2000_00, max: 3000_00 },
-  { id: "3kplus", label: "$3k+", min: 3000, max: Infinity },
+  { id: "3kplus", label: "$3k+", min: 3000_00, max: Infinity },
 ];
 
+function safeArray(v: unknown): string[] {
+  return Array.isArray(v) ? v.filter(Boolean).map(String) : [];
+}
+
+function fallbackSlug(dto: BuildFeedCardDto) {
+  // MVP: stable route id is uuid. Keep a "slug" field for UI continuity.
+  return dto.slug?.trim() || dto.uuid;
+}
+
+function normalizeCard(dto: BuildFeedCardDto): BuildCard {
+  const title = (dto.title ?? "Untitled Build").trim() || "Untitled Build";
+
+  return {
+    id: dto.uuid,
+    title,
+    slug: fallbackSlug(dto),
+
+    // Until we wire real users: keep a placeholder creator string.
+    creator: (dto.creator ?? "anonymous").trim() || "anonymous",
+
+    caliber: (dto.caliber ?? "—").trim() || "—",
+
+    // Default to Rifle for display if missing; backend should set this via profile.
+    buildClass: (dto.buildClass ?? "Rifle") as BuildClass,
+
+    // Price is optional (we can compute later from BuildItems + offers).
+    price: typeof dto.price === "number" ? dto.price : 0,
+
+    votes: typeof dto.votes === "number" ? dto.votes : 0,
+
+    tags: safeArray(dto.tags),
+
+    coverImageUrl: dto.coverImageUrl ?? null,
+  };
+}
+
 export default function BuildsPage() {
+  // --- Remote data state ---
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [builds, setBuilds] = useState<BuildCard[]>([]);
+
+  // --- UI state (filters/votes) ---
   const [caliberFilter, setCaliberFilter] = useState<Caliber | "all">("all");
   const [classFilter, setClassFilter] = useState<BuildClass | "all">("all");
   const [priceFilterId, setPriceFilterId] = useState<string>("all");
-  const [votes, setVotes] = useState<Record<string, number>>(
-    Object.fromEntries(DUMMY_BUILDS.map((b) => [b.id, b.votes])),
-  );
 
-  const activePriceFilter = PRICE_FILTERS.find(
+  // Local vote state for optimistic UI
-    (p) => p.id === priceFilterId,
+  const [votes, setVotes] = useState<Record<string, number>>({});
-  ) ?? PRICE_FILTERS[0];
+
+  const activePriceFilter =
+    PRICE_FILTERS.find((p) => p.id === priceFilterId) ?? PRICE_FILTERS[0];
+
+  // --- Fetch public builds feed ---
+  useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const res = await fetch(`${API_BASE_URL}/api/v1/builds?limit=50`, {
+          method: "GET",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+        });
+
+        if (!res.ok) {
+          const txt = await res.text().catch(() => "");
+          throw new Error(txt || `Failed to load builds (${res.status})`);
+        }
+
+        const data = (await res.json()) as BuildFeedCardDto[];
+        const cards = (Array.isArray(data) ? data : []).map(normalizeCard);
+
+        if (cancelled) return;
+
+        setBuilds(cards);
+
+        // Initialize vote UI from payload totals
+        setVotes(Object.fromEntries(cards.map((b) => [b.id, b.votes])));
+      } catch (e: any) {
+        if (!cancelled) setError(e?.message || "Failed to load builds feed");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Build the caliber filters dynamically from data, but keep "all" first.
+  const CALIBER_FILTERS = useMemo<(Caliber | "all")[]>(() => {
+    const uniq = new Set<string>();
+    for (const b of builds) {
+      const c = (b.caliber ?? "").trim();
+      if (c && c !== "—") uniq.add(c);
+    }
+    return ["all", ...Array.from(uniq).sort()];
+  }, [builds]);
 
   const filteredBuilds = useMemo(() => {
-    return DUMMY_BUILDS.filter((build) => {
+    return builds.filter((build) => {
       const matchesCaliber =
         caliberFilter === "all" || build.caliber === caliberFilter;
 
@@ -110,14 +189,16 @@ export default function BuildsPage() {
 
       return matchesCaliber && matchesClass && matchesPrice;
     });
-  }, [caliberFilter, classFilter, activePriceFilter]);
+  }, [builds, caliberFilter, classFilter, activePriceFilter]);
 
-  const handleVote = (id: string, delta: 1 | -1) => {
+  const handleVote = useCallback((id: string, delta: 1 | -1) => {
+    // MVP: optimistic local vote only.
+    // Later: POST /api/v1/builds/{uuid}/vote { delta } and reconcile.
     setVotes((prev) => ({
       ...prev,
       [id]: (prev[id] ?? 0) + delta,
     }));
-  };
+  }, []);
 
   return (
     <main className="min-h-screen bg-black text-zinc-50">
@@ -129,18 +210,19 @@ export default function BuildsPage() {
               Battl Builder · Build Book
             </p>
             <h1
-              className="mt-2 text-3xl md:text-4xl font-extrabold tracking-tight 
+              className="mt-2 text-3xl md:text-4xl font-extrabold tracking-tight
-                         bg-gradient-to-r from-amber-400 via-amber-200 to-amber-400 
+                         bg-gradient-to-r from-amber-400 via-amber-200 to-amber-400
                          text-transparent bg-clip-text drop-shadow-[0_2px_6px_rgba(255,193,7,0.25)]"
             >
               Community Builds
             </h1>
             <p className="mt-2 text-sm md:text-base text-zinc-400 max-w-xl">
-              Browse community rifle builds, vote them up or down, and steal
+              Browse community builds, vote them up or down, and steal good
-              good ideas without shame. This is placeholder content for now —
+              ideas without shame. This feed is backed by public builds
-              real accounts, comments, and saved builds will wire in later.
+              (isPublic=true).
             </p>
           </div>
+
           <div className="flex gap-2 md:gap-3">
             <Link
               href="/builder"
@@ -148,15 +230,35 @@ export default function BuildsPage() {
             >
               Open Builder
             </Link>
-            <button
+
-              type="button"
+            {/* Later: route to /vault + choose build to submit, or direct /builder submit flow */}
+            <Link
+              href="/vault"
               className="inline-flex items-center justify-center rounded-md border border-amber-400/70 bg-amber-400/10 px-4 py-2 text-xs md:text-sm font-medium text-amber-200 hover:bg-amber-400/15 transition-colors"
             >
-              + Submit Build (Coming Soon)
+              + Submit Build
-            </button>
+            </Link>
           </div>
         </header>
 
+        {/* Loading / Error */}
+        {loading && (
+          <div className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/70 p-4 text-sm text-zinc-400">
+            Loading community builds…
+          </div>
+        )}
+
+        {error && !loading && (
+          <div className="mb-6 rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-200">
+            {error}
+            <div className="mt-2 text-xs text-red-200/80">
+              Dev tip: confirm backend route{" "}
+              <span className="font-mono">GET /api/v1/builds</span> is
+              implemented + CORS is configured.
+            </div>
+          </div>
+        )}
+
         {/* Filters */}
         <section className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/70 p-4 space-y-4">
           <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
@@ -165,21 +267,19 @@ export default function BuildsPage() {
                 Filter Builds
               </h2>
               <p className="text-xs text-zinc-500 mt-1">
-                Filter by caliber, platform class, and ballpark price range.
+                Filter by caliber, class, and price range. (Client-side for
-                All logic is client-side placeholder until the real feed is wired
+                MVP.)
-                into the backend.
               </p>
             </div>
+
             <div className="text-xs text-zinc-500">
               Showing{" "}
               <span className="text-zinc-200 font-medium">
                 {filteredBuilds.length}
               </span>{" "}
               of{" "}
-              <span className="text-zinc-200 font-medium">
+              <span className="text-zinc-200 font-medium">{builds.length}</span>{" "}
-                {DUMMY_BUILDS.length}
+              builds
-              </span>{" "}
-              demo builds
             </div>
           </div>
 
@@ -219,9 +319,7 @@ export default function BuildsPage() {
                   <button
                     key={cls}
                     type="button"
-                    onClick={() =>
+                    onClick={() => setClassFilter(cls === "all" ? "all" : cls)}
-                      setClassFilter(cls === "all" ? "all" : cls)
-                    }
                     className={`rounded-full border px-3 py-1 text-xs transition-colors ${
                       classFilter === cls
                         ? "border-amber-400/70 bg-amber-400/10 text-amber-200"
@@ -262,100 +360,117 @@ export default function BuildsPage() {
         {/* Build list */}
         <section>
           <div className="space-y-4">
-            {filteredBuilds.map((build) => (
+            {filteredBuilds.map((build) => {
-              <article
+              const dollars = Math.floor((build.price ?? 0) / 100);
-                key={build.id}
-                className="flex gap-4 rounded-lg border border-zinc-800 bg-zinc-950/70 p-4"
-              >
-                {/* Votes column */}
-                <div className="flex flex-col items-center justify-center gap-1">
-                  <button
-                    type="button"
-                    onClick={() => handleVote(build.id, 1)}
-                    className="flex h-6 w-6 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/70 text-xs text-zinc-300 hover:bg-zinc-800 hover:border-zinc-500"
-                  >
-                    ▲
-                  </button>
-                  <div className="text-xs font-semibold text-amber-200">
-                    {votes[build.id] ?? build.votes}
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => handleVote(build.id, -1)}
-                    className="flex h-6 w-6 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/70 text-xs text-zinc-300 hover:bg-zinc-800 hover:border-zinc-500"
-                  >
-                    ▼
-                  </button>
-                </div>
 
-                {/* Placeholder thumbnail */}
+              return (
-                <div className="hidden sm:block">
+                <article
-                  <div className="overflow-hidden rounded-md border border-zinc-800 bg-zinc-900/80 h-24 w-40">
+                  key={build.id}
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                  className="flex gap-4 rounded-lg border border-zinc-800 bg-zinc-950/70 p-4"
-                    <img
+                >
-                      src="https://placehold.co/320x200/png?text=Build+Photo"
+                  {/* Votes column */}
-                      alt={`${build.title} placeholder`}
+                  <div className="flex flex-col items-center justify-center gap-1">
-                      className="h-full w-full object-cover"
+                    <button
-                    />
+                      type="button"
+                      onClick={() => handleVote(build.id, 1)}
+                      className="flex h-6 w-6 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/70 text-xs text-zinc-300 hover:bg-zinc-800 hover:border-zinc-500"
+                      aria-label="Upvote"
+                      title="Upvote"
+                    >
+                      ▲
+                    </button>
+                    <div className="text-xs font-semibold text-amber-200">
+                      {votes[build.id] ?? build.votes}
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => handleVote(build.id, -1)}
+                      className="flex h-6 w-6 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/70 text-xs text-zinc-300 hover:bg-zinc-800 hover:border-zinc-500"
+                      aria-label="Downvote"
+                      title="Downvote"
+                    >
+                      ▼
+                    </button>
                   </div>
-                </div>
 
-                {/* Main content */}
+                  {/* Thumbnail */}
-                <div className="flex-1">
+                  <div className="hidden sm:block">
-                  <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
+                    <div className="overflow-hidden rounded-md border border-zinc-800 bg-zinc-900/80 h-24 w-40">
-                    <div>
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
-                      <div className="text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 mb-1">
+                      <img
-                        {build.buildClass} · {build.caliber}
+                        src={
+                          build.coverImageUrl ||
+                          "https://placehold.co/320x200/png?text=Build+Photo"
+                        }
+                        alt={`${build.title} cover`}
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Main content */}
+                  <div className="flex-1">
+                    <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
+                      <div>
+                        <div className="text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 mb-1">
+                          {build.buildClass} · {build.caliber}
+                        </div>
+                        <h3 className="text-lg md:text-xl font-semibold text-zinc-50">
+                          <Link
+                            href={`/builds/${build.slug}`}
+                            className="hover:text-amber-200 transition-colors"
+                          >
+                            {build.title}
+                          </Link>
+                        </h3>
+                        <p className="text-xs text-zinc-500 mt-1">
+                          Posted by{" "}
+                          <span className="text-zinc-300">
+                            b/{build.creator}
+                          </span>{" "}
+                          · Build detail page will show the parts list +
+                          comments.
+                        </p>
                       </div>
-                      <h3 className="text-lg md:text-xl font-semibold text-zinc-50">
+
-                        <Link
+                      <div className="text-right mt-1 md:mt-0">
-                          href={`/builds/${build.slug}`}
+                        <div className="text-xs uppercase tracking-[0.16em] text-zinc-500">
-                          className="hover:text-amber-200 transition-colors"
+                          Est. Build Cost
+                        </div>
+                        <div className="text-lg font-semibold text-amber-300">
+                          {build.price > 0 ? (
+                            <span>
+                              ${Math.floor(build.price / 100).toLocaleString()}
+                            </span>
+                          ) : (
+                            "—"
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-3 flex flex-wrap items-center gap-2">
+                      {build.tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="rounded-full border border-zinc-700 bg-zinc-900/60 px-2 py-0.5 text-[0.7rem] text-zinc-400"
                         >
-                          {build.title}
+                          {tag}
-                        </Link>
+                        </span>
-                      </h3>
+                      ))}
-                      <p className="text-xs text-zinc-500 mt-1">
-                        Posted by{" "}
-                        <span className="text-zinc-300">
-                          b/{build.creator}
-                        </span>{" "}
-                        · Placeholder build listing — details, parts list, and
-                        comments will live on the build detail page later.
-                      </p>
-                    </div>
-                    <div className="text-right mt-1 md:mt-0">
-                      <div className="text-xs uppercase tracking-[0.16em] text-zinc-500">
-                        Est. Build Cost
-                      </div>
-                      <div className="text-lg font-semibold text-amber-300">
-                        ${build.price.toLocaleString()}
-                      </div>
-                    </div>
-                  </div>
 
-                  <div className="mt-3 flex flex-wrap items-center gap-2">
+                      <span className="ml-auto text-[0.7rem] text-zinc-500">
-                    {build.tags.map((tag) => (
+                        Comments + save coming soon.
-                      <span
-                        key={tag}
-                        className="rounded-full border border-zinc-700 bg-zinc-900/60 px-2 py-0.5 text-[0.7rem] text-zinc-400"
-                      >
-                        {tag}
                       </span>
-                    ))}
+                    </div>
-                    <span className="ml-auto text-[0.7rem] text-zinc-500">
-                      Comments, save, and share coming soon.
-                    </span>
                   </div>
-                </div>
+                </article>
-              </article>
+              );
-            ))}
+            })}
 
-            {filteredBuilds.length === 0 && (
+            {!loading && !error && filteredBuilds.length === 0 && (
               <div className="rounded-lg border border-zinc-800 bg-zinc-950/70 p-6 text-center text-sm text-zinc-500">
-                No builds match those filters yet. Once the real feed is wired
+                No builds match those filters yet.
-                up, this will update live as the community posts rifles, pistols,
-                and NFA builds.
               </div>
             )}
           </div>
@@ -363,4 +478,4 @@ export default function BuildsPage() {
       </div>
     </main>
   );
-}
+}

app/layout.tsx

@@ -1,28 +1,42 @@
-
+// app/layout.tsx
 import "./globals.css";
 import type { ReactNode } from "react";
 import { AuthProvider } from "@/context/AuthContext";
-import { TopNav } from "@/components/TopNav";
+import { Banner } from "@/components/Banner";
-import { BuilderNav } from "@/components/BuilderNav";
 
 export const metadata = {
   title: {
-    default: "Battl Builder",
+    default: "Battl Builders",
-    template: "%s | Battl Builder",
+    template: "%s — Battl Builders",
   },
-  description: "Battl Builder — the smarter, faster, data‑driven way to build your next firearm.",
+  description: "Build rifles smarter, not harder.",
 };
 
+const themeScript = `
+(function () {
+  try {
+    const storedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const theme = storedTheme || (prefersDark ? "dark" : "light");
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  } catch (_) {}
+})();
+`;
+
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning className="dark">
-      <body className="bg-black text-zinc-100">
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+
+      <body className="bg-dark text-zinc-950 dark:bg-black dark:text-zinc-50">
+        {" "}
         <AuthProvider>
-          <TopNav />
+          <Banner />
-          <BuilderNav />
+          {children}
-          <main className="min-h-screen">{children}</main>
         </AuthProvider>
       </body>
     </html>
   );
-}
+}

app/login/page.tsx

@@ -5,6 +5,7 @@ import { FormEvent, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
+import { Button, Field, Input } from "@/components/ui/form";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -15,7 +16,7 @@ export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
 
-  const next = searchParams.get("next") || "/gunbuilder";
+  const next = searchParams.get("next") || "/builder";
 
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
@@ -30,75 +31,57 @@ export default function LoginPage() {
   }
 
   return (
-    <main className="min-h-screen bg-black text-zinc-50">
+      <main className="min-h-screen bg-black text-zinc-50">
-      <div className="mx-auto flex max-w-md flex-col px-4 py-10">
+        <div className="mx-auto flex max-w-md flex-col px-4 py-10">
-        <h1 className="text-2xl font-semibold tracking-tight">
+          <h1 className="text-2xl font-semibold tracking-tight">
-          Log In to <span className="text-amber-300">The Armory</span>
+            Log In to <span className="text-amber-300">The Armory</span>
-        </h1>
+          </h1>
-        <p className="mt-2 text-sm text-zinc-400">
+          <p className="mt-2 text-sm text-zinc-400">
-          Use your beta credentials to get back to your saved builds.
+            Use your beta credentials to get back to your saved builds.
-        </p>
+          </p>
 
-        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+          <form onSubmit={handleSubmit} className="mt-6 space-y-4">
-          {error && (
+            {error && (
-            <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+                <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
-              {error}
+                  {error}
-            </div>
+                </div>
-          )}
+            )}
 
-          <div className="space-y-1">
+            <Field label="Email" htmlFor="email">
-            <label className="text-xs font-medium text-zinc-400" htmlFor="email">
+              <Input
-              Email
+                  id="email"
-            </label>
+                  type="email"
-            <input
+                  autoComplete="email"
-              id="email"
+                  required
-              type="email"
+                  value={email}
-              autoComplete="email"
+                  onChange={(e) => setEmail(e.target.value)}
-              required
+              />
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
+            </Field>
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
 
-          <div className="space-y-1">
+            <Field label="Password" htmlFor="password">
-            <label
+              <Input
-              className="text-xs font-medium text-zinc-400"
+                  id="password"
-              htmlFor="password"
+                  type="password"
-            >
+                  autoComplete="current-password"
-              Password
+                  required
-            </label>
+                  value={password}
-            <input
+                  onChange={(e) => setPassword(e.target.value)}
-              id="password"
+              />
-              type="password"
+            </Field>
-              autoComplete="current-password"
-              required
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
 
-          <button
+            <Button type="submit" disabled={loading}>
-            type="submit"
+              {loading ? "Signing in…" : "Log In"}
-            disabled={loading}
+            </Button>
-            className="mt-2 w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 hover:bg-amber-400/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          </form>
-          >
-            {loading ? "Signing in…" : "Log In"}
-          </button>
-        </form>
 
-        <p className="mt-4 text-xs text-zinc-500">
+          <p className="mt-4 text-xs text-zinc-500">
-          New here?{" "}
+            New here?{" "}
-          <Link
+            <Link href="/register" className="text-amber-300 hover:text-amber-200">
-            href="/register"
+              Join the beta
-            className="text-amber-300 hover:text-amber-200"
+            </Link>
-          >
+            .
-            Join the beta
+          </p>
-          </Link>
+        </div>
-          .
+      </main>
-        </p>
-      </div>
-    </main>
   );
 }

app/not-found.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <main className="min-h-screen bg-black text-zinc-50 flex items-center justify-center px-4">
+      <div className="max-w-md text-center">
+        <p className="text-xs font-semibold tracking-[0.3em] uppercase text-zinc-500">
+          Battl Builders
+        </p>
+
+        <h1 className="mt-4 text-4xl font-semibold tracking-tight">
+          Page Not Found
+        </h1>
+
+        <p className="mt-3 text-sm text-zinc-400">
+          This area of the site isn’t publicly accessible yet.
+        </p>
+
+        <div className="mt-6 flex justify-center gap-3">
+          <Link
+            href="/"
+            className="rounded-md bg-amber-400 px-4 py-2 text-sm font-semibold text-black hover:bg-amber-300 transition-colors"
+          >
+            Go Home
+          </Link>
+
+          {/* <a
+            href="https://battl.builders"
+            className="rounded-md border border-zinc-700 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-900 hover:border-zinc-600 transition-colors"
+          >
+            Learn More
+          </a> */}
+        </div>
+
+        <p className="mt-6 text-[11px] text-zinc-600">
+          Early access features are launching soon.
+        </p>
+      </div>
+    </main>
+  );
+}

app/page.tsx

@@ -1,33 +1,227 @@
-import Link from "next/link";
+"use client";
+
+import { FormEvent, useState } from "react";
+import Image from "next/image";
 
 export default function HomePage() {
+  const [email, setEmail] = useState("");
+  const [useCase, setUseCase] = useState("");
+  const [status, setStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+  const [message, setMessage] = useState<string | null>(null);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!email) {
+      setMessage("Drop an email in first, operator.");
+      setStatus("error");
+      return;
+    }
+
+    try {
+      setStatus("loading");
+      setMessage(null);
+
+      const res = await fetch("/api/beta-signup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, useCase }),
+      });
+
+      if (!res.ok) {
+        throw new Error("Failed to save your signup.");
+      }
+
+      setStatus("success");
+      setMessage("You’re locked in. Watch your inbox.");
+      setEmail("");
+      setUseCase("");
+    } catch (err) {
+      console.error(err);
+      setStatus("error");
+      setMessage("Something broke. Try again in a minute.");
+    }
+  }
+
   return (
-    <main className="min-h-screen bg-black text-zinc-50 flex items-center justify-center px-4">
+    <main className="min-h-screen bg-black text-zinc-50">
-      <div className="max-w-xl text-center">
+      {/* Abstract Brand Background */}
-        <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-[0.55]">
-          For Those Who Build With Intent.
+        <svg
-        </p>
+          width="100%"
-        <h1
+          height="100%"
-          className="mt-2 text-4xl md:text-5xl font-extrabold tracking-tight 
+          preserveAspectRatio="xMidYMid slice"
-                     bg-gradient-to-r from-amber-400 via-amber-200 to-amber-400 
+          xmlns="http://www.w3.org/2000/svg"
-                     text-transparent uppercase bg-clip-text drop-shadow-[0_2px_6px_rgba(255,193,7,0.25)]"
         >
-          Battl Builder
+          <defs>
-        </h1>
+            <pattern
-        <p className="mt-3 text-sm md:text-base text-zinc-400">
+              id="battlGrid"
-          Battl Builder is your command center for rifle builds. We surface live
+              x="0"
-          parts and hard-use brands, giving you a mission-ready workbench to
+              y="0"
-          design smarter, track cost, swap components, and save setups. No
+              width="80"
-          fluff. Just clean, trustworthy data.
+              height="80"
-        </p>
+              patternUnits="userSpaceOnUse"
-        <div className="mt-6">
+            >
-          <Link
+              <path
-            href="/builder"
+                d="M 80 0 L 0 0 0 80"
-            className="inline-flex items-center justify-center rounded-md border border-amber-400/70 bg-amber-400/10 px-4 py-2 text-sm font-medium text-amber-200 hover:bg-amber-400/15"
+                fill="none"
-          >
+                stroke="#fbbf24"
-            Launch The Builder
+                strokeWidth="0.5"
-          </Link>
+                strokeOpacity="0.35"
-        </div>
+              />
+            </pattern>
+
+            <pattern
+              id="battlHex"
+              width="140"
+              height="140"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                d="M70 4 L136 40 L136 110 L70 146 L4 110 L4 40 Z"
+                fill="none"
+                stroke="#fbbf24"
+                strokeWidth="0.4"
+                strokeOpacity="0.25"
+              />
+            </pattern>
+          </defs>
+
+          <rect width="100%" height="100%" fill="url(#battlGrid)" />
+          <rect width="100%" height="100%" fill="url(#battlHex)" />
+        </svg>
+      </div>
+      <div className="mx-auto flex min-h-screen max-w-5xl flex-col px-4 py-10">
+        {/* Top Bar / Logo */}
+        <header className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center">
+              <Image
+                src="/battl/battl-logo-mark-f.svg"
+                alt="Battl Builders Logo"
+                width={260} // adjust to taste
+                height={48} // adjust to taste
+                className="block"
+              />
+            </div>
+          </div>
+
+          <span className="rounded-full border border-amber-500/40 bg-amber-500/10 px-3 py-1 text-xs font-medium text-amber-300">
+            Private Beta • Coming Soon
+          </span>
+        </header>
+
+        {/* Hero */}
+        <section className="mt-16 grid gap-10 md:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] md:items-center">
+          <div>
+            <h1 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">
+              Stop Guessing.
+              <span className="block text-amber-300 py-0.16em">
+                Start Building.
+              </span>
+            </h1>
+            <p className="mt-4 max-w-xl text-sm text-zinc-400 sm:text-base">
+              From part comparisons to full-build matchups, Battl Builders helps
+              you find the right components, catch compatibility issues, and
+              score the best deals — all without juggling tabs or spreadsheets.
+            </p>
+
+            <ul className="mt-6 space-y-2 text-sm text-zinc-300">
+              <li>• Side-by-side part & build comparisons</li>
+              <li>• Smart compatibility checks</li>
+              <li>• Live pricing from vetted merchants</li>
+              <li>• Save & share builds with your crew</li>
+              <li>• Vote on the cleanest, meanest setups</li>
+            </ul>
+          </div>
+
+          {/* Beta Form */}
+          <div className="rounded-lg border border-zinc-800 bg-zinc-950/70 p-5 shadow-[0_0_0_1px_rgba(24,24,27,0.9)]">
+            <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-zinc-500">
+              Join the Beta List
+            </h2>
+            <p className="mt-2 text-xs text-zinc-400">
+              Drop your email and we&apos;ll send early access when the Builder
+              goes hot. No spam, just builds.
+            </p>
+
+            <form onSubmit={handleSubmit} className="mt-4 space-y-3">
+              <div>
+                <label
+                  htmlFor="email"
+                  className="text-xs font-medium text-zinc-300"
+                >
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@gearjunkie.com"
+                  className="mt-1 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm text-zinc-50 outline-none ring-amber-500/30 placeholder:text-zinc-600 focus:border-amber-400/80 focus:ring-2"
+                  required
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="useCase"
+                  className="text-xs font-medium text-zinc-300"
+                >
+                  What will you use Battl Builders for?
+                  <span className="text-zinc-500"> (optional)</span>
+                </label>
+                <textarea
+                  id="useCase"
+                  value={useCase}
+                  onChange={(e) => setUseCase(e.target.value)}
+                  rows={3}
+                  placeholder="E.g. Comparing build costs, finding the best deals, sharing my builds, weird influencer shit..."
+                  className="mt-1 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-xs text-zinc-50 outline-none ring-amber-500/30 placeholder:text-zinc-600 focus:border-amber-400/80 focus:ring-2"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={status === "loading"}
+                className="flex w-full items-center justify-center rounded-md border border-amber-500/70 bg-amber-500/90 px-3 py-2 text-sm font-medium text-black transition hover:bg-amber-400 disabled:cursor-not-allowed disabled:opacity-70"
+              >
+                {status === "loading" ? "Enlisting…" : "Get Beta Access"}
+              </button>
+
+              {message && (
+                <p
+                  className={`text-xs ${
+                    status === "success"
+                      ? "text-emerald-400"
+                      : status === "error"
+                      ? "text-red-400"
+                      : "text-zinc-400"
+                  }`}
+                >
+                  {message}
+                </p>
+              )}
+
+              <p className="pt-1 text-[10px] leading-relaxed text-zinc-500">
+                You can one-click unsubscribe any time with one-click. No data
+                games, no surprise newsletters.
+              </p>
+            </form>
+          </div>
+        </section>
+
+        {/* Footer strip */}
+        <footer className="mt-12 border-t border-zinc-900 pt-4 text-xs text-zinc-500">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <span>© {new Date().getFullYear()} BATTL BUILDERS<span className="align-super text-[0.9em] ml-0.5">™</span></span>
+            <span className="text-zinc-600">
+              v0.1 • Import engine online • Builder UI in progress
+            </span>
+          </div>
+        </footer>
       </div>
     </main>
   );

app/register/page.tsx

@@ -5,6 +5,7 @@ import { FormEvent, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
+import { Button, Field, Input } from "@/components/ui/form";
 
 export default function RegisterPage() {
   const router = useRouter();
@@ -16,7 +17,7 @@ export default function RegisterPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
 
-  const next = searchParams.get("next") || "/gunbuilder";
+  const next = searchParams.get("next") || "/builder";
 
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
@@ -31,89 +32,67 @@ export default function RegisterPage() {
   }
 
   return (
-    <main className="min-h-screen bg-black text-zinc-50">
+      <main className="min-h-screen bg-black text-zinc-50">
-      <div className="mx-auto flex max-w-md flex-col px-4 py-10">
+        <div className="mx-auto flex max-w-md flex-col px-4 py-10">
-        <h1 className="text-2xl font-semibold tracking-tight">
+          <h1 className="text-2xl font-semibold tracking-tight">
-          Join the <span className="text-amber-300">Shadow Standard</span> beta
+            Join the <span className="text-amber-300">Battl Builder</span> Beta
-        </h1>
+          </h1>
-        <p className="mt-2 text-sm text-zinc-400">
+          <p className="mt-2 text-sm text-zinc-400">
-          Create an account so we can save your builds, watch price drops, and
+            Create an account so we can save your builds, watch price drops, and
-          roll out new features to you first.
+            roll out new features to you first.
-        </p>
+          </p>
 
-        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+          <form onSubmit={handleSubmit} className="mt-6 space-y-4">
-          {error && (
+            {error && (
-            <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+                <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
-              {error}
+                  {error}
-            </div>
+                </div>
-          )}
+            )}
 
-          <div className="space-y-1">
+            <Field label="Display Name (optional)" htmlFor="displayName">
-            <label
+              <Input
-              className="text-xs font-medium text-zinc-400"
+                  id="displayName"
-              htmlFor="displayName"
+                  type="text"
-            >
+                  value={displayName}
-              Display Name (optional)
+                  onChange={(e) => setDisplayName(e.target.value)}
-            </label>
+              />
-            <input
+            </Field>
-              id="displayName"
-              type="text"
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
-              value={displayName}
-              onChange={(e) => setDisplayName(e.target.value)}
-            />
-          </div>
 
-          <div className="space-y-1">
+            <Field label="Email" htmlFor="email">
-            <label className="text-xs font-medium text-zinc-400" htmlFor="email">
+              <Input
-              Email
+                  id="email"
-            </label>
+                  type="email"
-            <input
+                  autoComplete="email"
-              id="email"
+                  required
-              type="email"
+                  value={email}
-              autoComplete="email"
+                  onChange={(e) => setEmail(e.target.value)}
-              required
+              />
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
+            </Field>
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
 
-          <div className="space-y-1">
+            <Field label="Password" htmlFor="password">
-            <label
+              <Input
-              className="text-xs font-medium text-zinc-400"
+                  id="password"
-              htmlFor="password"
+                  type="password"
-            >
+                  autoComplete="new-password"
-              Password
+                  required
-            </label>
+                  value={password}
-            <input
+                  onChange={(e) => setPassword(e.target.value)}
-              id="password"
+              />
-              type="password"
+            </Field>
-              autoComplete="new-password"
-              required
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
 
-          <button
+            <Button type="submit" disabled={loading}>
-            type="submit"
+              {loading ? "Creating account…" : "Join Beta"}
-            disabled={loading}
+            </Button>
-            className="mt-2 w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 hover:bg-amber-400/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          </form>
-          >
-            {loading ? "Creating account…" : "Join Beta"}
-          </button>
-        </form>
 
-        <p className="mt-4 text-xs text-zinc-500">
+          <p className="mt-4 text-xs text-zinc-500">
-          Already have an account?{" "}
+            Already have an account?{" "}
-          <Link href="/login" className="text-amber-300 hover:text-amber-200">
+            <Link href="/login" className="text-amber-300 hover:text-amber-200">
-            Log in
+              Log in
-          </Link>
+            </Link>
-          .
+            .
-        </p>
+          </p>
-      </div>
+        </div>
-    </main>
+      </main>
   );
 }

app/vault/[uuid]/edit/page.tsx

@@ -0,0 +1,640 @@
+// app/vault/[uuid]/edit/page.tsx
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+type BuildItemDto = {
+  id?: string;
+  uuid?: string;
+  slot?: string; // categoryId in your MVP
+  position?: number | null;
+  quantity?: number | null;
+  productId?: string | null;
+  productName?: string | null;
+  productBrand?: string | null;
+  productImageUrl?: string | null;
+};
+
+type BuildDto = {
+  id: string;
+  uuid: string;
+  title: string;
+  description?: string | null;
+  isPublic?: boolean | null;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+  items?: BuildItemDto[] | null;
+
+  // Option B: metadata fields on Build (or related BuildProfile)
+  platform?: string | null;
+  caliber?: string | null;
+  // purpose?: string | null;
+  buildClass?: string | null;
+  tags?: string[] | null;
+  coverImageUrl?: string | null;
+};
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+// -----------------------------
+// Controlled vocab (platform + caliber)
+// -----------------------------
+const PLATFORM_OPTIONS = ["AR-15", "AR-10", "AR-9"] as const;
+type PlatformOption = (typeof PLATFORM_OPTIONS)[number] | "";
+
+/**
+ * Keep this intentionally small and controlled for now:
+ * - Only calibers relevant to AR-15 / AR-10 / AR-9
+ * - Easy future expansion: add strings to the arrays below
+ * - If you later want “canonical” values vs “labels”, we can switch to { value, label } objects.
+ */
+const CALIBERS_BY_PLATFORM: Record<
+  Exclude<PlatformOption, "">,
+  readonly string[]
+> = {
+  "AR-15": [
+    "5.56 NATO",
+    ".223 Rem",
+    ".300 Blackout",
+    "6.5 Grendel",
+    "6mm ARC",
+    "7.62x39",
+    ".224 Valkyrie",
+    "350 Legend",
+    "6.8 SPC",
+    "458 SOCOM",
+  ],
+  "AR-10": [
+    "7.62 NATO",
+    ".308 Win",
+    "6.5 Creedmoor",
+    "6mm Creedmoor",
+    ".260 Rem",
+    ".243 Win",
+    "8.6 Blackout",
+  ],
+  "AR-9": ["9mm", "10mm", ".40 S&W", ".45 ACP"],
+} as const;
+
+type CaliberOption = string | "";
+
+// -----------------------------
+// Other controlled fields (optional scaffolding)
+// -----------------------------
+const PURPOSE_OPTIONS = [
+  "Home Defense",
+  "Duty / Patrol",
+  "Training",
+  "Competition",
+  "Hunting",
+  "Range / Fun",
+] as const;
+
+type PurposeOption = (typeof PURPOSE_OPTIONS)[number] | "";
+
+function fmt(d?: string | null) {
+  if (!d) return "—";
+  const dt = new Date(d);
+  if (Number.isNaN(dt.getTime())) return d;
+  return dt.toLocaleString();
+}
+
+function isUuid(v: string) {
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
+    v
+  );
+}
+
+export default function EditBuildPage() {
+  const router = useRouter();
+  const params = useParams();
+  const { user, loading, getAuthHeaders } = useAuth();
+
+  const uuid = String(params?.uuid ?? "");
+  const authed = !!user;
+
+  const headers = useMemo(() => getAuthHeaders(), [getAuthHeaders]);
+
+  const [busy, setBusy] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [build, setBuild] = useState<BuildDto | null>(null);
+
+  // Editable submission/profile fields
+  const [profile, setProfile] = useState<{
+    title: string;
+    description: string;
+    isPublic: boolean;
+
+    platform: PlatformOption;
+    caliber: CaliberOption;
+    purpose: PurposeOption;
+
+    tagsText: string; // comma-separated for MVP
+    coverImageUrl: string;
+  } | null>(null);
+
+  // Redirect to login if not authed
+  useEffect(() => {
+    if (!loading && !authed) router.replace("/login");
+  }, [loading, authed, router]);
+
+  // Load build
+  useEffect(() => {
+    if (loading || !authed) return;
+
+    if (!uuid || !isUuid(uuid)) {
+      setError("Invalid build id.");
+      return;
+    }
+
+    let cancelled = false;
+
+    (async () => {
+      setBusy(true);
+      setError(null);
+
+      try {
+        // NOTE: ownership / public checks happen server-side
+        const res = await fetch(
+          `${API_BASE_URL}/api/v1/builds/me/${encodeURIComponent(uuid)}`,
+          {
+            credentials: "include",
+          }
+        );
+
+        if (!res.ok) {
+          const txt = await res.text().catch(() => "");
+          throw new Error(txt || `Load failed (${res.status})`);
+        }
+
+        const dto = (await res.json()) as BuildDto;
+        if (cancelled) return;
+
+        setBuild(dto);
+
+        const normalizedPlatform: PlatformOption = PLATFORM_OPTIONS.includes(
+          (dto.platform ?? "") as any
+        )
+          ? (dto.platform as PlatformOption)
+          : "";
+
+        const allowedCalibers = normalizedPlatform
+          ? CALIBERS_BY_PLATFORM[normalizedPlatform]
+          : [];
+
+        const normalizedCaliber =
+          dto.caliber && allowedCalibers.includes(dto.caliber)
+            ? dto.caliber
+            : "";
+
+        setProfile({
+          title: dto.title ?? "",
+          description: dto.description ?? "",
+          isPublic: !!dto.isPublic,
+
+          platform: normalizedPlatform,
+          caliber: normalizedCaliber,
+
+          purpose: (PURPOSE_OPTIONS.includes((dto.buildClass ?? "") as any)
+            ? (dto.buildClass as any)
+            : "") as PurposeOption,
+
+          tagsText: Array.isArray(dto.tags) ? dto.tags.join(", ") : "",
+          coverImageUrl: dto.coverImageUrl ?? "",
+        });
+      } catch (e: any) {
+        if (!cancelled) setError(e?.message || "Failed to load build");
+      } finally {
+        if (!cancelled) setBusy(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [loading, authed, uuid, headers]);
+
+  // Derived caliber options based on selected platform
+  const caliberOptions = useMemo(() => {
+    if (!profile?.platform) return [];
+    return (
+      CALIBERS_BY_PLATFORM[profile.platform as Exclude<PlatformOption, "">] ??
+      []
+    );
+  }, [profile?.platform]);
+
+  // If platform changes, ensure caliber is valid for that platform
+  useEffect(() => {
+    if (!profile) return;
+    if (!profile.platform) return;
+
+    const allowed =
+      CALIBERS_BY_PLATFORM[profile.platform as Exclude<PlatformOption, "">] ??
+      [];
+    if (!profile.caliber) return;
+
+    if (!allowed.includes(profile.caliber)) {
+      setProfile((p) => (p ? { ...p, caliber: "" } : p));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [profile?.platform]); // intentionally only platform
+
+  const save = async () => {
+    if (!profile) return;
+    if (!uuid || !isUuid(uuid)) return;
+
+    const title = profile.title.trim();
+    if (!title) {
+      setError("Title is required.");
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = {
+        title,
+        description: profile.description?.trim() || null,
+        isPublic: !!profile.isPublic,
+
+        // Backend expects buildClass (not purpose)
+        buildClass: profile.purpose || null,
+
+        caliber: profile.caliber || null,
+        coverImageUrl: profile.coverImageUrl?.trim() || null,
+
+        // Backend expects tags: string[]
+        tags: profile.tagsText
+          .split(",")
+          .map((t) => t.trim())
+          .filter(Boolean),
+
+        // IMPORTANT: if your backend overwrites items when provided,
+        // leave items undefined unless you intend to edit items here.
+        // If your backend REQUIRES items, uncomment and map from build.items:
+        // items: (build?.items ?? []).map((it) => ({
+        //   productId: it.productId ? Number(it.productId) : null,
+        //   slot: it.slot ?? "",
+        //   position: it.position ?? 0,
+        //   quantity: it.quantity ?? 1,
+        // })).filter((it) => it.productId && it.slot),
+      };
+
+      const res = await fetch(
+        `${API_BASE_URL}/api/v1/builds/me/${encodeURIComponent(uuid)}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            ...headers,
+          },
+          credentials: "include",
+          body: JSON.stringify(payload),
+        }
+      );
+
+      if (!res.ok) {
+        const txt = await res.text().catch(() => "");
+        throw new Error(txt || `Save failed (${res.status})`);
+      }
+
+      const updated = (await res.json().catch(() => null)) as BuildDto | null;
+      if (updated?.uuid) setBuild(updated);
+
+      router.replace("/vault");
+    } catch (e: any) {
+      setError(e?.message || "Save failed");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading || busy) {
+    return (
+      <div className="mx-auto max-w-6xl px-4 py-6">
+        <div className="text-sm opacity-70">Loading…</div>
+      </div>
+    );
+  }
+
+  if (!authed) return null;
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-6">
+      <div className="mb-6 flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <h1 className="text-2xl font-semibold truncate">Edit Build</h1>
+          <div className="mt-1 text-xs opacity-70 font-mono truncate">
+            {uuid}
+          </div>
+          <div className="mt-1 text-xs opacity-60">
+            Updated: {fmt(build?.updatedAt)}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <Link
+            prefetch={false}
+            href={`/builder?load=${encodeURIComponent(uuid)}`}
+            className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm hover:bg-white/10"
+          >
+            Open in Builder
+          </Link>
+          <Link href="/vault" className="text-sm opacity-80 hover:underline">
+            ← Vault
+          </Link>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm">
+          {error}
+        </div>
+      )}
+
+      {!profile ? (
+        <div className="rounded-xl border border-white/10 bg-white/5 p-4 text-sm opacity-70">
+          No build loaded.
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          {/* Left: form */}
+          <div className="lg:col-span-2 rounded-xl border border-white/10 bg-white/5 p-4">
+            <div className="mb-4">
+              <div className="text-sm font-medium">Submission Details</div>
+              <div className="text-xs opacity-70">
+                Controlled fields keep the community feed clean + filterable.
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              {/* Title */}
+              <div className="md:col-span-2">
+                <label className="block text-xs font-medium text-white/70">
+                  Title
+                </label>
+                <input
+                  value={profile.title}
+                  onChange={(e) =>
+                    setProfile((p) => (p ? { ...p, title: e.target.value } : p))
+                  }
+                  className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
+                  placeholder='e.g. "Budget 16” General Purpose AR-15"'
+                />
+              </div>
+
+              {/* Platform */}
+              <div>
+                <label className="block text-xs font-medium text-white/70">
+                  Platform
+                </label>
+                <select
+                  value={profile.platform}
+                  onChange={(e) =>
+                    setProfile((p) =>
+                      p
+                        ? {
+                            ...p,
+                            platform: e.target.value as PlatformOption,
+                          }
+                        : p
+                    )
+                  }
+                  className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
+                >
+                  <option value="">Select…</option>
+                  {PLATFORM_OPTIONS.map((p) => (
+                    <option key={p} value={p}>
+                      {p}
+                    </option>
+                  ))}
+                </select>
+                <div className="mt-1 text-xs text-white/40">
+                  Controlled list (prevents messy feed data).
+                </div>
+              </div>
+
+              {/* Caliber */}
+              <div>
+                <label className="block text-xs font-medium text-white/70">
+                  Caliber
+                </label>
+                <select
+                  value={profile.caliber}
+                  onChange={(e) =>
+                    setProfile((p) =>
+                      p ? { ...p, caliber: e.target.value as CaliberOption } : p
+                    )
+                  }
+                  disabled={!profile.platform}
+                  className={`mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60 ${
+                    !profile.platform ? "opacity-50 cursor-not-allowed" : ""
+                  }`}
+                >
+                  <option value="">
+                    {profile.platform ? "Select…" : "Select platform first…"}
+                  </option>
+                  {caliberOptions.map((c) => (
+                    <option key={c} value={c}>
+                      {c}
+                    </option>
+                  ))}
+                </select>
+                <div className="mt-1 text-xs text-white/40">
+                  Options are tied to platform. Update{" "}
+                  <span className="font-mono">CALIBERS_BY_PLATFORM</span> to add
+                  more.
+                </div>
+              </div>
+
+              {/* Purpose */}
+              <div>
+                <label className="block text-xs font-medium text-white/70">
+                  Purpose
+                </label>
+                <select
+                  value={profile.purpose}
+                  onChange={(e) =>
+                    setProfile((p) =>
+                      p ? { ...p, purpose: e.target.value as PurposeOption } : p
+                    )
+                  }
+                  className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
+                >
+                  <option value="">Select…</option>
+                  {PURPOSE_OPTIONS.map((p) => (
+                    <option key={p} value={p}>
+                      {p}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Tags */}
+              <div>
+                <label className="block text-xs font-medium text-white/70">
+                  Tags
+                </label>
+                <input
+                  value={profile.tagsText}
+                  onChange={(e) =>
+                    setProfile((p) =>
+                      p ? { ...p, tagsText: e.target.value } : p
+                    )
+                  }
+                  className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
+                  placeholder="budget, general purpose, suppressed"
+                />
+                <div className="mt-1 text-xs text-white/40">
+                  Comma-separated for MVP.
+                </div>
+              </div>
+
+              {/* Cover image URL */}
+              <div className="md:col-span-2">
+                <label className="block text-xs font-medium text-white/70">
+                  Cover Image URL
+                </label>
+                <input
+                  value={profile.coverImageUrl}
+                  onChange={(e) =>
+                    setProfile((p) =>
+                      p ? { ...p, coverImageUrl: e.target.value } : p
+                    )
+                  }
+                  className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
+                  placeholder="https://…"
+                />
+                <div className="mt-1 text-xs text-white/40">
+                  Later we’ll replace this with uploads.
+                </div>
+              </div>
+
+              {/* Description */}
+              <div className="md:col-span-2">
+                <label className="block text-xs font-medium text-white/70">
+                  Description
+                </label>
+                <textarea
+                  value={profile.description}
+                  onChange={(e) =>
+                    setProfile((p) =>
+                      p ? { ...p, description: e.target.value } : p
+                    )
+                  }
+                  rows={5}
+                  className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
+                  placeholder="What’s the goal of this build? Any notes, constraints, lessons learned…"
+                />
+              </div>
+
+              {/* Public toggle */}
+              <div className="md:col-span-2 flex items-center justify-between rounded-md border border-white/10 bg-black/20 px-3 py-2">
+                <div>
+                  <div className="text-sm font-medium">Make Public</div>
+                  <div className="text-xs opacity-70">
+                    When enabled, this build can appear in the community feed
+                    later.
+                  </div>
+                </div>
+                <input
+                  type="checkbox"
+                  checked={!!profile.isPublic}
+                  onChange={(e) =>
+                    setProfile((p) =>
+                      p ? { ...p, isPublic: e.target.checked } : p
+                    )
+                  }
+                  className="h-5 w-5 accent-amber-400"
+                />
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="mt-6 flex items-center justify-end gap-3">
+              <Link
+                href="/vault"
+                className="text-sm opacity-80 hover:underline"
+              >
+                Cancel
+              </Link>
+              <button
+                type="button"
+                onClick={save}
+                disabled={saving}
+                className={`rounded-md px-4 py-2 text-sm font-semibold ${
+                  saving
+                    ? "bg-white/10 text-white/60 cursor-not-allowed"
+                    : "bg-amber-400 text-black hover:bg-amber-300"
+                }`}
+              >
+                {saving ? "Saving…" : "Save Changes"}
+              </button>
+            </div>
+          </div>
+
+          {/* Right: preview */}
+          <div className="rounded-xl border border-white/10 bg-white/5 p-4">
+            <div className="mb-3">
+              <div className="text-sm font-medium">Preview</div>
+              <div className="text-xs opacity-70">
+                This is roughly what the community card will show.
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-white/10 bg-black/30 p-3">
+              <div className="text-sm font-semibold truncate">
+                {profile.title || "Untitled Build"}
+              </div>
+
+              <div className="mt-2 flex flex-wrap gap-2 text-xs">
+                <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1">
+                  {profile.platform || "—"}
+                </span>
+                <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1">
+                  {profile.caliber || "—"}
+                </span>
+                <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1">
+                  {profile.purpose || "—"}
+                </span>
+              </div>
+
+              {profile.tagsText?.trim() ? (
+                <div className="mt-2 text-xs opacity-80">
+                  Tags:{" "}
+                  {profile.tagsText
+                    .split(",")
+                    .map((t) => t.trim())
+                    .filter(Boolean)
+                    .slice(0, 6)
+                    .join(", ")}
+                </div>
+              ) : null}
+
+              {profile.description?.trim() ? (
+                <div className="mt-3 text-xs opacity-80 line-clamp-5">
+                  {profile.description}
+                </div>
+              ) : (
+                <div className="mt-3 text-xs opacity-50">
+                  Add a description to help people understand the “why”.
+                </div>
+              )}
+
+              <div className="mt-3 text-[11px] opacity-60">
+                Build UUID: <span className="font-mono">{uuid}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/vault/page.tsx

@@ -0,0 +1,253 @@
+// app/vault/page.tsx
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { useAuth } from "@/context/AuthContext";
+
+type BuildDto = {
+  id: string; // internal numeric id (not used by UI)
+  uuid: string; // public identifier
+  title: string;
+  description?: string | null;
+  isPublic?: boolean | null;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+};
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+// UUID validator (defensive)
+const isUuid = (v: string) =>
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
+    v
+  );
+
+function fmt(d?: string | null) {
+  if (!d) return "—";
+  const dt = new Date(d);
+  if (Number.isNaN(dt.getTime())) return d;
+  return dt.toLocaleString();
+}
+
+export default function VaultPage() {
+  const router = useRouter();
+  const { user, loading, getAuthHeaders } = useAuth();
+
+  const [builds, setBuilds] = useState<BuildDto[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const authed = !!user;
+
+  // Redirect if not logged in
+  useEffect(() => {
+    if (!loading && !authed) {
+      router.replace("/login");
+    }
+  }, [loading, authed, router]);
+
+  const headers = useMemo(() => getAuthHeaders(), [getAuthHeaders]);
+
+  // Fetch user builds
+  useEffect(() => {
+    if (loading || !authed) return;
+
+    let cancelled = false;
+
+    (async () => {
+      setBusy(true);
+      setError(null);
+
+      try {
+        const res = await fetch(`${API_BASE_URL}/api/v1/builds/me`, {
+          method: "GET",
+          headers,
+          credentials: "include",
+        });
+
+        if (!res.ok) {
+          const text = await res.text().catch(() => "");
+          throw new Error(text || `Request failed (${res.status})`);
+        }
+
+        const data = (await res.json()) as BuildDto[];
+        if (!cancelled) setBuilds(Array.isArray(data) ? data : []);
+      } catch (e: any) {
+        if (!cancelled) setError(e?.message || "Failed to load builds");
+      } finally {
+        if (!cancelled) setBusy(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [loading, authed, headers]);
+
+  if (loading) {
+    return (
+      <div className="mx-auto max-w-6xl px-4 py-6">
+        <div className="text-sm opacity-70">Loading…</div>
+      </div>
+    );
+  }
+
+  // Already redirected
+  if (!authed) return null;
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-6">
+      {/* Header */}
+      <div className="mb-6 flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold">Vault</h1>
+          <p className="text-sm opacity-70">
+            Your saved builds. Open one to keep tweaking parts, or add details
+            to submit it to the community.
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <Link
+            href="/builder"
+            className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm hover:bg-white/10"
+          >
+            New Build
+          </Link>
+          <Link href="/account" className="text-sm opacity-80 hover:underline">
+            Account →
+          </Link>
+        </div>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm">
+          {error}
+        </div>
+      )}
+
+      {/* Builds list */}
+      <div className="rounded-xl border border-white/10 bg-white/5">
+        <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
+          <div className="text-sm font-medium">My Builds</div>
+          <div className="text-xs opacity-70">
+            {busy ? "Refreshing…" : `${builds.length} total`}
+          </div>
+        </div>
+
+        {builds.length === 0 ? (
+          <div className="p-4 text-sm opacity-70">
+            No builds yet. Create one in the builder and hit “Save Build”.
+          </div>
+        ) : (
+          <ul className="divide-y divide-white/10">
+            {builds.map((b) => {
+              const valid = !!b?.uuid && isUuid(String(b.uuid));
+              const published = Boolean(b.isPublic);
+
+              const openHref = valid
+                ? `/builder?load=${encodeURIComponent(b.uuid)}`
+                : "#";
+
+              const detailsHref = valid
+                ? `/vault/${encodeURIComponent(b.uuid)}/edit`
+                : "#";
+
+              return (
+                <li
+                  key={b.uuid}
+                  className="p-4 flex items-start justify-between gap-4"
+                >
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2">
+                      <div className="font-medium truncate">{b.title}</div>
+
+                      {/* Status chip */}
+                      <span
+                        className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] ${
+                          published
+                            ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
+                            : "border-white/10 bg-white/5 text-white/70"
+                        }`}
+                        title={
+                          published
+                            ? "This build is public (community-visible)."
+                            : "Draft (only visible in your Vault)."
+                        }
+                      >
+                        {published ? "Published" : "Draft"}
+                      </span>
+
+                      {!valid && (
+                        <span
+                          className="shrink-0 rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[11px] text-red-200"
+                          title="This build record has an invalid UUID. The backend returned a bad identifier."
+                        >
+                          Invalid UUID
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="mt-1 text-xs opacity-70">
+                      Updated: {fmt(b.updatedAt)} • UUID:{" "}
+                      <span className="font-mono">{b.uuid}</span>
+                    </div>
+
+                    {b.description && (
+                      <div className="mt-2 text-sm opacity-80 line-clamp-2">
+                        {b.description}
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="flex shrink-0 items-center gap-2">
+                    <Link
+                      href={openHref}
+                      aria-disabled={!valid}
+                      tabIndex={!valid ? -1 : 0}
+                      className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
+                        valid
+                          ? "border-white/10 bg-white/5 hover:bg-white/10"
+                          : "border-white/10 bg-white/5 opacity-40 pointer-events-none"
+                      }`}
+                      title={
+                        valid
+                          ? "Load this build into the builder"
+                          : "Invalid build id"
+                      }
+                    >
+                      Open
+                    </Link>
+
+                    <Link
+                      href={detailsHref}
+                      aria-disabled={!valid}
+                      tabIndex={!valid ? -1 : 0}
+                      className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
+                        valid
+                          ? "border-white/10 bg-white/5 hover:bg-white/10"
+                          : "border-white/10 bg-white/5 opacity-40 pointer-events-none"
+                      }`}
+                      title={
+                        valid
+                          ? "Add details + submit/publish later"
+                          : "Invalid build id"
+                      }
+                    >
+                      Edit
+                    </Link>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

components/AdminLeftNavigation.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import type React from "react";
+import {
+  LayoutDashboard,
+  Download,
+  Layers,
+  Boxes,
+  Store,
+  Users,
+  Settings,
+  LucideMail,
+} from "lucide-react";
+import Link from "next/link";
+
+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: "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" />,
+  },
+];
+
+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">
+              <Link href={"/"} title={"Back to Battl Dashboard"} >Battl Builders</Link>
+            </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>
+  );
+}

components/Banner.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export function Banner() {
+  return (
+    <div>
+      {/* Early access bar */}
+      <div className="border-b border-amber-500/20 bg-amber-500/5">
+        <div className="mx-auto flex max-w-6xl flex-col gap-1 px-4 py-2 text-[0.75rem] text-amber-100 md:flex-row md:items-center md:justify-between">
+          <div className="flex items-center gap-2">
+            <span className="rounded-sm bg-amber-500/20 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-amber-300">
+              Early Access Beta
+            </span>
+            <span className="hidden text-amber-100/90 md:inline">
+              You&apos;re using an early-access prototype of The Armory. Data,
+              pricing, and available parts are still evolving.
+            </span>
+          </div>
+          <span className="text-amber-100/90 md:hidden">
+            Early-access prototype. Data and pricing may change.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Banner;

components/BuilderNav.tsx

@@ -1,15 +1,34 @@
 "use client";
 
+/**
+ * BuilderNav.tsx
+ * -----------------------------------------------------------------------------
+ * Top navigation for the Builder experience.
+ *
+ * MAJOR LAYOUT IDEA:
+ * - Keep all primary nav items on the LEFT
+ * - Put *everything else* (search, viewing state, theme toggle later, user menu later)
+ *   into a RIGHT "actions cluster" using a single `ml-auto` wrapper.
+ *
+ * WHY:
+ * - Prevents multiple `ml-auto` elements fighting each other
+ * - Makes the right side easy to extend without breaking alignment
+ */
+
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { CATEGORIES } from "@/data/gunbuilderParts";
 import type { Category } from "@/types/gunbuilder";
 
 type BuilderNavProps = {
+  // Optional override if a parent wants to force the active category
   activeCategoryId?: string | null;
 };
 
-// Helper to group categories for the dropdowns
+/**
+ * Helper: group categories for dropdowns.
+ * This assumes your Category has a `group` field like "lower" | "upper" | "accessories".
+ */
 function groupCategories(group: "lower" | "upper" | "accessories"): Category[] {
   return CATEGORIES.filter((c) => c.group === group);
 }
@@ -17,32 +36,43 @@ function groupCategories(group: "lower" | "upper" | "accessories"): Category[] {
 export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
   const searchParams = useSearchParams();
 
+  // ---- Data / derived state --------------------------------------------------
   const lower = groupCategories("lower");
   const upper = groupCategories("upper");
   const accessories = groupCategories("accessories");
 
+  // Determine which category is "active" so we can highlight dropdown items
+  // and show the "Viewing" indicator on the right.
   const currentCategory =
     activeCategoryId ?? searchParams.get("category") ?? undefined;
 
-  const baseHref = "/builder";
+  // Base route for parts browsing (used for dropdown links + "Clear")
+  const baseHref = "/parts";
 
+  /**
+   * Dropdown renderer (hover-based).
+   * - Uses Tailwind `group` + `group-hover` to show/hide the menu.
+   * - Highlights the active item.
+   */
   const renderDropdown = (label: string, items: Category[]) => {
     if (!items.length) return null;
 
     return (
       <div className="relative group">
+        {/* Dropdown trigger */}
         <button
           type="button"
-          className={`inline-flex items-center gap-1 font-medium tracking-wide transition-colors uppercase text-[11px] ${
+          className={`inline-flex items-center gap-1 font-medium tracking-wide uppercase text-[11px] transition-colors ${
-            items.some(cat => cat.id === currentCategory)
+            items.some((cat) => cat.id === currentCategory)
               ? "text-white"
-              : "text-neutral-200 hover:text-white"
+              : "text-neutral-300 hover:text-white"
           }`}
         >
           {label}
           <span className="text-[9px]">▾</span>
         </button>
 
+        {/* Dropdown menu */}
         <div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all absolute left-0 mt-2 rounded-md border border-neutral-800 bg-black/95 shadow-xl z-40 min-w-[220px]">
           <ul className="py-2 text-sm">
             {items.map((cat) => {
@@ -51,12 +81,11 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
                 <li key={cat.id}>
                   <Link
                     href={`${baseHref}/${cat.id}`}
-                    className={[
+                    className={`block w-full px-3 py-1.5 transition-colors ${
-                      "block w-full px-3 py-1.5 text-left text-sm transition-colors",
                       isActive
                         ? "bg-neutral-800 text-white"
-                        : "text-neutral-300 hover:bg-neutral-800 hover:text-white",
+                        : "text-neutral-300 hover:bg-neutral-800 hover:text-white"
-                    ].join(" ")}
+                    }`}
                   >
                     {cat.name}
                   </Link>
@@ -70,11 +99,23 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
   };
 
   return (
-    <div className="max-w-6xl mx-auto w-full">   {/* ← aligns with topnav */}
+    /**
-      <nav className="flex items-center gap-6 border-b border-neutral-900 px-6 py-3 text-sm bg-black/95 backdrop-blur-sm">
+     * Outer container matches TopNav width:
-        {/* Primary builder link */}
+     * - max-w-6xl mx-auto w-full ensures consistent alignment across app
+     */
+    <div className="max-w-6xl mx-auto w-full">
+      {/**
+       * FLEX STRATEGY:
+       * - Everything before the RIGHT cluster is "left side"
+       * - Then a single `ml-auto` cluster pushes everything else to the right
+       */}
+      <nav className="flex items-center gap-6 border-b border-neutral-900 px-6 py-3 text-sm backdrop-blur-sm">
+        {/* ------------------------------------------------------------------ */}
+        {/* LEFT SIDE: primary nav */}
+        {/* ------------------------------------------------------------------ */}
+
         <Link
-          href={baseHref}
+          href="/builder"
           className="font-semibold text-neutral-100 hover:text-white tracking-[0.25em] uppercase text-[11px]"
         >
           Builder
@@ -91,22 +132,57 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
           Builds
         </Link>
 
-        {/* Right → Current filter */}
+        {/* ------------------------------------------------------------------ */}
-        {currentCategory && (
+        {/* RIGHT SIDE: actions + state */}
-          <div className="ml-auto flex items-center gap-2 text-neutral-400 text-xs">
+        {/* IMPORTANT: this is the ONLY `ml-auto` in the nav to avoid conflicts */}
-            <span className="uppercase tracking-wide text-[10px]">Viewing</span>
+        {/* ------------------------------------------------------------------ */}
-            <span className="font-medium text-neutral-100">
+        <div className="ml-auto flex items-center gap-3">
-              {CATEGORIES.find((c) => c.id === currentCategory)?.name ??
+          {/* Search icon (placeholder action) */}
-                currentCategory}
+          <button
-            </span>
+            type="button"
-            <Link
+            className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
-              href={baseHref}
+            aria-label="Search (coming soon)"
-              className="rounded border border-neutral-700 px-2 py-0.5 text-[10px] uppercase tracking-wide hover:bg-neutral-800 hover:text-white"
+            title="Search (coming soon)"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-4 w-4"
             >
-              Clear
+              <circle cx="11" cy="11" r="6" />
-            </Link>
+              <line x1="16.5" y1="16.5" x2="21" y2="21" />
-          </div>
+            </svg>
-        )}
+          </button>
+
+          {/* "Viewing" indicator (only shows when a category is active) */}
+          {currentCategory && (
+            <div className="flex items-center gap-2 text-neutral-400 text-xs">
+              <span className="uppercase tracking-wide text-[10px]">Viewing</span>
+
+              <span className="font-medium text-neutral-100">
+                {CATEGORIES.find((c) => c.id === currentCategory)?.name ??
+                  currentCategory}
+              </span>
+
+              {/* Clears category filter -> go back to /parts */}
+              <Link
+                href={baseHref}
+                className="rounded border border-neutral-700 px-2 py-0.5 text-[10px] uppercase tracking-wide hover:bg-neutral-800 hover:text-white"
+              >
+                Clear
+              </Link>
+            </div>
+          )}
+
+          {/* FUTURE: drop in ThemeToggle, UserMenu, Notifications here */}
+          {/* <ThemeToggle /> */}
+          {/* <UserMenu /> */}
+        </div>
       </nav>
     </div>
   );

components/CategoryColumn.tsx

@@ -1,79 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import type { Category, Part } from "@/types/gunbuilder";
-import { PartCard } from "@/components/PartCard";
-
-interface CategoryColumnProps {
-  category: Category;
-  parts: Part[];
-  selectedPartId?: string;
-  onSelectPart: (partId: string) => void;
-}
-
-export function CategoryColumn({
-  category,
-  parts,
-  selectedPartId,
-  onSelectPart,
-}: CategoryColumnProps) {
-  // Show selected part if available, otherwise show placeholder
-  const displayedPart = selectedPartId
-    ? parts.find((p) => p.id === selectedPartId)
-    : null;
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="mb-3">
-        <h2 className="text-xs font-semibold tracking-[0.15em] text-zinc-400 uppercase">
-          {category.name}
-        </h2>
-      </div>
-      <div className="flex-1 overflow-y-auto pr-1">
-        {parts.length === 0 && (
-          <p className="text-xs text-zinc-500">No parts available yet.</p>
-        )}
-        {!displayedPart && parts.length > 0 && (
-          <div className="w-full border border-zinc-700 rounded-md p-3 mb-2 flex items-center justify-between gap-3">
-            <p className="text-sm text-zinc-500">No part selected</p>
-            <Link
-              href={`/builder/${category.id}`}
-              className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/60 px-3 py-1.5 text-xs font-medium text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
-            >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 4v16m8-8H4"
-                />
-              </svg>
-              Choose a Part
-            </Link>
-          </div>
-        )}
-        {displayedPart && (
-          <PartCard
-            key={displayedPart.id}
-            part={displayedPart}
-            selected={displayedPart.id === selectedPartId}
-            onSelect={() => onSelectPart(displayedPart.id)}
-          />
-        )}
-      </div>
-      {parts.length >= 1 && (
-        <Link
-          href={`/builder/${category.id}`}
-          className="mt-2 w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-3 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors text-center"
-        >
-          View All ({parts.length})
-        </Link>
-      )}
-    </div>
-  );
-}

components/PricingHistoryGraph.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { PriceHistoryPoint } from "@/app/builder/[categoryId]/[partId]/data";
+import type { PriceHistoryPoint } from "@/app/(builder)/parts/[partRole]/_old_prod_details/data";
 
 interface PricingHistoryGraphProps {
   data: PriceHistoryPoint[];

components/RetailersList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { RetailerOffer } from "@/app/builder/[categoryId]/[partId]/data";
+import type { RetailerOffer } from "@/app/(builder)/parts/[partRole]/_old_prod_details/data";
 
 interface RetailersListProps {
   retailers: RetailerOffer[];

components/SendEmail-oriig.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { sendEmailAction, type ApiResponse, type EmailRequest } from "/app/actions/sendEmail";
+import { Button, Field, Input, Textarea } from "@/components/ui/form";
+
+export default function SendEmailForm(): JSX.Element {
+  const [result, setResult] = useState<
+    ApiResponse<EmailRequest> | { error: string } | null
+  >(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const [showSuccess, setShowSuccess] = useState(false);
+  const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (successTimerRef.current) clearTimeout(successTimerRef.current);
+    };
+  }, []);
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
+    e.preventDefault();
+    setResult(null);
+
+    setShowSuccess(false);
+    if (successTimerRef.current) clearTimeout(successTimerRef.current);
+
+    const form = new FormData(e.currentTarget);
+
+    const recipient = String(form.get("recipient") ?? "");
+    const subject = String(form.get("subject") ?? "");
+    const body = String(form.get("body") ?? "");
+
+    try {
+      setSubmitting(true);
+      const data = await sendEmailAction({ recipient, subject, body });
+      setResult(data);
+
+      if (data?.success === true) {
+        setShowSuccess(true);
+
+        successTimerRef.current = setTimeout(() => {
+          setShowSuccess(false);
+          setResult(null); // clear the response panel too
+        }, 2000);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setResult({ error: message });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-xl px-4 py-10 text-zinc-50">
+      <h1 className="text-2xl font-semibold tracking-tight">
+        Send <span className="text-amber-300">Email</span>
+      </h1>
+      <p className="mt-2 text-sm text-zinc-400">
+        Compose a message and send it from the admin panel.
+      </p>
+
+      <form onSubmit={onSubmit} className="mt-6 space-y-4">
+        {result && "error" in result && (
+          <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+            {result.error}
+          </div>
+        )}
+
+        <Field label="Recipient" htmlFor="recipient">
+          <Input
+            id="recipient"
+            name="recipient"
+            type="email"
+            placeholder="user@example.com"
+            defaultValue="user@example.com"
+            required
+          />
+        </Field>
+
+        <Field label="Subject" htmlFor="subject">
+          <Input
+            id="subject"
+            name="subject"
+            placeholder="Test subject"
+            defaultValue="Test subject"
+            required
+          />
+        </Field>
+
+        <Field label="Body" htmlFor="body">
+          <Textarea
+            id="body"
+            name="body"
+            placeholder="Write your message…"
+            defaultValue="Test body"
+            rows={6}
+            required
+          />
+        </Field>
+
+        <Button type="submit" disabled={submitting}>
+          {submitting ? "Sending…" : showSuccess ? "Success" : "Send"}
+        </Button>
+
+        <div className="rounded-md border border-zinc-800 bg-zinc-950/60 p-3">
+          <div className="text-xs font-medium text-zinc-400">Response</div>
+          <pre className="mt-2 overflow-x-auto text-xs text-zinc-200">
+            {result ? JSON.stringify(result, null, 2) : "No response yet."}
+          </pre>
+        </div>
+      </form>
+    </div>
+  );
+}

components/SendEmail.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { sendEmailAction, type ApiResponse, type EmailRequest } from "/app/actions/sendEmail";
+import { Button, Field, Input } from "@/components/ui/form";
+import RichTextEditor from "@/components/ui/RichTextEditor";
+
+export default function SendEmailForm(): JSX.Element {
+  const [result, setResult] = useState<
+      ApiResponse<EmailRequest> | { error: string } | null
+  >(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const [showSuccess, setShowSuccess] = useState(false);
+  const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [bodyHtml, setBodyHtml] = useState<string>("");
+
+  useEffect(() => {
+    return () => {
+      if (successTimerRef.current) clearTimeout(successTimerRef.current);
+    };
+  }, []);
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
+    e.preventDefault();
+    setResult(null);
+
+    setShowSuccess(false);
+    if (successTimerRef.current) clearTimeout(successTimerRef.current);
+
+    const form = new FormData(e.currentTarget);
+
+    const recipient = String(form.get("recipient") ?? "");
+    const subject = String(form.get("subject") ?? "");
+    const body = String(form.get("body") ?? ""); // HTML from hidden input
+
+    try {
+      setSubmitting(true);
+      const data = await sendEmailAction({ recipient, subject, body });
+      setResult(data);
+
+      if (data?.success === true) {
+        setShowSuccess(true);
+
+        successTimerRef.current = setTimeout(() => {
+          setShowSuccess(false);
+          setResult(null);
+        }, 2000);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setResult({ error: message });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+      <div className="mx-auto w-full max-w-xl px-4 py-10 text-zinc-50">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Send <span className="text-amber-300">Email</span>
+        </h1>
+        <p className="mt-2 text-sm text-zinc-400">
+          Compose a message and send it from the admin panel.
+        </p>
+
+        <form onSubmit={onSubmit} className="mt-6 space-y-4">
+          {result && "error" in result && (
+              <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+                {result.error}
+              </div>
+          )}
+
+          <Field label="Recipient" htmlFor="recipient">
+            <Input
+                id="recipient"
+                name="recipient"
+                type="email"
+                placeholder="user@example.com"
+                defaultValue="user@example.com"
+                required
+            />
+          </Field>
+
+          <Field label="Subject" htmlFor="subject">
+            <Input
+                id="subject"
+                name="subject"
+                placeholder="Subject…"
+                defaultValue="Test subject"
+                required
+            />
+          </Field>
+
+          <Field
+              label="Body"
+              htmlFor="body"
+              hint="This will be sent as HTML."
+          >
+            {/* Hidden field so your existing FormData submit keeps working */}
+            <input type="hidden" id="body" name="body" value={bodyHtml} />
+
+            <RichTextEditor
+                value={bodyHtml}
+                onChange={setBodyHtml}
+                placeholder="Write your message…"
+                className="rounded-md border border-zinc-800 bg-zinc-950/60"
+            />
+          </Field>
+
+          <Button type="submit" disabled={submitting}>
+            {submitting ? "Sending…" : showSuccess ? "Success" : "Send"}
+          </Button>
+
+          <div className="rounded-md border border-zinc-800 bg-zinc-950/60 p-3">
+            <div className="text-xs font-medium text-zinc-400">Response</div>
+            <pre className="mt-2 overflow-x-auto text-xs text-zinc-200">
+            {result ? JSON.stringify(result, null, 2) : "No response yet."}
+          </pre>
+          </div>
+        </form>
+      </div>
+  );
+}

components/ThemeToggle.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Sun, Moon } from "lucide-react";
+
+type Theme = "light" | "dark";
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>("dark");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const stored = (localStorage.getItem("theme") as Theme | null) ?? "dark";
+    setTheme(stored);
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null; // prevents hydration mismatch
+
+  function toggle() {
+    const next: Theme = theme === "dark" ? "light" : "dark";
+    setTheme(next);
+    localStorage.setItem("theme", next);
+    document.documentElement.classList.toggle("dark", next === "dark");
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label="Toggle theme"
+      className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-1.5 text-xs font-semibold text-zinc-200 hover:bg-zinc-800 transition-colors
+                 dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-200
+                 border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+    >
+      {theme === "dark" ? (
+        <>
+          <Sun className="h-4 w-4" />
+          Light
+        </>
+      ) : (
+        <>
+          <Moon className="h-4 w-4" />
+          Dark
+        </>
+      )}
+    </button>
+  );
+}

components/TopNav.tsx

@@ -2,92 +2,75 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+
 import { useAuth } from "@/context/AuthContext";
+import ThemeToggle from "@/components/ThemeToggle";
+
+function NavLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const active = pathname === href;
+
+  return (
+    <Link
+      href={href}
+      className={[
+        "text-xs font-medium transition-colors",
+        active ? "text-zinc-100" : "text-zinc-400 hover:text-zinc-100",
+      ].join(" ")}
+    >
+      {children}
+    </Link>
+  );
+}
 
 export function TopNav() {
   const { user, logout, loading } = useAuth();
-
   const isAuthenticated = !!user;
 
   return (
-    <header className="border-b border-zinc-800 bg-black/95 backdrop-blur">
+    <header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
-      {/* Early access bar */}
-      <div className="border-b border-amber-500/20 bg-amber-500/5">
-        <div className="mx-auto flex max-w-6xl flex-col gap-1 px-4 py-2 text-[0.75rem] text-amber-100 md:flex-row md:items-center md:justify-between">
-          <div className="flex items-center gap-2">
-            <span className="rounded-sm bg-amber-500/20 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-amber-300">
-              Early Access Beta
-            </span>
-            <span className="hidden text-amber-100/90 md:inline">
-              You&apos;re using an early-access prototype of The Armory. Data,
-              pricing, and available parts are still evolving.
-            </span>
-          </div>
-          <span className="text-amber-100/90 md:hidden">
-            Early-access prototype. Data and pricing may change.
-          </span>
-        </div>
-      </div>
-
-      {/* Main nav row */}
       <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
         {/* Left: Brand / Home */}
         <Link
           href="/"
           className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-400"
         >
-          Battl Builder
+          <Image
+            src="/battl/battl-logo-mark-f.svg"
+            alt="Battl Builders Logo"
+            width={260}
+            height={48}
+            className="block"
+          />
         </Link>
 
-        {/* Center: main nav (Builder / Admin) */}
-        <nav className="hidden items-center gap-4 md:flex">
-          <Link
-            href="/builder"
-            className="text-xs font-medium text-zinc-300 hover:text-zinc-50 transition-colors"
-          >
-            Builder
-          </Link>
-
-          {isAuthenticated && (
-            <Link
-              href="/admin"
-              className="text-xs font-medium text-emerald-400 hover:text-emerald-300 transition-colors"
-            >
-              Admin
-            </Link>
-          )}
-        </nav>
-
         {/* Right side actions */}
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
-          {/* Search placeholder */}
+          <ThemeToggle />
-          <button
-            type="button"
-            className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
-            aria-label="Search (coming soon)"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="h-4 w-4"
-            >
-              <circle cx="11" cy="11" r="6" />
-              <line x1="16.5" y1="16.5" x2="21" y2="21" />
-            </svg>
-          </button>
 
           {loading ? (
             <span className="text-xs text-zinc-500">Checking session…</span>
           ) : isAuthenticated ? (
             <>
-              <span className="hidden text-xs text-zinc-300 sm:inline">
+              <NavLink href="/vault">Vault</NavLink>
+
+              {/* Email/displayName links to Account */}
+              <Link
+                href="/account"
+                className="hidden text-xs text-zinc-300 hover:text-zinc-100 transition-colors sm:inline"
+                title="Account"
+              >
                 {user.displayName || user.email}
-              </span>
+              </Link>
+
               <button
                 type="button"
                 onClick={logout}
@@ -98,12 +81,8 @@ export function TopNav() {
             </>
           ) : (
             <>
-              <Link
+              <NavLink href="/login">Log In</NavLink>
-                href="/login"
+
-                className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
-              >
-                Log In
-              </Link>
               <Link
                 href="/register"
                 className="rounded-md border border-amber-400/70 bg-amber-400/10 px-3 py-1.5 text-xs font-semibold text-amber-200 hover:bg-amber-400/20 transition-colors"

components/builder/OverlapChip.tsx

@@ -0,0 +1,34 @@
+// /components/builder/OverlapChip.tsx
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function OverlapChip(props: {
+  tone?: "warning" | "info";
+  label: string;
+  detail?: string;
+}) {
+  const { tone = "info", label, detail } = props;
+
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const id = window.setTimeout(() => setReady(true), 10);
+    return () => window.clearTimeout(id);
+  }, []);
+
+  const base =
+    "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[0.65rem] leading-4 transition-all duration-200";
+  const pop = ready ? "opacity-100 scale-100" : "opacity-0 scale-95";
+
+  const toneCls =
+    tone === "warning"
+      ? "border-amber-400/40 bg-amber-400/10 text-amber-200"
+      : "border-zinc-700 bg-zinc-900/60 text-zinc-200";
+
+  return (
+    <span className={`${base} ${toneCls} ${pop}`} title={detail ?? label}>
+      <span className="font-medium">{label}</span>
+      {detail ? <span className="text-zinc-400">· {detail}</span> : null}
+    </span>
+  );
+}

components/parts/Filters.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import React from "react";
+
+export default function Filters(props: {
+  partRoleLabel: string;
+
+  availableBrands: string[];
+  brandFilter: string[];
+  setBrandFilter: (v: string[]) => void;
+
+  priceBounds: { min: number | null; max: number | null };
+  priceRange: { min: number | null; max: number | null };
+  setPriceRange: (v: { min: number | null; max: number | null }) => void;
+
+  inStockOnly: boolean;
+  setInStockOnly: (v: boolean) => void;
+}) {
+  const {
+    availableBrands,
+    brandFilter,
+    setBrandFilter,
+    priceBounds,
+    priceRange,
+    setPriceRange,
+    inStockOnly,
+    setInStockOnly,
+  } = props;
+
+  return (
+    <aside className="w-full rounded-md border border-zinc-800 bg-zinc-950/80 p-3 space-y-4">
+      <div>
+        <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">
+          Filters
+        </h2>
+        <p className="mt-1 text-[11px] text-zinc-500">
+          Narrow down the results.
+        </p>
+      </div>
+
+      {/* Price range */}
+      <div>
+        <div className="mb-1.5 flex items-center justify-between">
+          <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
+            Price
+          </span>
+          {(priceRange.min !== null || priceRange.max !== null) && (
+            <button
+              type="button"
+              onClick={() =>
+                setPriceRange({
+                  min: priceBounds.min,
+                  max: priceBounds.max,
+                })
+              }
+              className="text-[10px] text-zinc-400 hover:text-zinc-200"
+            >
+              Reset
+            </button>
+          )}
+        </div>
+
+        {priceBounds.min == null || priceBounds.max == null ? (
+          <p className="text-[11px] text-zinc-500">No price data available.</p>
+        ) : (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between text-[10px] text-zinc-400">
+              <span>
+                Min:{" "}
+                <span className="font-semibold text-zinc-200">
+                  ${(priceRange.min ?? priceBounds.min).toFixed(0)}
+                </span>
+              </span>
+              <span>
+                Max:{" "}
+                <span className="font-semibold text-zinc-200">
+                  ${(priceRange.max ?? priceBounds.max).toFixed(0)}
+                </span>
+              </span>
+            </div>
+
+            <div className="space-y-2">
+              <input
+                type="range"
+                min={priceBounds.min ?? 0}
+                max={priceBounds.max ?? 0}
+                value={priceRange.min ?? priceBounds.min ?? 0}
+                onChange={(e) => {
+                  const value = Number(e.target.value);
+                  setPriceRange({
+                    min: Math.min(value, priceRange.max ?? priceBounds.max ?? value),
+                    max: priceRange.max ?? priceBounds.max ?? value,
+                  });
+                }}
+                className="w-full"
+              />
+
+              <input
+                type="range"
+                min={priceBounds.min ?? 0}
+                max={priceBounds.max ?? 0}
+                value={priceRange.max ?? priceBounds.max ?? 0}
+                onChange={(e) => {
+                  const value = Number(e.target.value);
+                  setPriceRange({
+                    min: priceRange.min ?? priceBounds.min ?? value,
+                    max: Math.max(value, priceRange.min ?? priceBounds.min ?? value),
+                  });
+                }}
+                className="w-full"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Brand multi-select */}
+      <div>
+        <div className="mb-1.5 flex items-center justify-between">
+          <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
+            Brand
+          </span>
+          {brandFilter.length > 0 && (
+            <button
+              type="button"
+              onClick={() => setBrandFilter([])}
+              className="text-[10px] text-zinc-400 hover:text-zinc-200"
+            >
+              Clear
+            </button>
+          )}
+        </div>
+
+        {availableBrands.length === 0 ? (
+          <p className="text-[11px] text-zinc-500">No brands available yet.</p>
+        ) : (
+          <div className="max-h-56 space-y-1 overflow-y-auto pr-1">
+            {availableBrands.map((b) => {
+              const checked = brandFilter.includes(b);
+              return (
+                <label
+                  key={b}
+                  className="flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-[11px] text-zinc-200 hover:bg-zinc-900/80"
+                >
+                  <input
+                    type="checkbox"
+                    className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
+                    checked={checked}
+                    onChange={(e) => {
+                      setBrandFilter(
+                        e.target.checked
+                          ? [...brandFilter, b]
+                          : brandFilter.filter((x) => x !== b)
+                      );
+                    }}
+                  />
+                  <span className="truncate">{b}</span>
+                </label>
+              );
+            })}
+          </div>
+        )}
+
+        {brandFilter.length === 0 && availableBrands.length > 0 && (
+          <p className="mt-1 text-[10px] text-zinc-500">
+            No brands selected — showing all.
+          </p>
+        )}
+      </div>
+
+      {/* In-stock toggle */}
+      <div className="border-t border-zinc-800 pt-3">
+        <label className="flex cursor-pointer items-center justify-between text-[11px] text-zinc-200">
+          <span className="font-medium uppercase tracking-[0.12em] text-zinc-500">
+            In stock only
+          </span>
+          <input
+            type="checkbox"
+            className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
+            checked={inStockOnly}
+            onChange={(e) => setInStockOnly(e.target.checked)}
+          />
+        </label>
+        <p className="mt-1 text-[10px] text-zinc-500">
+          Hides items marked out of stock by the backend.
+        </p>
+      </div>
+    </aside>
+  );
+}

components/parts/OverlapChip.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+
+export default function OverlapChip(props: {
+  label: string;
+  tooltip?: string;
+  /** stable key so chip doesn't re-animate on trivial rerenders */
+  persistKey?: string;
+  className?: string;
+}) {
+  const { label, tooltip, persistKey, className } = props;
+
+  // Animate only once per persistKey per session
+  const storageKey = persistKey ? `bb_overlapchip_seen:${persistKey}` : null;
+
+  const [animateIn, setAnimateIn] = useState(false);
+  const tooltipId = useId();
+
+  useEffect(() => {
+    if (!storageKey) {
+      // No key provided: animate once on mount
+      setAnimateIn(true);
+      return;
+    }
+
+    try {
+      const seen = sessionStorage.getItem(storageKey);
+      if (!seen) {
+        sessionStorage.setItem(storageKey, "1");
+        setAnimateIn(true);
+      }
+    } catch {
+      // sessionStorage blocked — still animate
+      setAnimateIn(true);
+    }
+  }, [storageKey]);
+
+  return (
+    <span className={`inline-flex items-center ${className ?? ""}`}>
+      <span
+        className={[
+          "inline-flex items-center gap-1.5 rounded-full border border-amber-400/50 bg-amber-400/10 px-2 py-1",
+          "text-[0.7rem] font-medium text-amber-200",
+          "transition-all duration-300 ease-out",
+          animateIn ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1",
+        ].join(" ")}
+        aria-describedby={tooltip ? tooltipId : undefined}
+        title={tooltip}
+      >
+        <span aria-hidden="true" className="text-amber-300">
+          ⚠
+        </span>
+        <span>{label}</span>
+      </span>
+
+      {/* Optional: if you later want a real tooltip instead of title,
+          you can wire one here using tooltipId. */}
+      {tooltip ? <span id={tooltipId} className="sr-only">{tooltip}</span> : null}
+    </span>
+  );
+}

components/parts/Pagination.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+export default function Pagination(props: {
+  currentPage: number;
+  totalPages: number;
+  onPrev: () => void;
+  onNext: () => void;
+}) {
+  const { currentPage, totalPages, onPrev, onNext } = props;
+
+  return (
+    <div className="mt-4 flex items-center justify-between text-xs text-zinc-400">
+      <div>
+        Page{" "}
+        <span className="font-semibold text-zinc-200">{currentPage}</span>{" "}
+        of{" "}
+        <span className="font-semibold text-zinc-200">{totalPages}</span>
+      </div>
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={onPrev}
+          disabled={currentPage === 1}
+          className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
+        >
+          Previous
+        </button>
+        <button
+          type="button"
+          onClick={onNext}
+          disabled={currentPage === totalPages}
+          className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}

components/parts/PartsBrowseClient.tsx

@@ -0,0 +1,473 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+/**
+ * PartsBrowseClient
+ * -----------------------------------------------------------------------------
+ * Browse shell for parts listing pages.
+ * Owns:
+ * - fetching parts from backend
+ * - filter + sort + pagination state
+ * - layout + list/card views
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+import Filters from "@/components/parts/Filters";
+import SortBar from "@/components/parts/SortBar";
+import PartsGrid from "@/components/parts/PartsGrid";
+import Pagination from "@/components/parts/Pagination";
+import PlatformSwitcher from "@/components/parts/PlatformSwitcher";
+
+import type { CategoryId } from "@/types/gunbuilder";
+import {
+  PART_ROLE_TO_CATEGORY,
+  normalizePartRole,
+} from "@/lib/catalogMappings";
+
+type ViewMode = "card" | "list";
+type SortOption = "relevance" | "price-asc" | "price-desc" | "brand-asc";
+
+type GunbuilderProductFromApi = {
+  id: string | number;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  price: number | null;
+  mainImageUrl: string | null;
+  buyUrl: string | null;
+  inStock?: boolean | null;
+};
+
+type UiPart = {
+  id: string;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  price: number; // normalized
+  imageUrl?: string;
+  buyUrl?: string;
+  inStock?: boolean;
+};
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+const PAGE_SIZE = 24;
+
+function normalizeId(id: string | number) {
+  return typeof id === "number" ? String(id) : id;
+}
+
+function toSlug(s: string) {
+  return (s ?? "")
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9]+/g, "-")
+    .replaceAll(/(^-|-$)/g, "")
+    .trim();
+}
+
+/**
+ * Canonical product details route:
+ * /parts/p/[platform]/[partRole]/[productSlug]
+ */
+function buildDetailHref(platform: string, partRole: string, p: UiPart) {
+  const slug = toSlug(`${p.brand ?? ""} ${p.name ?? ""}`);
+  return `/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(
+    partRole
+  )}/${encodeURIComponent(`${p.id}-${slug}`)}`;
+}
+
+export default function PartsBrowseClient(props: {
+  partRole: string;
+  platform?: string | null; // if null, read from query param or default
+  title?: string;
+  subtitle?: string;
+}) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const effectivePlatform =
+    props.platform ?? searchParams.get("platform") ?? "AR-15";
+  const partRole = props.partRole;
+
+  const [viewMode, setViewMode] = useState<ViewMode>("list");
+  const [parts, setParts] = useState<UiPart[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [brandFilter, setBrandFilter] = useState<string[]>([]);
+  const [sortBy, setSortBy] = useState<SortOption>("relevance");
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [priceRange, setPriceRange] = useState<{
+    min: number | null;
+    max: number | null;
+  }>({
+    min: null,
+    max: null,
+  });
+  const [inStockOnly, setInStockOnly] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    if (!partRole) return;
+
+    const controller = new AbortController();
+
+    async function fetchParts() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const search = new URLSearchParams();
+        search.set("platform", effectivePlatform);
+        search.append("partRoles", partRole);
+
+        const url = `${API_BASE_URL}/api/v1/products?${search.toString()}`;
+        const res = await fetch(url, { signal: controller.signal });
+
+        if (!res.ok) throw new Error(`Failed to load products (${res.status})`);
+
+        const data: GunbuilderProductFromApi[] = await res.json();
+
+        const normalized: UiPart[] = data.map((p) => ({
+          id: normalizeId(p.id),
+          name: p.name,
+          brand: p.brand,
+          platform: p.platform,
+          partRole: p.partRole,
+          price: p.price ?? 0,
+          imageUrl: p.mainImageUrl ?? undefined,
+          buyUrl: p.buyUrl ?? undefined,
+          inStock: p.inStock ?? true,
+        }));
+
+        setParts(normalized);
+      } catch (err: any) {
+        if (err?.name === "AbortError") return;
+        setError(err?.message ?? "Failed to load products");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchParts();
+    return () => controller.abort();
+  }, [partRole, effectivePlatform]);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [
+    partRole,
+    effectivePlatform,
+    brandFilter,
+    sortBy,
+    searchQuery,
+    priceRange,
+    inStockOnly,
+  ]);
+
+  useEffect(() => {
+    // Reset scroll position whenever we land on or change parts routes
+    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
+  }, [pathname]);
+
+  const availableBrands = useMemo(
+    () =>
+      Array.from(new Set(parts.map((p) => p.brand)))
+        .filter(Boolean)
+        .sort((a, b) => a.localeCompare(b)),
+    [parts]
+  );
+
+  const priceBounds = useMemo(() => {
+    if (parts.length === 0)
+      return { min: null as number | null, max: null as number | null };
+
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+
+    for (const p of parts) {
+      const price = p.price ?? 0;
+      if (price < min) min = price;
+      if (price > max) max = price;
+    }
+
+    if (!Number.isFinite(min) || !Number.isFinite(max)) {
+      return { min: null as number | null, max: null as number | null };
+    }
+
+    return { min, max };
+  }, [parts]);
+
+  useEffect(() => {
+    if (priceBounds.min == null || priceBounds.max == null) return;
+
+    setPriceRange((prev) => {
+      const min = prev.min ?? priceBounds.min!;
+      const max = prev.max ?? priceBounds.max!;
+      return {
+        min: Math.max(priceBounds.min!, Math.min(min, priceBounds.max!)),
+        max: Math.min(priceBounds.max!, Math.max(max, priceBounds.min!)),
+      };
+    });
+  }, [priceBounds.min, priceBounds.max]);
+
+  const filteredParts = useMemo(() => {
+    let result = [...parts];
+
+    const effectiveMin = priceRange.min ?? priceBounds.min;
+    const effectiveMax = priceRange.max ?? priceBounds.max;
+    if (effectiveMin != null && effectiveMax != null) {
+      result = result.filter(
+        (p) => p.price >= effectiveMin && p.price <= effectiveMax
+      );
+    }
+
+    if (brandFilter.length > 0) {
+      result = result.filter((p) => brandFilter.includes(p.brand));
+    }
+
+    if (inStockOnly) {
+      result = result.filter((p) => p.inStock ?? true);
+    }
+
+    const q = searchQuery.trim().toLowerCase();
+    if (q) {
+      result = result.filter((p) => {
+        const name = (p.name ?? "").toLowerCase();
+        const brand = (p.brand ?? "").toLowerCase();
+        return name.includes(q) || brand.includes(q);
+      });
+    }
+
+    switch (sortBy) {
+      case "price-asc":
+        result.sort((a, b) => a.price - b.price);
+        break;
+      case "price-desc":
+        result.sort((a, b) => b.price - a.price);
+        break;
+      case "brand-asc":
+        result.sort((a, b) => a.brand.localeCompare(b.brand));
+        break;
+      case "relevance":
+      default:
+        break;
+    }
+
+    return result;
+  }, [
+    parts,
+    brandFilter,
+    sortBy,
+    searchQuery,
+    priceRange,
+    priceBounds.min,
+    priceBounds.max,
+    inStockOnly,
+  ]);
+
+  const totalPages = useMemo(
+    () =>
+      filteredParts.length === 0
+        ? 1
+        : Math.ceil(filteredParts.length / PAGE_SIZE),
+    [filteredParts.length]
+  );
+
+  const paginatedParts = useMemo(() => {
+    if (filteredParts.length === 0) return [];
+    const startIndex = (currentPage - 1) * PAGE_SIZE;
+    return filteredParts.slice(startIndex, startIndex + PAGE_SIZE);
+  }, [filteredParts, currentPage]);
+
+  const visibleRange = useMemo(() => {
+    if (filteredParts.length === 0) return { start: 0, end: 0 };
+    const start = (currentPage - 1) * PAGE_SIZE + 1;
+    const end = Math.min(
+      start + paginatedParts.length - 1,
+      filteredParts.length
+    );
+    return { start, end };
+  }, [filteredParts.length, currentPage, paginatedParts.length]);
+
+  const headingTitle = props.title ?? `${partRole.replaceAll("-", " ")} parts`;
+  const headingSubtitle =
+    props.subtitle ??
+    "Browse available parts pulled from your Ballistic backend.";
+
+  // ✅ Add-to-build handler: deep-links into builder’s existing ?select= logic
+  const handleAddToBuild = (p: UiPart) => {
+    const normalizedRole = normalizePartRole(partRole);
+    const categoryId: CategoryId | null =
+      PART_ROLE_TO_CATEGORY[partRole] ??
+      PART_ROLE_TO_CATEGORY[normalizedRole] ??
+      null;
+
+    if (!categoryId) {
+      alert(
+        `No CategoryId mapping found for role "${partRole}". Add it to catalogMappings.`
+      );
+      return;
+    }
+
+    const qp = new URLSearchParams();
+    qp.set("platform", effectivePlatform);
+    qp.set("select", `${categoryId}:${p.id}`);
+
+    router.push(`/builder?${qp.toString()}`);
+  };
+
+  return (
+    <main className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+        <header className="mb-6">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+                Battl Builders
+              </p>
+
+              <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
+                {headingTitle}{" "}
+                <span className="text-amber-300">{effectivePlatform}</span>
+              </h1>
+
+              <p className="mt-2 text-sm text-zinc-400 max-w-xl">
+                {headingSubtitle}
+              </p>
+
+              <div className="mt-3">
+                <PlatformSwitcher
+                  currentPlatform={effectivePlatform}
+                  partRole={partRole}
+                  preserveQuery
+                />
+              </div>
+            </div>
+
+            {!loading && !error && (
+              <div className="flex items-center gap-2">
+                <Link
+                  href={{
+                    pathname: "/builder",
+                    query: effectivePlatform
+                      ? { platform: effectivePlatform }
+                      : {},
+                  }}
+                  className="rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-2 text-xs font-semibold text-zinc-200 hover:bg-zinc-800"
+                >
+                  ← Back to Build
+                </Link>
+
+                {parts.length > 0 && (
+                  <div className="flex gap-2 border border-zinc-800 rounded-md p-1 bg-zinc-950/60">
+                    <button
+                      type="button"
+                      onClick={() => setViewMode("card")}
+                      className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
+                        viewMode === "card"
+                          ? "bg-zinc-800 text-zinc-50"
+                          : "text-zinc-400 hover:text-zinc-300"
+                      }`}
+                    >
+                      Card
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setViewMode("list")}
+                      className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
+                        viewMode === "list"
+                          ? "bg-zinc-800 text-zinc-50"
+                          : "text-zinc-400 hover:text-zinc-300"
+                      }`}
+                    >
+                      List
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </header>
+
+        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
+          <div className="flex flex-col gap-4 md:flex-row">
+            {!loading && !error && parts.length > 0 && (
+              <aside className="w-full md:w-64 shrink-0">
+                <Filters
+                  partRoleLabel={partRole}
+                  availableBrands={availableBrands}
+                  brandFilter={brandFilter}
+                  setBrandFilter={setBrandFilter}
+                  priceBounds={priceBounds}
+                  priceRange={priceRange}
+                  setPriceRange={setPriceRange}
+                  inStockOnly={inStockOnly}
+                  setInStockOnly={setInStockOnly}
+                />
+              </aside>
+            )}
+
+            <div className="flex-1">
+              {!loading && !error && parts.length > 0 && (
+                <SortBar
+                  visibleRange={visibleRange}
+                  totalCount={filteredParts.length}
+                  searchQuery={searchQuery}
+                  setSearchQuery={setSearchQuery}
+                  sortBy={sortBy}
+                  setSortBy={setSortBy}
+                />
+              )}
+
+              {loading ? (
+                <p className="py-8 text-center text-sm text-zinc-500">
+                  Loading…
+                </p>
+              ) : error ? (
+                <p className="py-8 text-center text-sm text-red-400">
+                  {error} — check that the Ballistic API is running.
+                </p>
+              ) : filteredParts.length === 0 ? (
+                <p className="py-8 text-center text-sm text-zinc-500">
+                  No parts found for this role yet.
+                </p>
+              ) : (
+                <PartsGrid
+                  viewMode={viewMode}
+                  parts={paginatedParts}
+                  buildDetailHref={(p) =>
+                    buildDetailHref(effectivePlatform, partRole, p)
+                  }
+                  onAddToBuild={handleAddToBuild}
+                  addLabel="Add to Build"
+                />
+              )}
+
+              {!loading &&
+                !error &&
+                filteredParts.length > 0 &&
+                totalPages > 1 && (
+                  <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    onPrev={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                    onNext={() =>
+                      setCurrentPage((p) => Math.min(totalPages, p + 1))
+                    }
+                  />
+                )}
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

components/parts/PartsGrid.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import Link from "next/link";
+
+type UiPart = {
+  id: string;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  price: number;
+  imageUrl?: string;
+  buyUrl?: string;
+  inStock?: boolean;
+};
+
+export default function PartsGrid(props: {
+  viewMode: "card" | "list";
+  parts: UiPart[];
+  buildDetailHref: (p: UiPart) => string;
+
+  onAddToBuild?: (p: UiPart) => void;
+  addLabel?: string;
+}) {
+  const { viewMode, parts, buildDetailHref, onAddToBuild } = props;
+  const addLabel = props.addLabel ?? "Add to Build";
+
+  if (viewMode === "card") {
+    return (
+      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+        {parts.map((part) => (
+          <div
+            key={part.id}
+            className="group relative flex flex-col rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
+          >
+            <div className="mb-3 flex items-center justify-between gap-2">
+              <div className="min-w-0">
+                <div className="truncate text-sm font-semibold text-zinc-50">
+                  {part.brand} <span className="font-normal">— {part.name}</span>
+                </div>
+              </div>
+
+              <div className="whitespace-nowrap text-sm font-semibold text-amber-300">
+                ${part.price.toFixed(2)}
+              </div>
+            </div>
+
+            <div className="mt-2 flex gap-2">
+              <Link
+                href={buildDetailHref(part)}
+                className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 hover:border-zinc-600 hover:bg-zinc-700"
+              >
+                View Details
+              </Link>
+
+              {onAddToBuild ? (
+                <button
+                  type="button"
+                  onClick={() => onAddToBuild(part)}
+                  className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
+                >
+                  {addLabel}
+                </button>
+              ) : part.buyUrl ? (
+                <a
+                  href={part.buyUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
+                >
+                  Buy
+                </a>
+              ) : (
+                <button
+                  disabled
+                  className="flex-1 rounded-md bg-zinc-700 px-3 py-2 text-center text-xs font-semibold text-zinc-200 opacity-50"
+                >
+                  No Action
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // LIST view
+  return (
+    <>
+      {/* Header (DESKTOP ONLY) */}
+      <div className="hidden md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_260px] md:items-center md:gap-4 px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500">        <span className="min-w-0">Part</span>
+        <span className="min-w-0">Brand</span>
+        <span className="text-right">Price</span>
+        <span className="text-right">Actions</span>
+      </div>
+
+      {/* Rows */}
+      <div className="space-y-2">
+        {parts.map((part) => (
+          <div
+            key={part.id}
+            className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
+          >
+            <div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_260px] md:items-center md:gap-4">
+              {/* Part */}
+              <div className="min-w-0">
+                <div className="truncate text-sm font-semibold text-zinc-50">
+                  {part.name}
+                </div>
+              </div>
+
+              {/* Brand */}
+              <div className="min-w-0 text-xs text-zinc-400 md:text-sm">
+                {part.brand}
+              </div>
+
+              {/* Price */}
+              <div className="text-sm font-semibold text-amber-300 md:text-right">
+                ${part.price.toFixed(2)}
+              </div>
+
+              {/* Actions */}
+              <div className="flex justify-end gap-2">
+                <Link
+                  href={buildDetailHref(part)}
+                  className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:border-zinc-600 hover:bg-zinc-700"
+                >
+                  View Details
+                </Link>
+
+                {onAddToBuild ? (
+                  <button
+                    type="button"
+                    onClick={() => onAddToBuild(part)}
+                    className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
+                  >
+                    {addLabel}
+                  </button>
+                ) : part.buyUrl ? (
+                  <a
+                    href={part.buyUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
+                  >
+                    Buy
+                  </a>
+                ) : (
+                  <button
+                    disabled
+                    className="whitespace-nowrap rounded-md bg-zinc-700 px-3 py-1.5 text-xs font-semibold text-zinc-200 opacity-50"
+                  >
+                    No Action
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

components/parts/PartsListPageClient.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import PlatformSwitcher from "./PlatformSwitcher";
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+type ProductListDto = {
+  id: string;          // your API returns strings sometimes; keep it flexible
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  categoryKey: string | null;
+  price: number | null;
+  buyUrl: string | null;
+  imageUrl: string | null;
+};
+
+function safeSlugify(input: string) {
+  return (input ?? "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "")
+    .slice(0, 80);
+}
+
+export default function PartsListPageClient(props: {
+  platform: string;
+  partRole: string;
+}) {
+  const { platform, partRole } = props;
+
+  const [items, setItems] = useState<ProductListDto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Simple client-side search (fast + good enough for now)
+  const [q, setQ] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Your current list endpoint:
+        // GET /api/v1/products?platform=AR-15&partRoles=upper-receiver
+        const url = `${API_BASE_URL}/api/v1/products?platform=${encodeURIComponent(platform)}&partRoles=${encodeURIComponent(partRole)}`;
+
+        const res = await fetch(url, { headers: { Accept: "application/json" } });
+        if (!res.ok) {
+          const txt = await res.text().catch(() => "");
+          throw new Error(`Failed to load products (${res.status}): ${txt}`);
+        }
+
+        const data: ProductListDto[] = await res.json();
+        if (!cancelled) setItems(data);
+      } catch (e: any) {
+        if (!cancelled) setError(e?.message ?? "Failed to load products");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    load();
+    return () => { cancelled = true; };
+  }, [platform, partRole]);
+
+  const filtered = useMemo(() => {
+    const needle = q.trim().toLowerCase();
+    if (!needle) return items;
+
+    return items.filter((p) => {
+      const blob = `${p.brand ?? ""} ${p.name ?? ""} ${p.categoryKey ?? ""}`.toLowerCase();
+      return blob.includes(needle);
+    });
+  }, [items, q]);
+
+  return (
+    <main className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+        <header className="mb-6 flex flex-col gap-3">
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+                Battl Builders
+              </p>
+              <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
+                Parts: <span className="text-amber-300">{partRole}</span>
+              </h1>
+            </div>
+
+            <PlatformSwitcher currentPlatform={platform} partRole={partRole} />
+          </div>
+
+          <div className="flex items-center gap-3">
+            <input
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Search brand, name, category…"
+              className="w-full rounded-md border border-zinc-700 bg-zinc-950/80 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-amber-400"
+            />
+          </div>
+        </header>
+
+        {loading && <p className="text-sm text-zinc-500">Loading parts…</p>}
+        {error && (
+          <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && (
+          <section className="rounded-lg border border-zinc-800 bg-zinc-950/70 p-3 md:p-4">
+            <div className="mb-2 flex items-center justify-between">
+              <p className="text-xs uppercase tracking-[0.14em] text-zinc-500">
+                Results
+              </p>
+              <p className="text-xs text-zinc-400">
+                {filtered.length} items
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+              {filtered.map((p) => {
+                const id = String(p.id);
+                const slug = safeSlugify(p.name);
+                const href = `/parts/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}/${id}-${slug}`;
+
+                return (
+                  <Link
+                    key={`${p.id}`}
+                    href={href}
+                    className="group rounded-lg border border-zinc-800 bg-black/30 p-3 hover:border-zinc-700"
+                  >
+                    <div className="flex gap-3">
+                      <div className="h-16 w-16 overflow-hidden rounded-md border border-zinc-800 bg-zinc-950">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        {p.imageUrl ? (
+                          <img src={p.imageUrl} alt={p.name} className="h-full w-full object-cover" />
+                        ) : (
+                          <div className="h-full w-full grid place-items-center text-xs text-zinc-600">
+                            —
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="flex-1">
+                        <p className="text-xs uppercase tracking-[0.14em] text-zinc-500">
+                          {p.brand}
+                        </p>
+                        <p className="mt-1 text-sm font-medium text-zinc-100 group-hover:text-amber-200">
+                          {p.name}
+                        </p>
+                        <div className="mt-2 flex items-center justify-between">
+                          <p className="text-xs text-zinc-500 line-clamp-1">
+                            {p.categoryKey ?? "—"}
+                          </p>
+                          <p className="text-xs font-semibold text-zinc-200">
+                            {typeof p.price === "number" ? `$${p.price.toFixed(2)}` : "—"}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </section>
+        )}
+      </div>
+    </main>
+  );
+}

components/parts/PlatformSwitcher.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useMemo } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+/**
+ * PlatformSwitcher
+ *
+ * Works on BOTH:
+ * - /parts/[partRole] (default browse route)
+ * - /parts/[platform]/[partRole] (canonical route)
+ *
+ * Behavior:
+ * - If you're on /parts/[partRole], switching platform navigates to /parts/[platform]/[partRole]
+ *   (so your URL becomes explicit/shareable).
+ * - If you're already on /parts/[platform]/[partRole], it swaps the platform segment.
+ */
+export default function PlatformSwitcher(props: {
+  currentPlatform: string;
+  partRole: string;
+  // If true, we keep query params when switching (nice for sort/paging)
+  preserveQuery?: boolean;
+}) {
+  const { currentPlatform, partRole, preserveQuery = true } = props;
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const queryString = useMemo(() => {
+    if (!preserveQuery) return "";
+    const q = searchParams?.toString();
+    return q ? `?${q}` : "";
+  }, [searchParams, preserveQuery]);
+
+  function go(platform: string) {
+    // We always navigate to canonical to keep it simple & consistent
+    router.push(`/parts/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}${queryString}`);
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-xs uppercase tracking-[0.14em] text-zinc-500">Platform</span>
+      <select
+        value={currentPlatform}
+        onChange={(e) => go(e.target.value)}
+        className="rounded-md border border-zinc-700 bg-zinc-950/80 px-2 py-1 text-xs text-zinc-100 outline-none focus:border-amber-400"
+      >
+        <option value="AR-15">AR-15</option>
+        <option value="AR-10">AR-10</option>
+        <option value="AR-9">AR-9</option>
+        <option value="AK-47">AK-47</option>
+      </select>
+
+      <span className="ml-2 text-[0.7rem] text-zinc-500">
+        {pathname}
+      </span>
+    </div>
+  );
+}

components/parts/ProductDetailPageClient.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import PlatformSwitcher from "./PlatformSwitcher";
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+type ProductDetailDto = {
+  id: string;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  categoryKey: string | null;
+  price: number | null;
+  buyUrl: string | null;
+  imageUrl: string | null;
+};
+
+function parseIdFromProductSlug(productSlug: string): string | null {
+  // Expected: "1217-some-slug"
+  const m = /^(\d+)(?:-|$)/.exec(productSlug ?? "");
+  return m?.[1] ?? null;
+}
+
+/**
+ * Attempts to fetch a product detail.
+ * If you don't have a dedicated endpoint yet, it falls back to list + filter by id.
+ */
+async function fetchProductDetail(params: {
+  platform: string;
+  partRole: string;
+  productSlug: string;
+}): Promise<ProductDetailDto> {
+  const { platform, partRole, productSlug } = params;
+  const id = parseIdFromProductSlug(productSlug);
+
+  if (!id) throw new Error(`Invalid product URL slug: '${productSlug}' (could not parse id)`);
+
+  // ---- Preferred (if you add it): GET /api/v1/products/{id}
+  // If it 404s, we fall back.
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/v1/products/${encodeURIComponent(id)}`, {
+      headers: { Accept: "application/json" },
+    });
+
+    if (res.ok) {
+      return await res.json();
+    }
+  } catch {
+    // ignore and fall back
+  }
+
+  // ---- Fallback: use list endpoint + find by id (works right now with your current API)
+  const listRes = await fetch(
+    `${API_BASE_URL}/api/v1/products?platform=${encodeURIComponent(platform)}&partRoles=${encodeURIComponent(partRole)}`,
+    { headers: { Accept: "application/json" } }
+  );
+
+  if (!listRes.ok) {
+    const txt = await listRes.text().catch(() => "");
+    throw new Error(`Failed to load product (fallback) (${listRes.status}): ${txt}`);
+  }
+
+  const list: ProductDetailDto[] = await listRes.json();
+  const found = list.find((p) => String(p.id) === String(id));
+
+  if (!found) {
+    throw new Error(`Product id=${id} not found in ${platform}/${partRole} list`);
+  }
+
+  return found;
+}
+
+export default function ProductDetailPageClient(props: {
+  platform: string;
+  partRole: string;
+  productSlug: string;
+}) {
+  const { platform, partRole, productSlug } = props;
+
+  const [p, setP] = useState<ProductDetailDto | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const id = useMemo(() => parseIdFromProductSlug(productSlug), [productSlug]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const data = await fetchProductDetail({ platform, partRole, productSlug });
+
+        if (!cancelled) setP(data);
+      } catch (e: any) {
+        if (!cancelled) setError(e?.message ?? "Failed to load product");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    load();
+    return () => { cancelled = true; };
+  }, [platform, partRole, productSlug]);
+
+  return (
+    <main className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto max-w-5xl px-4 py-6 lg:py-10">
+        <header className="mb-6 flex flex-col gap-3">
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
+                Battl Builders
+              </p>
+              <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
+                Part: <span className="text-amber-300">{partRole}</span>
+              </h1>
+            </div>
+
+            <PlatformSwitcher currentPlatform={platform} partRole={partRole} />
+          </div>
+
+          <div className="flex items-center gap-2 text-xs text-zinc-500">
+            <Link className="hover:text-amber-200" href={`/parts/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}`}>
+              ← Back to list
+            </Link>
+            <span>•</span>
+            <span>id: {id ?? "—"}</span>
+          </div>
+        </header>
+
+        {loading && <p className="text-sm text-zinc-500">Loading product…</p>}
+
+        {error && (
+          <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && p && (
+          <section className="rounded-lg border border-zinc-800 bg-zinc-950/70 p-4 md:p-6">
+            <div className="flex flex-col gap-6 md:flex-row">
+              <div className="w-full md:w-72">
+                <div className="aspect-square overflow-hidden rounded-lg border border-zinc-800 bg-black/30">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  {p.imageUrl ? (
+                    <img src={p.imageUrl} alt={p.name} className="h-full w-full object-cover" />
+                  ) : (
+                    <div className="h-full w-full grid place-items-center text-sm text-zinc-600">
+                      No image
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex-1">
+                <p className="text-xs uppercase tracking-[0.14em] text-zinc-500">
+                  {p.brand} • {p.platform}
+                </p>
+                <h2 className="mt-2 text-xl md:text-2xl font-semibold text-zinc-100">
+                  {p.name}
+                </h2>
+
+                <div className="mt-4 grid grid-cols-1 gap-3 text-sm">
+                  <div className="rounded-md border border-zinc-800 bg-black/30 p-3">
+                    <p className="text-xs uppercase tracking-[0.14em] text-zinc-500">Category</p>
+                    <p className="mt-1 text-zinc-200">{p.categoryKey ?? "—"}</p>
+                  </div>
+
+                  <div className="rounded-md border border-zinc-800 bg-black/30 p-3">
+                    <p className="text-xs uppercase tracking-[0.14em] text-zinc-500">Best price</p>
+                    <p className="mt-1 text-zinc-200">
+                      {typeof p.price === "number" ? `$${p.price.toFixed(2)}` : "—"}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="mt-5 flex items-center gap-3">
+                  {p.buyUrl ? (
+                    <a
+                      href={p.buyUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="rounded-md bg-amber-400 px-4 py-2 text-sm font-semibold text-black hover:bg-amber-300"
+                    >
+                      Buy / View offer
+                    </a>
+                  ) : (
+                    <span className="text-sm text-zinc-500">No buy link</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </section>
+        )}
+      </div>
+    </main>
+  );
+}

components/parts/SortBar.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+type SortOption = "relevance" | "price-asc" | "price-desc" | "brand-asc";
+
+export default function SortBar(props: {
+  visibleRange: { start: number; end: number };
+  totalCount: number;
+
+  searchQuery: string;
+  setSearchQuery: (v: string) => void;
+
+  sortBy: SortOption;
+  setSortBy: (v: SortOption) => void;
+}) {
+  const { visibleRange, totalCount, searchQuery, setSearchQuery, sortBy, setSortBy } = props;
+
+  return (
+    <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+      <div className="text-xs text-zinc-500">
+        Showing{" "}
+        <span className="font-medium text-zinc-200">
+          {visibleRange.start}-{visibleRange.end}
+        </span>{" "}
+        of{" "}
+        <span className="font-medium text-zinc-200">
+          {totalCount}
+        </span>{" "}
+        matching parts
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <div className="flex items-center gap-2">
+          <label htmlFor="part-search" className="text-xs text-zinc-500">
+            Search
+          </label>
+          <div className="relative">
+            <input
+              id="part-search"
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search..."
+              className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 pr-6 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => setSearchQuery("")}
+                className="absolute right-1 top-1/2 -translate-y-1/2 text-xs leading-none text-zinc-500 hover:text-zinc-300"
+                aria-label="Clear search"
+              >
+                ×
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <label htmlFor="sort-by" className="text-xs text-zinc-500">
+            Sort
+          </label>
+          <select
+            id="sort-by"
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as SortOption)}
+            className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+          >
+            <option value="relevance">Relevance</option>
+            <option value="price-asc">Price: Low → High</option>
+            <option value="price-desc">Price: High → Low</option>
+            <option value="brand-asc">Brand: A → Z</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/RichTextEditor.tsx

@@ -0,0 +1,47 @@
+"use client";
+import QuillImageResize from "quill-image-resize-module";
+Quill.register("modules/imageResize", QuillImageResize);
+import dynamic from "next/dynamic";
+import type React from "react";
+
+import "react-quill/dist/quill.snow.css";
+
+const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
+
+type RichTextEditorProps = {
+    value: string;
+    onChange: (html: string) => void;
+    placeholder?: string;
+    className?: string;
+};
+
+export default function RichTextEditor({
+                                           value,
+                                           onChange,
+                                           placeholder,
+                                           className,
+                                       }: RichTextEditorProps) {
+    return (
+        <div className={className}>
+            <div className="bb-quill">
+                <ReactQuill
+                    theme="snow"
+                    value={value}
+                    onChange={onChange}
+                    placeholder={placeholder}
+                    modules={{
+                        toolbar: [
+                            [{ header: [1, 2, 3, false] }],
+                            ["bold", "italic", "underline", "strike"],
+                            [{ color: [] }, { background: [] }],
+                            [{ list: "ordered" }, { list: "bullet" }],
+                            ["blockquote", "code-block"],
+                            ["link"],
+                            ["clean"],
+                        ],
+                    }}
+                />
+            </div>
+        </div>
+    );
+}

components/ui/form.tsx

@@ -0,0 +1,72 @@
+// components/ui/form.tsx
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+export const labelClass = "text-xs font-medium text-zinc-400";
+
+export const inputBaseClass =
+  "w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 " +
+  "placeholder:text-zinc-500 focus:outline-none focus:ring-1 focus:ring-amber-400";
+
+export const buttonBaseClass =
+  "w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 " +
+  "hover:bg-amber-400/30 disabled:cursor-not-allowed disabled:opacity-50 transition-colors";
+
+export const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(function Input({ className, ...props }, ref) {
+  return <input ref={ref} className={cn(inputBaseClass, className)} {...props} />;
+});
+
+export const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(function Textarea({ className, ...props }, ref) {
+  return (
+    <textarea ref={ref} className={cn(inputBaseClass, className)} {...props} />
+  );
+});
+
+export function Button({
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button className={cn(buttonBaseClass, className)} {...props} />;
+}
+
+type FieldProps = {
+  label: string;
+  htmlFor: string;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function Field({
+  label,
+  htmlFor,
+  hint,
+  error,
+  className,
+  children,
+}: FieldProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <label className={labelClass} htmlFor={htmlFor}>
+        {label}
+      </label>
+
+      {children}
+
+      {error ? (
+        <p className="text-xs text-red-300">{error}</p>
+      ) : hint ? (
+        <p className="text-xs text-zinc-500">{hint}</p>
+      ) : null}
+    </div>
+  );
+}

components/ui/send_email_form.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { sendEmailAction, type ApiResponse, type EmailRequest } from "/app/actions/sendEmail";
+import { Button, Field, Input } from "@/components/ui/form";
+import RichTextEditor from "@/components/ui/RichTextEditor";
+
+export default function SendEmailForm(): JSX.Element {
+  const [result, setResult] = useState<
+    ApiResponse<EmailRequest> | { error: string } | null
+  >(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const [showSuccess, setShowSuccess] = useState(false);
+  const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [bodyHtml, setBodyHtml] = useState<string>("");
+
+  useEffect(() => {
+    return () => {
+      if (successTimerRef.current) clearTimeout(successTimerRef.current);
+    };
+  }, []);
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
+    e.preventDefault();
+    setResult(null);
+
+    setShowSuccess(false);
+    if (successTimerRef.current) clearTimeout(successTimerRef.current);
+
+    const form = new FormData(e.currentTarget);
+
+    const recipient = String(form.get("recipient") ?? "");
+    const subject = String(form.get("subject") ?? "");
+    const body = String(form.get("body") ?? ""); // HTML from hidden input
+
+    try {
+      setSubmitting(true);
+      const data = await sendEmailAction({ recipient, subject, body });
+      setResult(data);
+
+      if (data?.success === true) {
+        setShowSuccess(true);
+
+        successTimerRef.current = setTimeout(() => {
+          setShowSuccess(false);
+          setResult(null);
+        }, 2000);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setResult({ error: message });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-xl px-4 py-10 text-zinc-50">
+      <h1 className="text-2xl font-semibold tracking-tight">
+        Send <span className="text-amber-300">Email</span>
+      </h1>
+      <p className="mt-2 text-sm text-zinc-400">
+        Compose a message and send it from the admin panel.
+      </p>
+
+      <form onSubmit={onSubmit} className="mt-6 space-y-4">
+        {result && "error" in result && (
+          <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+            {result.error}
+          </div>
+        )}
+
+        <Field label="Recipient" htmlFor="recipient">
+          <Input
+            id="recipient"
+            name="recipient"
+            type="email"
+            placeholder="user@example.com"
+            defaultValue="user@example.com"
+            required
+          />
+        </Field>
+
+        <Field label="Subject" htmlFor="subject">
+          <Input
+            id="subject"
+            name="subject"
+            placeholder="Subject…"
+            defaultValue="Test subject"
+            required
+          />
+        </Field>
+
+        <Field
+          label="Body"
+          htmlFor="body"
+          hint="This will be sent as HTML."
+        >
+          {/* Hidden field so your existing FormData submit keeps working */}
+          <input type="hidden" id="body" name="body" value={bodyHtml} />
+
+          <RichTextEditor
+            value={bodyHtml}
+            onChange={setBodyHtml}
+            placeholder="Write your message…"
+            className="rounded-md border border-zinc-800 bg-zinc-950/60"
+          />
+        </Field>
+
+        <Button type="submit" disabled={submitting}>
+          {submitting ? "Sending…" : showSuccess ? "Success" : "Send"}
+        </Button>
+
+        <div className="rounded-md border border-zinc-800 bg-zinc-950/60 p-3">
+          <div className="text-xs font-medium text-zinc-400">Response</div>
+          <pre className="mt-2 overflow-x-auto text-xs text-zinc-200">
+            {result ? JSON.stringify(result, null, 2) : "No response yet."}
+          </pre>
+        </div>
+      </form>
+    </div>
+  );
+}

context/AuthContext.tsx

@@ -85,7 +85,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     async ({ email, password }: { email: string; password: string }) => {
       setLoading(true);
       try {
-        const res = await fetch(`${API_BASE_URL}/auth/login`, {
+        const res = await fetch(`${API_BASE_URL}/api/auth/login`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ email, password }),
@@ -130,7 +130,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }) => {
       setLoading(true);
       try {
-        const res = await fetch(`${API_BASE_URL}/auth/register`, {
+        const res = await fetch(`${API_BASE_URL}/api/auth/register`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ email, password, displayName }),

data/gunbuilderParts.ts

@@ -1,163 +1,62 @@
-import type { Category, Part } from "@/types/gunbuilder";
+import type { Category } from "@/types/gunbuilder";
+import { CATEGORY_SLUGS } from "@/types/gunbuilder";
 
 export const CATEGORIES: Category[] = [
-  // LOWER
+  // Lower group
   {
-    id: "lower",
+    id: "lower-receiver",
-    name: "Stripped Lowers",
+    name: "Stripped Lower",
-    description: "Serialized lower – the foundation of the build.",
     group: "lower",
+    slug: CATEGORY_SLUGS["lower-receiver"],
   },
   {
-    id: "completeLower",
+    id: "complete-lower",
-    name: "Complete Lowers",
+    name: "Complete Lower",
-    description: "Factory-built lower with stock, buffer system, and controls.",
     group: "lower",
+    slug: CATEGORY_SLUGS["complete-lower"],
   },
   {
-    id: "lowerParts",
+    id: "lower-parts",
-    name: "Lower Parts Kits",
+    name: "Lower Parts Kit",
-    description: "Pins, springs, and controls for the lower.",
-    group: "lower",
-  },
-  {
-    id: "trigger",
-    name: "Trigger / Fire Control",
-    description: "Single-stage, two-stage, and match triggers.",
-    group: "lower",
-  },
-  {
-    id: "grip",
-    name: "Pistol Grip",
-    description: "Grips that shape how the rifle handles.",
-    group: "lower",
-  },
-  {
-    id: "safety",
-    name: "Safety / Selector",
-    description: "Ambi selectors and control upgrades.",
-    group: "lower",
-  },
-  {
-    id: "buffer",
-    name: "Buffer System",
-    description: "Buffer tube, buffer, spring, and related parts.",
-    group: "lower",
-  },
-  {
-    id: "stock",
-    name: "Stock / Brace",
-    description: "Adjustable, fixed, and minimalist stocks.",
     group: "lower",
+    slug: CATEGORY_SLUGS["lower-parts"],
   },
+  { id: "trigger", name: "Trigger / Fire Control", group: "lower", slug: CATEGORY_SLUGS.trigger },
+  { id: "grip", name: "Pistol Grip", group: "lower", slug: CATEGORY_SLUGS.grip },
+  { id: "safety", name: "Safety / Selector", group: "lower", slug: CATEGORY_SLUGS.safety },
+  { id: "buffer", name: "Buffer System", group: "lower", slug: CATEGORY_SLUGS.buffer },
+  { id: "stock", name: "Stock / Brace", group: "lower", slug: CATEGORY_SLUGS.stock },
 
-  // UPPER
+  // Upper group
   {
-    id: "upper",
+    id: "upper-receiver",
-    name: "Stripped Uppers",
+    name: "Stripped Upper",
-    description: "The core of the top half of your build.",
     group: "upper",
+    slug: CATEGORY_SLUGS["upper-receiver"],
   },
   {
-    id: "completeUpper",
+    id: "complete-upper",
-    name: "Complete Uppers",
+    name: "Complete Upper",
-    description: "Pre-assembled uppers ready to pin and shoot.",
     group: "upper",
+    slug: CATEGORY_SLUGS["complete-upper"],
   },
-  {
+  { id: "barrel", name: "Barrels", group: "upper", slug: CATEGORY_SLUGS.barrel },
-    id: "bcg",
+  { id: "handguard", name: "Handguards / Rails", group: "upper", slug: CATEGORY_SLUGS.handguard },
-    name: "Bolt Carriers",
+  { id: "gas-block", name: "Gas Block", group: "upper", slug: CATEGORY_SLUGS["gas-block"] },
-    description: "The heartbeat of the rifle’s cycling.",
+  { id: "gas-tube", name: "Gas Tube", group: "upper", slug: CATEGORY_SLUGS["gas-tube"] },
-    group: "upper",
+  { id: "muzzle-device", name: "Muzzle Device", group: "upper", slug: CATEGORY_SLUGS["muzzle-device"] },
-  },
+  { id: "sights", name: "Iron Sights", group: "upper", slug: CATEGORY_SLUGS.sights },
-  {
+  { id: "bcg", name: "Bolt Carrier Group", group: "upper", slug: CATEGORY_SLUGS.bcg },
-    id: "barrel",
+  { id: "charging-handle", name: "Charging Handle", group: "upper", slug: CATEGORY_SLUGS["charging-handle"] },
-    name: "Barrels",
+  { id: "suppressor", name: "Suppressors", group: "upper", slug: CATEGORY_SLUGS.suppressor },
-    description: "Different lengths, profiles, and calibers.",
+  { id: "optic", name: "Optics", group: "upper", slug: CATEGORY_SLUGS.optic },
-    group: "upper",
+
-  },
+  // Accessories (platform-agnostic)
-  {
+  { id: "magazine", name: "Magazines", group: "accessories", slug: CATEGORY_SLUGS.magazine },
-    id: "gasBlock",
+  { id: "weapon-light", name: "Weapon Lights & Lasers", group: "accessories", slug: CATEGORY_SLUGS["weapon-light"] },
-    name: "Gas Blocks",
+  { id: "foregrip", name: "Vertical / Angled Grips", group: "accessories", slug: CATEGORY_SLUGS.foregrip },
-    description: "Standard and adjustable gas blocks.",
+  { id: "bipod", name: "Bipods", group: "accessories", slug: CATEGORY_SLUGS.bipod },
-    group: "upper",
+  { id: "sling", name: "Slings & Mounts", group: "accessories", slug: CATEGORY_SLUGS.sling },
-  },
+  { id: "rail-accessory", name: "Rail Accessories", group: "accessories", slug: CATEGORY_SLUGS["rail-accessory"] },
-  {
+  { id: "tools", name: "Tools & Maintenance", group: "accessories", slug: CATEGORY_SLUGS.tools },
-    id: "gasTube",
+];
-    name: "Gas Tubes",
-    description: "Carbine, mid, rifle, and more.",
-    group: "upper",
-  },
-  {
-    id: "muzzleDevice",
-    name: "Muzzle Devices",
-    description: "Brakes, comps, and flash hiders.",
-    group: "upper",
-  },
-  {
-    id: "suppressor",
-    name: "Suppressors",
-    description: "Hearing-safe setups and hosts.",
-    group: "upper",
-  },
-  {
-    id: "handguard",
-    name: "Handguards / Rails",
-    description: "M-LOK rails and front-end furniture.",
-    group: "upper",
-  },
-  {
-    id: "chargingHandle",
-    name: "Charging Handles",
-    description: "Standard and ambi charging handles.",
-    group: "upper",
-  },
-  {
-    id: "sights",
-    name: "Iron Sights",
-    description: "Backup and primary irons.",
-    group: "upper",
-  },
-  {
-    id: "optic",
-    name: "Optics",
-    description: "LPVOs, red dots, and magnifiers.",
-    group: "upper",
-  },
-  // ACCESSORIES GROUP
-  {
-    id: "magazine",
-    name: "Magazines",
-    group: "accessories",
-  },
-  {
-    id: "weaponLight",
-    name: "Weapon Lights & Lasers",
-    group: "accessories",
-  },
-  {
-    id: "foregrip",
-    name: "Vertical / Angled Grips",
-    group: "accessories",
-  },
-  {
-    id: "bipod",
-    name: "Bipods",
-    group: "accessories",
-  },
-  {
-    id: "sling",
-    name: "Slings & Mounts",
-    group: "accessories",
-  },
-  {
-    id: "railAccessory",
-    name: "Rail Sections & Covers",
-    group: "accessories",
-  },
-  {
-    id: "tools",
-    name: "Tools & Maintenance",
-    group: "accessories",
-  },
-];

data/partRoleMappings.ts

@@ -1,102 +0,0 @@
-import type { CategoryId } from "@/types/gunbuilder";
-
-// CategoryId -> partRoles
-export const CATEGORY_TO_PART_ROLES: Record<CategoryId, string[]> = {
-  // CORE / EXISTING
-  upper: ["upper-receiver"],
-  barrel: ["barrel"],
-  handguard: ["handguard"],
-  chargingHandle: ["charging-handle"],
-  buffer: ["buffer-kit"],
-  lowerParts: ["lower-parts-kit"],
-  sights: ["sight"],
-  lower: ["LOWER_RECEIVER_STRIPPED"],
-  optic: ["optic"],
-  stock: ["stock"],
-
-  // NEW LOWER PARTS
-  trigger: ["trigger", "trigger-kit"],
-  grip: ["pistol-grip", "grip"],
-  safety: ["safety", "safety-selector"],
-  completeLower: ["complete-lower"],
-
-  // NEW UPPER PARTS
-  completeUpper: ["complete-upper"],
-  bcg: ["bcg", "bolt-carrier-group"],
-  gasBlock: ["gas-block"],
-  gasTube: ["gas-tube"],
-  muzzleDevice: ["muzzle-device", "compensator", "brake"],
-  suppressor: ["suppressor"],
-
-  // ===== ACCESSORIES =====
-
-  // Magazines
-  magazine: [
-    "magazine",
-    "mag",
-    "magazine-ar15",
-    "magazine-308",
-    "drum-magazine",
-  ],
-
-  // Lights / Lasers
-  weaponLight: [
-    "weapon-light",
-    "light",
-    "weapon-light-laser",
-    "light-laser-combo",
-    "laser",
-  ],
-
-  // Foregrips
-  foregrip: [
-    "vertical-grip",
-    "angled-foregrip",
-    "foregrip",
-    "handstop",
-  ],
-
-  // Bipods
-  bipod: [
-    "bipod",
-  ],
-
-  // Slings & mounts
-  sling: [
-    "sling",
-    "sling-mount",
-    "sling-swivel",
-    "qd-sling-mount",
-  ],
-
-  // Rail sections & covers
-  railAccessory: [
-    "rail-section",
-    "picatinny-rail-section",
-    "m-lok-rail-section",
-    "keymod-rail-section",
-    "rail-cover",
-    "rail-panel",
-  ],
-
-  // Tools & maintenance
-  tools: [
-    "tool",
-    "armorer-tool",
-    "armorer-wrench",
-    "cleaning-kit",
-    "bore-snake",
-    "vise-block",
-    "torque-wrench",
-  ],
-};
-
-// Invert to get partRole -> CategoryId
-export const PART_ROLE_TO_CATEGORY: Record<string, CategoryId> = Object.entries(
-  CATEGORY_TO_PART_ROLES,
-).reduce((acc, [categoryId, roles]) => {
-  for (const role of roles) {
-    acc[role] = categoryId as CategoryId;
-  }
-  return acc;
-}, {} as Record<string, CategoryId>);

lib/api/emailRequests.ts

@@ -0,0 +1,81 @@
+export interface EmailRequest {
+  id: number;
+  recipient: string;
+  email: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateEmailRequestDto {
+  email: string;
+  status?: string;
+}
+
+export interface UpdateEmailRequestDto {
+  email?: string;
+  status?: string;
+}
+
+const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080';
+
+export async function fetchEmailRequests(token: string): Promise<EmailRequest[]> {
+  const response = await fetch(`${API_BASE}/api/email`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  
+  if (!response.ok) {
+    throw new Error(`Failed to fetch email requests: ${response.statusText}`);
+  }
+  
+  return response.json();
+}
+
+export async function createEmailRequest(token: string, data: CreateEmailRequestDto): Promise<EmailRequest> {
+  const response = await fetch(`${API_BASE}/api/email`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(data),
+  });
+  
+  if (!response.ok) {
+    throw new Error(`Failed to create email request: ${response.statusText}`);
+  }
+  
+  return response.json();
+}
+
+export async function updateEmailRequest(token: string, id: number, data: UpdateEmailRequestDto): Promise<EmailRequest> {
+  const response = await fetch(`${API_BASE}/api/email/${id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(data),
+  });
+  
+  if (!response.ok) {
+    throw new Error(`Failed to update email request: ${response.statusText}`);
+  }
+  
+  return response.json();
+}
+
+export async function deleteEmailRequest(token: string, id: number): Promise<void> {
+  const response = await fetch(`${API_BASE}/api/email/${id}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  
+  if (!response.ok) {
+    throw new Error(`Failed to delete email request: ${response.statusText}`);
+  }
+}

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})`);
+  }
+}

lib/buildOverlaps.ts

@@ -0,0 +1,150 @@
+// /lib/buildOverlaps.ts
+import type { CategoryId } from "@/types/gunbuilder";
+
+export type OverlapChipModel = {
+  key: string;
+  tone: "warning" | "info";
+  label: string;
+  detail?: string;
+};
+
+export const COMPLETE_UPPER_CATEGORY: CategoryId = "complete-upper";
+export const COMPLETE_LOWER_CATEGORY: CategoryId = "complete-lower";
+
+export const UPPER_OVERLAP_CATEGORIES = new Set<CategoryId>([
+  "upper-receiver",
+  "bcg",
+  "barrel",
+  "gas-block",
+  "gas-tube",
+  "muzzle-device",
+  "suppressor",
+  "handguard",
+  "charging-handle",
+]);
+
+export const LOWER_OVERLAP_CATEGORIES = new Set<CategoryId>([
+  "lower-receiver",
+  "lower-parts",
+  "trigger",
+  "grip",
+  "safety",
+  "buffer",
+  "stock",
+]);
+
+export type BuildState = Partial<Record<CategoryId, string>>;
+
+function selectedCount(build: BuildState, set: Set<CategoryId>) {
+  let count = 0;
+  for (const cid of set) if (build[cid]) count++;
+  return count;
+}
+
+function selectedList(build: BuildState, set: Set<CategoryId>) {
+  const list: CategoryId[] = [];
+  for (const cid of set) if (build[cid]) list.push(cid);
+  return list;
+}
+
+/**
+ * Chips to show on a given category row (education / “you may not need both”)
+ */
+export function getOverlapChipsForCategory(
+  categoryId: CategoryId,
+  build: BuildState
+): OverlapChipModel[] {
+  const chips: OverlapChipModel[] = [];
+
+  const hasCompleteUpper = !!build[COMPLETE_UPPER_CATEGORY];
+  const hasCompleteLower = !!build[COMPLETE_LOWER_CATEGORY];
+
+  // ---- Upper overlap ----
+  if (categoryId === COMPLETE_UPPER_CATEGORY) {
+    const count = selectedCount(build, UPPER_OVERLAP_CATEGORIES);
+    if (count > 0) {
+      chips.push({
+        key: "upper-complete-overlaps-subparts",
+        tone: "warning",
+        label: "Overlaps selected upper parts",
+        detail: `${count} upper part${count === 1 ? "" : "s"} also selected`,
+      });
+    }
+  }
+
+  if (UPPER_OVERLAP_CATEGORIES.has(categoryId) && hasCompleteUpper) {
+    chips.push({
+      key: "upper-subpart-in-complete",
+      tone: "info",
+      label: "Included in Complete Upper",
+      detail: "You have both selected (compare if you want)",
+    });
+  }
+
+  // ---- Lower overlap ----
+  if (categoryId === COMPLETE_LOWER_CATEGORY) {
+    const count = selectedCount(build, LOWER_OVERLAP_CATEGORIES);
+    if (count > 0) {
+      chips.push({
+        key: "lower-complete-overlaps-subparts",
+        tone: "warning",
+        label: "Overlaps selected lower parts",
+        detail: `${count} lower part${count === 1 ? "" : "s"} also selected`,
+      });
+    }
+  }
+
+  if (LOWER_OVERLAP_CATEGORIES.has(categoryId) && hasCompleteLower) {
+    chips.push({
+      key: "lower-subpart-in-complete",
+      tone: "info",
+      label: "Included in Complete Lower",
+      detail: "You have both selected (compare if you want)",
+    });
+  }
+
+  return chips;
+}
+
+/**
+ * Non-blocking “heads up” messages when selecting a part.
+ * (Use for toasts / shareStatus strip — no auto-removal)
+ */
+export function getSelectionHints(
+  nextCategoryId: CategoryId,
+  build: BuildState
+): string[] {
+  const hints: string[] = [];
+
+  if (nextCategoryId === COMPLETE_UPPER_CATEGORY) {
+    const overlaps = selectedList(build, UPPER_OVERLAP_CATEGORIES);
+    if (overlaps.length > 0) {
+      hints.push(
+        "Heads up: Complete Upper overlaps with some selected upper parts. Nothing was removed — compare options and keep what you want."
+      );
+    }
+  }
+
+  if (UPPER_OVERLAP_CATEGORIES.has(nextCategoryId) && build[COMPLETE_UPPER_CATEGORY]) {
+    hints.push(
+      "Heads up: You also have a Complete Upper selected. Nothing was removed — compare options and keep what you want."
+    );
+  }
+
+  if (nextCategoryId === COMPLETE_LOWER_CATEGORY) {
+    const overlaps = selectedList(build, LOWER_OVERLAP_CATEGORIES);
+    if (overlaps.length > 0) {
+      hints.push(
+        "Heads up: Complete Lower overlaps with some selected lower parts. Nothing was removed — compare options and keep what you want."
+      );
+    }
+  }
+
+  if (LOWER_OVERLAP_CATEGORIES.has(nextCategoryId) && build[COMPLETE_LOWER_CATEGORY]) {
+    hints.push(
+      "Heads up: You also have a Complete Lower selected. Nothing was removed — compare options and keep what you want."
+    );
+  }
+
+  return hints;
+}

lib/catalog.ts

@@ -0,0 +1,90 @@
+// app/lib/catalog.ts
+export const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+export type ProductListItem = {
+  id: string;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  categoryKey?: string | null;
+  price?: number | null;
+  buyUrl?: string | null;
+  imageUrl?: string | null;
+  slug?: string | null; // if your API returns it; otherwise we derive it client-side
+};
+
+export type ProductDetail = {
+  id: string;
+  name: string;
+  brand: string;
+  platform: string;
+  partRole: string;
+  rawCategoryKey?: string | null;
+  description?: string | null;
+  shortDescription?: string | null;
+  imageUrl?: string | null;
+  offers?: Array<{
+    merchantName?: string;
+    price?: number | null;
+    buyUrl?: string | null;
+    inStock?: boolean | null;
+  }>;
+};
+
+export function slugify(input: string) {
+  return (input ?? "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+}
+
+/**
+ * Your existing list endpoint:
+ * GET /api/v1/products?platform=AR-15&partRoles=complete-upper
+ */
+export async function fetchProducts(params: {
+  platform: string;
+  partRole: string;
+}) {
+  const { platform, partRole } = params;
+
+  const url =
+    `${API_BASE_URL}/api/v1/products?` +
+    new URLSearchParams({
+      platform,
+      partRoles: partRole,
+    });
+
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) throw new Error(`Failed to load products (${res.status})`);
+  const data = (await res.json()) as ProductListItem[];
+
+  // Ensure each item has a "productSlug" of the form "{id}-{slugified-name}"
+  return data.map((p) => ({
+    ...p,
+    productSlug: `${p.id}-${slugify(p.name)}`,
+  }));
+}
+
+/**
+ * You likely have (or should add) a detail endpoint like:
+ * GET /api/v1/products/{id}?platform=AR-15   OR  GET /api/v1/products/{id}
+ *
+ * We'll call /api/v1/products/{id} and optionally include platform as a query param.
+ */
+export async function fetchProductById(params: {
+  id: string;
+  platform?: string;
+}) {
+  const { id, platform } = params;
+
+  const url =
+    `${API_BASE_URL}/api/v1/products/${encodeURIComponent(id)}` +
+    (platform ? `?${new URLSearchParams({ platform })}` : "");
+
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) throw new Error(`Failed to load product (${res.status})`);
+  return (await res.json()) as ProductDetail;
+}

lib/catalogMappings.ts

@@ -0,0 +1,100 @@
+import type { CategoryId } from "@/types/gunbuilder";
+
+/**
+ * Normalize backend part roles into a canonical kebab-case form.
+ * - trims whitespace
+ * - lowercases
+ * - converts snake_case / ENUM_CASE to kebab-case
+ */
+export const normalizePartRole = (role: string) =>
+  role.trim().toLowerCase().replace(/_/g, "-");
+
+/**
+ * Maps canonical kebab-case CategoryIds to their associated part roles from the backend.
+ *
+ * Notes:
+ * - Keep the list here as the *source of truth*.
+ * - The derived `PART_ROLE_TO_CATEGORY` map below stores both the original and normalized keys.
+ */
+export const CATEGORY_TO_PART_ROLES: Partial<Record<CategoryId, string[]>> = {
+  // ===== UPPER =====
+  "upper-receiver": ["upper-receiver"],
+  // (optional) Back-compat if anything still uses the old ids:
+  // upper: ["upper-receiver", "upper"],
+
+  "complete-upper": ["complete-upper"],
+  barrel: ["barrel"],
+  "gas-block": ["gas-block"],
+  "gas-tube": ["gas-tube"],
+  "muzzle-device": ["muzzle-device", "compensator", "brake"],
+  suppressor: ["suppressor"],
+  handguard: ["handguard"],
+  "charging-handle": ["charging-handle"],
+  bcg: ["bcg", "bolt-carrier-group"],
+
+  // ===== LOWER =====
+  "lower-receiver": ["lower-receiver", "lower", "LOWER_RECEIVER_STRIPPED"],
+  // (optional) Back-compat if anything still uses the old ids:
+
+  "complete-lower": ["complete-lower"],
+  "lower-parts": ["lower-parts-kit", "lower-parts"],
+  trigger: ["trigger", "trigger-kit"],
+  grip: ["pistol-grip", "grip"],
+  safety: ["safety", "safety-selector"],
+  buffer: ["buffer-kit", "buffer"],
+  stock: ["stock"],
+
+  // ===== OPTICS =====
+  sights: ["sight", "sights", "iron-sights"],
+  optic: ["optic", "optics"],
+
+  // ===== ACCESSORIES =====
+  magazine: ["magazine", "mag", "magazine-ar15", "magazine-308", "drum-magazine"],
+  "weapon-light": [
+    "weapon-light",
+    "light",
+    "weapon-light-laser",
+    "light-laser-combo",
+    "laser",
+  ],
+  foregrip: ["vertical-grip", "angled-foregrip", "foregrip", "handstop"],
+  bipod: ["bipod"],
+  sling: ["sling", "sling-mount", "sling-swivel", "qd-sling-mount"],
+  "rail-accessory": [
+    "rail-section",
+    "picatinny-rail-section",
+    "m-lok-rail-section",
+    "keymod-rail-section",
+    "rail-cover",
+    "rail-panel",
+  ],
+  tools: [
+    "tool",
+    "armorer-tool",
+    "armorer-wrench",
+    "cleaning-kit",
+    "bore-snake",
+    "vise-block",
+    "torque-wrench",
+  ],
+};
+
+/**
+ * Reverse lookup: backend partRole -> CategoryId.
+ *
+ * Implementation details:
+ * - Stores BOTH the original role and its normalized version as keys.
+ * - De-dupes role lists per category.
+ */
+export const PART_ROLE_TO_CATEGORY: Record<string, CategoryId> = Object.entries(
+  CATEGORY_TO_PART_ROLES
+).reduce((acc, [categoryId, roles]) => {
+  const unique = Array.from(new Set(roles ?? []));
+
+  for (const role of unique) {
+    acc[role] = categoryId as CategoryId;
+    acc[normalizePartRole(role)] = categoryId as CategoryId;
+  }
+
+  return acc;
+}, {} as Record<string, CategoryId>);

lib/cn.tsx

@@ -0,0 +1,6 @@
+// lib/cn.ts
+import clsx, { type ClassValue } from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}

lib/dateFormattingUtility.ts

@@ -0,0 +1,5 @@
+export function formatDate(value: unknown) {
+  if (!value) return "—";
+  const d = new Date(value as any);
+  return Number.isNaN(d.getTime()) ? "—" : d.toLocaleString();
+}

middleware.ts

@@ -0,0 +1,47 @@
+// middleware.ts
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+const LAUNCH_ONLY_ROOT = process.env.NEXT_PUBLIC_LAUNCH_ONLY_ROOT === "true";
+
+// ✅ Forever allow list (always reachable even during launch-only mode)
+const ALWAYS_ALLOW = new Set<string>([
+  "/",
+  "/favicon.ico",
+  "/robots.txt",
+  "/sitemap.xml",
+]);
+
+// Match common public/static file extensions so middleware never blocks them
+const PUBLIC_FILE = /\.(?:svg|png|jpg|jpeg|gif|webp|ico|css|js|map|txt|xml|json|woff|woff2|ttf|eot)$/i;
+
+export function middleware(req: NextRequest) {
+  if (!LAUNCH_ONLY_ROOT) return NextResponse.next();
+
+  const { pathname } = req.nextUrl;
+
+  // ✅ Always allow Next internals + static assets (public/ and _next/)
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/favicon") ||
+    pathname === "/robots.txt" ||
+    pathname === "/sitemap.xml" ||
+    PUBLIC_FILE.test(pathname)
+  ) {
+    return NextResponse.next();
+  }
+
+  // ✅ Allow the root + a few public files
+  if (ALWAYS_ALLOW.has(pathname)) return NextResponse.next();
+
+  // 🚫 Everything else: hide it
+  return NextResponse.rewrite(new URL("/404", req.url));
+}
+
+export const config = {
+  // Run middleware on everything *except* Next internals and obvious static files.
+  // This keeps launch gating from ever breaking your logo/images/fonts/etc.
+  matcher: [
+    "/((?!_next/static|_next/image|favicon.ico|robots.txt|sitemap.xml|.*\\.(?:svg|png|jpg|jpeg|gif|webp|ico|css|js|map|txt|xml|json|woff|woff2|ttf|eot)).*)",
+  ],
+};

package-lock.json

@@ -11,8 +11,11 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.555.0",
         "next": "14.2.3",
+        "quill": "^2.0.3",
+        "quill-image-resize-module": "^3.0.0",
         "react": "18.3.1",
-        "react-dom": "18.3.1"
+        "react-dom": "18.3.1",
+        "react-quill": "^2.0.0"
       },
       "devDependencies": {
         "@types/node": "20.12.7",
@@ -557,6 +560,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "license": "MIT",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
+    "node_modules/@types/quill/node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@types/react": {
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
@@ -994,7 +1012,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1435,7 +1452,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -1465,7 +1481,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
       "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
@@ -1484,7 +1499,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -1498,7 +1512,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -1612,6 +1625,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1772,6 +1794,26 @@
         }
       }
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1783,7 +1825,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0",
@@ -1801,7 +1842,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
       "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.0.1",
@@ -1859,7 +1899,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -1964,7 +2003,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -1974,7 +2012,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -2012,7 +2049,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -2098,7 +2134,6 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -2267,7 +2302,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -2540,6 +2574,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2547,6 +2593,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -2739,7 +2791,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2770,7 +2821,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2790,7 +2840,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -2815,7 +2864,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -2976,7 +3024,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3025,7 +3072,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0"
@@ -3054,7 +3100,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3067,7 +3112,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -3083,7 +3127,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -3163,6 +3206,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -3308,7 +3367,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
       "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -3457,7 +3515,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
       "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -3805,6 +3862,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3844,7 +3926,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4105,11 +4186,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4283,6 +4379,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parchment": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
+      "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4429,7 +4531,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
@@ -4583,12 +4684,102 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quill": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.3.tgz",
+      "integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "eventemitter3": "^5.0.1",
+        "lodash-es": "^4.17.21",
+        "parchment": "^3.0.0",
+        "quill-delta": "^5.1.0"
+      },
+      "engines": {
+        "npm": ">=8.2.3"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
+      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
+    "node_modules/quill-image-resize-module": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quill-image-resize-module/-/quill-image-resize-module-3.0.0.tgz",
+      "integrity": "sha512-1TZBnUxU/WIx5dPyVjQ9yN7C6mLZSp04HyWBEMqT320DIq4MW4JgzlOPDZX5ZpBM3bU6sacU4kTLUc8VgYQZYw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.4",
+        "quill": "^1.2.2",
+        "raw-loader": "^0.5.1"
+      }
+    },
+    "node_modules/quill-image-resize-module/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "license": "MIT"
+    },
+    "node_modules/quill-image-resize-module/node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/quill-image-resize-module/node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/quill-image-resize-module/node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-image-resize-module/node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/raw-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+      "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q=="
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4601,7 +4792,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -4617,6 +4807,67 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-quill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
+      "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "license": "MIT"
+    },
+    "node_modules/react-quill/node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/react-quill/node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/react-quill/node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/react-quill/node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4667,7 +4918,6 @@
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
       "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -4880,7 +5130,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
@@ -4898,7 +5147,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
       "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
@@ -5548,7 +5796,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5718,7 +5965,6 @@
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

@@ -12,8 +12,11 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.555.0",
     "next": "14.2.3",
+    "quill": "^2.0.3",
+    "quill-image-resize-module": "^3.0.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-quill": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "20.12.7",

public/battl/battl-logo-mark-2.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 995.72 154.88">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f0efef;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-1" d="M249.46,121.28h-41.14V18.23h40.87c5.93,0,9.17,3.37,9.17,9.44v26.57c0,4.86-1.35,7.15-4.99,9.31l-6.34,3.91,6.74,4.18c3.64,2.16,5.12,4.72,5.12,9.58v30.62c0,6.07-3.37,9.44-9.44,9.44ZM242.99,31.18h-19.29v30.21h11.87l7.42-5.26v-24.95ZM243.39,78.93l-7.55-4.99h-12.14v34.39h19.69v-29.4Z"/>
+      <path class="cls-1" d="M314.34,121.28l-3.1-19.56h-19.29l-3.1,19.56h-15.24v-.27l19.96-102.91h16.18l19.83,102.91v.27h-15.24ZM301.53,41.97l-7.55,46.53h15.11l-7.55-46.53Z"/>
+      <path class="cls-1" d="M366.94,31.86v89.42h-15.38V31.86h-16.86v-13.62h49.23v13.62h-16.99Z"/>
+      <path class="cls-1" d="M427.9,31.86v89.42h-15.38V31.86h-16.86v-13.62h49.23v13.62h-16.99Z"/>
+      <path class="cls-1" d="M459.46,121.28V18.23h15.38v89.29h25.09v13.76h-40.46Z"/>
+      <path class="cls-1" d="M556.98,121.28h-41.14V18.23h40.87c5.93,0,9.17,3.37,9.17,9.44v26.57c0,4.86-1.35,7.15-4.99,9.31l-6.34,3.91,6.74,4.18c3.64,2.16,5.12,4.72,5.12,9.58v30.62c0,6.07-3.37,9.44-9.44,9.44ZM550.5,31.18h-19.29v30.21h11.87l7.42-5.26v-24.95ZM550.91,78.93l-7.55-4.99h-12.14v34.39h19.69v-29.4Z"/>
+      <path class="cls-1" d="M627.38,121.28h-32.77c-6.07,0-9.31-3.37-9.31-9.44V18.23h15.38v89.83h20.77V18.23h15.38v93.6c0,6.07-3.37,9.44-9.44,9.44Z"/>
+      <path class="cls-1" d="M656.25,121.28V18.23h15.38v103.04h-15.38Z"/>
+      <path class="cls-1" d="M691.04,121.28V18.23h15.38v89.29h25.09v13.76h-40.46Z"/>
+      <path class="cls-1" d="M778.85,121.28h-31.43V18.23h31.43c12.54,0,19.96,7.69,19.96,19.56v64.06c0,11.87-7.55,19.42-19.96,19.42ZM783.3,40.08c0-5.53-3.51-8.63-9.04-8.63h-11.46v76.61h11.06c6.2,0,9.44-3.37,9.44-8.77v-59.21Z"/>
+      <path class="cls-1" d="M817.42,121.28V18.23h42.35v13.62h-26.97v30.08h23.2v13.35h-23.2v32.37h27.38v13.62h-42.75Z"/>
+      <path class="cls-1" d="M914.12,121.28l-16.99-47.88v-9.31h15.11V31.45h-19.42v89.83h-15.38V18.23h40.87c6.07,0,9.31,3.37,9.31,9.44v37.5c0,6.07-3.24,9.31-9.17,9.44h-5.26l16.99,46.13v.54h-16.05Z"/>
+      <path class="cls-1" d="M986.42,121.28h-31.02c-5.93,0-9.31-3.37-9.31-9.44v-24.55h15.38v21.04h18.88v-20.23l-30.89-29.27c-2.56-2.29-3.37-4.32-3.37-8.23v-22.93c0-6.07,3.37-9.44,9.31-9.44h31.02c5.93,0,9.31,3.37,9.31,9.31v23.06h-15.38v-19.42h-18.88v18.61l30.89,29.13c2.56,2.43,3.37,4.45,3.37,8.36v24.55c0,6.07-3.37,9.44-9.31,9.44Z"/>
+    </g>
+    <path class="cls-1" d="M155.87,0v108.05l-46.85,46.84H0V46.84L46.85,0h109.02ZM128.96,14.84H62.16v31.53h35.72l31.08-31.53ZM46.39,46.37v-24.11l-24.12,24.11h24.12ZM140.1,92.75V25.97l-31.55,31.07v35.71h31.55ZM46.39,61.21H15.77v66.78l30.62-30.14v-36.63ZM93.71,61.21h-31.55v31.53h31.55v-31.53ZM93.71,108.51h-36.65c-8.09,9.81-21.24,18.92-28.77,28.74-.72.93-1.79,1.17-1.39,2.79h65.41l1.39-1.39v-30.14ZM133.6,108.51h-25.05v24.11c1.62.4,1.85-.67,2.79-1.39,7.57-5.8,15.12-16.08,22.26-22.73Z"/>
+  </g>
+</svg>

public/battl/battl-logo-mark-f.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1133.86 425.2">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-1, .cls-2 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #febe2a;
+      }
+    </style>
+  </defs>
+  <g id="Page_1" data-name="Page 1">
+    <g id="Icon">
+      <g>
+        <path class="cls-2" d="M314.03,138.62c4.07,8.49,3.1,16.88-2.79,24.22l-39.94,49.76,39.94,49.76c5.89,7.34,6.86,15.74,2.79,24.22-4.07,8.49-11.22,12.99-20.64,12.99h-91.92v42.9h91.92c25.92,0,48.11-13.97,59.32-37.34s8.21-49.42-8.02-69.63l-18.38-22.9,18.38-22.9c16.23-20.21,19.23-46.26,8.02-69.63s-33.4-37.34-59.32-37.34h-91.92v42.9h91.92c9.41,0,16.57,4.5,20.64,12.99h0Z"/>
+        <polygon class="cls-2" points="271.3 212.6 236.9 169.76 181.89 169.76 216.28 212.6 181.89 255.44 236.9 255.44 271.3 212.6"/>
+        <polygon class="cls-2" points="146.46 125.63 201.48 125.63 167.04 82.73 57 82.73 126.87 169.76 181.89 169.76 146.46 125.63"/>
+        <path class="cls-2" d="M150.79,199.56c-14.45-3.22-31.32-5.34-47.86-5.34h-33.96v13.15l-59.88,5.22,59.88,5.22v13.15h33.96c16.54,0,33.41-2.12,47.86-5.34,12.64-2.81,23.43-6.46,30.53-10.27l.08-2.77-.08-2.77c-7.11-3.8-17.9-7.46-30.53-10.27h0Z"/>
+        <polygon class="cls-2" points="181.89 255.44 126.87 255.44 57 342.47 167.04 342.47 201.48 299.56 146.46 299.56 181.89 255.44"/>
+      </g>
+    </g>
+    <g id="BattlBuilders_text" data-name="BattlBuilders text">
+      <g>
+        <path class="cls-1" d="M478.75,241.24c-4.01-13.79-16.75-23.88-31.84-23.88h-50.03v125.1h52.33c18.36-.08,33.02-15,33.02-33.16v-5.76c0-11.16-5.51-21.02-13.96-27.04,7.86-6.63,11.8-15.78,11.8-26,0-3.22-.46-6.34-1.32-9.28h0ZM425.57,241.24h15.07c5.93,0,10.73,4.81,10.73,10.73v1.91c0,5.93-4.81,10.73-10.73,10.73h-15.07v-23.37h0ZM425.57,288.49h17.23c5.93,0,10.73,4.81,10.73,10.73v8.64c0,5.95-4.8,10.71-10.73,10.73h-17.23v-30.1h0Z"/>
+        <polygon class="cls-1" points="588.81 217.37 588.81 342.47 617.5 342.47 617.5 217.37 588.81 217.37"/>
+        <polygon class="cls-1" points="629.21 217.37 629.21 342.47 703.46 342.47 703.46 318.59 657.89 318.59 657.89 217.37 629.21 217.37"/>
+        <path class="cls-1" d="M712.99,217.37v125.1h52.05c18.35,0,33.29-14.68,33.29-33.16v-58.79c0-18.21-14.74-33.15-33.15-33.15h-52.19ZM741.68,318.59v-77.35h17.23c5.9,0,10.69,4.76,10.73,10.65v56.04c-.04,5.96-4.87,10.65-10.81,10.65h-17.15Z"/>
+        <polygon class="cls-1" points="810.04 217.37 810.04 342.47 886.77 342.47 886.77 318.59 838.73 318.59 838.73 291.85 876.86 291.85 876.86 267.98 838.73 267.98 838.73 241.24 886.77 241.24 886.77 217.37 810.04 217.37"/>
+        <path class="cls-1" d="M993.35,250.52c.29,10.37,1.8,16.6,18.51,28.4l29.13,20.82c4.72,3.37,7.36,5.55,7.36,9.26,0,4.95-5.22,9.6-10.63,9.6h-4.95c-5.9,0-10.69-4.76-10.73-10.65v-4.84h-28.69v6.21c0,3.22.46,6.33,1.32,9.28,4,13.74,16.68,23.88,31.84,23.88h17.48c15.16,0,27.83-10.13,31.84-23.88.86-2.95,1.32-6.06,1.32-9.28-.29-10.37-1.8-16.6-18.51-28.4l-29.13-20.82c-4.72-3.37-7.36-5.55-7.36-9.26,0-4.96,5.22-9.6,10.63-9.6h4.95c5.9,0,10.69,4.76,10.73,10.65v4.84h28.69v-6.21c0-3.22-.46-6.33-1.32-9.28-4-13.74-16.68-23.88-31.84-23.88h-17.48c-15.16,0-27.83,10.13-31.84,23.88-.86,2.95-1.32,6.06-1.32,9.28h0Z"/>
+        <path class="cls-1" d="M981.64,250.52c0-18.21-14.74-33.15-33.16-33.15h-52.19v125.1h28.69v-43.33h17.16c5.97,0,10.81,4.74,10.81,10.73v22.34c0,4.75.91,8.65,2.42,10.27h28.69c-1.52-1.61-2.43-5.52-2.43-10.27v-18.74c0-10.31-4.76-19.97-12.92-26.27,8.17-6.3,12.92-15.96,12.92-26.27v-10.41h0ZM942.22,241.24c5.93,0,10.73,4.81,10.73,10.73v12.55c0,5.99-4.84,10.73-10.81,10.73h-17.16v-34.02h17.24Z"/>
+        <path class="cls-1" d="M548.42,217.37v93.21h-2.51v3.84h2.51v4.17h-27.97v-4.17h2.51v-3.84h-2.51v-93.21h-28.69v91.95c0,18.16,14.66,33.08,33.02,33.16h19.31c15.1-.06,27.71-10.18,31.7-23.88.86-2.95,1.32-6.06,1.32-9.28v-91.95h-28.69Z"/>
+        <path class="cls-1" d="M478.75,106.61c-4.01-13.79-16.75-23.88-31.84-23.88h-50.03v125.1h52.33c18.36-.07,33.02-15,33.02-33.15v-5.76c0-11.16-5.51-21.02-13.96-27.04,7.86-6.63,11.8-15.78,11.8-26,0-3.22-.46-6.34-1.32-9.28h0ZM425.57,106.61h15.07c5.93,0,10.73,4.81,10.73,10.73v1.91c0,5.93-4.81,10.73-10.73,10.73h-15.07v-23.37h0ZM425.57,153.85h17.23c5.93,0,10.73,4.81,10.73,10.73v8.64c0,5.95-4.8,10.71-10.73,10.73h-17.23v-30.1h0Z"/>
+        <path class="cls-1" d="M535.69,97.25c5.99,13.8,8.73,28.29,8.73,41.27v25.48h-19.97v-25.48c0-12.98,2.74-27.48,8.73-41.27h2.51ZM577.1,115.89c0-18.16-14.66-33.08-33.02-33.15h-19.31c-18.36.07-33.02,15-33.02,33.15v91.95h28.69v-10.03l2.56-11.48v-13.17h22.85v13.17l2.56,11.48v10.03h28.69v-91.95h0Z"/>
+        <polygon class="cls-1" points="766.9 82.73 766.9 207.83 841.16 207.83 841.16 183.96 795.59 183.96 795.59 82.73 766.9 82.73"/>
+        <polygon class="cls-1" points="757.37 82.73 669.97 82.73 669.97 106.6 699.33 106.6 699.33 207.83 728.01 207.83 728.01 106.6 757.37 106.6 757.37 82.73"/>
+        <polygon class="cls-1" points="660.44 106.6 660.44 82.73 571.56 82.73 585.34 106.6 602.39 106.6 602.39 207.83 631.08 207.83 631.08 106.6 660.44 106.6"/>
+      </g>
+    </g>
+  </g>
+</svg>

public/battl/battl-logo-mark.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1001.79 154.88">
+  <defs>
+    <style>
+      .cls-1 {
+        font-family: AgencyFB-Bold, AgencyFB;
+        font-size: 134.88px;
+        font-weight: 700;
+      }
+
+      .cls-1, .cls-2 {
+        fill: #f0efef;
+      }
+
+      .cls-3 {
+        letter-spacing: .06em;
+      }
+
+      .cls-4 {
+        letter-spacing: .05em;
+      }
+
+      .cls-5 {
+        letter-spacing: .05em;
+      }
+
+      .cls-6 {
+        letter-spacing: 0em;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <text class="cls-1" transform="translate(202.12 121.28)"><tspan class="cls-5" x="0" y="0">B</tspan><tspan class="cls-6" x="69.06" y="0">A</tspan><tspan class="cls-3" x="130.83" y="0">T</tspan><tspan class="cls-4" x="191.79" y="0">TLBUILDERS</tspan></text>
+    <path class="cls-2" d="M155.87,0v108.05l-46.85,46.84H0V46.84L46.85,0h109.02ZM128.96,14.84H62.16v31.53h35.72l31.08-31.53ZM46.39,46.37v-24.11l-24.12,24.11h24.12ZM140.1,92.75V25.97l-31.55,31.07v35.71h31.55ZM46.39,61.21H15.77v66.78l30.62-30.14v-36.63ZM93.71,61.21h-31.55v31.53h31.55v-31.53ZM93.71,108.51h-36.65c-8.09,9.81-21.24,18.92-28.77,28.74-.72.93-1.79,1.17-1.39,2.79h65.41l1.39-1.39v-30.14ZM133.6,108.51h-25.05v24.11c1.62.4,1.85-.67,2.79-1.39,7.57-5.8,15.12-16.08,22.26-22.73Z"/>
+  </g>
+</svg>

tailwind.config.ts

@@ -3,11 +3,12 @@ import type { Config } from "tailwindcss";
 const config: Config = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}"
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx}",
+
   ],
-  theme: {
+  theme: { extend: {} },
-    extend: {},
-  },
   plugins: [],
+  darkMode: "class",
 };
 export default config;

types/gunbuilder.ts

@@ -1,35 +1,58 @@
 // Grouping for nav + layout
 export type CategoryGroup = "lower" | "upper" | "accessories";
 
+/**
+ * CategoryId is the canonical identifier used throughout the UI + localStorage.
+ *
+ * ✅ Canonical IDs are kebab-case to match route segments and `gunbuilderParts.ts`.
+ *
+ * 🧯 Legacy camelCase IDs are temporarily supported to avoid breaking older
+ * localStorage/build-state and older code paths. Prefer kebab-case going forward.
+ */
 export type CategoryId =
-  | "upper"
+  // ===== LOWER =====
-  | "completeUpper"
+  | "lower-receiver"
-  | "barrel"
+  | "complete-lower"
-  | "gasBlock"
+  | "lower-parts"
-  | "gasTube"
-  | "muzzleDevice"
-  | "suppressor"
-  | "handguard"
-  | "chargingHandle"
-  | "bcg"
-  | "buffer"
-  | "lower"
-  | "completeLower"
-  | "lowerParts"
   | "trigger"
   | "grip"
   | "safety"
+  | "buffer"
+  | "stock"
+
+  // ===== UPPER =====
+  | "upper-receiver"
+  | "complete-upper"
+  | "barrel"
+  | "handguard"
+  | "gas-block"
+  | "gas-tube"
+  | "muzzle-device"
+  | "bcg"
+  | "charging-handle"
+  | "suppressor"
   | "sights"
   | "optic"
-  | "stock"
+
-  // NEW ACCESSORY CATEGORIES
+  // ===== ACCESSORIES =====
   | "magazine"
-  | "weaponLight"
+  | "weapon-light"
   | "foregrip"
   | "bipod"
   | "sling"
-  | "railAccessory"
+  | "rail-accessory"
-  | "tools";
+  | "tools"
+
+  // ===== LEGACY (temporary) =====
+  | "completeUpper"
+  | "gasBlock"
+  | "gasTube"
+  | "muzzleDevice"
+  | "chargingHandle"
+  | "completeLower"
+  | "lowerParts"
+  | "weaponLight"
+  | "railAccessory";
 
 export interface Category {
   id: CategoryId;
@@ -37,6 +60,8 @@ export interface Category {
   description?: string;
   /** used for nav & grouping */
   group?: CategoryGroup;
+  /** optional slug override (mostly for legacy IDs) */
+  slug?: string;
 }
 
 export interface Part {
@@ -46,7 +71,59 @@ export interface Part {
   categoryId: CategoryId;
   price: number;
   affiliateUrl?: string;
-  url?: string;    
+  url?: string;
   imageUrl?: string;
   notes?: string;
 }
+
+/**
+ * Route / UI slug for each CategoryId.
+ *
+ * - Canonical kebab-case ids map 1:1.
+ * - Legacy camelCase ids map to the same slug.
+ */
+export const CATEGORY_SLUGS = {
+  // LOWER
+  "lower-receiver": "lower-receiver",
+  "complete-lower": "complete-lower",
+  "lower-parts": "lower-parts",
+  trigger: "trigger",
+  grip: "grip",
+  safety: "safety",
+  buffer: "buffer",
+  stock: "stock",
+
+  // UPPER
+  "upper-receiver": "upper-receiver",
+  "complete-upper": "complete-upper",
+  barrel: "barrel",
+  handguard: "handguard",
+  "gas-block": "gas-block",
+  "gas-tube": "gas-tube",
+  "muzzle-device": "muzzle-device",
+  sights: "sights",
+  bcg: "bcg",
+  "charging-handle": "charging-handle",
+  suppressor: "suppressor",
+  optic: "optic",
+
+  // ACCESSORIES
+  magazine: "magazine",
+  "weapon-light": "weapon-light",
+  foregrip: "foregrip",
+  bipod: "bipod",
+  sling: "sling",
+  "rail-accessory": "rail-accessory",
+  tools: "tools",
+
+  // LEGACY (temporary)
+  completeUpper: "complete-upper",
+  gasBlock: "gas-block",
+  gasTube: "gas-tube",
+  muzzleDevice: "muzzle-device",
+  chargingHandle: "charging-handle",
+  completeLower: "complete-lower",
+  lowerParts: "lower-parts",
+  weaponLight: "weapon-light",
+  railAccessory: "rail-accessory",
+} as const satisfies Record<CategoryId, string>;

types/user.ts

@@ -0,0 +1,34 @@
+// /types/user.ts
+
+// ---- Roles ----
+export type UserRole = "USER" | "ADMIN";
+
+// If you ever add more:
+// export type UserRole = "USER" | "ADMIN" | "SUPERADMIN" | "SUSPENDED";
+
+// ---- Core user shapes ----
+export interface BaseUser {
+  id: string;
+  email: string;
+  displayName?: string | null;
+  role: UserRole;
+  createdAt: string;          // ISO string from backend
+  updatedAt?: string | null;  // optional if you expose it
+  lastLoginAt?: string | null;
+}
+
+// What the admin UI works with
+export type AdminUser = BaseUser;
+
+// What your auth context might use on the client
+export type AuthUser = {
+  id: string;
+  email: string;
+  displayName?: string | null;
+  role: UserRole;
+} | null;
+
+// ---- Payloads / DTOs ----
+export interface UpdateUserRolePayload {
+  role: UserRole;
+}