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
2026-07-11 15:18:17 +08:00
parent 1780586185
commit 804b1fbf33
3 changed files with 253 additions and 0 deletions
@@ -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>
+  )
+}