58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
'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(`/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>
|
|
)
|
|
}
|