...

); }`))) } ] }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 194, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ModernLayout, { ...sampleData, __source: { fileName: "", lineNumber: 195, columnNumber: 7 }, __self: this })); } function Button({ text, keyboardCommand, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "inline-flex items-center justify-center px-4 py-2 bg-[#1E1E1E] text-white border border-[#2A2A2A] rounded-lg hover:bg-[#2A2A2A] transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, text), keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-1.5 py-0.5 text-xs bg-[#2A2A2A] text-white rounded", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Click me", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Save", keyboardCommand: "⌘S", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Open", keyboardCommand: "⌘O", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function DocumentationLayoutSelector({ selectedLayout = 'corporate', onLayoutChange }) { const layouts = [ { id: 'corporate', name: 'Corporate', description: 'Professional layout based on Macquarie style', preview: '/images/corporate-layout-preview.jpg' }, { id: 'modern', name: 'Modern', description: 'Clean and contemporary documentation style', preview: '/images/modern-layout-preview.jpg' }, { id: 'classic', name: 'Classic', description: 'Traditional documentation format', preview: '/images/classic-layout-preview.jpg' } ]; return /*#__PURE__*/ React.createElement("div", { className: "inline-block", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, layouts.map((layout)=>/*#__PURE__*/ React.createElement("div", { key: layout.id, className: `p-4 rounded-lg border cursor-pointer transition-all duration-200 ${selectedLayout === layout.id ? 'border-[#1464F6] bg-[#1E1E1E]' : 'border-[#2A2A2A] bg-[#151515] hover:border-[#3A3A3A]'}`, onClick: ()=>onLayoutChange?.(layout.id), __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-video mb-4 overflow-hidden rounded-md", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: layout.preview, alt: `${layout.name} layout preview`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, layout.name), selectedLayout === layout.id && /*#__PURE__*/ React.createElement("span", { className: "text-[#1464F6]", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-[#A4A4A4] text-sm", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, layout.description))))); } function DocumentationLayoutSelectorStory() { const [selectedLayout, setSelectedLayout] = useState('corporate'); return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#151515] min-h-screen", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-xl mb-6", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Documentation Layout"), /*#__PURE__*/ React.createElement(DocumentationLayoutSelector, { selectedLayout: selectedLayout, onLayoutChange: setSelectedLayout, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [activeTab, setActiveTab] = useState("visualizer"); const [process, setProcess] = useState(null); const [steps, setSteps] = useState([]); const [teams, setTeams] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [zoomLevel, setZoomLevel] = useState(100); const [totalDuration, setTotalDuration] = useState(0); const [showDocOptions, setShowDocOptions] = useState(false); const [showAIOptions, setShowAIOptions] = useState(false); const [documentationLevel, setDocumentationLevel] = useState("standard"); const [aiAnalysisType, setAiAnalysisType] = useState("comprehensive"); const [streamingMessage, setStreamingMessage] = useState(""); const [aiAnalysisResult, setAiAnalysisResult] = useState(null); const [documentation, setDocumentation] = useState(null); const [processName, setProcessName] = useState(""); const [processDescription, setProcessDescription] = useState(""); const [newStep, setNewStep] = useState({ name: "", description: "", team: "", duration: 0 }); const [isGeneratingProcess, setIsGeneratingProcess] = useState(false); const [isGeneratingDocumentation, setIsGeneratingDocumentation] = useState(false); const [isAnalyzing, setIsAnalyzing] = useState(false); const [companyLogo, setCompanyLogo] = useState(null); const [upload, { loading: uploading }] = useUpload(); const { data: user, loading: userLoading } = useUser(); const [analysisData, setAnalysisData] = useState(null); const [charts, setCharts] = useState(null); const [showExportOptions, setShowExportOptions] = useState(false); const [exportLoading, setExportLoading] = useState(false); const [exportError, setExportError] = useState(null); const [showDocLevelModal, setShowDocLevelModal] = useState(false); const [showAnalysisLevelModal, setShowAnalysisLevelModal] = useState(false); const [showExportFormatModal, setShowExportFormatModal] = useState(false); const [exportFormat, setExportFormat] = useState("pdf"); const [exportSection, setExportSection] = useState(null); // 'documentation' or 'analysis' // Add state for user avatar const [userAvatar, setUserAvatar] = useState(null); // Add new state for API key status const [hasApiKey, setHasApiKey] = useState(false); const [apiKeyError, setApiKeyError] = useState(null); // Add effect to check for API key useEffect(()=>{ checkApiKey(); }, []); const checkApiKey = async ()=>{ try { const response = await fetch("/api/manage-openai-key", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "get" }) }); const data = await response.json(); setHasApiKey(!data.error); setApiKeyError(data.error); } catch (error) { console.error("Error checking API key:", error); setApiKeyError("Failed to check API key status"); } }; // Add effect to generate avatar for user useEffect(()=>{ if (user?.email) { // Generate initials from name or email const initials = user.name ? user.name.split(" ").map((n)=>n[0]).join("").toUpperCase() : user.email[0].toUpperCase(); // Set a random background color based on email const colors = [ "bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-red-500", "bg-purple-500", "bg-pink-500" ]; const colorIndex = user.email.split("").reduce((acc, char)=>acc + char.charCodeAt(0), 0) % colors.length; setUserAvatar({ initials, colorClass: colors[colorIndex] }); } }, [ user ]); const tooltipDefinitions = { "Efficiency Impact": "A measure of how well your process utilizes resources and time, shown as a percentage where 100% represents optimal efficiency", "Potential Savings": "Estimated cost and time reductions possible through process optimization and implementing recommended improvements", "Process Timeline & Cost Projection": "Visual forecast of process duration and associated costs over time, comparing current vs optimized scenarios", "Team Workload Distribution": "Analysis of how work is divided among teams, showing the percentage of total process time each team handles", "Critical Bottlenecks": "Points in the process that limit overall flow and efficiency, ranked by severity and impact", "Recommended Improvements": "Actionable suggestions to enhance process efficiency, reduce costs, and optimize workflow" }; const TooltipHeading = ({ title })=>/*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-4 relative group cursor-help", __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "invisible group-hover:visible absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg w-64 z-10", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, tooltipDefinitions[title], /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full w-2 h-2 bg-gray-900 rotate-45", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }))); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ if (activeTab === "documentation") { setDocumentation(message); setIsGeneratingDocumentation(false); } else if (activeTab === "analysis") { setAiAnalysisResult(message); setIsAnalyzing(false); } setStreamingMessage(""); } }); useEffect(()=>{ fetchTeams(); }, []); useEffect(()=>{ if (steps.length > 0) { calculateTotalDuration(); } }, [ steps ]); const BPMNElement = ({ element })=>{ if (!element) return null; if (element.type === "sequenceFlow") { const source = bpmnElements.find((e)=>e.id === element.sourceId); const target = bpmnElements.find((e)=>e.id === element.targetId); if (!source || !target) return null; const sourceX = source.type === "task" ? source.position.x + 160 : source.position.x + 18; const targetX = target.type === "task" ? target.position.x : target.position.x + 18; const sourceY = source.position.y + (source.type === "task" ? 40 : 18); const targetY = target.position.y + (target.type === "task" ? 40 : 18); const midX = (sourceX + targetX) / 2; return /*#__PURE__*/ React.createElement("svg", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none", overflow: "visible" }, __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("defs", { __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("marker", { id: `arrowhead-${element.id}`, markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: "#2563eb", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("path", { d: `M ${sourceX} ${sourceY} Q ${midX} ${sourceY} ${midX} ${(sourceY + targetY) / 2} Q ${midX} ${targetY} ${targetX} ${targetY}`, stroke: "#2563eb", strokeWidth: "2", fill: "none", markerEnd: `url(#arrowhead-${element.id})`, __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this })); } const baseStyle = { position: "absolute", left: `${element.position.x}px`, top: `${element.position.y}px`, transition: "all 0.3s ease" }; switch(element.type){ case "startEvent": return /*#__PURE__*/ React.createElement("div", { style: { ...baseStyle, width: "36px", height: "36px", borderRadius: "50%", border: "2px solid #45a045", backgroundColor: "#fff", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }, __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#45a045", opacity: 0.2 }, __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this })); case "endEvent": return /*#__PURE__*/ React.createElement("div", { style: { ...baseStyle, width: "36px", height: "36px", borderRadius: "50%", border: "2px solid #ff4d4f", backgroundColor: "#fff", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }, __source: { fileName: "", lineNumber: 244, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#ff4d4f", opacity: 0.2 }, __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this })); case "task": return /*#__PURE__*/ React.createElement("div", { style: { ...baseStyle, width: "160px", minHeight: "80px", border: "2px solid #2563eb", borderRadius: "8px", backgroundColor: "#fff", padding: "12px", boxShadow: "0 2px 4px rgba(0,0,0,0.1)", zIndex: 2 }, __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-gray-900 mb-2", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, element.name), element.description && /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-600 mb-2 line-clamp-2", __source: { fileName: "", lineNumber: 287, columnNumber: 15 }, __self: this }, element.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-auto text-xs", __source: { fileName: "", lineNumber: 291, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-blue-50 text-blue-700 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }, element.team || "Unassigned"), /*#__PURE__*/ React.createElement("span", { className: "bg-green-50 text-green-700 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, element.duration, " min"))); default: return null; } }; const convertStepsToBPMN = useCallback((steps)=>{ if (!steps.length) return []; const bpmnElements1 = []; const startX = 50; const startY = 100; const stepSpacing = 240; bpmnElements1.push({ id: "start", type: "startEvent", position: { x: startX, y: startY } }); steps.forEach((step, index)=>{ const xPos = startX + (index + 1) * stepSpacing; bpmnElements1.push({ id: step.id, type: "task", name: step.name, description: step.description, team: step.team, duration: step.duration, position: { x: xPos, y: startY - 20 } }); const sourceId = index === 0 ? "start" : steps[index - 1].id; bpmnElements1.push({ id: `flow_${sourceId}_${step.id}`, type: "sequenceFlow", sourceId: sourceId, targetId: step.id }); }); if (steps.length > 0) { bpmnElements1.push({ id: "end", type: "endEvent", position: { x: startX + (steps.length + 1) * stepSpacing, y: startY } }); bpmnElements1.push({ id: `flow_${steps[steps.length - 1].id}_end`, type: "sequenceFlow", sourceId: steps[steps.length - 1].id, targetId: "end" }); } return bpmnElements1; }, []); const fetchTeams = async ()=>{ try { const response = await fetch("/api/get-teams-public"); if (!response.ok) { throw new Error("Failed to fetch teams"); } const data = await response.json(); setTeams(data.teams || []); } catch (error) { console.error("Error fetching teams:", error); setError("Failed to load teams. Please try again later."); } }; const calculateTotalDuration = ()=>{ const total = steps.reduce((sum, step)=>sum + (parseInt(step.duration) || 0), 0); setTotalDuration(total); }; const handleAddStep = ()=>{ const newStep = { id: Date.now().toString(), name: "", description: "", team: "", duration: 0 }; setSteps([ ...steps, newStep ]); }; const handleUpdateStep = (id, updatedStep)=>{ const updatedSteps = steps.map((step)=>step.id === id ? { ...step, ...updatedStep } : step); setSteps(updatedSteps); }; const handleRemoveStep = (id)=>{ const updatedSteps = steps.filter((step)=>step.id !== id); setSteps(updatedSteps); }; const handleZoomIn = ()=>{ setZoomLevel((prev)=>Math.min(prev + 10, 200)); }; const handleZoomOut = ()=>{ setZoomLevel((prev)=>Math.max(prev - 10, 50)); }; const handleZoomReset = ()=>{ setZoomLevel(100); }; const calculateOptimalZoom = useCallback(()=>{ if (!steps.length) return 100; const containerWidth = document.querySelector(".visualizer-container")?.clientWidth || 800; const containerHeight = document.querySelector(".visualizer-container")?.clientHeight || 600; const stepWidth = 280; // Width of each step + spacing const stepHeight = 180; // Height of each step + spacing const arrowSize = 40; // Space for arrows // Calculate how many steps can fit in a row const stepsPerRow = Math.floor(containerWidth / (stepWidth + arrowSize)); // Calculate number of rows needed const rows = Math.ceil(steps.length / stepsPerRow); // Calculate zoom based on both width and height constraints const widthZoom = containerWidth / ((stepWidth + arrowSize) * Math.min(steps.length, stepsPerRow)) * 100; const heightZoom = containerHeight / (stepHeight * rows) * 100; // Use the smaller zoom level to ensure everything fits return Math.min(widthZoom, heightZoom, 100); }, [ steps.length ]); useEffect(()=>{ const handleResize = ()=>{ setZoomLevel(calculateOptimalZoom()); }; handleResize(); // Initial calculation window.addEventListener("resize", handleResize); return ()=>window.removeEventListener("resize", handleResize); }, [ calculateOptimalZoom ]); const generateProcessWithAI = async ()=>{ if (!processName.trim()) { setError("Please enter a process name"); return; } setIsGeneratingProcess(true); setError(null); try { const response = await fetch("/integrations/google-gemini-1-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Generate a detailed process flow for "${processName}". ${processDescription ? `Description: ${processDescription}` : ""} Include 5-8 steps with realistic durations in minutes, team assignments, and detailed descriptions.` } ], json_schema: { name: "process_steps", schema: { type: "object", properties: { steps: { type: "array", items: { type: "object", properties: { name: { type: "string" }, description: { type: "string" }, team: { type: "string" }, duration: { type: "number" } }, required: [ "name", "description", "team", "duration" ], additionalProperties: false } } }, required: [ "steps" ], additionalProperties: false } } }) }); if (!response.ok) { throw new Error("Failed to generate process"); } const data = await response.json(); const generatedProcess = JSON.parse(data.choices[0].message.content); setSteps(generatedProcess.steps.map((step, index)=>({ ...step, id: `generated-${index}` }))); setProcess({ name: processName, description: processDescription, steps: generatedProcess.steps }); } catch (error) { console.error("Error generating process:", error); setError("Failed to generate process. Please try again."); } finally{ setIsGeneratingProcess(false); } }; // Modify generateDocumentation function const generateDocumentation = async ()=>{ if (steps.length === 0) { setError('Please add steps to your process first'); return; } setIsGeneratingDocumentation(true); setError(null); setActiveTab('documentation'); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: `You are a process documentation expert. Generate detailed ${documentationLevel} level documentation for the following process. Include sections for Executive Summary, Process Overview, Detailed Steps, Roles and Responsibilities, Required Resources, Timeline Analysis, Best Practices, Risk Assessment, Quality Control, and Improvement Recommendations.` }, { role: 'user', content: `Process Name: ${processName || 'Untitled Process'} ${processDescription ? `Process Description: ${processDescription}` : ''} Steps: ${JSON.stringify(steps, null, 2)} Total Duration: ${totalDuration} minutes Documentation Level: ${documentationLevel}` } ], stream: true }) }); if (!response.ok) { throw new Error('Failed to generate documentation'); } handleStreamResponse(response); } catch (error) { console.error('Error generating documentation:', error); setError('Failed to generate documentation. Please try again.'); setIsGeneratingDocumentation(false); } }; // Modify analyzeProcess function const analyzeProcess = async ()=>{ if (steps.length === 0) { setError('Please add steps to your process first'); return; } setIsAnalyzing(true); setError(null); setActiveTab('analysis'); try { // First get structured analysis data const structuredResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: `You are a process optimization expert. Analyze the following process and provide ${aiAnalysisType} insights in a structured format.` }, { role: 'user', content: `Process Name: ${processName || 'Untitled Process'} ${processDescription ? `Process Description: ${processDescription}` : ''} Steps: ${JSON.stringify(steps, null, 2)} Total Duration: ${totalDuration} minutes Analysis Type: ${aiAnalysisType}` } ], json_schema: { name: 'process_analysis', schema: { type: 'object', properties: { efficiency_score: { type: 'number' }, bottlenecks: { type: 'array', items: { type: 'object', properties: { step_name: { type: 'string' }, severity: { type: 'number' }, reason: { type: 'string' } }, required: [ 'step_name', 'severity', 'reason' ], additionalProperties: false } }, team_workload: { type: 'object', properties: { teams: { type: 'array', items: { type: 'object', properties: { name: { type: 'string' }, total_duration: { type: 'number' }, step_count: { type: 'number' } }, required: [ 'name', 'total_duration', 'step_count' ], additionalProperties: false } } }, required: [ 'teams' ], additionalProperties: false }, duration_distribution: { type: 'array', items: { type: 'object', properties: { step_name: { type: 'string' }, duration: { type: 'number' }, percentage: { type: 'number' } }, required: [ 'step_name', 'duration', 'percentage' ], additionalProperties: false } }, recommendations: { type: 'array', items: { type: 'object', properties: { category: { type: 'string' }, suggestion: { type: 'string' }, impact: { type: 'number' } }, required: [ 'category', 'suggestion', 'impact' ], additionalProperties: false } } }, required: [ 'efficiency_score', 'bottlenecks', 'team_workload', 'duration_distribution', 'recommendations' ], additionalProperties: false } } }) }); if (!structuredResponse.ok) { throw new Error('Failed to analyze process'); } const structuredResult = await structuredResponse.json(); const structuredData = JSON.parse(structuredResult.choices[0].message.content); setAnalysisData(structuredData); // Then get narrative analysis const narrativeResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: `You are a process optimization expert. Based on this analysis data, provide a narrative explanation: ${JSON.stringify(structuredData)}` }, { role: 'user', content: 'Provide a detailed narrative analysis of this process data, explaining the findings and recommendations in a clear, professional manner. Include analysis of efficiency, bottlenecks, workload distribution, and specific recommendations for improvement.' } ], stream: true }) }); if (!narrativeResponse.ok) { throw new Error('Failed to generate narrative analysis'); } handleStreamResponse(narrativeResponse); } catch (error) { console.error('Error analyzing process:', error); setError('Failed to analyze process. Please try again.'); setIsAnalyzing(false); } }; const exportProcess = ()=>{ if (steps.length === 0) { setError("Please add steps to your process first"); return; } const processData = { name: processName || "Untitled Process", description: processDescription, steps: steps, totalDuration: totalDuration, createdAt: new Date().toISOString(), documentation: documentation, analysis: aiAnalysisResult }; const dataStr = JSON.stringify(processData, null, 2); const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`; const exportFileDefaultName = `${processName || "process"}_${new Date().toISOString().slice(0, 10)}.json`; const linkElement = document.createElement("a"); linkElement.setAttribute("href", dataUri); linkElement.setAttribute("download", exportFileDefaultName); linkElement.click(); }; const saveProcess = async ()=>{ if (!user) { setError("Please sign in to save your process"); return; } if (steps.length === 0) { setError("Please add steps to your process first"); return; } setLoading(true); setError(null); try { const response = await fetch("/api/save-process", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: processName || "Untitled Process", description: processDescription, steps: steps, documentation: documentation, analysis: aiAnalysisResult }) }); if (!response.ok) { throw new Error("Failed to save process"); } alert("Process saved successfully!"); } catch (error) { console.error("Error saving process:", error); setError("Failed to save process. Please try again."); } finally{ setLoading(false); } }; const handleLogoUpload = async (e)=>{ const file = e.target.files[0]; if (!file) return; try { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setCompanyLogo(url); } catch (error) { console.error("Error uploading logo:", error); setError("Failed to upload logo. Please try again."); } }; const renderDocumentationCover = ()=>{ return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 mb-8 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 813, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-8", __source: { fileName: "", lineNumber: 814, columnNumber: 9 }, __self: this }, companyLogo ? /*#__PURE__*/ React.createElement("div", { className: "relative mb-6", __source: { fileName: "", lineNumber: 816, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: companyLogo, alt: "Company Logo", className: "h-32 object-contain", __source: { fileName: "", lineNumber: 817, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCompanyLogo(null), className: "absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600", __source: { fileName: "", lineNumber: 822, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 826, columnNumber: 17 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 830, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-center mb-2 text-gray-600", __source: { fileName: "", lineNumber: 831, columnNumber: 15 }, __self: this }, "Add Company Logo"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleLogoUpload, className: "hidden", id: "logo-upload", __source: { fileName: "", lineNumber: 834, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "logo-upload", className: "cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50", __source: { fileName: "", lineNumber: 841, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload mr-2", __source: { fileName: "", lineNumber: 845, columnNumber: 17 }, __self: this }), "Upload Logo")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 text-center mb-4", __source: { fileName: "", lineNumber: 850, columnNumber: 11 }, __self: this }, processName || "Untitled Process"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-center mb-6", __source: { fileName: "", lineNumber: 853, columnNumber: 11 }, __self: this }, "Process Documentation"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400 mb-2", __source: { fileName: "", lineNumber: 856, columnNumber: 11 }, __self: this }, "Generated on", " ", new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })), processDescription && /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-center max-w-2xl mt-4", __source: { fileName: "", lineNumber: 865, columnNumber: 13 }, __self: this }, processDescription)), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 pt-6", __source: { fileName: "", lineNumber: 871, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 text-sm", __source: { fileName: "", lineNumber: 872, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 873, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 874, columnNumber: 15 }, __self: this }, "Total Steps"), /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 875, columnNumber: 15 }, __self: this }, steps.length)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 877, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 878, columnNumber: 15 }, __self: this }, "Total Duration"), /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 879, columnNumber: 15 }, __self: this }, totalDuration, " minutes")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 881, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 882, columnNumber: 15 }, __self: this }, "Documentation Level"), /*#__PURE__*/ React.createElement("div", { className: "font-medium capitalize", __source: { fileName: "", lineNumber: 883, columnNumber: 15 }, __self: this }, documentationLevel)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 885, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 886, columnNumber: 15 }, __self: this }, "Last Updated"), /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 887, columnNumber: 15 }, __self: this }, new Date().toLocaleDateString()))))); }; const handleExportClick = (section)=>{ setExportSection(section); setShowExportFormatModal(true); }; const handleExport = async (format)=>{ if (!user) { setExportError("Please sign in to export documents"); return; } setExportLoading(true); setExportError(null); try { let content; const title = processName || "Untitled Process"; if (exportSection === "documentation") { content = documentation; } else if (exportSection === "analysis") { content = { narrative: aiAnalysisResult, data: analysisData, charts: true }; } const response = await fetch("/api/export-documentation", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ content, format, title, processId: process?.id, type: exportSection }) }); if (!response.ok) { if (response.status === 401) { throw new Error("Please sign in to export documents"); } throw new Error("Failed to export document"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } // Create a temporary link to download the file const link = document.createElement("a"); link.href = data.url; link.download = `${title}_${exportSection}.${format}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); setShowExportFormatModal(false); } catch (error) { console.error("Export error:", error); setExportError(error.message); } finally{ setExportLoading(false); } }; const handleGenerateDocumentation = ()=>{ setShowDocLevelModal(true); }; const startDocumentationGeneration = (level)=>{ setDocumentationLevel(level); setShowDocLevelModal(false); generateDocumentation(); }; const handleAnalyzeProcess = ()=>{ setShowAnalysisLevelModal(true); }; const startProcessAnalysis = (level)=>{ setAiAnalysisType(level); setShowAnalysisLevelModal(false); analyzeProcess(); }; const renderAnalysisHeader = (level)=>{ if (level === "expert") { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between w-full", __source: { fileName: "", lineNumber: 993, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-gray-900 mb-1", __source: { fileName: "", lineNumber: 994, columnNumber: 11 }, __self: this }, "Expert Analysis"), /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin text-[#0A66C2] text-2xl", __source: { fileName: "", lineNumber: 995, columnNumber: 11 }, __self: this })); } return /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-gray-900 mb-1", __source: { fileName: "", lineNumber: 999, columnNumber: 12 }, __self: this }, level, " Analysis"); }; // Add API key setup modal const [showApiKeyModal, setShowApiKeyModal] = useState(false); const [apiKey, setApiKey] = useState(""); const [savingApiKey, setSavingApiKey] = useState(false); const handleSaveApiKey = async ()=>{ setSavingApiKey(true); try { const response = await fetch("/api/manage-openai-key", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "save", apiKey }) }); const data = await response.json(); if (data.error) { setApiKeyError(data.error); } else { setHasApiKey(true); setShowApiKeyModal(false); setApiKey(""); setApiKeyError(null); } } catch (error) { console.error("Error saving API key:", error); setApiKeyError("Failed to save API key"); } finally{ setSavingApiKey(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 1036, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-200 py-4", __source: { fileName: "", lineNumber: 1037, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 1038, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-8", __source: { fileName: "", lineNumber: 1039, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-3xl font-medium text-blue-600 font-sriracha hover:text-blue-700 transition-colors", __source: { fileName: "", lineNumber: 1040, columnNumber: 13 }, __self: this }, "easymap"), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex space-x-6", __source: { fileName: "", lineNumber: 1046, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/features", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 1047, columnNumber: 15 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("a", { href: "/pricing", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 1050, columnNumber: 15 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("a", { href: "/resources", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 1053, columnNumber: 15 }, __self: this }, "Resources"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 1062, columnNumber: 11 }, __self: this }, userLoading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse flex space-x-4", __source: { fileName: "", lineNumber: 1064, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 w-8 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 1065, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-8 w-20 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 1066, columnNumber: 17 }, __self: this })) : user ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 1069, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 1070, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 text-gray-600 hover:text-gray-900 rounded-full", __source: { fileName: "", lineNumber: 1071, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 1072, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 hidden group-hover:block z-50", __source: { fileName: "", lineNumber: 1074, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/settings/profile", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 1075, columnNumber: 21 }, __self: this }, "Profile Settings"), /*#__PURE__*/ React.createElement("a", { href: "/settings/account", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 1081, columnNumber: 21 }, __self: this }, "Account Settings"), /*#__PURE__*/ React.createElement("a", { href: "/settings/billing", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 1087, columnNumber: 21 }, __self: this }, "Billing"))), /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 1095, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-3 p-2 text-gray-600 hover:text-gray-900 rounded-full", __source: { fileName: "", lineNumber: 1096, columnNumber: 19 }, __self: this }, userAvatar && /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 rounded-full ${userAvatar.colorClass} flex items-center justify-center text-white font-medium`, __source: { fileName: "", lineNumber: 1098, columnNumber: 23 }, __self: this }, userAvatar.initials), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 1104, columnNumber: 21 }, __self: this }, user.name || user.email), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-xs", __source: { fileName: "", lineNumber: 1107, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 hidden group-hover:block z-50", __source: { fileName: "", lineNumber: 1109, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 1110, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 1111, columnNumber: 23 }, __self: this }, userAvatar && /*#__PURE__*/ React.createElement("div", { className: `w-10 h-10 rounded-full ${userAvatar.colorClass} flex items-center justify-center text-white font-medium`, __source: { fileName: "", lineNumber: 1113, columnNumber: 27 }, __self: this }, userAvatar.initials), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 1119, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 1120, columnNumber: 27 }, __self: this }, user.name || "User"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1123, columnNumber: 27 }, __self: this }, user.email)))), /*#__PURE__*/ React.createElement("a", { href: "/account/profile", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 1129, columnNumber: 21 }, __self: this }, "Your Profile"), /*#__PURE__*/ React.createElement("a", { href: "/customer-portal", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 1135, columnNumber: 21 }, __self: this }, "Customer Portal"), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200", __source: { fileName: "", lineNumber: 1141, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "block px-4 py-2 text-sm text-red-600 hover:bg-red-50", __source: { fileName: "", lineNumber: 1142, columnNumber: 21 }, __self: this }, "Sign Out")))) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 1152, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 1153, columnNumber: 17 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 1159, columnNumber: 17 }, __self: this }, "Sign Up"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1171, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap'); .font-sriracha { font-family: 'Sriracha', cursive; } `), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 1178, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-6", __source: { fileName: "", lineNumber: 1179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-[#4CAF50] text-sm min-w-[120px]", __source: { fileName: "", lineNumber: 1180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 1181, columnNumber: 13 }, __self: this }), "New Process"), /*#__PURE__*/ React.createElement("a", { href: "/customer-portal", className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-blue-600 text-sm min-w-[120px]", __source: { fileName: "", lineNumber: 1184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 1188, columnNumber: 13 }, __self: this }), "Customer Portal")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 1193, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-6", __source: { fileName: "", lineNumber: 1194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 1195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: processName, onChange: (e)=>setProcessName(e.target.value), placeholder: "Process Name", className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", __source: { fileName: "", lineNumber: 1196, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", value: processDescription, onChange: (e)=>{ if (e.target.value === "other") { const customIndustry = prompt("Enter industry:"); if (customIndustry) { setProcessDescription(customIndustry); } } else { setProcessDescription(e.target.value); } }, __source: { fileName: "", lineNumber: 1203, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 1217, columnNumber: 17 }, __self: this }, "Select Industry"), /*#__PURE__*/ React.createElement("option", { value: "technology", __source: { fileName: "", lineNumber: 1218, columnNumber: 17 }, __self: this }, "Technology"), /*#__PURE__*/ React.createElement("option", { value: "healthcare", __source: { fileName: "", lineNumber: 1219, columnNumber: 17 }, __self: this }, "Healthcare"), /*#__PURE__*/ React.createElement("option", { value: "finance", __source: { fileName: "", lineNumber: 1220, columnNumber: 17 }, __self: this }, "Finance"), /*#__PURE__*/ React.createElement("option", { value: "retail", __source: { fileName: "", lineNumber: 1221, columnNumber: 17 }, __self: this }, "Retail"), /*#__PURE__*/ React.createElement("option", { value: "manufacturing", __source: { fileName: "", lineNumber: 1222, columnNumber: 17 }, __self: this }, "Manufacturing"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 1223, columnNumber: 17 }, __self: this }, "Other")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between pt-4", __source: { fileName: "", lineNumber: 1226, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: saveProcess, className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-[#2196F3] text-sm min-w-[120px]", __source: { fileName: "", lineNumber: 1227, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save mr-2", __source: { fileName: "", lineNumber: 1231, columnNumber: 19 }, __self: this }), "Save Process"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSteps([]); setProcessName(""); setProcessDescription(""); }, className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-[#f44336] text-sm min-w-[120px]", __source: { fileName: "", lineNumber: 1234, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash mr-2", __source: { fileName: "", lineNumber: 1242, columnNumber: 19 }, __self: this }), "Clear All")), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 pt-4", __source: { fileName: "", lineNumber: 1247, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 1248, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 1249, columnNumber: 19 }, __self: this }, "Process Steps"), /*#__PURE__*/ React.createElement("button", { onClick: handleAddStep, className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-[#9C27B0] text-sm min-w-[120px]", __source: { fileName: "", lineNumber: 1250, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 1254, columnNumber: 21 }, __self: this }), "Add Step")), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 1259, columnNumber: 17 }, __self: this }, steps.map((step, index)=>/*#__PURE__*/ React.createElement("div", { key: step.id, className: "flex items-start space-x-3 bg-gray-50 p-3 rounded-lg", __source: { fileName: "", lineNumber: 1261, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600", __source: { fileName: "", lineNumber: 1265, columnNumber: 23 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("div", { className: "flex-grow space-y-2", __source: { fileName: "", lineNumber: 1268, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: step.name, onChange: (e)=>handleUpdateStep(step.id, { ...step, name: e.target.value }), placeholder: "Step Name", className: "w-full px-3 py-1 border border-gray-200 rounded text-sm", __source: { fileName: "", lineNumber: 1269, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 1281, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: step.team, onChange: (e)=>handleUpdateStep(step.id, { ...step, team: e.target.value }), className: "flex-1 px-3 py-1 border border-gray-200 rounded text-sm", __source: { fileName: "", lineNumber: 1282, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 1292, columnNumber: 29 }, __self: this }, "Select Team"), teams.map((team)=>/*#__PURE__*/ React.createElement("option", { key: team.id, value: team.name, __source: { fileName: "", lineNumber: 1294, columnNumber: 31 }, __self: this }, team.name))), /*#__PURE__*/ React.createElement("input", { type: "number", value: step.duration, onChange: (e)=>handleUpdateStep(step.id, { ...step, duration: parseInt(e.target.value) || 0 }), placeholder: "Duration (min)", className: "w-24 px-3 py-1 border border-gray-200 rounded text-sm", __source: { fileName: "", lineNumber: 1299, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("textarea", { value: step.description, onChange: (e)=>handleUpdateStep(step.id, { ...step, description: e.target.value }), placeholder: "Step Description", className: "w-full px-3 py-1 border border-gray-200 rounded text-sm", rows: 2, __source: { fileName: "", lineNumber: 1312, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 1325, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveStep(step.id), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 1326, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 1330, columnNumber: 27 }, __self: this }))))), steps.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-500 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 1337, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1338, columnNumber: 23 }, __self: this }, "No steps added yet"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 1339, columnNumber: 23 }, __self: this }, 'Click "Add Step" to begin building your process')))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-6", __source: { fileName: "", lineNumber: 1349, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 1350, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 1351, columnNumber: 15 }, __self: this }, "Process Visualization")), /*#__PURE__*/ React.createElement("div", { className: "flex border-b border-gray-200 mb-4", __source: { fileName: "", lineNumber: 1354, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 ${activeTab === "visualizer" ? "border-b-2 border-blue-600 text-blue-600" : "text-gray-600"}`, onClick: ()=>setActiveTab("visualizer"), __source: { fileName: "", lineNumber: 1355, columnNumber: 15 }, __self: this }, "Visualizer"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 ${activeTab === "documentation" ? "border-b-2 border-blue-600 text-blue-600" : "text-gray-600"}`, onClick: ()=>setActiveTab("documentation"), __source: { fileName: "", lineNumber: 1361, columnNumber: 15 }, __self: this }, "Documentation"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 ${activeTab === "analysis" ? "border-b-2 border-blue-600 text-blue-600" : "text-gray-600"}`, onClick: ()=>setActiveTab("analysis"), __source: { fileName: "", lineNumber: 1367, columnNumber: 15 }, __self: this }, "Analysis")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 1375, columnNumber: 13 }, __self: this }, activeTab === "documentation" && /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 1377, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 1378, columnNumber: 19 }, __self: this }, "Process Documentation"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 1379, columnNumber: 19 }, __self: this }, documentation && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleExportClick("documentation"), className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-[#E42E6A] text-sm min-w-[120px]", __source: { fileName: "", lineNumber: 1381, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 1385, columnNumber: 25 }, __self: this }), "Export"), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateDocumentation, className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-[#E42E6A] text-sm min-w-[120px]", __source: { fileName: "", lineNumber: 1389, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt mr-2", __source: { fileName: "", lineNumber: 1393, columnNumber: 23 }, __self: this }), "Generate"))), activeTab === "analysis" && /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 1401, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 1402, columnNumber: 19 }, __self: this }, "Process Analysis"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 1403, columnNumber: 19 }, __self: this }, aiAnalysisResult && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleExportClick("analysis"), className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-[#E42E6A] text-sm min-w-[120px]", __source: { fileName: "", lineNumber: 1405, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 1409, columnNumber: 25 }, __self: this }), "Export"), /*#__PURE__*/ React.createElement("button", { onClick: handleAnalyzeProcess, className: "px-4 py-2 text-white rounded-full hover:bg-opacity-90 flex items-center justify-center bg-[#E42E6A]", __source: { fileName: "", lineNumber: 1413, columnNumber: 21 }, __self: this })))))))); }