Translate admin panel to all 6 languages

src/app/admin/radio/ranks/page.tsx

@@ -7,6 +7,7 @@ import {
 import { prisma } from '@/lib/prisma';
 import { StatusCard } from '@/components/admin/dashboard';
 import { Medal } from 'lucide-react';
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = 'force-dynamic';
 
@@ -19,6 +20,8 @@ type Rank = {
 };
 
 export default async function AdminRadioRanksPage() {
+  const t = await getTranslations("pages.admin.radio");
+
   let ranks: Rank[] = [];
   let dbError = false;
 
@@ -43,11 +46,11 @@ export default async function AdminRadioRanksPage() {
   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>
 
       <div className="flex items-center gap-3 mb-6">
@@ -55,69 +58,69 @@ export default async function AdminRadioRanksPage() {
           <Medal size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Ranks</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">DJ / staff ranks assignable on radio applications.</p>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("ranksForm.title")}</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("ranksForm.subtitle")}</p>
         </div>
       </div>
 
       {dbError ? (
         <div className="admin-card mb-6">
           <p className="text-xs text-gray-500 dark:text-gray-400 m-0">
-            Could not load ranks (database unavailable).
+            {t("ranksForm.dbError")}
           </p>
         </div>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-          <StatusCard label="Ranks" value={ranks.length} icon="🎖️" />
+          <StatusCard label={t("ranks")} value={ranks.length} icon="\u{1F396}\uFE0F" />
           <StatusCard
-            label="Active"
+            label={t("ranksForm.active")}
             value={activeCount}
             state={activeCount > 0 ? 'ok' : 'neutral'}
-            icon="✅"
+            icon="\u{2705}"
           />
         </div>
       )}
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Add rank</h2>
+        <h2 className="admin-section-title">{t("ranksForm.addRank")}</h2>
         <form action={createRadioRank} className="admin-card">
           <div className="grid cols-3">
             <div>
               <label htmlFor="new_name" style={{ display: 'block', fontWeight: 700 }}>
-                Name
+                {t("ranksForm.name")}
               </label>
               <input id="new_name" name="name" required style={{ width: '100%' }} />
             </div>
             <div>
               <label htmlFor="new_badge" style={{ display: 'block', fontWeight: 700 }}>
-                Badge code
+                {t("ranksForm.badgeCode")}
               </label>
               <input id="new_badge" name="badgeCode" style={{ width: '100%' }} />
             </div>
             <div style={{ display: 'flex', alignItems: 'flex-end' }}>
               <label style={{ display: 'inline-flex', gap: '0.4rem', alignItems: 'center' }}>
-                <input type="checkbox" name="isActive" value="1" defaultChecked /> Active
+                <input type="checkbox" name="isActive" value="1" defaultChecked /> {t("ranksForm.active")}
               </label>
             </div>
             <div style={{ gridColumn: '1 / -1' }}>
               <label htmlFor="new_desc" style={{ display: 'block', fontWeight: 700 }}>
-                Description
+                {t("ranksForm.description")}
               </label>
               <input id="new_desc" name="description" style={{ width: '100%' }} />
             </div>
           </div>
           <div style={{ marginTop: '0.75rem' }}>
             <button type="submit" className="btn btn-primary">
-              Create rank
+              {t("ranksForm.createRank")}
             </button>
           </div>
         </form>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Existing ranks ({ranks.length})</h2>
+        <h2 className="admin-section-title">{t("ranksForm.existing", { count: ranks.length })}</h2>
         {ranks.length === 0 ? (
-          <div className="admin-empty">No ranks yet — add one above.</div>
+          <div className="admin-empty">{t("ranksForm.noRanks")}</div>
         ) : (
           <div className="grid">
             {ranks.map((r) => (
@@ -125,7 +128,7 @@ export default async function AdminRadioRanksPage() {
                 <div className="flex justify-between items-baseline gap-3 mb-2">
                   <strong>#{String(r.id)}</strong>
                   <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
-                    {r.isActive ? 'active' : 'inactive'}
+                    {r.isActive ? t("ranksForm.activeLabel") : t("ranksForm.inactiveLabel")}
                   </span>
                 </div>
 
@@ -135,19 +138,19 @@ export default async function AdminRadioRanksPage() {
                     name="name"
                     defaultValue={r.name}
                     required
-                    placeholder="Name"
+                    placeholder={t("ranksForm.name")}
                     style={{ minWidth: 140 }}
                   />
                   <input
                     name="badgeCode"
                     defaultValue={r.badgeCode ?? ''}
-                    placeholder="Badge"
+                    placeholder={t("ranksForm.badgeCode")}
                     style={{ minWidth: 100 }}
                   />
                   <input
                     name="description"
                     defaultValue={r.description ?? ''}
-                    placeholder="Description"
+                    placeholder={t("ranksForm.description")}
                     className="flex-1 min-w-[160px]"
                   />
                   <label
@@ -159,17 +162,17 @@ export default async function AdminRadioRanksPage() {
                       value="1"
                       defaultChecked={r.isActive}
                     />{' '}
-                    Active
+                    {t("ranksForm.active")}
                   </label>
                   <button type="submit" className="btn btn-primary">
-                    Save
+                    {t("ranksForm.save")}
                   </button>
                 </form>
 
                 <form action={deleteRadioRank} style={{ marginTop: '0.5rem' }}>
                   <input type="hidden" name="id" value={String(r.id)} />
                   <button type="submit" className="btn btn-danger">
-                    Delete rank #{String(r.id)}
+                    {t("ranksForm.deleteRank", { id: String(r.id) })}
                   </button>
                 </form>
               </div>