Create okr_ui_generator.py

ui/okr_ui_generator.py

@@ -0,0 +1,691 @@
+#okr_ui_generator.py
+import gradio as gr
+from typing import Dict, Any, List, Optional
+import pandas as pd
+import logging
+
+logger = logging.getLogger(__name__)
+
+def create_enhanced_okr_tab():
+    """
+    Creates a modern, visually appealing OKR tab with improved layout and styling.
+    It returns the Gradio HTML component that will display the OKR content.
+    """
+    
+    # Custom CSS for modern OKR styling
+    okr_custom_css = """
+    <style>
+    /* Ensure the main container fills the available space and removes default Gradio padding */
+    .okr-container {
+        font-family: 'Inter', sans-serif; /* Using Inter font as per guidelines */
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh; /* Ensure it takes full viewport height */
+        padding: 2rem;
+        margin: -1rem; /* Adjust for Gradio's default padding */
+        box-sizing: border-box; /* Include padding in element's total width and height */
+    }
+    
+    .okr-header {
+        text-align: center;
+        margin-bottom: 3rem;
+        color: white;
+    }
+    
+    .okr-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(45deg, #ffffff, #e0e7ff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .okr-subtitle {
+        font-size: 1.2rem;
+        opacity: 0.9;
+        font-weight: 300;
+        letter-spacing: 0.5px;
+    }
+    
+    .okr-stats-bar {
+        display: flex;
+        justify-content: center;
+        gap: 2rem;
+        margin: 2rem 0;
+        flex-wrap: wrap;
+    }
+    
+    .stat-card {
+        background: rgba(255, 255, 255, 0.15);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 16px;
+        padding: 1.5rem;
+        text-align: center;
+        color: white;
+        min-width: 140px;
+        transition: all 0.3s ease;
+    }
+    
+    .stat-card:hover {
+        transform: translateY(-2px);
+        background: rgba(255, 255, 255, 0.2);
+        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+    }
+    
+    .stat-number {
+        font-size: 2rem;
+        font-weight: 700;
+        margin-bottom: 0.25rem;
+        color: #fbbf24; /* Tailwind yellow-400 */
+    }
+    
+    .stat-label {
+        font-size: 0.9rem;
+        opacity: 0.9;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+    
+    .okr-content {
+        background: white;
+        border-radius: 24px;
+        padding: 0;
+        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        overflow: hidden;
+        margin-top: 2rem;
+    }
+    
+    .okr-objective {
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); /* Tailwind slate-50 to slate-200 */
+        border-left: 6px solid #3b82f6; /* Tailwind blue-500 */
+        margin: 2rem 0;
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.05);
+        transition: all 0.3s ease;
+    }
+    
+    .okr-objective:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+    }
+    
+    .objective-header {
+        padding: 2rem;
+        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); /* Tailwind blue-700 to blue-500 */
+        color: white;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .objective-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        /* Subtle background pattern */
+        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8zm0-20c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8z'/%3E%3C/g%3E%3C/svg%3E");
+        pointer-events: none;
+    }
+    
+    .objective-title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin-bottom: 0.75rem;
+        position: relative;
+        z-index: 1;
+    }
+    
+    .objective-meta {
+        display: flex;
+        gap: 2rem;
+        margin-top: 1rem;
+        flex-wrap: wrap;
+        position: relative;
+        z-index: 1;
+    }
+    
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.9rem;
+        opacity: 0.9;
+    }
+    
+    .meta-icon {
+        width: 16px;
+        height: 16px;
+        opacity: 0.8;
+    }
+    
+    .key-results-container {
+        padding: 2rem;
+    }
+    
+    .key-result {
+        background: white;
+        border: 2px solid #e5e7eb; /* Tailwind neutral-200 */
+        border-radius: 12px;
+        margin: 1.5rem 0;
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    
+    .key-result:hover {
+        border-color: #3b82f6; /* Tailwind blue-500 */
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+    }
+    
+    .kr-header {
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); /* Tailwind slate-50 to slate-100 */
+        padding: 1.5rem;
+        border-bottom: 1px solid #e5e7eb; /* Tailwind neutral-200 */
+    }
+    
+    .kr-title {
+        font-size: 1.2rem;
+        font-weight: 600;
+        color: #1e293b; /* Tailwind slate-800 */
+        margin-bottom: 0.75rem;
+    }
+    
+    .kr-metrics {
+        display: flex;
+        gap: 1.5rem;
+        flex-wrap: wrap;
+        margin-top: 1rem;
+    }
+    
+    .kr-metric {
+        background: rgba(59, 130, 246, 0.1); /* Tailwind blue-500 with opacity */
+        color: #1e40af; /* Tailwind blue-700 */
+        padding: 0.5rem 1rem;
+        border-radius: 8px;
+        font-size: 0.85rem;
+        font-weight: 500;
+        border: 1px solid rgba(59, 130, 246, 0.2);
+    }
+    
+    .tasks-section {
+        padding: 1.5rem;
+    }
+    
+    .tasks-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: #374151; /* Tailwind gray-700 */
+        margin-bottom: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    
+    .task-item {
+        background: #f9fafb; /* Tailwind gray-50 */
+        border: 1px solid #e5e7eb; /* Tailwind neutral-200 */
+        border-radius: 8px;
+        padding: 1.25rem;
+        margin: 1rem 0;
+        transition: all 0.2s ease;
+    }
+    
+    .task-item:hover {
+        background: #f3f4f6; /* Tailwind gray-100 */
+        border-color: #d1d5db; /* Tailwind gray-300 */
+    }
+    
+    .task-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 1rem;
+        gap: 1rem;
+    }
+    
+    .task-title {
+        font-weight: 600;
+        color: #111827; /* Tailwind gray-900 */
+        flex: 1;
+        line-height: 1.4;
+    }
+    
+    .task-priority {
+        padding: 0.25rem 0.75rem;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        white-space: nowrap;
+    }
+    
+    .priority-high {
+        background: #fef2f2; /* Tailwind red-50 */
+        color: #dc2626; /* Tailwind red-600 */
+        border: 1px solid #fca5a5; /* Tailwind red-300 */
+    }
+    
+    .priority-medium {
+        background: #fffbeb; /* Tailwind amber-50 */
+        color: #d97706; /* Tailwind amber-700 */
+        border: 1px solid #fcd34d; /* Tailwind amber-300 */
+    }
+    
+    .priority-low {
+        background: #f0fdf4; /* Tailwind green-50 */
+        color: #16a34a; /* Tailwind green-600 */
+        border: 1px solid #86efac; /* Tailwind green-300 */
+    }
+    
+    .task-details {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1rem;
+        margin-top: 1rem;
+    }
+    
+    .task-detail-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+        color: #6b7280; /* Tailwind gray-500 */
+    }
+    
+    .task-detail-label {
+        font-weight: 500;
+        color: #374151; /* Tailwind gray-700 */
+        min-width: 80px;
+    }
+    
+    .task-description {
+        margin-top: 1rem;
+        padding: 1rem;
+        background: white;
+        border-radius: 6px;
+        border-left: 3px solid #3b82f6; /* Tailwind blue-500 */
+        font-size: 0.9rem;
+        line-height: 1.5;
+        color: #4b5563; /* Tailwind gray-600 */
+    }
+    
+    .empty-state {
+        text-align: center;
+        padding: 4rem 2rem;
+        color: #6b7280; /* Tailwind gray-500 */
+    }
+    
+    .empty-state-icon {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+    }
+    
+    .empty-state-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: #374151; /* Tailwind gray-700 */
+    }
+    
+    .loading-spinner {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border: 3px solid #f3f4f6; /* Tailwind gray-200 */
+        border-radius: 50%;
+        border-top-color: #3b82f6; /* Tailwind blue-500 */
+        animation: spin 1s ease-in-out infinite;
+    }
+    
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+    
+    @media (max-width: 768px) {
+        .okr-container {
+            padding: 1rem;
+        }
+        
+        .okr-title {
+            font-size: 2rem;
+        }
+        
+        .okr-stats-bar {
+            gap: 1rem;
+        }
+        
+        .stat-card {
+            min-width: 120px;
+            padding: 1rem;
+        }
+        
+        .objective-meta {
+            flex-direction: column;
+            gap: 1rem;
+        }
+        
+        .task-details {
+            grid-template-columns: 1fr;
+        }
+        
+        .task-header {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+    }
+    </style>
+    """
+    
+    with gr.Column():
+        # Inject custom CSS
+        gr.HTML(okr_custom_css)
+        
+        # Main OKR display area with enhanced styling
+        okr_display_html = gr.HTML(
+            value=get_initial_okr_display(),
+            elem_classes=["okr-display"]
+        )
+        
+    return okr_display_html
+
+def get_initial_okr_display():
+    """Returns the initial HTML display for the OKR tab when loading."""
+    return """
+    <div class="okr-container">
+        <div class="okr-header">
+            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
+            <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
+        </div>
+        
+        <div class="okr-stats-bar">
+            <div class="stat-card">
+                <div class="stat-number">-</div>
+                <div class="stat-label">Objectives</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">-</div>
+                <div class="stat-label">Key Results</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">-</div>
+                <div class="stat-label">Tasks</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">-</div>
+                <div class="stat-label">High Priority</div>
+            </div>
+        </div>
+        
+        <div class="okr-content">
+            <div class="empty-state">
+                <div class="empty-state-icon">⏳</div>
+                <div class="empty-state-title">Loading OKR Analysis</div>
+                <div class="empty-state-description">
+                    <div class="loading-spinner"></div>
+                    Generating intelligent objectives and actionable tasks from your LinkedIn data...
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+
+def format_okrs_for_enhanced_display(raw_results: dict) -> str:
+    """
+    Enhanced formatting function that creates beautiful HTML for OKR display
+    based on the raw agentic analysis results.
+    """
+    if not raw_results or not raw_results.get("actionable_okrs"):
+        logger.info("No raw_results or actionable_okrs found for formatting.")
+        return get_empty_okr_state()
+    
+    actionable_okrs = raw_results.get("actionable_okrs", {})
+    okrs_list = actionable_okrs.get("okrs", [])
+    
+    if not okrs_list:
+        logger.info("OKR list is empty, returning empty state.")
+        return get_empty_okr_state()
+    
+    # Calculate statistics
+    total_objectives = len(okrs_list)
+    total_key_results = sum(len(okr.get('key_results', [])) for okr in okrs_list)
+    total_tasks = sum(
+        len(kr.get('tasks', [])) 
+        for okr in okrs_list 
+        for kr in okr.get('key_results', [])
+    )
+    high_priority_tasks = sum(
+        1 for okr in okrs_list 
+        for kr in okr.get('key_results', [])
+        for task in kr.get('tasks', [])
+        if task.get('priority', '').lower() == 'high'
+    )
+    
+    # Build the HTML
+    html_parts = [f"""
+    <div class="okr-container">
+        <div class="okr-header">
+            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
+            <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
+        </div>
+        
+        <div class="okr-stats-bar">
+            <div class="stat-card">
+                <div class="stat-number">{total_objectives}</div>
+                <div class="stat-label">Objectives</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">{total_key_results}</div>
+                <div class="stat-label">Key Results</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">{total_tasks}</div>
+                <div class="stat-label">Tasks</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">{high_priority_tasks}</div>
+                <div class="stat-label">High Priority</div>
+            </div>
+        </div>
+        
+        <div class="okr-content">
+    """]
+    
+    for okr_idx, okr_data in enumerate(okrs_list):
+        if not isinstance(okr_data, dict):
+            logger.warning(f"OKR item at index {okr_idx} is not a dictionary, skipping.")
+            continue
+            
+        objective = okr_data.get('objective_description', f"Objective {okr_idx + 1}")
+        timeline = okr_data.get('objective_timeline', 'Not specified')
+        owner = okr_data.get('objective_owner', 'Not assigned')
+        
+        html_parts.append(f"""
+        <div class="okr-objective">
+            <div class="objective-header">
+                <div class="objective-title">Objective {okr_idx + 1}: {objective}</div>
+                <div class="objective-meta">
+                    <div class="meta-item">
+                        <span class="meta-icon">⏰</span>
+                        <span>Timeline: {timeline}</span>
+                    </div>
+                    <div class="meta-item">
+                        <span class="meta-icon">👤</span>
+                        <span>Owner: {owner}</span>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="key-results-container">
+        """)
+        
+        key_results = okr_data.get('key_results', [])
+        
+        if not key_results:
+            html_parts.append('<div class="empty-state">No key results defined for this objective.</div>')
+        else:
+            for kr_idx, kr_data in enumerate(key_results):
+                if not isinstance(kr_data, dict):
+                    logger.warning(f"Key Result item for OKR '{objective}' at KR index {kr_idx} is not a dictionary, skipping.")
+                    continue
+                    
+                kr_desc = kr_data.get('key_result_description', f"Key Result {kr_idx + 1}")
+                target_metric = kr_data.get('target_metric', '')
+                target_value = kr_data.get('target_value', '')
+                kr_type = kr_data.get('key_result_type', '')
+                data_subject = kr_data.get('data_subject', '')
+                
+                html_parts.append(f"""
+                <div class="key-result">
+                    <div class="kr-header">
+                        <div class="kr-title">Key Result {kr_idx + 1}: {kr_desc}</div>
+                        <div class="kr-metrics">
+                """)
+                
+                if target_metric and target_value:
+                    html_parts.append(f'<div class="kr-metric">Target: {target_metric} → {target_value}</div>')
+                if kr_type:
+                    html_parts.append(f'<div class="kr-metric">Type: {kr_type}</div>')
+                if data_subject:
+                    html_parts.append(f'<div class="kr-metric">Data Subject: {data_subject}</div>')
+                
+                html_parts.append('</div></div>')
+                
+                # Add tasks
+                tasks = kr_data.get('tasks', [])
+                if tasks:
+                    html_parts.append("""
+                    <div class="tasks-section">
+                        <div class="tasks-title">
+                            <span>📋</span>
+                            <span>Associated Tasks</span>
+                        </div>
+                    """)
+                    
+                    for task_idx, task_data in enumerate(tasks):
+                        if not isinstance(task_data, dict):
+                            logger.warning(f"Task item for KR '{kr_desc}' at task index {task_idx} is not a dictionary, skipping.")
+                            continue
+                            
+                        task_desc = task_data.get('task_description', f"Task {task_idx + 1}")
+                        task_category = task_data.get('task_category', 'General')
+                        task_type = task_data.get('task_type', 'Action')
+                        priority = task_data.get('priority', 'Medium').lower()
+                        effort = task_data.get('effort', 'Not specified')
+                        timeline = task_data.get('timeline', 'Not specified')
+                        responsible = task_data.get('responsible_party', 'Not assigned')
+                        
+                        priority_class = f"priority-{priority}" if priority in ['high', 'medium', 'low'] else 'priority-medium'
+                        
+                        html_parts.append(f"""
+                        <div class="task-item">
+                            <div class="task-header">
+                                <div class="task-title">{task_idx + 1}. {task_desc}</div>
+                                <div class="task-priority {priority_class}">{priority.upper()}</div>
+                            </div>
+                            
+                            <div class="task-details">
+                                <div class="task-detail-item">
+                                    <span class="task-detail-label">Category:</span>
+                                    <span>{task_category}</span>
+                                </div>
+                                <div class="task-detail-item">
+                                    <span class="task-detail-label">Type:</span>
+                                    <span>{task_type}</span>
+                                </div>
+                                <div class="task-detail-item">
+                                    <span class="task-detail-label">Effort:</span>
+                                    <span>{effort}</span>
+                                </div>
+                                <div class="task-detail-item">
+                                    <span class="task-detail-label">Timeline:</span>
+                                    <span>{timeline}</span>
+                                </div>
+                                <div class="task-detail-item">
+                                    <span class="task-detail-label">Responsible:</span>
+                                    <span>{responsible}</span>
+                                </div>
+                            </div>
+                        """)
+                        
+                        # Add additional details if available
+                        obj_deliverable = task_data.get('objective_deliverable')
+                        success_criteria = task_data.get('success_criteria_metrics')
+                        why_proposed = task_data.get('why_proposed')
+                        
+                        if obj_deliverable or success_criteria or why_proposed:
+                            html_parts.append('<div class="task-description">')
+                            if obj_deliverable:
+                                html_parts.append(f'<strong>Objective/Deliverable:</strong> {obj_deliverable}<br>')
+                            if success_criteria:
+                                html_parts.append(f'<strong>Success Metrics:</strong> {success_criteria}<br>')
+                            if why_proposed:
+                                html_parts.append(f'<strong>Rationale:</strong> {why_proposed}')
+                            html_parts.append('</div>')
+                            
+                        html_parts.append('</div>') # Close task-item
+                        
+                    html_parts.append('</div>') # Close tasks-section
+                else:
+                    html_parts.append("""
+                    <div class="tasks-section">
+                        <div class="empty-state" style="padding: 1rem;">
+                            <div class="empty-state-icon" style="font-size: 1.5rem; margin-bottom: 0.5rem;">🤷</div>
+                            <div class="empty-state-description">No tasks defined for this Key Result.</div>
+                        </div>
+                    </div>
+                    """)
+                
+                html_parts.append('</div>') # Close key-result
+            
+        html_parts.append('</div></div>') # Close key-results-container and okr-objective
+    
+    html_parts.append('</div></div>') # Close okr-content and okr-container
+    
+    return ''.join(html_parts)
+
+def get_empty_okr_state():
+    """Returns empty state HTML for when no OKRs are available."""
+    return """
+    <div class="okr-container">
+        <div class="okr-header">
+            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
+            <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
+        </div>
+        
+        <div class="okr-stats-bar">
+            <div class="stat-card">
+                <div class="stat-number">0</div>
+                <div class="stat-label">Objectives</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">0</div>
+                <div class="stat-label">Key Results</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">0</div>
+                <div class="stat-label">Tasks</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">0</div>
+                <div class="stat-label">High Priority</div>
+            </div>
+        </div>
+        
+        <div class="okr-content">
+            <div class="empty-state">
+                <div class="empty-state-icon">📋</div>
+                <div class="empty-state-title">No OKRs Available</div>
+                <div class="empty-state-description">
+                    OKR analysis has not been generated yet or no data is available.<br>
+                    Please ensure your LinkedIn data has been loaded and the AI analysis has completed.
+                </div>
+            </div>
+        </div>
+    </div>
+    """