feat: incident inbox pages with filter/search for HSE and supervisor roles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AWxyMibCuGGtSQSqfajDQ7
2026-07-11 07:39:43 +08:00
parent 2239b6e2df
commit 2f2018f27a
6 changed files with 294 additions and 10 deletions
@@ -0,0 +1,132 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+
+const TYPE_LABELS: Record<string, string> = {
+  injury: 'Injury / Medical',
+  near_miss: 'Near Miss',
+  hazard: 'Hazard',
+  asset_damage: 'Asset Damage',
+  environmental: 'Environmental',
+  security: 'Security',
+  fire: 'Fire / Emergency',
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  reported: 'bg-yellow-100 text-yellow-800',
+  triaged: 'bg-blue-100 text-blue-800',
+  investigating: 'bg-purple-100 text-purple-800',
+  capa_pending: 'bg-orange-100 text-orange-800',
+  verification: 'bg-indigo-100 text-indigo-800',
+  closed: 'bg-green-100 text-green-800',
+}
+
+type Incident = {
+  id: string
+  reference_no: string | null
+  incident_type: string
+  status: string
+  severity: number | null
+  reported_at: string
+  sites: { name: string } | null
+  zones: { name: string } | null
+  reporter: { name: string } | null
+}
+
+interface Props {
+  incidents: Incident[]
+  basePath: string
+}
+
+export function IncidentList({ incidents, basePath }: Props) {
+  const [typeFilter, setTypeFilter] = useState('')
+  const [statusFilter, setStatusFilter] = useState('')
+  const [search, setSearch] = useState('')
+
+  const filtered = incidents.filter(inc => {
+    if (typeFilter && inc.incident_type !== typeFilter) return false
+    if (statusFilter && inc.status !== statusFilter) return false
+    if (search) {
+      const q = search.toLowerCase()
+      return (
+        inc.reference_no?.toLowerCase().includes(q) ||
+        inc.incident_type.includes(q) ||
+        (inc.sites?.name ?? '').toLowerCase().includes(q)
+      )
+    }
+    return true
+  })
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        <input
+          type="search"
+          placeholder="Search ref, type, site…"
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+        <select
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          value={typeFilter}
+          onChange={e => setTypeFilter(e.target.value)}
+        >
+          <option value="">All types</option>
+          {Object.entries(TYPE_LABELS).map(([v, l]) => (
+            <option key={v} value={v}>{l}</option>
+          ))}
+        </select>
+        <select
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          value={statusFilter}
+          onChange={e => setStatusFilter(e.target.value)}
+        >
+          <option value="">All statuses</option>
+          {Object.keys(STATUS_COLORS).map(s => (
+            <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>
+          ))}
+        </select>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="text-center py-12 text-gray-500 text-sm">No incidents found</div>
+      ) : (
+        <div className="divide-y divide-gray-100 bg-white rounded-xl shadow-sm overflow-hidden">
+          {filtered.map(inc => (
+            <Link
+              key={inc.id}
+              href={`${basePath}/incidents/${inc.id}`}
+              className="flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors"
+            >
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2 mb-0.5">
+                  <span className="font-mono text-sm font-semibold text-gray-900">
+                    {inc.reference_no ?? '—'}
+                  </span>
+                  <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-700'}`}>
+                    {inc.status.replace(/_/g, ' ').toUpperCase()}
+                  </span>
+                </div>
+                <div className="text-sm text-gray-600">
+                  {TYPE_LABELS[inc.incident_type] ?? inc.incident_type}
+                  {inc.zones?.name && ` · ${inc.zones.name}`}
+                  {inc.sites?.name && ` · ${inc.sites.name}`}
+                </div>
+              </div>
+              <div className="ml-4 text-right">
+                <div className="text-xs text-gray-400">
+                  {new Date(inc.reported_at).toLocaleDateString('en-MY')}
+                </div>
+                {inc.severity && (
+                  <div className="text-xs text-gray-500 mt-0.5">Sev {inc.severity}</div>
+                )}
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}