108 lines
4.5 KiB
TypeScript
108 lines
4.5 KiB
TypeScript
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>
|
|
)
|
|
}
|