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,15 +139,19 @@ 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} />
+
+      {/* Overview tab */}
+      {(tab === 'overview') && (
+        <>
           {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">
@@ -159,7 +164,6 @@ export default async function HseDashboardPage() {
             </div>
           )}
 
-      {/* Summary stats */}
           <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
             <StatCard label="Total Incidents" value={total} />
             <StatCard label="Open" value={open} accent="yellow" sub="awaiting action" />
@@ -172,15 +176,14 @@ export default async function HseDashboardPage() {
             />
           </div>
 
-      {/* Leading vs lagging — last 30 days */}
+          <div className="bg-white rounded-xl shadow-sm p-5">
-      <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
+            <h2 className="text-sm font-semibold text-gray-900 mb-1">
-        <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 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>
@@ -197,41 +200,40 @@ export default async function HseDashboardPage() {
               )}
             </div>
           </div>
+        </>
+      )}
 
-      <RiskFlagsPanel />
+      {/* Trends tab */}
-
+      {tab === 'trends' && (
-      {/* 12-month incident trend */}
+        <>
           <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">
+            <h2 className="text-sm font-semibold text-gray-900 mb-1">
               Incident Trend — Last 12 Months
             </h2>
             <p className="text-xs text-gray-400 mb-4">
               Blue: leading (hazard + near miss) · Red: lagging (injury) · Grey: other
             </p>
-        <div className="flex items-end gap-1 h-32">
+            <div className="flex items-end gap-1 h-48">
               {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 flex flex-col-reverse" style={{ height: '192px' }}>
-                  <div className="w-full bg-blue-400" style={{ height: `${(m.leading / monthlyMax) * 100}px` }} />
+                      <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) * 100}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) * 100}px` }} />
+                      <div className="w-full bg-gray-300" style={{ height: `${(Math.max(0, other) / monthlyMax) * 192}px` }} />
                     </div>
-                <span className="text-[10px] text-gray-400">{m.label}</span>
+                    <span className="text-xs text-gray-400">{m.label}</span>
-                <span className="text-[10px] font-semibold text-gray-600">{m.total || ''}</span>
+                    <span className="text-xs 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">
+            <div className="bg-white rounded-xl shadow-sm p-5">
-          <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">
+              <h2 className="text-sm font-semibold text-gray-900 mb-4">Top Root Causes</h2>
-            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">
@@ -245,11 +247,15 @@ export default async function HseDashboardPage() {
               </ol>
             </div>
           )}
+        </>
+      )}
 
-      {/* Zone heatmap — last 90 days */}
+      {/* 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-700 uppercase tracking-wide 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">
@@ -261,7 +267,7 @@ export default async function HseDashboardPage() {
                         className="h-3 rounded-full"
                         style={{
                           width: `${(count / zoneMax) * 100}%`,
-                      backgroundColor: `hsl(${Math.round((1 - count / zoneMax) * 120)}, 70%, 50%)`,
+                          backgroundColor: `hsl(220, 70%, ${Math.max(30, 80 - Math.round((count / zoneMax) * 50))}%)`,
                         }}
                       />
                     </div>
@@ -272,9 +278,8 @@ export default async function HseDashboardPage() {
             </div>
           )}
 
-      {/* Incident type breakdown */}
           <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">By Incident Type</h2>
+            <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">
@@ -294,9 +299,8 @@ export default async function HseDashboardPage() {
             </div>
           </div>
 
-      {/* By site */}
           <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">By Site</h2>
             <div className="space-y-2">
               {by_site.map(({ name, count }) => (
                 <div key={name} className="flex items-center justify-between">
@@ -307,6 +311,11 @@ export default async function HseDashboardPage() {
               {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,51 +35,29 @@ export default async function HseIncidentDetailPage({ params }: Props) {
 
   const status = (incident as { status: string }).status
 
-  return (
+  const needsJkkp = Boolean(
-    <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} />
-
-      {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">
+
+  return (
+    <>
+      <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} />
+
+        {needsJkkp && (
+          <div className="mt-4 flex gap-3 flex-wrap">
             <a
               href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp6`}
               target="_blank"
@@ -99,5 +77,6 @@ export default async function HseIncidentDetailPage({ params }: Props) {
         <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>
+  )
+}