77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
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>
|
|
);
|
|
}
|