feat: add Ina Trading portal flows and API integration
This commit is contained in:
Wira Basalamah
212
src/app/admin/dashboard/page.tsx
Normal file
212
src/app/admin/dashboard/page.tsx
Normal file
@ -0,0 +1,212 @@
|
||||
"use client";
|
||||
|
||||
const reviewQueue = [
|
||||
{ icon: "inventory_2", name: "Artisan Ceramic Vase", vendor: "Kyoto Craft Guild", date: "Oct 24, 2023" },
|
||||
{ icon: "watch", name: "Chronos Obsidian X", vendor: "Titan Horology", date: "Oct 24, 2023" },
|
||||
{ icon: "stroller", name: "MetroGlider S2", vendor: "Urban Mobility Co.", date: "Oct 23, 2023" },
|
||||
{ icon: "coffee", name: "Sumatra Single Origin", vendor: "Emerald Roast House", date: "Oct 23, 2023" },
|
||||
];
|
||||
|
||||
const updateQueue = [
|
||||
{
|
||||
tag: "Price Revision",
|
||||
tagColor: "text-tertiary bg-tertiary-fixed",
|
||||
borderColor: "border-tertiary",
|
||||
name: "Nordic Wool Sweater",
|
||||
vendor: "Oslo Textiles",
|
||||
date: "Oct 24",
|
||||
note: null,
|
||||
},
|
||||
{
|
||||
tag: "Spec Change",
|
||||
tagColor: "text-primary bg-primary-fixed",
|
||||
borderColor: "border-primary",
|
||||
name: "Lumix Ultra Drone",
|
||||
vendor: "AeroDynamics Gmbh",
|
||||
date: "Oct 23",
|
||||
note: "Battery capacity updated (+15%)",
|
||||
},
|
||||
];
|
||||
|
||||
const curatorActions = [
|
||||
{
|
||||
color: "bg-tertiary-fixed",
|
||||
dot: "bg-tertiary",
|
||||
text: 'Listing Approved: "Organic Silk Scarf"',
|
||||
by: "By Sarah J. • 12 mins ago",
|
||||
},
|
||||
{
|
||||
color: "bg-primary-fixed",
|
||||
dot: "bg-primary",
|
||||
text: 'Update Rejected: "Smart Lock Gen 3"',
|
||||
by: "By System Audit • 45 mins ago",
|
||||
},
|
||||
];
|
||||
|
||||
export default function AdminDashboardPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div className="max-w-2xl">
|
||||
<h2 className="text-4xl font-extrabold tracking-tight text-on-surface mb-2">Curator Intelligence</h2>
|
||||
<p className="text-slate-500 text-lg leading-relaxed">
|
||||
Central oversight for global inventory. Reviewing market listings and vendor updates for the Ina Trading ecosystem.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="bg-primary-container text-on-primary-container px-4 py-2 rounded-lg flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-sm">bolt</span>
|
||||
<span className="text-xs font-bold uppercase tracking-widest">Live Updates Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metric Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
||||
{[
|
||||
{ label: "Total Pending", value: "142", sub: "+12% vs yesterday", subColor: "text-primary" },
|
||||
{ label: "In Review", value: "28", sub: "4 teams active", subColor: "text-tertiary" },
|
||||
{ label: "Approved Today", value: "382", sub: "94% acceptance", subColor: "text-slate-400", valueColor: "text-tertiary" },
|
||||
].map((metric) => (
|
||||
<div key={metric.label} className="bg-surface-container-lowest p-8 rounded-xl relative overflow-hidden shadow-[0px_20px_40px_rgba(25,28,30,0.06)] group">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-slate-50 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110" />
|
||||
<p className="text-[10px] uppercase tracking-widest text-slate-400 mb-2 relative z-10">{metric.label}</p>
|
||||
<div className="flex items-baseline gap-2 relative z-10">
|
||||
<h3 className={`text-5xl font-black ${metric.valueColor || "text-on-surface"}`}>{metric.value}</h3>
|
||||
<span className={`text-sm font-bold ${metric.subColor}`}>{metric.sub}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Two-column content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
{/* Product Review Queue */}
|
||||
<div className="lg:col-span-7">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h4 className="text-2xl font-bold tracking-tight">New Product Review Queue</h4>
|
||||
<p className="text-sm text-slate-400 uppercase tracking-widest mt-1">Initial Listing Requests</p>
|
||||
</div>
|
||||
<button className="text-sm font-semibold text-primary hover:underline">View All</button>
|
||||
</div>
|
||||
<div className="bg-surface-container-low rounded-xl overflow-hidden p-1">
|
||||
<div className="bg-surface-container-lowest rounded-lg">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-50">
|
||||
{["Product Name", "Vendor", "Request Date", "Action"].map((h) => (
|
||||
<th key={h} className={`px-6 py-4 text-[10px] font-bold uppercase tracking-[0.1em] text-slate-400 ${h === "Action" ? "text-right" : ""}`}>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-50">
|
||||
{reviewQueue.map((item) => (
|
||||
<tr key={item.name} className="group hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-5">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
|
||||
<span className="material-symbols-outlined text-slate-400">{item.icon}</span>
|
||||
</div>
|
||||
<span className="font-bold text-on-surface">{item.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-5 text-slate-600 font-medium">{item.vendor}</td>
|
||||
<td className="px-6 py-5 text-slate-500 font-medium">{item.date}</td>
|
||||
<td className="px-6 py-5 text-right">
|
||||
<button className="bg-gradient-to-r from-primary to-primary-container text-white px-5 py-2 rounded-lg text-xs font-bold uppercase tracking-widest shadow-lg shadow-primary/20 transform group-hover:scale-105 transition-all">
|
||||
Take Review
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Update Queue */}
|
||||
<div className="lg:col-span-5">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h4 className="text-2xl font-bold tracking-tight">Update Queue</h4>
|
||||
<p className="text-sm text-slate-400 uppercase tracking-widest mt-1">Metadata & Pricing Refinement</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{updateQueue.map((item) => (
|
||||
<div key={item.name} className={`bg-surface-container-lowest p-6 rounded-xl shadow-[0px_20px_40px_rgba(25,28,30,0.06)] border-l-4 ${item.borderColor}`}>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<span className={`text-[10px] font-black uppercase tracking-widest px-2 py-1 rounded mb-2 inline-block ${item.tagColor}`}>
|
||||
{item.tag}
|
||||
</span>
|
||||
<h5 className="text-lg font-bold">{item.name}</h5>
|
||||
<p className="text-xs text-slate-400 font-medium">Vendor: {item.vendor}</p>
|
||||
</div>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase">{item.date}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-50">
|
||||
{item.note
|
||||
? <p className="text-xs text-slate-500 font-medium">{item.note}</p>
|
||||
: <div />
|
||||
}
|
||||
<button className="text-xs font-black uppercase tracking-[0.1em] text-primary hover:text-primary-container transition-colors">
|
||||
Review Changes →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Recent Curator Actions */}
|
||||
<div className="mt-4 bg-surface-container-low p-6 rounded-xl">
|
||||
<h6 className="text-xs font-black uppercase tracking-[0.2em] text-slate-500 mb-6">Recent Curator Actions</h6>
|
||||
<div className="space-y-6 relative">
|
||||
<div className="absolute left-[11px] top-2 bottom-2 w-[2px] bg-slate-200" />
|
||||
{curatorActions.map((action) => (
|
||||
<div key={action.text} className="relative pl-8">
|
||||
<div className={`absolute left-0 top-1 w-6 h-6 rounded-full ${action.color} flex items-center justify-center border-4 border-surface-container-low`}>
|
||||
<div className={`w-2 h-2 ${action.dot} rounded-full`} />
|
||||
</div>
|
||||
<p className="text-sm font-bold">{action.text}</p>
|
||||
<p className="text-[10px] text-slate-400 uppercase font-bold tracking-widest">{action.by}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Market Saturation Report Banner */}
|
||||
<div className="mt-20 bg-slate-900 text-white rounded-2xl p-10 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 blur-[100px] -mr-32 -mt-32" />
|
||||
<div className="relative z-10 max-w-xl">
|
||||
<h4 className="text-3xl font-black mb-4">Market Saturation Report</h4>
|
||||
<p className="text-slate-400 font-medium">
|
||||
Your current review velocity is{" "}
|
||||
<span className="text-white">15% higher</span> than the monthly average.
|
||||
Consider delegating price-based updates to the automated filter.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<button className="bg-white text-slate-950 font-black px-8 py-4 rounded-lg uppercase tracking-widest text-sm hover:bg-primary hover:text-white transition-all">
|
||||
Download PDF Analysis
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAB */}
|
||||
<button className="fixed bottom-8 right-8 w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-transform z-50 group">
|
||||
<span className="material-symbols-outlined text-3xl group-hover:rotate-90 transition-transform">add</span>
|
||||
<span className="absolute right-20 bg-slate-900 text-white text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
|
||||
Create Manual Entry
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user