Add function Language

www/index.html

@@ -14,10 +14,10 @@
           <div class="loginHeaderRight">
             <span class="loginHeaderPrompt">Chọn cách đăng nhập:</span>
             <div class="loginTabs" role="tablist">
-              <button id="loginTabPassword" type="button" class="loginTab active" role="tab" aria-selected="true">
+              <button id="loginTabPassword" type="button" class="loginTab active" role="tab" aria-selected="true" data-i18n="login.tab.password">
                 Tên đăng nhập và mật khẩu
               </button>
-              <button id="loginTabPin" type="button" class="loginTab" role="tab" aria-selected="false">
+              <button id="loginTabPin" type="button" class="loginTab" role="tab" aria-selected="false" data-i18n="login.tab.pin">
                 Mã PIN
               </button>
             </div>
@@ -27,26 +27,26 @@
         <div class="loginCard">
           <div id="loginPanelPassword" class="loginPanel">
             <div id="loginHelpPassword" class="loginHelp">
-              <h2 class="loginHelpTitle">Đăng nhập bằng tên và mật khẩu</h2>
-              <p>Nhập tên đăng nhập và mật khẩu để truy cập robot.</p>
-              <p>Tài khoản do quản trị viên cấp hoặc xem trong tài liệu hướng dẫn robot.</p>
-              <p>Nếu chưa có tài khoản, vui lòng liên hệ quản trị viên robot.</p>
+              <h2 class="loginHelpTitle" data-i18n="login.password.title">Đăng nhập bằng tên và mật khẩu</h2>
+              <p data-i18n="login.password.help1">Nhập tên đăng nhập và mật khẩu để truy cập robot.</p>
+              <p data-i18n="login.password.help2">Tài khoản do quản trị viên cấp hoặc xem trong tài liệu hướng dẫn robot.</p>
+              <p data-i18n="login.password.help3">Nếu chưa có tài khoản, vui lòng liên hệ quản trị viên robot.</p>
             </div>
             <div class="loginForms">
               <form id="loginForm" class="loginForm" action="#" method="post" novalidate>
                 <label class="loginField">
-                  <span class="loginFieldLabel">Tên đăng nhập:</span>
-                  <input id="loginUsername" name="username" type="text" autocomplete="username" placeholder="Admin" required />
+                  <span class="loginFieldLabel" data-i18n="login.field.username">Tên đăng nhập:</span>
+                  <input id="loginUsername" name="username" type="text" autocomplete="username" placeholder="Admin" data-i18n-placeholder="login.placeholder.username" required />
                 </label>
                 <label class="loginField">
-                  <span class="loginFieldLabel">Mật khẩu:</span>
+                  <span class="loginFieldLabel" data-i18n="login.field.password">Mật khẩu:</span>
                   <input id="loginPasswordInput" name="password" type="password" autocomplete="current-password" placeholder="" required />
                 </label>
                 <button type="submit" class="loginSubmit" data-mode="password">
                   <svg class="loginSubmitIcon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                     <path fill="currentColor" d="M12.65 10A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v2h3v-2h1v-3h-3V9h-1.35zM7 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>
                   </svg>
-                  <span class="loginSubmitLabel">Đăng nhập</span>
+                  <span class="loginSubmitLabel" data-i18n="login.submit">Đăng nhập</span>
                 </button>
               </form>
               <p id="loginError" class="loginError" hidden></p>
@@ -56,12 +56,12 @@
           <div id="loginPanelPin" class="loginPanel loginPanel--pin" hidden>
             <div class="loginPinLeft">
               <div class="loginHelp">
-                <h2 class="loginHelpTitle">Đăng nhập bằng mã PIN</h2>
-                <p>Người dùng được kích hoạt PIN có thể đăng nhập tại đây.</p>
-                <p>Nếu chưa có mã PIN 4 chữ số, vui lòng liên hệ quản trị viên robot.</p>
-                <p class="loginHelpNote">Không có mã PIN cấu hình sẵn — quản trị viên phải gán PIN trước.</p>
+                <h2 class="loginHelpTitle" data-i18n="login.pin.title">Đăng nhập bằng mã PIN</h2>
+                <p data-i18n="login.pin.help1">Người dùng được kích hoạt PIN có thể đăng nhập tại đây.</p>
+                <p data-i18n="login.pin.help2">Nếu chưa có mã PIN 4 chữ số, vui lòng liên hệ quản trị viên robot.</p>
+                <p class="loginHelpNote" data-i18n="login.pin.helpNote">Không có mã PIN cấu hình sẵn — quản trị viên phải gán PIN trước.</p>
               </div>
-              <div class="loginPinBoxes" id="loginPinBoxes" role="group" aria-label="Mã PIN 4 chữ số">
+              <div class="loginPinBoxes" id="loginPinBoxes" role="group" aria-label="Mã PIN 4 chữ số" data-i18n-aria="login.pin.aria.group">
                 <div class="loginPinCell" data-idx="0"></div>
                 <div class="loginPinCell" data-idx="1"></div>
                 <div class="loginPinCell" data-idx="2"></div>
@@ -70,7 +70,7 @@
               <input id="loginPin" type="hidden" value="" autocomplete="off" />
               <p id="loginPinError" class="loginError loginPinError" hidden></p>
             </div>
-            <div class="loginKeypad" id="loginKeypad" aria-label="Bàn phím số">
+            <div class="loginKeypad" id="loginKeypad" aria-label="Bàn phím số" data-i18n-aria="login.pin.aria.keypad">
               <button type="button" class="loginKey" data-key="1">1</button>
               <button type="button" class="loginKey" data-key="2">2</button>
               <button type="button" class="loginKey" data-key="3">3</button>
@@ -81,7 +81,7 @@
               <button type="button" class="loginKey" data-key="8">8</button>
               <button type="button" class="loginKey" data-key="9">9</button>
               <button type="button" class="loginKey loginKey--wide" data-key="0">0</button>
-              <button type="button" class="loginKey loginKey--back" data-key="back" aria-label="Xóa">✕</button>
+              <button type="button" class="loginKey loginKey--back" data-key="back" aria-label="Xóa" data-i18n-aria="login.pin.aria.backspace">✕</button>
             </div>
           </div>
         </div>
@@ -89,54 +89,77 @@
     </div>
 
     <div class="shell auth-locked">
-      <aside class="sidebar">
-        <div class="brand">
-          <div class="brandIcon">R</div>
-          <div class="brandText">
-            <div class="brandTitle">PhenikaaX</div>
-            <div class="brandSub">RobotApp</div>
-          </div>
-        </div>
+      <aside class="mirNavShell" id="mirNavShell">
+        <nav class="mirNavRail" id="mirNavRail" aria-label="Main navigation" data-i18n-aria="nav.aria.main">
+          <button type="button" class="mirNavBackBtn" id="mirNavBackBtn" aria-label="Collapse menu" title="Collapse menu" data-i18n-aria="nav.collapse" data-i18n-title="nav.collapse">
+            <span aria-hidden="true">«</span>
+          </button>
 
-        <div class="navTitle">WORKSPACE</div>
-        <nav class="nav">
-          <a class="navItem active" href="#" data-page="dashboard" aria-current="page">
-            <span class="navDot"></span>
-            Dashboard
-          </a>
-          <a class="navItem" href="#" data-page="config">
-            <span class="navDot"></span>
-            Cấu hình
-          </a>
+          <div class="mirNavRailItems">
+            <button type="button" class="mirNavRailItem" data-module="dashboards">
+              <svg class="mirNavRailIcon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">
+                <path d="M4 4h7v9H4V4zm9 0h7v5h-7V4zM4 15h7v5H4v-5zm9 4h7v-5h-7v5z" fill="currentColor"/>
+              </svg>
+              <span class="mirNavRailLabel" data-i18n="nav.dashboards">Dashboards</span>
+            </button>
+            <button type="button" class="mirNavRailItem is-active" data-module="setup" aria-current="true">
+              <svg class="mirNavRailIcon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">
+                <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <span class="mirNavRailLabel" data-i18n="nav.setup">Setup</span>
+            </button>
+            <button type="button" class="mirNavRailItem" data-module="monitoring">
+              <svg class="mirNavRailIcon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">
+                <path d="M3 3v18h18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+                <path d="M7 14l4-4 3 3 5-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <span class="mirNavRailLabel" data-i18n="nav.monitoring">Monitoring</span>
+            </button>
+            <button type="button" class="mirNavRailItem" data-module="system">
+              <svg class="mirNavRailIcon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">
+                <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.8"/>
+                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+              </svg>
+              <span class="mirNavRailLabel" data-i18n="nav.system">System</span>
+            </button>
+            <button type="button" class="mirNavRailItem" data-module="help">
+              <svg class="mirNavRailIcon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">
+                <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.8"/>
+                <path d="M9.5 9a2.5 2.5 0 1 1 4.2 1.8c-.8.6-1.2 1.2-1.2 2.2M12 17h.01" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+              </svg>
+              <span class="mirNavRailLabel" data-i18n="nav.help">Help</span>
+            </button>
+          </div>
+
+          <div class="mirNavRailFooter">
+            <button type="button" class="mirNavRailItem mirNavRailItem--logout" id="mirNavLogout">
+              <svg class="mirNavRailIcon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">
+                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <span class="mirNavRailLabel" data-i18n="nav.logout">Log out</span>
+            </button>
+          </div>
         </nav>
 
-        <div class="navTitle">CÀI ĐẶT</div>
-        <nav class="nav">
-          <a class="navItem" href="#" data-page="missions">
-            <span class="navDot"></span>
-            Missions
-          </a>
-          <a class="navItem" href="#" data-page="integrations">
-            <span class="navDot"></span>
-            Tích hợp
-          </a>
-        </nav>
-
-        <div class="sidebarFooter">
-          <div class="statusBadge">
-            <span class="statusLed"></span>
-            <span id="status" class="statusText">…</span>
+        <aside class="mirNavFlyout" id="mirNavFlyout">
+          <div class="mirNavFlyoutHeader">
+            <h2 class="mirNavFlyoutTitle" id="mirNavFlyoutTitle">Setup</h2>
           </div>
-        </div>
+          <nav class="mirNavFlyoutList" id="mirNavFlyoutList" aria-label="Submenu" data-i18n-aria="nav.aria.submenu"></nav>
+          <div class="mirNavFlyoutFooter">
+            <span class="mirNavStatusLed" aria-hidden="true"></span>
+            <span id="status" class="mirNavStatusText">…</span>
+          </div>
+        </aside>
       </aside>
 
       <div class="body">
         <header class="mirTopbar" id="mirTopbar">
           <div class="mirTopbarInner">
             <div class="mirTopbarLeft">
-              <div class="mirRobotId" id="mirRobotId" title="Robot">RobotApp</div>
+              <div class="mirRobotId" id="mirRobotId" title="Robot" data-i18n-title="topbar.robotTitle">RobotApp</div>
 
-              <button type="button" class="mirPauseBtn" id="mirSegControl" aria-label="Start / Pause robot" title="Start / Pause robot">
+              <button type="button" class="mirPauseBtn" id="mirSegControl" aria-label="Start / Pause robot" title="Start / Pause robot" data-i18n-aria="topbar.controlAria" data-i18n-title="topbar.controlAria">
                 <svg class="mirPauseBtnIcon mirPauseBtnIcon--pause" id="mirControlIconPause" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
                   <rect x="6" y="5" width="4.5" height="14" rx="1" fill="#f39c12"/>
                   <rect x="13.5" y="5" width="4.5" height="14" rx="1" fill="#f39c12"/>
@@ -174,8 +197,8 @@
                 <span class="mirCaret" aria-hidden="true">▴</span>
               </button>
               <div class="mirPanel mirPanel--locale" id="mirLocalePanel" hidden>
-                <button type="button" class="mirLocaleOption" data-locale="vi">🇻🇳 Tiếng Việt</button>
-                <button type="button" class="mirLocaleOption" data-locale="en">🇺🇸 English</button>
+                <button type="button" class="mirLocaleOption" data-locale="vi" data-i18n="topbar.localeOption.vi">🇻🇳 Tiếng Việt</button>
+                <button type="button" class="mirLocaleOption" data-locale="en" data-i18n="topbar.localeOption.en">🇺🇸 English</button>
               </div>
 
               <button type="button" class="mirSegment mirSegment--user" id="mirUserBtn" aria-haspopup="true" aria-expanded="false">
@@ -205,7 +228,7 @@
                 <button type="button" class="mirBtn mirBtn--danger" id="mirUserSignOutBtn" data-i18n="topbar.logout">Đăng xuất</button>
               </div>
 
-              <button type="button" class="mirSegment mirSegment--joystick" id="mirSegJoystick" title="Engage joystick" aria-label="Joystick">
+              <button type="button" class="mirSegment mirSegment--joystick" id="mirSegJoystick" title="Engage joystick" data-i18n-title="topbar.joystickAria" aria-label="Joystick">
                 <svg class="mirSvgIcon mirJoystickSvg" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
                   <rect x="7" y="10" width="10" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>
                   <line x1="12" y1="10" x2="12" y2="4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
@@ -213,7 +236,7 @@
                 </svg>
               </button>
 
-              <div class="mirSegment mirSegment--battery" id="mirSegBattery" title="Battery">
+              <div class="mirSegment mirSegment--battery" id="mirSegBattery" title="Battery" data-i18n-title="topbar.batteryTitle">
                 <span class="mirBatteryIcon" id="mirBatteryIcon" aria-hidden="true">
                   <span class="mirBatteryLevel" id="mirBatteryLevel"></span>
                 </span>
@@ -229,42 +252,42 @@
               <section class="card">
                 <div class="cardHeader">
                   <div>
-                    <div class="cardTitle">Dashboard</div>
-                    <div class="cardSub">Widget mission — chạy, xếp hàng và tạm dừng giống MiR Fleet.</div>
+                    <div class="cardTitle" data-i18n="dashboard.title">Dashboard</div>
+                    <div class="cardSub" data-i18n="dashboard.subtitle">Widget mission — chạy, xếp hàng và tạm dừng giống MiR Fleet.</div>
                   </div>
                   <div class="dashboardToolbar">
-                    <button id="dashboardAddWidgetBtn" type="button" class="btn subtle">Thêm widget</button>
-                    <button id="dashboardEditBtn" type="button" class="btn subtle">Sửa layout</button>
+                    <button id="dashboardAddWidgetBtn" type="button" class="btn subtle" data-i18n="dashboard.addWidget">Thêm widget</button>
+                    <button id="dashboardEditBtn" type="button" class="btn subtle" data-i18n="dashboard.editLayout">Sửa layout</button>
                   </div>
                 </div>
                 <div class="cardBody">
                   <div id="dashboardGrid" class="dashboardGrid"></div>
-                  <p id="dashboardEmpty" class="mutedNote dashboardEmpty" hidden>Chưa có widget. Bấm «Thêm widget» để bắt đầu.</p>
+                  <p id="dashboardEmpty" class="mutedNote dashboardEmpty" hidden data-i18n="dashboard.empty">Chưa có widget. Bấm «Thêm widget» để bắt đầu.</p>
                 </div>
               </section>
 
               <section class="card dashboardInfoCard">
                 <div class="cardHeader">
                   <div>
-                    <div class="cardTitle">Hệ thống</div>
-                    <div class="cardSub">Trạng thái backend và layout đang active.</div>
+                    <div class="cardTitle" data-i18n="dashboard.system.title">Hệ thống</div>
+                    <div class="cardSub" data-i18n="dashboard.system.subtitle">Trạng thái backend và layout đang active.</div>
                   </div>
                 </div>
                 <div class="cardBody dashboardInfoGrid">
                   <div class="row rowWide">
-                    <label>Backend</label>
+                    <label data-i18n="dashboard.system.backend">Backend</label>
                     <div id="overviewBackend" class="mutedNote">—</div>
                   </div>
                   <div class="row rowWide">
-                    <label>Layout</label>
+                    <label data-i18n="dashboard.system.layout">Layout</label>
                     <div id="overviewActiveLayout" class="mutedNote">—</div>
                   </div>
                   <div class="row rowWide">
-                    <label>Model robot</label>
+                    <label data-i18n="dashboard.system.model">Model robot</label>
                     <div id="overviewActiveModel" class="mutedNote">—</div>
                   </div>
                   <div class="row rowWide">
-                    <label>LiDAR / IMU</label>
+                    <label data-i18n="dashboard.system.sensors">LiDAR / IMU</label>
                     <div id="overviewActiveSensors" class="mutedNote">—</div>
                   </div>
                 </div>
@@ -277,32 +300,32 @@
           <section class="card" id="layoutManagerCard">
             <div class="cardHeader">
               <div>
-                <div class="cardTitle">Quản lý layout</div>
-                <div class="cardSub">Nhiều cấu hình robot — mỗi layout có LiDAR và model riêng.</div>
+                <div class="cardTitle" data-i18n="config.layout.title">Quản lý layout</div>
+                <div class="cardSub" data-i18n="config.layout.subtitle">Nhiều cấu hình robot — mỗi layout có LiDAR và model riêng.</div>
               </div>
               <div class="configPageActions">
-                <button id="refreshBtn" type="button" class="btn subtle">Tải lại</button>
-                <button id="saveLayoutBtn" type="button" class="btn primary">Lưu layout</button>
+                <button id="refreshBtn" type="button" class="btn subtle" data-i18n="common.reload">Tải lại</button>
+                <button id="saveLayoutBtn" type="button" class="btn primary" data-i18n="config.layout.save">Lưu layout</button>
               </div>
             </div>
             <div class="cardBody">
               <div class="row rowWide">
-                <label>Layout hiện tại</label>
+                <label data-i18n="config.layout.current">Layout hiện tại</label>
                 <select id="layoutSelect"></select>
               </div>
               <div class="row rowWide">
-                <label>Tên layout mới</label>
-                <input id="layoutNewName" type="text" placeholder="VD: AGV kho A" />
+                <label data-i18n="config.layout.newName">Tên layout mới</label>
+                <input id="layoutNewName" type="text" placeholder="VD: AGV kho A" data-i18n-placeholder="config.layout.newNamePlaceholder" />
               </div>
               <div class="checkRow">
                 <label>
                   <input id="layoutCloneCurrent" type="checkbox" />
-                  Sao chép từ layout đang mở
+                  <span data-i18n="config.layout.cloneCurrent">Sao chép từ layout đang mở</span>
                 </label>
               </div>
               <div class="layoutManagerActions">
-                <button id="layoutCreateBtn" type="button" class="btn subtle">Tạo layout</button>
-                <button id="layoutDeleteBtn" type="button" class="btn subtle danger">Xóa</button>
+                <button id="layoutCreateBtn" type="button" class="btn subtle" data-i18n="config.layout.create">Tạo layout</button>
+                <button id="layoutDeleteBtn" type="button" class="btn subtle danger" data-i18n="common.delete">Xóa</button>
               </div>
               <p id="layoutActiveHint" class="mutedNote">—</p>
             </div>
@@ -318,8 +341,8 @@
               aria-controls="lidarListCardBody"
             >
               <div>
-                <div class="cardTitle">LiDARs</div>
-                <div class="cardSub">Đăng ký tên, IP, port và chỉnh pose theo robot frame.</div>
+                <div class="cardTitle" data-i18n="config.lidar.title">LiDARs</div>
+                <div class="cardSub" data-i18n="config.lidar.subtitle">Đăng ký tên, IP, port và chỉnh pose theo robot frame.</div>
               </div>
               <span class="cardChevron" aria-hidden="true"></span>
             </div>
@@ -327,19 +350,19 @@
             <div class="cardBody" id="lidarListCardBody">
               <form id="lidarForm" class="form">
                 <div class="row">
-                  <label>Tên</label>
-                  <input id="name" placeholder="Lidar trước" required />
+                  <label data-i18n="config.lidar.field.name">Tên</label>
+                  <input id="name" placeholder="Lidar trước" data-i18n-placeholder="config.lidar.placeholder.name" required />
                 </div>
                 <div class="row">
-                  <label>IP</label>
-                  <input id="ip" placeholder="192.168.0.10" required />
+                  <label data-i18n="config.lidar.field.ip">IP</label>
+                  <input id="ip" placeholder="192.168.0.10" data-i18n-placeholder="config.lidar.placeholder.ip" required />
                 </div>
                 <div class="row">
-                  <label>Port</label>
+                  <label data-i18n="config.lidar.field.port">Port</label>
                   <input id="port" type="number" min="1" max="65535" value="2112" required />
                 </div>
                 <div class="actions">
-                  <button id="addLidarBtn" class="btn primary" type="button">Thêm</button>
+                  <button id="addLidarBtn" class="btn primary" type="button" data-i18n="common.add">Thêm</button>
                 </div>
                 <p id="lidarFormHint" class="formHint" hidden></p>
               </form>
@@ -358,8 +381,8 @@
               aria-controls="imuListCardBody"
             >
               <div>
-                <div class="cardTitle">IMU</div>
-                <div class="cardSub">Cảm biến quán tính — frame, topic và pose trên robot.</div>
+                <div class="cardTitle" data-i18n="config.imu.title">IMU</div>
+                <div class="cardSub" data-i18n="config.imu.subtitle">Cảm biến quán tính — frame, topic và pose trên robot.</div>
               </div>
               <span class="cardChevron" aria-hidden="true"></span>
             </div>
@@ -367,37 +390,37 @@
             <div class="cardBody" id="imuListCardBody">
               <form id="imuForm" class="form">
                 <div class="row">
-                  <label>Tên</label>
-                  <input id="imuName" placeholder="IMU chính" required />
+                  <label data-i18n="config.imu.field.name">Tên</label>
+                  <input id="imuName" placeholder="IMU chính" data-i18n-placeholder="config.imu.placeholder.name" required />
                 </div>
                 <div class="row">
-                  <label>Frame ID</label>
-                  <input id="imuFrameId" placeholder="imu_link" required />
+                  <label data-i18n="config.imu.field.frame">Frame ID</label>
+                  <input id="imuFrameId" placeholder="imu_link" data-i18n-placeholder="config.imu.placeholder.frame" required />
                 </div>
                 <div class="row">
-                  <label>Topic</label>
-                  <input id="imuTopic" placeholder="imu/data" value="imu/data" required />
+                  <label data-i18n="config.imu.field.topic">Topic</label>
+                  <input id="imuTopic" placeholder="imu/data" data-i18n-placeholder="config.imu.placeholder.topic" value="imu/data" required />
                 </div>
                 <div class="row rowWide">
-                  <label>Nguồn</label>
+                  <label data-i18n="config.imu.field.source">Nguồn</label>
                   <select id="imuSource">
-                    <option value="external">Ngoài (ROS topic)</option>
-                    <option value="lidar_builtin">Tích hợp LiDAR</option>
-                    <option value="onboard">Onboard robot</option>
+                    <option value="external" data-i18n="config.imu.source.external">Ngoài (ROS topic)</option>
+                    <option value="lidar_builtin" data-i18n="config.imu.source.lidarBuiltin">Tích hợp LiDAR</option>
+                    <option value="onboard" data-i18n="config.imu.source.onboard">Onboard robot</option>
                   </select>
                 </div>
                 <div class="row">
-                  <label>Tần số (Hz)</label>
+                  <label data-i18n="config.imu.field.rate">Tần số (Hz)</label>
                   <input id="imuRateHz" type="number" min="1" max="1000" step="1" value="100" />
                 </div>
                 <div class="checkRow">
                   <label>
                     <input id="imuEnabled" type="checkbox" checked />
-                    Bật IMU
+                    <span data-i18n="config.imu.enabled">Bật IMU</span>
                   </label>
                 </div>
                 <div class="actions">
-                  <button id="addImuBtn" class="btn primary" type="button">Thêm IMU</button>
+                  <button id="addImuBtn" class="btn primary" type="button" data-i18n="config.imu.add">Thêm IMU</button>
                 </div>
                 <p id="imuFormHint" class="formHint" hidden></p>
               </form>
@@ -416,7 +439,7 @@
               aria-controls="robotModelCardBody"
             >
               <div>
-                <div class="cardTitle">Model robot</div>
+                <div class="cardTitle" data-i18n="config.robot.title">Model robot</div>
                 <div class="cardSub">Kinematic differential — bánh, động cơ và giới hạn vận tốc.</div>
               </div>
               <span class="cardChevron" aria-hidden="true"></span>
@@ -696,13 +719,13 @@
               <section class="card">
                 <div class="cardHeader">
                   <div>
-                    <div class="cardTitle">Missions</div>
-                    <div class="cardSub">Setup → Missions — danh sách nhiệm vụ robot.</div>
+                    <div class="cardTitle" data-i18n="missions.title">Missions</div>
+                    <div class="cardSub" data-i18n="missions.subtitle">Setup → Missions — danh sách nhiệm vụ robot.</div>
                   </div>
-                  <button id="missionCreateOpenBtn" type="button" class="btn primary">Create mission</button>
+                  <button id="missionCreateOpenBtn" type="button" class="btn primary" data-i18n="missions.create">Create mission</button>
                 </div>
                 <div class="cardBody">
-                  <div id="missionListEmpty" class="mutedNote" hidden>Chưa có mission. Bấm Create mission để bắt đầu.</div>
+                  <div id="missionListEmpty" class="mutedNote" hidden data-i18n="missions.empty">Chưa có mission. Bấm Create mission để bắt đầu.</div>
                   <div id="missionList" class="missionList"></div>
                 </div>
               </section>
@@ -710,17 +733,17 @@
               <section class="card" id="missionQueueCard">
                 <div class="cardHeader">
                   <div>
-                    <div class="cardTitle">Mission queue</div>
-                    <div class="cardSub">Thêm mission bằng biểu tượng queue — robot chạy theo thứ tự từ trên xuống.</div>
+                    <div class="cardTitle" data-i18n="missions.queue.title">Mission queue</div>
+                    <div class="cardSub" data-i18n="missions.queue.subtitle">Thêm mission bằng biểu tượng queue — robot chạy theo thứ tự từ trên xuống.</div>
                   </div>
                   <div class="missionQueueCardActions">
-                    <button id="missionQueueCancelBtn" type="button" class="btn subtle danger" title="Hủy mission đang chạy">Hủy chạy</button>
-                    <button id="missionQueueClearBtn" type="button" class="btn subtle danger">Xóa queue</button>
+                    <button id="missionQueueCancelBtn" type="button" class="btn subtle danger" data-i18n="missions.queue.cancel">Hủy chạy</button>
+                    <button id="missionQueueClearBtn" type="button" class="btn subtle danger" data-i18n="missions.queue.clear">Xóa queue</button>
                   </div>
                 </div>
                 <div class="cardBody">
                   <div id="missionQueueRunner" class="missionQueueRunner mutedNote">—</div>
-                  <div id="missionQueueEmpty" class="mutedNote">Queue trống. Bấm <span class="mono">▤</span> trên mission để thêm.</div>
+                  <div id="missionQueueEmpty" class="mutedNote" data-i18n="missions.queue.empty">Queue trống. Bấm ▤ trên mission để thêm.</div>
                   <div id="missionQueueList" class="missionQueueList"></div>
                 </div>
               </section>
@@ -730,31 +753,31 @@
               <section class="card missionEditorCard">
                 <div class="missionEditorTop">
                   <div class="missionEditorTitleWrap">
-                    <button id="missionEditorBackBtn" type="button" class="btn subtle missionBackBtn" aria-label="Quay lại danh sách">←</button>
+                    <button id="missionEditorBackBtn" type="button" class="btn subtle missionBackBtn" data-i18n-aria="missions.editor.backAria">←</button>
                     <div>
-                      <div class="missionEditorKicker">Mission editor</div>
+                      <div class="missionEditorKicker" data-i18n="missions.editor.kicker">Mission editor</div>
                       <div class="missionEditorTitleRow">
                         <h2 id="missionEditorTitle" class="missionEditorTitle">—</h2>
-                        <button id="missionSettingsBtn" type="button" class="iconBtn" title="Cài đặt mission" aria-label="Cài đặt mission">⚙</button>
+                        <button id="missionSettingsBtn" type="button" class="iconBtn" data-i18n-aria="missions.editor.settingsAria" data-i18n-title="missions.editor.settingsAria">⚙</button>
                       </div>
                       <div id="missionEditorMeta" class="missionEditorMeta">—</div>
                     </div>
                   </div>
                   <div class="missionEditorTopActions">
-                    <span id="missionEditorDirty" class="missionDirtyBadge" hidden>Chưa lưu</span>
-                    <button id="missionSaveAsBtn" type="button" class="btn subtle">Save as</button>
-                    <button id="missionSaveBtn" type="button" class="btn primary">Save</button>
+                    <span id="missionEditorDirty" class="missionDirtyBadge" hidden data-i18n="missions.editor.unsaved">Chưa lưu</span>
+                    <button id="missionSaveAsBtn" type="button" class="btn subtle" data-i18n="missions.editor.saveAs">Save as</button>
+                    <button id="missionSaveBtn" type="button" class="btn primary" data-i18n="missions.editor.save">Save</button>
                   </div>
                 </div>
 
-                <div class="missionActionBar" id="missionActionBar" role="toolbar" aria-label="Thêm action">
+                <div class="missionActionBar" id="missionActionBar" role="toolbar" data-i18n-aria="missions.editor.addActionAria">
                   <div class="missionGroupTabs" id="missionGroupTabs"></div>
                 </div>
 
                 <div class="missionEditorBody">
-                  <p class="missionFlowHint">Thực thi từ trên xuống dưới. Kéo biểu tượng ↔ để đổi thứ tự. Với Loop: kéo action vào vùng bên trong.</p>
+                  <p class="missionFlowHint" data-i18n="missions.editor.flowHint">Thực thi từ trên xuống dưới. Kéo biểu tượng ↔ để đổi thứ tự. Với Loop: kéo action vào vùng bên trong.</p>
                   <div id="missionActionList" class="missionActionList"></div>
-                  <div id="missionActionListEmpty" class="missionActionListEmpty mutedNote">Chọn action từ menu phía trên để bắt đầu.</div>
+                  <div id="missionActionListEmpty" class="missionActionListEmpty mutedNote" data-i18n="missions.editor.emptyActions">Chọn action từ menu phía trên để bắt đầu.</div>
                 </div>
               </section>
             </div>
@@ -765,16 +788,16 @@
               <section class="card">
                 <div class="cardHeader">
                   <div>
-                    <div class="cardTitle">Modbus trigger</div>
-                    <div class="cardSub">System → Triggers — coil 1001–2000 gắn mission_id. Thiết bị remote bật coil (Modbus TCP :5502) → mission vào queue.</div>
+                    <div class="cardTitle" data-i18n="integrations.modbus.title">Modbus trigger</div>
+                    <div class="cardSub" data-i18n="integrations.modbus.subtitle">System → Triggers — coil 1001–2000 gắn mission_id. Thiết bị remote bật coil (Modbus TCP :5502) → mission vào queue.</div>
                   </div>
-                  <button id="integrationAddTriggerBtn" type="button" class="btn primary">Thêm trigger</button>
+                  <button id="integrationAddTriggerBtn" type="button" class="btn primary" data-i18n="integrations.modbus.add">Thêm trigger</button>
                 </div>
                 <div class="cardBody">
-                  <div id="integrationTriggerEmpty" class="mutedNote">Chưa có trigger Modbus.</div>
+                  <div id="integrationTriggerEmpty" class="mutedNote" data-i18n="integrations.modbus.empty">Chưa có trigger Modbus.</div>
                   <div id="integrationTriggerList" class="missionList"></div>
                   <div class="integrationCoilSection">
-                    <div class="integrationSectionLabel">Coil đã gán (bấm để mô phỏng rising edge)</div>
+                    <div class="integrationSectionLabel" data-i18n="integrations.modbus.coilsLabel">Coil đã gán (bấm để mô phỏng rising edge)</div>
                     <div id="integrationCoilGrid" class="integrationCoilGrid"></div>
                   </div>
                 </div>
@@ -783,13 +806,13 @@
               <section class="card">
                 <div class="cardHeader">
                   <div>
-                    <div class="cardTitle">REST API — MiR v2.0.0</div>
-                    <div class="cardSub">Hệ thống bên ngoài POST mission vào queue qua REST.</div>
+                    <div class="cardTitle" data-i18n="integrations.rest.title">REST API — MiR v2.0.0</div>
+                    <div class="cardSub" data-i18n="integrations.rest.subtitle">Hệ thống bên ngoài POST mission vào queue qua REST.</div>
                   </div>
                 </div>
                 <div class="cardBody integrationApiBody">
                   <div class="row rowWide">
-                    <label>Base URL</label>
+                    <label data-i18n="integrations.rest.baseUrl">Base URL</label>
                     <div id="integrationApiBaseUrl" class="mono integrationCode">—</div>
                   </div>
                   <div class="integrationApiBlock">
@@ -805,10 +828,10 @@ GET /api/v2.0.0/missions
 GET /api/v2.0.0/status</pre>
                   </div>
                   <div class="row rowWide integrationTestRow">
-                    <label for="integrationRestMission">Thử nhanh</label>
+                    <label for="integrationRestMission" data-i18n="integrations.rest.quickTest">Thử nhanh</label>
                     <div class="integrationTestActions">
                       <select id="integrationRestMission"></select>
-                      <button id="integrationRestTestBtn" type="button" class="btn subtle">POST queue</button>
+                      <button id="integrationRestTestBtn" type="button" class="btn subtle" data-i18n="integrations.rest.postQueue">POST queue</button>
                     </div>
                   </div>
                 </div>
@@ -817,29 +840,58 @@ GET /api/v2.0.0/status</pre>
               <section class="card">
                 <div class="cardHeader">
                   <div>
-                    <div class="cardTitle">MiRFleet — Lên lịch mission</div>
-                    <div class="cardSub">Ưu tiên, gán robot, chạy ASAP hoặc theo thời gian.</div>
+                    <div class="cardTitle" data-i18n="integrations.fleet.title">MiRFleet — Lên lịch mission</div>
+                    <div class="cardSub" data-i18n="integrations.fleet.subtitle">Ưu tiên, gán robot, chạy ASAP hoặc theo thời gian.</div>
                   </div>
                   <div class="integrationHeaderActions">
-                    <button id="integrationRefreshBtn" type="button" class="btn subtle">Tải lại</button>
-                    <button id="integrationAddScheduleBtn" type="button" class="btn primary">Thêm lịch</button>
+                    <button id="integrationRefreshBtn" type="button" class="btn subtle" data-i18n="common.reload">Tải lại</button>
+                    <button id="integrationAddScheduleBtn" type="button" class="btn primary" data-i18n="integrations.fleet.addSchedule">Thêm lịch</button>
                   </div>
                 </div>
                 <div class="cardBody">
-                  <div id="integrationScheduleEmpty" class="mutedNote">Chưa có lịch fleet.</div>
+                  <div id="integrationScheduleEmpty" class="mutedNote" data-i18n="integrations.fleet.empty">Chưa có lịch fleet.</div>
                   <div id="integrationScheduleList" class="missionList"></div>
                 </div>
               </section>
             </div>
           </div>
 
+          <div class="page" id="pageMonitoring" data-page-content="monitoring" hidden>
+            <section class="card">
+              <div class="cardHeader">
+                <div>
+                  <div class="cardTitle" data-i18n="monitoring.log.title">System log</div>
+                  <div class="cardSub" data-i18n="monitoring.log.subtitle">Monitoring → System log — nhật ký hệ thống (đang phát triển).</div>
+                </div>
+              </div>
+              <div class="cardBody">
+                <p class="mutedNote" data-i18n="monitoring.log.placeholder">Tính năng monitoring sẽ hiển thị log robot, cảnh báo và lịch sử mission tại đây.</p>
+              </div>
+            </section>
+          </div>
+
+          <div class="page" id="pageHelp" data-page-content="help" hidden>
+            <section class="card">
+              <div class="cardHeader">
+                <div>
+                  <div class="cardTitle" data-i18n="help.api.title">API documentation</div>
+                  <div class="cardSub" data-i18n="help.api.subtitle">Help → API — tham chiếu REST MiR v2.0.0 cho tích hợp bên ngoài.</div>
+                </div>
+              </div>
+              <div class="cardBody">
+                <p class="mutedNote" data-i18n="help.api.body1">Xem chi tiết endpoint tại System → Tích hợp hoặc tài liệu /api/v2.0.0/.</p>
+                <p class="mutedNote" data-i18n="help.api.body2">Reference Guide MiR rev 1.9: docs/Reference guide.pdf</p>
+              </div>
+            </section>
+          </div>
+
           <div id="configSplitter" class="splitter" role="separator" aria-orientation="vertical" tabindex="0"></div>
 
           <div class="contentRight" id="contentRight">
             <section class="card">
               <div class="cardHeader">
                 <div>
-                  <div class="cardTitle">Bố trí trên robot</div>
+                  <div class="cardTitle" data-i18n="config.canvas.title">Bố trí trên robot</div>
                 </div>
               </div>
 
@@ -848,11 +900,11 @@ GET /api/v2.0.0/status</pre>
                   <canvas id="canvas"></canvas>
                 </div>
                 <div class="metaBar">
-                  <div class="viewHint">Cuộn chuột: zoom • Shift + kéo: di chuyển vùng nhìn</div>
+                  <div class="viewHint" data-i18n="config.canvas.viewHint">Cuộn chuột: zoom • Shift + kéo: di chuyển vùng nhìn</div>
                   <div id="robotDiffSummary" class="robotDiffSummary">—</div>
-                  <div>Robot center: <span id="robotCenterText"></span></div>
-                  <div>Selected: <span id="selectedText">none</span></div>
-                  <div>Pose: <span id="selectedRelText">—</span></div>
+                  <div><span data-i18n="config.canvas.robotCenter">Robot center:</span> <span id="robotCenterText"></span></div>
+                  <div><span data-i18n="config.canvas.selected">Selected:</span> <span id="selectedText" data-i18n="common.none">none</span></div>
+                  <div><span data-i18n="config.canvas.pose">Pose:</span> <span id="selectedRelText">—</span></div>
                 </div>
               </div>
             </section>
@@ -864,30 +916,30 @@ GET /api/v2.0.0/status</pre>
     <dialog id="missionCreateDialog" class="missionDialog">
       <form id="missionCreateForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
-          <h3>Create mission</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionCreateDialog" aria-label="Đóng">×</button>
+          <h3 data-i18n="missions.dialog.create.title">Create mission</h3>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionCreateDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <div class="row rowWide">
-            <label for="missionCreateName">Tên mission</label>
-            <input id="missionCreateName" type="text" required placeholder="VD: Go to charging station" />
+            <label for="missionCreateName" data-i18n="missions.dialog.create.name">Tên mission</label>
+            <input id="missionCreateName" type="text" required placeholder="VD: Go to charging station" data-i18n-placeholder="missions.dialog.create.namePlaceholder" />
           </div>
           <div class="row rowWide">
-            <label for="missionCreateGroup">Nhóm mission</label>
+            <label for="missionCreateGroup" data-i18n="missions.dialog.create.group">Nhóm mission</label>
             <select id="missionCreateGroup"></select>
           </div>
           <div class="row rowWide">
-            <label for="missionCreateGroupNew">Hoặc nhóm mới</label>
-            <input id="missionCreateGroupNew" type="text" placeholder="Tùy chọn" />
+            <label for="missionCreateGroupNew" data-i18n="missions.dialog.create.groupNew">Hoặc nhóm mới</label>
+            <input id="missionCreateGroupNew" type="text" placeholder="Tùy chọn" data-i18n-placeholder="common.optional" />
           </div>
           <div class="row rowWide">
-            <label for="missionCreateDesc">Mô tả</label>
-            <textarea id="missionCreateDesc" rows="2" placeholder="Tùy chọn"></textarea>
+            <label for="missionCreateDesc" data-i18n="missions.dialog.create.desc">Mô tả</label>
+            <textarea id="missionCreateDesc" rows="2" placeholder="Tùy chọn" data-i18n-placeholder="common.optional"></textarea>
           </div>
         </div>
         <div class="missionDialogFooter">
-          <button type="button" class="btn subtle" data-close-dialog="missionCreateDialog">Hủy</button>
-          <button type="submit" class="btn primary">Create mission</button>
+          <button type="button" class="btn subtle" data-close-dialog="missionCreateDialog" data-i18n="common.cancel">Hủy</button>
+          <button type="submit" class="btn primary" data-i18n="missions.create">Create mission</button>
         </div>
       </form>
     </dialog>
@@ -895,26 +947,26 @@ GET /api/v2.0.0/status</pre>
     <dialog id="missionSettingsDialog" class="missionDialog">
       <form id="missionSettingsForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
-          <h3>Cài đặt mission</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionSettingsDialog" aria-label="Đóng">×</button>
+          <h3 data-i18n="missions.dialog.settings.title">Cài đặt mission</h3>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionSettingsDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <div class="row rowWide">
-            <label for="missionSettingsName">Tên</label>
+            <label for="missionSettingsName" data-i18n="missions.dialog.settings.name">Tên</label>
             <input id="missionSettingsName" type="text" required />
           </div>
           <div class="row rowWide">
-            <label for="missionSettingsGroup">Nhóm</label>
+            <label for="missionSettingsGroup" data-i18n="missions.dialog.settings.group">Nhóm</label>
             <select id="missionSettingsGroup"></select>
           </div>
           <div class="row rowWide">
-            <label for="missionSettingsDesc">Mô tả</label>
+            <label for="missionSettingsDesc" data-i18n="missions.dialog.settings.desc">Mô tả</label>
             <textarea id="missionSettingsDesc" rows="2"></textarea>
           </div>
         </div>
         <div class="missionDialogFooter">
           <button type="button" class="btn subtle" data-close-dialog="missionSettingsDialog">Hủy</button>
-          <button type="submit" class="btn primary">Áp dụng</button>
+          <button type="submit" class="btn primary" data-i18n="common.apply">Áp dụng</button>
         </div>
       </form>
     </dialog>
@@ -922,18 +974,18 @@ GET /api/v2.0.0/status</pre>
     <dialog id="missionSaveAsDialog" class="missionDialog">
       <form id="missionSaveAsForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
-          <h3>Save mission as</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionSaveAsDialog" aria-label="Đóng">×</button>
+          <h3 data-i18n="missions.dialog.saveAs.title">Save mission as</h3>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionSaveAsDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <div class="row rowWide">
-            <label for="missionSaveAsName">Tên mission mới</label>
+            <label for="missionSaveAsName" data-i18n="missions.dialog.saveAs.name">Tên mission mới</label>
             <input id="missionSaveAsName" type="text" required />
           </div>
         </div>
         <div class="missionDialogFooter">
           <button type="button" class="btn subtle" data-close-dialog="missionSaveAsDialog">Hủy</button>
-          <button type="submit" class="btn primary">Lưu bản sao</button>
+          <button type="submit" class="btn primary" data-i18n="missions.dialog.saveAs.submit">Lưu bản sao</button>
         </div>
       </form>
     </dialog>
@@ -941,13 +993,13 @@ GET /api/v2.0.0/status</pre>
     <dialog id="missionActionConfigDialog" class="missionDialog missionDialogWide">
       <form id="missionActionConfigForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
-          <h3 id="missionActionConfigTitle">Cấu hình action</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionActionConfigDialog" aria-label="Đóng">×</button>
+          <h3 id="missionActionConfigTitle" data-i18n="missions.dialog.actionConfig.title">Cấu hình action</h3>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionActionConfigDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody" id="missionActionConfigBody"></div>
         <div class="missionDialogFooter">
           <button type="button" class="btn subtle" data-close-dialog="missionActionConfigDialog">Hủy</button>
-          <button type="submit" class="btn primary">Áp dụng</button>
+          <button type="submit" class="btn primary" data-i18n="common.apply">Áp dụng</button>
         </div>
       </form>
     </dialog>
@@ -956,7 +1008,7 @@ GET /api/v2.0.0/status</pre>
       <form id="missionQueueForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
           <h3>Thêm vào mission queue</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionQueueDialog" aria-label="Đóng">×</button>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="missionQueueDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <p id="missionQueueDialogMission" class="mutedNote">—</p>
@@ -976,7 +1028,7 @@ GET /api/v2.0.0/status</pre>
       <form id="dashboardAddWidgetForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
           <h3>Thêm widget</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="dashboardAddWidgetDialog" aria-label="Đóng">×</button>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="dashboardAddWidgetDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <div class="row rowWide">
@@ -1001,7 +1053,7 @@ GET /api/v2.0.0/status</pre>
       <form id="dashboardEditWidgetForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
           <h3>Cấu hình widget</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="dashboardEditWidgetDialog" aria-label="Đóng">×</button>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="dashboardEditWidgetDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <input type="hidden" id="dashboardEditWidgetId" />
@@ -1023,7 +1075,7 @@ GET /api/v2.0.0/status</pre>
       <form id="integrationAddTriggerForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
           <h3>Modbus trigger</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="integrationAddTriggerDialog" aria-label="Đóng">×</button>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="integrationAddTriggerDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <div class="row rowWide">
@@ -1050,7 +1102,7 @@ GET /api/v2.0.0/status</pre>
       <form id="integrationAddScheduleForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
           <h3>Lịch MiRFleet</h3>
-          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="integrationAddScheduleDialog" aria-label="Đóng">×</button>
+          <button type="button" class="iconBtn missionDialogClose" data-close-dialog="integrationAddScheduleDialog" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <div class="row rowWide">
@@ -1091,26 +1143,26 @@ GET /api/v2.0.0/status</pre>
     <dialog id="changePasswordDialog" class="missionDialog">
       <form id="changePasswordForm" method="dialog" class="missionDialogForm">
         <div class="missionDialogHeader">
-          <h3>Đổi mật khẩu</h3>
-          <button type="button" class="iconBtn missionDialogClose" onclick="document.getElementById('changePasswordDialog').close()" aria-label="Đóng">×</button>
+          <h3 data-i18n="auth.changePassword.title">Đổi mật khẩu</h3>
+          <button type="button" class="iconBtn missionDialogClose" onclick="document.getElementById('changePasswordDialog').close()" aria-label="Đóng" data-i18n-aria="common.close">×</button>
         </div>
         <div class="missionDialogBody">
           <div class="row rowWide">
-            <label for="changePasswordCurrent">Mật khẩu hiện tại</label>
+            <label for="changePasswordCurrent" data-i18n="auth.changePassword.current">Mật khẩu hiện tại</label>
             <input id="changePasswordCurrent" type="password" autocomplete="current-password" required />
           </div>
           <div class="row rowWide">
-            <label for="changePasswordNew">Mật khẩu mới</label>
+            <label for="changePasswordNew" data-i18n="auth.changePassword.new">Mật khẩu mới</label>
             <input id="changePasswordNew" type="password" autocomplete="new-password" required minlength="4" />
           </div>
           <div class="row rowWide">
-            <label for="changePasswordConfirm">Xác nhận mật khẩu mới</label>
+            <label for="changePasswordConfirm" data-i18n="auth.changePassword.confirm">Xác nhận mật khẩu mới</label>
             <input id="changePasswordConfirm" type="password" autocomplete="new-password" required minlength="4" />
           </div>
           <p id="changePasswordError" class="loginError"></p>
         </div>
         <div class="missionDialogFooter">
-          <button type="button" class="btn subtle" onclick="document.getElementById('changePasswordDialog').close()">Hủy</button>
+          <button type="button" class="btn subtle" onclick="document.getElementById('changePasswordDialog').close()" data-i18n="common.cancel">Hủy</button>
           <button type="submit" class="btn primary">Lưu</button>
         </div>
       </form>
@@ -1131,9 +1183,9 @@ GET /api/v2.0.0/status</pre>
           <label class="joystickSpeedSelect">
             <span data-i18n="topbar.joystickSpeed">Tốc độ</span>
             <select id="joystickSpeedSelect">
-              <option value="slow">Slow</option>
-              <option value="medium">Medium</option>
-              <option value="fast" selected>Fast</option>
+              <option value="slow" data-i18n="topbar.joystickSpeed.slow">Slow</option>
+              <option value="medium" data-i18n="topbar.joystickSpeed.medium">Medium</option>
+              <option value="fast" data-i18n="topbar.joystickSpeed.fast" selected>Fast</option>
             </select>
           </label>
           <button type="button" class="mirBtn mirBtn--danger" id="joystickDisengageBtn" data-i18n="topbar.joystickOff">Tắt joystick</button>
@@ -1141,7 +1193,9 @@ GET /api/v2.0.0/status</pre>
       </div>
     </div>
 
+    <script src="/i18n.js"></script>
     <script src="/auth.js"></script>
+    <script src="/nav.js"></script>
     <script src="/missions.js"></script>
     <script src="/topbar.js"></script>
     <script src="/dashboard.js"></script>