Files
ims/app/(protected)/supervisor/page.tsx
T

175 lines
6.8 KiB
TypeScript

export const dynamic = 'force-dynamic'
import Link from 'next/link'
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { StatCard } from '@/components/dashboard/stat-card'
const STATUS_LABELS: Record<string, string> = {
reported: 'Reported',
triaged: 'Triaged',
investigating: 'Investigating',
capa_pending: 'CAPA Pending',
verification: 'Verification',
closed: 'Closed',
}
const STATUS_COLORS: Record<string, string> = {
reported: 'bg-gray-100 text-gray-700',
triaged: 'bg-yellow-100 text-yellow-800',
investigating: 'bg-blue-100 text-blue-700',
capa_pending: 'bg-orange-100 text-orange-700',
verification: 'bg-purple-100 text-purple-700',
closed: 'bg-green-100 text-green-700',
}
export default async function SupervisorPage() {
const supabase = await createClient()
const { data: { user } } = await supabase.auth.getUser()
if (!user) redirect('/login')
const { data: profile } = await supabase
.from('users')
.select('name, site_id, role')
.eq('id', user.id)
.single()
if (!profile || !['supervisor', 'admin'].includes(profile.role)) redirect('/')
if (!profile.site_id) {
return (
<main className="max-w-4xl mx-auto px-4 py-6">
<h1 className="text-2xl font-bold text-gray-900 mb-4">Supervisor Portal</h1>
<p className="text-sm text-gray-500">No site assigned contact your administrator.</p>
</main>
)
}
const { data: siteRow } = await supabase.from('sites').select('name').eq('id', profile.site_id).single()
const siteName = (siteRow as unknown as { name: string } | null)?.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', profile.site_id)
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', profile.site_id)
.neq('status', 'closed')
.order('reported_at', { ascending: false })
.limit(10),
supabase
.from('incidents')
.select('*', { count: 'exact', head: true })
.eq('site_id', profile.site_id)
.eq('status', 'closed'),
supabase
.from('incidents')
.select('*', { count: 'exact', head: true })
.eq('site_id', profile.site_id)
.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 resolvedOpenCount = openCount ?? 0
const resolvedClosedCount = closedCount ?? 0
const overdueCount = overdueCapas?.length ?? 0
const capaRows = allCapas ?? []
const capaOpenCount = capaRows.filter(c => ['open', 'in_progress'].includes(c.status)).length
const capaVerifiedCount = capaRows.filter(c => c.status === 'verified').length
const TYPE_LABELS: Record<string, string> = {
injury: 'Injury', near_miss: 'Near Miss', hazard: 'Hazard',
asset_damage: 'Asset Damage', environmental: 'Environmental', security: 'Security', fire: 'Fire',
}
return (
<main className="max-w-4xl mx-auto px-4 py-6">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold text-gray-900">Supervisor Portal</h1>
<p className="text-sm text-gray-500 mt-1">{siteName}</p>
</div>
<Link href="/supervisor/incidents" className="text-sm text-blue-600 hover:underline">
All incidents
</Link>
</div>
{/* Stats */}
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
<StatCard label="Open Incidents" value={resolvedOpenCount} accent={resolvedOpenCount > 0 ? 'yellow' : 'green'} />
<StatCard label="Closed Incidents" value={resolvedClosedCount} accent="green" />
<StatCard label="Open CAPAs" value={capaOpenCount} accent={capaOpenCount > 0 ? 'yellow' : 'green'} />
<StatCard label="CAPA Overdue" value={overdueCount} accent={overdueCount > 0 ? 'red' : 'green'} />
</div>
{/* 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 ? (
<p className="text-sm text-gray-400">No open incidents.</p>
) : (
<div className="space-y-2">
{(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>
</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}
</span>
</Link>
))}
</div>
)}
</div>
{/* Overdue CAPAs */}
{overdueCount > 0 && (
<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 => (
<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'}
</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') : '—'}
</span>
</div>
))}
</div>
<p className="text-xs text-gray-400 mt-3">CAPA verification rate: {capaRows.length > 0 ? Math.round((capaVerifiedCount / capaRows.length) * 100) : 'N/A'}%</p>
</div>
)}
</main>
)
}