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

fix(ui): LOGIN at top-right, two-row header layout

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

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

@@ -35,37 +35,42 @@ export function Header() {
}; };
return ( return (
<div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-center gap-2 text-xs"> <div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-start gap-2 text-xs">
{/* Logo + Login (left side) */} {/* Logo (left) */}
<div className="flex items-center gap-2"> <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" /> <img src={TCKLogo} alt="TCK" className="w-6 h-6" />
<span className="text-white font-semibold">RTU</span> <span className="text-white font-semibold">RTU</span>
</div> </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} /> <LoginIndicator isLoggedIn={isLoggedIn} />
</div> </div>
<div className="flex-1 flex items-center gap-2 justify-end"> {/* Bottom row: all other status items */}
<div className="flex items-center gap-2 flex-wrap justify-end">
{/* Time */} {/* Time */}
<div className="flex items-center gap-1 px-2 py-1 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">Time:</span> <span className="text-gray-400">Time:</span>
<span className="text-green-400 font-mono font-semibold">{formatTime(currentTime)}</span> <span className="text-green-400 font-mono font-semibold">{formatTime(currentTime)}</span>
</div> </div>
{/* Date */} {/* Date */}
<div className="flex items-center gap-1 px-2 py-1 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 font-semibold">{formatDate(currentTime)}</span>
</div> </div>
{/* Station ID */} {/* Station ID */}
<div className="flex items-center gap-1 px-2 py-1 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">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 Status */}
<div className="flex items-center gap-1 px-2 py-1 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" />
@@ -82,19 +87,19 @@ export function Header() {
</div> </div>
{/* Version */} {/* Version */}
<div className="flex items-center gap-1 px-2 py-1 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 Voltage */}
<div className="flex items-center gap-1 px-2 py-1 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 Voltage */}
<div className="flex items-center gap-1 px-2 py-1 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
@@ -105,5 +110,6 @@ export function Header() {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }