admin/sp80
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Header as single row with LOGIN spanning two rows at right

Browse Source
This commit is contained in:
TCK e-Solutions Sdn. Bhd.
2026-03-13 11:54:56 +08:00
parent d2b4831e18
commit aab408df95
1 changed files with 61 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
sample_interface/src/app/components/Header.tsx
View File

@@ -35,72 +35,57 @@ export function Header() {
}; };
return ( return (
<div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-start gap-2 text-xs"> <div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-start gap-1 text-xs">
{/* Logo (left) */} {/* Left side - all status items in one row */}
<div className="flex items-center gap-1 pt-0.5"> <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>
{/* 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>
{/* 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>
{/* Date */} {/* Date */}
<div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded"> <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-gray-400">DATE:</span>
<span className="text-blue-400 font-mono font-semibold">{formatDate(currentTime)}</span> <span className="text-blue-400 font-mono">{formatDate(currentTime)}</span>
</div> </div>
{/* Station ID */} {/* Time */}
<div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded"> <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-gray-400">TIME:</span>
<span className="text-green-400 font-mono">{formatTime(currentTime)}</span>
</div>
{/* Station */}
<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> <span className="text-white font-semibold">{data.station.id}</span>
</div> </div>
{/* Comm Status */} {/* Comm */}
<div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded"> <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
{isOnline ? ( {isOnline ? (
<> <>
<Wifi className="w-3 h-3 text-green-500" /> <Wifi className="w-3 h-3 text-green-500" />
<span className="text-green-500"> <span className="text-green-500">{data.communication.percentage}%</span>
{data.communication.asu}ASU/{data.communication.dBm}dBm({data.communication.percentage}%)
</span>
</> </>
) : ( ) : (
<> <>
<WifiOff className="w-3 h-3 text-red-500" /> <WifiOff className="w-3 h-3 text-red-500" />
<span className="text-red-500">OFFLINE</span> <span className="text-red-500">OFF</span>
</> </>
)} )}
</div> </div>
{/* Version */} {/* Ver */}
<div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded"> <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-gray-400">VER:</span>
<span className="text-white">{data.station.version}</span> <span className="text-white">{data.station.version}</span>
</div> </div>
{/* Solar Voltage */} {/* Solar */}
<div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded"> <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-gray-400">SOLAR:</span>
<span className="text-yellow-500 font-mono">{data.voltage.solar.toFixed(1)}V</span> <span className="text-yellow-500 font-mono">{data.voltage.solar.toFixed(1)}V</span>
</div> </div>
{/* Battery Voltage */} {/* Battery */}
<div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded"> <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="text-gray-400">BATTERY:</span>
<span className={`font-mono ${data.voltage.batteryStatus === 'HIGH' ? 'text-green-500' : 'text-red-500'}`}> <span className={`font-mono ${data.voltage.batteryStatus === 'HIGH' ? 'text-green-500' : 'text-red-500'}`}>
{data.voltage.battery.toFixed(1)}V {data.voltage.battery.toFixed(1)}V
</span> </span>
@@ -109,6 +94,10 @@ export function Header() {
</span> </span>
</div> </div>
</div> </div>
{/* Right side - LOGIN (two rows, rightmost) */}
<div className="ml-auto">
<LoginIndicator isLoggedIn={isLoggedIn} />
</div> </div>
</div> </div>
); );