function LotoRegister({ equipment = [], onEdit }) { const [editingId, setEditingId] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "w-full overflow-x-auto p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-w-full bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 bg-gray-50 font-bold p-4 border-b", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Equipment Name"), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Isolation Points"), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Actions")), equipment.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "grid grid-cols-5 p-4 border-b hover:bg-gray-50", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-1 flex items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("div", { className: "col-span-1 flex items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, item.location), /*#__PURE__*/ React.createElement("div", { className: "col-span-1 flex items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 rounded-full text-sm ${item.status === "Active" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, item.status)), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, item.isolationPoints?.map((point, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, point.image && /*#__PURE__*/ React.createElement("img", { src: point.image, alt: `Isolation point ${index + 1}`, className: "w-10 h-10 rounded object-cover", __source: { fileName: "", lineNumber: 37, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, point.description))))), /*#__PURE__*/ React.createElement("div", { className: "col-span-1 flex items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onEdit?.(item), className: "text-blue-600 hover:text-blue-800 font-medium", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }), "Edit")))))); } function LotoRegisterStory() { const sampleEquipment = [ { id: 1, name: "Pump Station A", location: "Building 1", status: "Active", isolationPoints: [ { description: "Main Power Switch", image: "/sample-isolation-1.jpg" }, { description: "Emergency Valve", image: "/sample-isolation-2.jpg" } ] }, { id: 2, name: "Conveyor Belt B", location: "Building 2", status: "Inactive", isolationPoints: [ { description: "Control Panel Lock", image: "/sample-isolation-3.jpg" }, { description: "Safety Gate", image: "/sample-isolation-4.jpg" } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 101, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LotoRegister, { equipment: sampleEquipment, onEdit: (item)=>console.log("Edit clicked:", item), __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this })); } function AddEquipmentButton() { return /*#__PURE__*/ React.createElement("a", { href: "/add-equipment", className: "inline-flex items-center px-6 py-3 text-lg font-crimson-text bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors no-underline", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }), "Add New Equipment"); } function AddEquipmentButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AddEquipmentButton, { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function EquipmentForm({ onSubmit = ()=>{} }) { const [upload, { loading: uploadLoading }] = useUpload(); const [isolationPoints, setIsolationPoints] = useState([ { description: "", image: null } ]); const [error, setError] = useState(null); const handleImageUpload = async (index, file)=>{ const { url, error } = await upload({ file }); if (error) { setError(error); return; } const newPoints = [ ...isolationPoints ]; newPoints[index].image = url; setIsolationPoints(newPoints); }; const addIsolationPoint = ()=>{ setIsolationPoints([ ...isolationPoints, { description: "", image: null } ]); }; const updateIsolationPoint = (index, description)=>{ const newPoints = [ ...isolationPoints ]; newPoints[index].description = description; setIsolationPoints(newPoints); }; const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const data = { name: formData.get("name"), description: formData.get("description"), isolationPoints }; onSubmit(data); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-3xl mx-auto p-8 space-y-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Equipment Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { name: "description", rows: 4, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center border-b pb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium text-gray-800", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Isolation Points"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: addIsolationPoint, className: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), "Add New Point")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, isolationPoints.map((point, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-6 border rounded-lg bg-gray-50", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, "Point Description"), /*#__PURE__*/ React.createElement("textarea", { value: point.description, onChange: (e)=>updateIsolationPoint(index, e.target.value), className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Describe the isolation point...", rows: 3, __source: { fileName: "", lineNumber: 93, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }, "Point Image"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>e.target.files && handleImageUpload(index, e.target.files[0]), className: "w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", __source: { fileName: "", lineNumber: 108, columnNumber: 21 }, __self: this }), point.image && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 118, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: point.image, alt: `Isolation point ${index + 1}`, className: "max-h-48 rounded-lg object-cover", __source: { fileName: "", lineNumber: 119, columnNumber: 25 }, __self: this }))))))))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 p-4 bg-red-50 rounded-md", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: uploadLoading, className: "w-full bg-green-600 text-white py-3 px-6 rounded-md hover:bg-green-700 disabled:bg-gray-400 transition-colors text-lg font-medium", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, uploadLoading ? "Uploading..." : "Save Equipment")); } function EquipmentFormStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 151, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EquipmentForm, { onSubmit: (data)=>console.log("Form submitted:", data), __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this })); } function MainComponent() { const [submitted, setSubmitted] = useState(false); const handleSubmit = useCallback((formData)=>{ setSubmitted(true); setTimeout(()=>setSubmitted(false), 3000); }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto p-4", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "Equipment Registration"), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), "Back to Main Page")), submitted ? /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Equipment details submitted successfully!") : null, /*#__PURE__*/ React.createElement(EquipmentForm, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); }