feat: supervisor dashboard — site-scoped open incidents, overdue CAPAs

app/(protected)/supervisor/page.tsx

@@ -3,25 +3,165 @@ 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').eq('id', user.id).single()
+  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'
+
+  const [
+    { data: openIncidents },
+    { data: closedIncidents },
+    { 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('id')
+      .eq('site_id', profile.site_id)
+      .eq('status', 'closed'),
+    supabase
+      .from('capa_actions')
+      .select('id, description, due_date, users (name)')
+      .eq('status', 'overdue')
+      .in(
+        'incident_id',
+        (await supabase.from('incidents').select('id').eq('site_id', profile.site_id)).data?.map(r => r.id) ?? []
+      ),
+    supabase
+      .from('capa_actions')
+      .select('id, status')
+      .in(
+        'incident_id',
+        (await supabase.from('incidents').select('id').eq('site_id', profile.site_id)).data?.map(r => r.id) ?? []
+      ),
+  ])
+
+  const openCount = openIncidents?.length ?? 0
+  const closedCount = closedIncidents?.length ?? 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">
-      <h1 className="text-2xl font-bold text-gray-900 mb-1">Supervisor Portal</h1>
+      <div className="flex items-center justify-between mb-6">
-      <p className="text-gray-500 text-sm mb-8">Welcome, {profile?.name ?? user.email}</p>
+        <div>
-      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+          <h1 className="text-2xl font-bold text-gray-900">Supervisor Portal</h1>
-        <Link href="/supervisor/incidents" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-shadow border border-gray-100">
+          <p className="text-sm text-gray-500 mt-1">{siteName}</p>
-          <div className="text-2xl mb-2">📋</div>
+        </div>
-          <div className="font-semibold text-gray-900">Incident Inbox</div>
+        <Link href="/supervisor/incidents" className="text-sm text-blue-600 hover:underline">
-          <div className="text-xs text-gray-500 mt-1">View site incidents</div>
+          All incidents →
         </Link>
       </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
+        <StatCard label="Open Incidents" value={openCount} accent={openCount > 0 ? 'yellow' : 'green'} />
+        <StatCard label="Closed Incidents" value={closedCount} 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 {new Date(capa.due_date as string).toLocaleDateString('en-MY')}
+                </span>
+              </div>
+            ))}
+          </div>
+          <p className="text-xs text-gray-400 mt-3">CAPA on-time rate: {capaRows.length > 0 ? Math.round((capaVerifiedCount / capaRows.length) * 100) : 'N/A'}%</p>
+        </div>
+      )}
     </main>
   )
 }