# Phase 3 — AI Features & Dashboard Upgrade

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Complete Phase 3 by building functional dashboards for all 5 roles (Management, Supervisor, CAPA Owner, Reporter — HSE already done) and a shared CSV export endpoint.

**Architecture:** All dashboards are Next.js server components (`force-dynamic`), scoped to the authenticated user's role and site. Supervisor dashboard filters by `users.site_id`. CAPA Owner and Reporter dashboards filter by `auth.uid()`. CSV export is a single API route with a `role` query param. No new DB tables required.

**Tech Stack:** Next.js 15 App Router, Supabase (server client), `@supabase/ssr`, Tailwind CSS, `StatCard` component at `components/dashboard/stat-card.tsx`, Vitest 4.

## Already Complete (do not re-implement)

- `lib/claude/client.ts` — Anthropic client singleton
- `lib/claude/embed.ts` — Voyage AI embed helper
- `app/api/incidents/ai/quality-check/route.ts` — report quality check (wired in `report-form.tsx`)
- `app/api/incidents/[id]/ai/triage-suggest/route.ts` — triage severity suggestion (wired in `triage-form.tsx`)
- `app/api/incidents/[id]/ai/rca-draft/route.ts` — RCA/CAPA draft (wired in `investigation-form.tsx`)
- `app/(protected)/hse/dashboard/page.tsx` — enhanced with leading/lagging, zone heatmap, CAPA on-time rate, DOSH filing status
- Tests: `embed.test.ts`, `quality-check.test.ts`, `triage-suggest.test.ts`, `metrics.test.ts`

## Global Constraints

- `export const dynamic = 'force-dynamic'` on every `route.ts` and `page.tsx` in this plan.
- Auth pattern: `supabase.auth.getUser()` then role/site check. Never trust client-sent user IDs.
- Supabase join type casts: `as unknown as { name: string }` for relational fields — never trust inferred join types.
- `StatCard` props: `{ label: string; value: number; sub?: string; accent?: 'default' | 'green' | 'yellow' | 'red' }`.
- Never commit `.env`, API keys, or secrets.
- Test files in `tests/`.

---

## File Map

**New files:**
- `app/api/dashboard/export/route.ts` — CSV export for HSE and Management roles
- `tests/api/incidents/rca-draft.test.ts` — test for existing RCA draft route

**Modified files:**
- `app/(protected)/management/page.tsx` — replace placeholder with data dashboard
- `app/(protected)/supervisor/page.tsx` — replace nav links with site-scoped data dashboard
- `app/(protected)/capa-owner/page.tsx` — replace placeholder with user-scoped CAPA list
- `app/(protected)/reporter/page.tsx` — replace placeholder with user-scoped incident list

---

### Task 1: Management dashboard

Replace the placeholder at `app/(protected)/management/page.tsx` with a data-driven executive dashboard. No sub-components — all rendering inline.

**Files:**
- Modify: `app/(protected)/management/page.tsx`

**Interfaces:**
- Consumes: `incidents` (count, severity, type, status, reported_at), `capa_actions` (overdue count)
- Produces: visible management dashboard at `/management`

- [ ] **Step 1: Replace `app/(protected)/management/page.tsx`**

```typescript
export const dynamic = 'force-dynamic'

import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { StatCard } from '@/components/dashboard/stat-card'

export default async function ManagementPage() {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect('/login')

  const { data: profile } = await supabase.from('users').select('role').eq('id', user.id).single()
  if (!profile || !['management', 'admin'].includes(profile.role)) redirect('/')

  const now = new Date()
  const thisMonthStart = new Date(now.getFullYear(), now.getMonth(), 1).toISOString()
  const lastMonthStart = new Date(now.getFullYear(), now.getMonth() - 1, 1).toISOString()
  const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString()

  const [
    { data: allIncidents },
    { data: thisMonthIncidents },
    { data: lastMonthIncidents },
    { data: recentIncidents },
    { data: overdueCapas },
  ] = await Promise.all([
    supabase.from('incidents').select('id, severity, status, incident_type, medical_status, sites (name)'),
    supabase.from('incidents').select('id').gte('reported_at', thisMonthStart),
    supabase.from('incidents').select('id').gte('reported_at', lastMonthStart).lt('reported_at', thisMonthStart),
    supabase.from('incidents').select('incident_type').gte('reported_at', thirtyDaysAgo),
    supabase.from('capa_actions').select('id').eq('status', 'overdue'),
  ])

  const rows = allIncidents ?? []
  const totalThisMonth = thisMonthIncidents?.length ?? 0
  const totalLastMonth = lastMonthIncidents?.length ?? 0
  const monthDelta = totalThisMonth - totalLastMonth

  const ltiCount = rows.filter(r => r.medical_status === 'lti').length
  const overdueCount = overdueCapas?.length ?? 0

  // Severity distribution
  const severityDist: Record<number, number> = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 }
  for (const r of rows) {
    if (r.severity && r.severity >= 1 && r.severity <= 5) {
      severityDist[r.severity] = (severityDist[r.severity] ?? 0) + 1
    }
  }
  const severityMax = Math.max(...Object.values(severityDist), 1)

  // Leading vs lagging (last 30 days)
  const recent = recentIncidents ?? []
  const leadingCount = recent.filter(r => ['hazard', 'near_miss'].includes(r.incident_type)).length
  const laggingCount = recent.filter(r => r.incident_type === 'injury').length

  // Site comparison
  const siteMap: Record<string, number> = {}
  for (const r of rows) {
    const name = (r.sites as unknown as { name: string } | null)?.name ?? 'Unknown'
    siteMap[name] = (siteMap[name] ?? 0) + 1
  }
  const by_site = Object.entries(siteMap).map(([name, count]) => ({ name, count })).sort((a, b) => b.count - a.count)

  const SEVERITY_LABELS: Record<number, string> = { 1: 'Minor', 2: 'Low', 3: 'Moderate', 4: 'Serious', 5: 'Critical' }
  const SEVERITY_COLORS: Record<number, string> = {
    1: 'bg-green-400', 2: 'bg-yellow-400', 3: 'bg-orange-400', 4: 'bg-red-500', 5: 'bg-red-700',
  }

  return (
    <main className="max-w-4xl mx-auto px-4 py-6">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Management Dashboard</h1>

      {/* Summary stats */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
        <StatCard
          label="This Month"
          value={totalThisMonth}
          sub={monthDelta >= 0 ? `+${monthDelta} vs last month` : `${monthDelta} vs last month`}
          accent={monthDelta > 0 ? 'yellow' : 'green'}
        />
        <StatCard label="LTI Count" value={ltiCount} accent={ltiCount > 0 ? 'red' : 'green'} sub="lost-time injuries" />
        <StatCard label="CAPA Overdue" value={overdueCount} accent={overdueCount > 0 ? 'red' : 'green'} sub="past due date" />
        <StatCard label="Total (All Time)" value={rows.length} />
      </div>

      {/* Leading vs lagging */}
      <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-1">Leading vs Lagging — Last 30 Days</h2>
        <p className="text-xs text-gray-400 mb-4">Leading: hazard + near-miss · Lagging: injuries</p>
        <div className="flex gap-6">
          <div className="flex-1 text-center bg-blue-50 rounded-lg p-4">
            <p className="text-3xl font-bold text-blue-600">{leadingCount}</p>
            <p className="text-xs text-blue-700 mt-1">Leading (Hazards + Near Misses)</p>
          </div>
          <div className="flex-1 text-center bg-red-50 rounded-lg p-4">
            <p className="text-3xl font-bold text-red-600">{laggingCount}</p>
            <p className="text-xs text-red-700 mt-1">Lagging (Injuries)</p>
          </div>
        </div>
      </div>

      {/* Severity distribution */}
      <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">Severity Distribution (All Time)</h2>
        <div className="space-y-2">
          {([5, 4, 3, 2, 1] as const).map(sev => (
            <div key={sev} className="flex items-center gap-3">
              <span className="text-sm text-gray-600 w-24 shrink-0">{SEVERITY_LABELS[sev]}</span>
              <div className="flex-1 bg-gray-100 rounded-full h-3">
                <div
                  className={`h-3 rounded-full ${SEVERITY_COLORS[sev]}`}
                  style={{ width: severityMax > 0 ? `${(severityDist[sev] / severityMax) * 100}%` : '0%' }}
                />
              </div>
              <span className="text-sm font-semibold text-gray-900 w-6 text-right">{severityDist[sev]}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Site comparison */}
      <div className="bg-white rounded-xl shadow-sm p-5">
        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Incidents by Site</h2>
        {by_site.length === 0 ? (
          <p className="text-sm text-gray-400">No data</p>
        ) : (
          <div className="space-y-2">
            {by_site.map(({ name, count }) => (
              <div key={name} className="flex items-center justify-between py-1 border-b border-gray-50 last:border-0">
                <span className="text-sm text-gray-700">{name}</span>
                <span className="text-sm font-semibold text-gray-900">{count}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </main>
  )
}
```

- [ ] **Step 2: Verify build**

```bash
npm run build 2>&1 | tail -20
```

Expected: `✓ Compiled successfully` with no TS errors.

- [ ] **Step 3: Commit**

```bash
git add app/\(protected\)/management/page.tsx
git commit -m "feat: management dashboard — month delta, LTI, severity distribution, site comparison"
```

---

### Task 2: Supervisor dashboard

Replace the nav-links placeholder at `app/(protected)/supervisor/page.tsx` with a site-scoped data dashboard. Supervisor sees only incidents and CAPAs for their assigned site (`users.site_id`).

**Files:**
- Modify: `app/(protected)/supervisor/page.tsx`

**Interfaces:**
- Consumes: `users.site_id` (to scope queries), `incidents` (filtered by site), `capa_actions` (via incident join for site)
- Produces: visible supervisor dashboard at `/supervisor`

- [ ] **Step 1: Replace `app/(protected)/supervisor/page.tsx`**

```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'

  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">
      <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={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>
  )
}
```

- [ ] **Step 2: Verify build**

```bash
npm run build 2>&1 | tail -20
```

Expected: `✓ Compiled successfully`

- [ ] **Step 3: Commit**

```bash
git add app/\(protected\)/supervisor/page.tsx
git commit -m "feat: supervisor dashboard — site-scoped open incidents, overdue CAPAs"
```

---

### Task 3: CAPA Owner dashboard

Replace the placeholder at `app/(protected)/capa-owner/page.tsx` with a user-scoped CAPA list showing the authenticated user's assigned actions.

**Files:**
- Modify: `app/(protected)/capa-owner/page.tsx`

**Interfaces:**
- Consumes: `capa_actions.owner_user_id = auth.uid()`, `incidents` (for reference_no)
- Produces: visible CAPA owner dashboard at `/capa-owner`

- [ ] **Step 1: Replace `app/(protected)/capa-owner/page.tsx`**

```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> = {
  open: 'Open',
  in_progress: 'In Progress',
  overdue: 'Overdue',
  pending_verification: 'Pending Verification',
  verified: 'Verified',
  reopened: 'Reopened',
  closed: 'Closed',
}

const STATUS_COLORS: Record<string, string> = {
  open: 'bg-gray-100 text-gray-700',
  in_progress: 'bg-blue-100 text-blue-700',
  overdue: 'bg-red-100 text-red-700',
  pending_verification: 'bg-purple-100 text-purple-700',
  verified: 'bg-green-100 text-green-700',
  reopened: 'bg-orange-100 text-orange-700',
  closed: 'bg-gray-100 text-gray-500',
}

export default async function CapaOwnerPage() {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect('/login')

  const { data: profile } = await supabase.from('users').select('name, role').eq('id', user.id).single()
  if (!profile || !['capa_owner', 'admin', 'hse', 'supervisor'].includes(profile.role)) redirect('/')

  const { data: capas } = await supabase
    .from('capa_actions')
    .select('id, description, due_date, priority, status, incident_id, incidents (reference_no)')
    .eq('owner_user_id', user.id)
    .order('due_date', { ascending: true })

  const rows = capas ?? []
  const openCount = rows.filter(c => ['open', 'in_progress', 'reopened'].includes(c.status)).length
  const overdueCount = rows.filter(c => c.status === 'overdue').length
  const doneCount = rows.filter(c => ['verified', 'closed'].includes(c.status)).length

  const PRIORITY_COLORS: Record<string, string> = {
    high: 'text-red-600 font-semibold',
    med: 'text-orange-500 font-medium',
    low: 'text-gray-400',
  }

  const activeRows = rows.filter(c => !['verified', 'closed'].includes(c.status))
  const doneRows = rows.filter(c => ['verified', 'closed'].includes(c.status))

  return (
    <main className="max-w-4xl mx-auto px-4 py-6">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">My CAPAs</h1>

      <div className="grid grid-cols-3 gap-4 mb-6">
        <StatCard label="Active" value={openCount} accent={openCount > 0 ? 'yellow' : 'green'} />
        <StatCard label="Overdue" value={overdueCount} accent={overdueCount > 0 ? 'red' : 'green'} />
        <StatCard label="Completed" value={doneCount} accent="green" />
      </div>

      {activeRows.length === 0 ? (
        <div className="bg-white rounded-xl shadow-sm p-8 text-center">
          <p className="text-gray-400 text-sm">No active CAPAs assigned to you.</p>
        </div>
      ) : (
        <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-50">
          {activeRows.map(capa => {
            const incRef = (capa.incidents as unknown as { reference_no: string | null } | null)?.reference_no
            const isOverdue = capa.status === 'overdue'
            return (
              <div key={capa.id} className={`p-4 ${isOverdue ? 'bg-red-50' : ''}`}>
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <p className="text-sm text-gray-800">{capa.description}</p>
                    {incRef && (
                      <Link href={`/hse/incidents/${capa.incident_id}`} className="text-xs text-blue-600 hover:underline mt-0.5 block">
                        {incRef}
                      </Link>
                    )}
                  </div>
                  <div className="shrink-0 text-right">
                    <span className={`text-xs rounded-full px-2 py-0.5 ${STATUS_COLORS[capa.status] ?? 'bg-gray-100 text-gray-600'}`}>
                      {STATUS_LABELS[capa.status] ?? capa.status}
                    </span>
                    <p className={`text-xs mt-1 ${isOverdue ? 'text-red-600 font-semibold' : 'text-gray-400'}`}>
                      Due {new Date(capa.due_date as string).toLocaleDateString('en-MY')}
                    </p>
                    <p className={`text-xs mt-0.5 ${PRIORITY_COLORS[capa.priority as string] ?? ''}`}>
                      {(capa.priority as string)?.toUpperCase()} priority
                    </p>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      )}

      {doneRows.length > 0 && (
        <div className="mt-6">
          <h2 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Completed ({doneCount})</h2>
          <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-50 opacity-60">
            {doneRows.map(capa => (
              <div key={capa.id} className="p-4 flex items-center justify-between">
                <p className="text-sm text-gray-500 line-clamp-1">{capa.description}</p>
                <span className={`text-xs rounded-full px-2 py-0.5 ml-4 shrink-0 ${STATUS_COLORS[capa.status] ?? 'bg-gray-100'}`}>
                  {STATUS_LABELS[capa.status] ?? capa.status}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </main>
  )
}
```

- [ ] **Step 2: Verify build**

```bash
npm run build 2>&1 | tail -20
```

Expected: `✓ Compiled successfully`

- [ ] **Step 3: Commit**

```bash
git add app/\(protected\)/capa-owner/page.tsx
git commit -m "feat: CAPA owner dashboard — user-scoped active and completed CAPAs"
```

---

### Task 4: Reporter dashboard

Replace the placeholder at `app/(protected)/reporter/page.tsx` with a user-scoped incident list showing submissions by the authenticated reporter.

**Files:**
- Modify: `app/(protected)/reporter/page.tsx`

**Interfaces:**
- Consumes: `incidents.reported_by = auth.uid()`
- Produces: visible reporter dashboard at `/reporter`

- [ ] **Step 1: Replace `app/(protected)/reporter/page.tsx`**

```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>
  )
}
```

- [ ] **Step 2: Verify build**

```bash
npm run build 2>&1 | tail -20
```

Expected: `✓ Compiled successfully`

- [ ] **Step 3: Commit**

```bash
git add app/\(protected\)/reporter/page.tsx
git commit -m "feat: reporter dashboard — user-scoped incident submissions with status"
```

---

### Task 5: CSV export endpoint

Single API route with a `role` query param. HSE export includes all incidents with key fields. Management export includes the same but adds severity column. Both require the requesting user to be HSE/admin or management/admin respectively.

**Files:**
- Create: `app/api/dashboard/export/route.ts`

**Interfaces:**
- Produces: `GET /api/dashboard/export?role=hse` and `GET /api/dashboard/export?role=management` → `Content-Type: text/csv` response

- [ ] **Step 1: Create `app/api/dashboard/export/route.ts`**

```typescript
export const dynamic = 'force-dynamic'

import { NextRequest, NextResponse } from 'next/server'
import { createClient } from '@/lib/supabase/server'

function escapeCsv(value: string | number | null | undefined): string {
  if (value === null || value === undefined) return ''
  const str = String(value)
  if (str.includes(',') || str.includes('"') || str.includes('\n')) {
    return `"${str.replace(/"/g, '""')}"`
  }
  return str
}

function rowsToCsv(headers: string[], rows: string[][]): string {
  const lines = [headers.map(escapeCsv).join(',')]
  for (const row of rows) lines.push(row.map(escapeCsv).join(','))
  return lines.join('\r\n')
}

export async function GET(request: NextRequest) {
  const supabase = await createClient()
  const { data: { user }, error: authError } = await supabase.auth.getUser()
  if (authError || !user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })

  const { data: profile } = await supabase.from('users').select('role').eq('id', user.id).single()
  if (!profile) return NextResponse.json({ error: 'Forbidden' }, { status: 403 })

  const role = request.nextUrl.searchParams.get('role') ?? 'hse'

  const allowedRoles: Record<string, string[]> = {
    hse: ['hse', 'admin'],
    management: ['management', 'admin'],
  }

  if (!allowedRoles[role] || !allowedRoles[role].includes(profile.role)) {
    return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
  }

  const { data: incidents } = await supabase
    .from('incidents')
    .select(`
      reference_no, incident_type, status, severity, reported_at, closed_at,
      injury_involved, medical_status, lost_days,
      sites (name), zones (name)
    `)
    .order('reported_at', { ascending: false })

  const rows = incidents ?? []

  const headers = [
    'Reference', 'Type', 'Status', 'Severity', 'Site', 'Zone',
    'Reported At', 'Closed At', 'Injury Involved', 'Medical Status', 'Lost Days',
  ]

  const csvRows = rows.map(inc => {
    const siteName = (inc.sites as unknown as { name: string } | null)?.name ?? ''
    const zoneName = (inc.zones as unknown as { name: string } | null)?.name ?? ''
    return [
      inc.reference_no ?? '',
      inc.incident_type,
      inc.status,
      String(inc.severity ?? ''),
      siteName,
      zoneName,
      inc.reported_at ? new Date(inc.reported_at as string).toISOString().split('T')[0] : '',
      inc.closed_at ? new Date(inc.closed_at as string).toISOString().split('T')[0] : '',
      inc.injury_involved ? 'Yes' : 'No',
      inc.medical_status ?? '',
      String(inc.lost_days ?? ''),
    ]
  })

  const csv = rowsToCsv(headers, csvRows)
  const filename = `incidents-${role}-${new Date().toISOString().split('T')[0]}.csv`

  return new NextResponse(csv, {
    status: 200,
    headers: {
      'Content-Type': 'text/csv; charset=utf-8',
      'Content-Disposition': `attachment; filename="${filename}"`,
    },
  })
}
```

- [ ] **Step 2: Add export link to HSE dashboard**

In `app/(protected)/hse/dashboard/page.tsx`, replace the existing header `<div>` (the one with "View all incidents →") with:

```tsx
<div className="flex items-center justify-between mb-6">
  <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
  <div className="flex gap-3">
    <a
      href="/api/dashboard/export?role=hse"
      className="text-sm text-gray-500 hover:text-gray-700 border border-gray-200 rounded-lg px-3 py-1.5"
    >
      Export CSV
    </a>
    <Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline">
      View all incidents →
    </Link>
  </div>
</div>
```

- [ ] **Step 3: Add export link to Management dashboard**

In `app/(protected)/management/page.tsx`, replace `<h1 className="text-2xl font-bold text-gray-900 mb-6">Management Dashboard</h1>` with:

```tsx
<div className="flex items-center justify-between mb-6">
  <h1 className="text-2xl font-bold text-gray-900">Management Dashboard</h1>
  <a
    href="/api/dashboard/export?role=management"
    className="text-sm text-gray-500 hover:text-gray-700 border border-gray-200 rounded-lg px-3 py-1.5"
  >
    Export CSV
  </a>
</div>
```

- [ ] **Step 4: Verify build**

```bash
npm run build 2>&1 | tail -20
```

Expected: `✓ Compiled successfully`

- [ ] **Step 5: Commit**

```bash
git add app/api/dashboard/export/route.ts app/\(protected\)/hse/dashboard/page.tsx app/\(protected\)/management/page.tsx
git commit -m "feat: CSV export endpoint for HSE and management dashboards"
```

---

### Task 6: RCA draft test + final verification

Add the missing test for the RCA draft route, run the full suite, and update the progress ledger.

**Files:**
- Create: `tests/api/incidents/rca-draft.test.ts`

**Interfaces:**
- Consumes: `app/api/incidents/[id]/ai/rca-draft/route.ts` (already exists)

- [ ] **Step 1: Write RCA draft test**

Create `tests/api/incidents/rca-draft.test.ts`:

```typescript
import { describe, it, expect, vi } from 'vitest'

vi.mock('@/lib/supabase/server', () => ({
  createClient: vi.fn().mockResolvedValue({
    auth: {
      getUser: vi.fn().mockResolvedValue({ data: { user: { id: 'user-1' } }, error: null }),
    },
    from: vi.fn().mockReturnValue({
      select: vi.fn().mockReturnThis(),
      eq: vi.fn().mockReturnThis(),
      single: vi.fn()
        .mockResolvedValueOnce({ data: { role: 'hse' } })
        .mockResolvedValueOnce({
          data: {
            id: 'inc-1',
            incident_type: 'injury',
            description: 'Forklift operator collided with racking in zone B, injuring left arm.',
            severity: 3,
            injury_involved: true,
            medical_status: 'medical_treatment',
            is_fatality: false,
            is_serious_bodily_injury: false,
            triage_notes: null,
            sites: { name: 'Warehouse A' },
            zones: { name: 'Zone B' },
          },
        }),
    }),
    rpc: vi.fn().mockResolvedValue({ error: null }),
  }),
}))

vi.mock('@/lib/claude/client', () => ({
  anthropic: {
    messages: {
      create: vi.fn().mockResolvedValue({
        content: [{
          type: 'tool_use',
          name: 'draft_rca',
          input: {
            five_why_steps: [
              { why: 'Why did the incident happen?', answer: 'Forklift entered zone B without checking for pedestrians.' },
              { why: 'Why was there no check?', answer: 'No pedestrian exclusion zone marked at zone B entrance.' },
              { why: 'Why was it not marked?', answer: 'Site hazard assessment did not include zone B forklift route.' },
            ],
            root_cause_summary: 'Absence of pedestrian exclusion zone and forklift route hazard assessment in zone B.',
            capa_suggestions: [
              'Mark pedestrian exclusion zones at all forklift routes in zone B within 7 days.',
              'Update site hazard assessment to include forklift routes in all zones.',
              'Conduct forklift safety refresher for all operators within 30 days.',
            ],
          },
        }],
      }),
    },
  },
}))

describe('POST /api/incidents/[id]/ai/rca-draft', () => {
  it('returns five_why_steps, root_cause_summary, and capa_suggestions', async () => {
    const { POST } = await import('@/app/api/incidents/[id]/ai/rca-draft/route')
    const req = new Request('http://localhost/api/incidents/inc-1/ai/rca-draft', { method: 'POST' })
    const res = await POST(req as never, { params: Promise.resolve({ id: 'inc-1' }) })
    expect(res.status).toBe(200)
    const body = await res.json()
    expect(body).toHaveProperty('five_why_steps')
    expect(Array.isArray(body.five_why_steps)).toBe(true)
    expect(body.five_why_steps.length).toBeGreaterThanOrEqual(1)
    expect(body).toHaveProperty('root_cause_summary')
    expect(typeof body.root_cause_summary).toBe('string')
    expect(body).toHaveProperty('capa_suggestions')
    expect(Array.isArray(body.capa_suggestions)).toBe(true)
  })
})
```

- [ ] **Step 2: Run test to verify it passes**

```bash
npx vitest run tests/api/incidents/rca-draft.test.ts
```

Expected: 1 passed

- [ ] **Step 3: Run full test suite**

```bash
npx vitest run
```

Expected: all tests pass

- [ ] **Step 4: Full build**

```bash
npm run build 2>&1 | tail -30
```

Expected: `✓ Compiled successfully`, zero TS/ESLint errors

- [ ] **Step 5: Update graphify graph**

```bash
graphify update .
```

Expected: graph updated with new dashboard pages and export route

- [ ] **Step 6: Commit**

```bash
git add tests/api/incidents/rca-draft.test.ts
git commit -m "test: RCA draft route test"
```

- [ ] **Step 7: Update progress ledger**

Append to `.superpowers/sdd/progress.md` (create file if missing):

```markdown
---

# Phase 3 Progress Ledger

Plan: docs/superpowers/plans/2026-07-11-phase-3-ai-dashboard.md
Started: 2026-07-11

## AI Features (complete before this plan)
- [x] lib/claude/client.ts
- [x] lib/claude/embed.ts
- [x] Report quality check (API + report-form.tsx)
- [x] Triage AI suggestion (API + triage-form.tsx)
- [x] RCA/CAPA drafting assistant (API + investigation-form.tsx)
- [x] HSE dashboard enhanced (leading/lagging, zone heatmap, CAPA on-time, DOSH filing)

## Dashboard Upgrades (this plan)
- [x] Task 1: Management dashboard
- [x] Task 2: Supervisor dashboard (site-scoped)
- [x] Task 3: CAPA Owner dashboard (user-scoped)
- [x] Task 4: Reporter dashboard (user-scoped)
- [x] Task 5: CSV export endpoint
- [x] Task 6: RCA draft test + final verification
```

```bash
git add .superpowers/sdd/progress.md
git commit -m "chore: mark Phase 3 complete in progress ledger"
```

---

## Post-Implementation Notes

- Supervisor dashboard runs two identical `incidents.select('id').eq('site_id', ...)` queries to build the CAPA `incident_id` filter — acceptable at current scale. If the CAPA count grows large, move to a Supabase RPC that does the join server-side.
- The CSV export streams the full incident table — fine for hundreds of rows; add pagination or a date-range filter if exports slow down at thousands.
- `similar-incidents-panel.tsx` exists in the repo from a prior session. It is intentionally not wired into the incident detail page in this plan — similar-incident retrieval is Phase 4 (requires pgvector + Voyage AI keys).