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>
This commit is contained in:
2026-07-23 17:29:22 +08:00
co-authored by Claude Sonnet 4.6
parent c2db693d9f
commit f591c0be18
18 changed files with 932 additions and 450 deletions
@@ -2,7 +2,10 @@ export const dynamic = 'force-dynamic'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { createClient } from '@/lib/supabase/server'
import { asAdmin } from '@/lib/db/with-user'
import { incidents, sites, zones, trucks, users, evidenceFiles, investigations } from '@/lib/db/schema'
import { eq, and } from 'drizzle-orm'
import { aliasedTable } from 'drizzle-orm'
import { IncidentDetail, type Incident } from '@/components/incidents/incident-detail'
import { InvestigationPanel } from '@/components/incidents/investigation-panel'
@@ -12,44 +15,129 @@ interface Props {
export default async function SupervisorIncidentDetailPage({ params }: Props) {
const { id } = await params
const supabase = await createClient()
const { data: incident, error } = await supabase
.from('incidents')
.select(`
id, reference_no, incident_type, description, severity, status,
injury_involved, asset_involved, medical_status, lost_days,
reported_at, closed_at,
sites (id, name),
zones (id, name),
reporter:users!reported_by (id, name, email),
evidence_files (id, stage, file_url, file_type, uploaded_at)
`)
.eq('id', id)
.eq('evidence_files.deleted', false)
.single()
const reporterAlias = aliasedTable(users, 'reporter')
const investigatorAlias = aliasedTable(users, 'investigator')
if (error || !incident) notFound()
const [incident] = await asAdmin(db =>
db.select({
id: incidents.id,
referenceNo: incidents.referenceNo,
incidentType: incidents.incidentType,
description: incidents.description,
severity: incidents.severity,
status: incidents.status,
injuryInvolved: incidents.injuryInvolved,
assetInvolved: incidents.assetInvolved,
medicalStatus: incidents.medicalStatus,
lostDays: incidents.lostDays,
reportedAt: incidents.reportedAt,
closedAt: incidents.closedAt,
siteId: sites.id,
siteName: sites.name,
zoneId: zones.id,
zoneName: zones.name,
truckId: trucks.id,
truckNo: trucks.truckNo,
truckCarrier: trucks.carrier,
reporterId: reporterAlias.id,
reporterName: reporterAlias.name,
reporterEmail: reporterAlias.email,
})
.from(incidents)
.leftJoin(sites, eq(incidents.siteId, sites.id))
.leftJoin(zones, eq(incidents.zoneId, zones.id))
.leftJoin(trucks, eq(incidents.truckId, trucks.id))
.leftJoin(reporterAlias, eq(incidents.reportedBy, reporterAlias.id))
.where(eq(incidents.id, id))
.limit(1)
)
const { data: investigation } = await supabase
.from('investigations')
.select(`
id, method, five_why_steps, fishbone_categories,
findings_text, root_cause_summary, alcohol_test_result, urine_test_result,
witness_statement_refs, completed_at,
investigator:users!investigator_id (name, email)
`)
.eq('incident_id', id)
.maybeSingle()
if (!incident) notFound()
const evidenceRows = await asAdmin(db =>
db.select({
id: evidenceFiles.id,
stage: evidenceFiles.stage,
fileUrl: evidenceFiles.fileUrl,
fileType: evidenceFiles.fileType,
uploadedAt: evidenceFiles.uploadedAt,
})
.from(evidenceFiles)
.where(and(eq(evidenceFiles.incidentId, id), eq(evidenceFiles.deleted, false)))
)
const [inv] = await asAdmin(db =>
db.select({
id: investigations.id,
method: investigations.method,
fiveWhySteps: investigations.fiveWhySteps,
fishboneCategories: investigations.fishboneCategories,
findingsText: investigations.findingsText,
rootCauseSummary: investigations.rootCauseSummary,
alcoholTestResult: investigations.alcoholTestResult,
urineTestResult: investigations.urineTestResult,
witnessStatementRefs: investigations.witnessStatementRefs,
completedAt: investigations.completedAt,
investigatorName: investigatorAlias.name,
investigatorEmail: investigatorAlias.email,
})
.from(investigations)
.leftJoin(investigatorAlias, eq(investigations.investigatorId, investigatorAlias.id))
.where(eq(investigations.incidentId, id))
.limit(1)
)
const incidentProp: Incident = {
id: incident.id,
reference_no: incident.referenceNo,
incident_type: incident.incidentType,
description: incident.description,
status: incident.status,
severity: incident.severity,
injury_involved: incident.injuryInvolved,
asset_involved: incident.assetInvolved,
medical_status: incident.medicalStatus,
lost_days: incident.lostDays,
reported_at: incident.reportedAt.toISOString(),
closed_at: incident.closedAt?.toISOString() ?? null,
sites: incident.siteId ? { id: incident.siteId, name: incident.siteName! } : null,
zones: incident.zoneId ? { id: incident.zoneId, name: incident.zoneName! } : null,
trucks: incident.truckId ? { id: incident.truckId, truck_no: incident.truckNo!, carrier: incident.truckCarrier ?? null } : null,
reporter: incident.reporterId ? { id: incident.reporterId, name: incident.reporterName!, email: incident.reporterEmail! } : null,
evidence_files: evidenceRows.map(e => ({
id: e.id,
stage: e.stage,
file_url: e.fileUrl,
file_type: e.fileType,
uploaded_at: e.uploadedAt.toISOString(),
})),
}
const investigationProp = inv ? {
id: inv.id,
method: inv.method,
five_why_steps: inv.fiveWhySteps as { why: string; answer: string }[] | null,
fishbone_categories: inv.fishboneCategories as Record<string, string> | null,
findings_text: inv.findingsText,
root_cause_summary: inv.rootCauseSummary,
alcohol_test_result: inv.alcoholTestResult,
urine_test_result: inv.urineTestResult,
witness_statement_refs: inv.witnessStatementRefs ?? [],
completed_at: inv.completedAt?.toISOString() ?? null,
investigator: inv.investigatorEmail
? { name: inv.investigatorName ?? null, email: inv.investigatorEmail }
: null,
} : null
return (
<main className="max-w-3xl mx-auto px-4 py-6">
<Link href="/supervisor/incidents" className="text-sm text-blue-600 hover:underline mb-4 inline-block">
Back to inbox
</Link>
<IncidentDetail incident={incident as unknown as Incident} />
{investigation && (
<InvestigationPanel investigation={investigation as never} />
<IncidentDetail incident={incidentProp} />
{investigationProp && (
<InvestigationPanel investigation={investigationProp} />
)}
</main>
)
+75 -28
View File
@@ -1,6 +1,11 @@
export const dynamic = 'force-dynamic'
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { asAdmin } from '@/lib/db/with-user'
import { getSession } from '@/lib/auth/get-session'
import { incidents, sites, zones, trucks, users } from '@/lib/db/schema'
import { eq, and, or, ilike, desc, asc, sql } from 'drizzle-orm'
import { aliasedTable } from 'drizzle-orm'
import { IncidentList, type Incident } from '@/components/incidents/incident-list'
import { Pagination } from '@/components/incidents/pagination'
import { IncidentFilters, type SiteOption, type TruckOption } from '@/components/incidents/incident-filters'
@@ -12,48 +17,90 @@ export default async function SupervisorInboxPage({
}: {
searchParams: Promise<{ page?: string; q?: string; status?: string; type?: string; site_id?: string; truck_id?: string }>
}) {
const supabase = await createClient()
const session = await getSession()
if (!session) redirect('/login')
const params = await searchParams
const page = Math.max(1, Number.parseInt(params.page ?? '1', 10) || 1)
const from = (page - 1) * PAGE_SIZE
let query = supabase
.from('incidents')
.select(`
id, reference_no, incident_type, status, severity, reported_at,
sites (name),
zones (name),
trucks (truck_no),
reporter:users!reported_by (name)
`, { count: 'exact' })
.order('reported_at', { ascending: false })
const reporterAlias = aliasedTable(users, 'reporter')
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)
if (params.truck_id) query = query.eq('truck_id', params.truck_id)
const conditions = []
if (params.q) conditions.push(or(ilike(incidents.referenceNo, `%${params.q}%`), ilike(incidents.description, `%${params.q}%`)))
if (params.status) conditions.push(eq(incidents.status, params.status as never))
if (params.type) conditions.push(eq(incidents.incidentType, params.type as never))
if (params.site_id) conditions.push(eq(incidents.siteId, params.site_id))
if (params.truck_id) conditions.push(eq(incidents.truckId, params.truck_id))
const where = conditions.length ? and(...conditions) : undefined
const [{ data: incidents, count }, { data: sites }, { data: trucks }] = await Promise.all([
query.range(from, from + PAGE_SIZE - 1),
supabase.from('sites').select('id, name').order('name'),
supabase.from('trucks').select('id, truck_no').eq('active', true).order('truck_no'),
const [[countRow], incidentRows, siteRows, truckRows] = await Promise.all([
asAdmin(db =>
db.select({ count: sql<number>`count(*)` })
.from(incidents)
.where(where)
),
asAdmin(db =>
db.select({
id: incidents.id,
referenceNo: incidents.referenceNo,
incidentType: incidents.incidentType,
status: incidents.status,
severity: incidents.severity,
reportedAt: incidents.reportedAt,
siteName: sites.name,
zoneName: zones.name,
reporterName: reporterAlias.name,
truckNo: trucks.truckNo,
})
.from(incidents)
.leftJoin(sites, eq(incidents.siteId, sites.id))
.leftJoin(zones, eq(incidents.zoneId, zones.id))
.leftJoin(reporterAlias, eq(incidents.reportedBy, reporterAlias.id))
.leftJoin(trucks, eq(incidents.truckId, trucks.id))
.where(where)
.orderBy(desc(incidents.reportedAt))
.limit(PAGE_SIZE)
.offset(from)
),
asAdmin(db =>
db.select({ id: sites.id, name: sites.name }).from(sites).orderBy(asc(sites.name))
),
asAdmin(db =>
db.select({ id: trucks.id, truckNo: trucks.truckNo })
.from(trucks)
.where(eq(trucks.active, true))
.orderBy(asc(trucks.truckNo))
),
])
const siteOptions: SiteOption[] = (sites ?? []).map(s => ({ id: s.id, name: s.name }))
const truckOptions: TruckOption[] = (trucks ?? []).map(tk => ({ id: tk.id, truck_no: tk.truck_no }))
const total = Number(countRow?.count ?? 0)
const incidentList: Incident[] = incidentRows.map(r => ({
id: r.id,
reference_no: r.referenceNo,
incident_type: r.incidentType,
status: r.status,
severity: r.severity,
reported_at: r.reportedAt.toISOString(),
sites: r.siteName ? { name: r.siteName } : null,
zones: r.zoneName ? { name: r.zoneName } : null,
trucks: r.truckNo ? { truck_no: r.truckNo } : null,
reporter: r.reporterName ? { name: r.reporterName } : null,
}))
const siteOptions: SiteOption[] = siteRows.map(s => ({ id: s.id, name: s.name }))
const truckOptions: TruckOption[] = truckRows.map(t => ({ id: t.id, truck_no: t.truckNo }))
return (
<main className="max-w-4xl mx-auto px-4 py-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>
<span className="text-sm text-gray-500">{total} incidents</span>
</div>
<IncidentFilters sites={siteOptions} trucks={truckOptions} />
<IncidentList incidents={(incidents ?? []) as unknown as Incident[]} basePath="/supervisor" />
<Pagination page={page} pageSize={PAGE_SIZE} total={count ?? 0} href="/supervisor/incidents" />
<IncidentList incidents={incidentList} basePath="/supervisor" />
<Pagination page={page} pageSize={PAGE_SIZE} total={total} href="/supervisor/incidents" />
</main>
)
}
+70 -56
View File
@@ -1,9 +1,12 @@
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, capaActions, users } from '@/lib/db/schema'
import { eq, not, and, inArray, sql } from 'drizzle-orm'
import { aliasedTable } from 'drizzle-orm'
import { StatCard } from '@/components/dashboard/stat-card'
const STATUS_LABELS: Record<string, string> = {
@@ -29,8 +32,6 @@ export default async function SupervisorPage() {
if (!session) redirect('/login')
if (!['supervisor', 'admin'].includes(session.role)) redirect('/')
const supabase = await createClient()
if (!session.siteId) {
return (
<main className="max-w-4xl mx-auto px-4 py-6">
@@ -40,56 +41,69 @@ export default async function SupervisorPage() {
)
}
const { data: siteRow } = await supabase.from('sites').select('name').eq('id', session.siteId).single()
const siteName = (siteRow as unknown as { name: string } | null)?.name ?? 'Your Site'
const [siteRow] = await asAdmin(db =>
db.select({ name: sites.name }).from(sites).where(eq(sites.id, session.siteId!)).limit(1)
)
const siteName = siteRow?.name ?? 'Your Site'
// Resolve incident IDs once to avoid duplicate queries inside Promise.all
const { data: siteIncidents } = await supabase
.from('incidents')
.select('id')
.eq('site_id', session.siteId)
const incidentIds = siteIncidents?.map(r => r.id) ?? []
// Get all incident IDs for this site
const siteIncidents = await asAdmin(db =>
db.select({ id: incidents.id }).from(incidents).where(eq(incidents.siteId, session.siteId!))
)
const incidentIds = siteIncidents.map(r => r.id)
const [
{ data: openIncidents },
{ count: closedCount },
{ count: openCount },
{ data: overdueCapas },
{ data: allCapas },
] = await Promise.all([
supabase
.from('incidents')
.select('id, reference_no, incident_type, status, reported_at')
.eq('site_id', session.siteId)
.neq('status', 'closed')
.order('reported_at', { ascending: false })
.limit(10),
supabase
.from('incidents')
.select('*', { count: 'exact', head: true })
.eq('site_id', session.siteId)
.eq('status', 'closed'),
supabase
.from('incidents')
.select('*', { count: 'exact', head: true })
.eq('site_id', session.siteId)
.neq('status', 'closed'),
supabase
.from('capa_actions')
.select('id, description, due_date, users (name)')
.eq('status', 'overdue')
.in('incident_id', incidentIds),
supabase
.from('capa_actions')
.select('id, status')
.in('incident_id', incidentIds),
const ownerAlias = aliasedTable(users, 'owner')
const [openIncidents, closedCountRow, openCountRow, overdueCapas, allCapas] = await Promise.all([
asAdmin(db =>
db.select({
id: incidents.id,
referenceNo: incidents.referenceNo,
incidentType: incidents.incidentType,
status: incidents.status,
reportedAt: incidents.reportedAt,
})
.from(incidents)
.where(and(eq(incidents.siteId, session.siteId!), not(eq(incidents.status, 'closed'))))
.orderBy(sql`${incidents.reportedAt} desc`)
.limit(10)
),
asAdmin(db =>
db.select({ count: sql<number>`count(*)` })
.from(incidents)
.where(and(eq(incidents.siteId, session.siteId!), eq(incidents.status, 'closed')))
),
asAdmin(db =>
db.select({ count: sql<number>`count(*)` })
.from(incidents)
.where(and(eq(incidents.siteId, session.siteId!), not(eq(incidents.status, 'closed'))))
),
incidentIds.length > 0
? asAdmin(db =>
db.select({
id: capaActions.id,
description: capaActions.description,
dueDate: capaActions.dueDate,
ownerName: ownerAlias.name,
})
.from(capaActions)
.leftJoin(ownerAlias, eq(capaActions.ownerUserId, ownerAlias.id))
.where(and(eq(capaActions.status, 'overdue'), inArray(capaActions.incidentId, incidentIds)))
)
: Promise.resolve([]),
incidentIds.length > 0
? asAdmin(db =>
db.select({ id: capaActions.id, status: capaActions.status })
.from(capaActions)
.where(inArray(capaActions.incidentId, incidentIds))
)
: Promise.resolve([]),
])
const resolvedOpenCount = openCount ?? 0
const resolvedClosedCount = closedCount ?? 0
const overdueCount = overdueCapas?.length ?? 0
const capaRows = allCapas ?? []
const resolvedOpenCount = Number(openCountRow[0]?.count ?? 0)
const resolvedClosedCount = Number(closedCountRow[0]?.count ?? 0)
const overdueCount = overdueCapas.length
const capaRows = allCapas
const capaOpenCount = capaRows.filter(c => ['open', 'in_progress'].includes(c.status)).length
const capaVerifiedCount = capaRows.filter(c => c.status === 'verified').length
@@ -121,19 +135,19 @@ export default async function SupervisorPage() {
{/* Open incidents */}
<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">Open Incidents</h2>
{(openIncidents ?? []).length === 0 ? (
{openIncidents.length === 0 ? (
<p className="text-sm text-gray-400">No open incidents.</p>
) : (
<div className="space-y-2">
{(openIncidents ?? []).map(inc => (
{openIncidents.map(inc => (
<Link
key={inc.id}
href={`/supervisor/incidents/${inc.id}`}
className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0 hover:bg-gray-50 -mx-2 px-2 rounded"
>
<div>
<p className="text-sm font-medium text-gray-900">{inc.reference_no ?? inc.id.slice(0, 8)}</p>
<p className="text-xs text-gray-500">{TYPE_LABELS[inc.incident_type] ?? inc.incident_type}</p>
<p className="text-sm font-medium text-gray-900">{inc.referenceNo ?? inc.id.slice(0, 8)}</p>
<p className="text-xs text-gray-500">{TYPE_LABELS[inc.incidentType] ?? inc.incidentType}</p>
</div>
<span className={`text-xs rounded-full px-2 py-0.5 font-medium ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-700'}`}>
{STATUS_LABELS[inc.status] ?? inc.status}
@@ -149,16 +163,16 @@ export default async function SupervisorPage() {
<div className="bg-white rounded-xl shadow-sm p-5">
<h2 className="text-sm font-semibold text-red-600 uppercase tracking-wide mb-4">Overdue CAPAs</h2>
<div className="space-y-2">
{(overdueCapas ?? []).map(capa => (
{overdueCapas.map(capa => (
<div key={capa.id} className="flex items-start justify-between py-2 border-b border-gray-50 last:border-0">
<div className="flex-1 min-w-0 mr-4">
<p className="text-sm text-gray-800 line-clamp-2">{capa.description}</p>
<p className="text-xs text-gray-500 mt-0.5">
Owner: {(capa.users as unknown as { name: string } | null)?.name ?? 'Unassigned'}
Owner: {capa.ownerName ?? 'Unassigned'}
</p>
</div>
<span className="text-xs text-red-600 font-semibold shrink-0">
Due {capa.due_date ? new Date(capa.due_date as string).toLocaleDateString('en-MY') : '—'}
Due {capa.dueDate ? new Date(capa.dueDate).toLocaleDateString('en-MY') : '—'}
</span>
</div>
))}