first commit

frontend/components/ui/empty-card.tsx

@@ -0,0 +1,45 @@
+import { Inbox } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface EmptyCardProps {
+  message?: string;
+  description?: string;
+  icon?: React.ReactNode;
+  className?: string;
+  /** Render as a compact inline row instead of a full card */
+  inline?: boolean;
+}
+
+export function EmptyCard({
+  message = "No data available",
+  description,
+  icon,
+  className,
+  inline = false,
+}: EmptyCardProps) {
+  if (inline) {
+    return (
+      <div className={cn("flex items-center gap-2 text-sm text-muted-foreground", className)}>
+        {icon ?? <Inbox className="w-4 h-4 shrink-0" />}
+        <span>{message}</span>
+      </div>
+    );
+  }
+
+  return (
+    <Card className={cn("border-dashed", className)}>
+      <CardContent className="flex flex-col items-center justify-center gap-3 py-10 text-center">
+        <div className="text-muted-foreground/40">
+          {icon ?? <Inbox className="w-8 h-8" />}
+        </div>
+        <div>
+          <p className="text-sm font-medium text-muted-foreground">{message}</p>
+          {description && (
+            <p className="text-xs text-muted-foreground/60 mt-1">{description}</p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}