see /admin/mapping page.

This commit is contained in:
2025-12-07 09:57:46 -05:00
parent caf4817d12
commit 6cf3ea7c94
4 changed files with 746 additions and 3 deletions
+112
View File
@@ -0,0 +1,112 @@
"use client";
import { useEffect, useState } from "react";
type ImportStatus = "RAW" | "PENDING_MAPPING" | "MAPPED";
type SummaryRow = {
status: ImportStatus;
count: number;
};
type ByMerchantRow = {
merchantName: string;
platform: string;
status: ImportStatus;
count: number;
};
const API_BASE_URL =
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
export default function ImportStatusPage() {
const [summary, setSummary] = useState<SummaryRow[]>([]);
const [byMerchant, setByMerchant] = useState<ByMerchantRow[]>([]);
useEffect(() => {
async function load() {
const [summaryRes, byMerchantRes] = await Promise.all([
fetch(`${API_BASE_URL}/api/admin/import-status/summary`),
fetch(`${API_BASE_URL}/api/admin/import-status/by-merchant`),
]);
setSummary(await summaryRes.json());
setByMerchant(await byMerchantRes.json());
}
load();
}, []);
const total = summary.reduce((sum, row) => sum + row.count, 0);
return (
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto max-w-5xl px-4 py-6">
<h1 className="text-xl font-semibold tracking-tight">
Import Status Dashboard
</h1>
<p className="mt-1 text-sm text-zinc-400">
Quick sanity check on how clean (or not) your catalog is.
</p>
{/* Status cards */}
<div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
{summary.map((row) => (
<div
key={row.status}
className="rounded-lg border border-zinc-800 bg-zinc-950/80 p-3"
>
<div className="text-xs font-semibold uppercase tracking-[0.14em] text-zinc-500">
{row.status}
</div>
<div className="mt-1 text-2xl font-semibold text-amber-300">
{row.count}
</div>
<div className="mt-1 text-[0.7rem] text-zinc-500">
{total > 0
? `${((row.count / total) * 100).toFixed(1)}% of catalog`
: "—"}
</div>
</div>
))}
</div>
{/* Merchant breakdown */}
<section className="mt-6 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3">
<h2 className="text-xs font-semibold uppercase tracking-[0.14em] text-zinc-500">
By Merchant & Platform
</h2>
<div className="mt-2 overflow-x-auto">
<table className="min-w-full text-xs">
<thead>
<tr className="border-b border-zinc-800 bg-zinc-900/60">
<th className="px-2 py-1 text-left text-zinc-400">Merchant</th>
<th className="px-2 py-1 text-left text-zinc-400">Platform</th>
<th className="px-2 py-1 text-left text-zinc-400">Status</th>
<th className="px-2 py-1 text-right text-zinc-400">Count</th>
</tr>
</thead>
<tbody>
{byMerchant.map((row, i) => (
<tr
key={`${row.merchantName}-${row.platform}-${row.status}-${i}`}
className="border-b border-zinc-900"
>
<td className="px-2 py-1 text-zinc-100">
{row.merchantName}
</td>
<td className="px-2 py-1 text-zinc-300">{row.platform}</td>
<td className="px-2 py-1 text-zinc-400">{row.status}</td>
<td className="px-2 py-1 text-right text-zinc-100">
{row.count}
</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
</div>
</main>
);
}
+323
View File
@@ -0,0 +1,323 @@
"use client";
import { useEffect, useState } from "react";
const API_BASE_URL =
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
type PendingBucket = {
merchantId: number;
merchantName: string;
rawCategoryKey: string;
mappedPartRole: string | null;
productCount: number;
};
const PART_ROLE_OPTIONS: string[] = [
// LOWER receivers
"LOWER_RECEIVER_STRIPPED",
"LOWER_RECEIVER_COMPLETE",
"LOWER_RECEIVER_COMPLETE_PISTOL",
"LOWER_RECEIVER_COMPLETE_RIFLE",
"LOWER_RECEIVER_80",
"LOWER_RECEIVER_BILLET",
"LOWER_RECEIVER_FORGED",
"LOWER_RECEIVER_POLYMER",
// LOWER internals & controls
"LOWER_PARTS_KIT",
"LOWER_PARTS_KIT_ENHANCED",
"TRIGGER",
"TRIGGER_OTHER",
"TRIGGER_COMBAT",
"TRIGGER_MATCH",
"TRIGGER_DROP_IN",
"TRIGGER_SINGLE_STAGE",
"TRIGGER_TWO_STAGE",
"TRIGGER_GUARD",
"PISTOL_GRIP",
"PISTOL_GRIP_ERGO",
"PISTOL_GRIP_VERTICAL",
"SAFETY_SELECTOR",
"SAFETY_SELECTOR_AMBI",
"SAFETY_SELECTOR_45_DEG",
"MAG_RELEASE",
"TAKEDOWN_PINS",
"SPRINGS_PINS_MISC",
// LOWER buffer & stock
"BUFFER_KIT",
"BUFFER_TUBE",
"BUFFER_TUBE_MILSPEC",
"BUFFER_TUBE_COMMERCIAL",
"BUFFER_SPRING",
"BUFFER_WEIGHT",
"STOCK_ADJUSTABLE",
"STOCK_FIXED",
"STOCK_FOLDER",
"STOCK_PRECISION",
"BRACE_PISTOL",
// UPPER receivers & BCG
"UPPER_RECEIVER_STRIPPED",
"UPPER_RECEIVER_BILLET",
"UPPER_RECEIVER_MONOLITHIC",
"UPPER_RECEIVER_COMPLETE",
"UPPER_RECEIVER_COMPLETE_PISTOL",
"UPPER_RECEIVER_COMPLETE_RIFLE",
"BOLT_CARRIER_GROUP",
"BCG_COMPLETE",
"BCG_LIGHTWEIGHT",
"BCG_NICKEL_BORON",
// UPPER barrel & gas
"BARREL",
"BARREL_THREADED",
"BARREL_PENCIL",
"BARREL_MATCH",
"BARREL_HEAVY",
"BARREL_14_5_PINNED",
"GAS_BLOCK",
"GAS_BLOCK_ADJUSTABLE",
"GAS_BLOCK_LOW_PROFILE",
"GAS_TUBE_PISTOL",
"GAS_TUBE_CAR",
"GAS_TUBE_MID",
"GAS_TUBE_RIFLE",
// UPPER front end / muzzle
"HANDGUARD_MLOK",
"HANDGUARD_KEYMOD",
"HANDGUARD_QUAD",
"HANDGUARD_SLICK",
"MUZZLE_BRAKE",
"MUZZLE_COMPENSATOR",
// 👇 generic / backup muzzle roles
"MUZZLE_DEVICE",
"MUZZLE_DEVICE_OTHER",
"FLASH_HIDER",
"MUZZLE_DEVICE_QD_MOUNT",
"SUPPRESSOR_DIRECT_THREAD",
"SUPPRESSOR_QD",
"SUPPRESSOR_RIFLE",
"SUPPRESSOR_PISTOL",
"CHARGING_HANDLE",
"CHARGING_HANDLE_AMBI",
"CHARGING_HANDLE_GAS_BUSTER",
// Sights / optics
"SIGHTS_BACKUP",
"SIGHTS_IRON_FIXED",
"SIGHTS_IRON_FLIP",
"SIGHTS_OFFSET",
"OPTIC_REDDOT",
"OPTIC_LPVO",
"OPTIC_HOLOGRAPHIC",
"OPTIC_PRISM",
"OPTIC_MAGNIFIER",
// Accessories
"MAGAZINE",
"SLING",
"BIPOD",
"MOUNT_SCOPE",
"MOUNT_OFFSET",
"LIGHT_WEAPON",
"LASER_VISIBLE",
"LASER_IR",
"TOOL",
];
export default function MappingAdminPage() {
const [rows, setRows] = useState<PendingBucket[]>([]);
const [loading, setLoading] = useState(true);
const [savingKey, setSavingKey] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
async function load() {
try {
setLoading(true);
setError(null);
const res = await fetch(
`${API_BASE_URL}/api/admin/mapping/pending-buckets`
);
if (!res.ok) {
throw new Error(`Failed to load pending buckets (${res.status})`);
}
const data: PendingBucket[] = await res.json();
setRows(data);
} catch (e: any) {
console.error(e);
setError(e.message ?? "Failed to load pending buckets");
} finally {
setLoading(false);
}
}
load();
}, []);
const handleChangeRole = (idx: number, value: string) => {
setRows((prev) => {
const next = [...prev];
next[idx] = { ...next[idx], mappedPartRole: value || null };
return next;
});
};
const handleSave = async (row: PendingBucket) => {
if (!row.mappedPartRole) return;
const key = `${row.merchantId}-${row.rawCategoryKey}`;
try {
setSavingKey(key);
setError(null);
const res = await fetch(`${API_BASE_URL}/api/admin/mapping/apply`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
merchantId: row.merchantId,
rawCategoryKey: row.rawCategoryKey,
mappedPartRole: row.mappedPartRole,
}),
});
if (!res.ok) {
throw new Error(`Failed to save mapping (${res.status})`);
}
// After save, remove this bucket from the list
setRows((prev) =>
prev.filter(
(r) =>
!(
r.merchantId === row.merchantId &&
r.rawCategoryKey === row.rawCategoryKey
)
)
);
} catch (e: any) {
console.error(e);
setError(e.message ?? "Failed to save mapping");
} finally {
setSavingKey(null);
}
};
return (
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto max-w-6xl px-4 py-6">
<h1 className="text-xl font-semibold tracking-tight">
Bulk Mapping Pending Categories
</h1>
<p className="mt-1 text-sm text-zinc-400">
Bucketed by merchant + raw category. Map each bucket to a part role to
clean up the builder catalog.
</p>
{loading && (
<p className="mt-4 text-sm text-zinc-400">Loading pending buckets</p>
)}
{error && (
<p className="mt-4 text-sm text-red-400">Error: {error}</p>
)}
{!loading && rows.length === 0 && !error && (
<p className="mt-4 text-sm text-emerald-400">
No pending mapping buckets 🎉
</p>
)}
{!loading && rows.length > 0 && (
<section className="mt-4 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3">
<div className="mb-2 flex items-center justify-between">
<h2 className="text-xs font-semibold uppercase tracking-[0.14em] text-zinc-500">
Pending Buckets
</h2>
<span className="text-xs text-zinc-400">
{rows.length} buckets {rows.reduce((s, r) => s + r.productCount, 0)}{" "}
products
</span>
</div>
<div className="mt-1 overflow-x-auto">
<table className="min-w-full text-xs">
<thead>
<tr className="border-b border-zinc-800 bg-zinc-900/60">
<th className="px-2 py-1 text-left text-zinc-400">
Merchant
</th>
<th className="px-2 py-1 text-left text-zinc-400">
Raw Category
</th>
<th className="px-2 py-1 text-left text-zinc-400">
Products
</th>
<th className="px-2 py-1 text-left text-zinc-400">
Part Role
</th>
<th className="px-2 py-1 text-right text-zinc-400">
Action
</th>
</tr>
</thead>
<tbody>
{rows.map((row, idx) => {
const rowKey = `${row.merchantId}-${row.rawCategoryKey}`;
const isSaving = savingKey === rowKey;
return (
<tr
key={rowKey}
className="border-b border-zinc-900 hover:bg-zinc-900/40"
>
<td className="px-2 py-1 text-zinc-100">
{row.merchantName}
</td>
<td className="px-2 py-1 text-zinc-300">
{row.rawCategoryKey}
</td>
<td className="px-2 py-1 text-zinc-200">{row.productCount}</td>
<td className="px-2 py-1 text-zinc-100">
<select
className="w-full rounded-md border border-zinc-700 bg-zinc-950/80 px-2 py-1 text-xs text-zinc-100 outline-none focus:border-amber-400"
value={row.mappedPartRole ?? ""}
onChange={(e) =>
handleChangeRole(idx, e.target.value)
}
>
<option value="">Select part role</option>
{PART_ROLE_OPTIONS.map((pr) => (
<option key={pr} value={pr}>
{pr}
</option>
))}
</select>
</td>
<td className="px-2 py-1 text-right">
<button
onClick={() => handleSave(row)}
disabled={!row.mappedPartRole || isSaving}
className="rounded-md bg-emerald-500 px-3 py-1 text-[0.7rem] font-semibold text-black disabled:cursor-not-allowed disabled:bg-zinc-700"
>
{isSaving ? "Saving…" : "Save"}
</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</section>
)}
</div>
</main>
);
}
+46 -1
View File
@@ -4,9 +4,10 @@ import { useMemo, useState, useEffect } from "react";
import Link from "next/link";
import { useSearchParams, useRouter } from "next/navigation";
import { CATEGORIES } from "@/data/gunbuilderParts";
import { BUILDER_SLOTS, isSlotSatisfied } from "@/data/builderSlots";
import type { CategoryId, Part } from "@/types/gunbuilder";
import { PART_ROLE_TO_CATEGORY } from "@/data/partRoleMappings";
import { Pencil, Link2 } from "lucide-react";
import { Pencil, Link2, Square, CheckSquare } from "lucide-react";
type GunbuilderProductFromApi = {
id: number; // backend numeric id
@@ -205,6 +206,17 @@ export default function GunbuilderPage() {
.filter(Boolean) as Part[];
}, [build, parts]);
const selectedByCategory: Record<CategoryId, unknown> = useMemo(
() =>
Object.fromEntries(
Object.entries(build).map(([categoryId, partId]) => [
categoryId as CategoryId,
partId ? true : false,
]),
) as Record<CategoryId, unknown>,
[build],
);
const totalPrice = useMemo(
() => selectedParts.reduce((sum, p) => sum + p.price, 0),
[selectedParts],
@@ -352,6 +364,7 @@ export default function GunbuilderPage() {
</div>
</header>
{/* Build summary panel */}
<section className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3 md:p-4 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
{/* Left: title + totals + primary actions */}
@@ -462,6 +475,38 @@ export default function GunbuilderPage() {
</div>
</section>
{/* Build status strip */}
<section className="mb-6 space-y-3">
<h2 className="text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-zinc-500">
Build Status (Needs Refined)
</h2>
<div className="flex flex-wrap gap-2 md:gap-3">
{BUILDER_SLOTS.map((slot) => {
const satisfied = isSlotSatisfied(slot, selectedByCategory);
return (
<div
key={slot.id}
className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[0.7rem] md:text-xs ${
satisfied
? "border-emerald-500/70 bg-emerald-950/50 text-emerald-200"
: "border-zinc-800 bg-zinc-950/80 text-zinc-200"
}`}
>
{satisfied ? (
<CheckSquare className="h-4 w-4 text-emerald-400" />
) : (
<Square className="h-4 w-4 text-zinc-600/80" />
)}
<span className="font-medium truncate max-w-[9rem] md:max-w-[11rem]">
{slot.label}
</span>
</div>
);
})}
</div>
</section>
{/* Layout */}
<section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
<p className="mb-4 text-xs text-zinc-500">
+263
View File
@@ -0,0 +1,263 @@
// data/builderSlots.ts
/**
* Builder "slots" represent the major assemblies in a Battl Builder rifle:
* - Lower Receiver Assembly
* - Upper Receiver Assembly
* - Fire Control / Optics / Accessories, etc.
*
* Each slot can be satisfied by one or more "patterns" of categories.
* Example:
* Lower Assembly is satisfied by EITHER:
* - a single Complete Lower
* - OR a combination of stripped lower + parts + buffer + stock + grip + safety
*
* The frontend can use this file to:
* - show build progress for each slot
* - grey out / collapse sub-categories when a complete assembly is selected
* - validate that a build is "complete" before sharing/saving
*/
export type SlotGroup = "LOWER" | "UPPER" | "SYSTEM" | "ACCESSORIES";
/**
* CategoryId should correspond to CATEGORIES[id] from data/gunbuilderParts.ts
* We keep it loose here to avoid circular type imports.
*/
export type CategoryId = string;
export type BuilderSlotId =
| "lowerAssembly"
| "upperAssembly"
| "opticSystem"
| "sightSystem"
| "suppressorSystem"
| "magazineSystem"
| "accessoriesSupport";
export interface BuilderSlot {
id: BuilderSlotId;
label: string;
group: SlotGroup;
/**
* Human-facing description for tooltips / help text.
*/
description: string;
/**
* All category IDs that are visually associated with this slot.
* (Useful for layout / grouping in the UI.)
*/
categories: CategoryId[];
/**
* Each inner array is a valid way to "satisfy" the slot.
*
* Example (lowerAssembly):
* [
* ["completeLower"], // Pattern 1: single complete lower
* ["lower", "lowerParts", "trigger", "grip", "safety", "buffer", "stock"] // Pattern 2: custom lower
* ]
*/
satisfactionPatterns: CategoryId[][];
}
/**
* Core Battl Builder slots.
*
* These line up with your existing CATEGORIES in data/gunbuilderParts.ts:
*
* LOWER:
* - lower
* - completeLower
* - lowerParts
* - trigger
* - grip
* - safety
* - buffer
* - stock
*
* UPPER:
* - upper
* - completeUpper
* - bcg
* - barrel
* - gasBlock
* - gasTube
* - muzzleDevice
* - suppressor
* - handguard
* - chargingHandle
* - sights
* - optic
*
* ACCESSORIES:
* - magazine
* - weaponLight
* - foregrip
* - bipod
* - sling
* - railAccessory
* - tools
*/
export const BUILDER_SLOTS: BuilderSlot[] = [
{
id: "lowerAssembly",
label: "Lower Receiver Assembly",
group: "LOWER",
description:
"The serialized foundation of the rifle: receiver, controls, fire control, stock, and buffer system.",
categories: [
"lower",
"completeLower",
"lowerParts",
"trigger",
"grip",
"safety",
"buffer",
"stock",
],
satisfactionPatterns: [
// Pattern 1: single complete lower does it all
["completeLower"],
// Pattern 2: fully custom lower built from individual parts
["lower", "lowerParts", "trigger", "grip", "safety", "buffer", "stock"],
],
},
{
id: "upperAssembly",
label: "Upper Receiver Assembly",
group: "UPPER",
description:
"The working end of the rifle: upper, barrel, gas system, handguard, BCG, charging handle, and muzzle device.",
categories: [
"upper",
"completeUpper",
"bcg",
"barrel",
"gasBlock",
"gasTube",
"handguard",
"muzzleDevice",
"chargingHandle",
],
satisfactionPatterns: [
// Pattern 1: complete upper
["completeUpper"],
// Pattern 2: custom upper from parts
[
"upper",
"barrel",
"gasBlock",
"gasTube",
"handguard",
"bcg",
"chargingHandle",
"muzzleDevice",
],
],
},
{
id: "opticSystem",
label: "Optic System",
group: "SYSTEM",
description:
"Primary glass for the rifle: LPVOs, red dots, prisms, and magnifiers.",
categories: ["optic"],
satisfactionPatterns: [
// For now: any optic fills the slot.
["optic"],
],
},
{
id: "sightSystem",
label: "Backup / Iron Sights",
group: "SYSTEM",
description:
"Backup irons or primary sights for no-glass builds and hard-use setups.",
categories: ["sights"],
satisfactionPatterns: [["sights"]],
},
{
id: "suppressorSystem",
label: "Muzzle / Suppressor",
group: "SYSTEM",
description:
"Dedicated suppressor slot for QD or direct-thread cans. (Muzzle device is handled in the upper assembly patterns.)",
categories: ["suppressor"],
satisfactionPatterns: [["suppressor"]],
},
{
id: "magazineSystem",
label: "Magazines",
group: "ACCESSORIES",
description:
"Feeding the beast: mags appropriate to the platform and caliber.",
categories: ["magazine"],
satisfactionPatterns: [["magazine"]],
},
{
id: "accessoriesSupport",
label: "Support Gear",
group: "ACCESSORIES",
description:
"Lights, lasers, foregrips, bipods, slings, rail widgets, and tools that keep the rifle honest.",
categories: [
"weaponLight",
"foregrip",
"bipod",
"sling",
"railAccessory",
"tools",
],
// Accessories are all optional; this slot is never strictly "required"
satisfactionPatterns: [
// An empty pattern would technically always be satisfied,
// but we can treat this slot as "nice to have" in the UI instead.
["weaponLight"],
["foregrip"],
["bipod"],
["sling"],
["railAccessory"],
["tools"],
],
},
];
/**
* Helper: determine whether a slot is satisfied given currently selected parts.
*
* `selectedByCategory` is expected to be a map of categoryId → truthy if selected.
* The value can be the actual Part, or just `true` if you track it elsewhere.
*/
export function isSlotSatisfied(
slot: BuilderSlot,
selectedByCategory: Record<CategoryId, unknown>
): boolean {
return slot.satisfactionPatterns.some((pattern) =>
pattern.every((categoryId) => Boolean(selectedByCategory[categoryId]))
);
}
/**
* Optional helper: get the first pattern that is currently satisfied.
* Can be used to:
* - show which "path" the user took (complete vs custom)
* - conditionally collapse/expand sub-categories in the UI
*/
export function getSatisfiedPattern(
slot: BuilderSlot,
selectedByCategory: Record<CategoryId, unknown>
): CategoryId[] | null {
for (const pattern of slot.satisfactionPatterns) {
const ok = pattern.every((categoryId) =>
Boolean(selectedByCategory[categoryId])
);
if (ok) return pattern;
}
return null;
}