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

fix(ui): Header branding, sidebar collapse, and layout fitting 1024x600

Browse Source 
- Header: Change 'Data Station' to 'RTU', use TCK logo, fix sizing
- Sidebar: MENU text now clickable to collapse/expand
- RainfallView: Fit 1024x600 without scrolling
- GraphView: Fit 1024x600 screen
This commit is contained in:
TCK e-Solutions Sdn. Bhd.
2026-03-13 11:26:26 +08:00
parent e327ab9ac8
commit 30397732f9
7 changed files with 187 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import { useSensorStore } from "../stores/sensorStore";
import { VoltageDisplay } from "./VoltageDisplay";
import { BatteryStatus } from "./BatteryStatus";
import { LoginIndicator } from "./LoginIndicator";
import TCKLogo from "../../../../logo/[LOGO] TCK.svg?react";
export function Header() {
const [currentTime, setCurrentTime] = useState(new Date());
@@ -34,36 +35,36 @@ export function Header() {
};
return (
<div className="bg-gray-950 border-b border-gray-700 px-4 py-2 flex items-center gap-4 text-xs">
<div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-center gap-2 text-xs">
{/* Logo */}
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center font-bold text-white">
DS
<div className="flex items-center gap-1">
<div className="w-6 h-6">
<TCKLogo className="w-full h-full" />
</div>
<span className="text-white font-semibold hidden sm:inline">Data Station</span>
<span className="text-white font-semibold">RTU</span>
</div>
<div className="flex-1 flex items-center gap-4 justify-end flex-wrap">
<div className="flex-1 flex items-center gap-2 justify-end">
{/* Time */}
<div className="flex items-center gap-2 px-2 py-1 bg-gray-800 rounded">
<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>
</div>
{/* Date */}
<div className="flex items-center gap-2 px-2 py-1 bg-gray-800 rounded">
<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>
{/* Station ID */}
<div className="flex items-center gap-2 px-2 py-1 bg-gray-800 rounded">
<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>
{/* Comm Status */}
<div className="flex items-center gap-2 px-2 py-1 bg-gray-800 rounded">
<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" />
@@ -80,7 +81,7 @@ export function Header() {
</div>
{/* Version */}
<div className="flex items-center gap-2 px-2 py-1 bg-gray-800 rounded">
<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>
@@ -89,10 +90,21 @@ export function Header() {
<LoginIndicator isLoggedIn={isLoggedIn} />
{/* Solar Voltage */}
<VoltageDisplay label="Solar" voltage={data.voltage.solar} />
<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>
{/* Battery Voltage */}
<BatteryStatus voltage={data.voltage.battery} />
<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>
</div>
</div>
</div>
);