58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
const items = [
|
|
"Emergency stops accessible",
|
|
"Safety guards in place",
|
|
"PPE compliance",
|
|
"Walkways clear",
|
|
"Fire extinguisher accessible",
|
|
"First aid kit available"
|
|
]
|
|
|
|
export default function SafetyChecklistSection({ reportId, data }: { reportId: string; data: any }) {
|
|
const [checklist, setChecklist] = useState(data || {})
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
const handleToggle = (item: string) => {
|
|
setChecklist({ ...checklist, [item]: !checklist[item] })
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true)
|
|
await fetch(`/api/reports/${reportId}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ safetyChecklist: checklist })
|
|
})
|
|
setSaving(false)
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<h2 className="text-xl font-bold text-gray-800 mb-4">Safety Checklist</h2>
|
|
<div className="space-y-3">
|
|
{items.map((item) => (
|
|
<label key={item} className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={checklist[item] || false}
|
|
onChange={() => handleToggle(item)}
|
|
className="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<span className="text-gray-700">{item}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
|
>
|
|
{saving ? "Saving..." : "Save"}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|