269 lines
12 KiB
TypeScript
269 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Modal from "../Modal"
|
|
|
|
export default function HourlyQualityChecksSection({ reportId, data, shiftName }: any) {
|
|
const [checks, setChecks] = useState(data || [])
|
|
const [showModal, setShowModal] = useState(false)
|
|
const [formData, setFormData] = useState({
|
|
time: new Date().toISOString(),
|
|
packInspection: false,
|
|
base: false,
|
|
handle: false,
|
|
body: false,
|
|
neck: false,
|
|
land: false,
|
|
distribution: false,
|
|
phaseCheck: false,
|
|
headTrimmerVisual: false,
|
|
baseWeight: "",
|
|
neckWeight: "",
|
|
headTrimmerMouldClean: false,
|
|
packTensionCheck: false,
|
|
catchTrayInspection: false,
|
|
big: false,
|
|
small: false,
|
|
leakDetector: false,
|
|
vms: false,
|
|
vis: false,
|
|
holdStockAmount: "",
|
|
siloNo: "",
|
|
hdpeIncluded: ""
|
|
})
|
|
|
|
const handleAdd = async () => {
|
|
const updated = [...checks, formData]
|
|
setChecks(updated)
|
|
await fetch(`/api/reports/${reportId}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ hourlyQualityChecks: updated })
|
|
})
|
|
setShowModal(false)
|
|
// Reset form
|
|
setFormData({
|
|
time: new Date().toISOString(),
|
|
packInspection: false,
|
|
base: false,
|
|
handle: false,
|
|
body: false,
|
|
neck: false,
|
|
land: false,
|
|
distribution: false,
|
|
phaseCheck: false,
|
|
headTrimmerVisual: false,
|
|
baseWeight: "",
|
|
neckWeight: "",
|
|
headTrimmerMouldClean: false,
|
|
packTensionCheck: false,
|
|
catchTrayInspection: false,
|
|
big: false,
|
|
small: false,
|
|
leakDetector: false,
|
|
vms: false,
|
|
vis: false,
|
|
holdStockAmount: "",
|
|
siloNo: "",
|
|
hdpeIncluded: ""
|
|
})
|
|
}
|
|
|
|
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">Hourly Quality Checks</h2>
|
|
<button onClick={() => setShowModal(true)} className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
|
+ Add Quality Check
|
|
</button>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-2 py-2 text-left">Time</th>
|
|
<th className="px-2 py-2 text-left">Base Wt</th>
|
|
<th className="px-2 py-2 text-left">Neck Wt</th>
|
|
<th className="px-2 py-2 text-left">Silo No</th>
|
|
<th className="px-2 py-2 text-left">HDPE %</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{checks.map((c: any, i: number) => (
|
|
<tr key={i}>
|
|
<td className="px-2 py-2">{new Date(c.time).toLocaleTimeString()}</td>
|
|
<td className="px-2 py-2">{c.baseWeight}</td>
|
|
<td className="px-2 py-2">{c.neckWeight}</td>
|
|
<td className="px-2 py-2">{c.siloNo}</td>
|
|
<td className="px-2 py-2">{c.hdpeIncluded}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{showModal && (
|
|
<Modal onClose={() => setShowModal(false)}>
|
|
<div className="max-h-[80vh] overflow-y-auto">
|
|
<h3 className="text-lg font-bold mb-4">Add Hourly Quality Check</h3>
|
|
<div className="space-y-4">
|
|
{/* Time */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Time</label>
|
|
<input
|
|
type="time"
|
|
value={new Date(formData.time).toTimeString().slice(0, 5)}
|
|
onChange={(e) => {
|
|
const [hours, minutes] = e.target.value.split(':')
|
|
const newDate = new Date()
|
|
newDate.setHours(parseInt(hours), parseInt(minutes))
|
|
setFormData({...formData, time: newDate.toISOString()})
|
|
}}
|
|
className="w-full px-3 py-2 border rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
{/* Inspection Checkboxes */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">Inspections (Check if OK)</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.packInspection} onChange={(e) => setFormData({...formData, packInspection: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Pack Inspection</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.base} onChange={(e) => setFormData({...formData, base: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Base</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.handle} onChange={(e) => setFormData({...formData, handle: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Handle</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.body} onChange={(e) => setFormData({...formData, body: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Body</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.neck} onChange={(e) => setFormData({...formData, neck: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Neck</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.land} onChange={(e) => setFormData({...formData, land: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Land</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.distribution} onChange={(e) => setFormData({...formData, distribution: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Distribution</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.phaseCheck} onChange={(e) => setFormData({...formData, phaseCheck: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Phase Check</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.headTrimmerVisual} onChange={(e) => setFormData({...formData, headTrimmerVisual: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Head & Trimmer Visual</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.headTrimmerMouldClean} onChange={(e) => setFormData({...formData, headTrimmerMouldClean: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Head/Trimmer & Mould Clean</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.packTensionCheck} onChange={(e) => setFormData({...formData, packTensionCheck: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Pack Tension Check</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.catchTrayInspection} onChange={(e) => setFormData({...formData, catchTrayInspection: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Catch Tray Inspection</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.big} onChange={(e) => setFormData({...formData, big: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Big</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.small} onChange={(e) => setFormData({...formData, small: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Small</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.leakDetector} onChange={(e) => setFormData({...formData, leakDetector: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">Leak Detector</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.vms} onChange={(e) => setFormData({...formData, vms: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">VMS</span>
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" checked={formData.vis} onChange={(e) => setFormData({...formData, vis: e.target.checked})} className="w-4 h-4" />
|
|
<span className="text-sm">VIS</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Numeric Fields */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Base Weight</label>
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
value={formData.baseWeight}
|
|
onChange={(e) => setFormData({...formData, baseWeight: e.target.value})}
|
|
className="w-full px-3 py-2 border rounded-lg"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Neck Weight</label>
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
value={formData.neckWeight}
|
|
onChange={(e) => setFormData({...formData, neckWeight: e.target.value})}
|
|
className="w-full px-3 py-2 border rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text Fields */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Hold Stock Amount</label>
|
|
<input
|
|
type="text"
|
|
value={formData.holdStockAmount}
|
|
onChange={(e) => setFormData({...formData, holdStockAmount: e.target.value})}
|
|
className="w-full px-3 py-2 border rounded-lg"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Silo No.</label>
|
|
<input
|
|
type="text"
|
|
value={formData.siloNo}
|
|
onChange={(e) => setFormData({...formData, siloNo: e.target.value})}
|
|
className="w-full px-3 py-2 border rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">HDPE % Included</label>
|
|
<input
|
|
type="text"
|
|
value={formData.hdpeIncluded}
|
|
onChange={(e) => setFormData({...formData, hdpeIncluded: e.target.value})}
|
|
className="w-full px-3 py-2 border rounded-lg"
|
|
placeholder="e.g., 25%"
|
|
/>
|
|
</div>
|
|
|
|
<button onClick={handleAdd} className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">
|
|
Add Quality Check
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|