feat: HSE dashboard with incident stats by type and site

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AWxyMibCuGGtSQSqfajDQ7

components/dashboard/stat-card.tsx

@@ -0,0 +1,23 @@
+interface Props {
+  label: string
+  value: number
+  sub?: string
+  accent?: 'default' | 'green' | 'yellow' | 'red'
+}
+
+const ACCENT = {
+  default: 'border-gray-200',
+  green: 'border-green-400',
+  yellow: 'border-yellow-400',
+  red: 'border-red-400',
+}
+
+export function StatCard({ label, value, sub, accent = 'default' }: Props) {
+  return (
+    <div className={`bg-white rounded-xl shadow-sm p-5 border-t-4 ${ACCENT[accent]}`}>
+      <p className="text-xs text-gray-500 uppercase tracking-wide font-medium">{label}</p>
+      <p className="text-3xl font-bold text-gray-900 mt-1">{value}</p>
+      {sub && <p className="text-xs text-gray-400 mt-1">{sub}</p>}
+    </div>
+  )
+}