first commit

app/components/StatCard.tsx

@@ -0,0 +1,30 @@
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  color?: string;
+  icon?: React.ReactNode;
+}
+
+export function StatCard({ title, value, subtitle, color = "#3b82f6", icon }: StatCardProps) {
+  return (
+    <div className="p-6 bg-white rounded-lg border-2 border-gray-200 hover:shadow-md transition-shadow">
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <p className="text-sm font-medium text-gray-600 mb-1">{title}</p>
+          <p className="text-3xl font-bold" style={{ color }}>
+            {value}
+          </p>
+          {subtitle && (
+            <p className="text-sm text-gray-500 mt-1">{subtitle}</p>
+          )}
+        </div>
+        {icon && (
+          <div className="p-3 rounded-lg" style={{ backgroundColor: `${color}20` }}>
+            {icon}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}