function MainComponent() { const [selectedProject, setSelectedProject] = useState(""); const [projects, setProjects] = useState([]); const [roles, setRoles] = useState([]); const [employees, setEmployees] = useState([]); const [plannedHeadcount, setPlannedHeadcount] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [showGenie, setShowGenie] = useState(false); const [genieQuestion, setGenieQuestion] = useState(""); const [genieResponse, setGenieResponse] = useState(""); const [genieLoading, setGenieLoading] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const [messages, setMessages] = useState([]); const [isGenieCollapsed, setIsGenieCollapsed] = useState(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(); }, []); useEffect(()=>{ const fetchPlannedHeadcount = async ()=>{ if (!selectedProject) { setPlannedHeadcount(null); return; } try { const response = await fetch("/api/planned-headcount", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ projectNumber: selectedProject }) }); if (!response.ok) { throw new Error("Failed to fetch planned headcount"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setPlannedHeadcount(data.project); } catch (err) { console.error(err); setError(err.message); } }; fetchPlannedHeadcount(); }, [ selectedProject ]); const calculateGapData = ()=>{ if (!selectedProject || !plannedHeadcount) return []; return roles.map((role)=>{ const projectEmployees = employees.filter((emp)=>emp.project_number === selectedProject && emp.employee_role === role.name); const plannedRole = plannedHeadcount.roles.find((r)=>r.role === role.name) || { headcount: 0, allocations: { q2: 0, q3: 0, q4: 0 } }; const assignedQ2 = projectEmployees.reduce((sum, emp)=>sum + (Number(emp.assigned_q2_25) || 0), 0) / 100; const assignedQ3 = projectEmployees.reduce((sum, emp)=>sum + (Number(emp.assigned_q3_25) || 0), 0) / 100; const assignedQ4 = projectEmployees.reduce((sum, emp)=>sum + (Number(emp.assigned_q4_25) || 0), 0) / 100; return { role: role.name, q2: { planned: Number(plannedRole.headcount), assigned: assignedQ2, gap: Number(plannedRole.headcount) - assignedQ2 }, q3: { planned: Number(plannedRole.headcount), assigned: assignedQ3, gap: Number(plannedRole.headcount) - assignedQ3 }, q4: { planned: Number(plannedRole.headcount), assigned: assignedQ4, gap: Number(plannedRole.headcount) - assignedQ4 } }; }); }; const gapData = calculateGapData(); const handleGenieQuestion = async ()=>{ if (!genieQuestion.trim()) return; setGenieLoading(true); try { const [contextResponse, employeeResponse] = await Promise.all([ fetch("/api/ask-genie", { method: "POST" }), fetch("/api/get-employee-data", { method: "POST" }) ]); if (!contextResponse.ok || !employeeResponse.ok) { throw new Error("Failed to fetch data"); } const [contextData, employeeData] = await Promise.all([ contextResponse.json(), employeeResponse.json() ]); const systemMessage = { role: "system", content: `You are a Resource Management AI assistant analyzing employee and project data. Your primary focus is helping with resource allocation and staffing questions. Current Employee Information: ${employeeData.employees.map((emp)=>`- ${emp.name} (${emp.role}) • Project: ${emp.project.name} (${emp.project.program}) • Manager: ${emp.manager.name} • Allocations: Q1: ${emp.allocations.q1_25}%, Q2: ${emp.allocations.q2_25}%, Q3: ${emp.allocations.q3_25}%, Q4: ${emp.allocations.q4_25}%`).join("\n")} Role Distribution: ${employeeData.roles.map((role)=>`- ${role.name}: ${role.employeeCount} employees • Total Allocation: Q1: ${role.totalAllocation.q1}%, Q2: ${role.totalAllocation.q2}%, Q3: ${role.totalAllocation.q3}%, Q4: ${role.totalAllocation.q4}%`).join("\n")} Project Information: ${contextData.projects?.map((p)=>`- ${p.project} (${p.program}) • TPM: ${p.tpm} • Total Resources: ${p.totalResources} • Role Distribution: ${Object.entries(p.roleDistribution || {}).map(([role, count])=>`${role}: ${count}`).join(", ")}`).join("\n")} Summary Statistics: - Total Employees: ${employeeData.summary.totalEmployees} - Total Roles: ${employeeData.summary.totalRoles} - Total Projects: ${employeeData.summary.totalProjects} - Total Programs: ${employeeData.summary.totalPrograms} When answering questions: 1. Always reference specific employee names when discussing staffing 2. Provide role and project context for mentioned employees 3. Include allocation details when discussing resource gaps 4. Be direct and specific in your answers 5. If you don't have access to certain information, clearly state that Please provide detailed, data-driven responses using this information.` }; const userMessage = { role: "user", content: genieQuestion }; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ systemMessage, ...messages, userMessage ], stream: true }) }); if (!response.ok) { throw new Error("Failed to get AI response"); } handleStreamResponse(response); setMessages((prev)=>[ ...prev, userMessage ]); setGenieQuestion(""); } catch (error) { console.error("Error:", error); setGenieResponse("Sorry, I encountered an error while processing your request."); } finally{ setGenieLoading(false); } }; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); } }); if (error) { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0B1221] p-4 pt-32", __source: { fileName: "", lineNumber: 269, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-red-400", __source: { fileName: "", lineNumber: 270, columnNumber: 11 }, __self: this }, error))); } return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0B1221] p-4 md:p-8 pt-16", __source: { fileName: "", lineNumber: 279, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-50", __source: { fileName: "", lineNumber: 280, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-white hover:text-[#00ffff] transition-colors duration-200", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __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: 285, columnNumber: 13 }, __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: 292, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "max-w-[1400px] mx-auto", __source: { fileName: "", lineNumber: 302, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold mt-6 mb-5 shimmering-text", __source: { fileName: "", lineNumber: 303, columnNumber: 11 }, __self: this }, "Resource Gap Analysis"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-5", __source: { fileName: "", lineNumber: 307, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsGenieCollapsed(!isGenieCollapsed), className: ` genie-button px-8 py-4 text-white rounded-2xl font-semibold text-xl transition-all duration-300 ${!isGenieCollapsed ? "animate-[glow_2s_infinite]" : ""} `, __source: { fileName: "", lineNumber: 308, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 323, columnNumber: 17 }, __self: this }, "Ask Genie"), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${isGenieCollapsed ? "down" : "up"} text-sm`, __source: { fileName: "", lineNumber: 324, columnNumber: 17 }, __self: this }))), !isGenieCollapsed && /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-2xl", __source: { fileName: "", lineNumber: 333, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full px-6 py-4 rounded-xl border border-gray-700 bg-gray-800 text-white resize-none", rows: "2", placeholder: "Ask Genie about resource gaps and get AI-powered suggestions...", value: genieQuestion, onChange: (e)=>setGenieQuestion(e.target.value), onKeyDown: (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleGenieQuestion(); } }, __source: { fileName: "", lineNumber: 334, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-[#00ffff] text-gray-900 rounded-lg hover:bg-[#00cccc] transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed", onClick: handleGenieQuestion, disabled: genieLoading || !genieQuestion.trim(), __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, genieLoading ? "Thinking..." : "Ask Genie"), (messages.length > 0 || streamingMessage) && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 rounded-lg border border-gray-700 bg-gray-800 text-white", __source: { fileName: "", lineNumber: 356, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 357, columnNumber: 21 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${msg.role === "user" ? "text-[#00ffff]" : "text-white"}`, __source: { fileName: "", lineNumber: 359, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 367, columnNumber: 27 }, __self: this }, msg.role === "user" ? "You: " : "Genie: "), /*#__PURE__*/ React.createElement("span", { style: { whiteSpace: "pre-wrap" }, __source: { fileName: "", lineNumber: 370, columnNumber: 27 }, __self: this }, msg.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 376, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 377, columnNumber: 27 }, __self: this }, "Genie: "), /*#__PURE__*/ React.createElement("span", { style: { whiteSpace: "pre-wrap" }, __source: { fileName: "", lineNumber: 378, columnNumber: 27 }, __self: this }, streamingMessage)))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 mb-8", __source: { fileName: "", lineNumber: 390, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white", __source: { fileName: "", lineNumber: 391, columnNumber: 13 }, __self: this }, "Select Project"), /*#__PURE__*/ React.createElement("select", { className: "w-full md:w-96 px-4 py-2 rounded-lg border border-gray-700 bg-gray-800 text-white", value: selectedProject, onChange: (e)=>setSelectedProject(e.target.value), __source: { fileName: "", lineNumber: 392, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 397, columnNumber: 15 }, __self: this }, "Select a project"), projects.map((project)=>/*#__PURE__*/ React.createElement("option", { key: project.projectNumber, value: project.projectNumber, __source: { fileName: "", lineNumber: 399, columnNumber: 17 }, __self: this }, project.project, " (", project.program, ")")))), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-64", __source: { fileName: "", lineNumber: 410, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-white", __source: { fileName: "", lineNumber: 411, columnNumber: 15 }, __self: this })) : selectedProject ? /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto shadow-md rounded-lg", __source: { fileName: "", lineNumber: 414, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full whitespace-nowrap", __source: { fileName: "", lineNumber: 415, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 416, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-800", __source: { fileName: "", lineNumber: 417, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-left text-xs font-semibold text-white", __source: { fileName: "", lineNumber: 418, columnNumber: 21 }, __self: this }, "Role"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-center text-xs font-semibold text-white", colSpan: "3", __source: { fileName: "", lineNumber: 421, columnNumber: 21 }, __self: this }, "Q2'25"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-center text-xs font-semibold text-white", colSpan: "3", __source: { fileName: "", lineNumber: 427, columnNumber: 21 }, __self: this }, "Q3'25"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-3 text-center text-xs font-semibold text-white", colSpan: "3", __source: { fileName: "", lineNumber: 433, columnNumber: 21 }, __self: this }, "Q4'25")), /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-800", __source: { fileName: "", lineNumber: 440, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 441, columnNumber: 21 }, __self: this }), [ "Q2", "Q3", "Q4" ].map((quarter)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: quarter, __source: { fileName: "", lineNumber: 443, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-xs font-semibold text-white", __source: { fileName: "", lineNumber: 444, columnNumber: 25 }, __self: this }, "Plan"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-xs font-semibold text-white", __source: { fileName: "", lineNumber: 447, columnNumber: 25 }, __self: this }, "Assigned"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-xs font-semibold text-white", __source: { fileName: "", lineNumber: 450, columnNumber: 25 }, __self: this }, "Gap"))))), /*#__PURE__*/ React.createElement("tbody", { className: "divide-y divide-gray-700", __source: { fileName: "", lineNumber: 457, columnNumber: 17 }, __self: this }, gapData.map((row)=>/*#__PURE__*/ React.createElement("tr", { key: row.role, className: "bg-gray-900 hover:bg-gray-800", __source: { fileName: "", lineNumber: 459, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-3 text-sm font-medium text-white", __source: { fileName: "", lineNumber: 463, columnNumber: 23 }, __self: this }, row.role), [ "q2", "q3", "q4" ].map((quarter)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: quarter, __source: { fileName: "", lineNumber: 467, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-3 text-sm text-gray-300 text-center", __source: { fileName: "", lineNumber: 468, columnNumber: 27 }, __self: this }, row[quarter].planned.toFixed(1)), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-3 text-sm text-gray-300 text-center", __source: { fileName: "", lineNumber: 471, columnNumber: 27 }, __self: this }, row[quarter].assigned.toFixed(1)), /*#__PURE__*/ React.createElement("td", { className: `px-4 py-3 text-sm text-center ${row[quarter].gap > 0 ? "text-red-400" : row[quarter].gap < 0 ? "text-yellow-400" : "text-green-400"}`, __source: { fileName: "", lineNumber: 474, columnNumber: 27 }, __self: this }, row[quarter].gap.toFixed(1))))))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 493, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 494, columnNumber: 15 }, __self: this }, "Select a project to view resource gap analysis")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 502, columnNumber: 7 }, __self: this }, ` .shimmering-text { background: linear-gradient( to right, #00ffff 20%, #0099ff 40%, #0099ff 60%, #00ffff 80% ); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shimmer 3s linear infinite; text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); } @keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } `)); }