82 lines
3.5 KiB
TypeScript
82 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Modal from "../Modal"
|
|
|
|
export default function SeamLeakTestSection({ reportId, data }: any) {
|
|
const [tests, setTests] = useState(data || [])
|
|
const [showModal, setShowModal] = useState(false)
|
|
const [formData, setFormData] = useState({ time: new Date().toISOString(), moulds: [{ mouldNumber: "", pass: true }] })
|
|
|
|
const addMould = () => {
|
|
setFormData({ ...formData, moulds: [...formData.moulds, { mouldNumber: "", pass: true }] })
|
|
}
|
|
|
|
const handleAdd = async () => {
|
|
const updated = [...tests, formData]
|
|
setTests(updated)
|
|
await fetch(`/api/reports/${reportId}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ seamLeakTest: updated })
|
|
})
|
|
setShowModal(false)
|
|
setFormData({ time: new Date().toISOString(), moulds: [{ mouldNumber: "", pass: true }] })
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-xl font-bold text-gray-800">Seam Leak Test</h2>
|
|
<button onClick={() => setShowModal(true)} className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
|
+ Add Seam Leak Test
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{tests.map((test: any, i: number) => (
|
|
<div key={i} className="border rounded-lg p-4">
|
|
<p className="font-medium mb-2">Time: {new Date(test.time).toLocaleString()}</p>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
{test.moulds.map((m: any, j: number) => (
|
|
<div key={j} className="text-sm">
|
|
Mould {m.mouldNumber}: <span className={m.pass ? "text-green-600" : "text-red-600"}>{m.pass ? "✓ Pass" : "✗ Fail"}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{showModal && (
|
|
<Modal onClose={() => setShowModal(false)}>
|
|
<h3 className="text-lg font-bold mb-4">Add Seam Leak Test</h3>
|
|
<div className="space-y-4">
|
|
<div className="max-h-60 overflow-y-auto space-y-3">
|
|
{formData.moulds.map((mould, i) => (
|
|
<div key={i} className="flex gap-2">
|
|
<input type="number" placeholder="Mould #" value={mould.mouldNumber} onChange={(e) => {
|
|
const updated = [...formData.moulds]
|
|
updated[i].mouldNumber = e.target.value
|
|
setFormData({...formData, moulds: updated})
|
|
}} className="flex-1 px-3 py-2 border rounded-lg" />
|
|
<select value={mould.pass ? "true" : "false"} onChange={(e) => {
|
|
const updated = [...formData.moulds]
|
|
updated[i].pass = e.target.value === "true"
|
|
setFormData({...formData, moulds: updated})
|
|
}} className="px-3 py-2 border rounded-lg">
|
|
<option value="true">Pass</option>
|
|
<option value="false">Fail</option>
|
|
</select>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button onClick={addMould} className="w-full bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300">+ Add Mould</button>
|
|
<button onClick={handleAdd} className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">Save Test</button>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|