Translate admin panel to all 6 languages

src/app/admin/achievements/page.tsx

@@ -1,4 +1,5 @@
 import { Award } from "lucide-react";
+import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
@@ -15,6 +16,8 @@ type Achievement = {
 };
 
 export default async function AdminAchievements() {
+  const t = await getTranslations("pages.admin.achievements");
+
   let achievements: Achievement[] = [];
   try {
     achievements = await prisma.achievements.findMany({
@@ -33,7 +36,6 @@ export default async function AdminAchievements() {
     achievements = [];
   }
 
-  // Group by category (already sorted by category, then name, then level).
   const groups = new Map<string, Achievement[]>();
   for (const a of achievements) {
     const list = groups.get(a.category) ?? [];
@@ -41,7 +43,6 @@ export default async function AdminAchievements() {
     groups.set(a.category, list);
   }
 
-  // Distinct achievement names (each name can have multiple level rows).
   const distinctNames = new Set(achievements.map((a) => a.name)).size;
 
   return (
@@ -51,19 +52,19 @@ export default async function AdminAchievements() {
           <Award size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Achievements</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Read-only · {achievements.length} rows across {groups.size} categories.</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", { rows: achievements.length, categories: groups.size })}</p>
         </div>
       </div>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label="Achievement rows" value={achievements.length} icon="🏆" />
-        <StatusCard label="Distinct achievements" value={distinctNames} icon="🎖️" />
-        <StatusCard label="Categories" value={groups.size} icon="🗂️" />
+        <StatusCard label={t("achievementRows")} value={achievements.length} icon="🏆" />
+        <StatusCard label={t("distinctAchievements")} value={distinctNames} icon="🎖️" />
+        <StatusCard label={t("categories")} value={groups.size} icon="🗂️" />
       </div>
 
       {groups.size === 0 ? (
-        <div className="admin-empty">No achievements found.</div>
+        <div className="admin-empty">{t("noAchievements")}</div>
       ) : (
         [...groups.entries()].map(([category, rows]) => (
           <section key={category} className="mt-6">
@@ -75,12 +76,12 @@ export default async function AdminAchievements() {
               <table>
                 <thead>
                   <tr>
-                    <th>Name</th>
-                    <th>Level</th>
-                    <th>Progress needed</th>
-                    <th>Reward type</th>
-                    <th>Reward amount</th>
-                    <th>Points</th>
+                    <th>{t("colName")}</th>
+                    <th>{t("colLevel")}</th>
+                    <th>{t("colProgress")}</th>
+                    <th>{t("colRewardType")}</th>
+                    <th>{t("colRewardAmount")}</th>
+                    <th>{t("colPoints")}</th>
                   </tr>
                 </thead>
                 <tbody>