From d2b4831e1870b2d3147ed3cad702bd14ab988a6d Mon Sep 17 00:00:00 2001
From: admin <cloud@tck.com.my>
Date: Fri, 13 Mar 2026 11:44:56 +0800
Subject: [PATCH] fix(ui): LOGIN at top-right, two-row header layout

---
 .../src/app/components/Header.tsx             | 122 +++++++++---------
 1 file changed, 64 insertions(+), 58 deletions(-)

diff --git a/sample_interface/src/app/components/Header.tsx b/sample_interface/src/app/components/Header.tsx
index a69977eac..92601db7d 100644
--- a/sample_interface/src/app/components/Header.tsx
+++ b/sample_interface/src/app/components/Header.tsx
@@ -35,73 +35,79 @@ export function Header() {
   };
 
   return (
-    <div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-center gap-2 text-xs">
-      {/* Logo + Login (left side) */}
-      <div className="flex items-center gap-2">
-        <div className="flex items-center gap-1">
-          <img src={TCKLogo} alt="TCK" className="w-6 h-6" />
-          <span className="text-white font-semibold">RTU</span>
-        </div>
-        <LoginIndicator isLoggedIn={isLoggedIn} />
+    <div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-start gap-2 text-xs">
+      {/* Logo (left) */}
+      <div className="flex items-center gap-1 pt-0.5">
+        <img src={TCKLogo} alt="TCK" className="w-6 h-6" />
+        <span className="text-white font-semibold">RTU</span>
       </div>
 
-      <div className="flex-1 flex items-center gap-2 justify-end">
-        {/* Time */}
-        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
-          <span className="text-gray-400">Time:</span>
-          <span className="text-green-400 font-mono font-semibold">{formatTime(currentTime)}</span>
+      {/* Right side - two rows */}
+      <div className="flex-1 flex flex-col items-end gap-1">
+        {/* Top row: LOGIN (rightmost) */}
+        <div className="flex items-center gap-2">
+          <LoginIndicator isLoggedIn={isLoggedIn} />
         </div>
 
-        {/* Date */}
-        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
-          <span className="text-gray-400">Date:</span>
-          <span className="text-blue-400 font-mono font-semibold">{formatDate(currentTime)}</span>
-        </div>
+        {/* Bottom row: all other status items */}
+        <div className="flex items-center gap-2 flex-wrap justify-end">
+          {/* Time */}
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
+            <span className="text-gray-400">Time:</span>
+            <span className="text-green-400 font-mono font-semibold">{formatTime(currentTime)}</span>
+          </div>
 
-        {/* Station ID */}
-        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
-          <span className="text-gray-400">Station:</span>
-          <span className="text-white font-semibold">{data.station.id}</span>
-        </div>
+          {/* Date */}
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
+            <span className="text-gray-400">Date:</span>
+            <span className="text-blue-400 font-mono font-semibold">{formatDate(currentTime)}</span>
+          </div>
 
-        {/* Comm Status */}
-        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
-          {isOnline ? (
-            <>
-              <Wifi className="w-3 h-3 text-green-500" />
-              <span className="text-green-500">
-                {data.communication.asu}ASU/{data.communication.dBm}dBm({data.communication.percentage}%)
-              </span>
-            </>
-          ) : (
-            <>
-              <WifiOff className="w-3 h-3 text-red-500" />
-              <span className="text-red-500">OFFLINE</span>
-            </>
-          )}
-        </div>
+          {/* Station ID */}
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
+            <span className="text-gray-400">Station:</span>
+            <span className="text-white font-semibold">{data.station.id}</span>
+          </div>
 
-        {/* Version */}
-        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
-          <span className="text-gray-400">Ver:</span>
-          <span className="text-white">{data.station.version}</span>
-        </div>
+          {/* Comm Status */}
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
+            {isOnline ? (
+              <>
+                <Wifi className="w-3 h-3 text-green-500" />
+                <span className="text-green-500">
+                  {data.communication.asu}ASU/{data.communication.dBm}dBm({data.communication.percentage}%)
+                </span>
+              </>
+            ) : (
+              <>
+                <WifiOff className="w-3 h-3 text-red-500" />
+                <span className="text-red-500">OFFLINE</span>
+              </>
+            )}
+          </div>
 
-        {/* Solar Voltage */}
-        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
-          <span className="text-gray-400">Solar:</span>
-          <span className="text-yellow-500 font-mono">{data.voltage.solar.toFixed(1)}V</span>
-        </div>
+          {/* Version */}
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
+            <span className="text-gray-400">Ver:</span>
+            <span className="text-white">{data.station.version}</span>
+          </div>
 
-        {/* Battery Voltage */}
-        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
-          <span className="text-gray-400">Battery:</span>
-          <span className={`font-mono ${data.voltage.batteryStatus === 'HIGH' ? 'text-green-500' : 'text-red-500'}`}>
-            {data.voltage.battery.toFixed(1)}V
-          </span>
-          <span className={`text-xs px-1 rounded ${data.voltage.batteryStatus === 'HIGH' ? 'bg-green-500/20 text-green-500' : 'bg-red-500/20 text-red-500'}`}>
-            {data.voltage.batteryStatus}
-          </span>
+          {/* Solar Voltage */}
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
+            <span className="text-gray-400">Solar:</span>
+            <span className="text-yellow-500 font-mono">{data.voltage.solar.toFixed(1)}V</span>
+          </div>
+
+          {/* Battery Voltage */}
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
+            <span className="text-gray-400">Battery:</span>
+            <span className={`font-mono ${data.voltage.batteryStatus === 'HIGH' ? 'text-green-500' : 'text-red-500'}`}>
+              {data.voltage.battery.toFixed(1)}V
+            </span>
+            <span className={`text-xs px-1 rounded ${data.voltage.batteryStatus === 'HIGH' ? 'bg-green-500/20 text-green-500' : 'bg-red-500/20 text-red-500'}`}>
+              {data.voltage.batteryStatus}
+            </span>
+          </div>
         </div>
       </div>
     </div>