refactoring

frontend/src/components/StatCard.tsx

@@ -0,0 +1,29 @@
+interface StatCardProps {
+  icon: React.ElementType;
+  label: string;
+  value: string;
+  color: 'blue' | 'green' | 'purple' | 'orange';
+}
+
+const colorClasses: Record<StatCardProps['color'], string> = {
+  blue: 'bg-blue-50 text-blue-600',
+  green: 'bg-green-50 text-green-600',
+  purple: 'bg-purple-50 text-purple-600',
+  orange: 'bg-orange-50 text-orange-600',
+};
+
+export function StatCard({ icon: Icon, label, value, color }: StatCardProps) {
+  return (
+    <div className="card p-4">
+      <div className="flex items-center">
+        <div className={`p-3 rounded-lg ${colorClasses[color]}`}>
+          <Icon className="h-6 w-6" />
+        </div>
+        <div className="ml-4">
+          <p className="text-sm font-medium text-gray-600">{label}</p>
+          <p className="text-2xl font-bold text-gray-900">{value}</p>
+        </div>
+      </div>
+    </div>
+  );
+}