90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
'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>
|
|
)
|
|
}
|