From 206bbab9b454a73d427cb4ff083c9676b7f6f256 Mon Sep 17 00:00:00 2001
From: jhfnetboy <jhfnetboy@gmail.com>
Date: Sun, 14 Jun 2026 15:11:14 +0700
Subject: [PATCH] =?UTF-8?q?feat(portal):=20finish=20i18n=20wiring=20?=
 =?UTF-8?q?=E2=80=94=20operator=20dashboard=20+=20admin=20role=20names?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- app/operator/page.tsx: full i18n wiring of the operator dashboard
  (operatorDashboard ns); keep #309 Quick Actions (operatorHub) + add type=button
- app/admin/page.tsx: map API role.name via t(roleNames.<name>) with raw fallback
- locales: +operatorDashboard (27) +roleNames (7); 632 keys, en/zh in parity

Completes #305 review suggestion (type=button) and the operator/admin i18n gaps.
Verified: type-check 0, i18n:check (632), lint clean, next build pass.
---
 aastar-frontend/app/admin/page.tsx       |  4 +-
 aastar-frontend/app/operator/page.tsx    | 67 ++++++++++++++----------
 aastar-frontend/lib/i18n/locales/en.json | 38 ++++++++++++++
 aastar-frontend/lib/i18n/locales/zh.json | 38 ++++++++++++++
 4 files changed, 118 insertions(+), 29 deletions(-)

diff --git a/aastar-frontend/app/admin/page.tsx b/aastar-frontend/app/admin/page.tsx
index 7cc8eee..b7693fd 100644
--- a/aastar-frontend/app/admin/page.tsx
+++ b/aastar-frontend/app/admin/page.tsx
@@ -178,7 +178,9 @@ export default function AdminPage() {
               className="rounded-xl border border-gray-100 dark:border-gray-700 p-4"
             >
               <div className="flex items-center justify-between mb-2">
-                <p className="font-medium text-gray-900 dark:text-white text-sm">{role.name}</p>
+                <p className="font-medium text-gray-900 dark:text-white text-sm">
+                  {t(`roleNames.${role.name}`, { defaultValue: role.name })}
+                </p>
                 <div className="flex items-center gap-2">
                   <span
                     className={`px-2 py-0.5 rounded text-xs ${
diff --git a/aastar-frontend/app/operator/page.tsx b/aastar-frontend/app/operator/page.tsx
index 54e2308..f41f142 100644
--- a/aastar-frontend/app/operator/page.tsx
+++ b/aastar-frontend/app/operator/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslation } from "react-i18next";
 import {
   ServerStackIcon,
   CheckBadgeIcon,
@@ -10,7 +11,6 @@ import {
   RocketLaunchIcon,
   WrenchScrewdriverIcon,
 } from "@heroicons/react/24/outline";
-import { useTranslation } from "react-i18next";
 import Layout from "@/components/Layout";
 import { operatorAPI } from "@/lib/api";
 
@@ -105,7 +105,7 @@ export default function OperatorPage() {
     ])
       .catch(err => {
         if (err.response?.status === 401) router.push("/auth/login");
-        else setError("Failed to load operator data");
+        else setError(t("operatorDashboard.loadError"));
       })
       .finally(() => setLoading(false));
   }, [router]);
@@ -125,7 +125,7 @@ export default function OperatorPage() {
     <div className="max-w-4xl mx-auto px-4 py-8 space-y-8">
       <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
         <ServerStackIcon className="h-7 w-7 text-slate-700 dark:text-emerald-400" />
-        Operator Portal
+        {t("operatorDashboard.title")}
       </h1>
 
       {error && (
@@ -137,6 +137,7 @@ export default function OperatorPage() {
       {/* Quick Actions — entry points to the operator write flows */}
       <section className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <button
+          type="button"
           onClick={() => router.push("/operator/deploy")}
           className="text-left bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-5 hover:border-emerald-400 dark:hover:border-emerald-500 transition-colors"
         >
@@ -151,6 +152,7 @@ export default function OperatorPage() {
           </p>
         </button>
         <button
+          type="button"
           onClick={() => router.push("/operator/manage")}
           className="text-left bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-5 hover:border-emerald-400 dark:hover:border-emerald-500 transition-colors"
         >
@@ -171,18 +173,21 @@ export default function OperatorPage() {
         <section className="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6">
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-              My Operator Status
+              {t("operatorDashboard.myStatusTitle")}
             </h2>
             <div className="flex gap-2">
-              <StatusBadge active={dashboard.isSPO} label="SPO" />
-              <StatusBadge active={dashboard.isV4Operator} label="V4 Operator" />
+              <StatusBadge active={dashboard.isSPO} label={t("operatorDashboard.spoBadge")} />
+              <StatusBadge
+                active={dashboard.isV4Operator}
+                label={t("operatorDashboard.v4OperatorBadge")}
+              />
             </div>
           </div>
 
           {/* GToken Balance */}
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
             <MetricCard
-              label="GToken Balance"
+              label={t("operatorDashboard.gtokenBalance")}
               value={dashboard.gtokenBalance}
               unit="GTOKEN"
             />
@@ -190,18 +195,22 @@ export default function OperatorPage() {
             {dashboard.isSPO && dashboard.spoStatus && (
               <>
                 <MetricCard
-                  label="SPO Stake"
+                  label={t("operatorDashboard.spoStake")}
                   value={dashboard.spoStatus.stakeAmount}
                   unit="GTOKEN"
                 />
                 <MetricCard
-                  label="SP Balance"
+                  label={t("operatorDashboard.spBalance")}
                   value={dashboard.spoStatus.balance}
                   unit="aPNTs"
-                  sub={dashboard.spoStatus.isConfigured ? "Configured ✓" : "Not configured"}
+                  sub={
+                    dashboard.spoStatus.isConfigured
+                      ? t("operatorDashboard.configured")
+                      : t("operatorDashboard.notConfigured")
+                  }
                 />
                 <MetricCard
-                  label="Exchange Rate"
+                  label={t("operatorDashboard.exchangeRate")}
                   value={dashboard.spoStatus.exchangeRate}
                   unit="aPNTs/GWEI"
                 />
@@ -210,7 +219,7 @@ export default function OperatorPage() {
 
             {dashboard.v4Status.paymasterAddress && (
               <MetricCard
-                label="V4 Paymaster ETH"
+                label={t("operatorDashboard.v4PaymasterEth")}
                 value={dashboard.v4Status.balance}
                 unit="ETH"
                 sub={shortenAddr(dashboard.v4Status.paymasterAddress)}
@@ -222,19 +231,19 @@ export default function OperatorPage() {
           {!dashboard.isSPO && (
             <div className="rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 p-4">
               <p className="text-sm font-medium text-blue-800 dark:text-blue-300 mb-1">
-                Register as SPO (SuperPaymaster Operator)
+                {t("operatorDashboard.registerSpoTitle")}
               </p>
               <ol className="text-xs text-blue-600 dark:text-blue-400 space-y-1 list-decimal list-inside">
-                <li>Approve GToken to GTokenStaking contract</li>
+                <li>{t("operatorDashboard.registerSpoStep1")}</li>
                 <li>
-                  Call{" "}
+                  {t("operatorDashboard.registerSpoStep2Prefix")}{" "}
                   <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">
                     registerRoleSelf
                   </code>{" "}
-                  on Registry with ROLE_PAYMASTER_AOA
+                  {t("operatorDashboard.registerSpoStep2Suffix")}
                 </li>
-                <li>Deposit aPNTs to SuperPaymaster via depositFor</li>
-                <li>Call configureOperator with xPNTs token + treasury + exchange rate</li>
+                <li>{t("operatorDashboard.registerSpoStep3")}</li>
+                <li>{t("operatorDashboard.registerSpoStep4")}</li>
               </ol>
             </div>
           )}
@@ -243,22 +252,22 @@ export default function OperatorPage() {
           {!dashboard.v4Status.paymasterAddress && (
             <div className="mt-3 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-4">
               <p className="text-sm font-medium text-amber-800 dark:text-amber-300 mb-1">
-                Deploy V4 Paymaster
+                {t("operatorDashboard.deployV4Title")}
               </p>
               <ol className="text-xs text-amber-600 dark:text-amber-400 space-y-1 list-decimal list-inside">
                 <li>
-                  Call{" "}
+                  {t("operatorDashboard.deployV4Step1Prefix")}{" "}
                   <code className="bg-amber-100 dark:bg-amber-800 px-1 rounded">
                     deployPaymaster
                   </code>{" "}
-                  on PaymasterFactory
+                  {t("operatorDashboard.deployV4Step1Suffix")}
                 </li>
                 <li>
-                  Register with{" "}
+                  {t("operatorDashboard.deployV4Step2Prefix")}{" "}
                   <code className="bg-amber-100 dark:bg-amber-800 px-1 rounded">
                     ROLE_PAYMASTER_SUPER
                   </code>{" "}
-                  on Registry
+                  {t("operatorDashboard.deployV4Step2Suffix")}
                 </li>
               </ol>
             </div>
@@ -266,7 +275,9 @@ export default function OperatorPage() {
 
           {/* Contract Addresses */}
           <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
-            <p className="text-xs text-gray-500 mb-2">Contract Addresses</p>
+            <p className="text-xs text-gray-500 mb-2">
+              {t("operatorDashboard.contractAddresses")}
+            </p>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs font-mono">
               {[
                 ["Registry", dashboard.registryAddress],
@@ -288,11 +299,11 @@ export default function OperatorPage() {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <section className="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6">
           <h2 className="text-base font-semibold text-gray-900 dark:text-white mb-3">
-            SPO Operators
+            {t("operatorDashboard.spoOperatorsTitle")}
             <span className="ml-2 text-sm font-normal text-gray-400">({spoList.length})</span>
           </h2>
           {spoList.length === 0 ? (
-            <p className="text-sm text-gray-400">None registered</p>
+            <p className="text-sm text-gray-400">{t("operatorDashboard.noneRegistered")}</p>
           ) : (
             <ul className="space-y-1">
               {spoList.map(addr => (
@@ -306,11 +317,11 @@ export default function OperatorPage() {
 
         <section className="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6">
           <h2 className="text-base font-semibold text-gray-900 dark:text-white mb-3">
-            V4 Operators
+            {t("operatorDashboard.v4OperatorsTitle")}
             <span className="ml-2 text-sm font-normal text-gray-400">({v4List.length})</span>
           </h2>
           {v4List.length === 0 ? (
-            <p className="text-sm text-gray-400">None registered</p>
+            <p className="text-sm text-gray-400">{t("operatorDashboard.noneRegistered")}</p>
           ) : (
             <ul className="space-y-1">
               {v4List.map(addr => (
diff --git a/aastar-frontend/lib/i18n/locales/en.json b/aastar-frontend/lib/i18n/locales/en.json
index afa5bfc..b6ee142 100644
--- a/aastar-frontend/lib/i18n/locales/en.json
+++ b/aastar-frontend/lib/i18n/locales/en.json
@@ -770,5 +770,43 @@
       "title": "Manage Operations",
       "desc": "Manage xPNTs, top up your Paymaster, and view operator status."
     }
+  },
+  "operatorDashboard": {
+    "title": "Operator Portal",
+    "loadError": "Failed to load operator data",
+    "myStatusTitle": "My Operator Status",
+    "spoBadge": "SPO",
+    "v4OperatorBadge": "V4 Operator",
+    "gtokenBalance": "GToken Balance",
+    "spoStake": "SPO Stake",
+    "spBalance": "SP Balance",
+    "configured": "Configured ✓",
+    "notConfigured": "Not configured",
+    "exchangeRate": "Exchange Rate",
+    "v4PaymasterEth": "V4 Paymaster ETH",
+    "registerSpoTitle": "Register as SPO (SuperPaymaster Operator)",
+    "registerSpoStep1": "Approve GToken to GTokenStaking contract",
+    "registerSpoStep2Prefix": "Call",
+    "registerSpoStep2Suffix": "on Registry with ROLE_PAYMASTER_AOA",
+    "registerSpoStep3": "Deposit aPNTs to SuperPaymaster via depositFor",
+    "registerSpoStep4": "Call configureOperator with xPNTs token + treasury + exchange rate",
+    "deployV4Title": "Deploy V4 Paymaster",
+    "deployV4Step1Prefix": "Call",
+    "deployV4Step1Suffix": "on PaymasterFactory",
+    "deployV4Step2Prefix": "Register with",
+    "deployV4Step2Suffix": "on Registry",
+    "contractAddresses": "Contract Addresses",
+    "spoOperatorsTitle": "SPO Operators",
+    "v4OperatorsTitle": "V4 Operators",
+    "noneRegistered": "None registered"
+  },
+  "roleNames": {
+    "Community Admin": "Community Admin",
+    "SPO": "SPO Operator",
+    "SPO Operator": "SPO Operator",
+    "V4 Operator": "V4 Operator",
+    "End User": "End User",
+    "Admin": "Protocol Admin",
+    "Protocol Admin": "Protocol Admin"
   }
 }
diff --git a/aastar-frontend/lib/i18n/locales/zh.json b/aastar-frontend/lib/i18n/locales/zh.json
index 9669a69..1dfdf4e 100644
--- a/aastar-frontend/lib/i18n/locales/zh.json
+++ b/aastar-frontend/lib/i18n/locales/zh.json
@@ -770,5 +770,43 @@
       "title": "运营管理",
       "desc": "管理 xPNTs、为 Paymaster 充值、查看运营者状态。"
     }
+  },
+  "operatorDashboard": {
+    "title": "运营者门户",
+    "loadError": "加载运营者数据失败",
+    "myStatusTitle": "我的运营者状态",
+    "spoBadge": "SPO",
+    "v4OperatorBadge": "V4 运营商",
+    "gtokenBalance": "GToken 余额",
+    "spoStake": "SPO 质押",
+    "spBalance": "SP 余额",
+    "configured": "已配置 ✓",
+    "notConfigured": "未配置",
+    "exchangeRate": "兑换比率",
+    "v4PaymasterEth": "V4 Paymaster ETH",
+    "registerSpoTitle": "注册为 SPO（SuperPaymaster 运营商）",
+    "registerSpoStep1": "向 GTokenStaking 合约授权 GToken",
+    "registerSpoStep2Prefix": "调用",
+    "registerSpoStep2Suffix": "在 Registry 上以 ROLE_PAYMASTER_AOA 注册",
+    "registerSpoStep3": "通过 depositFor 向 SuperPaymaster 存入 aPNTs",
+    "registerSpoStep4": "调用 configureOperator 设置 xPNTs 代币 + 国库 + 兑换比率",
+    "deployV4Title": "部署 V4 Paymaster",
+    "deployV4Step1Prefix": "调用",
+    "deployV4Step1Suffix": "在 PaymasterFactory 上部署",
+    "deployV4Step2Prefix": "注册",
+    "deployV4Step2Suffix": "在 Registry 上注册",
+    "contractAddresses": "合约地址",
+    "spoOperatorsTitle": "SPO 运营商",
+    "v4OperatorsTitle": "V4 运营商",
+    "noneRegistered": "暂无注册"
+  },
+  "roleNames": {
+    "Community Admin": "社区管理员",
+    "SPO": "SPO 运营商",
+    "SPO Operator": "SPO 运营商",
+    "V4 Operator": "V4 运营商",
+    "End User": "终端用户",
+    "Admin": "协议管理员",
+    "Protocol Admin": "协议管理员"
   }
 }