228 lines
8.5 KiB
TypeScript
228 lines
8.5 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'
|
|
|
|
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() {
|
|
const supabase = await createClient()
|
|
|
|
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 [
|
|
{ data: incidents },
|
|
{ data: recentIncidents },
|
|
{ data: zoneIncidents },
|
|
{ data: completedCapas },
|
|
{ data: doshPendingRows },
|
|
] = 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'),
|
|
])
|
|
|
|
// --- Existing metrics ---
|
|
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)
|
|
|
|
// --- Leading / lagging (last 30 days) ---
|
|
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
|
|
|
|
// --- Zone heatmap (last 90 days) ---
|
|
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
|
|
|
|
// --- CAPA on-time rate ---
|
|
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
|
|
|
|
// --- DOSH pending filings ---
|
|
const doshPendingCount = doshPendingRows?.length ?? 0
|
|
|
|
return (
|
|
<main className="max-w-4xl mx-auto px-4 py-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
|
<div className="flex gap-3">
|
|
<a
|
|
href="/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>
|
|
<Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline">
|
|
View all incidents →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary stats */}
|
|
<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>
|
|
|
|
{/* Leading vs lagging — last 30 days */}
|
|
<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-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-6">
|
|
<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>
|
|
|
|
{/* Zone heatmap — last 90 days */}
|
|
{by_zone.length > 0 && (
|
|
<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">
|
|
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(${Math.round((1 - count / zoneMax) * 120)}, 70%, 50%)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Incident type breakdown */}
|
|
<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">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>
|
|
|
|
{/* By site */}
|
|
<div className="bg-white rounded-xl shadow-sm p-5">
|
|
<h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide 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>
|
|
</main>
|
|
)
|
|
}
|