Translate admin panel to all 6 languages

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

@@ -3,6 +3,7 @@ import { createTrack, deleteTrack, toggleTrack } from '@/actions/admin-radio-aut
 import { StatusCard } from '@/components/admin/dashboard';
 import { prisma } from '@/lib/prisma';
 import { Disc3 } from 'lucide-react';
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = 'force-dynamic';
 
@@ -21,19 +22,20 @@ type Track = {
   sortOrder: number;
 };
 
-/** Render an integer second count as m:ss, or an em dash when unset. */
 function formatDuration(seconds: number | null): string {
-  if (seconds == null || seconds < 0) return '—';
+  if (seconds == null || seconds < 0) return '\u2014';
   const m = Math.floor(seconds / 60);
   const s = seconds % 60;
   return `${m}:${String(s).padStart(2, '0')}`;
 }
 
 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';
 }
 
 export default async function AdminRadioAutoDjPage() {
+  const t = await getTranslations("pages.admin.radio");
+
   let tracks: Track[] = [];
   let dbError = false;
 
@@ -69,12 +71,12 @@ export default async function AdminRadioAutoDjPage() {
   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/autodj">AutoDJ</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> ·{' '}
+        <Link href="/admin/radio/autodj">{t("autoDj")}</Link>
       </nav>
 
       <section className="mt-6">
@@ -83,91 +85,91 @@ export default async function AdminRadioAutoDjPage() {
             <Disc3 size={20} className="text-[var(--color-primary)]" />
           </div>
           <div>
-            <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio AutoDJ</h1>
-            <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Fallback playlist (<code>radio_auto_dj_playlist</code>) the radio rotates through when no live DJ is streaming. Ordered by sort order then title.</p>
+            <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("autoDjForm.title")}</h1>
+            <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("autoDjForm.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 the AutoDJ playlist (database unavailable).
+              {t("autoDjForm.dbError")}
             </p>
           </div>
         ) : (
           <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-            <StatusCard label="Tracks" value={tracks.length} icon="🎵" />
+            <StatusCard label={t("autoDjForm.tracks")} value={tracks.length} icon="\u{1F3B5}" />
             <StatusCard
-              label="Active"
+              label={t("autoDjForm.active")}
               value={activeCount}
               state={activeCount > 0 ? 'ok' : 'neutral'}
-              icon="▶️"
+              icon="\u{25B6}\uFE0F"
             />
             <StatusCard
-              label="Inactive"
+              label={t("autoDjForm.inactive")}
               value={inactiveCount}
               state={inactiveCount > 0 ? 'warn' : 'neutral'}
-              icon="⏸️"
+              icon="\u{23F8}\uFE0F"
             />
           </div>
         )}
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Add track</h2>
+        <h2 className="admin-section-title">{t("autoDjForm.addTrack")}</h2>
         <form action={createTrack} className="admin-card">
           <div className="grid cols-2">
             <div>
               <label htmlFor="new_title" style={{ display: 'block', fontWeight: 700 }}>
-                Title
+                {t("autoDjForm.title")}
               </label>
               <input
                 id="new_title"
                 name="title"
-                placeholder="Track title"
+                placeholder={t("autoDjForm.titlePlaceholder")}
                 required
                 style={{ width: '100%' }}
               />
             </div>
             <div>
               <label htmlFor="new_artist" style={{ display: 'block', fontWeight: 700 }}>
-                Artist
+                {t("autoDjForm.artist")}
               </label>
               <input id="new_artist" name="artist" style={{ width: '100%' }} />
             </div>
             <div>
               <label htmlFor="new_album" style={{ display: 'block', fontWeight: 700 }}>
-                Album
+                {t("autoDjForm.album")}
               </label>
               <input id="new_album" name="album" style={{ width: '100%' }} />
             </div>
             <div>
               <label htmlFor="new_artworkUrl" style={{ display: 'block', fontWeight: 700 }}>
-                Artwork URL
+                {t("autoDjForm.artworkUrl")}
               </label>
               <input
                 id="new_artworkUrl"
                 name="artworkUrl"
-                placeholder="https://…/cover.png"
+                placeholder={t("autoDjForm.artworkUrlPlaceholder")}
                 style={{ width: '100%' }}
               />
             </div>
             <div>
               <label htmlFor="new_duration" style={{ display: 'block', fontWeight: 700 }}>
-                Duration (seconds)
+                {t("autoDjForm.duration")}
               </label>
               <input
                 id="new_duration"
                 name="duration"
                 type="number"
                 min={0}
-                placeholder="e.g. 215"
+                placeholder={t("autoDjForm.durationPlaceholder")}
                 style={{ width: '100%' }}
               />
             </div>
             <div>
               <label htmlFor="new_sortOrder" style={{ display: 'block', fontWeight: 700 }}>
-                Sort order
+                {t("autoDjForm.sortOrder")}
               </label>
               <input
                 id="new_sortOrder"
@@ -179,79 +181,79 @@ export default async function AdminRadioAutoDjPage() {
             </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("autoDjForm.active")}
               </label>
             </div>
           </div>
           <div style={{ marginTop: '0.75rem' }}>
             <button type="submit" className="btn btn-primary">
-              Add track
+              {t("autoDjForm.addTrack")}
             </button>
           </div>
         </form>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Playlist ({tracks.length})</h2>
+        <h2 className="admin-section-title">{t("autoDjForm.playlist", { count: tracks.length })}</h2>
         {tracks.length === 0 ? (
-          <div className="admin-empty">No AutoDJ tracks yet — add one above.</div>
+          <div className="admin-empty">{t("autoDjForm.noTracks")}</div>
         ) : (
           <div className="overflow-x-auto">
             <table>
               <thead>
                 <tr>
-                  <th>Order</th>
-                  <th>Title</th>
-                  <th>Artist</th>
-                  <th>Album</th>
-                  <th>Duration</th>
-                  <th>Plays</th>
-                  <th>Last played</th>
-                  <th>Status</th>
-                  <th>Actions</th>
+                  <th>{t("autoDjForm.colOrder")}</th>
+                  <th>{t("autoDjForm.colTitle")}</th>
+                  <th>{t("autoDjForm.colArtist")}</th>
+                  <th>{t("autoDjForm.colAlbum")}</th>
+                  <th>{t("autoDjForm.colDuration")}</th>
+                  <th>{t("autoDjForm.colPlays")}</th>
+                  <th>{t("autoDjForm.colLastPlayed")}</th>
+                  <th>{t("autoDjForm.colStatus")}</th>
+                  <th>{t("autoDjForm.colActions")}</th>
                 </tr>
               </thead>
               <tbody>
-                {tracks.map((t) => (
-                  <tr key={String(t.id)}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.sortOrder}</td>
+                {tracks.map((track) => (
+                  <tr key={String(track.id)}>
+                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{track.sortOrder}</td>
                     <td>
                       <span className="inline-flex gap-2 items-center">
-                        {t.artworkUrl ? (
+                        {track.artworkUrl ? (
                           <img
-                            src={t.artworkUrl}
+                            src={track.artworkUrl}
                             alt=""
                             width={32}
                             height={32}
                             style={{ borderRadius: 4, objectFit: 'cover' }}
                           />
                         ) : null}
-                        <strong>{t.title}</strong>
+                        <strong>{track.title}</strong>
                       </span>
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.artist ?? '—'}</td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.album ?? '—'}</td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDuration(t.duration)}</td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t.playCount}</td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDate(t.lastPlayedAt)}</td>
+                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{track.artist ?? '\u2014'}</td>
+                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{track.album ?? '\u2014'}</td>
+                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDuration(track.duration)}</td>
+                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{track.playCount}</td>
+                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{formatDate(track.lastPlayedAt)}</td>
                     <td>
-                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${t.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
-                        {t.isActive ? 'active' : 'inactive'}
+                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
+                        {track.isActive ? t("autoDjForm.activeLabel") : t("autoDjForm.inactiveLabel")}
                       </span>
                     </td>
                     <td>
                       <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
                         <form action={toggleTrack}>
-                          <input type="hidden" name="id" value={String(t.id)} />
-                          <input type="hidden" name="isActive" value={t.isActive ? '0' : '1'} />
+                          <input type="hidden" name="id" value={String(track.id)} />
+                          <input type="hidden" name="isActive" value={track.isActive ? '0' : '1'} />
                           <button type="submit" className="btn">
-                            {t.isActive ? 'Deactivate' : 'Activate'}
+                            {track.isActive ? t("autoDjForm.deactivate") : t("autoDjForm.activate")}
                           </button>
                         </form>
                         <form action={deleteTrack}>
-                          <input type="hidden" name="id" value={String(t.id)} />
+                          <input type="hidden" name="id" value={String(track.id)} />
                           <button type="submit" className="btn btn-danger">
-                            Delete
+                            {t("autoDjForm.delete")}
                           </button>
                         </form>
                       </div>