function MainComponent() { const [selectedTpm, setSelectedTpm] = useState(""); const [selectedProjects, setSelectedProjects] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [projects, setProjects] = useState([]); const [roles, setRoles] = useState([]); const [employees, setEmployees] = useState([]); const [allocations, setAllocations] = useState({}); const [saveStatus, setSaveStatus] = useState({ loading: false, error: null, success: false }); useEffect(()=>{ const fetchData = async ()=>{ try { const [projectsResponse, rolesResponse, employeesResponse] = await Promise.all([ fetch("/api/projects", { method: "POST" }), fetch("/api/roles", { method: "POST" }), fetch("/api/resources", { method: "POST" }) ]); if (!projectsResponse.ok || !rolesResponse.ok || !employeesResponse.ok) { throw new Error("Failed to fetch data"); } const projectsData = await projectsResponse.json(); const rolesData = await rolesResponse.json(); const employeesData = await employeesResponse.json(); if (projectsData.error || rolesData.error || employeesData.error) { throw new Error(projectsData.error || rolesData.error || employeesData.error); } setProjects(projectsData.projects); setRoles(rolesData.roles); setEmployees(employeesData.employees); setLoading(false); } catch (err) { console.error(err); setError(err.message); setLoading(false); } }; fetchData(); }, []); const tpms = [ ...new Set(projects.map((project)=>project.tpm)) ].filter(Boolean).sort(); const filteredProjects = projects.filter((project)=>project.tpm === selectedTpm); const handleAllocationChange = (projectNumber, roleId, quarter, value)=>{ const numValue = value === "" ? "" : Math.min(Math.max(0, Number(value)), 1); setAllocations((prev)=>({ ...prev, [`${projectNumber}-${roleId}`]: { ...prev[`${projectNumber}-${roleId}`], [quarter]: numValue * 100 } })); }; const handleCopyActual = ()=>{ const newAllocations = {}; selectedProjects.forEach((projectNumber)=>{ roles.forEach((role)=>{ const key = `${projectNumber}-${role.id}`; const q1Value = Number(calculateQ1ActualSum(projectNumber, role.name)) * 100; newAllocations[key] = { q2: q1Value, q3: q1Value, q4: q1Value }; }); }); setAllocations(newAllocations); }; const handleClearAll = ()=>{ setAllocations({}); }; const handleSaveAllocations = async ()=>{ setSaveStatus({ loading: true, error: null, success: false }); try { const updates = Object.entries(allocations).map(async ([key, allocation])=>{ const [projectNumber, roleId] = key.split("-"); const response = await fetch("/api/update-allocations", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ projectNumber, roleId, q2: allocation.q2 || 0, q3: allocation.q3 || 0, q4: allocation.q4 || 0 }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || `Failed to update allocation for project ${projectNumber}`); } return await response.json(); }); await Promise.all(updates); setSaveStatus({ loading: false, error: null, success: true }); setTimeout(()=>{ setSaveStatus((prev)=>({ ...prev, success: false })); }, 3000); } catch (error) { console.error("Save error:", error); setSaveStatus({ loading: false, error: error.message || "Failed to save allocations", success: false }); } }; const calculateQ1ActualSum = (projectNumber, roleName)=>{ const matchingEmployees = employees.filter((emp)=>emp.project_number === projectNumber && emp.employee_role === roleName && emp.actual_q1_25 != null); if (matchingEmployees.length === 0) return "0.0"; const sum = matchingEmployees.reduce((total, emp)=>{ const allocation = Number(emp.actual_q1_25) / 100; return total + allocation; }, 0); return sum.toFixed(1); }; if (error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0B1221] p-4", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-red-400", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, error))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0B1221] p-4 md:p-8", __source: { fileName: "", lineNumber: 173, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-50", __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-white hover:text-[#00ffff] transition-colors duration-200", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "max-w-[1400px] mx-auto", __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-[#00E5FF] mb-8", __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this }, "Project Planning"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 201, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#00E5FF] mb-2", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, "Select TPM"), /*#__PURE__*/ React.createElement("select", { className: "w-full md:w-96 px-4 py-2 rounded-lg border border-gray-700 bg-gray-800 text-cyan-300", value: selectedTpm, onChange: (e)=>{ setSelectedTpm(e.target.value); setSelectedProjects([]); }, __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, "Select a TPM"), tpms.map((tpm)=>/*#__PURE__*/ React.createElement("option", { key: tpm, value: tpm, __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, tpm)))), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-64", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-cyan-400", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement(React.Fragment, null, selectedTpm && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-cyan-400 mb-4", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, "Select Projects"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, filteredProjects.map((project)=>/*#__PURE__*/ React.createElement("div", { key: project.projectNumber, className: "p-4 rounded-lg border border-gray-700 bg-gray-800 hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 233, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 237, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: `project-${project.projectNumber}`, checked: selectedProjects.includes(project.projectNumber), onChange: (e)=>{ setSelectedProjects(e.target.checked ? [ ...selectedProjects, project.projectNumber ] : selectedProjects.filter((id)=>id !== project.projectNumber)); }, className: "h-5 w-5 text-cyan-500 rounded border-gray-600", __source: { fileName: "", lineNumber: 238, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `project-${project.projectNumber}`, className: "text-cyan-300", __source: { fileName: "", lineNumber: 255, columnNumber: 25 }, __self: this }, project.project, " (", project.program, ")")))))), selectedProjects.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex gap-4", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCopyActual, className: "px-4 py-2 text-sm text-black bg-cyan-400 rounded hover:bg-cyan-300 disabled:opacity-50 transition-colors", disabled: saveStatus.loading, __source: { fileName: "", lineNumber: 271, columnNumber: 19 }, __self: this }, "Copy Q1 Actual"), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveAllocations, className: "px-4 py-2 text-sm text-black bg-green-400 rounded hover:bg-green-300 disabled:opacity-50 transition-colors", disabled: saveStatus.loading, __source: { fileName: "", lineNumber: 278, columnNumber: 19 }, __self: this }, saveStatus.loading ? "Saving..." : "Save All"), /*#__PURE__*/ React.createElement("button", { onClick: handleClearAll, className: "px-4 py-2 text-sm text-black bg-red-400 rounded hover:bg-red-300 disabled:opacity-50 transition-colors", disabled: saveStatus.loading, __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, "Clear All")), saveStatus.error && /*#__PURE__*/ React.createElement("div", { className: "text-red-400 text-sm mt-2", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, saveStatus.error), saveStatus.success && /*#__PURE__*/ React.createElement("div", { className: "text-green-400 text-sm mt-2", __source: { fileName: "", lineNumber: 300, columnNumber: 19 }, __self: this }, "All allocations saved successfully!"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto shadow-lg rounded-lg bg-gray-800 border border-gray-700", __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full whitespace-nowrap", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 307, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-900", __source: { fileName: "", lineNumber: 308, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-cyan-400", __source: { fileName: "", lineNumber: 309, columnNumber: 25 }, __self: this }, "Program"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-cyan-400", __source: { fileName: "", lineNumber: 312, columnNumber: 25 }, __self: this }, "Project"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-cyan-400", __source: { fileName: "", lineNumber: 315, columnNumber: 25 }, __self: this }, "Number"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-cyan-400", __source: { fileName: "", lineNumber: 318, columnNumber: 25 }, __self: this }, "Role"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-cyan-400", __source: { fileName: "", lineNumber: 321, columnNumber: 25 }, __self: this }, "Q1'25 Actual"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-cyan-400", __source: { fileName: "", lineNumber: 324, columnNumber: 25 }, __self: this }, "Q2'25"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-cyan-400", __source: { fileName: "", lineNumber: 327, columnNumber: 25 }, __self: this }, "Q3'25"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-cyan-400", __source: { fileName: "", lineNumber: 330, columnNumber: 25 }, __self: this }, "Q4'25"))), /*#__PURE__*/ React.createElement("tbody", { className: "divide-y divide-gray-700", __source: { fileName: "", lineNumber: 335, columnNumber: 21 }, __self: this }, selectedProjects.map((projectNumber)=>{ const project = projects.find((p)=>p.projectNumber === projectNumber); return roles.map((role, roleIndex)=>{ const key = `${projectNumber}-${role.id}`; const employeeData = employees.find((e)=>e.project_number === projectNumber && e.employee_role === role.name); const currentAllocations = allocations[key] || {}; const isFirstRole = roleIndex === 0; return /*#__PURE__*/ React.createElement("tr", { key: key, className: "bg-gray-800 hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 351, columnNumber: 29 }, __self: this }, isFirstRole ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-3 text-sm text-cyan-300", rowSpan: roles.length, __source: { fileName: "", lineNumber: 357, columnNumber: 35 }, __self: this }, project.program), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-3 text-sm text-cyan-300", rowSpan: roles.length, __source: { fileName: "", lineNumber: 363, columnNumber: 35 }, __self: this }, project.project), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-3 text-sm text-cyan-300", rowSpan: roles.length, __source: { fileName: "", lineNumber: 369, columnNumber: 35 }, __self: this }, project.projectNumber)) : null, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-3 text-sm text-cyan-300", __source: { fileName: "", lineNumber: 377, columnNumber: 31 }, __self: this }, role.name), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-3 text-sm text-cyan-300", __source: { fileName: "", lineNumber: 380, columnNumber: 31 }, __self: this }, calculateQ1ActualSum(projectNumber, role.name)), [ "q2", "q3", "q4" ].map((quarter)=>/*#__PURE__*/ React.createElement("td", { key: quarter, className: "px-4 py-3 text-sm", __source: { fileName: "", lineNumber: 384, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", min: "0", max: "1", step: "0.1", className: "w-20 px-2 py-1 text-right border rounded bg-gray-900 border-gray-600 text-cyan-300", value: currentAllocations[quarter] ? (currentAllocations[quarter] / 100).toFixed(1) : "", onChange: (e)=>handleAllocationChange(projectNumber, role.id, quarter, e.target.value), placeholder: "0.0", __source: { fileName: "", lineNumber: 385, columnNumber: 35 }, __self: this })))); }); })))))))); }