Translate admin panel to all 6 languages

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

@@ -3,13 +3,12 @@ import { savePoints } from "@/actions/admin-radio-points";
 import { StatusCard } from "@/components/admin/dashboard";
 import { siteSettings } from "@/lib/services/site-settings";
 import { Star } from "lucide-react";
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = "force-dynamic";
 
 export const metadata = { title: "Radio Points" };
 
-// Defaults used when the website_settings rows are missing OR the DB is
-// unreachable, so the editor still renders in local dev.
 const DEFAULTS = {
   radio_points_enabled: "0",
   radio_points_per_minute: "1",
@@ -25,10 +24,10 @@ export default async function AdminRadioPointsPage({
 }: {
   searchParams: Promise<{ saved?: string }>;
 }) {
+  const t = await getTranslations("pages.admin.radio");
+
   const { saved } = await searchParams;
 
-  // Read current values with siteSettings.get(defaults); fall back to DEFAULTS
-  // on any read error so select()-typed values stay strings.
   const values = {
     radio_points_enabled: await siteSettings
       .get("radio_points_enabled", DEFAULTS.radio_points_enabled)
@@ -59,12 +58,12 @@ export default async function AdminRadioPointsPage({
   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/points">Points</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/points">{t("points")}</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>
 
       <section className="mt-6">
@@ -73,46 +72,46 @@ export default async function AdminRadioPointsPage({
             <Star size={20} className="text-[var(--color-primary)]" />
           </div>
           <div>
-            <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Listener Points</h1>
-            <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Reward listeners with currency for time spent on the radio. Edits write to <code>website_settings</code> (<code>radio_points_*</code> keys) and bust the runtime settings cache. Booleans use <code>0</code> / <code>1</code>.</p>
+            <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("pointsForm.title")}</h1>
+            <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("pointsForm.subtitle")}</p>
           </div>
         </div>
 
         {saved === "1" ? (
           <p>
-            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Saved</span>
+            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">{t("pointsForm.saved")}</span>
           </p>
         ) : null}
 
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard
-            label="Points"
-            value={enabled ? "Enabled" : "Disabled"}
+            label={t("pointsForm.points")}
+            value={enabled ? t("pointsForm.enabled") : t("pointsForm.disabled")}
             state={enabled ? "ok" : "danger"}
-            icon="🎧"
+            icon="\u{1F3A7}"
           />
           <StatusCard
-            label="Per minute"
+            label={t("pointsForm.perMinute")}
             value={perMinute}
-            hint={`paid in ${selectedCurrency}`}
-            icon="⏱️"
+            hint={t("pointsForm.paidIn", { currency: selectedCurrency })}
+            icon="\u{23F1}\uFE0F"
           />
           <StatusCard
-            label="Max / day"
-            value={maxPerDay === "0" ? "Unlimited" : maxPerDay}
-            icon="📈"
+            label={t("pointsForm.maxPerDay")}
+            value={maxPerDay === "0" ? t("pointsForm.unlimited") : maxPerDay}
+            icon="\u{1F4C8}"
           />
-          <StatusCard label="Min listeners" value={minListeners} icon="👥" />
+          <StatusCard label={t("pointsForm.minListeners")} value={minListeners} icon="\u{1F465}" />
         </div>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Settings</h2>
+        <h2 className="admin-section-title">{t("pointsForm.settings")}</h2>
         <form action={savePoints}>
           <div className="grid cols-2">
             <div>
               <label htmlFor="radio_points_enabled" style={{ display: "block", fontWeight: 700 }}>
-                Points enabled
+                {t("pointsForm.pointsEnabled")}
               </label>
               <select
                 id="radio_points_enabled"
@@ -120,17 +119,17 @@ export default async function AdminRadioPointsPage({
                 defaultValue={enabled ? "1" : "0"}
                 style={{ width: "100%" }}
               >
-                <option value="1">Enabled</option>
-                <option value="0">Disabled</option>
+                <option value="1">{t("pointsForm.enabled")}</option>
+                <option value="0">{t("pointsForm.disabled")}</option>
               </select>
               <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
-                Master switch for awarding listener points.
+                {t("pointsForm.pointsEnabledHint")}
               </p>
             </div>
 
             <div>
               <label htmlFor="radio_points_currency" style={{ display: "block", fontWeight: 700 }}>
-                Currency
+                {t("pointsForm.currency")}
               </label>
               <select
                 id="radio_points_currency"
@@ -145,7 +144,7 @@ export default async function AdminRadioPointsPage({
                 ))}
               </select>
               <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
-                Which wallet the points are paid into.
+                {t("pointsForm.currencyHint")}
               </p>
             </div>
 
@@ -154,7 +153,7 @@ export default async function AdminRadioPointsPage({
                 htmlFor="radio_points_per_minute"
                 style={{ display: "block", fontWeight: 700 }}
               >
-                Points per minute
+                {t("pointsForm.pointsPerMinute")}
               </label>
               <input
                 id="radio_points_per_minute"
@@ -166,7 +165,7 @@ export default async function AdminRadioPointsPage({
                 style={{ width: "100%" }}
               />
               <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
-                Amount awarded for each full minute of listening.
+                {t("pointsForm.pointsPerMinuteHint")}
               </p>
             </div>
 
@@ -175,7 +174,7 @@ export default async function AdminRadioPointsPage({
                 htmlFor="radio_points_max_per_day"
                 style={{ display: "block", fontWeight: 700 }}
               >
-                Max points per day
+                {t("pointsForm.maxPerDay")}
               </label>
               <input
                 id="radio_points_max_per_day"
@@ -187,7 +186,7 @@ export default async function AdminRadioPointsPage({
                 style={{ width: "100%" }}
               />
               <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
-                Daily cap per user. Use <code>0</code> for unlimited.
+                {t("pointsForm.maxPerDayHint")}
               </p>
             </div>
 
@@ -196,7 +195,7 @@ export default async function AdminRadioPointsPage({
                 htmlFor="radio_points_min_listeners"
                 style={{ display: "block", fontWeight: 700 }}
               >
-                Minimum listeners
+                {t("pointsForm.minListeners")}
               </label>
               <input
                 id="radio_points_min_listeners"
@@ -208,14 +207,14 @@ export default async function AdminRadioPointsPage({
                 style={{ width: "100%" }}
               />
               <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
-                Points are only awarded when at least this many people are tuned in.
+                {t("pointsForm.minListenersHint")}
               </p>
             </div>
           </div>
 
           <div className="flex justify-end mt-4">
             <button type="submit" className="btn btn-primary">
-              Save points settings
+              {t("pointsForm.save")}
             </button>
           </div>
         </form>