feat: reports tier 1 and fix client navigation DOM errors

Add week summary cards, surgery/nurse/category breakdowns, incidents CSV export, richer demo seed, and stop removing the PWA boot splash node outside React during route changes.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: tomal214

docs/demo-script.md

@@ -38,8 +38,10 @@ Use the seeded demo practice after `supabase db reset`.
 3. Highlight session warning banner when within 30 minutes of lock (13:15 / 18:00)
 4. Review per-surgery and per-nurse breakdown tables
 
-## 5. Reports + export (30s)
+## 5. Reports + export (1 min)
 
 1. Open **Reports** → 8-week completion + incidents chart
-2. Select a week → **Export CSV**
-3. Optional: **History** → date filter → export audit CSV
+2. Select a week → review summary cards (completion, mandatory missed, incidents, photos)
+3. Switch tabs: **By surgery** / **By nurse** / **By category**
+4. **Export tasks CSV** and **Export incidents CSV**
+5. Optional: **History** → date filter → export audit CSV

docs/superpowers/plans/2026-06-16-reports-tier-1.md

@@ -0,0 +1,26 @@
+# Reports Tier 1 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Enrich `/app/reports` with week summary cards, surgery/nurse/category breakdown tables, incidents CSV export, tests, and demo seed data.
+
+**Architecture:** Pure aggregation in `src/lib/reports/week-breakdown.ts`; `getWeekReportDetail` in reports service; `GET /api/reports/week` + `GET /api/reports/export/incidents`; extend `ReportsView` UI.
+
+**Tech Stack:** Next.js App Router, Vitest, Supabase, shadcn Tabs
+
+---
+
+## Files
+
+| File | Action |
+|------|--------|
+| `src/lib/reports/week-breakdown.ts` | Create — summary + breakdown aggregators |
+| `src/lib/reports/incidents-csv.ts` | Create — incidents CSV builder |
+| `src/lib/services/reports.ts` | Modify — week detail + incidents export |
+| `src/lib/app/page-data.ts` | Modify — `loadWeekReportDetail` |
+| `src/app/api/reports/week/route.ts` | Create |
+| `src/app/api/reports/export/incidents/route.ts` | Create |
+| `src/components/app/ReportsView.tsx` | Modify — cards, tabs, dual export |
+| `supabase/seed.sql` | Modify — 8 weeks history, incidents, photos |
+| `tests/unit/reports/week-breakdown.test.ts` | Create |
+| `tests/unit/reports/incidents-csv.test.ts` | Create |

docs/testing.md

@@ -53,7 +53,7 @@ Local setup: `supabase db reset` then `pnpm dev` → **http://localhost:3000**
 
 ## What to test (by flow)
 
-**Manager** — dashboard stats, staff edit, template create/edit (category, priority, evidence), rota publish, reports CSV export.
+**Manager** — dashboard stats, staff edit, template create/edit (category, priority, evidence), rota publish, reports (week summary + breakdown tabs + tasks/incidents CSV export).
 
 **Nurse** — progress bar, category chips, complete task with checklist/photo, morning sign-off, surgery switcher.
 

src/app/api/reports/export/incidents/route.ts

@@ -0,0 +1,48 @@
+import { createClient } from '@/lib/supabase/server'
+import { createAdminClient } from '@/lib/supabase/admin'
+import {
+  MemberAuthError,
+  requireManagerViewerOrAdmin,
+} from '@/lib/auth/member'
+import { jsonError } from '@/lib/api/response'
+import { reportsExportQuerySchema } from '@/lib/validation/reports'
+import { exportIncidentsCsv } from '@/lib/services/reports'
+
+export async function GET(request: Request) {
+  try {
+    const supabase = await createClient()
+    const member = await requireManagerViewerOrAdmin(supabase)
+
+    const { searchParams } = new URL(request.url)
+    const parsed = reportsExportQuerySchema.safeParse({
+      from: searchParams.get('from'),
+      to: searchParams.get('to'),
+    })
+
+    if (!parsed.success) {
+      return jsonError(parsed.error.issues[0]?.message ?? 'Invalid request', 400)
+    }
+
+    const admin = createAdminClient()
+    const csv = await exportIncidentsCsv(
+      admin,
+      member,
+      parsed.data.from,
+      parsed.data.to
+    )
+
+    return new Response(csv, {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/csv; charset=utf-8',
+        'Content-Disposition': `attachment; filename="effinic-incidents-${parsed.data.from}-${parsed.data.to}.csv"`,
+      },
+    })
+  } catch (error) {
+    if (error instanceof MemberAuthError) {
+      return jsonError(error.message, error.status)
+    }
+    console.error('Incidents export failed:', error)
+    return jsonError('Something went wrong', 500)
+  }
+}

src/app/api/reports/week/route.ts

@@ -0,0 +1,40 @@
+import { createClient } from '@/lib/supabase/server'
+import { createAdminClient } from '@/lib/supabase/admin'
+import {
+  MemberAuthError,
+  requireManagerViewerOrAdmin,
+} from '@/lib/auth/member'
+import { jsonError, jsonOk } from '@/lib/api/response'
+import { reportsWeekQuerySchema } from '@/lib/validation/reports'
+import { getWeekReportDetail } from '@/lib/services/reports'
+
+export async function GET(request: Request) {
+  try {
+    const supabase = await createClient()
+    const member = await requireManagerViewerOrAdmin(supabase)
+
+    const { searchParams } = new URL(request.url)
+    const parsed = reportsWeekQuerySchema.safeParse({
+      weekStart: searchParams.get('weekStart'),
+    })
+
+    if (!parsed.success) {
+      return jsonError(parsed.error.issues[0]?.message ?? 'Invalid request', 400)
+    }
+
+    const admin = createAdminClient()
+    const detail = await getWeekReportDetail(
+      admin,
+      member,
+      parsed.data.weekStart
+    )
+
+    return jsonOk(detail)
+  } catch (error) {
+    if (error instanceof MemberAuthError) {
+      return jsonError(error.message, error.status)
+    }
+    console.error('Week report detail failed:', error)
+    return jsonError('Something went wrong', 500)
+  }
+}

src/app/app/(dashboard)/loading.tsx

@@ -1,5 +1,5 @@
-import BrandedBootScreen from '@/components/app/loading/branded-boot-screen'
+import DashboardLoadingSkeleton from '@/components/app/loading/dashboard-skeleton'
 
 export default function DashboardLoading() {
-  return <BrandedBootScreen message="Loading dashboard…" />
+  return <DashboardLoadingSkeleton />
 }

src/app/app/loading.tsx

@@ -1,5 +1,14 @@
-import BrandedBootScreen from '@/components/app/loading/branded-boot-screen'
+import {
+  AppPageLoadingShell,
+  PageHeaderSkeleton,
+} from '@/components/app/loading/page-shell'
+import { Skeleton } from '@/components/ui/skeleton'
 
 export default function AppLoading() {
-  return <BrandedBootScreen message="Opening Effinic…" />
+  return (
+    <AppPageLoadingShell label="Loading page">
+      <PageHeaderSkeleton />
+      <Skeleton className="h-48 w-full rounded-xl" />
+    </AppPageLoadingShell>
+  )
 }

src/app/app/template.tsx

@@ -225,28 +225,30 @@ function MobileMoreSheet({
   const [open, setOpen] = useState(false)
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <>
       <MobileMoreTab active={active} onOpen={() => setOpen(true)} />
-      <SheetContent
-        side="bottom"
-        showCloseButton
-        className="rounded-t-2xl pb-[max(1rem,env(safe-area-inset-bottom))]"
-      >
-        <SheetHeader className="text-left">
-          <SheetTitle>More</SheetTitle>
-        </SheetHeader>
-        <nav className="flex flex-col gap-1 px-1">
-          {items.map((item) => (
-            <NavLink
-              key={item.href}
-              item={item}
-              pathname={pathname}
-              variant="sheet"
-              onNavigate={() => setOpen(false)}
-            />
-          ))}
-        </nav>
-      </SheetContent>
-    </Sheet>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent
+          side="bottom"
+          showCloseButton
+          className="rounded-t-2xl pb-[max(1rem,env(safe-area-inset-bottom))]"
+        >
+          <SheetHeader className="text-left">
+            <SheetTitle>More</SheetTitle>
+          </SheetHeader>
+          <nav className="flex flex-col gap-1 px-1">
+            {items.map((item) => (
+              <NavLink
+                key={item.href}
+                item={item}
+                pathname={pathname}
+                variant="sheet"
+                onNavigate={() => setOpen(false)}
+              />
+            ))}
+          </nav>
+        </SheetContent>
+      </Sheet>
+    </>
   )
 }

src/components/app/AppNav.tsx

@@ -31,7 +31,8 @@ export default function PwaBootSplash() {
     if (!splash) return
 
     if (!isStandalonePwa()) {
-      splash.remove()
+      splash.style.display = 'none'
+      splash.setAttribute('aria-hidden', 'true')
       return
     }
 
@@ -43,7 +44,10 @@ export default function PwaBootSplash() {
       if (cancelled) return
       splashEl.style.opacity = '0'
       splashEl.style.pointerEvents = 'none'
-      window.setTimeout(() => splashEl.remove(), FADE_MS)
+      window.setTimeout(() => {
+        splashEl.style.display = 'none'
+        splashEl.setAttribute('aria-hidden', 'true')
+      }, FADE_MS)
     }
 
     function tryDismiss() {