feat(admin): items_base browser and AdminPageShell on core pages
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed
1 parent
7138ae4445
commit
98613af875
42 files changed
+2196
-698
No files matched your search
+135
-123
@@ -1,6 +1,8 @@
|
||||
import { ShoppingCart } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { AdminPageShell } from "@/components/admin/admin-page-shell";
|
||||
import { AdminSimplePager } from "@/components/admin/admin-simple-pager";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { CurrencyIcon } from "@/components/shared/currency-icon";
|
||||
@@ -111,142 +113,152 @@ export default async function AdminShop({
|
||||
).length;
|
||||
|
||||
return (
|
||||
<main>
|
||||
{loadError ? (
|
||||
<div className="mb-4 rounded-lg bg-[var(--admin-error-subtle)] p-3 text-xs text-[var(--admin-error)]">
|
||||
Could not load some shop data (database unavailable).
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex items-center justify-end gap-4">
|
||||
<AdminPageShell
|
||||
icon={ShoppingCart}
|
||||
title={t("title")}
|
||||
subtitle={t("subtitle")}
|
||||
actions={
|
||||
<Button variant="default" asChild>
|
||||
<Link href="/admin/shop/new">{t("newPackage")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<main>
|
||||
{loadError ? (
|
||||
<div className="mb-4 rounded-lg bg-[var(--admin-error-subtle)] p-3 text-xs text-[var(--admin-error)]">
|
||||
Could not load some shop data (database unavailable).
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("packages")} value={packageTotal} icon="🛍️" />
|
||||
<StatusCard label={t("recentOrders")} value={orders.length} icon="🧾" />
|
||||
<StatusCard
|
||||
label={t("paidOrders")}
|
||||
value={paidOrders}
|
||||
state={paidOrders > 0 ? "ok" : "neutral"}
|
||||
icon="💳"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("packages")} value={packageTotal} icon="🛍️" />
|
||||
<StatusCard
|
||||
label={t("recentOrders")}
|
||||
value={orders.length}
|
||||
icon="🧾"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("paidOrders")}
|
||||
value={paidOrders}
|
||||
state={paidOrders > 0 ? "ok" : "neutral"}
|
||||
icon="💳"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("packagesTotal", { count: packageTotal })}
|
||||
</h2>
|
||||
{packages.length === 0 ? (
|
||||
<div className="admin-empty">{t("noPackages")}</div>
|
||||
) : (
|
||||
<div className="admin-card overflow-x-auto" style={{ padding: 0 }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{t("colName")}</th>
|
||||
<th>{t("colPrice")}</th>
|
||||
<th>{t("colCredits")}</th>
|
||||
<th>{t("colDuckets")}</th>
|
||||
<th>{t("colDiamonds")}</th>
|
||||
<th>{t("colRank")}</th>
|
||||
<th>{t("colPosition")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{packages.map((p) => (
|
||||
<tr key={String(p.id)}>
|
||||
<td className="muted">{String(p.id)}</td>
|
||||
<td>
|
||||
<Link href={`/admin/shop/${p.id}`}>{p.name}</Link>
|
||||
</td>
|
||||
<td>{p.costs}</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>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("packagesTotal", { count: packageTotal })}
|
||||
</h2>
|
||||
{packages.length === 0 ? (
|
||||
<div className="admin-empty">{t("noPackages")}</div>
|
||||
) : (
|
||||
<div className="admin-card overflow-x-auto" style={{ padding: 0 }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{t("colName")}</th>
|
||||
<th>{t("colPrice")}</th>
|
||||
<th>{t("colCredits")}</th>
|
||||
<th>{t("colDuckets")}</th>
|
||||
<th>{t("colDiamonds")}</th>
|
||||
<th>{t("colRank")}</th>
|
||||
<th>{t("colPosition")}</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
<AdminSimplePager
|
||||
page={pkgPagination.page}
|
||||
lastPage={pkgPagination.lastPage}
|
||||
total={packageTotal}
|
||||
basePath="/admin/shop"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("recentOrders")} ({orders.length})
|
||||
</h2>
|
||||
<p className="muted -mt-1 mb-3 text-sm">{t("ordersHint")}</p>
|
||||
{orders.length === 0 ? (
|
||||
<div className="admin-empty">{t("noOrders")}</div>
|
||||
) : (
|
||||
<div className="admin-card overflow-x-auto" style={{ padding: 0 }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("colTransaction")}</th>
|
||||
<th>{t("colUser")}</th>
|
||||
<th>{t("colDescription")}</th>
|
||||
<th>{t("colAmount")}</th>
|
||||
<th>{t("colStatus")}</th>
|
||||
<th>{t("colDate")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orders.map((o) => {
|
||||
const state = statusState(o.status);
|
||||
return (
|
||||
<tr key={String(o.id)}>
|
||||
</thead>
|
||||
<tbody>
|
||||
{packages.map((p) => (
|
||||
<tr key={String(p.id)}>
|
||||
<td className="muted">{String(p.id)}</td>
|
||||
<td>
|
||||
<code>{o.transactionId}</code>
|
||||
<Link href={`/admin/shop/${p.id}`}>{p.name}</Link>
|
||||
</td>
|
||||
<td className="muted">
|
||||
<Link href={`/admin/users/${o.userId}`}>
|
||||
#{o.userId}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="muted">{o.description ?? "—"}</td>
|
||||
<td>{p.costs}</td>
|
||||
<td>
|
||||
{o.amount} {o.currency}
|
||||
<CurrencyCell kind="credits" value={p.credits} />
|
||||
</td>
|
||||
<td>
|
||||
{o.status ? (
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : state === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{o.status}
|
||||
</span>
|
||||
) : (
|
||||
<span className="muted">—</span>
|
||||
)}
|
||||
<CurrencyCell kind="duckets" value={p.duckets} />
|
||||
</td>
|
||||
<td className="muted">
|
||||
{formatDate(o.createdAt, "date")}
|
||||
<td>
|
||||
<CurrencyCell kind="diamonds" value={p.diamonds} />
|
||||
</td>
|
||||
<td className="muted">{p.giveRank ?? "—"}</td>
|
||||
<td className="muted">{p.position}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
<AdminSimplePager
|
||||
page={pkgPagination.page}
|
||||
lastPage={pkgPagination.lastPage}
|
||||
total={packageTotal}
|
||||
basePath="/admin/shop"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("recentOrders")} ({orders.length})
|
||||
</h2>
|
||||
<p className="muted -mt-1 mb-3 text-sm">{t("ordersHint")}</p>
|
||||
{orders.length === 0 ? (
|
||||
<div className="admin-empty">{t("noOrders")}</div>
|
||||
) : (
|
||||
<div className="admin-card overflow-x-auto" style={{ padding: 0 }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("colTransaction")}</th>
|
||||
<th>{t("colUser")}</th>
|
||||
<th>{t("colDescription")}</th>
|
||||
<th>{t("colAmount")}</th>
|
||||
<th>{t("colStatus")}</th>
|
||||
<th>{t("colDate")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orders.map((o) => {
|
||||
const state = statusState(o.status);
|
||||
return (
|
||||
<tr key={String(o.id)}>
|
||||
<td>
|
||||
<code>{o.transactionId}</code>
|
||||
</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}
|
||||
</td>
|
||||
<td>
|
||||
{o.status ? (
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : state === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{o.status}
|
||||
</span>
|
||||
) : (
|
||||
<span className="muted">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="muted">
|
||||
{formatDate(o.createdAt, "date")}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
</AdminPageShell>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user