function MainComponent() { const [components, setComponents] = React.useState([]); const [materials, setMaterials] = React.useState([]); const [procedures, setProcedures] = React.useState([]); const [selectedComponent, setSelectedComponent] = React.useState(null); const [usedMaterials, setUsedMaterials] = React.useState({}); const [activeTab, setActiveTab] = React.useState('materials'); const [images, setImages] = React.useState([]); React.useEffect(()=>{ fetchComponents(); fetchMaterials(); }, []); const fetchComponents = async ()=>{ const response = await fetch('/api/db/recipi2db', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `parts`' }) }); const data = await response.json(); setComponents(data); }; const fetchMaterials = async ()=>{ const response = await fetch('/api/db/recipi2db', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `materials`' }) }); const data = await response.json(); setMaterials(data); }; const handleComponentChange = (componentId)=>{ setSelectedComponent(componentId); fetchProcedures(componentId); setUsedMaterials({}); }; const fetchProcedures = async (componentId)=>{ const response = await fetch('/api/db/recipi2db', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `materials` WHERE `part_id` = ?', values: [ componentId ] }) }); const data = await response.json(); setProcedures([ { id: Date.now(), part_id: componentId, name: '', details: [ '' ] } ]); }; const addProcedure = ()=>{ if (selectedComponent) { setProcedures([ ...procedures, { id: Date.now(), part_id: selectedComponent, name: '', details: [ '' ] } ]); } }; const updateProcedureDetail = (procedureId, index, value)=>{ setProcedures(procedures.map((proc)=>proc.id === procedureId ? { ...proc, details: proc.details.map((detail, i)=>i === index ? value : detail) } : proc)); }; const addProcedureDetail = (procedureId)=>{ setProcedures(procedures.map((proc)=>proc.id === procedureId ? { ...proc, details: [ ...proc.details, '' ] } : proc)); }; const removeProcedureDetail = (procedureId, index)=>{ setProcedures(procedures.map((proc)=>proc.id === procedureId ? { ...proc, details: proc.details.filter((_, i)=>i !== index) } : proc)); }; const removeProcedure = (procedureId)=>{ setProcedures(procedures.filter((proc)=>proc.id !== procedureId)); }; const onDragStart = (event, item, type)=>{ event.dataTransfer.setData('text/plain', JSON.stringify({ item, type })); }; const onDragOver = (event)=>{ event.preventDefault(); }; const onDrop = (event, procedureId, detailIndex)=>{ event.preventDefault(); const { item, type } = JSON.parse(event.dataTransfer.getData('text')); let newText = ''; if (type === 'material') { newText = item.name; setUsedMaterials((prev)=>({ ...prev, [item.id]: true })); } else if (type === 'image') { newText = `（${item.name}）`; } setProcedures(procedures.map((proc)=>proc.id === procedureId ? { ...proc, details: proc.details.map((detail, index)=>index === detailIndex ? detail + ' ' + newText : detail) } : proc)); }; const processOptions = [ '原材料調整', '生地調整', '成形・加工', '焼成', '冷却', '熱冷加工', '包装' ]; const handleImageUpload = (event)=>{ const files = Array.from(event.target.files); setImages((prevImages)=>[ ...prevImages, ...files.map((file)=>({ id: Date.now() + Math.random(), name: file.name, file })) ]); }; const removeImage = (id)=>{ setImages(images.filter((image)=>image.id !== id)); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 125, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, "製品情報 / 製造手順"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "w-24", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "製品コード"), /*#__PURE__*/ React.createElement("input", { type: "text", value: "12345678", readOnly: true, className: "border p-2 rounded", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "w-24", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "品名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "productName", className: "border p-2 rounded flex-grow", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "w-24", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, "製品区分"), /*#__PURE__*/ React.createElement("select", { name: "productCategory", className: "border p-2 rounded flex-grow", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "製品区分を選択してください"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "w-24", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "取引先"), /*#__PURE__*/ React.createElement("select", { name: "client", className: "border p-2 rounded flex-grow", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "取引先を選択してください")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-2/3 pr-0 md:pr-4 mb-4 md:mb-0", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, "手順"), /*#__PURE__*/ React.createElement("select", { onChange: (e)=>handleComponentChange(e.target.value), className: "w-full border p-2 rounded mb-4", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, "部品を選択してください"), components.map((component)=>/*#__PURE__*/ React.createElement("option", { key: component.id, value: component.id, __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, component.name))), selectedComponent && /*#__PURE__*/ React.createElement("button", { onClick: addProcedure, className: "mb-4 bg-orange-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "手順を追加"), procedures.map((procedure, index)=>/*#__PURE__*/ React.createElement("div", { key: procedure.id, className: "mb-6 border p-4 rounded", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("select", { className: "border p-2 rounded flex-grow", value: procedure.name, onChange: (e)=>setProcedures(procedures.map((p)=>p.id === procedure.id ? { ...p, name: e.target.value } : p)), __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }, "工程を選択してください"), processOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, __source: { fileName: "", lineNumber: 174, columnNumber: 21 }, __self: this }, option))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeProcedure(procedure.id), className: "ml-2 text-red-500", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this }))), procedure.details.map((detail, detailIndex)=>/*#__PURE__*/ React.createElement("div", { key: detailIndex, className: "mb-2 flex items-center", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, index + 1, "-", detailIndex + 1), /*#__PURE__*/ React.createElement("input", { type: "text", value: detail, onChange: (e)=>updateProcedureDetail(procedure.id, detailIndex, e.target.value), onDragOver: onDragOver, onDrop: (e)=>onDrop(e, procedure.id, detailIndex), placeholder: "手順詳細", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>addProcedureDetail(procedure.id), className: "mr-2 text-orange-500", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 197, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeProcedureDetail(procedure.id, procedure.details.length - 1), className: "text-orange-500", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-minus", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3", __source: { fileName: "", lineNumber: 206, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-2", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 ${activeTab === 'materials' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, onClick: ()=>setActiveTab('materials'), __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, "材料"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 ${activeTab === 'images' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, onClick: ()=>setActiveTab('images'), __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, "画像")), /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded h-96 overflow-y-auto", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "ドラッグアンドドロップで手順詳細に追加できます"), activeTab === 'materials' && /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }, materials.filter((material)=>material.part_id === selectedComponent).map((material)=>/*#__PURE__*/ React.createElement("li", { key: material.id, draggable: true, onDragStart: (e)=>onDragStart(e, material, 'material'), className: `p-2 rounded cursor-move ${usedMaterials[material.id] ? 'bg-gray-300' : 'bg-blue-100'}`, __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }, material.name))), activeTab === 'images' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", multiple: true, onChange: handleImageUpload, className: "mb-4", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, images.map((image)=>/*#__PURE__*/ React.createElement("li", { key: image.id, draggable: true, onDragStart: (e)=>onDragStart(e, image, 'image'), className: `p-2 rounded cursor-move ${usedMaterials[image.id] ? 'bg-gray-300' : 'bg-green-100'} flex justify-between items-center`, __source: { fileName: "", lineNumber: 247, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: URL.createObjectURL(image.file), alt: image.name, className: "w-10 h-10 object-cover mr-2", __source: { fileName: "", lineNumber: 253, columnNumber: 23 }, __self: this }), image.name, /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeImage(image.id), className: "text-red-500", __source: { fileName: "", lineNumber: 255, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 256, columnNumber: 25 }, __self: this }))))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 267, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 268, columnNumber: 9 }, __self: this }, "備考"), /*#__PURE__*/ React.createElement("textarea", { name: "notes", className: "w-full border p-2 rounded", rows: "4", __source: { fileName: "", lineNumber: 269, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-end space-x-4", __source: { fileName: "", lineNumber: 272, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-300 text-black px-6 py-2 rounded", __source: { fileName: "", lineNumber: 273, columnNumber: 9 }, __self: this }, "戻る"), /*#__PURE__*/ React.createElement("button", { className: "bg-orange-500 text-white px-6 py-2 rounded", __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, "確定"))); }