setia/ims
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
admin
2026-07-12 16:44:42 +08:00
parent f6064b9580
commit c0ec6660ef
6 changed files with 334 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(protected)/hse/incidents/[id]/page.tsx
+42 -63
View File
@@ -1,9 +1,9 @@
export const dynamic = 'force-dynamic'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { createClient } from '@/lib/supabase/server'
import { IncidentDetail, type Incident } from '@/components/incidents/incident-detail'
import { IncidentHeader } from '@/components/incidents/incident-header'
import { SimilarIncidentsPanel } from '@/components/incidents/similar-incidents-panel'
import { ClosurePanel } from '@/components/incidents/closure-panel'
@@ -35,69 +35,48 @@ export default async function HseIncidentDetailPage({ params }: Props) {
const status = (incident as { status: string }).status
const needsJkkp = Boolean(
(incident as { is_fatality?: boolean }).is_fatality ||
(incident as { is_serious_bodily_injury?: boolean }).is_serious_bodily_injury ||
(incident as { is_dangerous_occurrence?: boolean }).is_dangerous_occurrence ||
((incident as { lost_days?: number | null }).lost_days ?? 0) >= 4
)
return (
<main className="max-w-3xl mx-auto px-4 py-6">
<Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline mb-4 inline-block">
← Back to inbox
</Link>
<IncidentDetail incident={incident as unknown as Incident} />
<>
<IncidentHeader
incidentId={id}
referenceNo={(incident as { reference_no: string | null }).reference_no}
status={status}
backHref="/hse/incidents"
canTriage={status === 'reported'}
canInvestigate={status === 'triaged'}
canAddCapa={(['investigating', 'capa_pending'] as string[]).includes(status)}
/>
<main className="max-w-3xl mx-auto px-4 py-6">
<IncidentDetail incident={incident as unknown as Incident} />
{status === 'reported' && (
<div className="mt-6">
<Link
href={`/hse/incidents/${id}/triage`}
className="inline-block bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700"
>
Triage Incident
</Link>
</div>
)}
{status === 'triaged' && (
<div className="mt-6">
<Link
href={`/hse/incidents/${id}/investigation`}
className="inline-block bg-indigo-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-indigo-700"
>
Start Investigation
</Link>
</div>
)}
{(['investigating', 'capa_pending'] as string[]).includes(status) && (
<div className="mt-6">
<Link
href={`/hse/incidents/${id}/capa/new`}
className="inline-block bg-amber-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-amber-700"
>
Add CAPA Action
</Link>
</div>
)}
{Boolean(
(incident as { is_fatality?: boolean }).is_fatality ||
(incident as { is_serious_bodily_injury?: boolean }).is_serious_bodily_injury ||
(incident as { is_dangerous_occurrence?: boolean }).is_dangerous_occurrence ||
((incident as { lost_days?: number | null }).lost_days ?? 0) >= 4
) && (
<div className="mt-4 flex gap-3">
<a
href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp6`}
target="_blank"
className="inline-block bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900"
>
Download JKKP 6 (PDF)
</a>
<a
href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp7`}
target="_blank"
className="inline-block bg-gray-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-700"
>
Download JKKP 7 (PDF)
</a>
</div>
)}
<ClosurePanel incidentId={id} status={status} canClose canAddAddenda />
<SimilarIncidentsPanel incidentId={id} />
</main>
{needsJkkp && (
<div className="mt-4 flex gap-3 flex-wrap">
<a
href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp6`}
target="_blank"
className="inline-block bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900"
>
Download JKKP 6 (PDF)
</a>
<a
href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp7`}
target="_blank"
className="inline-block bg-gray-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-700"
>
Download JKKP 7 (PDF)
</a>
</div>
)}
<ClosurePanel incidentId={id} status={status} canClose canAddAddenda />
<SimilarIncidentsPanel incidentId={id} />
</main>
</>
)
}