function MainComponent() { const [tasks, setTasks] = React.useState([]); const [currentCustomerName, setCurrentCustomerName] = React.useState(''); const [currentTaskName, setCurrentTaskName] = React.useState(''); const addTask = ()=>{ const newTask = { id: Date.now(), customerName: currentCustomerName, taskName: currentTaskName, startTime: null, elapsedTime: 0, status: 'stopped' }; setTasks([ ...tasks, newTask ]); setCurrentCustomerName(''); setCurrentTaskName(''); }; const toggleStartPause = (id)=>{ const updatedTasks = tasks.map((task)=>{ if (task.id === id) { if (task.status === 'stopped') { return { ...task, startTime: Date.now() - task.elapsedTime, status: 'running' }; } else if (task.status === 'running') { return { ...task, elapsedTime: Date.now() - task.startTime, status: 'stopped' }; } } return task; }); setTasks(updatedTasks); }; const completeTask = (id)=>{ const updatedTasks = tasks.map((task)=>{ if (task.id === id) { const finalElapsed = task.status === 'running' ? Date.now() - task.startTime : task.elapsedTime; return { ...task, elapsedTime: finalElapsed, status: 'completed' }; } return task; }); setTasks(updatedTasks); }; const exportCSV = ()=>{ const completedTasks = tasks.filter((task)=>task.status === 'completed'); const csvContent = [ [ "日付", "顧客名", "タスク名", "完了時間" ], ...completedTasks.map((task)=>[ new Date(task.id).toLocaleString(), task.customerName, task.taskName, new Date(task.elapsedTime).toISOString().substr(11, 8) ]) ].map((e)=>e.join(",")).join("\n"); const blob = new Blob([ csvContent ], { type: 'text/csv;charset=utf-8;' }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.setAttribute('download', `completed_tasks_${Date.now()}.csv`); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-4 bg-gray-100", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "タスクタイマー"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "customerName", value: currentCustomerName, onChange: (e)=>setCurrentCustomerName(e.target.value), placeholder: "顧客名", className: "border border-gray-400 p-2 mr-2 w-full md:w-auto mb-2 md:mb-0 font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "taskName", value: currentTaskName, onChange: (e)=>setCurrentTaskName(e.target.value), placeholder: "タスク名", className: "border border-gray-400 p-2 mr-2 w-full md:w-auto font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTask, className: "bg-blue-500 text-white p-2 rounded cursor-pointer font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: exportCSV, className: "bg-green-500 text-white p-2 rounded cursor-pointer font-roboto mb-2 md:mb-0", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "エクスポート")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, tasks.map((task)=>{ const elapsedTime = task.status === 'running' ? Date.now() - task.startTime : task.elapsedTime; const timeString = new Date(elapsedTime).toISOString().substr(11, 8); return /*#__PURE__*/ React.createElement("div", { key: task.id, className: `p-4 bg-white shadow rounded flex items-center justify-between ${task.status === 'completed' ? 'bg-gray-300' : 'bg-white'}`, __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleStartPause(task.id), className: `p-2 mr-2 fas ${task.status === 'running' ? 'fa-pause text-yellow-500' : 'fa-play text-green-500'}`, __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>completeTask(task.id), className: "text-gray-500 p-2 mr-2 fas fa-check", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }, task.taskName), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 114, columnNumber: 21 }, __self: this }, task.customerName))), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, timeString)); })))); }