feat: CAPA board — kanban/table view, create CAPA from incident, status tracking

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FFDuBhMKvoWjrWT3ZnGmmr

app/(protected)/hse/capa/page.tsx

@@ -0,0 +1,33 @@
+export const dynamic = 'force-dynamic'
+
+import { redirect } from 'next/navigation'
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { CapaBoard } from '@/components/capa/capa-board'
+
+export default async function CapaListPage() {
+  const supabase = await createClient()
+  const { data, error: authError } = await supabase.auth.getUser()
+  if (authError || !data?.user) redirect('/login?redirect=/hse/capa')
+
+  const { data: capas } = await supabase
+    .from('capa_actions')
+    .select(`
+      id, incident_id, description, department, due_date, priority, status,
+      incidents (reference_no, incident_type),
+      owner:users!owner_user_id (name, email)
+    `)
+    .order('due_date', { ascending: true })
+
+  return (
+    <main className="max-w-6xl mx-auto px-4 py-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">CAPA Board</h1>
+        <Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline">
+          ← Incidents
+        </Link>
+      </div>
+      <CapaBoard capas={(capas ?? []) as unknown as Parameters<typeof CapaBoard>[0]['capas']} />
+    </main>
+  )
+}

app/(protected)/hse/incidents/[id]/capa/new/page.tsx

@@ -0,0 +1,47 @@
+export const dynamic = 'force-dynamic'
+
+import { notFound, redirect } from 'next/navigation'
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { CapaForm } from '@/components/capa/capa-form'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function NewCapaPage({ params }: Props) {
+  const { id } = await params
+  const supabase = await createClient()
+  const { data, error: authError } = await supabase.auth.getUser()
+  if (authError || !data?.user) redirect(`/login?redirect=/hse/incidents/${id}/capa/new`)
+
+  const { data: profile } = await supabase
+    .from('users').select('role').eq('id', data.user.id).single()
+  if (!profile || !['hse', 'admin'].includes(profile.role)) redirect('/hse/incidents')
+
+  const { data: incident } = await supabase
+    .from('incidents').select('id, reference_no, status').eq('id', id).single()
+  if (!incident) notFound()
+
+  const { data: users } = await supabase
+    .from('users')
+    .select('id, name, department')
+    .not('department', 'is', null)
+    .order('name')
+
+  return (
+    <main className="max-w-lg mx-auto px-4 py-6">
+      <Link href={`/hse/incidents/${id}`} className="text-sm text-blue-600 hover:underline mb-4 inline-block">
+        ← Back to incident
+      </Link>
+      <h1 className="text-xl font-bold text-gray-900 mb-1">Add CAPA Action</h1>
+      <p className="text-sm text-gray-500 mb-6">
+        {(incident as { reference_no: string | null }).reference_no ?? id}
+      </p>
+      <CapaForm
+        incidentId={id}
+        users={(users ?? []) as Array<{ id: string; name: string; department: string }>}
+      />
+    </main>
+  )
+}

app/api/capa/[id]/route.ts

@@ -0,0 +1,65 @@
+export const dynamic = 'force-dynamic'
+
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function GET(
+  _: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  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, error } = await supabase
+    .from('capa_actions')
+    .select(`
+      id, incident_id, root_cause_ref, description, owner_user_id, department,
+      due_date, priority, status, completed_at, verified_by, verified_at, created_at,
+      incidents (reference_no, incident_type),
+      owner:users!owner_user_id (name, email)
+    `)
+    .eq('id', id)
+    .single()
+
+  if (error || !data) return NextResponse.json({ error: 'Not found' }, { status: 404 })
+  return NextResponse.json(data)
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  const supabase = await createClient()
+  const { data: { user }, error: authError } = await supabase.auth.getUser()
+  if (authError || !user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await request.json()
+  const allowed = ['description', 'due_date', 'priority', 'status', 'department', 'root_cause_ref']
+  const update: Record<string, unknown> = {}
+  for (const key of allowed) {
+    if (key in body) update[key] = body[key]
+  }
+
+  if (body.status === 'pending_verification') {
+    update.completed_at = new Date().toISOString()
+  }
+
+  const { error } = await supabase
+    .from('capa_actions')
+    .update(update)
+    .eq('id', id)
+
+  if (error) return NextResponse.json({ error: 'Update failed' }, { status: 500 })
+
+  await supabase.rpc('write_audit_log', {
+    p_table_name: 'capa_actions',
+    p_record_id: id,
+    p_action: 'updated',
+    p_new_value: update as Record<string, unknown>,
+  })
+
+  return NextResponse.json({ ok: true })
+}

app/api/capa/route.ts

@@ -0,0 +1,74 @@
+export const dynamic = 'force-dynamic'
+
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function GET() {
+  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: 'Unauthorized' }, { status: 401 })
+
+  let query = supabase
+    .from('capa_actions')
+    .select(`
+      id, incident_id, root_cause_ref, description, owner_user_id, department,
+      due_date, priority, status, completed_at, verified_by, verified_at, created_at,
+      incidents (reference_no, incident_type),
+      owner:users!owner_user_id (name, email)
+    `)
+    .order('due_date', { ascending: true })
+
+  if (profile.role === 'supervisor' || profile.role === 'worker') {
+    query = query.eq('owner_user_id', user.id)
+  }
+
+  const { data, error } = await query
+  if (error) return NextResponse.json({ error: 'Fetch failed' }, { status: 500 })
+  return NextResponse.json(data ?? [])
+}
+
+export async function POST(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 || !['hse', 'admin'].includes(profile.role))
+    return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+
+  const body = await request.json()
+  const { incident_id, description, owner_user_id, department, due_date, priority, root_cause_ref } = body
+
+  if (!incident_id || !description || !owner_user_id || !department || !due_date)
+    return NextResponse.json({ error: 'Missing required fields' }, { status: 422 })
+
+  const { data: capa, error } = await supabase
+    .from('capa_actions')
+    .insert({
+      incident_id,
+      description,
+      owner_user_id,
+      department,
+      due_date,
+      priority: priority ?? 'med',
+      root_cause_ref: root_cause_ref ?? null,
+    })
+    .select('id')
+    .single()
+
+  if (error || !capa) return NextResponse.json({ error: 'Insert failed' }, { status: 500 })
+
+  await supabase.rpc('write_audit_log', {
+    p_table_name: 'capa_actions',
+    p_record_id: capa.id,
+    p_action: 'created',
+    p_new_value: { incident_id, description, owner_user_id, department, due_date },
+  })
+
+  return NextResponse.json({ id: capa.id }, { status: 201 })
+}

components/capa/capa-board.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+
+type CapaStatus = 'open' | 'in_progress' | 'overdue' | 'pending_verification' | 'verified' | 'reopened' | 'closed'
+
+type CapaAction = {
+  id: string
+  incident_id: string
+  description: string
+  department: string
+  due_date: string
+  priority: 'low' | 'med' | 'high'
+  status: CapaStatus
+  incidents: { reference_no: string | null } | null
+  owner: { name: string } | null
+}
+
+const STATUS_ORDER: CapaStatus[] = ['open', 'in_progress', 'overdue', 'pending_verification', 'verified', 'closed']
+const STATUS_LABELS: Record<CapaStatus, string> = {
+  open: 'Open',
+  in_progress: 'In Progress',
+  overdue: 'Overdue',
+  pending_verification: 'Pending Verification',
+  verified: 'Verified',
+  reopened: 'Reopened',
+  closed: 'Closed',
+}
+const STATUS_COLORS: Record<CapaStatus, string> = {
+  open: 'bg-blue-50 border-blue-200',
+  in_progress: 'bg-yellow-50 border-yellow-200',
+  overdue: 'bg-red-50 border-red-200',
+  pending_verification: 'bg-purple-50 border-purple-200',
+  verified: 'bg-green-50 border-green-200',
+  reopened: 'bg-orange-50 border-orange-200',
+  closed: 'bg-gray-50 border-gray-200',
+}
+const PRIORITY_BADGE: Record<'low' | 'med' | 'high', string> = {
+  low: 'bg-gray-100 text-gray-600',
+  med: 'bg-yellow-100 text-yellow-700',
+  high: 'bg-red-100 text-red-700',
+}
+
+interface Props {
+  capas: CapaAction[]
+}
+
+export function CapaBoard({ capas }: Props) {
+  const [view, setView] = useState<'board' | 'table'>('board')
+
+  const byStatus = STATUS_ORDER.reduce<Record<CapaStatus, CapaAction[]>>((acc, s) => {
+    acc[s] = capas.filter(c => c.status === s)
+    return acc
+  }, {} as Record<CapaStatus, CapaAction[]>)
+
+  if (view === 'table') {
+    return (
+      <div>
+        <div className="flex justify-end mb-3">
+          <button onClick={() => setView('board')} className="text-sm text-blue-600 hover:underline">Board view</button>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="text-left text-xs text-gray-500 uppercase border-b">
+                <th className="pb-2 pr-4">Ref</th>
+                <th className="pb-2 pr-4">Action</th>
+                <th className="pb-2 pr-4">Owner</th>
+                <th className="pb-2 pr-4">Due</th>
+                <th className="pb-2 pr-4">Priority</th>
+                <th className="pb-2">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {capas.map(c => (
+                <tr key={c.id}>
+                  <td className="py-2 pr-4 text-gray-500 text-xs">
+                    {(c.incidents as { reference_no: string | null } | null)?.reference_no ?? '—'}
+                  </td>
+                  <td className="py-2 pr-4">
+                    <Link href={`/hse/capa/${c.id}`} className="text-blue-600 hover:underline line-clamp-2">
+                      {c.description}
+                    </Link>
+                  </td>
+                  <td className="py-2 pr-4 text-gray-600">{(c.owner as { name: string } | null)?.name ?? '—'}</td>
+                  <td className="py-2 pr-4 text-gray-600">{c.due_date}</td>
+                  <td className="py-2 pr-4">
+                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${PRIORITY_BADGE[c.priority]}`}>
+                      {c.priority}
+                    </span>
+                  </td>
+                  <td className="py-2 text-gray-600 text-xs">{STATUS_LABELS[c.status]}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div className="flex justify-end mb-3">
+        <button onClick={() => setView('table')} className="text-sm text-blue-600 hover:underline">Table view</button>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {STATUS_ORDER.filter(s => s !== 'reopened').map(status => (
+          <div key={status} className={`rounded-xl border p-4 ${STATUS_COLORS[status]}`}>
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-gray-600 mb-3">
+              {STATUS_LABELS[status]} ({byStatus[status].length})
+            </h3>
+            <div className="space-y-2">
+              {byStatus[status].map(c => (
+                <Link key={c.id} href={`/hse/capa/${c.id}`}
+                  className="block bg-white rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
+                  <p className="text-sm text-gray-800 line-clamp-2 mb-1">{c.description}</p>
+                  <div className="flex items-center justify-between text-xs text-gray-500">
+                    <span>{(c.owner as { name: string } | null)?.name ?? '—'}</span>
+                    <span className={`px-1.5 py-0.5 rounded ${PRIORITY_BADGE[c.priority]}`}>{c.priority}</span>
+                  </div>
+                  <p className="text-xs text-gray-400 mt-1">Due {c.due_date}</p>
+                </Link>
+              ))}
+              {byStatus[status].length === 0 && (
+                <p className="text-xs text-gray-400 text-center py-3">Empty</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

components/capa/capa-form.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+interface User {
+  id: string
+  name: string
+  department: string
+}
+
+interface Props {
+  incidentId: string
+  users: User[]
+}
+
+export function CapaForm({ incidentId, users }: Props) {
+  const router = useRouter()
+  const [description, setDescription] = useState('')
+  const [ownerId, setOwnerId] = useState('')
+  const [department, setDepartment] = useState('')
+  const [dueDate, setDueDate] = useState('')
+  const [priority, setPriority] = useState<'low' | 'med' | 'high'>('med')
+  const [rootCauseRef, setRootCauseRef] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  function handleOwnerChange(id: string) {
+    setOwnerId(id)
+    const u = users.find(u => u.id === id)
+    if (u) setDepartment(u.department)
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!ownerId || !description || !dueDate) {
+      setError('Description, owner, and due date are required')
+      return
+    }
+    setSaving(true)
+    setError(null)
+    const res = await fetch('/api/capa', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        incident_id: incidentId,
+        description,
+        owner_user_id: ownerId,
+        department,
+        due_date: dueDate,
+        priority,
+        root_cause_ref: rootCauseRef || null,
+      }),
+    })
+    if (!res.ok) {
+      const data = await res.json()
+      setError(data.error ?? 'Create failed')
+      setSaving(false)
+      return
+    }
+    router.push(`/hse/incidents/${incidentId}`)
+    router.refresh()
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Action Description *</label>
+        <textarea
+          value={description}
+          onChange={e => setDescription(e.target.value)}
+          rows={3} required
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+          placeholder="What corrective action will be taken?"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Root Cause Reference</label>
+        <input type="text" value={rootCauseRef}
+          onChange={e => setRootCauseRef(e.target.value)}
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+          placeholder="e.g. Why #3 — inadequate training" />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Assigned To *</label>
+        <select value={ownerId} onChange={e => handleOwnerChange(e.target.value)} required
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
+          <option value="">Select owner…</option>
+          {users.map(u => (
+            <option key={u.id} value={u.id}>{u.name} ({u.department})</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Due Date *</label>
+          <input type="date" value={dueDate} onChange={e => setDueDate(e.target.value)} required
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm" />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Priority</label>
+          <select value={priority} onChange={e => setPriority(e.target.value as 'low' | 'med' | 'high')}
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
+            <option value="low">Low</option>
+            <option value="med">Medium</option>
+            <option value="high">High</option>
+          </select>
+        </div>
+      </div>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+
+      <button type="submit" disabled={saving}
+        className="w-full bg-amber-600 text-white rounded-lg py-2 text-sm font-semibold disabled:opacity-50">
+        {saving ? 'Creating…' : 'Create CAPA Action'}
+      </button>
+    </form>
+  )
+}