Translate admin panel to all 6 languages

src/app/admin/maintenance/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { Wrench } from "lucide-react";
 import { saveMaintenance } from "@/actions/admin-maintenance";
 import { StatusCard } from "@/components/admin/dashboard";
@@ -12,8 +13,8 @@ const KEYS = [
 ] as const;
 
 export default async function AdminMaintenance() {
-  // Read the three maintenance rows from website_settings. Isolated so a DB
-  // hiccup degrades to defaults rather than 500-ing the page.
+  const t = await getTranslations("pages.admin.maintenance");
+
   let rows: { key: string; value: string }[] = [];
   try {
     rows = await prisma.websiteSetting.findMany({
@@ -40,56 +41,54 @@ export default async function AdminMaintenance() {
           <Wrench size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Maintenance Mode</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">While maintenance is enabled, only staff (and users at or above the minimum login rank) can log into the hotel. These values are stored in <code>website_settings</code> and read live by the login flow.</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.rich("subtitle", { code: (chunks) => <code>{chunks}</code> })}</p>
         </div>
       </div>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard
-          label="Maintenance"
-          value={enabled ? "ENABLED" : "Disabled"}
+          label={t("maintenance")}
+          value={enabled ? t("enabled") : t("disabled")}
           state={enabled ? "danger" : "ok"}
-          hint={enabled ? "Hotel is locked down" : "Hotel is open to everyone"}
+          hint={enabled ? t("hotelLockedDown") : t("hotelOpen")}
           icon={enabled ? "🚧" : "🟢"}
         />
         <StatusCard
-          label="Min login rank"
+          label={t("minLoginRank")}
           value={minRankValue}
-          hint="During maintenance"
+          hint={t("duringMaintenance")}
           icon="🛡️"
         />
         <StatusCard
-          label="Splash message"
-          value={message ? "Set" : "Empty"}
+          label={t("splashMessage")}
+          value={message ? t("set") : t("empty")}
           state={message ? "ok" : "neutral"}
           icon="💬"
         />
       </div>
 
-      {/* ── Current state ─────────────────────────────────────── */}
       <section className="mt-6">
-        <h2 className="admin-section-title">Current state</h2>
+        <h2 className="admin-section-title">{t("currentState")}</h2>
         <div className="admin-card flex items-center gap-3">
           <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-red-500/22 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
-            {enabled ? "ENABLED" : "disabled"}
+            {enabled ? t("enabled") : t("disabled")}
           </span>
           <div>
             <strong>
-              Maintenance is currently {enabled ? "ENABLED" : "disabled"}.
+              {t("maintenanceCurrently", { status: enabled ? t("enabled") : t("disabled") })}
             </strong>
             <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 m-0">
               {enabled
-                ? `Only users with rank ${minRankValue} or higher can log in right now.`
-                : "The hotel is open to everyone."}
+                ? t("onlyRankCanLogin", { rank: minRankValue })
+                : t("hotelOpenToEveryone")}
             </p>
           </div>
         </div>
       </section>
 
-      {/* ── Edit form ─────────────────────────────────────────── */}
       <section className="mt-6">
-        <h2 className="admin-section-title">Settings</h2>
+        <h2 className="admin-section-title">{t("settings")}</h2>
         <form action={saveMaintenance} className="admin-card">
           <label htmlFor="mt-enabled" className="flex items-center gap-2 mb-4">
             <input
@@ -100,12 +99,12 @@ export default async function AdminMaintenance() {
               defaultChecked={enabled}
               className="w-auto"
             />
-            <span>Enable maintenance mode</span>
+            <span>{t("enableMaintenance")}</span>
           </label>
 
           <div className="mb-4 max-w-[220px]">
             <label htmlFor="mt-min-rank" className="text-sm text-gray-500 dark:text-gray-400 block mb-1">
-              Minimum login rank during maintenance
+              {t("minLoginRankLabel")}
             </label>
             <input
               id="mt-min-rank"
@@ -120,20 +119,20 @@ export default async function AdminMaintenance() {
 
           <div className="mb-4">
             <label htmlFor="mt-message" className="text-sm text-gray-500 dark:text-gray-400 block mb-1">
-              Maintenance message (shown on the splash; basic HTML allowed)
+              {t("maintenanceMessageLabel")}
             </label>
             <textarea
               id="mt-message"
               name="message"
               rows={8}
               defaultValue={message}
-              placeholder="We're working hard on the hotel — back soon!"
+              placeholder={t("maintenanceMessagePlaceholder")}
               className="w-full resize-y"
             />
           </div>
 
           <button type="submit" className="btn btn-primary">
-            Save changes
+            {t("saveChanges")}
           </button>
         </form>
       </section>