function MainComponent() { const [formData, setFormData] = React.useState({ receiptNumber: '', number: '', name: '', gender: '', age: '', wrongAnswers: '', corrections: '', linesSkipped: '', workAmount: Array.from({ length: 30 }).fill('') }); const handleFormDataChange = (e)=>{ const { name, value } = e.target; if (name.startsWith('workAmount')) { const index = parseInt(name.split('_')[1], 10); setFormData((prev)=>{ const newWorkAmount = [ ...prev.workAmount ]; newWorkAmount[index] = value; return { ...prev, workAmount: newWorkAmount }; }); } else { setFormData((prev)=>({ ...prev, [name]: value })); } }; const handleSubmit = async (e)=>{ e.preventDefault(); try { await fetch('/api/saveData', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); } catch (err) { console.error("Error saving data: ", err); } }; const handleCalculateMetrics = async ()=>{ try { const response = await fetch('/api/calculateMetrics', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); const blob = await response.blob(); const downloadUrl = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = downloadUrl; link.setAttribute('download', 'calculatedMetrics.csv'); document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); } catch (err) { console.error("Error calculating metrics: ", err); } }; const handleResetForm = ()=>{ setFormData({ receiptNumber: '', number: '', name: '', gender: '', age: '', wrongAnswers: '', corrections: '', linesSkipped: '', workAmount: Array.from({ length: 30 }).fill('') }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] flex justify-center items-center py-10", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-8 rounded-lg shadow-lg w-full max-w-screen-xl", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#333] mb-8", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "作業量データ入力"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-8", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "receiptNumber", value: formData.receiptNumber, onChange: handleFormDataChange, className: "form-input col-span-1 border border-[#ccc] rounded-md p-2 mb-4", placeholder: "受付番号", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "number", value: formData.number, onChange: handleFormDataChange, className: "form-input col-span-1 border border-[#ccc] rounded-md p-2 mb-4", placeholder: "番号", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: handleFormDataChange, className: "form-input col-span-1 border border-[#ccc] rounded-md p-2 mb-4", placeholder: "氏名", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "gender", value: formData.gender, onChange: handleFormDataChange, className: "form-select border border-[#ccc] rounded-md p-2 mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "男性"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "女性")), /*#__PURE__*/ React.createElement("input", { type: "number", name: "age", value: formData.age, onChange: handleFormDataChange, className: "form-input border border-[#ccc] rounded-md p-2 mb-4", placeholder: "年齢", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "wrongAnswers", value: formData.wrongAnswers, onChange: handleFormDataChange, className: "form-input border border-[#ccc] rounded-md p-2 mb-4", placeholder: "誤答数", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "corrections", value: formData.corrections, onChange: handleFormDataChange, className: "form-input border border-[#ccc] rounded-md p-2 mb-4", placeholder: "訂正数", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "linesSkipped", value: formData.linesSkipped, onChange: handleFormDataChange, className: "form-input border border-[#ccc] rounded-md p-2 mb-4", placeholder: "行飛ばし数", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, Array.from({ length: 15 }).map((_, index)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: index, __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: `workAmount_${index}`, value: formData.workAmount[index], onChange: handleFormDataChange, className: "form-input border border-[#ccc] rounded-md p-2", placeholder: `${index + 1}分目の作業量`, __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: `workAmount_${index + 15}`, value: formData.workAmount[index + 15], onChange: handleFormDataChange, className: "form-input border border-[#ccc] rounded-md p-2", placeholder: `${index + 16}分目の作業量`, __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleResetForm, className: "bg-gray-300 hover:bg-gray-400 text-black font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "次のデータを入力"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "データ送信")), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleCalculateMetrics, className: "mt-4 w-full bg-green-500 hover:bg-green-700 text-white font-bold py-2 rounded", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "基本指標の計算"))); }