116 lines
4.6 KiB
TypeScript
116 lines
4.6 KiB
TypeScript
export const dynamic = 'force-dynamic'
|
|
|
|
import Link from 'next/link'
|
|
import { createClient } from '@/lib/supabase/server'
|
|
import { redirect } from 'next/navigation'
|
|
|
|
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-600',
|
|
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',
|
|
}
|
|
|
|
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 ReporterPage() {
|
|
const supabase = await createClient()
|
|
const { data: { user } } = await supabase.auth.getUser()
|
|
if (!user) redirect('/login')
|
|
|
|
const { data: profile } = await supabase.from('users').select('name').eq('id', user.id).single()
|
|
|
|
const { data: incidents } = await supabase
|
|
.from('incidents')
|
|
.select('id, reference_no, incident_type, status, reported_at, severity, sites (name)')
|
|
.eq('reported_by', user.id)
|
|
.order('reported_at', { ascending: false })
|
|
|
|
const rows = incidents ?? []
|
|
const openCount = rows.filter(r => r.status !== 'closed').length
|
|
const closedCount = rows.filter(r => r.status === 'closed').length
|
|
|
|
return (
|
|
<main className="max-w-2xl 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">My Reports</h1>
|
|
<p className="text-sm text-gray-400 mt-0.5">Welcome, {profile?.name ?? user.email}</p>
|
|
</div>
|
|
<Link
|
|
href="/report"
|
|
className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700"
|
|
>
|
|
+ New Report
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex gap-4 mb-6 text-sm">
|
|
<div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
|
|
<p className="text-2xl font-bold text-gray-900">{rows.length}</p>
|
|
<p className="text-xs text-gray-500 mt-1">Total Submitted</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
|
|
<p className="text-2xl font-bold text-yellow-600">{openCount}</p>
|
|
<p className="text-xs text-gray-500 mt-1">In Progress</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
|
|
<p className="text-2xl font-bold text-green-600">{closedCount}</p>
|
|
<p className="text-xs text-gray-500 mt-1">Closed</p>
|
|
</div>
|
|
</div>
|
|
|
|
{rows.length === 0 ? (
|
|
<div className="bg-white rounded-xl shadow-sm p-8 text-center">
|
|
<p className="text-gray-400 text-sm mb-4">No incidents reported yet.</p>
|
|
<Link href="/report" className="text-blue-600 text-sm hover:underline">Submit your first report →</Link>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white rounded-xl shadow-sm divide-y divide-gray-50">
|
|
{rows.map(inc => {
|
|
const siteName = (inc.sites as unknown as { name: string } | null)?.name
|
|
return (
|
|
<div key={inc.id} className="p-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-semibold text-gray-900">
|
|
{inc.reference_no ?? inc.id.slice(0, 8)}
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-0.5">
|
|
{TYPE_LABELS[inc.incident_type] ?? inc.incident_type}
|
|
{siteName ? ` · ${siteName}` : ''}
|
|
{inc.severity ? ` · Severity ${inc.severity}` : ''}
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">
|
|
{new Date(inc.reported_at as string).toLocaleDateString('en-MY', {
|
|
day: 'numeric', month: 'short', year: 'numeric',
|
|
})}
|
|
</p>
|
|
</div>
|
|
<span className={`text-xs rounded-full px-2 py-0.5 shrink-0 ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-600'}`}>
|
|
{STATUS_LABELS[inc.status] ?? inc.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|