feat: sticky incident header with top-positioned action buttons (fix #5)
This commit is contained in:
@@ -5,6 +5,7 @@ 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',
|
||||
@@ -16,8 +17,14 @@ const TYPE_LABELS: Record<string, string> = {
|
||||
fire: 'Fire',
|
||||
}
|
||||
|
||||
export default async function HseDashboardPage() {
|
||||
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)
|
||||
@@ -63,7 +70,6 @@ export default async function HseDashboardPage() {
|
||||
.not('root_cause_summary', 'is', null),
|
||||
])
|
||||
|
||||
// --- Existing metrics ---
|
||||
const rows = incidents ?? []
|
||||
const total = rows.length
|
||||
const closed = rows.filter(r => r.status === 'closed').length
|
||||
@@ -83,12 +89,10 @@ export default async function HseDashboardPage() {
|
||||
.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'
|
||||
@@ -100,7 +104,6 @@ export default async function HseDashboardPage() {
|
||||
.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)
|
||||
@@ -115,17 +118,15 @@ export default async function HseDashboardPage() {
|
||||
? Math.round((onTime.length / capas.length) * 100)
|
||||
: null
|
||||
|
||||
// --- DOSH pending filings ---
|
||||
const doshPendingCount = doshPendingRows?.length ?? 0
|
||||
|
||||
// --- 12-month trend + top root causes ---
|
||||
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-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
|
||||
@@ -138,175 +139,183 @@ export default async function HseDashboardPage() {
|
||||
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 Register
|
||||
JKKP 8
|
||||
</a>
|
||||
<Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline">
|
||||
View all incidents →
|
||||
All incidents →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* JKKP 8 statutory deadline reminder — register due to DOSH before 31 January */}
|
||||
{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>
|
||||
)}
|
||||
<DashboardTabs activeTab={tab} />
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
<RiskFlagsPanel />
|
||||
|
||||
{/* 12-month incident trend */}
|
||||
<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">
|
||||
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-32">
|
||||
{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: '100px' }}>
|
||||
<div className="w-full bg-blue-400" style={{ height: `${(m.leading / monthlyMax) * 100}px` }} />
|
||||
<div className="w-full bg-red-400" style={{ height: `${(m.lagging / monthlyMax) * 100}px` }} />
|
||||
<div className="w-full bg-gray-300" style={{ height: `${(Math.max(0, other) / monthlyMax) * 100}px` }} />
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-400">{m.label}</span>
|
||||
<span className="text-[10px] font-semibold text-gray-600">{m.total || ''}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top root causes */}
|
||||
{rootCauses.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">
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* 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 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>
|
||||
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
))}
|
||||
{Object.keys(by_type).length === 0 && (
|
||||
<p className="text-sm text-gray-400">No incidents yet</p>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
{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>
|
||||
))}
|
||||
{by_site.length === 0 && <p className="text-sm text-gray-400">No data</p>}
|
||||
</div>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user