feat: verification flow — HSE verify/reopen CAPA, auto-transition incident to verification

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

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

@@ -0,0 +1,100 @@
+export const dynamic = 'force-dynamic'
+
+import { notFound, redirect } from 'next/navigation'
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { VerifyForm } from '@/components/capa/verify-form'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+const PRIORITY_BADGE: Record<string, string> = {
+  low: 'bg-gray-100 text-gray-600',
+  med: 'bg-yellow-100 text-yellow-700',
+  high: 'bg-red-100 text-red-700',
+}
+
+export default async function CapaDetailPage({ 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/capa/${id}`)
+
+  const { data: profile } = await supabase
+    .from('users').select('role').eq('id', data.user.id).single()
+
+  const { data: capa } = await supabase
+    .from('capa_actions')
+    .select(`
+      id, incident_id, root_cause_ref, description, 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 (!capa) notFound()
+
+  const isHse = profile && ['hse', 'admin'].includes(profile.role)
+  const status = (capa as { status: string }).status
+
+  return (
+    <main className="max-w-2xl mx-auto px-4 py-6">
+      <Link href="/hse/capa" className="text-sm text-blue-600 hover:underline mb-4 inline-block">
+        ← CAPA Board
+      </Link>
+
+      <div className="bg-white rounded-xl shadow-sm p-5 mb-4 space-y-4">
+        <div className="flex items-start justify-between">
+          <div>
+            <p className="text-xs text-gray-500 mb-1">
+              Incident: {(capa.incidents as unknown as { reference_no: string | null } | null)?.reference_no ?? '—'}
+            </p>
+            <p className="text-gray-900 font-medium">{(capa as { description: string }).description}</p>
+          </div>
+          <span className={`px-2 py-1 rounded text-xs font-semibold ${PRIORITY_BADGE[(capa as { priority: string }).priority] ?? ''}`}>
+            {(capa as { priority: string }).priority}
+          </span>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3 text-sm">
+          <div>
+            <p className="text-xs text-gray-500">Owner</p>
+            <p className="text-gray-800">{(capa.owner as unknown as { name: string } | null)?.name ?? '—'}</p>
+          </div>
+          <div>
+            <p className="text-xs text-gray-500">Department</p>
+            <p className="text-gray-800">{(capa as { department: string }).department}</p>
+          </div>
+          <div>
+            <p className="text-xs text-gray-500">Due Date</p>
+            <p className="text-gray-800">{(capa as { due_date: string }).due_date}</p>
+          </div>
+          <div>
+            <p className="text-xs text-gray-500">Status</p>
+            <p className="text-gray-800 capitalize">{status.replace(/_/g, ' ')}</p>
+          </div>
+        </div>
+
+        {(capa as { root_cause_ref: string | null }).root_cause_ref && (
+          <div>
+            <p className="text-xs text-gray-500">Root Cause Reference</p>
+            <p className="text-sm text-gray-800">{(capa as { root_cause_ref: string }).root_cause_ref}</p>
+          </div>
+        )}
+
+        {(capa as { completed_at: string | null }).completed_at && (
+          <p className="text-xs text-gray-500">
+            Completed: {new Date((capa as { completed_at: string }).completed_at).toLocaleString('en-MY', { timeZone: 'Asia/Kuala_Lumpur' })}
+          </p>
+        )}
+      </div>
+
+      {isHse && status === 'pending_verification' && (
+        <VerifyForm capaId={id} />
+      )}
+    </main>
+  )
+}

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

@@ -0,0 +1,64 @@
+export const dynamic = 'force-dynamic'
+
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function POST(
+  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 { 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 { data: capa } = await supabase
+    .from('capa_actions').select('status, incident_id').eq('id', id).single()
+  if (!capa) return NextResponse.json({ error: 'Not found' }, { status: 404 })
+  if (capa.status !== 'pending_verification')
+    return NextResponse.json({ error: 'CAPA must be pending_verification' }, { status: 409 })
+
+  const body: { verdict: 'verified' | 'reopened'; reopen_reason?: string } = await request.json()
+  if (body.verdict !== 'verified' && body.verdict !== 'reopened')
+    return NextResponse.json({ error: 'verdict must be verified or reopened' }, { status: 422 })
+
+  const update: Record<string, unknown> = {
+    status: body.verdict,
+    verified_by: user.id,
+    verified_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: body.verdict === 'verified' ? 'verified' : 'reopened',
+    p_new_value: { ...update, reopen_reason: body.reopen_reason ?? null },
+  })
+
+  // Check if all CAPAs for this incident are verified — if so, transition incident to verification
+  const { data: openCapas } = await supabase
+    .from('capa_actions')
+    .select('id')
+    .eq('incident_id', capa.incident_id)
+    .not('status', 'in', '(verified,closed)')
+
+  if (!openCapas || openCapas.length === 0) {
+    await supabase
+      .from('incidents')
+      .update({ status: 'verification' })
+      .eq('id', capa.incident_id)
+  }
+
+  return NextResponse.json({ ok: true })
+}

components/capa/verify-form.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+interface Props {
+  capaId: string
+}
+
+export function VerifyForm({ capaId }: Props) {
+  const router = useRouter()
+  const [verdict, setVerdict] = useState<'verified' | 'reopened' | null>(null)
+  const [reopenReason, setReopenReason] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!verdict) return
+    if (verdict === 'reopened' && !reopenReason.trim()) {
+      setError('Reopen reason is required')
+      return
+    }
+    setSaving(true)
+    setError(null)
+    const res = await fetch(`/api/capa/${capaId}/verify`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ verdict, reopen_reason: reopenReason || null }),
+    })
+    if (!res.ok) {
+      const data = await res.json()
+      setError(data.error ?? 'Verification failed')
+      setSaving(false)
+      return
+    }
+    router.push('/hse/capa')
+    router.refresh()
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="border border-gray-200 rounded-xl p-5 space-y-4 bg-purple-50">
+      <h3 className="text-sm font-semibold text-gray-800">HSE Verification</h3>
+      <div className="flex gap-3">
+        <button
+          type="button"
+          onClick={() => setVerdict('verified')}
+          className={`flex-1 py-2 rounded-lg text-sm font-medium border ${
+            verdict === 'verified'
+              ? 'bg-green-600 text-white border-green-600'
+              : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'
+          }`}
+        >
+          Verified — Effective
+        </button>
+        <button
+          type="button"
+          onClick={() => setVerdict('reopened')}
+          className={`flex-1 py-2 rounded-lg text-sm font-medium border ${
+            verdict === 'reopened'
+              ? 'bg-orange-600 text-white border-orange-600'
+              : 'bg-white text-gray-700 border-gray-300 hover:border-orange-500'
+          }`}
+        >
+          Reopen — Ineffective
+        </button>
+      </div>
+      {verdict === 'reopened' && (
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Why is the action ineffective? *</label>
+          <textarea
+            value={reopenReason}
+            onChange={e => setReopenReason(e.target.value)}
+            rows={2} required
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            placeholder="Describe why the corrective action did not resolve the root cause…"
+          />
+        </div>
+      )}
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {verdict && (
+        <button type="submit" disabled={saving}
+          className="w-full bg-gray-900 text-white rounded-lg py-2 text-sm font-semibold disabled:opacity-50">
+          {saving ? 'Saving…' : 'Submit Verification'}
+        </button>
+      )}
+    </form>
+  )
+}