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
2026-07-11 07:40:06 +08:00
parent 2f2018f27a
commit 713556631b
5 changed files with 296 additions and 0 deletions
@@ -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>
+  )
+}
@@ -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>
+  )
+}