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/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>