feat: create reusable StatCard component with responsive layout

frontend/components/StatCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatCardProps {
+  label: string;
+  value: number;
+  icon?: LucideIcon;
+}
+
+export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
+  return (
+    <div className="flex justify-between items-center gap-2 p-4 bg-slate-900 rounded-lg">
+      {/* Icon + Label Container */}
+      <div className="flex items-center gap-2 min-w-0">
+        {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
+        <span className="text-sm md:text-base text-slate-400 truncate">
+          {label}
+        </span>
+      </div>
+
+      {/* Number (Right) */}
+      <span className="text-lg md:text-xl font-black text-white whitespace-nowrap">
+        {value}
+      </span>
+    </div>
+  );
+}