Add Oudelaa dashboard API integration

oudelaa_dashboard/components/dashboard/stat-card.tsx

@@ -0,0 +1,31 @@
+import { ArrowDownLeft, ArrowUpRight, Minus } from "lucide-react";
+
+import type { StatMetric } from "@/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const trendStyles = {
+  up: "text-emerald-300",
+  down: "text-rose-300",
+  neutral: "text-amber-200",
+} as const;
+
+export function StatCard({ metric }: { metric: StatMetric }) {
+  const Icon = metric.trend === "up" ? ArrowUpRight : metric.trend === "down" ? ArrowDownLeft : Minus;
+
+  return (
+    <Card className="ornament-grid">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-semibold text-muted-foreground">{metric.label}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold text-foreground">{metric.value}</div>
+        <p className={cn("mt-1 flex items-center gap-1 text-xs", trendStyles[metric.trend])}>
+          <Icon className="h-3.5 w-3.5" />
+          {metric.delta}
+        </p>
+        {metric.note ? <p className="mt-2 text-xs text-muted-foreground">{metric.note}</p> : null}
+      </CardContent>
+    </Card>
+  );
+}