function MainComponent() { const [clients, setClients] = React.useState([]); const [clientName, setClientName] = React.useState(""); const [timers, setTimers] = React.useState({}); const [workLogs, setWorkLogs] = React.useState({}); const [monthlyDistribution, setMonthlyDistribution] = React.useState({}); const [view, setView] = React.useState("stopwatch"); const handleAddClient = (event)=>{ event.preventDefault(); setClients([ ...clients, { name: clientName } ]); setClientName(""); }; const handleStartTimer = (client)=>{ setTimers({ ...timers, [client]: Date.now() }); }; const handleStopTimer = (client)=>{ const elapsed = Date.now() - timers[client]; const updatedLogs = { ...workLogs, [client]: (workLogs[client] || 0) + elapsed }; setWorkLogs(updatedLogs); setTimers({ ...timers, [client]: null }); const total = Object.values(updatedLogs).reduce((acc, time)=>acc + time, 0); const distribution = Object.fromEntries(Object.entries(updatedLogs).map(([key, value])=>[ key, (value / total * 100).toFixed(2) + "%" ])); setMonthlyDistribution(distribution); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[250px] bg-gray-800 text-white p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "メニュー"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full text-left py-2 px-3 ${view === "stopwatch" ? "bg-gray-700" : ""}`, onClick: ()=>setView("stopwatch"), __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "作業ごとのストップウォッチ画面")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full text-left py-2 px-3 ${view === "distribution" ? "bg-gray-700" : ""}`, onClick: ()=>setView("distribution"), __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "顧客ごとの作業時間の1ヶ月割合")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full text-left py-2 px-3 ${view === "register" ? "bg-gray-700" : ""}`, onClick: ()=>setView("register"), __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "顧客登録画面")))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, view === "register" && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "顧客登録画面"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleAddClient, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "customerName", value: clientName, onChange: (e)=>setClientName(e.target.value), placeholder: "顧客名", className: "w-full py-2 px-3 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "py-2 px-4 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "登録"))), view === "stopwatch" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "作業ごとのストップウォッチ画面"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, clients.map((client, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-4 rounded flex justify-between items-center", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this }, client.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "py-1 px-2 bg-green-500 text-white rounded mr-2", onClick: ()=>handleStartTimer(client.name), __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this }, "開始"), /*#__PURE__*/ React.createElement("button", { className: "py-1 px-2 bg-red-500 text-white rounded", onClick: ()=>handleStopTimer(client.name), __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, "停止")), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, timers[client.name] ? ((Date.now() - timers[client.name]) / 1000).toFixed(2) + '秒' : workLogs[client.name] ? (workLogs[client.name] / 1000).toFixed(2) + '秒' : '0秒'))))), view === "distribution" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "顧客ごとの作業時間の1ヶ月割合"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, Object.entries(monthlyDistribution).map(([client, percentage], index)=>/*#__PURE__*/ React.createElement("p", { key: index, __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, client, ": ", percentage)))))); }