Translate admin panel to all 6 languages

src/app/admin/transactions/page.tsx

@@ -1,5 +1,6 @@
 import { ArrowLeftRight } from "lucide-react";
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
 import { requireStaff } from "@/lib/admin/guard";
 import { prisma } from "@/lib/prisma";
@@ -8,13 +9,6 @@ export const dynamic = "force-dynamic";
 
 const PER_PAGE = 25;
 
-// Read-only listing of PayPal / top-up transactions recorded by the CMS
-// (website_paypal_transactions). No mutations — this page never writes.
-//
-// website_* ids are BigInt; users.id (the payer) is the emulator-owned Int.
-// The model has no Prisma relation to User, so payer usernames are resolved in
-// one batched lookup keyed by userId.
-
 type Txn = Awaited<ReturnType<typeof prisma.websitePaypalTransactions.findMany>>[number];
 
 const PAID_STATUS = new Set(["completed", "paid", "success", "approved"]);
@@ -51,6 +45,8 @@ export default async function AdminTransactions({
 }) {
   await requireStaff();
 
+  const t = await getTranslations("pages.admin.transactions");
+
   const sp = await searchParams;
   const page = Math.max(1, Number(sp.page ?? "1") || 1);
 
@@ -94,21 +90,21 @@ export default async function AdminTransactions({
           <ArrowLeftRight size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Transactions</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Read-only · PayPal / top-up transactions recorded by the CMS, newest first.</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="Total transactions" value={total} icon="🧾" />
+        <StatusCard label={t("totalTransactions")} value={total} icon="🧾" />
         <StatusCard
-          label="Paid (this page)"
+          label={t("pagePaid")}
           value={pagePaid}
           state={pagePaid > 0 ? "ok" : "neutral"}
           icon="💳"
         />
         <StatusCard
-          label="Failed (this page)"
+          label={t("pageFailed")}
           value={pageFailed}
           state={pageFailed > 0 ? "danger" : "neutral"}
           icon="⚠️"
@@ -116,49 +112,49 @@ export default async function AdminTransactions({
       </div>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Transactions ({total})</h2>
+        <h2 className="admin-section-title">{t("title")} ({total})</h2>
         {transactions.length === 0 ? (
-          <div className="admin-empty">No transactions.</div>
+          <div className="admin-empty">{t("noTransactions")}</div>
         ) : (
           <div className="overflow-x-auto">
             <table>
               <thead>
                 <tr>
-                  <th>ID</th>
-                  <th>Payer</th>
-                  <th>Amount</th>
-                  <th>Package</th>
-                  <th>Status</th>
-                  <th>Transaction</th>
-                  <th>Date</th>
+                  <th>{t("colId")}</th>
+                  <th>{t("colPayer")}</th>
+                  <th>{t("colAmount")}</th>
+                  <th>{t("colPackage")}</th>
+                  <th>{t("colStatus")}</th>
+                  <th>{t("colTransaction")}</th>
+                  <th>{t("colDate")}</th>
                 </tr>
               </thead>
               <tbody>
-                {transactions.map((t) => {
-                  const state = statusState(t.status);
+                {transactions.map((x) => {
+                  const state = statusState(x.status);
                   return (
-                    <tr key={String(t.id)}>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{String(t.id)}</td>
+                    <tr key={String(x.id)}>
+                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{String(x.id)}</td>
                       <td>
-                        <Link href={`/admin/users/${t.userId}`}>
-                          {names.get(t.userId) ?? `#${t.userId}`}
+                        <Link href={`/admin/users/${x.userId}`}>
+                          {names.get(x.userId) ?? `#${x.userId}`}
                         </Link>
                       </td>
-                      <td>{formatAmount(t.amount, t.currency)}</td>
-                      <td>{t.description ?? "—"}</td>
+                      <td>{formatAmount(x.amount, x.currency)}</td>
+                      <td>{x.description ?? "—"}</td>
                       <td>
-                        {t.status ? (
+                        {x.status ? (
                           <span
                             className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
                           >
-                            {t.status}
+                            {x.status}
                           </span>
                         ) : (
                           <span className="text-sm text-gray-500 dark:text-gray-400">—</span>
                         )}
                       </td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.transactionId}</td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{fromDate(t.createdAt)}</td>
+                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{x.transactionId}</td>
+                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{fromDate(x.createdAt)}</td>
                     </tr>
                   );
                 })}
@@ -169,17 +165,17 @@ export default async function AdminTransactions({
       </section>
 
       <p className="text-xs text-gray-500 dark:text-gray-400">
-        Page {page} / {pages} · {total} transactions
+        {t("pagination", { page, pages, total })}
         {page > 1 ? (
           <>
             {" · "}
-            <Link href={`/admin/transactions?page=${page - 1}`}>← Prev</Link>
+            <Link href={`/admin/transactions?page=${page - 1}`}>← {t("prev")}</Link>
           </>
         ) : null}
         {page < pages ? (
           <>
             {" · "}
-            <Link href={`/admin/transactions?page=${page + 1}`}>Next →</Link>
+            <Link href={`/admin/transactions?page=${page + 1}`}>{t("next")} →</Link>
           </>
         ) : null}
       </p>