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

app/(protected)/hse/dashboard/page.tsx

@@ -0,0 +1,92 @@
+export const dynamic = 'force-dynamic'
+
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { StatCard } from '@/components/dashboard/stat-card'
+
+const TYPE_LABELS: Record<string, string> = {
+  injury: 'Injury',
+  near_miss: 'Near Miss',
+  hazard: 'Hazard',
+  asset_damage: 'Asset Damage',
+  environmental: 'Environmental',
+  security: 'Security',
+  fire: 'Fire',
+}
+
+export default async function HseDashboardPage() {
+  const supabase = await createClient()
+
+  const { data: incidents } = await supabase
+    .from('incidents')
+    .select('id, status, incident_type, sites (name)')
+
+  const rows = incidents ?? []
+  const total = rows.length
+  const closed = rows.filter(r => r.status === 'closed').length
+  const open = total - closed
+
+  const by_type: Record<string, number> = {}
+  for (const r of rows) {
+    by_type[r.incident_type] = (by_type[r.incident_type] ?? 0) + 1
+  }
+
+  const siteMap: Record<string, number> = {}
+  for (const r of rows) {
+    const name = (r.sites as any)?.name ?? 'Unknown'
+    siteMap[name] = (siteMap[name] ?? 0) + 1
+  }
+  const by_site = Object.entries(siteMap).map(([name, count]) => ({ name, count }))
+    .sort((a, b) => b.count - a.count)
+
+  return (
+    <main className="max-w-4xl mx-auto px-4 py-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
+        <Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline">
+          View all incidents →
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 mb-8">
+        <StatCard label="Total Incidents" value={total} />
+        <StatCard label="Open" value={open} accent="yellow" sub="awaiting action" />
+        <StatCard label="Closed" value={closed} accent="green" sub="resolved" />
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
+        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">By Incident Type</h2>
+        <div className="space-y-2">
+          {Object.entries(by_type).sort((a, b) => b[1] - a[1]).map(([type, count]) => (
+            <div key={type} className="flex items-center gap-3">
+              <span className="text-sm text-gray-600 w-32 shrink-0">{TYPE_LABELS[type] ?? type}</span>
+              <div className="flex-1 bg-gray-100 rounded-full h-2">
+                <div
+                  className="bg-blue-500 h-2 rounded-full"
+                  style={{ width: total > 0 ? `${(count / total) * 100}%` : '0%' }}
+                />
+              </div>
+              <span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
+            </div>
+          ))}
+          {Object.keys(by_type).length === 0 && (
+            <p className="text-sm text-gray-400">No incidents yet</p>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm p-5">
+        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">By Site</h2>
+        <div className="space-y-2">
+          {by_site.map(({ name, count }) => (
+            <div key={name} className="flex items-center justify-between">
+              <span className="text-sm text-gray-600">{name}</span>
+              <span className="text-sm font-semibold text-gray-900">{count}</span>
+            </div>
+          ))}
+          {by_site.length === 0 && <p className="text-sm text-gray-400">No data</p>}
+        </div>
+      </div>
+    </main>
+  )
+}

app/api/dashboard/stats/route.ts

@@ -0,0 +1,36 @@
+export const dynamic = 'force-dynamic'
+
+import { NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function GET() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { data: incidents, error } = await supabase
+    .from('incidents')
+    .select('id, status, incident_type, sites (name)')
+
+  if (error) return NextResponse.json({ error: 'Failed to fetch stats' }, { status: 500 })
+
+  const rows = incidents ?? []
+  const total = rows.length
+  const closed = rows.filter(r => r.status === 'closed').length
+  const open = total - closed
+
+  const by_type: Record<string, number> = {}
+  for (const r of rows) {
+    by_type[r.incident_type] = (by_type[r.incident_type] ?? 0) + 1
+  }
+
+  const siteMap: Record<string, number> = {}
+  for (const r of rows) {
+    const name = (r.sites as any)?.name ?? 'Unknown'
+    siteMap[name] = (siteMap[name] ?? 0) + 1
+  }
+  const by_site = Object.entries(siteMap).map(([name, count]) => ({ name, count }))
+    .sort((a, b) => b.count - a.count)
+
+  return NextResponse.json({ total, open, closed, by_type, by_site })
+}

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>
+  )
+}

tests/components/dashboard/stat-card.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { StatCard } from '@/components/dashboard/stat-card'
+
+describe('StatCard', () => {
+  it('renders label and value', () => {
+    render(<StatCard label="Total Incidents" value={42} />)
+    expect(screen.getByText('Total Incidents')).toBeTruthy()
+    expect(screen.getByText('42')).toBeTruthy()
+  })
+
+  it('renders optional sub text', () => {
+    render(<StatCard label="Open" value={12} sub="awaiting action" />)
+    expect(screen.getByText('awaiting action')).toBeTruthy()
+  })
+})