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
2026-07-11 15:16:49 +08:00
parent 63cb28f520
commit 1780586185
6 changed files with 476 additions and 0 deletions
@@ -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>
+  )
+}