Translate admin panel to all 6 languages
This commit is contained in:
openhands committed
1 parent
f381aa987f
commit
befa4ec282
63 files changed
+9353
-1443
No files matched your search
@@ -1,4 +1,5 @@
|
||||
import { Gift } from "lucide-react";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { createVoucher, deleteVoucher } from "@/actions/admin-vouchers";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
@@ -21,6 +22,7 @@ function fmtDate(d: Date | null): string {
|
||||
}
|
||||
|
||||
export default async function AdminVouchers() {
|
||||
const t = await getTranslations("pages.admin.vouchers");
|
||||
const now = Date.now();
|
||||
|
||||
let vouchers: VoucherRow[] = [];
|
||||
@@ -61,27 +63,27 @@ export default async function AdminVouchers() {
|
||||
<Gift size={20} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Shop Vouchers</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Codes redeemable on the website shop for a balance top-up. Each user can use a given voucher once, up to its max uses.</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label="Vouchers" value={vouchers.length} icon="🎟️" />
|
||||
<StatusCard label={t("vouchers")} value={vouchers.length} icon="🎟️" />
|
||||
<StatusCard
|
||||
label="Active"
|
||||
label={t("active")}
|
||||
value={active}
|
||||
state={active > 0 ? "ok" : "neutral"}
|
||||
icon="✅"
|
||||
/>
|
||||
<StatusCard
|
||||
label="Used up"
|
||||
label={t("usedUp")}
|
||||
value={usedUpCount}
|
||||
state={usedUpCount > 0 ? "warn" : "neutral"}
|
||||
icon="📉"
|
||||
/>
|
||||
<StatusCard
|
||||
label="Expired"
|
||||
label={t("expired")}
|
||||
value={expiredCount}
|
||||
state={expiredCount > 0 ? "danger" : "neutral"}
|
||||
icon="⏰"
|
||||
@@ -89,40 +91,40 @@ export default async function AdminVouchers() {
|
||||
</div>
|
||||
|
||||
<form action={createVoucher} className="admin-card mb-6">
|
||||
<h3 style={{ marginTop: 0 }}>New voucher</h3>
|
||||
<h3 style={{ marginTop: 0 }}>{t("newVoucher")}</h3>
|
||||
<div className="grid cols-2" style={{ marginBottom: "0.75rem" }}>
|
||||
<label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Code</span>
|
||||
<input name="code" placeholder="SUMMER2026" maxLength={255} required />
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.code")}</span>
|
||||
<input name="code" placeholder={t("form.codePlaceholder")} maxLength={255} required />
|
||||
</label>
|
||||
<label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Amount (balance added)</span>
|
||||
<input name="amount" type="number" min={1} placeholder="50" required />
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.amount")}</span>
|
||||
<input name="amount" type="number" min={1} placeholder={t("form.amountPlaceholder")} required />
|
||||
</label>
|
||||
<label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Max uses</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.maxUses")}</span>
|
||||
<input name="maxUses" type="number" min={1} defaultValue={1} required />
|
||||
</label>
|
||||
<label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Expires at (optional)</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.expiresAt")}</span>
|
||||
<input name="expiresAt" type="datetime-local" />
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary">Create voucher</button>
|
||||
<button type="submit" className="btn btn-primary">{t("form.create")}</button>
|
||||
</form>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">Vouchers ({vouchers.length})</h2>
|
||||
<h2 className="admin-section-title">{t("title")} ({vouchers.length})</h2>
|
||||
<div className="admin-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<th>Amount</th>
|
||||
<th>Uses</th>
|
||||
<th>Status</th>
|
||||
<th>Expires</th>
|
||||
<th>Created</th>
|
||||
<th>{t("colCode")}</th>
|
||||
<th>{t("colAmount")}</th>
|
||||
<th>{t("colUses")}</th>
|
||||
<th>{t("colStatus")}</th>
|
||||
<th>{t("colExpires")}</th>
|
||||
<th>{t("colCreated")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -141,11 +143,11 @@ export default async function AdminVouchers() {
|
||||
</td>
|
||||
<td>
|
||||
{expired ? (
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">Expired</span>
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">{t("statusExpired")}</span>
|
||||
) : usedUp ? (
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">Used up</span>
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{t("statusUsedUp")}</span>
|
||||
) : (
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Active</span>
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">{t("statusActive")}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{fmtDate(v.expiresAt)}</td>
|
||||
@@ -154,7 +156,7 @@ export default async function AdminVouchers() {
|
||||
<form action={deleteVoucher}>
|
||||
<input type="hidden" name="id" value={v.id.toString()} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
Delete
|
||||
{t("delete")}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
@@ -163,7 +165,7 @@ export default async function AdminVouchers() {
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{vouchers.length === 0 ? <div className="admin-empty">No vouchers yet.</div> : null}
|
||||
{vouchers.length === 0 ? <div className="admin-empty">{t("noVouchers")}</div> : null}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in new issue
Block a user