jackmechem/server-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign

Browse source
This commit is contained in:
Jack Mechem 2026-05-21 21:13:06 -07:00
parent 3f178f8795
commit c6e6c5ca48
Signed by: jackmechem
SSH key fingerprint: SHA256:GjIjMAC33pzYOe+hWcX5uvgnPrVFAXSrquvt84AOJbU
20 changed files with 664 additions and 277 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/components/PowerCard.tsx
View file

@ -13,7 +13,7 @@ interface PowerCardProps {
function powerColor(watts: number): string {
if (watts > 400) return "#ef4444";
if (watts > 200) return "#f59e0b";
return "#3b82f6";
return "#428ce2";
}
export default function PowerCard({ device, label, delay = 0, toggling = false, onToggle }: PowerCardProps) {
@ -23,23 +23,23 @@ export default function PowerCard({ device, label, delay = 0, toggling = false,
return (
<div
className="bg-white border border-gray-200 rounded-2xl p-5 flex flex-col shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 animate-fade-up"
className="bg-primary border border-secondary rounded-2xl p-5 flex flex-col hover:-translate-y-0.5 transition-all duration-200 animate-fade-up"
style={{ animationDelay: `${delay}ms` }}
>
<div className="flex items-center justify-between mb-3">
<span className="text-[0.68rem] font-medium tracking-widest uppercase text-gray-400">
<span className="text-[0.68rem] font-medium tracking-widest uppercase text-foreground-sec">
{label}
</span>
{device ? (
<div className="flex items-center gap-2">
<span
className={`flex items-center gap-1.5 text-[0.62rem] font-medium uppercase tracking-widest ${
device.on ? "text-emerald-500" : "text-gray-400"
device.on ? "text-green" : "text-foreground-sec"
}`}
>
<span
className={`w-1.5 h-1.5 rounded-full ${
device.on ? "bg-emerald-400" : "bg-gray-300"
device.on ? "bg-green" : "bg-foreground-sec/40"
}`}
/>
{device.on ? "On" : "Off"}
@ -50,8 +50,8 @@ export default function PowerCard({ device, label, delay = 0, toggling = false,
disabled={toggling}
className={`text-[0.6rem] font-medium uppercase tracking-widest px-2 py-0.5 rounded-full border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
device.on
? "border-red-200 text-red-400 hover:bg-red-50"
: "border-emerald-200 text-emerald-500 hover:bg-emerald-50"
? "border-red-500/20 text-red-400 hover:bg-red-500/10"
: "border-green/20 text-green hover:bg-green/10"
}`}
>
{toggling ? "···" : device.on ? "Turn off" : "Turn on"}
@ -64,16 +64,16 @@ export default function PowerCard({ device, label, delay = 0, toggling = false,
{device ? (
<>
<div className="flex items-baseline gap-1.5 mt-0.5">
<span className="text-3xl font-medium tracking-tight text-gray-900 leading-none">
<span className="text-3xl font-medium tracking-tight text-foreground leading-none">
{device.current_power_w.toFixed(1)}
</span>
<span className="text-base text-gray-400 font-medium">W</span>
<span className="text-base text-foreground-sec font-medium">W</span>
</div>
<span className="text-[0.7rem] text-gray-400 mt-1 truncate">
<span className="text-[0.7rem] text-foreground-sec mt-1 truncate">
{device.alias} · {device.model}
</span>
<div className="h-[3px] bg-gray-100 rounded-full mt-4 overflow-hidden">
<div className="h-[3px] bg-secondary rounded-full mt-4 overflow-hidden">
<div
className="h-full rounded-full transition-all duration-700"
style={{
@ -83,30 +83,30 @@ export default function PowerCard({ device, label, delay = 0, toggling = false,
/>
</div>
<div className="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-gray-100">
<div className="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-secondary">
<div className="flex flex-col gap-0.5">
<span className="text-sm font-medium text-gray-900">
<span className="text-sm font-medium text-foreground">
{(device.today_energy_wh / 1000).toFixed(3)}
<span className="text-gray-400 text-xs ml-0.5">kWh</span>
<span className="text-foreground-sec text-xs ml-0.5">kWh</span>
</span>
<span className="text-[0.62rem] uppercase tracking-widest text-gray-400">
<span className="text-[0.62rem] uppercase tracking-widest text-foreground-sec">
Today
</span>
</div>
<div className="flex flex-col gap-0.5">
<span className="text-sm font-medium text-gray-900">
<span className="text-sm font-medium text-foreground">
{(device.month_energy_wh / 1000).toFixed(2)}
<span className="text-gray-400 text-xs ml-0.5">kWh</span>
<span className="text-foreground-sec text-xs ml-0.5">kWh</span>
</span>
<span className="text-[0.62rem] uppercase tracking-widest text-gray-400">
<span className="text-[0.62rem] uppercase tracking-widest text-foreground-sec">
Month
</span>
</div>
<div className="flex flex-col gap-0.5">
<span className="text-sm font-medium text-gray-900">
<span className="text-sm font-medium text-foreground">
{runtimeHours}h {runtimeMins}m
</span>
<span className="text-[0.62rem] uppercase tracking-widest text-gray-400">
<span className="text-[0.62rem] uppercase tracking-widest text-foreground-sec">
Runtime
</span>
</div>