Merge branch 'clean-data' into develop
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button, Field, Input } from "@/components/ui/form";
|
||||
|
||||
export default function AdminBetaInvitesPage() {
|
||||
const [dryRun, setDryRun] = useState(true);
|
||||
const [limit, setLimit] = useState("1");
|
||||
const [tokenMinutes, setTokenMinutes] = useState("30");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [result, setResult] = useState<any>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function runInvites() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
|
||||
try {
|
||||
const qs = new URLSearchParams({
|
||||
dryRun: String(dryRun),
|
||||
limit: String(limit || "0"),
|
||||
tokenMinutes: String(tokenMinutes || "30"),
|
||||
});
|
||||
|
||||
const res = await fetch(`/api/admin/beta-invites?${qs.toString()}`, {
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data?.message || data?.error || "Request failed");
|
||||
|
||||
setResult(data);
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? "Failed");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">Send Beta Invites</h1>
|
||||
<p className="mt-1 text-sm text-zinc-400">
|
||||
Runs the backend batch invite sender (uses your email templates + tracking).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-zinc-900 bg-zinc-950 p-4 space-y-4">
|
||||
<label className="flex items-center gap-2 text-sm text-zinc-200">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={dryRun}
|
||||
onChange={(e) => setDryRun(e.target.checked)}
|
||||
/>
|
||||
Dry run (do everything except actually send)
|
||||
</label>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Field label="Limit" htmlFor="limit">
|
||||
<Input id="limit" value={limit} onChange={(e) => setLimit(e.target.value)} />
|
||||
</Field>
|
||||
|
||||
<Field label="Token minutes" htmlFor="tokenMinutes">
|
||||
<Input
|
||||
id="tokenMinutes"
|
||||
value={tokenMinutes}
|
||||
onChange={(e) => setTokenMinutes(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Button onClick={runInvites} disabled={loading}>
|
||||
{loading ? "Running…" : "Send Beta Invites"}
|
||||
</Button>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<pre className="overflow-auto rounded-md border border-zinc-800 bg-black/40 p-3 text-xs text-zinc-200">
|
||||
{JSON.stringify(result, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,585 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Check, X, Wand2, RefreshCw } from "lucide-react";
|
||||
|
||||
type EnrichmentStatus = "PENDING_REVIEW" | "APPROVED" | "REJECTED" | "APPLIED";
|
||||
type EnrichmentType = "CALIBER" | "CALIBER_GROUP";
|
||||
type EnrichmentSource = "RULES" | "AI";
|
||||
|
||||
type QueueItem = {
|
||||
id: number;
|
||||
productId: number;
|
||||
productName?: string;
|
||||
productSlug?: string;
|
||||
mainImageUrl?: string;
|
||||
brandName?: string;
|
||||
enrichmentType: EnrichmentType;
|
||||
source: EnrichmentSource;
|
||||
status: EnrichmentStatus;
|
||||
attributes: Record<string, any>;
|
||||
confidence: number;
|
||||
rationale?: string;
|
||||
createdAt: string;
|
||||
|
||||
// NEW: current value on products table (so we can prevent bad applies)
|
||||
productCaliber?: string | null;
|
||||
productCaliberGroup?: string | null;
|
||||
|
||||
};
|
||||
|
||||
const API_BASE =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
|
||||
|
||||
function getAuthHeaders(): HeadersInit {
|
||||
if (typeof window === "undefined") return {};
|
||||
const token =
|
||||
localStorage.getItem("token") ||
|
||||
localStorage.getItem("jwt") ||
|
||||
localStorage.getItem("accessToken");
|
||||
|
||||
return token ? { Authorization: `Bearer ${token}` } : {};
|
||||
}
|
||||
|
||||
async function apiFetch(path: string, init?: RequestInit) {
|
||||
const res = await fetch(`${API_BASE}${path}`, {
|
||||
...init,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...getAuthHeaders(),
|
||||
...(init?.headers ?? {}),
|
||||
},
|
||||
// If you're using cookie auth instead of bearer, flip this on:
|
||||
// credentials: "include",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => "");
|
||||
throw new Error(text || `Request failed (${res.status})`);
|
||||
}
|
||||
|
||||
const ct = res.headers.get("content-type") ?? "";
|
||||
if (ct.includes("application/json")) return res.json();
|
||||
return res.text();
|
||||
}
|
||||
|
||||
function hasProductCaliber(it: QueueItem) {
|
||||
const c = it.productCaliber;
|
||||
return typeof c === "string" && c.trim().length > 0;
|
||||
}
|
||||
|
||||
function hasAlreadySet(it: QueueItem) {
|
||||
if (it.enrichmentType === "CALIBER") {
|
||||
return hasProductCaliber(it);
|
||||
}
|
||||
const g = it.productCaliberGroup;
|
||||
return typeof g === "string" && g.trim().length > 0;
|
||||
}
|
||||
|
||||
// ✅ ADD THIS: text for the “Already set:” pill
|
||||
function alreadySetLabel(it: QueueItem) {
|
||||
return it.enrichmentType === "CALIBER" ? it.productCaliber : it.productCaliberGroup;
|
||||
}
|
||||
|
||||
export default function EnrichmentQueueClient() {
|
||||
const [type, setType] = useState<EnrichmentType>("CALIBER");
|
||||
const [status, setStatus] = useState<EnrichmentStatus>("PENDING_REVIEW");
|
||||
const [limit, setLimit] = useState<number>(50);
|
||||
|
||||
const [items, setItems] = useState<QueueItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [busyId, setBusyId] = useState<number | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Bulk selection
|
||||
const [selected, setSelected] = useState<Record<number, boolean>>({});
|
||||
|
||||
// “Fancy” per-row UI: treat an item as “locally approved/rejected” immediately
|
||||
// so the row swaps buttons without waiting for a reload.
|
||||
const [localStatus, setLocalStatus] = useState<
|
||||
Record<number, EnrichmentStatus>
|
||||
>({});
|
||||
|
||||
const count = useMemo(() => items.length, [items]);
|
||||
|
||||
const selectedIds = useMemo(
|
||||
() =>
|
||||
Object.entries(selected)
|
||||
.filter(([, v]) => v)
|
||||
.map(([k]) => Number(k)),
|
||||
[selected]
|
||||
);
|
||||
|
||||
|
||||
const allOnPageSelected = useMemo(() => {
|
||||
if (items.length === 0) return false;
|
||||
return items.every((it) => selected[it.id]);
|
||||
}, [items, selected]);
|
||||
|
||||
function toggleAllOnPage() {
|
||||
const next = { ...selected };
|
||||
const nextValue = !allOnPageSelected;
|
||||
for (const it of items) next[it.id] = nextValue;
|
||||
setSelected(next);
|
||||
}
|
||||
|
||||
function toggleOne(id: number) {
|
||||
setSelected((prev) => ({ ...prev, [id]: !prev[id] }));
|
||||
}
|
||||
|
||||
function effectiveStatus(it: QueueItem): EnrichmentStatus {
|
||||
return localStatus[it.id] ?? it.status;
|
||||
}
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = (await apiFetch(
|
||||
`/api/admin/enrichment/queue2?type=${encodeURIComponent(
|
||||
type
|
||||
)}&status=${encodeURIComponent(status)}&limit=${limit}`
|
||||
)) as QueueItem[];
|
||||
|
||||
setItems(data ?? []);
|
||||
|
||||
// Keep selection only for items still visible
|
||||
setSelected((prev) => {
|
||||
const keep = new Set((data ?? []).map((x) => x.id));
|
||||
const next: Record<number, boolean> = {};
|
||||
for (const [k, v] of Object.entries(prev)) {
|
||||
const id = Number(k);
|
||||
if (keep.has(id)) next[id] = v;
|
||||
}
|
||||
return next;
|
||||
});
|
||||
|
||||
// Reset local status for items not in view
|
||||
setLocalStatus((prev) => {
|
||||
const keep = new Set((data ?? []).map((x) => x.id));
|
||||
const next: Record<number, EnrichmentStatus> = {};
|
||||
for (const [k, v] of Object.entries(prev)) {
|
||||
const id = Number(k);
|
||||
if (keep.has(id)) next[id] = v;
|
||||
}
|
||||
return next;
|
||||
});
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? "Failed to load queue");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function runRules() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await apiFetch(
|
||||
`/api/admin/enrichment/run?type=${encodeURIComponent(type)}&limit=200`,
|
||||
{ method: "POST" }
|
||||
);
|
||||
setStatus("PENDING_REVIEW");
|
||||
setTimeout(load, 50);
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? "Failed to run rules");
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function runAi() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await apiFetch(
|
||||
`/api/admin/enrichment/ai/run?type=${encodeURIComponent(type)}&limit=200`,
|
||||
{ method: "POST" }
|
||||
);
|
||||
setStatus("PENDING_REVIEW");
|
||||
setTimeout(load, 50);
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? "Failed to run AI");
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function act(id: number, action: "approve" | "reject" | "apply") {
|
||||
setBusyId(id);
|
||||
setError(null);
|
||||
|
||||
// Optimistic UI for approve/reject so the row instantly changes
|
||||
if (action === "approve")
|
||||
setLocalStatus((p) => ({ ...p, [id]: "APPROVED" }));
|
||||
if (action === "reject")
|
||||
setLocalStatus((p) => ({ ...p, [id]: "REJECTED" }));
|
||||
|
||||
try {
|
||||
await apiFetch(`/api/admin/enrichment/${id}/${action}`, {
|
||||
method: "POST",
|
||||
});
|
||||
await load();
|
||||
} catch (e: any) {
|
||||
// rollback optimistic local status on error
|
||||
setLocalStatus((p) => {
|
||||
const next = { ...p };
|
||||
delete next[id];
|
||||
return next;
|
||||
});
|
||||
setError(e?.message ?? `Failed to ${action}`);
|
||||
} finally {
|
||||
setBusyId(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function bulk(action: "approve" | "reject" | "apply") {
|
||||
const ids = selectedIds;
|
||||
if (ids.length === 0) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Apply should only run for items that are APPROVED (effective status) AND product caliber is blank
|
||||
const byId = new Map(items.map((x) => [x.id, x]));
|
||||
const filtered =
|
||||
action === "apply"
|
||||
? ids.filter((id) => {
|
||||
const it = byId.get(id);
|
||||
if (!it) return false;
|
||||
return (
|
||||
effectiveStatus(it) === "APPROVED" && !hasAlreadySet(it)
|
||||
);
|
||||
})
|
||||
: ids;
|
||||
|
||||
for (const id of filtered) {
|
||||
// optimistic statuses for approve/reject in bulk
|
||||
if (action === "approve")
|
||||
setLocalStatus((p) => ({ ...p, [id]: "APPROVED" }));
|
||||
if (action === "reject")
|
||||
setLocalStatus((p) => ({ ...p, [id]: "REJECTED" }));
|
||||
|
||||
await apiFetch(`/api/admin/enrichment/${id}/${action}`, {
|
||||
method: "POST",
|
||||
});
|
||||
}
|
||||
|
||||
setSelected({});
|
||||
await load();
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? `Failed to bulk ${action}`);
|
||||
setLoading(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [type, status, limit]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Controls */}
|
||||
<div className="flex flex-col gap-3 rounded-md border border-zinc-800 bg-zinc-950/40 p-4">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="text-sm text-zinc-400">
|
||||
Showing <span className="text-zinc-200 font-medium">{count}</span>
|
||||
</div>
|
||||
|
||||
<select
|
||||
className="h-9 rounded-md border border-zinc-800 bg-zinc-900 px-3 text-sm text-zinc-100"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value as EnrichmentType)}
|
||||
>
|
||||
<option value="CALIBER">CALIBER</option>
|
||||
<option value="CALIBER_GROUP">CALIBER_GROUP</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
className="h-9 rounded-md border border-zinc-800 bg-zinc-900 px-3 text-sm text-zinc-100"
|
||||
value={status}
|
||||
onChange={(e) => {
|
||||
setSelected({});
|
||||
setLocalStatus({});
|
||||
setStatus(e.target.value as EnrichmentStatus);
|
||||
}}
|
||||
>
|
||||
<option value="PENDING_REVIEW">PENDING_REVIEW</option>
|
||||
<option value="APPROVED">APPROVED</option>
|
||||
<option value="REJECTED">REJECTED</option>
|
||||
<option value="APPLIED">APPLIED</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
className="h-9 rounded-md border border-zinc-800 bg-zinc-900 px-3 text-sm text-zinc-100"
|
||||
value={limit}
|
||||
onChange={(e) => setLimit(parseInt(e.target.value, 10))}
|
||||
>
|
||||
<option value={25}>25</option>
|
||||
<option value={50}>50</option>
|
||||
<option value={100}>100</option>
|
||||
<option value={200}>200</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={load}
|
||||
className="inline-flex items-center gap-2 rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 hover:bg-zinc-800"
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`h-4 w-4 ${loading ? "animate-spin" : ""}`}
|
||||
/>
|
||||
Refresh
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={runRules}
|
||||
className="inline-flex items-center gap-2 rounded-md bg-amber-400 px-3 py-2 text-sm font-semibold text-black hover:bg-amber-300"
|
||||
disabled={loading}
|
||||
title="Run enrichment rules to create new suggestions"
|
||||
>
|
||||
<Wand2 className="h-4 w-4" />
|
||||
Run Rules
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={runAi}
|
||||
className="inline-flex items-center gap-2 rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 hover:bg-zinc-800"
|
||||
disabled={loading}
|
||||
title="Run AI enrichment to create new suggestions"
|
||||
>
|
||||
<Wand2 className="h-4 w-4" />
|
||||
Run AI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bulk action bar */}
|
||||
{selectedIds.length > 0 ? (
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 rounded-md border border-zinc-800 bg-zinc-950/40 p-3">
|
||||
<div className="text-sm text-zinc-300">
|
||||
Selected{" "}
|
||||
<span className="font-semibold">{selectedIds.length}</span>
|
||||
<span className="ml-2 text-xs text-zinc-500">
|
||||
(Apply only works on APPROVED + product caliber blank)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => bulk("approve")}
|
||||
className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 hover:bg-zinc-800"
|
||||
disabled={loading}
|
||||
>
|
||||
Approve Selected
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => bulk("reject")}
|
||||
className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 hover:bg-zinc-800"
|
||||
disabled={loading}
|
||||
>
|
||||
Reject Selected
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => bulk("apply")}
|
||||
className="rounded-md bg-amber-400 px-3 py-2 text-sm font-semibold text-black hover:bg-amber-300"
|
||||
disabled={loading}
|
||||
title="Applies only APPROVED rows where product caliber is blank"
|
||||
>
|
||||
Apply Selected
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelected({})}
|
||||
className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 hover:bg-zinc-800"
|
||||
disabled={loading}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="rounded-md border border-red-900/50 bg-red-950/30 p-3 text-sm text-red-200">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-hidden rounded-md border border-zinc-800">
|
||||
<div className="grid grid-cols-[40px_minmax(0,1fr)_120px_140px_160px] gap-3 border-b border-zinc-800 bg-zinc-950 px-4 py-3 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500">
|
||||
<div className="flex items-center justify-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allOnPageSelected}
|
||||
onChange={toggleAllOnPage}
|
||||
className="h-4 w-4 accent-amber-400"
|
||||
aria-label="Select all"
|
||||
/>
|
||||
</div>
|
||||
<div>Product</div>
|
||||
<div className="text-right">Confidence</div>
|
||||
<div className="text-right">Suggested</div>
|
||||
<div className="text-right">Actions</div>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-zinc-800 bg-zinc-950/40">
|
||||
{items.length === 0 ? (
|
||||
<div className="p-6 text-sm text-zinc-400">No items found.</div>
|
||||
) : (
|
||||
items.map((it) => {
|
||||
const suggested =
|
||||
it.enrichmentType === "CALIBER"
|
||||
? it.attributes?.caliber
|
||||
: it.attributes?.caliberGroup; const isBusy = busyId === it.id;
|
||||
const st = effectiveStatus(it);
|
||||
const alreadySet = hasAlreadySet(it);
|
||||
const alreadySetValue = alreadySetLabel(it);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={it.id}
|
||||
className="grid grid-cols-[40px_minmax(0,1fr)_120px_140px_160px] gap-3 px-4 py-3"
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!selected[it.id]}
|
||||
onChange={() => toggleOne(it.id)}
|
||||
className="h-4 w-4 accent-amber-400"
|
||||
aria-label={`Select enrichment ${it.id}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-start gap-3">
|
||||
{it.mainImageUrl ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={it.mainImageUrl}
|
||||
alt=""
|
||||
className="h-10 w-10 rounded border border-zinc-800 object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-10 w-10 rounded border border-zinc-800 bg-zinc-900" />
|
||||
)}
|
||||
|
||||
<div className="min-w-0">
|
||||
<a
|
||||
href={`/admin/products/${it.productId}`}
|
||||
className="text-sm font-semibold text-zinc-100 hover:underline line-clamp-2"
|
||||
>
|
||||
{it.productName ?? `Product #${it.productId}`}
|
||||
</a>
|
||||
|
||||
<div className="mt-0.5 text-xs text-zinc-500">
|
||||
{it.brandName ? `${it.brandName} • ` : ""}
|
||||
{it.source} • {st}
|
||||
{alreadySet ? (
|
||||
<span className="ml-2 inline-flex items-center rounded-md border border-zinc-700 bg-zinc-900 px-2 py-0.5 text-[10px] font-semibold text-zinc-300">
|
||||
Already set: {alreadySetValue}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{it.rationale ? (
|
||||
<div className="mt-1 text-xs text-zinc-400 line-clamp-2">
|
||||
{it.rationale}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right text-sm font-semibold text-zinc-200">
|
||||
{(it.confidence ?? 0).toFixed(2)}
|
||||
</div>
|
||||
|
||||
<div className="text-right text-sm text-amber-300">
|
||||
{suggested ?? "—"}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
{st === "PENDING_REVIEW" && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => act(it.id, "approve")}
|
||||
disabled={isBusy || alreadySet}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-900 text-zinc-100 hover:bg-zinc-800 disabled:opacity-50"
|
||||
title={
|
||||
alreadySet
|
||||
? "Product caliber already set"
|
||||
: "Approve"
|
||||
}
|
||||
aria-label="Approve"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => act(it.id, "reject")}
|
||||
disabled={isBusy}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-900 text-zinc-100 hover:bg-zinc-800 disabled:opacity-50"
|
||||
title="Reject"
|
||||
aria-label="Reject"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{st === "APPROVED" && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => act(it.id, "apply")}
|
||||
disabled={isBusy || alreadySet}
|
||||
className="inline-flex h-8 items-center justify-center rounded-md bg-amber-400 px-3 text-xs font-semibold text-black hover:bg-amber-300 disabled:opacity-50"
|
||||
title={
|
||||
alreadySet
|
||||
? `Already set on product: ${alreadySetValue}`
|
||||
: "Apply (writes to product if blank)"
|
||||
}
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
)}
|
||||
|
||||
{st === "APPLIED" && (
|
||||
<span className="inline-flex h-8 items-center rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 text-xs font-semibold text-emerald-200">
|
||||
Applied
|
||||
</span>
|
||||
)}
|
||||
|
||||
{st === "REJECTED" && (
|
||||
<span className="inline-flex h-8 items-center rounded-md border border-red-500/30 bg-red-500/10 px-3 text-xs font-semibold text-red-200">
|
||||
Rejected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import EnrichmentQueueClient from "./EnrichmentQueueClient";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default function AdminEnrichmentPage() {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-6xl px-6 py-8">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-xl font-semibold text-zinc-50">Enrichment Queue</h1>
|
||||
<p className="mt-1 text-sm text-zinc-400">
|
||||
Review AI/rules suggestions, approve/reject, then apply to products.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<EnrichmentQueueClient />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+83
-88
@@ -1,7 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import AdminLeftNavigation from "@/components/AdminLeftNavigation";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Download,
|
||||
@@ -11,110 +14,102 @@ import {
|
||||
Users,
|
||||
Settings,
|
||||
LucideMail,
|
||||
Wand2,
|
||||
} from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "/admin",
|
||||
icon: <LayoutDashboard className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Imports",
|
||||
href: "/admin/import-status",
|
||||
icon: <Download className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Mappings",
|
||||
href: "/admin/mapping",
|
||||
icon: <Layers className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Products",
|
||||
href: "/admin/products",
|
||||
icon: <Boxes className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Merchants",
|
||||
href: "/admin/merchants",
|
||||
icon: <Store className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Platforms",
|
||||
href: "/admin/platforms",
|
||||
icon: <Layers className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Users",
|
||||
href: "/admin/users",
|
||||
icon: <Users className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
href: "/admin/settings",
|
||||
icon: <Settings className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "List Emails",
|
||||
href: "/admin/email",
|
||||
icon: <LucideMail className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Send a Email",
|
||||
href: "/admin/email/send",
|
||||
icon: <LucideMail className="h-4 w-4" />,
|
||||
},
|
||||
{ label: "Dashboard", href: "/admin", icon: <LayoutDashboard className="h-4 w-4" /> },
|
||||
{ label: "Imports", href: "/admin/import-status", icon: <Download className="h-4 w-4" /> },
|
||||
{ label: "Mappings", href: "/admin/mapping", icon: <Layers className="h-4 w-4" /> },
|
||||
{ label: "Products", href: "/admin/products", icon: <Boxes className="h-4 w-4" /> },
|
||||
{ label: "Merchants", href: "/admin/merchants", icon: <Store className="h-4 w-4" /> },
|
||||
{ label: "Platforms", href: "/admin/platforms", icon: <Layers className="h-4 w-4" /> },
|
||||
{ label: "Enrichment", href: "/admin/enrichment", icon: <Wand2 className="h-4 w-4" /> },
|
||||
{ label: "Users", href: "/admin/users", icon: <Users className="h-4 w-4" /> },
|
||||
{ label: "Settings", href: "/admin/settings", icon: <Settings className="h-4 w-4" /> },
|
||||
{ label: "List Emails", href: "/admin/email", icon: <LucideMail className="h-4 w-4" /> },
|
||||
{ label: "Send an Email", href: "/admin/email/send", icon: <LucideMail className="h-4 w-4" /> },
|
||||
{ label: "Beta Invites", href: "/admin/beta-invites", icon: <LucideMail className="h-4 w-4" /> },
|
||||
|
||||
];
|
||||
|
||||
// ... existing code ...
|
||||
// ADMIN CHECK FOR LOGIN
|
||||
// const { user, loading } = useAuth();
|
||||
|
||||
// if (!loading && user?.role !== "ADMIN") {
|
||||
// redirect("/"); // or /login
|
||||
// }
|
||||
|
||||
export default function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const { user, loading } = useAuth();
|
||||
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
// Where to send people back after login
|
||||
const next = useMemo(
|
||||
() => encodeURIComponent(pathname || "/admin"),
|
||||
[pathname]
|
||||
);
|
||||
|
||||
/**
|
||||
* ✅ AUTH GUARD
|
||||
* Redirects happen in useEffect (NOT during render)
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (loading) return;
|
||||
|
||||
// Not logged in
|
||||
if (!user) {
|
||||
router.replace(`/login?next=${next}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Logged in but not admin
|
||||
if (user.role !== "ADMIN") {
|
||||
router.replace("/");
|
||||
}
|
||||
}, [loading, user, router, next]);
|
||||
|
||||
// While loading OR redirecting, render nothing
|
||||
if (loading) return null;
|
||||
if (!user) return null;
|
||||
if (user.role !== "ADMIN") return null;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-black text-zinc-50">
|
||||
<AdminLeftNavigation
|
||||
collapsed={collapsed}
|
||||
onToggleCollapsed={() => setCollapsed((v) => !v)}
|
||||
/>
|
||||
<div className="flex min-h-screen bg-black text-zinc-50">
|
||||
<AdminLeftNavigation
|
||||
collapsed={collapsed}
|
||||
onToggleCollapsed={() => setCollapsed((v) => !v)}
|
||||
items={navItems}
|
||||
/>
|
||||
|
||||
{/* 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">
|
||||
{/* 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 className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-900 text-[11px] text-zinc-300">
|
||||
ADMIN
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<main className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
{/* 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,35 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { cookies } from "next/headers";
|
||||
|
||||
const API_BASE_URL =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
|
||||
|
||||
// POST /api/admin/beta-invites?dryRun=true&limit=10&tokenMinutes=30
|
||||
export async function POST(req: Request) {
|
||||
const token = cookies().get("bb_access_token")?.value;
|
||||
|
||||
if (!token) {
|
||||
return NextResponse.json({ error: "Missing admin token" }, { status: 401 });
|
||||
}
|
||||
|
||||
const url = new URL(req.url);
|
||||
const dryRun = url.searchParams.get("dryRun") ?? "true";
|
||||
const limit = url.searchParams.get("limit") ?? "0";
|
||||
const tokenMinutes = url.searchParams.get("tokenMinutes") ?? "30";
|
||||
|
||||
const upstream = `${API_BASE_URL}/api/v1/admin/beta/invites/send?dryRun=${dryRun}&limit=${limit}&tokenMinutes=${tokenMinutes}`;
|
||||
|
||||
const res = await fetch(upstream, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
const text = await res.text();
|
||||
return new NextResponse(text, {
|
||||
status: res.status,
|
||||
headers: { "Content-Type": res.headers.get("content-type") ?? "application/json" },
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const { token, role } = await req.json();
|
||||
|
||||
if (!token) {
|
||||
return NextResponse.json({ ok: false }, { status: 400 });
|
||||
}
|
||||
|
||||
const res = NextResponse.json({ ok: true });
|
||||
|
||||
// Server-readable, JS-unreadable
|
||||
res.cookies.set("bb_access_token", token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "lax",
|
||||
path: "/",
|
||||
});
|
||||
|
||||
// Optional: for quick middleware role checks (not “secure” by itself)
|
||||
if (role) {
|
||||
res.cookies.set("bb_role", role, {
|
||||
httpOnly: false,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "lax",
|
||||
path: "/",
|
||||
});
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
export async function DELETE() {
|
||||
const res = NextResponse.json({ ok: true });
|
||||
res.cookies.set("bb_access_token", "", { path: "/", maxAge: 0 });
|
||||
res.cookies.set("bb_role", "", { path: "/", maxAge: 0 });
|
||||
return res;
|
||||
}
|
||||
@@ -11,6 +11,7 @@ export async function POST(req: Request) {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
// Always return ok=true (matches your server behavior)
|
||||
|
||||
@@ -0,0 +1,407 @@
|
||||
// app/builds/[buildId]/page.tsx
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
const API_BASE_URL =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
|
||||
|
||||
function formatMoney(n?: number | null) {
|
||||
if (n == null) return "—";
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
maximumFractionDigits: 0,
|
||||
}).format(n);
|
||||
}
|
||||
|
||||
function timeAgo(iso?: string | null) {
|
||||
if (!iso) return "";
|
||||
const d = new Date(iso);
|
||||
const diff = Math.max(0, Date.now() - d.getTime());
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs < 24) return `${hrs}h ago`;
|
||||
const days = Math.floor(hrs / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
export default async function BuildBreakdownPage({
|
||||
params,
|
||||
}: {
|
||||
params: { buildId: string };
|
||||
}) {
|
||||
// Public detail endpoint
|
||||
const res = await fetch(`${API_BASE_URL}/api/v1/builds/${params.buildId}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (res.status === 404) return notFound();
|
||||
|
||||
const build = await res.json().catch(() => null);
|
||||
if (!build) return notFound();
|
||||
|
||||
const items: any[] = build.items ?? [];
|
||||
|
||||
const total = items.reduce((sum, it) => {
|
||||
const qty = Number(it.quantity ?? 1);
|
||||
const price = it.bestPrice == null ? 0 : Number(it.bestPrice);
|
||||
return sum + qty * price;
|
||||
}, 0);
|
||||
|
||||
const images: any[] = build.images ?? build.photos ?? build.media ?? [];
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-6xl px-4 py-8">
|
||||
{/* Header crumb */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Link
|
||||
href="/builds"
|
||||
className="text-sm text-zinc-400 hover:text-zinc-200"
|
||||
>
|
||||
← Back to Community Builds
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-2 text-[11px] text-zinc-500">
|
||||
<span className="rounded-full border border-zinc-800 bg-zinc-950 px-2 py-0.5">
|
||||
Public Build
|
||||
</span>
|
||||
{build.updatedAt && (
|
||||
<span className="hidden md:inline">
|
||||
updated {timeAgo(build.updatedAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layout */}
|
||||
<div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[1fr_320px]">
|
||||
{/* Post column */}
|
||||
<div className="space-y-4">
|
||||
{/* “Reddit-ish” Post Card */}
|
||||
<div className="rounded-xl border border-zinc-900 bg-zinc-950/60">
|
||||
<div className="flex">
|
||||
{/* Vote rail */}
|
||||
<div className="flex w-12 flex-col items-center gap-2 border-r border-zinc-900 bg-black/20 py-4 text-zinc-500">
|
||||
<button className="rounded-md px-2 py-1 hover:bg-zinc-900 hover:text-amber-300">
|
||||
▲
|
||||
</button>
|
||||
<div className="text-xs font-semibold text-zinc-400">—</div>
|
||||
<button className="rounded-md px-2 py-1 hover:bg-zinc-900 hover:text-amber-300">
|
||||
▼
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Post body */}
|
||||
<div className="flex-1 p-5">
|
||||
{/* Meta */}
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-zinc-500">
|
||||
<span className="rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 text-amber-300">
|
||||
r/BattlBuilders
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>posted by</span>
|
||||
<span className="text-zinc-300">u/anonymous</span>
|
||||
{build.createdAt && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>{timeAgo(build.createdAt)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="mt-3 text-2xl font-semibold tracking-tight text-zinc-50">
|
||||
{build.title ?? "Untitled Build"}
|
||||
</h1>
|
||||
|
||||
{/* Description */}
|
||||
{build.description ? (
|
||||
<p className="mt-2 text-sm text-zinc-300/90">
|
||||
{build.description}
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-2 text-sm text-zinc-500">
|
||||
{/* placeholder copy */}
|
||||
Field notes coming soon. This build breakdown will include
|
||||
purpose, tradeoffs, and why each part made the cut.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Action bar */}
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2 text-xs">
|
||||
<button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-300 hover:border-amber-500/40 hover:text-amber-300">
|
||||
Comment
|
||||
</button>
|
||||
<button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-300 hover:border-amber-500/40 hover:text-amber-300">
|
||||
Share
|
||||
</button>
|
||||
<button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-300 hover:border-amber-500/40 hover:text-amber-300">
|
||||
Save
|
||||
</button>
|
||||
|
||||
<div className="ml-auto flex items-center gap-2 text-zinc-500">
|
||||
<span className="hidden sm:inline">Est. Total</span>
|
||||
<span className="rounded-md border border-zinc-800 bg-black/30 px-2 py-1 text-zinc-200">
|
||||
{formatMoney(total)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Parts card */}
|
||||
<div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold text-zinc-200">Parts</h2>
|
||||
<div className="text-xs text-zinc-500">{items.length} items</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
{items.map((it) => (
|
||||
<div
|
||||
key={it.uuid ?? it.id}
|
||||
className="flex items-center gap-3 rounded-lg border border-zinc-900 bg-black/30 px-3 py-3"
|
||||
>
|
||||
{/* Thumb */}
|
||||
<div className="h-12 w-12 flex-none overflow-hidden rounded-md border border-zinc-800 bg-zinc-950">
|
||||
{it.productImageUrl ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={it.productImageUrl}
|
||||
alt={it.productName ?? "Part image"}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center text-[10px] text-zinc-600">
|
||||
IMG
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm text-zinc-100">
|
||||
{it.productName ?? "Part"}
|
||||
</div>
|
||||
<div className="mt-0.5 flex flex-wrap items-center gap-2 text-[11px] text-zinc-500">
|
||||
<span className="rounded-md border border-zinc-800 bg-black/20 px-1.5 py-0.5">
|
||||
{it.slot ?? "slot"}
|
||||
</span>
|
||||
{it.productBrand && <span>{it.productBrand}</span>}
|
||||
<span className="text-zinc-600">•</span>
|
||||
<span>x{it.quantity ?? 1}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<div className="text-sm font-medium text-zinc-200">
|
||||
{formatMoney(it.bestPrice)}
|
||||
</div>
|
||||
<button className="text-[11px] text-amber-300/90 hover:text-amber-200">
|
||||
View part →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gallery */}
|
||||
<div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold text-zinc-200">
|
||||
Gallery
|
||||
</h2>
|
||||
<span className="text-xs text-zinc-500">user submitted</span>
|
||||
</div>
|
||||
{images.length === 0 ? (
|
||||
<div className="mt-4 rounded-lg border border-dashed border-zinc-800 bg-black/20 p-4">
|
||||
<p className="text-sm text-zinc-400">
|
||||
No photos yet. Be the first to add a build pic.
|
||||
</p>
|
||||
<p className="mt-1 text-[11px] text-zinc-600">
|
||||
(Upload UI coming soon — we’ll store and moderate images
|
||||
per build.)
|
||||
</p>
|
||||
|
||||
{/* Mock thumbnails */}
|
||||
<div className="mt-4 grid grid-cols-3 gap-2 sm:grid-cols-4">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="aspect-square rounded-md border border-zinc-800 bg-zinc-950 flex items-center justify-center text-[10px] text-zinc-600"
|
||||
>
|
||||
IMG
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="mt-4 rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-sm text-zinc-200 hover:border-amber-500/40 hover:text-amber-300"
|
||||
disabled
|
||||
title="Upload UI coming soon"
|
||||
>
|
||||
Add Photo (coming soon)
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-4">
|
||||
{/* “Hero” preview */}
|
||||
<div className="aspect-[16/9] overflow-hidden rounded-lg border border-zinc-900 bg-black/30">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={images[0].url ?? images[0]}
|
||||
alt="Build photo"
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Thumbs */}
|
||||
<div className="mt-3 grid grid-cols-4 gap-2 sm:grid-cols-6">
|
||||
{images.slice(0, 12).map((img, idx) => (
|
||||
<div
|
||||
key={img.uuid ?? img.id ?? idx}
|
||||
className="aspect-square overflow-hidden rounded-md border border-zinc-900 bg-black/30"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={img.thumbUrl ?? img.url ?? img}
|
||||
alt={`Build photo ${idx + 1}`}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2 text-xs">
|
||||
<button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-200 hover:border-amber-500/40 hover:text-amber-300">
|
||||
View all
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-200 hover:border-amber-500/40 hover:text-amber-300"
|
||||
disabled
|
||||
title="Upload UI coming soon"
|
||||
>
|
||||
Add Photo
|
||||
</button>
|
||||
<span className="ml-auto text-[11px] text-zinc-600">
|
||||
{images.length} photos
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Comments (placeholder) */}
|
||||
<div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold text-zinc-200">Comments</h2>
|
||||
<span className="text-xs text-zinc-500">mocked</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-4">
|
||||
{[
|
||||
{
|
||||
user: "u/gearhead",
|
||||
body: "Solid parts list. Any reason you went with that upper over a BCM?",
|
||||
},
|
||||
{
|
||||
user: "u/OP",
|
||||
body: "Mostly availability + price. I’ll probably swap once I track deals for a week.",
|
||||
},
|
||||
{
|
||||
user: "u/boltcarrier",
|
||||
body: "Would love to see this with a pinned/weld option for 14.5 builds.",
|
||||
},
|
||||
].map((c, idx) => (
|
||||
<div key={idx} className="flex gap-3">
|
||||
<div className="mt-1 h-6 w-6 rounded-full bg-zinc-900 text-[10px] text-zinc-300 flex items-center justify-center">
|
||||
{c.user === "u/OP" ? "OP" : "u"}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-[11px] text-zinc-500">
|
||||
<span className="text-zinc-300">{c.user}</span> • 1h ago
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-zinc-300/90">
|
||||
{c.body}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-3 text-[11px] text-zinc-500">
|
||||
<button className="hover:text-amber-300">Reply</button>
|
||||
<button className="hover:text-amber-300">Share</button>
|
||||
<button className="hover:text-amber-300">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="rounded-lg border border-dashed border-zinc-800 bg-black/20 p-4 text-sm text-zinc-500">
|
||||
Commenting is coming soon. This will become the “breakdown”
|
||||
thread for the build (notes, tradeoffs, deal alerts, revisions).
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside className="space-y-4">
|
||||
{/* Build stats */}
|
||||
<div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
|
||||
Build Summary
|
||||
</h3>
|
||||
|
||||
<div className="mt-3 space-y-2 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-zinc-500">Build ID</span>
|
||||
<span className="text-zinc-300">
|
||||
{(build.uuid ?? params.buildId).slice(0, 8)}…
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-zinc-500">Visibility</span>
|
||||
<span className="text-zinc-300">
|
||||
{build.isPublic ? "Public" : "Private"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-zinc-500">Items</span>
|
||||
<span className="text-zinc-300">{items.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-zinc-500">Est. Total</span>
|
||||
<span className="text-zinc-50 font-medium">
|
||||
{formatMoney(total)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-col gap-2">
|
||||
<button className="rounded-md bg-amber-400 px-3 py-2 text-sm font-semibold text-black hover:bg-amber-300 transition">
|
||||
Open in Builder
|
||||
</button>
|
||||
<button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-sm text-zinc-200 hover:border-amber-500/40 hover:text-amber-300">
|
||||
Copy share link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Placeholder “OP notes” */}
|
||||
<div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
|
||||
OP Notes
|
||||
</h3>
|
||||
<ul className="mt-3 space-y-2 text-sm text-zinc-400">
|
||||
<li>• Purpose: home defense / range</li>
|
||||
<li>• Priority: reliability first</li>
|
||||
<li>• Next upgrades: optic, sling, light</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
// app/layout.tsx
|
||||
import "./globals.css";
|
||||
import type { ReactNode } from "react";
|
||||
import Script from "next/script";
|
||||
|
||||
import { AuthProvider } from "@/context/AuthContext";
|
||||
import { Banner } from "@/components/Banner";
|
||||
|
||||
@@ -38,6 +40,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
|
||||
<body className="bg-dark text-zinc-950 dark:bg-black dark:text-zinc-50">
|
||||
{" "}
|
||||
<Script src="https://umami.ash.gofwd.group/script.js" data-website-id="ad310b4a-aa5e-471a-938b-47a6c0f4108d"
|
||||
strategy="lazyOnload"
|
||||
/>
|
||||
<AuthProvider>
|
||||
<Banner />
|
||||
{children}
|
||||
|
||||
+27
-6
@@ -13,6 +13,7 @@ export default function HomePage() {
|
||||
|
||||
async function handleSubmit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!email) {
|
||||
setMessage("Drop an email in first, operator.");
|
||||
setStatus("error");
|
||||
@@ -30,11 +31,12 @@ export default function HomePage() {
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to save your signup.");
|
||||
const txt = await res.text().catch(() => "");
|
||||
throw new Error(txt || "Failed to save your signup.");
|
||||
}
|
||||
|
||||
setStatus("success");
|
||||
setMessage("You’re locked in. Watch your inbox.");
|
||||
setMessage("✅ You’re on the list. Invites drop soon — we’ll email your access link when it’s go-time.");
|
||||
setEmail("");
|
||||
setUseCase("");
|
||||
} catch (err) {
|
||||
@@ -160,7 +162,8 @@ export default function HomePage() {
|
||||
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"
|
||||
disabled={status === "loading" || status === "success"}
|
||||
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 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -178,17 +181,22 @@ export default function HomePage() {
|
||||
value={useCase}
|
||||
onChange={(e) => setUseCase(e.target.value)}
|
||||
rows={3}
|
||||
disabled={status === "loading" || status === "success"}
|
||||
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"
|
||||
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 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === "loading"}
|
||||
disabled={status === "loading" || status === "success"}
|
||||
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"}
|
||||
{status === "loading"
|
||||
? "Enlisting…"
|
||||
: status === "success"
|
||||
? "On the List ✅"
|
||||
: "Get Beta Access"}
|
||||
</button>
|
||||
|
||||
{message && (
|
||||
@@ -205,6 +213,19 @@ export default function HomePage() {
|
||||
</p>
|
||||
)}
|
||||
|
||||
{status === "success" && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setStatus("idle");
|
||||
setMessage(null);
|
||||
}}
|
||||
className="w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-xs text-zinc-200 hover:bg-zinc-900"
|
||||
>
|
||||
Submit another email
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center text-[11px] text-zinc-500">
|
||||
Already invited?{" "}
|
||||
<a href="/login" className="underline hover:text-zinc-300">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Download,
|
||||
@@ -10,70 +11,41 @@ import {
|
||||
Users,
|
||||
Settings,
|
||||
LucideMail,
|
||||
Wand2,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export type AdminNavItem = {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
type AdminLeftNavigationProps = {
|
||||
collapsed: boolean;
|
||||
onToggleCollapsed: () => void;
|
||||
items?: AdminNavItem[]; // ✅ NEW
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "/admin",
|
||||
icon: <LayoutDashboard className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Imports",
|
||||
href: "/admin/import-status",
|
||||
icon: <Download className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Mappings",
|
||||
href: "/admin/mapping",
|
||||
icon: <Layers className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Products",
|
||||
href: "/admin/products",
|
||||
icon: <Boxes className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Merchants",
|
||||
href: "/admin/merchants",
|
||||
icon: <Store className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Platforms",
|
||||
href: "/admin/platforms",
|
||||
icon: <Layers className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Users",
|
||||
href: "/admin/users",
|
||||
icon: <Users className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
href: "/admin/settings",
|
||||
icon: <Settings className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Manage Emails",
|
||||
href: "/admin/email/manage",
|
||||
icon: <LucideMail className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Send a Email",
|
||||
href: "/admin/email/send",
|
||||
icon: <LucideMail className="h-4 w-4" />,
|
||||
const defaultNavItems: AdminNavItem[] = [
|
||||
{ label: "Dashboard", href: "/admin", icon: <LayoutDashboard className="h-4 w-4" /> },
|
||||
{ label: "Imports", href: "/admin/import-status", icon: <Download className="h-4 w-4" /> },
|
||||
{ label: "Mappings", href: "/admin/mapping", icon: <Layers className="h-4 w-4" /> },
|
||||
{ label: "Products", href: "/admin/products", icon: <Boxes className="h-4 w-4" /> },
|
||||
{ label: "Merchants", href: "/admin/merchants", icon: <Store className="h-4 w-4" /> },
|
||||
{ label: "Platforms", href: "/admin/platforms", icon: <Layers className="h-4 w-4" /> },
|
||||
{ label: "Enrichment", href: "/admin/enrichment", icon: <Wand2 className="h-4 w-4" /> },
|
||||
{ label: "Users", href: "/admin/users", icon: <Users className="h-4 w-4" /> },
|
||||
{ label: "Settings", href: "/admin/settings", icon: <Settings className="h-4 w-4" /> },
|
||||
{ label: "Manage Emails", href: "/admin/email/manage", icon: <LucideMail className="h-4 w-4" /> },
|
||||
{ label: "Send an Email", href: "/admin/email/send", icon: <LucideMail className="h-4 w-4" /> },
|
||||
{ label: "Beta Invites", href: "/admin/beta-invites", icon: <LucideMail className="h-4 w-4" />,
|
||||
},
|
||||
];
|
||||
|
||||
export default function AdminLeftNavigation({
|
||||
collapsed,
|
||||
onToggleCollapsed,
|
||||
items = defaultNavItems, // ✅ NEW default
|
||||
}: AdminLeftNavigationProps) {
|
||||
return (
|
||||
<aside
|
||||
@@ -98,7 +70,9 @@ export default function AdminLeftNavigation({
|
||||
{!collapsed && (
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
|
||||
<Link href={"/"} title={"Back to Battl Dashboard"} >Battl Builders</Link>
|
||||
<Link href="/" title="Back to Battl Dashboard">
|
||||
Battl Builders
|
||||
</Link>
|
||||
</p>
|
||||
<p className="text-[10px] text-zinc-600">Admin Command</p>
|
||||
</div>
|
||||
@@ -106,8 +80,8 @@ export default function AdminLeftNavigation({
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1 text-sm">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
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"
|
||||
@@ -117,15 +91,13 @@ export default function AdminLeftNavigation({
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
</div>
|
||||
{!collapsed && <span className="text-[10px] text-zinc-600">›</span>}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</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="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>
|
||||
@@ -134,4 +106,4 @@ export default function AdminLeftNavigation({
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
}
|
||||
+43
-7
@@ -49,6 +49,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [user, setUser] = useState<AuthUser>(null);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
|
||||
/**
|
||||
* Persist auth to localStorage
|
||||
*/
|
||||
const persistAuth = useCallback(
|
||||
(nextToken: string | null, nextUser: AuthUser) => {
|
||||
if (typeof window === "undefined") return;
|
||||
@@ -68,19 +71,34 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
[]
|
||||
);
|
||||
|
||||
// Hydrate from localStorage on first load
|
||||
/**
|
||||
* ✅ Hydrate from localStorage ONCE
|
||||
* IMPORTANT: loading only flips false AFTER user/token are set (if present)
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const storedToken = window.localStorage.getItem(TOKEN_KEY);
|
||||
const storedUser = window.localStorage.getItem(USER_KEY);
|
||||
|
||||
if (storedToken) setToken(storedToken);
|
||||
|
||||
if (storedUser) {
|
||||
if (storedToken && storedUser) {
|
||||
try {
|
||||
setUser(JSON.parse(storedUser));
|
||||
const parsedUser = JSON.parse(storedUser);
|
||||
|
||||
setToken(storedToken);
|
||||
setUser(parsedUser);
|
||||
|
||||
// ✅ Re-sync cookie so middleware can allow /admin on hard refresh / direct nav
|
||||
fetch("/api/auth/session", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
token: storedToken,
|
||||
role: parsedUser?.role,
|
||||
}),
|
||||
}).catch(() => {});
|
||||
} catch {
|
||||
window.localStorage.removeItem(TOKEN_KEY);
|
||||
window.localStorage.removeItem(USER_KEY);
|
||||
}
|
||||
}
|
||||
@@ -88,11 +106,24 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Used by login/register/magic-link
|
||||
*/
|
||||
const setSession = useCallback(
|
||||
(nextToken: string, nextUser: NonNullable<AuthUser>) => {
|
||||
setToken(nextToken);
|
||||
setUser(nextUser);
|
||||
persistAuth(nextToken, nextUser);
|
||||
|
||||
// ✅ Make middleware / server aware of the session
|
||||
fetch("/api/auth/session", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
token: nextToken,
|
||||
role: nextUser.role,
|
||||
}),
|
||||
}).catch(() => {});
|
||||
},
|
||||
[persistAuth]
|
||||
);
|
||||
@@ -118,6 +149,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const nextUser: AuthUser =
|
||||
data.user ??
|
||||
({
|
||||
uuid: data.uuid,
|
||||
email: data.email ?? email,
|
||||
displayName: data.displayName ?? null,
|
||||
role: data.role ?? "USER",
|
||||
@@ -160,6 +192,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const nextUser: AuthUser =
|
||||
data.user ??
|
||||
({
|
||||
uuid: data.uuid,
|
||||
email: data.email ?? email,
|
||||
displayName: data.displayName ?? displayName ?? null,
|
||||
role: data.role ?? "USER",
|
||||
@@ -177,6 +210,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
setToken(null);
|
||||
setUser(null);
|
||||
persistAuth(null, null);
|
||||
|
||||
// Clear server session cookies
|
||||
fetch("/api/auth/session", { method: "DELETE" }).catch(() => {});
|
||||
}, [persistAuth]);
|
||||
|
||||
const getAuthHeaders = useCallback((): HeadersInit => {
|
||||
@@ -191,7 +227,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
register,
|
||||
logout,
|
||||
getAuthHeaders,
|
||||
setSession, // ✅ important
|
||||
setSession,
|
||||
};
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
@@ -203,4 +239,4 @@ export function useAuth(): AuthContextValue {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
}
|
||||
|
||||
+34
-9
@@ -12,15 +12,40 @@ const ALWAYS_ALLOW = new Set<string>([
|
||||
"/sitemap.xml",
|
||||
]);
|
||||
|
||||
// Match common public/static file extensions so middleware never blocks them
|
||||
const PUBLIC_FILE = /\.(?:svg|png|jpg|jpeg|gif|webp|ico|css|js|map|txt|xml|json|woff|woff2|ttf|eot)$/i;
|
||||
const PUBLIC_FILE =
|
||||
/\.(?:svg|png|jpg|jpeg|gif|webp|ico|css|js|map|txt|xml|json|woff|woff2|ttf|eot)$/i;
|
||||
|
||||
export function middleware(req: NextRequest) {
|
||||
if (!LAUNCH_ONLY_ROOT) return NextResponse.next();
|
||||
|
||||
const { pathname } = req.nextUrl;
|
||||
|
||||
// ✅ Always allow Next internals + static assets (public/ and _next/)
|
||||
console.log("LAUNCH_ONLY_ROOT:", process.env.NEXT_PUBLIC_LAUNCH_ONLY_ROOT);
|
||||
|
||||
|
||||
// =========================
|
||||
// 1) Admin gate (always on)
|
||||
// =========================
|
||||
if (pathname.startsWith("/admin")) {
|
||||
const token = req.cookies.get("bb_access_token")?.value;
|
||||
const role = req.cookies.get("bb_role")?.value; // optional
|
||||
|
||||
const ok = !!token && (!role || role === "ADMIN");
|
||||
|
||||
if (!ok) {
|
||||
const url = req.nextUrl.clone();
|
||||
url.pathname = "/login";
|
||||
url.searchParams.set("next", pathname);
|
||||
return NextResponse.redirect(url);
|
||||
}
|
||||
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// 2) Launch-only gate (your existing one)
|
||||
// =====================================
|
||||
if (!LAUNCH_ONLY_ROOT) return NextResponse.next();
|
||||
|
||||
// ✅ Always allow Next internals + static assets
|
||||
if (
|
||||
pathname.startsWith("/_next") ||
|
||||
pathname.startsWith("/favicon") ||
|
||||
@@ -31,17 +56,17 @@ export function middleware(req: NextRequest) {
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
// ✅ Allow the root + a few public files
|
||||
if (ALWAYS_ALLOW.has(pathname)) return NextResponse.next();
|
||||
|
||||
// 🚫 Everything else: hide it
|
||||
|
||||
return NextResponse.rewrite(new URL("/404", req.url));
|
||||
}
|
||||
|
||||
` 1`
|
||||
export const config = {
|
||||
// Run middleware on everything *except* Next internals and obvious static files.
|
||||
// This keeps launch gating from ever breaking your logo/images/fonts/etc.
|
||||
matcher: [
|
||||
// run on everything except Next internals + obvious static files
|
||||
"/((?!_next/static|_next/image|favicon.ico|robots.txt|sitemap.xml|.*\\.(?:svg|png|jpg|jpeg|gif|webp|ico|css|js|map|txt|xml|json|woff|woff2|ttf|eot)).*)",
|
||||
],
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user