Translate admin panel to all 6 languages

src/app/admin/logs/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { ScrollText } from "lucide-react";
 import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
@@ -15,6 +16,8 @@ export default async function AdminStaffActivities({
 }: {
   searchParams: Promise<{ q?: string; page?: string; staffId?: string; action?: string }>;
 }) {
+  const t = await getTranslations("pages.admin.logs");
+
   const sp = await searchParams;
   const q = (sp.q ?? "").trim();
   const page = Math.max(1, Number(sp.page ?? "1") || 1);
@@ -87,16 +90,16 @@ export default async function AdminStaffActivities({
           <ScrollText size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Staff Activities</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Auditor trail of all staff actions in the hotel.</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("subtitle")}</p>
         </div>
       </div>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label="Total activities" value={total} icon="📋" />
-        <StatusCard label="On this page" value={activities.length} icon="📄" />
+        <StatusCard label={t("totalActivities")} value={total} icon="📋" />
+        <StatusCard label={t("onThisPage")} value={activities.length} icon="📄" />
         <StatusCard
-          label="Recent (≤1min)"
+          label={t("recent")}
           value={onlineCount}
           state={onlineCount > 0 ? "ok" : "neutral"}
           icon="🟢"
@@ -107,61 +110,61 @@ export default async function AdminStaffActivities({
         <input
           name="q"
           defaultValue={q}
-          placeholder="Search action, description, IP..."
+          placeholder={t("searchPlaceholder")}
           className="flex-1 min-w-[200px]"
         />
         <input
           name="staffId"
           defaultValue={staffId?.toString()}
-          placeholder="Staff ID"
+          placeholder={t("staffId")}
           className="w-[120px]"
         />
           <input
             name="action"
             defaultValue={action ?? ""}
-            placeholder="Action type (e.g., rank_change)"
+            placeholder={t("actionType")}
             className="w-[160px]"
           />
 
         <button type="submit" className="btn btn-primary">
-          Filter
+          {t("filter")}
         </button>
         {(q || staffId || action) && (
           <a href="/admin/logs" className="btn btn-outline">
-            Clear filters
+            {t("clearFilters")}
           </a>
         )}
       </form>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Activities ({total})</h2>
+        <h2 className="admin-section-title">{t("activities", { count: total })}</h2>
         {activities.length === 0 ? (
-          <div className="admin-empty">No staff activities match this search.</div>
+          <div className="admin-empty">{t("noResults")}</div>
         ) : (
           <div className="overflow-x-auto">
             <table>
               <thead>
                 <tr>
-                  <th>When</th>
-                  <th>Staff</th>
-                  <th>Action</th>
-                  <th>Description</th>
-                  <th>Target</th>
-                  <th>IP Address</th>
+                  <th>{t("colWhen")}</th>
+                  <th>{t("colStaff")}</th>
+                  <th>{t("colAction")}</th>
+                  <th>{t("colDescription")}</th>
+                  <th>{t("colTarget")}</th>
+                  <th>{t("colIp")}</th>
                 </tr>
               </thead>
               <tbody>
                 {activities.map((a) => (
                   <tr key={String(a.id)}>
                     <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{fromDate(a.createdAt)}</td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">#{Number(a.userId)} ({nameById.get(Number(a.userId)) ?? "unknown"})</td>
+                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{t("staffWithId", { id: Number(a.userId), name: nameById.get(Number(a.userId)) ?? "unknown" })}</td>
                     <td>
                       <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{a.action}</span>
                     </td>
                     <td>{a.description}</td>
                     <td>
                       {a.targetType && a.targetId ? (
-                        <span className="text-sm text-gray-500 dark:text-gray-400">{a.targetType === "user" ? "User " : ""}#{String(a.targetId)}</span>
+                        <span className="text-sm text-gray-500 dark:text-gray-400">{a.targetType === "user" ? t("userPrefix") : ""}#{String(a.targetId)}</span>
                       ) : (
                         <span className="text-sm text-gray-500 dark:text-gray-400">—</span>
                       )}
@@ -176,15 +179,14 @@ export default async function AdminStaffActivities({
       </section>
 
       <p className="text-xs text-gray-500 dark:text-gray-400">
-        Page {page} / {pages} · {total} activities
+        {t("pagination", { page, pages, total })}
         {page < pages ? (
           <>
             {" · "}
-            <a href={`/admin/logs?q=${encodeURIComponent(q)}&staffId=${staffId || ""}&action=${action || ""}&page=${page + 1}`}>Next →</a>
+            <a href={`/admin/logs?q=${encodeURIComponent(q)}&staffId=${staffId || ""}&action=${action || ""}&page=${page + 1}`}>{t("next")} →</a>
           </>
         ) : null}
       </p>
     </main>
   );
 }
-