remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Translate admin panel to all 6 languages

Browse Source
This commit is contained in:
openhands committed 2026-07-04 21:21:15 +02:00
1 parent f381aa987f
commit befa4ec282
63 files changed
+9353 -1443
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/shop/[id]/page.tsx
+18 -15
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
import { deleteShopArticle, updateShopArticle } from "@/actions/admin-shop";
import { prisma } from "@/lib/prisma";
@@ -11,6 +12,8 @@ export default async function EditShopArticle({
}: {
params: Promise<{ id: string }>;
}) {
const t = await getTranslations("pages.admin.shop");
const { id } = await params;
let pkg: Awaited<ReturnType<typeof prisma.websiteShopArticles.findUnique>> = null;
try {
@@ -27,9 +30,9 @@ export default async function EditShopArticle({
<Package size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Edit shop package</h1>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("editPackageTitle")}</h1>
<Link href="/admin/shop" className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">
← Back to shop
← {t("backToShop")}
</Link>
</div>
</div>
@@ -37,26 +40,26 @@ export default async function EditShopArticle({
<form action={updateShopArticle} className="admin-card">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<input type="hidden" name="id" value={String(pkg.id)} />
<input name="name" defaultValue={pkg.name} placeholder="Name" required maxLength={255} className="w-full" />
<input name="info" defaultValue={pkg.info} placeholder="Info / description" maxLength={255} className="w-full" />
<input name="icon" defaultValue={pkg.iconUrl} placeholder="Icon URL" maxLength={255} className="w-full" />
<input name="color" defaultValue={pkg.color} placeholder="Color (e.g. #ffcc00)" maxLength={255} className="w-full" />
<input name="costs" type="number" min={0} defaultValue={pkg.costs} placeholder="Costs (store price)" required className="w-full" />
<input name="credits" type="number" min={0} defaultValue={pkg.credits ?? undefined} placeholder="Credits given (optional)" className="w-full" />
<input name="duckets" type="number" min={0} defaultValue={pkg.duckets ?? undefined} placeholder="Duckets given (optional)" className="w-full" />
<input name="diamonds" type="number" min={0} defaultValue={pkg.diamonds ?? undefined} placeholder="Diamonds given (optional)" className="w-full" />
<input name="giveRank" type="number" min={0} defaultValue={pkg.giveRank ?? undefined} placeholder="Give rank (optional)" className="w-full" />
<input name="badges" defaultValue={pkg.badges ?? ""} placeholder="Badge codes (optional)" maxLength={255} className="w-full" />
<input name="position" type="number" min={0} defaultValue={pkg.position} placeholder="Position" className="w-full" />
<input name="name" defaultValue={pkg.name} placeholder={t("form.namePlaceholder")} required maxLength={255} className="w-full" />
<input name="info" defaultValue={pkg.info} placeholder={t("form.infoPlaceholder")} maxLength={255} className="w-full" />
<input name="icon" defaultValue={pkg.iconUrl} placeholder={t("form.iconPlaceholder")} maxLength={255} className="w-full" />
<input name="color" defaultValue={pkg.color} placeholder={t("form.colorPlaceholder")} maxLength={255} className="w-full" />
<input name="costs" type="number" min={0} defaultValue={pkg.costs} placeholder={t("form.costsPlaceholder")} required className="w-full" />
<input name="credits" type="number" min={0} defaultValue={pkg.credits ?? undefined} placeholder={t("form.creditsPlaceholder")} className="w-full" />
<input name="duckets" type="number" min={0} defaultValue={pkg.duckets ?? undefined} placeholder={t("form.ducketsPlaceholder")} className="w-full" />
<input name="diamonds" type="number" min={0} defaultValue={pkg.diamonds ?? undefined} placeholder={t("form.diamondsPlaceholder")} className="w-full" />
<input name="giveRank" type="number" min={0} defaultValue={pkg.giveRank ?? undefined} placeholder={t("form.giveRankPlaceholder")} className="w-full" />
<input name="badges" defaultValue={pkg.badges ?? ""} placeholder={t("form.badgesPlaceholder")} maxLength={255} className="w-full" />
<input name="position" type="number" min={0} defaultValue={pkg.position} placeholder={t("form.positionPlaceholder")} className="w-full" />
</div>
<div className="mt-6 flex gap-2">
<button type="submit" className="btn btn-primary">
Save
{t("form.save")}
</button>
<form action={deleteShopArticle}>
<input type="hidden" name="id" value={String(pkg.id)} />
<button type="submit" className="btn btn-danger">
Delete package
{t("form.deletePackage")}
</button>
</form>
</div>
src/app/admin/shop/new/page.tsx
+18 -15
View File
@@ -1,8 +1,11 @@
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { createShopArticle } from "@/actions/admin-shop";
import { Package } from "lucide-react";
export default function NewShopArticle() {
export default async function NewShopArticle() {
const t = await getTranslations("pages.admin.shop");
return (
<main>
<div className="flex items-center gap-3 mb-6">
@@ -10,30 +13,30 @@ export default function NewShopArticle() {
<Package size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">New shop package</h1>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("newPackageTitle")}</h1>
<Link href="/admin/shop" className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">
← Back to shop
← {t("backToShop")}
</Link>
</div>
</div>
<form action={createShopArticle} className="admin-card">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<input name="name" placeholder="Name" required maxLength={255} className="w-full" />
<input name="info" placeholder="Info / description" maxLength={255} className="w-full" />
<input name="icon" placeholder="Icon" maxLength={255} className="w-full" />
<input name="color" placeholder="Color (e.g. #ffcc00)" maxLength={255} className="w-full" />
<input name="costs" type="number" min={0} placeholder="Costs (store price)" required className="w-full" />
<input name="credits" type="number" min={0} placeholder="Credits given (optional)" className="w-full" />
<input name="duckets" type="number" min={0} placeholder="Duckets given (optional)" className="w-full" />
<input name="diamonds" type="number" min={0} placeholder="Diamonds given (optional)" className="w-full" />
<input name="giveRank" type="number" min={0} placeholder="Give rank (optional)" className="w-full" />
<input name="badges" placeholder="Badge codes (optional)" maxLength={255} className="w-full" />
<input name="position" type="number" min={0} placeholder="Position" defaultValue={0} className="w-full" />
<input name="name" placeholder={t("form.namePlaceholder")} required maxLength={255} className="w-full" />
<input name="info" placeholder={t("form.infoPlaceholder")} maxLength={255} className="w-full" />
<input name="icon" placeholder={t("form.iconPlaceholder")} maxLength={255} className="w-full" />
<input name="color" placeholder={t("form.colorPlaceholder")} maxLength={255} className="w-full" />
<input name="costs" type="number" min={0} placeholder={t("form.costsPlaceholder")} required className="w-full" />
<input name="credits" type="number" min={0} placeholder={t("form.creditsPlaceholder")} className="w-full" />
<input name="duckets" type="number" min={0} placeholder={t("form.ducketsPlaceholder")} className="w-full" />
<input name="diamonds" type="number" min={0} placeholder={t("form.diamondsPlaceholder")} className="w-full" />
<input name="giveRank" type="number" min={0} placeholder={t("form.giveRankPlaceholder")} className="w-full" />
<input name="badges" placeholder={t("form.badgesPlaceholder")} maxLength={255} className="w-full" />
<input name="position" type="number" min={0} placeholder={t("form.positionPlaceholder")} defaultValue={0} className="w-full" />
</div>
<div className="mt-6 text-right">
<button type="submit" className="btn btn-primary">
Create
{t("form.create")}
</button>
</div>
</form>
src/app/admin/shop/page.tsx
+27 -25
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
@@ -16,6 +17,8 @@ function statusState(status: string | null | undefined): "ok" | "danger" | undef
}
export default async function AdminShop() {
const t = await getTranslations("pages.admin.shop");
let packages: Awaited<ReturnType<typeof prisma.websiteShopArticles.findMany>> = [];
try {
packages = await prisma.websiteShopArticles.findMany({
@@ -41,21 +44,20 @@ export default async function AdminShop() {
return (
<main>
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<h1 style={{ flex: 1 }}>Shop</h1>
<h1 style={{ flex: 1 }}>{t("title")}</h1>
<Link href="/admin/shop/new" className="btn btn-primary">
+ New package
{t("newPackage")}
</Link>
</div>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Website store packages (<code>website_shop_articles</code>). <code>costs</code> is the price
shown in the store; credits/duckets/diamonds/badges are what the buyer receives.
{t("subtitle")} (<code>website_shop_articles</code>). {t("tableHint")}
</p>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Packages" value={packages.length} icon="🛍️" />
<StatusCard label="Recent orders" value={orders.length} icon="🧾" />
<StatusCard label={t("packages")} value={packages.length} icon="🛍️" />
<StatusCard label={t("recentOrders")} value={orders.length} icon="🧾" />
<StatusCard
label="Paid orders"
label={t("paidOrders")}
value={paidOrders}
state={paidOrders > 0 ? "ok" : "neutral"}
icon="💳"
@@ -63,22 +65,22 @@ export default async function AdminShop() {
</div>
<section className="mt-6">
<h2>Packages ({packages.length})</h2>
<h2>{t("packages")} ({packages.length})</h2>
{packages.length === 0 ? (
<p className="muted">No shop packages yet.</p>
<p className="muted">{t("noPackages")}</p>
) : (
<div style={{ overflowX: "auto" }}>
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Costs</th>
<th>Credits</th>
<th>Duckets</th>
<th>Diamonds</th>
<th>Rank</th>
<th>Position</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>
@@ -103,23 +105,23 @@ export default async function AdminShop() {
</section>
<section className="mt-6">
<h2>Recent orders ({orders.length})</h2>
<h2>{t("recentOrders")} ({orders.length})</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Read-only PayPal transaction log (<code>website_paypal_transactions</code>).
{t("ordersHint")} (<code>website_paypal_transactions</code>).
</p>
{orders.length === 0 ? (
<p className="muted">No orders recorded.</p>
<p className="muted">{t("noOrders")}</p>
) : (
<div style={{ overflowX: "auto" }}>
<table>
<thead>
<tr>
<th>Transaction</th>
<th>User</th>
<th>Description</th>
<th>Amount</th>
<th>Status</th>
<th>Date</th>
<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>