Translate admin panel to all 6 languages

src/app/admin/shop/page.tsx

@@ -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>