111 lines
4.7 KiB
TypeScript
111 lines
4.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Modal from "../Modal"
|
|
|
|
export default function ProductionTrackingSection({ reportId, data, shiftName }: any) {
|
|
const [tracking, setTracking] = useState(data || [])
|
|
const [showModal, setShowModal] = useState(false)
|
|
const [formData, setFormData] = useState({ hour: "", totalProduction: "", productionThisHour: "", comment: "" })
|
|
|
|
// Generate shift hours based on shift name
|
|
const getShiftHours = () => {
|
|
if (shiftName === "AM") {
|
|
// AM shift: 8:00 AM to 7:00 PM
|
|
return [
|
|
"8:00 AM", "9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",
|
|
"1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM", "7:00 PM"
|
|
]
|
|
} else {
|
|
// PM shift: 8:00 PM to 7:00 AM
|
|
return [
|
|
"8:00 PM", "9:00 PM", "10:00 PM", "11:00 PM", "12:00 AM",
|
|
"1:00 AM", "2:00 AM", "3:00 AM", "4:00 AM", "5:00 AM", "6:00 AM", "7:00 AM"
|
|
]
|
|
}
|
|
}
|
|
|
|
const handleAdd = async () => {
|
|
const updated = [...tracking, formData]
|
|
setTracking(updated)
|
|
await fetch(`/api/reports/${reportId}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ productionTracking: updated })
|
|
})
|
|
setShowModal(false)
|
|
setFormData({ hour: "", totalProduction: "", productionThisHour: "", comment: "" })
|
|
}
|
|
|
|
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">Production Tracking</h2>
|
|
<button onClick={() => setShowModal(true)} className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
|
+ Add Production Tracking
|
|
</button>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left text-sm font-medium text-gray-500">Hour</th>
|
|
<th className="px-4 py-2 text-left text-sm font-medium text-gray-500">Total Production</th>
|
|
<th className="px-4 py-2 text-left text-sm font-medium text-gray-500">This Hour</th>
|
|
<th className="px-4 py-2 text-left text-sm font-medium text-gray-500">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{tracking.map((t: any, i: number) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-2 text-sm">{t.hour}</td>
|
|
<td className="px-4 py-2 text-sm">{t.totalProduction}</td>
|
|
<td className="px-4 py-2 text-sm">{t.productionThisHour}</td>
|
|
<td className="px-4 py-2 text-sm">{t.comment}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{showModal && (
|
|
<Modal onClose={() => setShowModal(false)}>
|
|
<h3 className="text-lg font-bold mb-4">Add Production Tracking</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Hour *</label>
|
|
<select
|
|
value={formData.hour}
|
|
onChange={(e) => setFormData({...formData, hour: e.target.value})}
|
|
className="w-full px-3 py-2 border rounded-lg"
|
|
required
|
|
>
|
|
<option value="">Select Hour</option>
|
|
{getShiftHours().map((hour) => (
|
|
<option key={hour} value={hour}>
|
|
{hour}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Total Production This Shift</label>
|
|
<input type="number" value={formData.totalProduction} onChange={(e) => setFormData({...formData, totalProduction: e.target.value})} className="w-full px-3 py-2 border rounded-lg" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Production This Hour</label>
|
|
<input type="number" value={formData.productionThisHour} onChange={(e) => setFormData({...formData, productionThisHour: e.target.value})} className="w-full px-3 py-2 border rounded-lg" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Comment</label>
|
|
<textarea value={formData.comment} onChange={(e) => setFormData({...formData, comment: e.target.value})} className="w-full px-3 py-2 border rounded-lg" rows={3} />
|
|
</div>
|
|
<button onClick={handleAdd} className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">Add</button>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|