322 lines
13 KiB
TypeScript
322 lines
13 KiB
TypeScript
export const dynamic = 'force-dynamic'
|
||
|
||
import Link from 'next/link'
|
||
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',
|
||
near_miss: 'Near Miss',
|
||
hazard: 'Hazard',
|
||
asset_damage: 'Asset Damage',
|
||
environmental: 'Environmental',
|
||
security: 'Security',
|
||
fire: 'Fire',
|
||
}
|
||
|
||
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)
|
||
thirtyDaysAgo.setDate(now.getDate() - 30)
|
||
const ninetyDaysAgo = new Date(now)
|
||
ninetyDaysAgo.setDate(now.getDate() - 90)
|
||
const twelveMonthsAgo = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() - 11, 1))
|
||
|
||
const [
|
||
{ data: incidents },
|
||
{ data: recentIncidents },
|
||
{ data: zoneIncidents },
|
||
{ data: completedCapas },
|
||
{ data: doshPendingRows },
|
||
{ data: yearIncidents },
|
||
{ data: investigations },
|
||
] = await Promise.all([
|
||
supabase.from('incidents').select('id, status, incident_type, sites (name)'),
|
||
supabase
|
||
.from('incidents')
|
||
.select('incident_type')
|
||
.gte('reported_at', thirtyDaysAgo.toISOString()),
|
||
supabase
|
||
.from('incidents')
|
||
.select('zones (name)')
|
||
.gte('reported_at', ninetyDaysAgo.toISOString())
|
||
.not('zone_id', 'is', null),
|
||
supabase
|
||
.from('capa_actions')
|
||
.select('due_date, completed_at, verified_at')
|
||
.not('completed_at', 'is', null),
|
||
supabase
|
||
.from('dosh_reports')
|
||
.select('id')
|
||
.eq('status', 'pending'),
|
||
supabase
|
||
.from('incidents')
|
||
.select('reported_at, incident_type')
|
||
.gte('reported_at', twelveMonthsAgo.toISOString()),
|
||
supabase
|
||
.from('investigations')
|
||
.select('root_cause_summary')
|
||
.not('root_cause_summary', 'is', null),
|
||
])
|
||
|
||
const rows = incidents ?? []
|
||
const total = rows.length
|
||
const closed = rows.filter(r => r.status === 'closed').length
|
||
const open = total - closed
|
||
|
||
const by_type: Record<string, number> = {}
|
||
for (const r of rows) {
|
||
by_type[r.incident_type] = (by_type[r.incident_type] ?? 0) + 1
|
||
}
|
||
|
||
const siteMap: Record<string, number> = {}
|
||
for (const r of rows) {
|
||
const name = (r.sites as unknown as { name: string } | null)?.name ?? 'Unknown'
|
||
siteMap[name] = (siteMap[name] ?? 0) + 1
|
||
}
|
||
const by_site = Object.entries(siteMap)
|
||
.map(([name, count]) => ({ name, count }))
|
||
.sort((a, b) => b.count - a.count)
|
||
|
||
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
|
||
|
||
const zoneMap: Record<string, number> = {}
|
||
for (const r of zoneIncidents ?? []) {
|
||
const name = (r.zones as unknown as { name: string } | null)?.name ?? 'Unknown'
|
||
zoneMap[name] = (zoneMap[name] ?? 0) + 1
|
||
}
|
||
const by_zone = Object.entries(zoneMap)
|
||
.map(([name, count]) => ({ name, count }))
|
||
.sort((a, b) => b.count - a.count)
|
||
.slice(0, 10)
|
||
const zoneMax = by_zone[0]?.count ?? 1
|
||
|
||
const capas = completedCapas ?? []
|
||
const onTime = capas.filter(c => {
|
||
const due = new Date(c.due_date)
|
||
const done = c.verified_at
|
||
? new Date(c.verified_at as string)
|
||
: c.completed_at
|
||
? new Date(c.completed_at as string)
|
||
: null
|
||
return done !== null && done <= due
|
||
})
|
||
const capaOnTimeRate = capas.length > 0
|
||
? Math.round((onTime.length / capas.length) * 100)
|
||
: null
|
||
|
||
const doshPendingCount = doshPendingRows?.length ?? 0
|
||
|
||
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-4">
|
||
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||
<div className="flex gap-3">
|
||
<a
|
||
href="/ims/api/dashboard/export?role=hse"
|
||
className="text-sm text-gray-500 hover:text-gray-700 border border-gray-200 rounded-lg px-3 py-1.5"
|
||
>
|
||
Export CSV
|
||
</a>
|
||
<a
|
||
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
|
||
</a>
|
||
<Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline">
|
||
All incidents →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<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">
|
||
<strong>JKKP 8 annual register due:</strong> the {now.getFullYear() - 1} register must be
|
||
submitted to DOSH before 31 January {now.getFullYear()}.{' '}
|
||
<a href={`/ims/api/reports/jkkp8?year=${now.getFullYear() - 1}`} className="underline font-medium">
|
||
Download {now.getFullYear() - 1} register
|
||
</a>
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<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" />
|
||
<StatCard label="Closed" value={closed} accent="green" sub="resolved" />
|
||
<StatCard
|
||
label="DOSH Pending"
|
||
value={doshPendingCount}
|
||
accent={doshPendingCount > 0 ? 'yellow' : 'green'}
|
||
sub="filings outstanding"
|
||
/>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl shadow-sm p-5">
|
||
<h2 className="text-sm font-semibold text-gray-900 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-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>
|
||
</div>
|
||
<div className="flex-1 text-center bg-red-50 rounded-lg p-4">
|
||
<p className="text-3xl font-bold text-red-600">{laggingCount}</p>
|
||
<p className="text-xs text-red-700 mt-1">Lagging (Injuries)</p>
|
||
</div>
|
||
{capaOnTimeRate !== null && (
|
||
<div className="flex-1 text-center bg-green-50 rounded-lg p-4">
|
||
<p className="text-3xl font-bold text-green-600">{capaOnTimeRate}%</p>
|
||
<p className="text-xs text-green-700 mt-1">CAPA On-Time Rate</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Trends tab */}
|
||
{tab === 'trends' && (
|
||
<>
|
||
<div className="bg-white rounded-xl shadow-sm p-5 mb-4">
|
||
<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-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: '192px' }}>
|
||
<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) * 192}px` }} />
|
||
<div className="w-full bg-gray-300" style={{ height: `${(Math.max(0, other) / monthlyMax) * 192}px` }} />
|
||
</div>
|
||
<span className="text-xs text-gray-400">{m.label}</span>
|
||
<span className="text-xs font-semibold text-gray-600">{m.total || ''}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{rootCauses.length > 0 && (
|
||
<div className="bg-white rounded-xl shadow-sm p-5">
|
||
<h2 className="text-sm font-semibold text-gray-900 mb-4">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">
|
||
<span className="text-sm text-gray-700">
|
||
<span className="text-gray-400 mr-2">{i + 1}.</span>
|
||
{rc.cause}
|
||
</span>
|
||
<span className="text-sm font-semibold text-gray-900 shrink-0">{rc.count}×</span>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* 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-900 mb-4">
|
||
Zone Incident Heatmap — Last 90 Days
|
||
</h2>
|
||
<div className="space-y-2">
|
||
{by_zone.map(({ name, count }) => (
|
||
<div key={name} className="flex items-center gap-3">
|
||
<span className="text-sm text-gray-600 w-36 shrink-0 truncate">{name}</span>
|
||
<div className="flex-1 bg-gray-100 rounded-full h-3">
|
||
<div
|
||
className="h-3 rounded-full"
|
||
style={{
|
||
width: `${(count / zoneMax) * 100}%`,
|
||
backgroundColor: `hsl(220, 70%, ${Math.max(30, 80 - Math.round((count / zoneMax) * 50))}%)`,
|
||
}}
|
||
/>
|
||
</div>
|
||
<span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="bg-white rounded-xl shadow-sm p-5 mb-4">
|
||
<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">
|
||
<span className="text-sm text-gray-600 w-32 shrink-0">{TYPE_LABELS[type] ?? type}</span>
|
||
<div className="flex-1 bg-gray-100 rounded-full h-2">
|
||
<div
|
||
className="bg-blue-500 h-2 rounded-full"
|
||
style={{ width: total > 0 ? `${(count / total) * 100}%` : '0%' }}
|
||
/>
|
||
</div>
|
||
<span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
|
||
</div>
|
||
))}
|
||
{Object.keys(by_type).length === 0 && (
|
||
<p className="text-sm text-gray-400">No incidents yet</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl shadow-sm p-5">
|
||
<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">
|
||
<span className="text-sm text-gray-600">{name}</span>
|
||
<span className="text-sm font-semibold text-gray-900">{count}</span>
|
||
</div>
|
||
))}
|
||
{by_site.length === 0 && <p className="text-sm text-gray-400">No data</p>}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* AI Insights tab */}
|
||
{tab === 'ai' && <RiskFlagsPanel />}
|
||
</main>
|
||
)
|
||
}
|