function MainComponent() { const [roles] = React.useState([ 'Engineer', 'Analyst', 'Project Manager', 'Administrator' ]); const [projects, setProjects] = React.useState([]); const [selectedRole, setSelectedRole] = React.useState(''); const [hours, setHours] = React.useState(''); const [projectName, setProjectName] = React.useState(''); const [phases, setPhases] = React.useState([ 'Planning', 'Design', 'Development', 'Testing', 'Deployment' ]); const [selectedPhase, setSelectedPhase] = React.useState(phases[0]); const [projectTemplate, setProjectTemplate] = React.useState(null); const handleRoleChange = (event)=>{ setSelectedRole(event.target.value); }; const handleHoursChange = (event)=>{ setHours(event.target.value); }; const handleProjectNameChange = (event)=>{ setProjectName(event.target.value); }; const handlePhaseChange = (event)=>{ setSelectedPhase(event.target.value); }; const handleAddProject = (event)=>{ event.preventDefault(); setProjects((currentProjects)=>[ ...currentProjects, { name: projectName, hours: hours, role: selectedRole, phases: [ ...phases ] } ]); resetForm(); }; const handleCopyTemplate = ()=>{ if (projectTemplate) { setProjectName(projectTemplate.name); setHours(projectTemplate.hours); setSelectedRole(projectTemplate.role); setPhases(projectTemplate.phases); } }; const handleSelectTemplate = (event)=>{ const projectIndex = event.target.value; setProjectTemplate(projects[projectIndex] || null); }; const resetForm = ()=>{ setProjectName(''); setHours(''); setSelectedRole(''); setSelectedPhase(phases[0]); }; const responsiveFormItem = "md:w-1/2 px-3 mb-6 md:mb-0"; const projectPhaseEdit = (index, event)=>{ const newPhases = [ ...phases ]; newPhases[index] = event.target.value; setPhases(newPhases); }; const projectOptions = projects.map((project, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: index, __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, project.name)); const phaseInputs = phases.map((phase, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: responsiveFormItem, __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto text-sm mb-2", htmlFor: `phase-${index}`, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, "Phase ", index + 1), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: `phase-${index}`, type: "text", value: phase, onChange: (event)=>projectPhaseEdit(index, event), __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto mt-10", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "shadow-md rounded px-8 pt-6 pb-8 mb-4 bg-white", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "block text-gray-700 font-roboto text-xl mb-6", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Project Management"), /*#__PURE__*/ React.createElement("div", { className: `${responsiveFormItem} mb-4`, __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto text-sm mb-2", htmlFor: "role-selector", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Select Role"), /*#__PURE__*/ React.createElement("select", { className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "role-selector", value: selectedRole, onChange: handleRoleChange, name: "role", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, "Select a role..."), roles.map((role)=>/*#__PURE__*/ React.createElement("option", { key: role, value: role, __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, role)))), /*#__PURE__*/ React.createElement("div", { className: `${responsiveFormItem} mb-4`, __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto text-sm mb-2", htmlFor: "project-name", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Project Name"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "project-name", type: "text", value: projectName, onChange: handleProjectNameChange, name: "projectName", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `${responsiveFormItem} mb-4`, __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto text-sm mb-2", htmlFor: "hours", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, "Hours"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "hours", type: "number", value: hours, onChange: handleHoursChange, name: "hours", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `${responsiveFormItem} mb-4`, __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto text-sm mb-2", htmlFor: "phase-selector", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "Current Phase"), /*#__PURE__*/ React.createElement("select", { className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "phase-selector", value: selectedPhase, onChange: handlePhaseChange, name: "phase", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, phases.map((phase, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: phase, __source: { fileName: "", lineNumber: 146, columnNumber: 19 }, __self: this }, phase)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, phaseInputs), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleAddProject, __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, "Add Project"), /*#__PURE__*/ React.createElement("select", { className: "shadow border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", onChange: handleSelectTemplate, value: projectTemplate ? projects.indexOf(projectTemplate) : '', name: "template", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, "Use a template..."), projectOptions), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline ml-2", type: "button", onClick: handleCopyTemplate, disabled: !projectTemplate, __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "Copy Template")))))); }