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

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

@@ -35,73 +35,79 @@ 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>
<LoginIndicator isLoggedIn={isLoggedIn} />
</div> </div>
<div className="flex-1 flex items-center gap-2 justify-end"> {/* Right side - two rows */}
{/* Time */} <div className="flex-1 flex flex-col items-end gap-1">
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded"> {/* Top row: LOGIN (rightmost) */}
<span className="text-gray-400">Time:</span> <div className="flex items-center gap-2">
<span className="text-green-400 font-mono font-semibold">{formatTime(currentTime)}</span> <LoginIndicator isLoggedIn={isLoggedIn} />
</div> </div>
{/* Date */} {/* Bottom row: all other status items */}
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded"> <div className="flex items-center gap-2 flex-wrap justify-end">
<span className="text-gray-400">Date:</span> {/* Time */}
<span className="text-blue-400 font-mono font-semibold">{formatDate(currentTime)}</span> <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
</div> <span className="text-gray-400">Time:</span>
<span className="text-green-400 font-mono font-semibold">{formatTime(currentTime)}</span>
</div>
{/* Station ID */} {/* 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">Station:</span> <span className="text-gray-400">Date:</span>
<span className="text-white font-semibold">{data.station.id}</span> <span className="text-blue-400 font-mono font-semibold">{formatDate(currentTime)}</span>
</div> </div>
{/* Comm Status */} {/* 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">
{isOnline ? ( <span className="text-gray-400">Station:</span>
<> <span className="text-white font-semibold">{data.station.id}</span>
<Wifi className="w-3 h-3 text-green-500" /> </div>
<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>
{/* Version */} {/* 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">
<span className="text-gray-400">Ver:</span> {isOnline ? (
<span className="text-white">{data.station.version}</span> <>
</div> <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 */} {/* 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">Solar:</span> <span className="text-gray-400">Ver:</span>
<span className="text-yellow-500 font-mono">{data.voltage.solar.toFixed(1)}V</span> <span className="text-white">{data.station.version}</span>
</div> </div>
{/* Battery 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">Battery:</span> <span className="text-gray-400">Solar:</span>
<span className={`font-mono ${data.voltage.batteryStatus === 'HIGH' ? 'text-green-500' : 'text-red-500'}`}> <span className="text-yellow-500 font-mono">{data.voltage.solar.toFixed(1)}V</span>
{data.voltage.battery.toFixed(1)}V </div>
</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'}`}> {/* Battery Voltage */}
{data.voltage.batteryStatus} <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
</span> <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> </div>
</div> </div>