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 (
<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>