Spaces:
Running
Running
| 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. | |
| This version includes full support for Gradio's dark mode and a redesigned, | |
| more readable objective header. | |
| Returns: | |
| gr.HTML: The Gradio HTML component that will display the formatted OKRs. | |
| """ | |
| # Custom CSS for modern OKR styling with Dark Mode support | |
| okr_custom_css = """ | |
| <style> | |
| /* ----------------------------------------- */ | |
| /* --- THEME & COLOR VARIABLES (NEW) --- */ | |
| /* ----------------------------------------- */ | |
| :root { | |
| --okr-bg-start: #667eea; | |
| --okr-bg-end: #764ba2; | |
| --header-text-color: white; | |
| --header-text-shadow: rgba(0,0,0,0.1); | |
| --stat-card-bg: rgba(255, 255, 255, 0.15); | |
| --stat-card-bg-hover: rgba(255, 255, 255, 0.2); | |
| --stat-card-border: rgba(255, 255, 255, 0.2); | |
| --stat-number-color: #fbbf24; | |
| --content-bg: white; | |
| --content-shadow: rgba(0,0,0,0.1); | |
| --objective-card-bg: #f8fafc; | |
| --objective-card-border: #3b82f6; | |
| --objective-header-bg: transparent; /* Cleaner header background */ | |
| --objective-title-color: #1e40af; /* Make title the colored element */ | |
| --objective-meta-text-color: #475569; | |
| --key-result-bg: white; | |
| --key-result-border: #e5e7eb; | |
| --key-result-border-hover: #3b82f6; | |
| --kr-header-bg: #f8fafc; | |
| --kr-title-color: #1e293b; | |
| --kr-metric-bg: rgba(59, 130, 246, 0.1); | |
| --kr-metric-color: #1e40af; | |
| --kr-metric-border: rgba(59, 130, 246, 0.2); | |
| --task-item-bg: #f9fafb; | |
| --task-item-bg-hover: #f3f4f6; | |
| --task-item-border: #e5e7eb; | |
| --task-item-border-hover: #d1d5db; | |
| --task-title-color: #111827; | |
| --task-detail-label-color: #374151; | |
| --task-detail-text-color: #6b7280; | |
| --task-description-bg: white; | |
| --task-description-border: #3b82f6; | |
| --task-description-color: #4b5563; | |
| --priority-high-bg: #fef2f2; | |
| --priority-high-color: #dc2626; | |
| --priority-high-border: #fca5a5; | |
| --priority-medium-bg: #fffbeb; | |
| --priority-medium-color: #d97706; | |
| --priority-medium-border: #fcd34d; | |
| --priority-low-bg: #f0fdf4; | |
| --priority-low-color: #16a34a; | |
| --priority-low-border: #86efac; | |
| } | |
| html.dark { | |
| --header-text-color: #e5e7eb; | |
| --stat-card-bg: rgba(30, 41, 59, 0.5); | |
| --stat-card-bg-hover: rgba(51, 65, 85, 0.7); | |
| --stat-card-border: rgba(51, 65, 85, 0.8); | |
| --content-bg: #1e293b; /* Dark background for content */ | |
| --content-shadow: rgba(0,0,0,0.4); | |
| --objective-card-bg: #0f172a; /* Darker card background */ | |
| --objective-title-color: #60a5fa; /* Lighter blue for dark bg */ | |
| --objective-meta-text-color: #94a3b8; | |
| --key-result-bg: #1e293b; | |
| --key-result-border: #334155; | |
| --key-result-border-hover: #3b82f6; | |
| --kr-header-bg: #0f172a; | |
| --kr-title-color: #e2e8f0; | |
| --kr-metric-bg: rgba(59, 130, 246, 0.15); | |
| --kr-metric-color: #93c5fd; | |
| --kr-metric-border: rgba(59, 130, 246, 0.3); | |
| --task-item-bg: #334155; | |
| --task-item-bg-hover: #475569; | |
| --task-item-border: #475569; | |
| --task-item-border-hover: #52525b; | |
| --task-title-color: #f1f5f9; | |
| --task-detail-label-color: #cbd5e1; | |
| --task-detail-text-color: #94a3b8; | |
| --task-description-bg: #1e293b; | |
| --task-description-border: #3b82f6; | |
| --task-description-color: #cbd5e1; | |
| --priority-high-bg: #450a0a; | |
| --priority-high-color: #fca5a5; | |
| --priority-high-border: #7f1d1d; | |
| --priority-medium-bg: #422006; | |
| --priority-medium-color: #fcd34d; | |
| --priority-medium-border: #78350f; | |
| --priority-low-bg: #062813; | |
| --priority-low-color: #86efac; | |
| --priority-low-border: #14532d; | |
| } | |
| /* Overall Container */ | |
| .okr-container { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, var(--okr-bg-start) 0%, var(--okr-bg-end) 100%); | |
| min-height: 100vh; | |
| padding: 2rem; | |
| margin: -1rem; | |
| box-sizing: border-box; | |
| overflow-y: auto; | |
| } | |
| /* Header Section */ | |
| .okr-header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| color: var(--header-text-color); | |
| } | |
| .okr-title { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| text-shadow: 0 2px 4px var(--header-text-shadow); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .okr-title-content { | |
| background: linear-gradient(45deg, #ffffff, #e0e7ff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| html.dark .okr-title-content { | |
| background: linear-gradient(45deg, #e5e7eb, #9ca3af); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .okr-title-emoji { | |
| font-size: 2.5rem; | |
| -webkit-text-fill-color: initial; | |
| } | |
| .okr-subtitle { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| font-weight: 300; | |
| letter-spacing: 0.5px; | |
| } | |
| /* Stats Bar */ | |
| .okr-stats-bar { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin: 2rem 0; | |
| flex-wrap: wrap; | |
| } | |
| .stat-card { | |
| background: var(--stat-card-bg); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--stat-card-border); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| text-align: center; | |
| color: var(--header-text-color); | |
| min-width: 140px; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| background: var(--stat-card-bg-hover); | |
| box-shadow: 0 8px 32px var(--content-shadow); | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 0.25rem; | |
| color: var(--stat-number-color); | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| opacity: 0.9; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* Main Content Area */ | |
| .okr-content { | |
| background: var(--content-bg); | |
| border-radius: 24px; | |
| padding: 0; | |
| box-shadow: 0 20px 40px var(--content-shadow); | |
| overflow: hidden; | |
| margin-top: 2rem; | |
| } | |
| /* Objective Card */ | |
| .okr-objective { | |
| background: var(--objective-card-bg); | |
| border-left: 6px solid var(--objective-card-border); | |
| margin: 2rem; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.05); | |
| transition: all 0.3s ease; | |
| } | |
| html.dark .okr-objective { | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| } | |
| .okr-objective:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.1); | |
| } | |
| html.dark .okr-objective:hover { | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.3); | |
| } | |
| /* --- Objective Header (REDESIGNED) --- */ | |
| .objective-header { | |
| padding: 2rem; | |
| background: var(--objective-header-bg); | |
| border-bottom: 1px solid #e5e7eb; /* Subtle separator */ | |
| position: relative; | |
| } | |
| html.dark .objective-header { | |
| border-bottom-color: #334155; | |
| } | |
| /* REMOVED distracting ::before dot pattern */ | |
| .objective-title { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 0.75rem; | |
| position: relative; | |
| z-index: 1; | |
| color: var(--objective-title-color); /* Use variable */ | |
| } | |
| .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; | |
| color: var(--objective-meta-text-color); | |
| } | |
| .meta-icon { | |
| width: 16px; | |
| height: 16px; | |
| opacity: 0.8; | |
| } | |
| /* Key Results Container */ | |
| .key-results-container { | |
| padding: 2rem; | |
| } | |
| /* Key Result Card */ | |
| .key-result { | |
| background: var(--key-result-bg); | |
| border: 2px solid var(--key-result-border); | |
| border-radius: 12px; | |
| margin: 1.5rem 0; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .key-result:hover { | |
| border-color: var(--key-result-border-hover); | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); | |
| } | |
| html.dark .key-result:hover { | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); | |
| } | |
| .kr-header { | |
| background: var(--kr-header-bg); | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--key-result-border); | |
| } | |
| .kr-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: var(--kr-title-color); | |
| margin-bottom: 0.75rem; | |
| } | |
| .kr-metrics { | |
| display: flex; | |
| gap: 1.5rem; | |
| flex-wrap: wrap; | |
| margin-top: 1rem; | |
| } | |
| .kr-metric { | |
| background: var(--kr-metric-bg); | |
| color: var(--kr-metric-color); | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| border: 1px solid var(--kr-metric-border); | |
| } | |
| /* Tasks Section */ | |
| .tasks-section { | |
| padding: 1.5rem; | |
| } | |
| .tasks-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--task-detail-label-color); | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .task-item { | |
| background: var(--task-item-bg); | |
| border: 1px solid var(--task-item-border); | |
| border-radius: 8px; | |
| padding: 1.25rem; | |
| margin: 1rem 0; | |
| transition: all 0.2s ease; | |
| } | |
| .task-item:hover { | |
| background: var(--task-item-bg-hover); | |
| border-color: var(--task-item-border-hover); | |
| } | |
| .task-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 1rem; | |
| gap: 1rem; | |
| } | |
| .task-title { | |
| font-weight: 600; | |
| color: var(--task-title-color); | |
| 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 Colors */ | |
| .priority-high { | |
| background: var(--priority-high-bg); | |
| color: var(--priority-high-color); | |
| border: 1px solid var(--priority-high-border); | |
| } | |
| .priority-medium { | |
| background: var(--priority-medium-bg); | |
| color: var(--priority-medium-color); | |
| border: 1px solid var(--priority-medium-border); | |
| } | |
| .priority-low { | |
| background: var(--priority-low-bg); | |
| color: var(--priority-low-color); | |
| border: 1px solid var(--priority-low-border); | |
| } | |
| /* Task Details Grid */ | |
| .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: var(--task-detail-text-color); | |
| } | |
| .task-detail-label { | |
| font-weight: 500; | |
| color: var(--task-detail-label-color); | |
| min-width: 80px; | |
| } | |
| /* Task Description/Rationale */ | |
| .task-description { | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| background: var(--task-description-bg); | |
| border-radius: 6px; | |
| border-left: 3px solid var(--task-description-border); | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| color: var(--task-description-color); | |
| } | |
| /* Empty State */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| color: var(--task-detail-text-color); | |
| } | |
| .empty-state-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| } | |
| .empty-state-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--task-title-color); | |
| } | |
| /* Loading Spinner */ | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid var(--task-item-bg-hover); | |
| border-radius: 50%; | |
| border-top-color: var(--objective-card-border); | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Responsive Adjustments */ | |
| @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(elem_classes=["okr-root-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() -> str: | |
| """ | |
| Returns the initial HTML display for the OKR tab, showing a loading state. | |
| Returns: | |
| str: HTML string for the initial OKR display. | |
| """ | |
| return """ | |
| <div class="okr-container"> | |
| <div class="okr-header"> | |
| <div class="okr-title"> | |
| <span class="okr-title-emoji">🎯</span> | |
| <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span> | |
| </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(reconstruction_cache: dict) -> str: | |
| """ | |
| Enhanced formatting function that creates beautiful HTML for OKR display | |
| from the reconstruction cache dictionary. | |
| Args: | |
| reconstruction_cache (dict): The reconstruction cache containing reconstructed data. | |
| Expected to contain report data with 'actionable_okrs' key. | |
| Returns: | |
| str: A comprehensive HTML string representing the OKRs, or an empty state HTML. | |
| """ | |
| if not reconstruction_cache: | |
| logger.warning("No reconstruction cache found for display.") | |
| return get_empty_okr_state() | |
| # Extract actionable_okrs from the first (and typically only) report in cache | |
| for report_id, report_data in reconstruction_cache.items(): | |
| if isinstance(report_data, dict) and 'actionable_okrs' in report_data: | |
| raw_results = {'actionable_okrs': report_data['actionable_okrs']} | |
| break | |
| else: | |
| logger.warning("No 'actionable_okrs' found in reconstruction cache for display.") | |
| return get_empty_okr_state() | |
| actionable_okrs = raw_results.get("actionable_okrs", {}) | |
| okrs_list = actionable_okrs.get("okrs", []) | |
| if not okrs_list: | |
| logger.info("No OKRs found in 'actionable_okrs' list.") | |
| return get_empty_okr_state() | |
| # Calculate statistics for the stats bar | |
| 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 structure | |
| html_parts = [f""" | |
| <div class="okr-container"> | |
| <div class="okr-header"> | |
| <div class="okr-title"> | |
| <span class="okr-title-emoji">🎯</span> | |
| <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span> | |
| </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('description', f"Unnamed Objective {okr_idx + 1}") | |
| timeline = okr_data.get('timeline', 'Not specified') | |
| owner = okr_data.get('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 isinstance(key_results, list) or 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 Objective {okr_idx+1} at index {kr_idx} is not a dictionary, skipping.") | |
| continue | |
| kr_desc = kr_data.get('description', f"Unnamed 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 and isinstance(tasks, list): | |
| 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 Key Result {kr_idx+1} at index {task_idx} is not a dictionary, skipping.") | |
| continue | |
| task_desc = task_data.get('description', f"Unnamed Task {task_idx + 1}") | |
| task_category = task_data.get('category', 'General') | |
| 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">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('deliverable') | |
| success_criteria = task_data.get('success_criteria_metrics') | |
| why_proposed = task_data.get('why') | |
| priority_just = task_data.get('priority_justification') | |
| dependencies = task_data.get('dependencies') | |
| detail_lines = [] | |
| if obj_deliverable: | |
| detail_lines.append(f'<strong>Objective/Deliverable:</strong> {obj_deliverable}') | |
| if success_criteria: | |
| detail_lines.append(f'<strong>Success Metrics:</strong> {success_criteria}') | |
| if why_proposed: | |
| detail_lines.append(f'<strong>Rationale:</strong> {why_proposed}') | |
| if priority_just: | |
| detail_lines.append(f'<strong>Priority Justification:</strong> {priority_just}') | |
| if dependencies: | |
| detail_lines.append(f'<strong>Dependencies:</strong> {dependencies}') | |
| if detail_lines: | |
| html_parts.append('<div class="task-description">') | |
| html_parts.append('<br>'.join(detail_lines)) | |
| 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-small"> | |
| <div class="empty-state-icon">📄</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() -> str: | |
| """ | |
| Returns empty state HTML for when no OKRs are available. | |
| Returns: | |
| str: HTML string for the empty OKR state. | |
| """ | |
| return """ | |
| <div class="okr-container"> | |
| <div class="okr-header"> | |
| <div class="okr-title"> | |
| <span class="okr-title-emoji">🎯</span> | |
| <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span> | |
| </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> | |
| """ | |