feat: sticky incident header with top-positioned action buttons (fix #5)

2026-07-12 16:44:42 +08:00
parent f6064b9580
commit c0ec6660ef
6 changed files with 334 additions and 235 deletions
@@ -0,0 +1,81 @@
+'use client'
+
+import Link from 'next/link'
+
+interface Props {
+  incidentId: string
+  referenceNo: string | null
+  status: string
+  backHref: string
+  canTriage?: boolean
+  canInvestigate?: boolean
+  canAddCapa?: boolean
+}
+
+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 STATUS_LABELS: Record<string, string> = {
+  reported: 'Reported',
+  triaged: 'Triaged',
+  investigating: 'Investigating',
+  capa_pending: 'CAPA Pending',
+  verification: 'Verification',
+  closed: 'Closed',
+}
+
+export function IncidentHeader({
+  incidentId, referenceNo, status, backHref,
+  canTriage, canInvestigate, canAddCapa,
+}: Props) {
+  return (
+    <div className="sticky top-0 z-30 bg-white border-b border-gray-200 shadow-sm">
+      <div className="max-w-3xl mx-auto px-4 py-3 flex items-center justify-between gap-4 flex-wrap">
+        <div className="flex items-center gap-3 min-w-0">
+          <Link href={backHref} className="text-sm text-gray-500 hover:text-gray-700 shrink-0">
+            ← Incidents
+          </Link>
+          <span className="text-gray-300 shrink-0">|</span>
+          <span className="text-sm font-mono font-semibold text-gray-900 truncate">
+            {referenceNo ?? 'Pending'}
+          </span>
+          <span className={`text-xs px-2 py-0.5 rounded-full font-medium shrink-0 ${STATUS_COLORS[status] ?? 'bg-gray-100 text-gray-800'}`}>
+            {STATUS_LABELS[status] ?? status.replace(/_/g, ' ')}
+          </span>
+        </div>
+        <div className="flex gap-2 shrink-0">
+          {canTriage && (
+            <Link
+              href={`/hse/incidents/${incidentId}/triage`}
+              className="text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700"
+            >
+              Triage
+            </Link>
+          )}
+          {canInvestigate && (
+            <Link
+              href={`/hse/incidents/${incidentId}/investigation`}
+              className="text-xs px-3 py-1.5 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
+            >
+              Investigate
+            </Link>
+          )}
+          {canAddCapa && (
+            <Link
+              href={`/hse/incidents/${incidentId}/capa/new`}
+              className="text-xs px-3 py-1.5 bg-amber-600 text-white rounded-lg font-medium hover:bg-amber-700"
+            >
+              Add CAPA
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}