Translate admin panel to all 6 languages

src/app/admin/users/[id]/edit/page.tsx

@@ -4,6 +4,7 @@ import { updateUser } from "@/actions/admin-user-edit";
 import { requireStaff } from "@/lib/admin/guard";
 import { User } from "lucide-react";
 import { prisma } from "@/lib/prisma";
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = "force-dynamic";
 
@@ -20,6 +21,7 @@ export default async function AdminUserEdit({
   await requireStaff();
 
   const { id } = await params;
+  const t = await getTranslations("pages.admin.users.editForm");
   const userId = Number(id);
   if (!Number.isInteger(userId) || userId <= 0) notFound();
 
@@ -66,10 +68,10 @@ export default async function AdminUserEdit({
     return (
       <main>
         <p className="text-sm text-gray-500 dark:text-gray-400">
-          <Link href="/admin/users">← Users</Link>
+          <Link href="/admin/users">← {t("title")}</Link>
         </p>
-        <h1>Edit user</h1>
-        <p className="text-xs text-gray-500 dark:text-gray-400">Could not load this user right now. Try again shortly.</p>
+        <h1>{t("title")}</h1>
+        <p className="text-xs text-gray-500 dark:text-gray-400">{t("loadError")}</p>
       </main>
     );
   }
@@ -86,8 +88,8 @@ export default async function AdminUserEdit({
           <User size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Edit {user.username}</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">ID {user.id}</p>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title", { username: user.username })}</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("idLabel", { id: user.id })}</p>
         </div>
       </div>
 
@@ -96,56 +98,56 @@ export default async function AdminUserEdit({
 
         <div className="grid cols-2">
           <label>
-            Email
+            {t("email")}
             <input name="mail" type="email" defaultValue={user.mail ?? ""} maxLength={500} />
           </label>
 
           <label>
-            Rank
+            {t("rank")}
             <input name="rank" type="number" min={1} defaultValue={user.rank} />
           </label>
 
           <label>
-            Motto
+            {t("motto")}
             <input name="motto" defaultValue={user.motto} maxLength={127} />
           </label>
 
           <label>
-            Look
+            {t("look")}
             <input name="look" defaultValue={user.look} maxLength={256} />
           </label>
 
           <label>
-            Credits
+            {t("credits")}
             <input name="credits" type="number" min={0} defaultValue={user.credits} />
           </label>
 
           <label>
-            Pixels
+            {t("pixels")}
             <input name="pixels" type="number" min={0} defaultValue={user.pixels} />
           </label>
 
           <label>
-            Points
+            {t("points")}
             <input name="points" type="number" min={0} defaultValue={user.points} />
           </label>
 
           <label>
-            Duckets
+            {t("duckets")}
             <input name="duckets" type="number" min={0} defaultValue={duckets} />
           </label>
 
           <label>
-            Diamonds
+            {t("diamonds")}
             <input name="diamonds" type="number" min={0} defaultValue={diamonds} />
           </label>
         </div>
 
-        <p className="text-xs text-gray-500 dark:text-gray-400">Currency fields set the exact balance, not a delta. Passwords are not editable here.</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">{t("hint")}</p>
 
         <div className="flex gap-2 mt-2">
-          <button type="submit" className="btn btn-primary">Save changes</button>
-          <Link href={`/admin/users/${user.id}`} className="btn">Cancel</Link>
+          <button type="submit" className="btn btn-primary">{t("save")}</button>
+          <Link href={`/admin/users/${user.id}`} className="btn">{t("cancel")}</Link>
         </div>
       </form>
     </main>

src/app/admin/users/[id]/page.tsx

@@ -10,6 +10,7 @@ import {
 import { InfoItem, StatusCard } from "@/components/admin/dashboard";
 import { User } from "lucide-react";
 import { prisma } from "@/lib/prisma";
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = "force-dynamic";
 
@@ -19,6 +20,7 @@ export default async function AdminUserDetail({
   params: Promise<{ id: string }>;
 }) {
   const { id } = await params;
+  const t = await getTranslations("pages.admin.users");
   const userId = Number(id);
   const user = await prisma.user
     .findUnique({
@@ -33,7 +35,7 @@ export default async function AdminUserDetail({
   return (
     <main>
       <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
-        <Link href="/admin/users">← Users</Link>
+        <Link href="/admin/users">← {t("title")}</Link>
       </p>
       <div className="flex items-center gap-3 mb-6">
         <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
@@ -41,91 +43,91 @@ export default async function AdminUserDetail({
         </div>
         <div>
           <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{user.username}</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{user.motto ? user.motto : "No motto set."}</p>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{user.motto ? user.motto : t("detail.noMotto")}</p>
         </div>
       </div>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label="User ID" value={user.id} icon="🆔" />
-        <StatusCard label="Rank" value={user.rank} icon="🎖️" />
-        <StatusCard label="Credits" value={user.credits} icon="💰" />
+        <StatusCard label={t("detail.userId")} value={user.id} icon="🆔" />
+        <StatusCard label={t("detail.rank")} value={user.rank} icon="🎖️" />
+        <StatusCard label={t("detail.credits")} value={user.credits} icon="💰" />
         <StatusCard
-          label="Status"
-          value={isOnline ? "Online" : "Offline"}
+          label={t("detail.online")}
+          value={isOnline ? t("detail.online") : t("offline")}
           state={isOnline ? "ok" : "neutral"}
           icon={isOnline ? "🟢" : "⚪"}
         />
       </div>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Overview</h2>
+        <h2 className="admin-section-title">{t("detail.overview")}</h2>
         <div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
-          <InfoItem label="Username" value={user.username} />
+          <InfoItem label={t("detail.username")} value={user.username} />
           <InfoItem
-            label="Status"
+            label={t("detail.online")}
             value={
               <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${isOnline ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
-                {isOnline ? "online" : "offline"}
+                {isOnline ? t("detail.online") : t("offline")}
               </span>
             }
           />
-          <InfoItem label="Rank" value={user.rank} />
-          <InfoItem label="Credits" value={user.credits} />
-          <InfoItem label="Look" value={<code>{user.look || "—"}</code>} />
+          <InfoItem label={t("detail.rank")} value={user.rank} />
+          <InfoItem label={t("detail.credits")} value={user.credits} />
+          <InfoItem label={t("detail.look")} value={<code>{user.look || "—"}</code>} />
         </div>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Actions</h2>
+        <h2 className="admin-section-title">{t("detail.actions")}</h2>
         <div className="grid cols-2">
           <form action={giveCurrency} className="admin-card">
             <input type="hidden" name="userId" value={user.id} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Give currency</h3>
+            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.giveCurrency")}</h3>
             <select name="type">
-              <option value="credits">Credits</option>
-              <option value="duckets">Duckets</option>
-              <option value="diamonds">Diamonds</option>
-              <option value="points">Points</option>
+              <option value="credits">{t("detail.credits")}</option>
+              <option value="duckets">{t("detail.duckets")}</option>
+              <option value="diamonds">{t("detail.diamonds")}</option>
+              <option value="points">{t("detail.points")}</option>
             </select>{" "}
-            <input name="amount" type="number" min={1} placeholder="Amount" />{" "}
+            <input name="amount" type="number" min={1} placeholder={t("detail.amountPlaceholder")} />{" "}
             <button type="submit" className="btn btn-primary">
-              Give
+              {t("detail.give")}
             </button>
           </form>
 
           <form action={setMotto} className="admin-card">
             <input type="hidden" name="userId" value={user.id} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Set motto</h3>
+            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.setMotto")}</h3>
             <input name="motto" defaultValue={user.motto} maxLength={127} />{" "}
             <button type="submit" className="btn btn-primary">
-              Save
+              {t("detail.save")}
             </button>
           </form>
 
           <form action={setRank} className="admin-card">
             <input type="hidden" name="userId" value={user.id} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Set rank</h3>
+            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.setRank")}</h3>
             <input name="rank" type="number" min={1} defaultValue={user.rank} />{" "}
             <button type="submit" className="btn btn-primary">
-              Set
+              {t("detail.set")}
             </button>
           </form>
 
           <form action={alertUser} className="admin-card">
             <input type="hidden" name="userId" value={user.id} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Alert</h3>
-            <input name="message" placeholder="Message" />{" "}
+            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.sendAlert")}</h3>
+            <input name="message" placeholder={t("detail.messagePlaceholder")} />{" "}
             <button type="submit" className="btn btn-primary">
-              Send
+              {t("detail.send")}
             </button>
           </form>
 
           <form action={disconnectUser} className="admin-card">
             <input type="hidden" name="userId" value={user.id} />
             <input type="hidden" name="username" value={user.username} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Disconnect</h3>
+            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.disconnectUser")}</h3>
             <button type="submit" className="btn btn-danger">
-              Disconnect from hotel
+              {t("detail.disconnectFromHotel")}
             </button>
           </form>
         </div>

src/app/admin/users/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { StatusCard } from "@/components/admin/dashboard";
 import { ConfirmAction } from "@/components/admin/confirm-action";
 import { prisma } from "@/lib/prisma";
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = "force-dynamic";
 
@@ -13,6 +14,7 @@ export default async function AdminUsers({
   searchParams: Promise<{ q?: string; page?: string; form?: string }>;
 }) {
   const sp = await searchParams;
+  const t = await getTranslations("pages.admin.users");
   const q = (sp.q ?? "").trim();
   const page = Math.max(1, Number(sp.page ?? "1") || 1);
   const where = q ? { username: { contains: q } } : {};
@@ -33,16 +35,16 @@ export default async function AdminUsers({
 
   return (
     <main>
-      <h1>Users</h1>
+      <h1>{t("title")}</h1>
       <p className="muted" style={{ marginTop: "-0.4rem" }}>
-        {q ? `Search results for “${q}”.` : "Most recent accounts first."}
+        {q ? t("searchResults", { count: total, query: q }) : t("subtitle")}
       </p>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label="Total users" value={total} icon="👥" />
-        <StatusCard label="On this page" value={users.length} icon="📄" />
+        <StatusCard label={t("title")} value={total} icon="👥" />
+        <StatusCard label={t("onThisPage")} value={users.length} icon="📄" />
         <StatusCard
-          label="Online (page)"
+          label={t("colOnline")}
           value={onlineOnPage}
           state={onlineOnPage > 0 ? "ok" : "neutral"}
           icon="🟢"
@@ -56,29 +58,29 @@ export default async function AdminUsers({
          <input
            name="q"
            defaultValue={q}
-           placeholder="Search username"
+           placeholder={t("searchPlaceholder")}
            style={{ flex: 1, minWidth: 200 }}
          />
          <button type="submit" className="btn btn-primary">
-           Search
+           {t("search")}
          </button>
        </form>
 
       <section className="mt-6">
-        <h2>Accounts ({total})</h2>
+        <h2>{t("title")} ({total})</h2>
         {users.length === 0 ? (
-          <p className="muted">No users match this search.</p>
+          <p className="muted">{t("noResults")}</p>
         ) : (
           <div style={{ overflowX: "auto" }}>
             <table className="w-full">
               <thead>
                 <tr>
-                  <th>ID</th>
-                  <th>Username</th>
-                  <th>Rank</th>
-                  <th>Credits</th>
-                  <th>Status</th>
-                  <th style={{ width: "200px" }}>Actions</th>
+                  <th>{t("colId")}</th>
+                  <th>{t("colUsername")}</th>
+                  <th>{t("colRank")}</th>
+                  <th>{t("detail.credits")}</th>
+                  <th>{t("colOnline")}</th>
+                  <th style={{ width: "200px" }}>{t("colActions")}</th>
                 </tr>
               </thead>
               <tbody>
@@ -92,15 +94,15 @@ export default async function AdminUsers({
                     <td>{u.credits}</td>
                     <td>
                       <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${u.online === "1" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
-                        {u.online === "1" ? "online" : "offline"}
+                        {u.online === "1" ? t("colOnline") : t("offline")}
                       </span>
                     </td>
                     <td>
                       <div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap", justifyContent: "flex-start" }}>
-                        <Link href={`/admin/users/${u.id}/edit`} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Edit</Link>
-                        <ConfirmAction message={`Set rank for ${u.username}?`} action="set_rank" userId={u.id} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Set Rank</ConfirmAction>
-                        <ConfirmAction message={`Disconnect ${u.username}?`} action="disconnect" userId={u.id} className="btn btn-danger" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Disconnect</ConfirmAction>
-                        <ConfirmAction message={`Send alert to ${u.username}?`} action="alert" userId={u.id} className="btn btn-primary" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Alert</ConfirmAction>
+                        <Link href={`/admin/users/${u.id}/edit`} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("edit")}</Link>
+                        <ConfirmAction message={t("confirmSetRank", { username: u.username })} action="set_rank" userId={u.id} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("setRank")}</ConfirmAction>
+                        <ConfirmAction message={t("confirmDisconnect", { username: u.username })} action="disconnect" userId={u.id} className="btn btn-danger" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("disconnect")}</ConfirmAction>
+                        <ConfirmAction message={t("confirmAlert", { username: u.username })} action="alert" userId={u.id} className="btn btn-primary" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("alert")}</ConfirmAction>
                       </div>
                     </td>
                   </tr>
@@ -112,11 +114,11 @@ export default async function AdminUsers({
       </section>
 
       <p className="muted">
-        Page {page} / {pages} · {total} users
+        {t("pagination", { page, pages, total })}
         {page < pages ? (
           <>
             {" · "}
-            <Link href={`/admin/users?q=${encodeURIComponent(q)}&page=${page + 1}`}>Next →</Link>
+            <Link href={`/admin/users?q=${encodeURIComponent(q)}&page=${page + 1}`}>{t("next")} →</Link>
           </>
         ) : null}
       </p>