see /admin/mapping page.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user