75 lines
3.8 KiB
TypeScript
75 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
export default function ProductionDataSection({ reportId, averageWeight, totalBagsMade, qualityMetrics, outputMetrics }: any) {
|
|
const [data, setData] = useState({
|
|
averageWeight: averageWeight || 0,
|
|
totalBagsMade: totalBagsMade || 0,
|
|
qualityMetrics: qualityMetrics || { heightFails: 0, topLoadFails: 0, bigLeaks: 0, smallLeaks: 0, checkFails: 0, missedBags: 0, otherLosses: 0 },
|
|
outputMetrics: outputMetrics || { wheelOutput: 0, productionLeakDetectorInfeed: 0, leakDetectorRejects: 0, visOutput: 0, vmsOutput: 0, heldStockOtherLosses: 0, totalGoodBottles: 0 }
|
|
})
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true)
|
|
await fetch(`/api/reports/${reportId}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data)
|
|
})
|
|
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">Production Data</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Average Weight (auto-calculated)</label>
|
|
<input type="number" value={data.averageWeight} readOnly className="w-full px-3 py-2 border rounded-lg bg-gray-50" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Total Bags Made</label>
|
|
<input type="number" value={data.totalBagsMade} onChange={(e) => setData({...data, totalBagsMade: parseInt(e.target.value)})} className="w-full px-3 py-2 border rounded-lg" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-semibold text-gray-700 mb-3">Quality Metrics</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label className="block text-sm mb-1">Height Fails (A)</label>
|
|
<input type="number" value={data.qualityMetrics.heightFails} onChange={(e) => setData({...data, qualityMetrics: {...data.qualityMetrics, heightFails: parseInt(e.target.value)}})} className="w-full px-3 py-2 border rounded-lg" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-1">Top Load Fails (B)</label>
|
|
<input type="number" value={data.qualityMetrics.topLoadFails} onChange={(e) => setData({...data, qualityMetrics: {...data.qualityMetrics, topLoadFails: parseInt(e.target.value)}})} className="w-full px-3 py-2 border rounded-lg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-semibold text-gray-700 mb-3">Output Metrics</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm mb-1">Wheel Output</label>
|
|
<input type="number" value={data.outputMetrics.wheelOutput} onChange={(e) => setData({...data, outputMetrics: {...data.outputMetrics, wheelOutput: parseInt(e.target.value)}})} className="w-full px-3 py-2 border rounded-lg" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-1">Total Good Bottles</label>
|
|
<input type="number" value={data.outputMetrics.totalGoodBottles} onChange={(e) => setData({...data, outputMetrics: {...data.outputMetrics, totalGoodBottles: parseInt(e.target.value)}})} className="w-full px-3 py-2 border rounded-lg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
)
|
|
}
|