Translate admin panel to all 6 languages

src/app/admin/radio/page.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { prisma } from '@/lib/prisma';
 import { deleteShout } from '@/actions/admin-radio';
 import { StatusCard } from '@/components/admin/dashboard';
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = 'force-dynamic';
 
@@ -34,14 +35,13 @@ type Schedule = {
 };
 
 function formatDate(d: Date | null): string {
-  return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '—';
+  return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '\u2014';
 }
 
 function formatTime(d: Date | null): string {
-  return d ? d.toISOString().slice(11, 16) : '—';
+  return d ? d.toISOString().slice(11, 16) : '\u2014';
 }
 
-// Map an application status to an ok/danger/neutral pill tone.
 function statusBadgeClass(status: string): string {
   const s = status.toLowerCase();
   if (s === 'approved' || s === 'accepted') return 'ok';
@@ -50,6 +50,8 @@ function statusBadgeClass(status: string): string {
 }
 
 export default async function AdminRadioPage() {
+  const t = await getTranslations("pages.admin.radio");
+
   let shouts: Shout[] = [];
   let applications: Application[] = [];
   let schedules: Schedule[] = [];
@@ -109,47 +111,47 @@ export default async function AdminRadioPage() {
   return (
     <main>
       <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
-        <Link href="/admin/radio">Radio</Link> ·{' '}
-        <Link href="/admin/radio/settings">Settings</Link> ·{' '}
-        <Link href="/admin/radio/banners">Banners</Link> ·{' '}
-        <Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
-        <Link href="/admin/radio/history">History</Link>
+        <Link href="/admin/radio">{t("title")}</Link> ·{' '}
+        <Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
+        <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
+        <Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
+        <Link href="/admin/radio/history">{t("history")}</Link>
       </nav>
 
-      <h1>Radio Moderation</h1>
+      <h1>{t("title")}</h1>
       <p className="text-xs text-gray-500 dark:text-gray-400">
-        Latest shouts, DJ applications and on-air schedules (25 most recent of each).
+        {t("subtitle")}
       </p>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
+        <StatusCard label={t("shouts")} value={shouts.length} icon="\u{1F4E3}" />
         <StatusCard
-          label="Pending applications"
+          label={t("pendingApplications")}
           value={pendingApps}
           state={pendingApps > 0 ? 'warn' : 'ok'}
-          icon="📝"
+          icon="\u{1F4DD}"
         />
-        <StatusCard label="Schedules" value={schedules.length} icon="🗓️" />
+        <StatusCard label={t("schedules")} value={schedules.length} icon="\u{1F5D3}\uFE0F" />
         <StatusCard
-          label="Active schedules"
+          label={t("activeSchedules")}
           value={activeSchedules}
           state={activeSchedules > 0 ? 'ok' : 'neutral'}
-          icon="🎙️"
+          icon="\u{1F399}\uFE0F"
         />
       </div>
 
       <section className="mt-6">
-        <h2>Recent Shouts ({shouts.length})</h2>
+        <h2>{t("shouts")} ({shouts.length})</h2>
         {shouts.length === 0 ? (
-          <p className="text-xs text-gray-500 dark:text-gray-400">No shouts to moderate.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noShouts")}</p>
         ) : (
           <table>
             <thead>
               <tr>
                 <th>ID</th>
-                <th>User</th>
-                <th>Message</th>
-                <th>Posted</th>
+                <th>{t("user")}</th>
+                <th>{t("message")}</th>
+                <th>{t("posted")}</th>
                 <th />
               </tr>
             </thead>
@@ -164,7 +166,7 @@ export default async function AdminRadioPage() {
                     <form action={deleteShout}>
                       <input type="hidden" name="id" value={String(s.id)} />
                       <button type="submit" className="btn btn-danger">
-                        Delete
+                        {t("deleteShout")}
                       </button>
                     </form>
                   </td>
@@ -176,21 +178,21 @@ export default async function AdminRadioPage() {
       </section>
 
       <section className="mt-6">
-        <h2>DJ Applications ({applications.length})</h2>
+        <h2>{t("applications")} ({applications.length})</h2>
         {applications.length === 0 ? (
-          <p className="text-xs text-gray-500 dark:text-gray-400">No applications submitted.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noApplications")}</p>
         ) : (
           <table>
             <thead>
               <tr>
                 <th>ID</th>
-                <th>User</th>
-                <th>Real Name</th>
-                <th>Age</th>
-                <th>Style</th>
+                <th>{t("user")}</th>
+                <th>{t("realName")}</th>
+                <th>{t("age")}</th>
+                <th>{t("style")}</th>
                 <th>Discord</th>
-                <th>Status</th>
-                <th>Applied</th>
+                <th>{t("status")}</th>
+                <th>{t("applied")}</th>
               </tr>
             </thead>
             <tbody>
@@ -200,8 +202,8 @@ export default async function AdminRadioPage() {
                   <td>{String(a.userId)}</td>
                   <td>{a.realName}</td>
                   <td>{a.age}</td>
-                  <td>{a.musicStyle ?? '—'}</td>
-                  <td>{a.discordUsername ?? '—'}</td>
+                  <td>{a.musicStyle ?? '\u2014'}</td>
+                  <td>{a.discordUsername ?? '\u2014'}</td>
                   <td>
                     <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === 'ok' ? 'bg-green-600/20 text-[var(--color-text)]' : statusBadgeClass(a.status) === 'danger' ? 'bg-red-500/22 text-[var(--color-text)]' : 'bg-[var(--color-primary)]/18 text-[var(--color-text)]'}`}>
                       {a.status}
@@ -216,20 +218,20 @@ export default async function AdminRadioPage() {
       </section>
 
       <section className="mt-6">
-        <h2>Schedules ({schedules.length})</h2>
+        <h2>{t("schedules")} ({schedules.length})</h2>
         {schedules.length === 0 ? (
-          <p className="text-xs text-gray-500 dark:text-gray-400">No schedules configured.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noSchedules")}</p>
         ) : (
           <table>
             <thead>
               <tr>
                 <th>ID</th>
-                <th>User</th>
-                <th>Day</th>
-                <th>Start</th>
-                <th>End</th>
-                <th>Show</th>
-                <th>Active</th>
+                <th>{t("user")}</th>
+                <th>{t("day")}</th>
+                <th>{t("start")}</th>
+                <th>{t("end")}</th>
+                <th>{t("show")}</th>
+                <th>{t("active")}</th>
               </tr>
             </thead>
             <tbody>
@@ -240,10 +242,10 @@ export default async function AdminRadioPage() {
                   <td>{sc.day}</td>
                   <td>{formatTime(sc.startTime)}</td>
                   <td>{formatTime(sc.endTime)}</td>
-                  <td>{sc.showName ?? '—'}</td>
+                  <td>{sc.showName ?? '\u2014'}</td>
                   <td>
                     <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
-                      {sc.isActive ? 'active' : 'inactive'}
+                      {sc.isActive ? t("active") : t("inactive")}
                     </span>
                   </td>
                 </tr>