feat: add Ina Trading portal flows and API integration
This commit is contained in:
Wira Basalamah
232
src/app/(dashboard)/dashboard/page.tsx
Normal file
232
src/app/(dashboard)/dashboard/page.tsx
Normal file
@ -0,0 +1,232 @@
|
||||
"use client";
|
||||
|
||||
import { useLanguage } from "@/lib/i18n-context";
|
||||
|
||||
const recentOrders = [
|
||||
{
|
||||
id: "ORD-001",
|
||||
product: "Titan Minimalist V2",
|
||||
sku: "TM-9920",
|
||||
customer: "Sarah Jenkins",
|
||||
location: "London, UK",
|
||||
date: "Oct 24, 2023",
|
||||
amount: "$249.00",
|
||||
status: "Processing",
|
||||
statusColor: "text-primary bg-primary/10",
|
||||
},
|
||||
{
|
||||
id: "ORD-002",
|
||||
product: "Sonic Wave Pro",
|
||||
sku: "SW-1021",
|
||||
customer: "Marcus Thorne",
|
||||
location: "Berlin, DE",
|
||||
date: "Oct 23, 2023",
|
||||
amount: "$499.00",
|
||||
status: "Shipped",
|
||||
statusColor: "text-secondary bg-secondary/10",
|
||||
},
|
||||
{
|
||||
id: "ORD-003",
|
||||
product: "Pulse Runner X",
|
||||
sku: "PR-8821",
|
||||
customer: "Elena Rodriguez",
|
||||
location: "Madrid, ES",
|
||||
date: "Oct 23, 2023",
|
||||
amount: "$125.00",
|
||||
status: "Delivered",
|
||||
statusColor: "text-tertiary bg-tertiary/10",
|
||||
},
|
||||
];
|
||||
|
||||
const barHeights = [40, 65, 50, 85, 70, 60, 95, 45, 55, 80];
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { t } = useLanguage();
|
||||
const d = t.dashboard.overview;
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
{/* Hero Title */}
|
||||
<div className="mb-10">
|
||||
<h1 className="text-5xl font-black font-headline tracking-tighter text-on-surface mb-2">
|
||||
{d.title}
|
||||
</h1>
|
||||
<p className="text-on-surface-variant font-medium">{d.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-10">
|
||||
{/* Total Products */}
|
||||
<div className="bg-surface-container-lowest p-8 rounded-xl magazine-shadow relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-primary"></div>
|
||||
<p className="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-2">
|
||||
{d.totalProducts}
|
||||
</p>
|
||||
<h3 className="text-5xl font-black font-headline text-primary">1,284</h3>
|
||||
<div className="flex items-center gap-2 mt-4 text-secondary font-bold text-sm">
|
||||
<span className="material-symbols-outlined text-sm">trending_up</span>
|
||||
<span>+12.5% {d.vsLastMonth}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Total Buyers */}
|
||||
<div className="bg-surface-container-lowest p-8 rounded-xl magazine-shadow relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-secondary"></div>
|
||||
<p className="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-2">
|
||||
{d.totalBuyers}
|
||||
</p>
|
||||
<h3 className="text-5xl font-black font-headline text-secondary">42,502</h3>
|
||||
<div className="flex items-center gap-2 mt-4 text-tertiary font-bold text-sm">
|
||||
<span className="material-symbols-outlined text-sm">group</span>
|
||||
<span>{d.globalReach}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Refunds */}
|
||||
<div className="bg-surface-container-lowest p-8 rounded-xl magazine-shadow relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-tertiary"></div>
|
||||
<p className="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-2">
|
||||
{d.refunds}
|
||||
</p>
|
||||
<h3 className="text-5xl font-black font-headline text-tertiary">142</h3>
|
||||
<div className="flex items-center gap-2 mt-4 text-error font-bold text-sm">
|
||||
<span className="material-symbols-outlined text-sm">history</span>
|
||||
<span>0.3% {d.returnRate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analytics Row */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-10">
|
||||
{/* Orders Analytics Chart */}
|
||||
<div className="lg:col-span-2 bg-surface-container-lowest p-8 rounded-xl magazine-shadow">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h4 className="text-xl font-black font-headline tracking-tight">{d.ordersAnalytics}</h4>
|
||||
<p className="text-sm text-on-surface-variant font-medium">{d.ordersSubtitle}</p>
|
||||
</div>
|
||||
<select className="bg-surface-container-low border border-surface-container-high rounded-xl text-sm font-bold text-on-surface px-3 py-2 outline-none focus:border-primary">
|
||||
<option>{d.last30Days}</option>
|
||||
<option>{d.lastQuarter}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Bar Chart */}
|
||||
<div className="h-64 flex items-end justify-between gap-2 px-2">
|
||||
{barHeights.map((height, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`w-full rounded-t-lg transition-all ${
|
||||
i === 4 ? "bg-primary" : "bg-surface-container hover:bg-primary/20"
|
||||
}`}
|
||||
style={{ height: `${height}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-between mt-4 px-2 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
|
||||
<span>{d.wk} 1</span>
|
||||
<span>{d.wk} 2</span>
|
||||
<span>{d.wk} 3</span>
|
||||
<span>{d.wk} 4</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Earnings */}
|
||||
<div className="bg-surface-container-lowest p-8 rounded-xl magazine-shadow flex flex-col">
|
||||
<h4 className="text-xl font-black font-headline tracking-tight mb-6">{d.earnings}</h4>
|
||||
|
||||
{/* Donut Chart Placeholder */}
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="w-44 h-44 rounded-full border-[16px] border-surface-container flex items-center justify-center relative">
|
||||
<div
|
||||
className="absolute inset-[-16px] rounded-full border-[16px] border-primary"
|
||||
style={{ clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%)" }}
|
||||
/>
|
||||
<div className="text-center">
|
||||
<span className="block text-3xl font-black font-headline">$84.2k</span>
|
||||
<span className="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
|
||||
{d.grossRevenue}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="space-y-4 mt-6">
|
||||
{[
|
||||
{ color: "bg-primary", label: d.directSales, pct: "65%" },
|
||||
{ color: "bg-secondary", label: d.retailPartners, pct: "25%" },
|
||||
{ color: "bg-tertiary", label: d.affiliates, pct: "10%" },
|
||||
].map((item) => (
|
||||
<div key={item.label} className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-3 h-3 ${item.color} rounded-full`}></span>
|
||||
<span className="font-semibold">{item.label}</span>
|
||||
</div>
|
||||
<span className="font-bold text-on-surface-variant">{item.pct}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Orders Table */}
|
||||
<div className="bg-surface-container-lowest rounded-xl magazine-shadow overflow-hidden">
|
||||
<div className="p-8 flex items-center justify-between border-b border-surface-container">
|
||||
<h4 className="text-xl font-black font-headline tracking-tight">{d.recentOrders}</h4>
|
||||
<button className="text-primary font-bold text-sm hover:underline flex items-center gap-1">
|
||||
{d.viewAll}{" "}
|
||||
<span className="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="bg-surface-container-low text-[10px] font-black text-on-surface-variant uppercase tracking-widest">
|
||||
<th className="px-8 py-4">{d.productDetails}</th>
|
||||
<th className="px-8 py-4">{d.customer}</th>
|
||||
<th className="px-8 py-4">{d.transactionDate}</th>
|
||||
<th className="px-8 py-4">{d.amount}</th>
|
||||
<th className="px-8 py-4">{d.status}</th>
|
||||
<th className="px-8 py-4 text-right">{d.action}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-surface-container">
|
||||
{recentOrders.map((order) => (
|
||||
<tr key={order.id} className="hover:bg-surface-container-low/50 transition-colors">
|
||||
<td className="px-8 py-5">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-surface-container flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-on-surface-variant">inventory_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-sm">{order.product}</p>
|
||||
<p className="text-xs text-on-surface-variant">SKU: {order.sku}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-8 py-5">
|
||||
<p className="text-sm font-semibold">{order.customer}</p>
|
||||
<p className="text-xs text-on-surface-variant">{order.location}</p>
|
||||
</td>
|
||||
<td className="px-8 py-5 text-sm font-medium text-on-surface-variant">{order.date}</td>
|
||||
<td className="px-8 py-5 text-sm font-bold">{order.amount}</td>
|
||||
<td className="px-8 py-5">
|
||||
<span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-tighter ${order.statusColor}`}>
|
||||
{order.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-8 py-5 text-right">
|
||||
<button className="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">
|
||||
more_horiz
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user