function MainComponent() { const [tunnels, setTunnels] = React.useState([ { name: 'トンネル名1', location: '位置1', length: '1 km', constructionYear: '2001' }, { name: 'トンネル名2', location: '位置2', length: '2 km', constructionYear: '2002' }, { name: 'トンネル名3', location: '位置3', length: '3 km', constructionYear: '2003' } ]); const [searchTerm, setSearchTerm] = React.useState(''); const [selectedTunnel, setSelectedTunnel] = React.useState(null); const [inspectionResults, setInspectionResults] = React.useState({}); const [tab, setTab] = React.useState('inspection'); const startNewInspection = ()=>{ setSelectedTunnel(null); setInspectionResults({}); setTab('inspection'); }; const handleSearch = (e)=>{ setSearchTerm(e.target.value); }; const handleTunnelClick = (tunnel)=>{ setSelectedTunnel(tunnel); setTab('inspection'); }; const handleInspectionChange = (e, item)=>{ setInspectionResults({ ...inspectionResults, [item]: { ...inspectionResults[item], [e.target.name]: e.target.value } }); }; const filteredTunnels = tunnels.filter((tunnel)=>tunnel.name.includes(searchTerm) || tunnel.location.includes(searchTerm)); return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "トンネル点検作業"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", onClick: startNewInspection, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "新規点検作業を開始")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "トンネルリスト"), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "検索...", className: "border rounded px-2 py-1 mt-2 w-full", value: searchTerm, onChange: handleSearch, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, filteredTunnels.map((tunnel, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "border-b py-2 cursor-pointer", onClick: ()=>handleTunnelClick(tunnel), __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, tunnel.name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 ${tab === 'inspection' ? 'border-b-2 border-blue-500' : ''}`, onClick: ()=>setTab('inspection'), __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "点検作業画面"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 ${tab === 'history' ? 'border-b-2 border-blue-500' : ''}`, onClick: ()=>setTab('history'), __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "過去の点検作業履歴")), tab === 'inspection' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "点検作業画面"), selectedTunnel ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, "トンネル詳細情報"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, "名前: ", selectedTunnel.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, "位置: ", selectedTunnel.location), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, "長さ: ", selectedTunnel.length), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "建設年: ", selectedTunnel.constructionYear)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, "点検項目リスト"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, [ '項目1', '項目2', '項目3' ].map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 77, columnNumber: 25 }, __self: this }, item, "の状態:"), /*#__PURE__*/ React.createElement("select", { name: "status", className: "ml-2 border rounded px-2 py-1", onChange: (e)=>handleInspectionChange(e, item), __source: { fileName: "", lineNumber: 78, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "良好", __source: { fileName: "", lineNumber: 79, columnNumber: 27 }, __self: this }, "良好"), /*#__PURE__*/ React.createElement("option", { value: "注意", __source: { fileName: "", lineNumber: 80, columnNumber: 27 }, __self: this }, "注意"), /*#__PURE__*/ React.createElement("option", { value: "危険", __source: { fileName: "", lineNumber: 81, columnNumber: 27 }, __self: this }, "危険")), /*#__PURE__*/ React.createElement("textarea", { name: "comment", placeholder: "コメントを追加", className: "ml-2 border rounded px-2 py-1 mt-2 w-full", onChange: (e)=>handleInspectionChange(e, item), __source: { fileName: "", lineNumber: 83, columnNumber: 25 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this }, "異常箇所の画像アップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "abnormal_image", className: "block mt-2", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded mr-2", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, "点検結果を保存"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, "点検作業を完了")) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "トンネルを選択してください。")), tab === 'history' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "過去の点検作業履歴")))); }