function MainComponent() { const [projects, setProjects] = React.useState([]); const [report, setReport] = React.useState([]); const [totalTime, setTotalTime] = React.useState(0); const addProject = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); setProjects([ ...projects, { name: formData.get('projectName'), time: 0 } ]); event.target.reset(); }; const startTimer = (index)=>{ setProjects(projects.map((project, i)=>i === index ? { ...project, isRunning: true, timer: setInterval(()=>updateTime(i), 1000) } : project)); }; const stopTimer = (index)=>{ clearInterval(projects[index].timer); setProjects(projects.map((project, i)=>i === index ? { ...project, isRunning: false, timer: null } : project)); }; const updateTime = (index)=>{ setProjects(projects.map((project, i)=>i === index ? { ...project, time: project.time + 1 } : project)); }; React.useEffect(()=>{ const total = projects.reduce((acc, project)=>acc + project.time, 0); setTotalTime(total); }, [ projects ]); const generateReport = ()=>{ setReport(projects.map((project)=>`${project.name}: ${project.time} seconds`)); }; const projectNames = projects.map((project)=>project.name); const projectList = projects.map((project, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, project.name), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, project.time, " seconds"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>project.isRunning ? stopTimer(index) : startTimer(index), className: `px-4 py-2 text-white rounded-md ${project.isRunning ? 'bg-[#dc3545]' : 'bg-[#0D6EFD]'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, project.isRunning ? 'Stop' : 'Start'))); const datalistId = "projectsDatalist"; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-6", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-6 text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "Project Time Tracker"), /*#__PURE__*/ React.createElement("form", { onSubmit: addProject, className: "mb-6 flex", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "projectName", placeholder: "Enter project name", className: "border border-gray-300 rounded-md py-2 px-4 mr-2 flex-grow", list: datalistId, required: true, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("datalist", { id: datalistId, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, projectNames.map((name, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: name, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#198754] text-white rounded-md", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Add Project")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, projectList), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "Total Time: ", totalTime, " seconds"), /*#__PURE__*/ React.createElement("button", { onClick: generateReport, className: "px-4 py-2 bg-[#ffc107] text-white rounded-md", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Generate Report")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, report.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, item)))); }