feat: transport incidents with truck number support
- DB: trucks table + incidents.truck_id FK + transport enum value - Validation: transport type requires truck_id - Create API: validates truck exists/active, persists truck_id - Report form: truck dropdown shown when type=transport (required) - Admin: TruckManager CRUD + /api/admin/trucks route - Detail: trucks join surfaced in incident-detail + detail page query - Inbox (HSE + supervisor): truck filter, transport in TYPE_OPTIONS, fixed stale enum values (dropped dangerous_occurrence/mhe_asset/occupational_disease) - List: transport label + truck number badge in rows - i18n: transport + truckLabel/truckPlaceholder in en/ms/zh Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CPf5Rc8QPx6V8KLEEgfKEQ
This commit is contained in:
@@ -0,0 +1,109 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export type Truck = {
|
||||
id: string
|
||||
truck_no: string
|
||||
carrier: string | null
|
||||
active: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
trucks: Truck[]
|
||||
}
|
||||
|
||||
export function TruckManager({ trucks }: Props) {
|
||||
const router = useRouter()
|
||||
const [truckNo, setTruckNo] = useState('')
|
||||
const [carrier, setCarrier] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
async function handleAdd() {
|
||||
const no = truckNo.trim()
|
||||
if (!no) return
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
const res = await fetch('/ims/api/admin/trucks', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ truck_no: no, carrier: carrier.trim() || null }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) {
|
||||
setError(data.error ?? 'Failed to add truck')
|
||||
return
|
||||
}
|
||||
setTruckNo('')
|
||||
setCarrier('')
|
||||
router.refresh()
|
||||
} catch {
|
||||
setError('Network error')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div className="px-5 py-4 border-b border-gray-100">
|
||||
<h2 className="text-sm font-semibold text-gray-900">Trucks</h2>
|
||||
</div>
|
||||
|
||||
<div className="px-5 py-4 space-y-3">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Truck number (e.g. WXY 1234)"
|
||||
className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={truckNo}
|
||||
onChange={e => setTruckNo(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleAdd()}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Carrier (optional)"
|
||||
className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={carrier}
|
||||
onChange={e => setCarrier(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleAdd()}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !truckNo.trim()}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{submitting ? 'Adding…' : 'Add'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-red-600">{error}</p>
|
||||
)}
|
||||
|
||||
{trucks.length === 0 ? (
|
||||
<p className="text-sm text-gray-400 py-2">No trucks yet.</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-gray-100">
|
||||
{trucks.map(tk => (
|
||||
<li key={tk.id} className="flex items-center gap-3 py-2">
|
||||
<span className="text-sm font-medium text-gray-900">{tk.truck_no}</span>
|
||||
{tk.carrier && (
|
||||
<span className="text-xs text-gray-500">{tk.carrier}</span>
|
||||
)}
|
||||
{!tk.active && (
|
||||
<span className="ml-auto text-xs font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-500">
|
||||
Inactive
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user