From 69df45250cf25faaa08a15c7c03686daa85143f7 Mon Sep 17 00:00:00 2001
From: weeihan <whyap79@gmail.com>
Date: Sat, 11 Jul 2026 18:16:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20supervisor=20dashboard=20=E2=80=94=20ded?=
 =?UTF-8?q?up=20incident=20ID=20queries,=20accurate=20counts,=20due=5Fdate?=
 =?UTF-8?q?=20null=20guard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V5pD9CZzUjknw5nxzX5abr
---
 app/(protected)/supervisor/page.tsx | 37 +++++++++++++++++------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/(protected)/supervisor/page.tsx b/app/(protected)/supervisor/page.tsx
index af47a01..92906ca 100644
--- a/app/(protected)/supervisor/page.tsx
+++ b/app/(protected)/supervisor/page.tsx
@@ -46,9 +46,17 @@ export default async function SupervisorPage() {
   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 },
-    { data: closedIncidents },
+    { count: closedCount },
+    { count: openCount },
     { data: overdueCapas },
     { data: allCapas },
   ] = await Promise.all([
@@ -61,28 +69,27 @@ export default async function SupervisorPage() {
       .limit(10),
     supabase
       .from('incidents')
-      .select('id')
+      .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',
-        (await supabase.from('incidents').select('id').eq('site_id', profile.site_id)).data?.map(r => r.id) ?? []
-      ),
+      .in('incident_id', incidentIds),
     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) ?? []
-      ),
+      .in('incident_id', incidentIds),
   ])
 
-  const openCount = openIncidents?.length ?? 0
-  const closedCount = closedIncidents?.length ?? 0
+  const resolvedOpenCount = openCount ?? 0
+  const resolvedClosedCount = closedCount ?? 0
   const overdueCount = overdueCapas?.length ?? 0
 
   const capaRows = allCapas ?? []
@@ -108,8 +115,8 @@ export default async function SupervisorPage() {
 
       {/* 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 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>
@@ -154,7 +161,7 @@ export default async function SupervisorPage() {
                   </p>
                 </div>
                 <span className="text-xs text-red-600 font-semibold shrink-0">
-                  Due {new Date(capa.due_date as string).toLocaleDateString('en-MY')}
+                  Due {capa.due_date ? new Date(capa.due_date as string).toLocaleDateString('en-MY') : '—'}
                 </span>
               </div>
             ))}