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
2026-07-11 07:40:22 +08:00
parent 713556631b
commit b281420810
4 changed files with 167 additions and 0 deletions
@@ -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>
+  )
+}