← back to Omega Watches 2
src/app/(dashboard)/msrp/page.tsx
224 lines
"use client";
import { useEffect, useState } from "react";
import { api } from "@/lib/api-client";
import { formatCurrency, formatDate } from "@/lib/utils";
interface WatchRef {
id: string;
reference_number: string;
model_name: string;
collection: string;
latest_msrp: string | null;
msrp_count: string;
}
export default function MSRPDashboardPage() {
const [references, setReferences] = useState<WatchRef[]>([]);
const [selected, setSelected] = useState<string>("");
const [msrpData, setMsrpData] = useState<any>(null);
const [error, setError] = useState("");
useEffect(() => {
loadRefs();
}, []);
useEffect(() => {
if (selected) loadMSRP(selected);
}, [selected]);
async function loadRefs() {
try {
const token = localStorage.getItem("omega_token");
const res = await fetch("/api/references", {
headers: { Authorization: `Bearer ${token}` },
});
const json = await res.json();
if (json.success) {
const withMsrp = json.data.filter((r: any) => parseInt(r.msrp_count) > 0);
setReferences(withMsrp);
if (withMsrp.length > 0) setSelected(withMsrp[0].reference_number);
}
} catch (e: any) {
setError(e.message);
}
}
async function loadMSRP(refNum: string) {
try {
const data = await api.getMSRP(refNum);
setMsrpData(data);
} catch (e: any) {
setError(e.message);
}
}
const ref = msrpData?.reference;
const currentMSRP = msrpData?.current_msrp || [];
const history = msrpData?.history || [];
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h1 className="text-xl font-bold text-gray-100">MSRP Ledger</h1>
<select
className="input w-96"
value={selected}
onChange={(e) => setSelected(e.target.value)}
>
<option value="">Select a reference...</option>
{references.map((r) => (
<option key={r.id} value={r.reference_number}>
{r.reference_number} — {r.collection} {r.model_name}
</option>
))}
</select>
</div>
{error && <div className="rounded bg-red-900/30 p-3 text-red-300">{error}</div>}
<div className="card border-navy-700">
<div className="mb-4 flex items-center gap-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-omega-500/10">
<span className="text-xl font-bold text-omega-400">M</span>
</div>
<div>
<div className="font-semibold text-gray-200">MSRP Ledger (Ledger 1)</div>
<div className="text-xs text-gray-500">
Immutable daily manufacturer suggested retail price snapshots
</div>
</div>
<div className="ml-auto text-right">
<div className="text-2xl font-bold text-omega-400">{references.length}</div>
<div className="text-xs text-gray-500">References with MSRP</div>
</div>
</div>
</div>
{ref && (
<>
<div className="card border-navy-700">
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-400">
{ref.reference_number} — {ref.model_name}
</h2>
<div className="grid gap-3 md:grid-cols-4">
<div className="rounded bg-navy-900 p-3">
<div className="text-xs text-gray-500">Collection</div>
<div className="mt-1 font-medium text-gray-200">{ref.collection}</div>
</div>
<div className="rounded bg-navy-900 p-3">
<div className="text-xs text-gray-500">Calibre</div>
<div className="mt-1 font-medium text-gray-200">{ref.calibre}</div>
</div>
<div className="rounded bg-navy-900 p-3">
<div className="text-xs text-gray-500">Case</div>
<div className="mt-1 font-medium text-gray-200">{ref.case_material} {ref.case_diameter_mm}mm</div>
</div>
<div className="rounded bg-navy-900 p-3">
<div className="text-xs text-gray-500">Dial</div>
<div className="mt-1 font-medium text-gray-200">{ref.dial_color}</div>
</div>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="card border-navy-700">
<h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-400">
Current MSRP by Region
</h3>
{currentMSRP.length > 0 ? (
<div className="space-y-2">
{currentMSRP.map((m: any, i: number) => (
<div key={i} className="flex items-center justify-between rounded bg-navy-900 p-3">
<div>
<span className="badge badge-info">{m.region_code}</span>
<span className="ml-2 text-xs text-gray-500">{m.currency?.trim()}</span>
</div>
<div className="text-right">
<div className="text-lg font-bold text-gray-200">
{formatCurrency(parseFloat(m.msrp_amount), m.currency?.trim())}
</div>
<div className="text-xs text-gray-500">as of {formatDate(m.captured_date)}</div>
</div>
</div>
))}
</div>
) : (
<div className="text-center text-sm text-gray-600">No current MSRP data</div>
)}
</div>
<div className="card border-navy-700">
<h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-400">
MSRP Timeline (US Region)
</h3>
{history.length > 0 ? (
<div className="space-y-1">
{history.map((h: any, i: number) => {
const prev = i > 0 ? parseFloat(history[i - 1].msrp_amount) : null;
const curr = parseFloat(h.msrp_amount);
const change = prev ? curr - prev : 0;
return (
<div key={i} className="flex items-center justify-between rounded bg-navy-900 p-2">
<div className="text-xs text-gray-500">{formatDate(h.captured_date)}</div>
<div className="flex items-center gap-3">
<span className="font-mono text-gray-200">{formatCurrency(curr)}</span>
{change !== 0 && (
<span className={`text-xs ${change > 0 ? "text-green-400" : "text-red-400"}`}>
{change > 0 ? "+" : ""}{formatCurrency(change)}
</span>
)}
</div>
</div>
);
})}
</div>
) : (
<div className="text-center text-sm text-gray-600">No MSRP history</div>
)}
</div>
</div>
</>
)}
<div className="card border-navy-700">
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-400">
All References with MSRP Data
</h2>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-navy-700 text-left text-xs uppercase text-gray-500">
<th className="pb-2 pr-3">Reference</th>
<th className="pb-2 pr-3">Collection</th>
<th className="pb-2 pr-3">Model</th>
<th className="pb-2 pr-3 text-right">Latest MSRP</th>
<th className="pb-2 text-right">Snapshots</th>
</tr>
</thead>
<tbody>
{references.map((r) => (
<tr
key={r.id}
className={`cursor-pointer border-b border-navy-800 transition-colors hover:bg-navy-900 ${
selected === r.reference_number ? "bg-navy-900" : ""
}`}
onClick={() => setSelected(r.reference_number)}
>
<td className="py-2 pr-3 font-mono text-xs text-omega-400">{r.reference_number}</td>
<td className="py-2 pr-3"><span className="badge badge-info">{r.collection}</span></td>
<td className="py-2 pr-3 text-gray-200">{r.model_name}</td>
<td className="py-2 pr-3 text-right text-gray-200">
{r.latest_msrp ? formatCurrency(parseFloat(r.latest_msrp)) : "—"}
</td>
<td className="py-2 text-right text-gray-400">{r.msrp_count}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
}