feat(capa): add CapaOwnerNotesForm component

components/capa/capa-owner-notes-form.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState } from 'react'
+
+interface Props {
+  capaId: string
+  initialNotes: string | null
+}
+
+export function CapaOwnerNotesForm({ capaId, initialNotes }: Props) {
+  const [notes, setNotes] = useState(initialNotes ?? '')
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSave() {
+    setSaving(true)
+    setSaved(false)
+    setError(null)
+    const res = await fetch(`/ims/api/capa/${capaId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ owner_notes: notes }),
+    })
+    setSaving(false)
+    if (!res.ok) {
+      setError('Failed to save. Please try again.')
+      return
+    }
+    setSaved(true)
+    setTimeout(() => setSaved(false), 2000)
+  }
+
+  return (
+    <div className="mt-3 space-y-1">
+      <label className="text-xs text-gray-500 font-medium">Remarks / Notes</label>
+      <textarea
+        value={notes}
+        onChange={e => { setNotes(e.target.value); setSaved(false) }}
+        rows={2}
+        placeholder="Add any notes or updates for this action…"
+        className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm text-gray-800 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+      {error && <p className="text-xs text-red-600">{error}</p>}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="text-xs px-3 py-1 bg-gray-800 text-white rounded-md hover:bg-gray-700 disabled:opacity-50"
+        >
+          {saving ? 'Saving…' : 'Save Notes'}
+        </button>
+        {saved && <span className="text-xs text-green-600">Saved</span>}
+      </div>
+    </div>
+  )
+}