first commit

frontend/components/dashboard/kpi-card.tsx

@@ -0,0 +1,77 @@
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { LucideIcon, TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface KpiCardProps {
+  title: string;
+  value: string;
+  icon: LucideIcon;
+  iconColor: string;
+  status: "ok" | "warning" | "critical";
+  hint?: string;
+  loading?: boolean;
+  trend?: number | null;
+  trendLabel?: string;
+  trendInvert?: boolean;
+  href?: string; // optional navigation target
+}
+
+const statusBorder: Record<string, string> = {
+  ok:       "border-l-4 border-l-green-500",
+  warning:  "border-l-4 border-l-amber-500",
+  critical: "border-l-4 border-l-destructive",
+};
+
+export function KpiCard({ title, value, icon: Icon, iconColor, status, hint, loading, trend, trendLabel, trendInvert, href }: KpiCardProps) {
+  const hasTrend = trend !== null && trend !== undefined;
+  const isUp   = hasTrend && trend! > 0;
+  const isDown = hasTrend && trend! < 0;
+  const isFlat = hasTrend && trend! === 0;
+
+  // For temp/alarms: up is bad (red), down is good (green)
+  // For power: up might be warning, down is fine
+  const trendGood = trendInvert ? isDown : isUp;
+  const trendBad  = trendInvert ? isUp   : false;
+
+  const trendColor = isFlat ? "text-muted-foreground"
+    : trendGood ? "text-green-400"
+    : trendBad  ? "text-destructive"
+    : "text-amber-400";
+
+  const inner = (
+    <CardContent className="p-5">
+      <div className="flex items-start justify-between">
+        <div className="space-y-1 flex-1">
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {title}
+          </p>
+          {loading ? (
+            <Skeleton className="h-8 w-24" />
+          ) : (
+            <p className="text-2xl font-bold tracking-tight">{value}</p>
+          )}
+          {hasTrend && !loading ? (
+            <div className={cn("flex items-center gap-1 text-[10px]", trendColor)}>
+              {isFlat ? <Minus className="w-3 h-3" /> : isUp ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
+              <span>{trendLabel ?? (trend! > 0 ? `+${trend}` : `${trend}`)}</span>
+              <span className="text-muted-foreground">vs prev period</span>
+            </div>
+          ) : (
+            hint && <p className="text-[10px] text-muted-foreground">{hint}</p>
+          )}
+        </div>
+        <div className="p-2 rounded-md bg-muted/50 shrink-0">
+          <Icon className={cn("w-5 h-5", iconColor)} />
+        </div>
+      </div>
+    </CardContent>
+  );
+
+  return (
+    <Card className={cn("relative overflow-hidden", statusBorder[status], href && "cursor-pointer hover:bg-muted/20 transition-colors")}>
+      {href ? <Link href={href} className="block">{inner}</Link> : inner}
+    </Card>
+  );
+}