lots of admin stuff. admin layout, user mangement page, new landing page, etc
This commit is contained in:
@@ -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>
|
||||
// );
|
||||
// }
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
import type React from "react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Download,
|
||||
Layers,
|
||||
Boxes,
|
||||
Store,
|
||||
Users,
|
||||
Settings,
|
||||
} from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "/admin",
|
||||
icon: <LayoutDashboard className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Imports",
|
||||
href: "/admin/import-status",
|
||||
icon: <Download className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Mappings",
|
||||
href: "/admin/mapping",
|
||||
icon: <Layers className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Products (TO DO)",
|
||||
href: "/admin/products",
|
||||
icon: <Boxes className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Merchants",
|
||||
href: "/admin/merchants",
|
||||
icon: <Store className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Users (TO DO)",
|
||||
href: "/admin/users",
|
||||
icon: <Users className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Settings (TO DO)",
|
||||
href: "/admin/settings",
|
||||
icon: <Settings className="h-4 w-4" />,
|
||||
},
|
||||
];
|
||||
|
||||
// ADMIN CHECK FOR LOGIN
|
||||
// const { user, loading } = useAuth();
|
||||
|
||||
// if (!loading && user?.role !== "ADMIN") {
|
||||
// redirect("/"); // or /login
|
||||
// }
|
||||
|
||||
export default function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
return (
|
||||
<div className="flex min-h-screen bg-black text-zinc-50">
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`hidden border-r border-zinc-900 bg-zinc-950/80 px-3 py-6 md:flex md:flex-col transition-all duration-200 ${
|
||||
collapsed ? "w-16" : "w-60"
|
||||
}`}
|
||||
>
|
||||
<div className="mb-6 flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCollapsed((v) => !v)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 transition hover:border-amber-400/60 hover:text-amber-300"
|
||||
>
|
||||
<span className="sr-only">Toggle sidebar</span>
|
||||
<div className="space-y-0.5">
|
||||
<span className="block h-[1px] w-3 bg-current" />
|
||||
<span className="block h-[1px] w-3 bg-current" />
|
||||
<span className="block h-[1px] w-3 bg-current" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{!collapsed && (
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
|
||||
Battl Builders
|
||||
</p>
|
||||
<p className="text-[10px] text-zinc-600">Admin Command</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1 text-sm">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="flex items-center justify-between rounded-md px-2 py-1.5 text-zinc-300 transition hover:bg-zinc-900 hover:text-amber-300"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{item.icon}
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<span className="text-[10px] text-zinc-600">›</span>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{!collapsed && (
|
||||
<div className="mt-6 border-t border-zinc-900 pt-4 text-[11px] text-zinc-600">
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
|
||||
Status
|
||||
</p>
|
||||
<p className="mt-1">
|
||||
Import engine: <span className="text-emerald-400">online</span>
|
||||
</p>
|
||||
<p className="text-zinc-500">Builder UI: in progress</p>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
{/* Main column */}
|
||||
<div className="flex min-h-screen flex-1 flex-col">
|
||||
{/* Top bar */}
|
||||
<header className="flex items-center justify-between border-b border-zinc-900 bg-zinc-950/70 px-4 py-3">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-zinc-500">
|
||||
Admin
|
||||
</p>
|
||||
<p className="text-sm text-zinc-200">
|
||||
Battl Builders Control Panel
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="rounded-full border border-amber-500/30 bg-amber-500/10 px-3 py-1 text-[11px] font-medium text-amber-300">
|
||||
Internal • v0.1
|
||||
</span>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-900 text-[11px] text-zinc-300">
|
||||
ADMIN
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<main className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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'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's next request. All new
|
||||
accounts are created as <span className="text-zinc-300">USER</span> by
|
||||
default.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
+9
-14
@@ -1,27 +1,22 @@
|
||||
|
||||
// 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";
|
||||
|
||||
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.",
|
||||
};
|
||||
import { Banner } from "@/components/Banner";
|
||||
import { TopNav } from "@/components/TopNav";
|
||||
|
||||
|
||||
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 />
|
||||
<BuilderNav />
|
||||
<main className="min-h-screen">{children}</main>
|
||||
<Banner />
|
||||
{children}
|
||||
</AuthProvider>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
+224
-24
@@ -1,33 +1,233 @@
|
||||
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">
|
||||
<div className="max-w-xl text-center">
|
||||
<p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
|
||||
For Those Who Build With Intent.
|
||||
</p>
|
||||
<h1
|
||||
className="mt-2 text-4xl md:text-5xl font-extrabold tracking-tight
|
||||
bg-gradient-to-r from-amber-400 via-amber-200 to-amber-400
|
||||
text-transparent uppercase bg-clip-text drop-shadow-[0_2px_6px_rgba(255,193,7,0.25)]"
|
||||
<main className="min-h-screen bg-black text-zinc-50">
|
||||
{/* Abstract Brand Background */}
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden opacity-[0.065]">
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
Battl Builder™
|
||||
</h1>
|
||||
<p className="mt-3 text-sm md:text-base text-zinc-400">
|
||||
Battl Builder™ is your command center for rifle builds. We surface live
|
||||
parts and hard-use brands, giving you a mission-ready workbench to
|
||||
design smarter, track cost, swap components, and save setups. No
|
||||
fluff. Just clean, trustworthy data.
|
||||
</p>
|
||||
<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"
|
||||
<defs>
|
||||
<pattern
|
||||
id="battlGrid"
|
||||
x="0"
|
||||
y="0"
|
||||
width="80"
|
||||
height="80"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
Launch The Builder
|
||||
</Link>
|
||||
<path
|
||||
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="relative h-10 w-10 overflow-hidden rounded-md border border-zinc-800 bg-zinc-900">
|
||||
<Image
|
||||
src="/battl-logo-mark.svg"
|
||||
alt="Battl Builders logo"
|
||||
fill
|
||||
className="object-contain p-1.5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-zinc-500">
|
||||
Battl Builders
|
||||
</p>
|
||||
|
||||
</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'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>
|
||||
<span className="text-zinc-600">
|
||||
v0.1 • Import engine online • Builder UI in progress
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -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'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;
|
||||
@@ -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[];
|
||||
|
||||
@@ -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[];
|
||||
|
||||
@@ -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'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 */}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
// app/api/beta-signup/route.ts
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const { email, useCase } = await request.json();
|
||||
|
||||
if (!email || typeof email !== "string") {
|
||||
return NextResponse.json({ error: "Email is required" }, { status: 400 });
|
||||
}
|
||||
|
||||
// TODO: Wire this to Brevo
|
||||
// - Either call Brevo's API directly from here
|
||||
// - Or POST to your Spring backend which then talks to Brevo
|
||||
//
|
||||
// Example (pseudo):
|
||||
// await fetch("https://api.brevo.com/v3/contacts", {
|
||||
// method: "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// "api-key": process.env.BREVO_API_KEY!,
|
||||
// },
|
||||
// body: JSON.stringify({
|
||||
// email,
|
||||
// attributes: { USE_CASE: useCase },
|
||||
// listIds: [123], // your Brevo list ID
|
||||
// updateEnabled: true,
|
||||
// }),
|
||||
// });
|
||||
|
||||
console.log("New beta signup:", { email, useCase });
|
||||
|
||||
return NextResponse.json({ ok: true });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return NextResponse.json({ error: "Server error" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user