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

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>