Improve shop hub: CurrencyIcon on packages/vouchers, DataTable for transactions.

Co-authored-by: Cursor <[email protected]>

src/app/admin/shop/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
+import { CurrencyIcon } from "@/components/shared/currency-icon";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
@@ -26,6 +27,24 @@ function statusState(
 	return undefined;
 }
 
+function CurrencyCell({
+	kind,
+	value,
+}: {
+	kind: "credits" | "duckets" | "diamonds";
+	value: number | null | undefined;
+}) {
+	if (value == null) {
+		return <span className="muted">—</span>;
+	}
+	return (
+		<span className="inline-flex items-center gap-1.5 whitespace-nowrap">
+			<CurrencyIcon kind={kind} size={14} />
+			{value}
+		</span>
+	);
+}
+
 export default async function AdminShop() {
 	const { session, permissions } = await getAdminContext();
 	if (!canAccess(permissions, PERMS.SHOP_VIEW, session.user.rank)) {
@@ -64,7 +83,7 @@ export default async function AdminShop() {
 
 	return (
 		<main>
-			<div style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "1rem" }}>
+			<div className="flex items-center justify-end gap-4">
 				<Link href="/admin/shop/new" className="btn btn-primary">
 					{t("newPackage")}
 				</Link>
@@ -82,13 +101,13 @@ export default async function AdminShop() {
 			</div>
 
 			<section className="mt-6">
-				<h2>
+				<h2 className="admin-section-title">
 					{t("packages")} ({packages.length})
 				</h2>
 				{packages.length === 0 ? (
-					<p className="muted">{t("noPackages")}</p>
+					<div className="admin-empty">{t("noPackages")}</div>
 				) : (
-					<div style={{ overflowX: "auto" }}>
+					<div className="admin-card overflow-x-auto" style={{ padding: 0 }}>
 						<table>
 							<thead>
 								<tr>
@@ -110,9 +129,15 @@ export default async function AdminShop() {
 											<Link href={`/admin/shop/${p.id}`}>{p.name}</Link>
 										</td>
 										<td>{p.costs}</td>
-										<td className="muted">{p.credits ?? "—"}</td>
-										<td className="muted">{p.duckets ?? "—"}</td>
-										<td className="muted">{p.diamonds ?? "—"}</td>
+										<td>
+											<CurrencyCell kind="credits" value={p.credits} />
+										</td>
+										<td>
+											<CurrencyCell kind="duckets" value={p.duckets} />
+										</td>
+										<td>
+											<CurrencyCell kind="diamonds" value={p.diamonds} />
+										</td>
 										<td className="muted">{p.giveRank ?? "—"}</td>
 										<td className="muted">{p.position}</td>
 									</tr>
@@ -124,16 +149,14 @@ export default async function AdminShop() {
 			</section>
 
 			<section className="mt-6">
-				<h2>
+				<h2 className="admin-section-title">
 					{t("recentOrders")} ({orders.length})
 				</h2>
-				<p className="muted" style={{ marginTop: "-0.4rem" }}>
-					{t("ordersHint")} (<code>website_paypal_transactions</code>).
-				</p>
+				<p className="muted -mt-1 mb-3 text-sm">{t("ordersHint")}</p>
 				{orders.length === 0 ? (
-					<p className="muted">{t("noOrders")}</p>
+					<div className="admin-empty">{t("noOrders")}</div>
 				) : (
-					<div style={{ overflowX: "auto" }}>
+					<div className="admin-card overflow-x-auto" style={{ padding: 0 }}>
 						<table>
 							<thead>
 								<tr>
@@ -153,7 +176,11 @@ export default async function AdminShop() {
 											<td>
 												<code>{o.transactionId}</code>
 											</td>
-											<td className="muted">{o.userId}</td>
+											<td className="muted">
+												<Link href={`/admin/users/${o.userId}`}>
+													#{o.userId}
+												</Link>
+											</td>
 											<td className="muted">{o.description ?? "—"}</td>
 											<td>
 												{o.amount} {o.currency}