added enrichment ui and functionality
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user