feat: incident detail page with evidence gallery for HSE and supervisor roles

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

app/(protected)/hse/incidents/[id]/page.tsx

@@ -0,0 +1,41 @@
+export const dynamic = 'force-dynamic'
+
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { IncidentDetail } from '@/components/incidents/incident-detail'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function HseIncidentDetailPage({ params }: Props) {
+  const { id } = await params
+  const supabase = await createClient()
+
+  const { data: incident, error } = await supabase
+    .from('incidents')
+    .select(`
+      id, reference_no, incident_type, description, severity, status,
+      injury_involved, asset_involved, medical_status, lost_days,
+      reported_at, closed_at,
+      sites (id, name),
+      zones (id, name),
+      reporter:users!reported_by (id, name, email),
+      evidence_files (id, stage, file_url, file_type, uploaded_at)
+    `)
+    .eq('id', id)
+    .eq('evidence_files.deleted', false)
+    .single()
+
+  if (error || !incident) notFound()
+
+  return (
+    <main className="max-w-3xl mx-auto px-4 py-6">
+      <Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline mb-4 inline-block">
+        ← Back to inbox
+      </Link>
+      <IncidentDetail incident={incident as any} />
+    </main>
+  )
+}

app/(protected)/supervisor/incidents/[id]/page.tsx

@@ -0,0 +1,41 @@
+export const dynamic = 'force-dynamic'
+
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { IncidentDetail } from '@/components/incidents/incident-detail'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function SupervisorIncidentDetailPage({ params }: Props) {
+  const { id } = await params
+  const supabase = await createClient()
+
+  const { data: incident, error } = await supabase
+    .from('incidents')
+    .select(`
+      id, reference_no, incident_type, description, severity, status,
+      injury_involved, asset_involved, medical_status, lost_days,
+      reported_at, closed_at,
+      sites (id, name),
+      zones (id, name),
+      reporter:users!reported_by (id, name, email),
+      evidence_files (id, stage, file_url, file_type, uploaded_at)
+    `)
+    .eq('id', id)
+    .eq('evidence_files.deleted', false)
+    .single()
+
+  if (error || !incident) notFound()
+
+  return (
+    <main className="max-w-3xl mx-auto px-4 py-6">
+      <Link href="/supervisor/incidents" className="text-sm text-blue-600 hover:underline mb-4 inline-block">
+        ← Back to inbox
+      </Link>
+      <IncidentDetail incident={incident as any} />
+    </main>
+  )
+}

components/incidents/evidence-gallery.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import type { EvidenceStage } from '@/lib/supabase/storage'
+
+type EvidenceFile = {
+  id: string
+  stage: string
+  file_url: string
+  file_type: string
+  uploaded_at: string
+}
+
+interface Props {
+  files: EvidenceFile[]
+  stage?: EvidenceStage
+}
+
+function isImage(type: string) { return type.startsWith('image/') }
+function isVideo(type: string) { return type.startsWith('video/') }
+
+export function EvidenceGallery({ files, stage }: Props) {
+  const filtered = stage ? files.filter(f => f.stage === stage) : files
+  if (filtered.length === 0) return <p className="text-sm text-gray-400">No files for this stage</p>
+
+  return (
+    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+      {filtered.map(file => (
+        <a
+          key={file.id}
+          href={file.file_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block rounded-lg overflow-hidden bg-gray-100 aspect-square hover:opacity-90 transition-opacity"
+        >
+          {isImage(file.file_type) ? (
+            <img src={file.file_url} alt="Evidence" className="w-full h-full object-cover" />
+          ) : isVideo(file.file_type) ? (
+            <div className="w-full h-full flex items-center justify-center text-3xl">🎥</div>
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-3xl">📄</div>
+          )}
+        </a>
+      ))}
+    </div>
+  )
+}

components/incidents/incident-detail.tsx

@@ -0,0 +1,116 @@
+import { EvidenceGallery } from './evidence-gallery'
+
+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',
+}
+
+const MEDICAL_LABELS: Record<string, string> = {
+  none: 'None',
+  first_aid: 'First Aid',
+  medical_treatment: 'Medical Treatment',
+  lti: 'Lost Time Injury (LTI)',
+}
+
+type Incident = {
+  id: string
+  reference_no: string | null
+  incident_type: string
+  description: string
+  status: string
+  severity: number | null
+  injury_involved: boolean
+  asset_involved: boolean
+  medical_status: string | null
+  lost_days: number | null
+  reported_at: string
+  closed_at: string | null
+  sites: { id: string; name: string } | null
+  zones: { id: string; name: string } | null
+  reporter: { id: string; name: string; email: string } | null
+  evidence_files: Array<{
+    id: string
+    stage: string
+    file_url: string
+    file_type: string
+    uploaded_at: string
+  }>
+}
+
+interface Props {
+  incident: Incident
+}
+
+function Field({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div>
+      <dt className="text-xs text-gray-500 uppercase tracking-wide">{label}</dt>
+      <dd className="text-sm text-gray-900 mt-0.5">{value ?? '—'}</dd>
+    </div>
+  )
+}
+
+export function IncidentDetail({ incident }: Props) {
+  const reportStageFiles = incident.evidence_files.filter(f => f.stage === 'report')
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white rounded-xl shadow-sm p-5">
+        <div className="flex items-start justify-between mb-4">
+          <div>
+            <h1 className="text-xl font-bold text-gray-900 font-mono">
+              {incident.reference_no ?? 'Pending reference'}
+            </h1>
+            <p className="text-sm text-gray-600 mt-0.5">{TYPE_LABELS[incident.incident_type] ?? incident.incident_type}</p>
+          </div>
+          <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${STATUS_COLORS[incident.status] ?? 'bg-gray-100'}`}>
+            {incident.status.replace(/_/g, ' ').toUpperCase()}
+          </span>
+        </div>
+
+        <dl className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+          <Field label="Site" value={incident.sites?.name} />
+          <Field label="Zone" value={incident.zones?.name} />
+          <Field label="Reported by" value={incident.reporter?.name} />
+          <Field label="Reported at" value={new Date(incident.reported_at).toLocaleString('en-MY', { timeZone: 'Asia/Kuala_Lumpur' })} />
+          <Field label="Severity" value={incident.severity ? `Level ${incident.severity}` : 'Not yet assigned'} />
+          {incident.injury_involved && (
+            <Field label="Medical status" value={MEDICAL_LABELS[incident.medical_status ?? 'none']} />
+          )}
+          {incident.injury_involved && incident.lost_days != null && (
+            <Field label="Lost days" value={`${incident.lost_days} day(s)`} />
+          )}
+        </dl>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm p-5">
+        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-2">Description</h2>
+        <p className="text-sm text-gray-800 leading-relaxed whitespace-pre-wrap">{incident.description}</p>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm p-5">
+        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">
+          Evidence — Report Stage
+          <span className="ml-2 text-gray-400 font-normal normal-case">
+            {reportStageFiles.length} file{reportStageFiles.length !== 1 ? 's' : ''}
+          </span>
+        </h2>
+        <EvidenceGallery files={incident.evidence_files} stage="report" />
+      </div>
+    </div>
+  )
+}

tests/components/incidents/incident-detail.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { IncidentDetail } from '@/components/incidents/incident-detail'
+
+const mockIncident = {
+  id: 'inc-001',
+  reference_no: 'SCW1-202607-0001',
+  incident_type: 'near_miss',
+  description: 'Forklift nearly hit a pedestrian in Dock A aisle near the charging station.',
+  status: 'reported',
+  severity: null,
+  injury_involved: false,
+  asset_involved: false,
+  medical_status: null,
+  lost_days: null,
+  reported_at: '2026-07-10T09:00:00Z',
+  closed_at: null,
+  sites: { id: 'site-001', name: 'SCW1' },
+  zones: { id: 'zone-001', name: 'Dock A' },
+  reporter: { id: 'user-001', name: 'John Doe', email: 'john@example.com' },
+  evidence_files: [
+    {
+      id: 'ev-001',
+      stage: 'report',
+      file_url: 'https://example.com/photo.jpg',
+      file_type: 'image/jpeg',
+      uploaded_at: '2026-07-10T09:01:00Z',
+    },
+  ],
+}
+
+describe('IncidentDetail', () => {
+  it('renders reference number', () => {
+    render(<IncidentDetail incident={mockIncident as any} />)
+    expect(screen.getByText('SCW1-202607-0001')).toBeTruthy()
+  })
+
+  it('renders description', () => {
+    render(<IncidentDetail incident={mockIncident as any} />)
+    expect(screen.getByText(/Forklift nearly hit/)).toBeTruthy()
+  })
+
+  it('renders reported by', () => {
+    render(<IncidentDetail incident={mockIncident as any} />)
+    expect(screen.getByText(/John Doe/)).toBeTruthy()
+  })
+
+  it('renders evidence count', () => {
+    render(<IncidentDetail incident={mockIncident as any} />)
+    expect(screen.getByText(/1 file/i)).toBeTruthy()
+  })
+})