82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
'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>
|
|
)
|
|
}
|