Translate admin panel to all 6 languages

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

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";
 import { prisma } from "@/lib/prisma";
 import { Calendar } from "lucide-react";
@@ -40,6 +41,8 @@ export default async function AdminCalendarCampaign({
 }: {
   params: Promise<{ id: string }>;
 }) {
+  const t = await getTranslations("pages.admin.calendar");
+
   const { id } = await params;
   const campaignId = Number(id);
   if (!Number.isInteger(campaignId)) notFound();
@@ -93,7 +96,7 @@ export default async function AdminCalendarCampaign({
   return (
     <main>
       <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
-        <Link href="/admin/calendar">← Calendar campaigns</Link>
+        <Link href="/admin/calendar">← {t("title")}</Link>
       </p>
 
       <div className="admin-card flex items-center gap-5 mb-6">
@@ -106,31 +109,30 @@ export default async function AdminCalendarCampaign({
           />
         ) : null}
         <div>
-          <h1 className="m-0 mb-1">{campaign.name || `Campaign #${campaign.id}`}</h1>
+          <h1 className="m-0 mb-1">{campaign.name || `#${campaign.id}`}</h1>
           <p className="text-xs text-gray-500 dark:text-gray-400 m-0">
-            #{campaign.id} · {campaign.totalDays} day{campaign.totalDays === 1 ? "" : "s"} · starts{" "}
-            {fmtDate(campaign.startTimestamp)}
-            {disabled ? " · Disabled" : " · Enabled"}
-            {campaign.lockExpired === "1" ? " · Locks expired days" : ""}
+            {t("detail.campaignMeta", { id: campaign.id, days: campaign.totalDays, date: fmtDate(campaign.startTimestamp) })}
+            {disabled ? ` · ${t("detail.disabled")}` : ` · ${t("detail.enabled")}`}
+            {campaign.lockExpired === "1" ? ` · ${t("detail.locksExpired")}` : ""}
           </p>
         </div>
       </div>
 
-      <h2 className="admin-section-title">Rewards</h2>
+      <h2 className="admin-section-title">{t("detail.rewards")}</h2>
       {rewards.length === 0 ? (
-        <div className="admin-empty">No rewards configured for this campaign.</div>
+        <div className="admin-empty">{t("detail.noRewards")}</div>
       ) : (
         <table className="w-full">
           <thead>
             <tr className="text-left text-[var(--muted)]">
-              <th>ID</th>
-              <th>Product</th>
-              <th>Item</th>
-              <th>Credits</th>
-              <th>Pixels</th>
-              <th>Points</th>
-              <th>Badge</th>
-              <th>Subscription</th>
+              <th>{t("detail.colId")}</th>
+              <th>{t("detail.colProduct")}</th>
+              <th>{t("detail.colItem")}</th>
+              <th>{t("detail.colCredits")}</th>
+              <th>{t("detail.colPixels")}</th>
+              <th>{t("detail.colPoints")}</th>
+              <th>{t("detail.colBadge")}</th>
+              <th>{t("detail.colSubscription")}</th>
             </tr>
           </thead>
           <tbody>
@@ -143,7 +145,7 @@ export default async function AdminCalendarCampaign({
                 <td>{r.pixels > 0 ? r.pixels : <span className="text-sm text-gray-500 dark:text-gray-400">—</span>}</td>
                 <td>
                   {r.points > 0 ? (
-                    `${r.points} (type ${r.pointsType})`
+                    `${r.points} (${t("detail.typeLabel", { type: r.pointsType })})`
                   ) : (
                     <span className="text-sm text-gray-500 dark:text-gray-400">—</span>
                   )}
@@ -161,7 +163,7 @@ export default async function AdminCalendarCampaign({
       )}
 
       <p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
-        {rewards.length} reward{rewards.length === 1 ? "" : "s"}
+        {t("detail.rewardCount", { count: rewards.length })}
       </p>
     </main>
   );

src/app/admin/calendar/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";
 import { Calendar } from "lucide-react";
@@ -21,6 +22,8 @@ function fmtDate(ts: number): string {
 }
 
 export default async function AdminCalendar() {
+  const t = await getTranslations("pages.admin.calendar");
+
   let campaigns: Campaign[] = [];
   try {
     campaigns = await prisma.calendarCampaigns.findMany({
@@ -39,7 +42,6 @@ export default async function AdminCalendar() {
     campaigns = [];
   }
 
-  // Tally reward counts per campaign in JS (avoid prisma.groupBy).
   const rewardCounts = new Map<number, number>();
   let totalRewards = 0;
   try {
@@ -51,7 +53,6 @@ export default async function AdminCalendar() {
       rewardCounts.set(r.campaignId, (rewardCounts.get(r.campaignId) ?? 0) + 1);
     }
   } catch {
-    // leave map empty on failure
   }
 
   const enabledCount = campaigns.filter((c) => c.enabled === "1").length;
@@ -63,24 +64,24 @@ export default async function AdminCalendar() {
           <Calendar size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Calendar campaigns</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Read-only · {campaigns.length} campaign{campaigns.length === 1 ? "" : "s"}.</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", { count: campaigns.length })}</p>
         </div>
       </div>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label="Campaigns" value={campaigns.length} icon="📅" />
+        <StatusCard label={t("campaigns")} value={campaigns.length} icon="📅" />
         <StatusCard
-          label="Enabled"
+          label={t("enabled")}
           value={enabledCount}
           state={enabledCount > 0 ? "ok" : "neutral"}
           icon="✅"
         />
-        <StatusCard label="Total rewards" value={totalRewards} icon="🎁" />
+        <StatusCard label={t("totalRewards")} value={totalRewards} icon="🎁" />
       </div>
 
       {campaigns.length === 0 ? (
-        <div className="admin-empty">No calendar campaigns found.</div>
+        <div className="admin-empty">{t("noCampaigns")}</div>
       ) : (
         <div className="grid cols-3">
           {campaigns.map((c) => {
@@ -100,18 +101,17 @@ export default async function AdminCalendar() {
                 )}
                 <div className="body">
                   <div className="flex items-center justify-between gap-2 mb-1">
-                    <h3 className="m-0">{c.name || `Campaign #${c.id}`}</h3>
+                    <h3 className="m-0">{c.name || `#${c.id}`}</h3>
                     <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
-                      {enabled ? "enabled" : "disabled"}
+                      {enabled ? t("statusEnabled") : t("statusDisabled")}
                     </span>
                   </div>
                   <p className="text-xs text-gray-500 dark:text-gray-400 m-0">
-                    #{c.id} · {c.totalDays} day{c.totalDays === 1 ? "" : "s"} · {count} reward
-                    {count === 1 ? "" : "s"}
+                    {t("campaignMeta", { id: c.id, days: c.totalDays, rewards: count })}
                   </p>
                   <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    Starts {fmtDate(c.startTimestamp)}
-                    {c.lockExpired === "1" ? " · Locks expired" : ""}
+                    {t("startsAt", { date: fmtDate(c.startTimestamp) })}
+                    {c.lockExpired === "1" ? ` · ${t("locksExpired")}` : ""}
                   </p>
                 </div>
               </Link>