Add more tests

frontend/src/components/dashboard/StatsCard.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { LucideIcon } from 'lucide-react'
+
+interface StatsCardProps {
+  label: string
+  value: string | number
+  icon: LucideIcon
+  iconColor: string
+  iconBgColor: string
+  onClick?: () => void
+  isLoading?: boolean
+}
+
+export const StatsCard: React.FC<StatsCardProps> = ({
+  label,
+  value,
+  icon: Icon,
+  iconColor,
+  iconBgColor,
+  onClick,
+  isLoading = false,
+}) => {
+  return (
+    <div
+      className={`bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow ${
+        onClick ? 'cursor-pointer' : ''
+      }`}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => e.key === 'Enter' && onClick() : undefined}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <div className={`p-3 rounded-lg ${iconBgColor}`}>
+          <Icon className={iconColor} size={24} />
+        </div>
+      </div>
+      <p className="text-2xl font-bold text-warm-text-primary mb-1">
+        {isLoading ? '...' : value}
+      </p>
+      <p className="text-sm text-warm-text-muted">{label}</p>
+    </div>
+  )
+}