133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
type Addendum = {
|
|
id: string
|
|
body: string
|
|
created_at: string
|
|
author: { name: string } | null
|
|
}
|
|
|
|
interface Props {
|
|
incidentId: string
|
|
status: string
|
|
canClose: boolean
|
|
canAddAddenda: boolean
|
|
}
|
|
|
|
export function ClosurePanel({ incidentId, status, canClose, canAddAddenda }: Props) {
|
|
const router = useRouter()
|
|
const [addenda, setAddenda] = useState<Addendum[]>([])
|
|
const [draft, setDraft] = useState('')
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const isClosed = status === 'closed'
|
|
|
|
useEffect(() => {
|
|
if (!isClosed) return
|
|
fetch(`/api/incidents/${incidentId}/addenda`)
|
|
.then(r => (r.ok ? r.json() : Promise.reject()))
|
|
.then((data: Addendum[]) => setAddenda(Array.isArray(data) ? data : []))
|
|
.catch(() => {})
|
|
}, [incidentId, isClosed])
|
|
|
|
const closeIncident = async () => {
|
|
if (!confirm('Close this incident? The record will be locked — only addenda can be added afterwards.')) return
|
|
setBusy(true)
|
|
setError(null)
|
|
const res = await fetch(`/api/incidents/${incidentId}/close`, { method: 'POST' })
|
|
setBusy(false)
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
setError(data.error ?? 'Failed to close incident')
|
|
return
|
|
}
|
|
router.refresh()
|
|
}
|
|
|
|
const addAddendum = async () => {
|
|
const text = draft.trim()
|
|
if (!text) return
|
|
setBusy(true)
|
|
setError(null)
|
|
const res = await fetch(`/api/incidents/${incidentId}/addenda`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ body: text }),
|
|
})
|
|
setBusy(false)
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
setError(data.error ?? 'Failed to add addendum')
|
|
return
|
|
}
|
|
setDraft('')
|
|
const list = await fetch(`/api/incidents/${incidentId}/addenda`).then(r => r.json()).catch(() => [])
|
|
setAddenda(Array.isArray(list) ? list : [])
|
|
}
|
|
|
|
if (!isClosed && !canClose) return null
|
|
|
|
if (!isClosed) {
|
|
return (
|
|
<div className="mt-6">
|
|
{status === 'verification' ? (
|
|
<button
|
|
onClick={closeIncident}
|
|
disabled={busy}
|
|
className="bg-green-700 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-green-800 disabled:opacity-50"
|
|
>
|
|
{busy ? 'Closing…' : 'Close Incident'}
|
|
</button>
|
|
) : null}
|
|
{error && <p className="text-sm text-red-600 mt-2">{error}</p>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="mt-6 bg-white rounded-xl shadow-sm p-5">
|
|
<h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-1">Addenda</h2>
|
|
<p className="text-xs text-gray-400 mb-3">
|
|
This incident is closed and locked. New information is recorded as addenda.
|
|
</p>
|
|
{addenda.length === 0 ? (
|
|
<p className="text-sm text-gray-400">No addenda.</p>
|
|
) : (
|
|
<ul className="space-y-3">
|
|
{addenda.map(a => (
|
|
<li key={a.id} className="border border-gray-100 rounded-lg p-3">
|
|
<p className="text-sm text-gray-800 whitespace-pre-wrap">{a.body}</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
{a.author?.name ?? 'Unknown'} · {new Date(a.created_at).toLocaleString('en-MY', { timeZone: 'Asia/Kuala_Lumpur' })}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{canAddAddenda && (
|
|
<div className="mt-4">
|
|
<textarea
|
|
value={draft}
|
|
onChange={e => setDraft(e.target.value)}
|
|
rows={3}
|
|
placeholder="Add an addendum…"
|
|
className="w-full border border-gray-200 rounded-lg p-2 text-sm"
|
|
/>
|
|
<button
|
|
onClick={addAddendum}
|
|
disabled={busy || !draft.trim()}
|
|
className="mt-2 bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900 disabled:opacity-50"
|
|
>
|
|
{busy ? 'Saving…' : 'Add Addendum'}
|
|
</button>
|
|
{error && <p className="text-sm text-red-600 mt-2">{error}</p>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|