adding email, not in menus yet

.env-local

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

.env.local

@@ -0,0 +1,5 @@
+
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
+
+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/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/(builder)/builder/[categoryId]/[partId]/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) { ... }

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

@@ -17,7 +17,7 @@ type GunbuilderProductFromApi = {
   platform: string;
   partRole: string;
   price: number | null;
-  mainImageUrl: string | null;
+  imageUrl: string | null;
   buyUrl: string | null;
 };
 
@@ -55,21 +55,20 @@ export default function PartDetailPage() {
 
         // 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 url = `${API_BASE_URL}/api/products/gunbuilder/products/${partId}`;
         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 data: GunbuilderProductFromApi = await res.json();
-        const found = data.find((p) => p.id === partId) ?? null;
 
-        if (!found) {
+        if (!data) {
           setError("Product not found");
         }
 
-        setProduct(found);
+        setProduct(data);
       } catch (err: any) {
         if (err.name === "AbortError") return;
         setError(err.message ?? "Failed to load product");
@@ -131,10 +130,10 @@ export default function PartDetailPage() {
         <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"
+            href="/builder"
             className="text-amber-300 hover:text-amber-200 underline"
           >
-            Return to Gunbuilder
+            Return to Builder
           </Link>
         </div>
       </main>
@@ -147,14 +146,14 @@ export default function PartDetailPage() {
         {/* Breadcrumbs */}
         <nav className="mb-4 text-xs text-zinc-500">
           <Link
-            href="/gunbuilder"
+            href="/builder"
             className="hover:text-zinc-300 transition-colors"
           >
-            Gunbuilder
+            Builder
           </Link>
           <span className="mx-1">/</span>
           <Link
-            href={`/gunbuilder/${categoryId}`}
+            href={`/builder/${categoryId}`}
             className="hover:text-zinc-300 transition-colors"
           >
             {category.name}
@@ -176,7 +175,7 @@ export default function PartDetailPage() {
               {error ?? "We couldn’t find this product."}
             </p>
             <Link
-              href={`/gunbuilder/${categoryId}`}
+              href={`/builder/${categoryId}`}
               className="text-amber-300 hover:text-amber-200 underline text-sm"
             >
               Back to {category.name} parts
@@ -187,11 +186,11 @@ export default function PartDetailPage() {
             <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 && (
+                {product.imageUrl && (
                   <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}
+                      src={product.imageUrl}
                       alt={product.name}
                       className="w-full object-contain max-h-80 bg-zinc-950"
                     />
@@ -352,7 +351,7 @@ export default function PartDetailPage() {
 
                 <div className="space-y-2">
                   <Link
-                    href={`/gunbuilder?select=${categoryId}:${product.id}`}
+                    href={`/builder?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

app/(builder)/builder/[categoryId]/page.tsx

@@ -6,6 +6,7 @@ import { useParams, useRouter } from "next/navigation";
 import { CATEGORIES } from "@/data/gunbuilderParts";
 import type { CategoryId, Part } from "@/types/gunbuilder";
 
+
 type ViewMode = "card" | "list";
 
 type GunbuilderProductFromApi = {
@@ -134,11 +135,6 @@ export default function CategoryPage() {
     }
   }, [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;
@@ -293,6 +289,7 @@ export default function CategoryPage() {
     return { start, end };
   }, [filteredParts.length, currentPage, paginatedParts.length, PAGE_SIZE]);
 
+
   if (!category) {
     return (
       <main className="min-h-screen bg-black text-zinc-50">
@@ -305,7 +302,7 @@ export default function CategoryPage() {
               href="/builder"
               className="text-amber-300 hover:text-amber-200 underline"
             >
-              Return to Gunbuilder
+              Return to Builder
             </Link>
           </div>
         </div>

app/(builder)/builder/layout.tsx

@@ -0,0 +1,58 @@
+// app/(builder)/layout.tsx
+import type { ReactNode } from "react";
+
+import { AuthProvider } from "@/context/AuthContext";
+import { BuilderNav } from "@/components/BuilderNav";
+
+export const metadata = {
+  title: {
+    default: "Battl Builder",
+    template: "%s | Battl Builder",
+  },
+  description:
+    "Battl Builder — the smarter, faster, data‑driven way to build your next firearm.",
+};
+
+export default function BuilderLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-neutral-950 text-zinc-50">
+      <AuthProvider>
+        <BuilderNav />
+        <main className="min-h-screen">{children}</main>
+      </AuthProvider>
+    </div>
+  );
+}
+
+
+// 
+// Original homepage. will delete after testing 
+// 
+
+// import "./globals.css";
+// import type { ReactNode } from "react";
+// import { AuthProvider } from "@/context/AuthContext";
+// import { TopNav } from "@/components/TopNav";
+// import { BuilderNav } from "@/components/BuilderNav";
+
+// export const metadata = {
+//   title: {
+//     default: "Battl Builder",
+//     template: "%s | Battl Builder",
+//   },
+//   description: "Battl Builder — the smarter, faster, data‑driven way to build your next firearm.",
+// };
+
+// export default function RootLayout({ children }: { children: ReactNode }) {
+//   return (
+//     <html lang="en">
+//       <body className="bg-black text-zinc-100">
+//         <AuthProvider>
+//           <TopNav />
+//           <BuilderNav />
+//           <main className="min-h-screen">{children}</main>
+//         </AuthProvider>
+//       </body>
+//     </html>
+//   );
+// }

app/(builder)/builder/summary/page.tsx

@@ -150,7 +150,7 @@ export default function BuildDetailsPage() {
   useEffect(() => {
     if (typeof window !== "undefined" && Object.keys(build).length > 0) {
       const encoded = encodeBuildState(build);
-      const url = `${window.location.origin}/gunbuilder/build?build=${encoded}`;
+      const url = `${window.location.origin}/builder/build?build=${encoded}`;
       setShareUrl(url);
     }
   }, [build]);
@@ -212,10 +212,10 @@ export default function BuildDetailsPage() {
               You need to select at least one part to view your build.
             </p>
             <Link
-              href="/gunbuilder"
+              href="/builder"
               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
+              Go to Builder
             </Link>
           </div>
         </div>
@@ -229,7 +229,7 @@ export default function BuildDetailsPage() {
         {/* Header */}
         <header className="mb-6">
           <Link
-            href="/gunbuilder"
+            href="/builder"
             className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
           >
             ← Back to The Armory
@@ -368,7 +368,7 @@ export default function BuildDetailsPage() {
                               </a>
                             )}
                             <Link
-                              href={`/gunbuilder/${category.id}/${part.id}`}
+                              href={`/builder/${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
@@ -398,7 +398,7 @@ export default function BuildDetailsPage() {
         {/* Actions */}
         <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-between">
           <Link
-            href="/gunbuilder"
+            href="/builder"
             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
@@ -408,7 +408,7 @@ export default function BuildDetailsPage() {
               type="button"
               onClick={() => {
                 localStorage.removeItem(STORAGE_KEY);
-                router.push("/gunbuilder");
+                router.push("/builder");
               }}
               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"
             >

app/(builder)/layout.tsx

@@ -0,0 +1,11 @@
+import { TopNav } from "@/components/TopNav";
+import type { ReactNode } from "react";
+
+export default function BuilderLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-black text-zinc-50">
+      <TopNav />
+      {children}
+    </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";
+
+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);
+      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">
+            Email Requests
+          </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.email}</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">
+                    {new Date(email.updatedAt).toLocaleString()}
+                  </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/layout.tsx

@@ -0,0 +1,157 @@
+"use client";
+import type React from "react";
+import { useState } from "react";
+import {
+  LayoutDashboard,
+  Download,
+  Layers,
+  Boxes,
+  Store,
+  Users,
+  Settings,
+} from "lucide-react";
+
+const navItems = [
+  {
+    label: "Dashboard",
+    href: "/admin",
+    icon: <LayoutDashboard className="h-4 w-4" />,
+  },
+  {
+    label: "Imports",
+    href: "/admin/import-status",
+    icon: <Download className="h-4 w-4" />,
+  },
+  {
+    label: "Mappings",
+    href: "/admin/mapping",
+    icon: <Layers className="h-4 w-4" />,
+  },
+  {
+    label: "Products (TO DO)",
+    href: "/admin/products",
+    icon: <Boxes className="h-4 w-4" />,
+  },
+  {
+    label: "Merchants",
+    href: "/admin/merchants",
+    icon: <Store className="h-4 w-4" />,
+  },
+  {
+    label: "Users",
+    href: "/admin/users",
+    icon: <Users className="h-4 w-4" />,
+  },
+  {
+    label: "Settings (TO DO)",
+    href: "/admin/settings",
+    icon: <Settings className="h-4 w-4" />,
+  },
+];
+
+// ADMIN CHECK FOR LOGIN
+// const { user, loading } = useAuth();
+
+// if (!loading && user?.role !== "ADMIN") {
+//   redirect("/"); // or /login
+// }
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  return (
+    <div className="flex min-h-screen bg-black text-zinc-50">
+      {/* Sidebar */}
+      <aside
+        className={`hidden border-r border-zinc-900 bg-zinc-950/80 px-3 py-6 md:flex md:flex-col transition-all duration-200 ${
+          collapsed ? "w-16" : "w-60"
+        }`}
+      >
+        <div className="mb-6 flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setCollapsed((v) => !v)}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 transition hover:border-amber-400/60 hover:text-amber-300"
+          >
+            <span className="sr-only">Toggle sidebar</span>
+            <div className="space-y-0.5">
+              <span className="block h-[1px] w-3 bg-current" />
+              <span className="block h-[1px] w-3 bg-current" />
+              <span className="block h-[1px] w-3 bg-current" />
+            </div>
+          </button>
+
+          {!collapsed && (
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
+                Battl Builders
+              </p>
+              <p className="text-[10px] text-zinc-600">Admin Command</p>
+            </div>
+          )}
+        </div>
+
+        <nav className="flex-1 space-y-1 text-sm">
+          {navItems.map((item) => (
+            <a
+              key={item.href}
+              href={item.href}
+              className="flex items-center justify-between rounded-md px-2 py-1.5 text-zinc-300 transition hover:bg-zinc-900 hover:text-amber-300"
+            >
+              <div className="flex items-center gap-2">
+                {item.icon}
+                {!collapsed && <span>{item.label}</span>}
+              </div>
+              {!collapsed && (
+                <span className="text-[10px] text-zinc-600">›</span>
+              )}
+            </a>
+          ))}
+        </nav>
+
+        {!collapsed && (
+          <div className="mt-6 border-t border-zinc-900 pt-4 text-[11px] text-zinc-600">
+            <p className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
+              Status
+            </p>
+            <p className="mt-1">
+              Import engine: <span className="text-emerald-400">online</span>
+            </p>
+            <p className="text-zinc-500">Builder UI: in progress</p>
+          </div>
+        )}
+      </aside>
+
+      {/* Main column */}
+      <div className="flex min-h-screen flex-1 flex-col">
+        {/* Top bar */}
+        <header className="flex items-center justify-between border-b border-zinc-900 bg-zinc-950/70 px-4 py-3">
+          <div>
+            <p className="text-xs uppercase tracking-[0.18em] text-zinc-500">
+              Admin
+            </p>
+            <p className="text-sm text-zinc-200">
+              Battl Builders Control Panel
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="rounded-full border border-amber-500/30 bg-amber-500/10 px-3 py-1 text-[11px] font-medium text-amber-300">
+              Internal • v0.1
+            </span>
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-900 text-[11px] text-zinc-300">
+              ADMIN
+            </div>
+          </div>
+        </header>
+
+        {/* Content */}
+        <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

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/builds/layout.tsx

@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

app/layout.tsx

@@ -1,27 +1,28 @@
-
+// app/layout.tsx
 import "./globals.css";
 import type { ReactNode } from "react";
 import { AuthProvider } from "@/context/AuthContext";
-import { TopNav } from "@/components/TopNav";
+
-import { BuilderNav } from "@/components/BuilderNav";
+import { Banner } from "@/components/Banner";
 
 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.",
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body className="bg-black text-zinc-100">
+      <body className="bg-black text-zinc-50">
+        
         <AuthProvider>
-          <TopNav />
+        <Banner />
-          <BuilderNav />
+        {children}
-          <main className="min-h-screen">{children}</main>
         </AuthProvider>
+
       </body>
     </html>
   );

app/login/page.tsx

@@ -15,7 +15,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();

app/page.tsx

@@ -1,33 +1,228 @@
-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
-            href="/builder"
-            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"
             >
-            Launch The Builder
+              <path
-          </Link>
+                d="M 80 0 L 0 0 0 80"
+                fill="none"
+                stroke="#fbbf24"
+                strokeWidth="0.5"
+                strokeOpacity="0.35"
+              />
+            </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">
+            {/* Logo slot – replace src with your actual logo file */}
+            <div className="flex items-center">
+              <Image
+                src="/battl/battl-logo-mark-2.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

@@ -16,7 +16,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();

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/PricingHistoryGraph.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { PriceHistoryPoint } from "@/app/builder/[categoryId]/[partId]/data";
+import type { PriceHistoryPoint } from "@/app/(builder)/builder/[categoryId]/[partId]/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)/builder/[categoryId]/[partId]/data";
 
 interface RetailersListProps {
   retailers: RetailerOffer[];

components/TopNav.tsx

@@ -11,23 +11,6 @@ export function TopNav() {
 
   return (
     <header className="border-b border-zinc-800 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">
@@ -39,25 +22,6 @@ export function TopNav() {
           Battl Builder
         </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">
           {/* Search placeholder */}

lib/api/emailRequests.ts

@@ -0,0 +1,80 @@
+export interface EmailRequest {
+  id: number;
+  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}`);
+  }
+}

package-lock.json

@@ -994,7 +994,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1435,7 +1434,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -2098,7 +2096,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 +2264,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4429,7 +4425,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
@@ -4588,7 +4583,6 @@
       "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 +4595,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"
@@ -5548,7 +5541,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5718,7 +5710,6 @@
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

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.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>

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