feat(db): phase 4 group 6 — server component pages to Drizzle

Converts all 18 server component page files from Supabase client queries
to Drizzle ORM using asAdmin. Adds getSession() + redirect to the three
pages (hse/incidents, hse/incidents/[id], hse/dashboard) that lacked it.
Maps snake_case component prop shapes explicitly where required.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -1,9 +1,11 @@
 export const dynamic = 'force-dynamic'
 
 import Link from 'next/link'
-import { createClient } from '@/lib/supabase/server'
+import { asAdmin } from '@/lib/db/with-user'
 import { redirect, notFound } from 'next/navigation'
 import { getSession } from '@/lib/auth/get-session'
+import { incidents, sites, zones, capaActions } from '@/lib/db/schema'
+import { eq, and } from 'drizzle-orm'
 
 const STATUS_LABELS: Record<string, string> = {
   reported: 'Reported', triaged: 'Triaged', investigating: 'Investigating',
@@ -24,25 +26,41 @@ export default async function ReporterIncidentDetail({
   const session = await getSession()
   if (!session) redirect('/login')
 
-  const supabase = await createClient()
-
-  const { data: inc } = await supabase
-    .from('incidents')
-    .select(`
-      id, reference_no, incident_type, status, severity, reported_at, closed_at,
-      description, injury_involved, medical_status, lost_days,
-      sites (name), zones (name),
-      capa_actions (id, description, status, due_date)
-    `)
-    .eq('id', id)
-    .eq('reported_by', session.sub)
-    .single()
+  const [inc] = await asAdmin(db =>
+    db.select({
+      id: incidents.id,
+      referenceNo: incidents.referenceNo,
+      incidentType: incidents.incidentType,
+      status: incidents.status,
+      severity: incidents.severity,
+      reportedAt: incidents.reportedAt,
+      closedAt: incidents.closedAt,
+      description: incidents.description,
+      injuryInvolved: incidents.injuryInvolved,
+      medicalStatus: incidents.medicalStatus,
+      lostDays: incidents.lostDays,
+      siteName: sites.name,
+      zoneName: zones.name,
+    })
+    .from(incidents)
+    .leftJoin(sites, eq(incidents.siteId, sites.id))
+    .leftJoin(zones, eq(incidents.zoneId, zones.id))
+    .where(and(eq(incidents.id, id), eq(incidents.reportedBy, session.sub)))
+    .limit(1)
+  )
 
   if (!inc) notFound()
 
-  const siteName = (inc.sites as unknown as { name: string } | null)?.name
-  const zoneName = (inc.zones as unknown as { name: string } | null)?.name
-  const capas = (inc.capa_actions as unknown as Array<{ id: string; description: string; status: string; due_date: string | null }>) ?? []
+  const capas = await asAdmin(db =>
+    db.select({
+      id: capaActions.id,
+      description: capaActions.description,
+      status: capaActions.status,
+      dueDate: capaActions.dueDate,
+    })
+    .from(capaActions)
+    .where(eq(capaActions.incidentId, id))
+  )
 
   return (
     <main className="max-w-2xl mx-auto px-4 py-6 space-y-4">
@@ -53,8 +71,8 @@ export default async function ReporterIncidentDetail({
       <div className="bg-white rounded-xl shadow-sm p-5">
         <div className="flex items-start justify-between gap-3 mb-4">
           <div>
-            <h1 className="text-lg font-bold text-gray-900">{inc.reference_no ?? inc.id.slice(0, 8)}</h1>
-            <p className="text-sm text-gray-500 capitalize">{inc.incident_type?.replace(/_/g, ' ')}</p>
+            <h1 className="text-lg font-bold text-gray-900">{inc.referenceNo ?? inc.id.slice(0, 8)}</h1>
+            <p className="text-sm text-gray-500 capitalize">{inc.incidentType?.replace(/_/g, ' ')}</p>
           </div>
           <span className={`text-xs rounded-full px-2 py-1 shrink-0 ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-600'}`}>
             {STATUS_LABELS[inc.status] ?? inc.status}
@@ -62,19 +80,19 @@ export default async function ReporterIncidentDetail({
         </div>
 
         <div className="grid grid-cols-2 gap-3 text-sm mb-4">
-          {siteName && <div><p className="text-xs text-gray-500">Site</p><p className="font-medium">{siteName}</p></div>}
-          {zoneName && <div><p className="text-xs text-gray-500">Zone</p><p className="font-medium">{zoneName}</p></div>}
+          {inc.siteName && <div><p className="text-xs text-gray-500">Site</p><p className="font-medium">{inc.siteName}</p></div>}
+          {inc.zoneName && <div><p className="text-xs text-gray-500">Zone</p><p className="font-medium">{inc.zoneName}</p></div>}
           {inc.severity && <div><p className="text-xs text-gray-500">Severity</p><p className="font-medium">{inc.severity} / 5</p></div>}
-          {inc.reported_at && (
+          {inc.reportedAt && (
             <div>
               <p className="text-xs text-gray-500">Reported</p>
-              <p className="font-medium">{new Date(inc.reported_at as string).toLocaleDateString('en-MY')}</p>
+              <p className="font-medium">{new Date(inc.reportedAt).toLocaleDateString('en-MY')}</p>
             </div>
           )}
-          {inc.closed_at && (
+          {inc.closedAt && (
             <div>
               <p className="text-xs text-gray-500">Closed</p>
-              <p className="font-medium">{new Date(inc.closed_at as string).toLocaleDateString('en-MY')}</p>
+              <p className="font-medium">{new Date(inc.closedAt).toLocaleDateString('en-MY')}</p>
             </div>
           )}
         </div>

app/(protected)/reporter/page.tsx

@@ -1,9 +1,11 @@
 export const dynamic = 'force-dynamic'
 
 import Link from 'next/link'
-import { createClient } from '@/lib/supabase/server'
+import { asAdmin } from '@/lib/db/with-user'
 import { redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth/get-session'
+import { incidents, sites } from '@/lib/db/schema'
+import { eq, desc } from 'drizzle-orm'
 
 const STATUS_LABELS: Record<string, string> = {
   reported: 'Reported',
@@ -32,15 +34,22 @@ export default async function ReporterPage() {
   const session = await getSession()
   if (!session) redirect('/login')
 
-  const supabase = await createClient()
+  const rows = await asAdmin(db =>
+    db.select({
+      id: incidents.id,
+      referenceNo: incidents.referenceNo,
+      incidentType: incidents.incidentType,
+      status: incidents.status,
+      reportedAt: incidents.reportedAt,
+      severity: incidents.severity,
+      siteName: sites.name,
+    })
+    .from(incidents)
+    .leftJoin(sites, eq(incidents.siteId, sites.id))
+    .where(eq(incidents.reportedBy, session.sub))
+    .orderBy(desc(incidents.reportedAt))
+  )
 
-  const { data: incidents } = await supabase
-    .from('incidents')
-    .select('id, reference_no, incident_type, status, reported_at, severity, sites (name)')
-    .eq('reported_by', session.sub)
-    .order('reported_at', { ascending: false })
-
-  const rows = incidents ?? []
   const openCount = rows.filter(r => r.status !== 'closed').length
   const closedCount = rows.filter(r => r.status === 'closed').length
 
@@ -81,35 +90,32 @@ export default async function ReporterPage() {
         </div>
       ) : (
         <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-50">
-          {rows.map(inc => {
-            const siteName = (inc.sites as unknown as { name: string } | null)?.name
-            return (
-              <Link key={inc.id} href={`/reporter/incidents/${inc.id}`} className="block p-4 cursor-pointer hover:bg-gray-50 transition-colors">
-                <div className="flex items-start justify-between gap-3">
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-semibold text-gray-900">
-                      {inc.reference_no ?? inc.id.slice(0, 8)}
+          {rows.map(inc => (
+            <Link key={inc.id} href={`/reporter/incidents/${inc.id}`} className="block p-4 cursor-pointer hover:bg-gray-50 transition-colors">
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-semibold text-gray-900">
+                    {inc.referenceNo ?? inc.id.slice(0, 8)}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-0.5">
+                    {TYPE_LABELS[inc.incidentType] ?? inc.incidentType}
+                    {inc.siteName ? ` · ${inc.siteName}` : ''}
+                    {inc.severity ? ` · Severity ${inc.severity}` : ''}
+                  </p>
+                  {inc.reportedAt && (
+                    <p className="text-xs text-gray-400 mt-0.5">
+                      {new Date(inc.reportedAt).toLocaleDateString('en-MY', {
+                        day: 'numeric', month: 'short', year: 'numeric',
+                      })}
                     </p>
-                    <p className="text-xs text-gray-500 mt-0.5">
-                      {TYPE_LABELS[inc.incident_type] ?? inc.incident_type}
-                      {siteName ? ` · ${siteName}` : ''}
-                      {inc.severity ? ` · Severity ${inc.severity}` : ''}
-                    </p>
-                    {inc.reported_at && (
-                      <p className="text-xs text-gray-400 mt-0.5">
-                        {new Date(inc.reported_at as string).toLocaleDateString('en-MY', {
-                          day: 'numeric', month: 'short', year: 'numeric',
-                        })}
-                      </p>
-                    )}
-                  </div>
-                  <span className={`text-xs rounded-full px-2 py-0.5 shrink-0 ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-600'}`}>
-                    {STATUS_LABELS[inc.status] ?? inc.status}
-                  </span>
+                  )}
                 </div>
-              </Link>
-            )
-          })}
+                <span className={`text-xs rounded-full px-2 py-0.5 shrink-0 ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-600'}`}>
+                  {STATUS_LABELS[inc.status] ?? inc.status}
+                </span>
+              </div>
+            </Link>
+          ))}
         </div>
       )}
     </main>