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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
import { notFound } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { IncidentDetail, type Incident } from '@/components/incidents/incident-detail'
|
||||
import { IncidentHeader } from '@/components/incidents/incident-header'
|
||||
import { SimilarIncidentsPanel } from '@/components/incidents/similar-incidents-panel'
|
||||
import { ClosurePanel } from '@/components/incidents/closure-panel'
|
||||
|
||||
@@ -35,69 +35,48 @@ export default async function HseIncidentDetailPage({ params }: Props) {
|
||||
|
||||
const status = (incident as { status: string }).status
|
||||
|
||||
const needsJkkp = Boolean(
|
||||
(incident as { is_fatality?: boolean }).is_fatality ||
|
||||
(incident as { is_serious_bodily_injury?: boolean }).is_serious_bodily_injury ||
|
||||
(incident as { is_dangerous_occurrence?: boolean }).is_dangerous_occurrence ||
|
||||
((incident as { lost_days?: number | null }).lost_days ?? 0) >= 4
|
||||
)
|
||||
|
||||
return (
|
||||
<main className="max-w-3xl mx-auto px-4 py-6">
|
||||
<Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline mb-4 inline-block">
|
||||
← Back to inbox
|
||||
</Link>
|
||||
<IncidentDetail incident={incident as unknown as Incident} />
|
||||
<>
|
||||
<IncidentHeader
|
||||
incidentId={id}
|
||||
referenceNo={(incident as { reference_no: string | null }).reference_no}
|
||||
status={status}
|
||||
backHref="/hse/incidents"
|
||||
canTriage={status === 'reported'}
|
||||
canInvestigate={status === 'triaged'}
|
||||
canAddCapa={(['investigating', 'capa_pending'] as string[]).includes(status)}
|
||||
/>
|
||||
<main className="max-w-3xl mx-auto px-4 py-6">
|
||||
<IncidentDetail incident={incident as unknown as Incident} />
|
||||
|
||||
{status === 'reported' && (
|
||||
<div className="mt-6">
|
||||
<Link
|
||||
href={`/hse/incidents/${id}/triage`}
|
||||
className="inline-block bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700"
|
||||
>
|
||||
Triage Incident
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{status === 'triaged' && (
|
||||
<div className="mt-6">
|
||||
<Link
|
||||
href={`/hse/incidents/${id}/investigation`}
|
||||
className="inline-block bg-indigo-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-indigo-700"
|
||||
>
|
||||
Start Investigation
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{(['investigating', 'capa_pending'] as string[]).includes(status) && (
|
||||
<div className="mt-6">
|
||||
<Link
|
||||
href={`/hse/incidents/${id}/capa/new`}
|
||||
className="inline-block bg-amber-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-amber-700"
|
||||
>
|
||||
Add CAPA Action
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Boolean(
|
||||
(incident as { is_fatality?: boolean }).is_fatality ||
|
||||
(incident as { is_serious_bodily_injury?: boolean }).is_serious_bodily_injury ||
|
||||
(incident as { is_dangerous_occurrence?: boolean }).is_dangerous_occurrence ||
|
||||
((incident as { lost_days?: number | null }).lost_days ?? 0) >= 4
|
||||
) && (
|
||||
<div className="mt-4 flex gap-3">
|
||||
<a
|
||||
href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp6`}
|
||||
target="_blank"
|
||||
className="inline-block bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900"
|
||||
>
|
||||
Download JKKP 6 (PDF)
|
||||
</a>
|
||||
<a
|
||||
href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp7`}
|
||||
target="_blank"
|
||||
className="inline-block bg-gray-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-700"
|
||||
>
|
||||
Download JKKP 7 (PDF)
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<ClosurePanel incidentId={id} status={status} canClose canAddAddenda />
|
||||
<SimilarIncidentsPanel incidentId={id} />
|
||||
</main>
|
||||
{needsJkkp && (
|
||||
<div className="mt-4 flex gap-3 flex-wrap">
|
||||
<a
|
||||
href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp6`}
|
||||
target="_blank"
|
||||
className="inline-block bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900"
|
||||
>
|
||||
Download JKKP 6 (PDF)
|
||||
</a>
|
||||
<a
|
||||
href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp7`}
|
||||
target="_blank"
|
||||
className="inline-block bg-gray-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-700"
|
||||
>
|
||||
Download JKKP 7 (PDF)
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<ClosurePanel incidentId={id} status={status} canClose canAddAddenda />
|
||||
<SimilarIncidentsPanel incidentId={id} />
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,20 +3,21 @@ export const dynamic = 'force-dynamic'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { IncidentList, type Incident } from '@/components/incidents/incident-list'
|
||||
import { Pagination } from '@/components/incidents/pagination'
|
||||
import { IncidentFilters, type SiteOption } from '@/components/incidents/incident-filters'
|
||||
|
||||
const PAGE_SIZE = 25
|
||||
|
||||
export default async function HseInboxPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ page?: string }>
|
||||
searchParams: Promise<{ page?: string; q?: string; status?: string; type?: string; site_id?: string }>
|
||||
}) {
|
||||
const supabase = await createClient()
|
||||
const params = await searchParams
|
||||
const page = Math.max(1, Number.parseInt(params.page ?? '1', 10) || 1)
|
||||
const from = (page - 1) * PAGE_SIZE
|
||||
|
||||
const { data: incidents, count } = await supabase
|
||||
let query = supabase
|
||||
.from('incidents')
|
||||
.select(`
|
||||
id, reference_no, incident_type, status, severity, reported_at,
|
||||
@@ -25,14 +26,28 @@ export default async function HseInboxPage({
|
||||
reporter:users!reported_by (name)
|
||||
`, { count: 'exact' })
|
||||
.order('reported_at', { ascending: false })
|
||||
.range(from, from + PAGE_SIZE - 1)
|
||||
|
||||
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)
|
||||
|
||||
const [{ data: incidents, count }, { data: sites }] = await Promise.all([
|
||||
query.range(from, from + PAGE_SIZE - 1),
|
||||
supabase.from('sites').select('id, name').order('name'),
|
||||
])
|
||||
|
||||
const siteOptions: SiteOption[] = (sites ?? []).map(s => ({ id: s.id, name: s.name }))
|
||||
|
||||
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">Incident Inbox</h1>
|
||||
<span className="text-sm text-gray-500">{count ?? incidents?.length ?? 0} incidents</span>
|
||||
</div>
|
||||
<IncidentFilters sites={siteOptions} />
|
||||
<IncidentList incidents={(incidents ?? []) as unknown as Incident[]} basePath="/hse" />
|
||||
<Pagination page={page} pageSize={PAGE_SIZE} total={count ?? 0} href="/hse/incidents" />
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user