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

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

@@ -5,6 +5,7 @@ import { createClient } from '@/lib/supabase/server'
 import { StatCard } from '@/components/dashboard/stat-card'
 import { bucketIncidentsByMonth, topRootCauses } from '@/lib/dashboard/trends'
 import { RiskFlagsPanel } from '@/components/dashboard/risk-flags-panel'
+import { DashboardTabs } from '@/components/dashboard/dashboard-tabs'
 
 const TYPE_LABELS: Record<string, string> = {
   injury: 'Injury',
@@ -16,8 +17,14 @@ const TYPE_LABELS: Record<string, string> = {
   fire: 'Fire',
 }
 
-export default async function HseDashboardPage() {
+export default async function HseDashboardPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ tab?: string }>
+}) {
   const supabase = await createClient()
+  const params = await searchParams
+  const tab = params.tab ?? 'overview'
 
   const now = new Date()
   const thirtyDaysAgo = new Date(now)
@@ -63,7 +70,6 @@ export default async function HseDashboardPage() {
       .not('root_cause_summary', 'is', null),
   ])
 
-  // --- Existing metrics ---
   const rows = incidents ?? []
   const total = rows.length
   const closed = rows.filter(r => r.status === 'closed').length
@@ -83,12 +89,10 @@ export default async function HseDashboardPage() {
     .map(([name, count]) => ({ name, count }))
     .sort((a, b) => b.count - a.count)
 
-  // --- Leading / lagging (last 30 days) ---
   const recent = recentIncidents ?? []
   const leadingCount = recent.filter(r => ['hazard', 'near_miss'].includes(r.incident_type)).length
   const laggingCount = recent.filter(r => r.incident_type === 'injury').length
 
-  // --- Zone heatmap (last 90 days) ---
   const zoneMap: Record<string, number> = {}
   for (const r of zoneIncidents ?? []) {
     const name = (r.zones as unknown as { name: string } | null)?.name ?? 'Unknown'
@@ -100,7 +104,6 @@ export default async function HseDashboardPage() {
     .slice(0, 10)
   const zoneMax = by_zone[0]?.count ?? 1
 
-  // --- CAPA on-time rate ---
   const capas = completedCapas ?? []
   const onTime = capas.filter(c => {
     const due = new Date(c.due_date)
@@ -115,17 +118,15 @@ export default async function HseDashboardPage() {
     ? Math.round((onTime.length / capas.length) * 100)
     : null
 
-  // --- DOSH pending filings ---
   const doshPendingCount = doshPendingRows?.length ?? 0
 
-  // --- 12-month trend + top root causes ---
   const monthly = bucketIncidentsByMonth(yearIncidents ?? [], 12, now)
   const monthlyMax = Math.max(1, ...monthly.map(m => m.total))
   const rootCauses = topRootCauses(investigations ?? [])
 
   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">Dashboard</h1>
         <div className="flex gap-3">
           <a
@@ -138,175 +139,183 @@ export default async function HseDashboardPage() {
             href={`/ims/api/reports/jkkp8?year=${now.getFullYear()}`}
             className="text-sm text-gray-500 hover:text-gray-700 border border-gray-200 rounded-lg px-3 py-1.5"
           >
-            JKKP 8 Register
+            JKKP 8
           </a>
           <Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline">
-            View all incidents →
+            All incidents →
           </Link>
         </div>
       </div>
 
-      {/* JKKP 8 statutory deadline reminder — register due to DOSH before 31 January */}
+      <DashboardTabs activeTab={tab} />
-      {now.getMonth() === 0 && (
-        <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
-          <p className="text-sm text-amber-800">
-            <strong>JKKP 8 annual register due:</strong> the {now.getFullYear() - 1} register must be
-            submitted to DOSH before 31 January {now.getFullYear()}.{' '}
-            <a href={`/ims/api/reports/jkkp8?year=${now.getFullYear() - 1}`} className="underline font-medium">
-              Download {now.getFullYear() - 1} register
-            </a>
-          </p>
-        </div>
-      )}
 
-      {/* Summary stats */}
+      {/* Overview tab */}
-      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
+      {(tab === 'overview') && (
-        <StatCard label="Total Incidents" value={total} />
+        <>
-        <StatCard label="Open" value={open} accent="yellow" sub="awaiting action" />
+          {now.getMonth() === 0 && (
-        <StatCard label="Closed" value={closed} accent="green" sub="resolved" />
+            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
-        <StatCard
+              <p className="text-sm text-amber-800">
-          label="DOSH Pending"
+                <strong>JKKP 8 annual register due:</strong> the {now.getFullYear() - 1} register must be
-          value={doshPendingCount}
+                submitted to DOSH before 31 January {now.getFullYear()}.{' '}
-          accent={doshPendingCount > 0 ? 'yellow' : 'green'}
+                <a href={`/ims/api/reports/jkkp8?year=${now.getFullYear() - 1}`} className="underline font-medium">
-          sub="filings outstanding"
+                  Download {now.getFullYear() - 1} register
-        />
+                </a>
-      </div>
+              </p>
-
-      {/* Leading vs lagging — last 30 days */}
-      <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
-        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-1">
-          Leading vs Lagging — Last 30 Days
-        </h2>
-        <p className="text-xs text-gray-400 mb-4">
-          Leading: hazard + near-miss reports (predict risk) · Lagging: injuries (past harm)
-        </p>
-        <div className="flex gap-6">
-          <div className="flex-1 text-center bg-blue-50 rounded-lg p-4">
-            <p className="text-3xl font-bold text-blue-600">{leadingCount}</p>
-            <p className="text-xs text-blue-700 mt-1">Leading (Hazards + Near Misses)</p>
-          </div>
-          <div className="flex-1 text-center bg-red-50 rounded-lg p-4">
-            <p className="text-3xl font-bold text-red-600">{laggingCount}</p>
-            <p className="text-xs text-red-700 mt-1">Lagging (Injuries)</p>
-          </div>
-          {capaOnTimeRate !== null && (
-            <div className="flex-1 text-center bg-green-50 rounded-lg p-4">
-              <p className="text-3xl font-bold text-green-600">{capaOnTimeRate}%</p>
-              <p className="text-xs text-green-700 mt-1">CAPA On-Time Rate</p>
             </div>
           )}
-        </div>
-      </div>
 
-      <RiskFlagsPanel />
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
-
+            <StatCard label="Total Incidents" value={total} />
-      {/* 12-month incident trend */}
+            <StatCard label="Open" value={open} accent="yellow" sub="awaiting action" />
-      <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
+            <StatCard label="Closed" value={closed} accent="green" sub="resolved" />
-        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-1">
+            <StatCard
-          Incident Trend — Last 12 Months
+              label="DOSH Pending"
-        </h2>
+              value={doshPendingCount}
-        <p className="text-xs text-gray-400 mb-4">
+              accent={doshPendingCount > 0 ? 'yellow' : 'green'}
-          Blue: leading (hazard + near miss) · Red: lagging (injury) · Grey: other
+              sub="filings outstanding"
-        </p>
+            />
-        <div className="flex items-end gap-1 h-32">
-          {monthly.map(m => {
-            const other = m.total - m.leading - m.lagging
-            return (
-              <div key={m.month} className="flex-1 flex flex-col items-center gap-1">
-                <div className="w-full flex flex-col-reverse" style={{ height: '100px' }}>
-                  <div className="w-full bg-blue-400" style={{ height: `${(m.leading / monthlyMax) * 100}px` }} />
-                  <div className="w-full bg-red-400" style={{ height: `${(m.lagging / monthlyMax) * 100}px` }} />
-                  <div className="w-full bg-gray-300" style={{ height: `${(Math.max(0, other) / monthlyMax) * 100}px` }} />
-                </div>
-                <span className="text-[10px] text-gray-400">{m.label}</span>
-                <span className="text-[10px] font-semibold text-gray-600">{m.total || ''}</span>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-
-      {/* Top root causes */}
-      {rootCauses.length > 0 && (
-        <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
-          <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">
-            Top Root Causes
-          </h2>
-          <ol className="space-y-2">
-            {rootCauses.map((rc, i) => (
-              <li key={rc.cause} className="flex items-start justify-between gap-3">
-                <span className="text-sm text-gray-700">
-                  <span className="text-gray-400 mr-2">{i + 1}.</span>
-                  {rc.cause}
-                </span>
-                <span className="text-sm font-semibold text-gray-900 shrink-0">{rc.count}×</span>
-              </li>
-            ))}
-          </ol>
-        </div>
-      )}
-
-      {/* Zone heatmap — last 90 days */}
-      {by_zone.length > 0 && (
-        <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
-          <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">
-            Zone Incident Heatmap — Last 90 Days
-          </h2>
-          <div className="space-y-2">
-            {by_zone.map(({ name, count }) => (
-              <div key={name} className="flex items-center gap-3">
-                <span className="text-sm text-gray-600 w-36 shrink-0 truncate">{name}</span>
-                <div className="flex-1 bg-gray-100 rounded-full h-3">
-                  <div
-                    className="h-3 rounded-full"
-                    style={{
-                      width: `${(count / zoneMax) * 100}%`,
-                      backgroundColor: `hsl(${Math.round((1 - count / zoneMax) * 120)}, 70%, 50%)`,
-                    }}
-                  />
-                </div>
-                <span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
-              </div>
-            ))}
           </div>
-        </div>
+
+          <div className="bg-white rounded-xl shadow-sm p-5">
+            <h2 className="text-sm font-semibold text-gray-900 mb-1">
+              Leading vs Lagging — Last 30 Days
+            </h2>
+            <p className="text-xs text-gray-400 mb-4">
+              Leading: hazard + near-miss reports (predict risk) · Lagging: injuries (past harm)
+            </p>
+            <div className="flex gap-4">
+              <div className="flex-1 text-center bg-blue-50 rounded-lg p-4">
+                <p className="text-3xl font-bold text-blue-600">{leadingCount}</p>
+                <p className="text-xs text-blue-700 mt-1">Leading (Hazards + Near Misses)</p>
+              </div>
+              <div className="flex-1 text-center bg-red-50 rounded-lg p-4">
+                <p className="text-3xl font-bold text-red-600">{laggingCount}</p>
+                <p className="text-xs text-red-700 mt-1">Lagging (Injuries)</p>
+              </div>
+              {capaOnTimeRate !== null && (
+                <div className="flex-1 text-center bg-green-50 rounded-lg p-4">
+                  <p className="text-3xl font-bold text-green-600">{capaOnTimeRate}%</p>
+                  <p className="text-xs text-green-700 mt-1">CAPA On-Time Rate</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </>
       )}
 
-      {/* Incident type breakdown */}
+      {/* Trends tab */}
-      <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
+      {tab === 'trends' && (
-        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">By Incident Type</h2>
+        <>
-        <div className="space-y-2">
+          <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
-          {Object.entries(by_type).sort((a, b) => b[1] - a[1]).map(([type, count]) => (
+            <h2 className="text-sm font-semibold text-gray-900 mb-1">
-            <div key={type} className="flex items-center gap-3">
+              Incident Trend — Last 12 Months
-              <span className="text-sm text-gray-600 w-32 shrink-0">{TYPE_LABELS[type] ?? type}</span>
+            </h2>
-              <div className="flex-1 bg-gray-100 rounded-full h-2">
+            <p className="text-xs text-gray-400 mb-4">
-                <div
+              Blue: leading (hazard + near miss) · Red: lagging (injury) · Grey: other
-                  className="bg-blue-500 h-2 rounded-full"
+            </p>
-                  style={{ width: total > 0 ? `${(count / total) * 100}%` : '0%' }}
+            <div className="flex items-end gap-1 h-48">
-                />
+              {monthly.map(m => {
-              </div>
+                const other = m.total - m.leading - m.lagging
-              <span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
+                return (
+                  <div key={m.month} className="flex-1 flex flex-col items-center gap-1">
+                    <div className="w-full flex flex-col-reverse" style={{ height: '192px' }}>
+                      <div className="w-full bg-blue-400" style={{ height: `${(m.leading / monthlyMax) * 192}px` }} />
+                      <div className="w-full bg-red-400" style={{ height: `${(m.lagging / monthlyMax) * 192}px` }} />
+                      <div className="w-full bg-gray-300" style={{ height: `${(Math.max(0, other) / monthlyMax) * 192}px` }} />
+                    </div>
+                    <span className="text-xs text-gray-400">{m.label}</span>
+                    <span className="text-xs font-semibold text-gray-600">{m.total || ''}</span>
+                  </div>
+                )
+              })}
             </div>
-          ))}
+          </div>
-          {Object.keys(by_type).length === 0 && (
-            <p className="text-sm text-gray-400">No incidents yet</p>
-          )}
-        </div>
-      </div>
 
-      {/* By site */}
+          {rootCauses.length > 0 && (
-      <div className="bg-white rounded-xl shadow-sm p-5">
+            <div className="bg-white rounded-xl shadow-sm p-5">
-        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">By Site</h2>
+              <h2 className="text-sm font-semibold text-gray-900 mb-4">Top Root Causes</h2>
-        <div className="space-y-2">
+              <ol className="space-y-2">
-          {by_site.map(({ name, count }) => (
+                {rootCauses.map((rc, i) => (
-            <div key={name} className="flex items-center justify-between">
+                  <li key={rc.cause} className="flex items-start justify-between gap-3">
-              <span className="text-sm text-gray-600">{name}</span>
+                    <span className="text-sm text-gray-700">
-              <span className="text-sm font-semibold text-gray-900">{count}</span>
+                      <span className="text-gray-400 mr-2">{i + 1}.</span>
+                      {rc.cause}
+                    </span>
+                    <span className="text-sm font-semibold text-gray-900 shrink-0">{rc.count}×</span>
+                  </li>
+                ))}
+              </ol>
             </div>
-          ))}
+          )}
-          {by_site.length === 0 && <p className="text-sm text-gray-400">No data</p>}
+        </>
-        </div>
+      )}
-      </div>
+
+      {/* Zones & Types tab */}
+      {tab === 'zones' && (
+        <>
+          {by_zone.length > 0 && (
+            <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
+              <h2 className="text-sm font-semibold text-gray-900 mb-4">
+                Zone Incident Heatmap — Last 90 Days
+              </h2>
+              <div className="space-y-2">
+                {by_zone.map(({ name, count }) => (
+                  <div key={name} className="flex items-center gap-3">
+                    <span className="text-sm text-gray-600 w-36 shrink-0 truncate">{name}</span>
+                    <div className="flex-1 bg-gray-100 rounded-full h-3">
+                      <div
+                        className="h-3 rounded-full"
+                        style={{
+                          width: `${(count / zoneMax) * 100}%`,
+                          backgroundColor: `hsl(220, 70%, ${Math.max(30, 80 - Math.round((count / zoneMax) * 50))}%)`,
+                        }}
+                      />
+                    </div>
+                    <span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
+            <h2 className="text-sm font-semibold text-gray-900 mb-4">By Incident Type</h2>
+            <div className="space-y-2">
+              {Object.entries(by_type).sort((a, b) => b[1] - a[1]).map(([type, count]) => (
+                <div key={type} className="flex items-center gap-3">
+                  <span className="text-sm text-gray-600 w-32 shrink-0">{TYPE_LABELS[type] ?? type}</span>
+                  <div className="flex-1 bg-gray-100 rounded-full h-2">
+                    <div
+                      className="bg-blue-500 h-2 rounded-full"
+                      style={{ width: total > 0 ? `${(count / total) * 100}%` : '0%' }}
+                    />
+                  </div>
+                  <span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
+                </div>
+              ))}
+              {Object.keys(by_type).length === 0 && (
+                <p className="text-sm text-gray-400">No incidents yet</p>
+              )}
+            </div>
+          </div>
+
+          <div className="bg-white rounded-xl shadow-sm p-5">
+            <h2 className="text-sm font-semibold text-gray-900 mb-4">By Site</h2>
+            <div className="space-y-2">
+              {by_site.map(({ name, count }) => (
+                <div key={name} className="flex items-center justify-between">
+                  <span className="text-sm text-gray-600">{name}</span>
+                  <span className="text-sm font-semibold text-gray-900">{count}</span>
+                </div>
+              ))}
+              {by_site.length === 0 && <p className="text-sm text-gray-400">No data</p>}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* AI Insights tab */}
+      {tab === 'ai' && <RiskFlagsPanel />}
     </main>
   )
 }

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">
+      <IncidentHeader
-        ← Back to inbox
+        incidentId={id}
-      </Link>
+        referenceNo={(incident as { reference_no: string | null }).reference_no}
-      <IncidentDetail incident={incident as unknown as Incident} />
+        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' && (
+        {needsJkkp && (
-        <div className="mt-6">
+          <div className="mt-4 flex gap-3 flex-wrap">
-          <Link
+            <a
-            href={`/hse/incidents/${id}/triage`}
+              href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp6`}
-            className="inline-block bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700"
+              target="_blank"
-          >
+              className="inline-block bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900"
-            Triage Incident
+            >
-          </Link>
+              Download JKKP 6 (PDF)
-        </div>
+            </a>
-      )}
+            <a
-      {status === 'triaged' && (
+              href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp7`}
-        <div className="mt-6">
+              target="_blank"
-          <Link
+              className="inline-block bg-gray-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-700"
-            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"
+              Download JKKP 7 (PDF)
-          >
+            </a>
-            Start Investigation
+          </div>
-          </Link>
+        )}
-        </div>
+        <ClosurePanel incidentId={id} status={status} canClose canAddAddenda />
-      )}
+        <SimilarIncidentsPanel incidentId={id} />
-      {(['investigating', 'capa_pending'] as string[]).includes(status) && (
+      </main>
-        <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>
   )
 }

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>

app/(protected)/supervisor/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 SupervisorInboxPage({
   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 SupervisorInboxPage({
       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="/supervisor" />
       <Pagination page={page} pageSize={PAGE_SIZE} total={count ?? 0} href="/supervisor/incidents" />
     </main>

components/incidents/incident-detail.tsx

@@ -59,7 +59,7 @@ interface Props {
 function Field({ label, value }: { label: string; value: React.ReactNode }) {
   return (
     <div>
-      <dt className="text-xs text-gray-500 uppercase tracking-wide">{label}</dt>
+      <dt className="text-xs font-medium text-gray-700">{label}</dt>
       <dd className="text-sm text-gray-900 mt-0.5">{value ?? '—'}</dd>
     </div>
   )
@@ -107,12 +107,12 @@ export function IncidentDetail({ incident }: Props) {
       </div>
 
       <div className="bg-white rounded-xl shadow-sm p-5">
-        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-2">Description</h2>
+        <h2 className="text-sm font-semibold text-gray-900 mb-2">Description</h2>
         <p className="text-sm text-gray-800 leading-relaxed whitespace-pre-wrap">{incident.description}</p>
       </div>
 
       <div className="bg-white rounded-xl shadow-sm p-5">
-        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">
+        <h2 className="text-sm font-semibold text-gray-900 mb-3">
           Evidence — Report Stage
           <span className="ml-2 text-gray-400 font-normal normal-case">
             {reportStageFiles.length} file{reportStageFiles.length !== 1 ? 's' : ''}

components/incidents/incident-header.tsx

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