feat: reporter clickable rows, CAPA owner action buttons, triage segmented severity

2026-07-12 16:42:49 +08:00
parent 180b0dc0a3
commit f6064b9580
11 changed files with 694 additions and 16 deletions
@@ -0,0 +1,107 @@
+export const dynamic = 'force-dynamic'
+
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { redirect, notFound } from 'next/navigation'
+
+const STATUS_LABELS: Record<string, string> = {
+  reported: 'Reported', triaged: 'Triaged', investigating: 'Investigating',
+  capa_pending: 'CAPA Pending', verification: 'Verification', closed: 'Closed',
+}
+const STATUS_COLORS: Record<string, string> = {
+  reported: 'bg-gray-100 text-gray-600', triaged: 'bg-yellow-100 text-yellow-800',
+  investigating: 'bg-blue-100 text-blue-700', capa_pending: 'bg-orange-100 text-orange-700',
+  verification: 'bg-purple-100 text-purple-700', closed: 'bg-green-100 text-green-700',
+}
+
+export default async function ReporterIncidentDetail({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const { data: inc } = await supabase
+    .from('incidents')
+    .select(`
+      id, reference_no, incident_type, status, severity, reported_at, closed_at,
+      description, injury_involved, medical_status, lost_days,
+      sites (name), zones (name),
+      capa_actions (id, description, status, due_date)
+    `)
+    .eq('id', id)
+    .eq('reported_by', user.id)
+    .single()
+
+  if (!inc) notFound()
+
+  const siteName = (inc.sites as unknown as { name: string } | null)?.name
+  const zoneName = (inc.zones as unknown as { name: string } | null)?.name
+  const capas = (inc.capa_actions as unknown as Array<{ id: string; description: string; status: string; due_date: string | null }>) ?? []
+
+  return (
+    <main className="max-w-2xl mx-auto px-4 py-6 space-y-4">
+      <div className="flex items-center gap-2 mb-2">
+        <Link href="/reporter" className="text-sm text-blue-600 hover:underline">← My Reports</Link>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm p-5">
+        <div className="flex items-start justify-between gap-3 mb-4">
+          <div>
+            <h1 className="text-lg font-bold text-gray-900">{inc.reference_no ?? inc.id.slice(0, 8)}</h1>
+            <p className="text-sm text-gray-500 capitalize">{inc.incident_type?.replace(/_/g, ' ')}</p>
+          </div>
+          <span className={`text-xs rounded-full px-2 py-1 shrink-0 ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-600'}`}>
+            {STATUS_LABELS[inc.status] ?? inc.status}
+          </span>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3 text-sm mb-4">
+          {siteName && <div><p className="text-xs text-gray-500">Site</p><p className="font-medium">{siteName}</p></div>}
+          {zoneName && <div><p className="text-xs text-gray-500">Zone</p><p className="font-medium">{zoneName}</p></div>}
+          {inc.severity && <div><p className="text-xs text-gray-500">Severity</p><p className="font-medium">{inc.severity} / 5</p></div>}
+          {inc.reported_at && (
+            <div>
+              <p className="text-xs text-gray-500">Reported</p>
+              <p className="font-medium">{new Date(inc.reported_at as string).toLocaleDateString('en-MY')}</p>
+            </div>
+          )}
+          {inc.closed_at && (
+            <div>
+              <p className="text-xs text-gray-500">Closed</p>
+              <p className="font-medium">{new Date(inc.closed_at as string).toLocaleDateString('en-MY')}</p>
+            </div>
+          )}
+        </div>
+
+        {inc.description && (
+          <div className="border-t border-gray-100 pt-4">
+            <p className="text-xs text-gray-500 mb-1">Description</p>
+            <p className="text-sm text-gray-800 whitespace-pre-line">{inc.description}</p>
+          </div>
+        )}
+      </div>
+
+      {capas.length > 0 && (
+        <div className="bg-white rounded-xl shadow-sm p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-3">Corrective Actions ({capas.length})</h2>
+          <div className="space-y-2">
+            {capas.map(c => (
+              <div key={c.id} className="flex items-start justify-between gap-3 text-sm">
+                <p className="text-gray-700 flex-1">{c.description}</p>
+                <span className={`text-xs rounded-full px-2 py-0.5 shrink-0 ${
+                  c.status === 'verified' ? 'bg-green-100 text-green-700' :
+                  c.status === 'pending_verification' ? 'bg-purple-100 text-purple-700' :
+                  'bg-gray-100 text-gray-600'
+                }`}>{c.status.replace(/_/g, ' ')}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </main>
+  )
+}