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,29 @@
+export const dynamic = 'force-dynamic'
+
+import { createClient } from '@/lib/supabase/server'
+import { IncidentList } from '@/components/incidents/incident-list'
+
+export default async function HseInboxPage() {
+  const supabase = await createClient()
+
+  const { data: incidents } = await supabase
+    .from('incidents')
+    .select(`
+      id, reference_no, incident_type, status, severity, reported_at,
+      sites (name),
+      zones (name),
+      reporter:users!reported_by (name)
+    `)
+    .order('reported_at', { ascending: false })
+    .limit(100)
+
+  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">Incident Inbox</h1>
+        <span className="text-sm text-gray-500">{incidents?.length ?? 0} incidents</span>
+      </div>
+      <IncidentList incidents={(incidents ?? []) as any} basePath="/hse" />
+    </main>
+  )
+}
@@ -1,9 +1,32 @@
-// app/(protected)/hse/page.tsx
-export default function HSEHome() {
+export const dynamic = 'force-dynamic'
+
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+
+export default async function HsePage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const { data: profile } = await supabase.from('users').select('name').eq('id', user.id).single()
+
  return (
-    <main className="p-8 max-w-4xl mx-auto">
-      <h1 className="text-2xl font-bold">HSE Officer Dashboard</h1>
-      <p className="mt-2 text-gray-500">Phase 1: Incident inbox + triage coming here.</p>
+    <main className="max-w-4xl mx-auto px-4 py-6">
+      <h1 className="text-2xl font-bold text-gray-900 mb-1">HSE Officer Portal</h1>
+      <p className="text-gray-500 text-sm mb-8">Welcome, {profile?.name ?? user.email}</p>
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+        <Link href="/hse/incidents" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-shadow border border-gray-100">
+          <div className="text-2xl mb-2">📋</div>
+          <div className="font-semibold text-gray-900">Incident Inbox</div>
+          <div className="text-xs text-gray-500 mt-1">View all incidents</div>
+        </Link>
+        <Link href="/hse/dashboard" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-shadow border border-gray-100">
+          <div className="text-2xl mb-2">📊</div>
+          <div className="font-semibold text-gray-900">Dashboard</div>
+          <div className="text-xs text-gray-500 mt-1">Stats & overview</div>
+        </Link>
+      </div>
    </main>
  )
 }
@@ -0,0 +1,29 @@
+export const dynamic = 'force-dynamic'
+
+import { createClient } from '@/lib/supabase/server'
+import { IncidentList } from '@/components/incidents/incident-list'
+
+export default async function SupervisorInboxPage() {
+  const supabase = await createClient()
+
+  const { data: incidents } = await supabase
+    .from('incidents')
+    .select(`
+      id, reference_no, incident_type, status, severity, reported_at,
+      sites (name),
+      zones (name),
+      reporter:users!reported_by (name)
+    `)
+    .order('reported_at', { ascending: false })
+    .limit(100)
+
+  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">Incident Inbox</h1>
+        <span className="text-sm text-gray-500">{incidents?.length ?? 0} incidents</span>
+      </div>
+      <IncidentList incidents={(incidents ?? []) as any} basePath="/supervisor" />
+    </main>
+  )
+}
@@ -1,9 +1,27 @@
-// app/(protected)/supervisor/page.tsx
-export default function SupervisorHome() {
+export const dynamic = 'force-dynamic'
+
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+
+export default async function SupervisorPage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const { data: profile } = await supabase.from('users').select('name').eq('id', user.id).single()
+
  return (
-    <main className="p-8 max-w-4xl mx-auto">
-      <h1 className="text-2xl font-bold">Supervisor Dashboard</h1>
-      <p className="mt-2 text-gray-500">Phase 1: Incident inbox coming here.</p>
+    <main className="max-w-4xl mx-auto px-4 py-6">
+      <h1 className="text-2xl font-bold text-gray-900 mb-1">Supervisor Portal</h1>
+      <p className="text-gray-500 text-sm mb-8">Welcome, {profile?.name ?? user.email}</p>
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+        <Link href="/supervisor/incidents" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-shadow border border-gray-100">
+          <div className="text-2xl mb-2">📋</div>
+          <div className="font-semibold text-gray-900">Incident Inbox</div>
+          <div className="text-xs text-gray-500 mt-1">View site incidents</div>
+        </Link>
+      </div>
    </main>
  )
 }
@@ -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>
+  )
+}
@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { IncidentList } from '@/components/incidents/incident-list'
+
+const mockIncidents = [
+  {
+    id: 'inc-001',
+    reference_no: 'SCW1-202607-0001',
+    incident_type: 'near_miss',
+    status: 'reported',
+    severity: null,
+    reported_at: '2026-07-10T09:00:00Z',
+    sites: { name: 'SCW1' },
+    zones: { name: 'Dock A' },
+    reporter: { name: 'John Doe' },
+  },
+  {
+    id: 'inc-002',
+    reference_no: 'SCW1-202607-0002',
+    incident_type: 'injury',
+    status: 'triaged',
+    severity: 3,
+    reported_at: '2026-07-10T10:00:00Z',
+    sites: { name: 'SCW1' },
+    zones: { name: 'Loading Bay' },
+    reporter: { name: 'Jane Smith' },
+  },
+]
+
+describe('IncidentList', () => {
+  it('renders all incident rows', () => {
+    render(<IncidentList incidents={mockIncidents as any} basePath="/hse" />)
+    expect(screen.getByText('SCW1-202607-0001')).toBeTruthy()
+    expect(screen.getByText('SCW1-202607-0002')).toBeTruthy()
+  })
+
+  it('shows incident type labels', () => {
+    render(<IncidentList incidents={mockIncidents as any} basePath="/hse" />)
+    expect(screen.getByText('Near Miss')).toBeTruthy()
+    expect(screen.getByText('Injury / Medical')).toBeTruthy()
+  })
+
+  it('shows status badges', () => {
+    render(<IncidentList incidents={mockIncidents as any} basePath="/hse" />)
+    expect(screen.getByText('REPORTED')).toBeTruthy()
+    expect(screen.getByText('TRIAGED')).toBeTruthy()
+  })
+
+  it('renders empty state when no incidents', () => {
+    render(<IncidentList incidents={[]} basePath="/hse" />)
+    expect(screen.getByText(/no incidents/i)).toBeTruthy()
+  })
+})