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

app/(protected)/hse/incidents/[id]/page.tsx

@@ -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>
+    </>
   )
 }

app/(protected)/hse/incidents/page.tsx

@@ -3,20 +3,21 @@ export const dynamic = 'force-dynamic'
 import { createClient } from '@/lib/supabase/server'
 import { IncidentList, type Incident } from '@/components/incidents/incident-list'
 import { Pagination } from '@/components/incidents/pagination'
+import { IncidentFilters, type SiteOption } from '@/components/incidents/incident-filters'
 
 const PAGE_SIZE = 25
 
 export default async function HseInboxPage({
   searchParams,
 }: {
-  searchParams: Promise<{ page?: string }>
+  searchParams: Promise<{ page?: string; q?: string; status?: string; type?: string; site_id?: string }>
 }) {
   const supabase = await createClient()
   const params = await searchParams
   const page = Math.max(1, Number.parseInt(params.page ?? '1', 10) || 1)
   const from = (page - 1) * PAGE_SIZE
 
-  const { data: incidents, count } = await supabase
+  let query = supabase
     .from('incidents')
     .select(`
       id, reference_no, incident_type, status, severity, reported_at,
@@ -25,14 +26,28 @@ export default async function HseInboxPage({
       reporter:users!reported_by (name)
     `, { count: 'exact' })
     .order('reported_at', { ascending: false })
-    .range(from, from + PAGE_SIZE - 1)
+
+  if (params.q) {
+    query = query.or(`reference_no.ilike.%${params.q}%,description.ilike.%${params.q}%`)
+  }
+  if (params.status) query = query.eq('status', params.status)
+  if (params.type) query = query.eq('incident_type', params.type)
+  if (params.site_id) query = query.eq('site_id', params.site_id)
+
+  const [{ data: incidents, count }, { data: sites }] = await Promise.all([
+    query.range(from, from + PAGE_SIZE - 1),
+    supabase.from('sites').select('id, name').order('name'),
+  ])
+
+  const siteOptions: SiteOption[] = (sites ?? []).map(s => ({ id: s.id, name: s.name }))
 
   return (
     <main className="max-w-4xl mx-auto px-4 py-6">
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold text-gray-900">Incident Inbox</h1>
         <span className="text-sm text-gray-500">{count ?? incidents?.length ?? 0} incidents</span>
       </div>
+      <IncidentFilters sites={siteOptions} />
       <IncidentList incidents={(incidents ?? []) as unknown as Incident[]} basePath="/hse" />
       <Pagination page={page} pageSize={PAGE_SIZE} total={count ?? 0} href="/hse/incidents" />
     </main>