first commit

frontend/components/dashboard/room-status-grid.tsx

@@ -0,0 +1,97 @@
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Thermometer, Zap, Bell, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { RoomStatus } from "@/lib/api";
+
+interface Props {
+  rooms: RoomStatus[];
+  loading?: boolean;
+}
+
+const statusConfig: Record<string, { label: string; dot: string; bg: string }> = {
+  ok:       { label: "Healthy",  dot: "bg-green-500",   bg: "bg-green-500/10 text-green-400" },
+  warning:  { label: "Warning",  dot: "bg-amber-500",   bg: "bg-amber-500/10 text-amber-400" },
+  critical: { label: "Critical", dot: "bg-destructive", bg: "bg-destructive/10 text-destructive" },
+};
+
+const roomLabels: Record<string, string> = {
+  "hall-a": "Hall A",
+  "hall-b": "Hall B",
+  "hall-c": "Hall C",
+};
+
+export function RoomStatusGrid({ rooms, loading }: Props) {
+  const router = useRouter();
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-semibold">Room Status — Singapore DC01</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            {Array.from({ length: 2 }).map((_, i) => (
+              <Skeleton key={i} className="h-28 w-full rounded-lg" />
+            ))}
+          </div>
+        ) : rooms.length === 0 ? (
+          <div className="h-28 flex items-center justify-center text-sm text-muted-foreground">
+            Waiting for room data...
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            {rooms.map((room) => {
+              const s = statusConfig[room.status];
+              return (
+                <button
+                  key={room.room_id}
+                  onClick={() => router.push("/environmental")}
+                  className="rounded-lg border border-border bg-muted/30 p-4 space-y-3 text-left w-full hover:bg-muted/50 hover:border-primary/30 transition-colors group"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">
+                      {roomLabels[room.room_id] ?? room.room_id}
+                    </span>
+                    <div className="flex items-center gap-2">
+                      <span className={cn("flex items-center gap-1.5 text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide", s.bg)}>
+                        <span className={cn("w-1.5 h-1.5 rounded-full", s.dot)} />
+                        {s.label}
+                      </span>
+                      <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/40 group-hover:text-primary transition-colors" />
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-3 gap-2 text-xs">
+                    <div className="flex flex-col gap-0.5">
+                      <span className="flex items-center gap-1 text-muted-foreground">
+                        <Thermometer className="w-3 h-3" /> Temp
+                      </span>
+                      <span className="font-semibold">{room.avg_temp.toFixed(1)}°C</span>
+                    </div>
+                    <div className="flex flex-col gap-0.5">
+                      <span className="flex items-center gap-1 text-muted-foreground">
+                        <Zap className="w-3 h-3" /> Power
+                      </span>
+                      <span className="font-semibold">{room.total_kw.toFixed(1)} kW</span>
+                    </div>
+                    <div className="flex flex-col gap-0.5">
+                      <span className="flex items-center gap-1 text-muted-foreground">
+                        <Bell className="w-3 h-3" /> Alarms
+                      </span>
+                      <span className={cn("font-semibold", room.alarm_count > 0 ? "text-destructive" : "")}>
+                        {room.alarm_count === 0 ? "None" : room.alarm_count}
+                      </span>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}