Update ui/ui_generators.py

ui/ui_generators.py

@@ -31,7 +31,207 @@ FORMULA_ICON = "ƒ"
 ACTIVE_ICON = "❌ Close" # Ensure this matches app.py
 
 
-# Removed display_main_dashboard as its content is now directly embedded in app.py for the Home tab.
+def build_home_tab_ui():
+    """
+    Constructs the entire UI for the Home tab, including the header,
+    overview, feature cards, and navigation buttons.
+
+    Returns:
+        tuple: A tuple containing the Gradio Button components for
+               Graphs, Reports, and OKR Table, allowing app.py to
+               attach click handlers for tab navigation.
+    """
+    with gr.Column(scale=1, elem_classes="home-page-container"):
+        # Main header with welcome message
+        gr.Markdown("""
+            <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; margin-bottom: 30px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); color: white;">
+                <h1 style="color: white; margin-bottom: 20px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
+                    🚀 LinkedIn Employer Brand Analytics Dashboard
+                </h1>
+                <p style="font-size: 1.3em; line-height: 1.8; margin-bottom: 15px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
+                    Transform your LinkedIn presence with data-driven insights and actionable strategies
+                </p>
+                <p style="font-size: 1.1em; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
+                    Measure, analyze, and enhance your employer brand to attract top talent
+                </p>
+            </div>
+        """)
+
+        # Overview section
+        gr.Markdown("""
+            <div style="background-color: #f8f9fa; padding: 25px; border-radius: 12px; margin-bottom: 25px; border-left: 5px solid #007bff;">
+                <h2 style="color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center;">
+                    <span style="margin-right: 10px;">📊</span> What This Dashboard Offers
+                </h2>
+                <p style="font-size: 1.1em; color: #495057; line-height: 1.7; margin-bottom: 15px;">
+                    Our comprehensive analytics platform helps you understand and optimize your LinkedIn employer brand performance through:
+                </p>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px;">
+                    <div style="display: flex; align-items: center; padding: 10px;">
+                        <span style="font-size: 1.5em; margin-right: 12px;">📈</span>
+                        <span style="color: #495057;">Real-time data visualization and trend analysis</span>
+                    </div>
+                    <div style="display: flex; align-items: center; padding: 10px;">
+                        <span style="font-size: 1.5em; margin-right: 12px;">📋</span>
+                        <span style="color: #495057;">Automated quarterly and weekly performance reports</span>
+                    </div>
+                    <div style="display: flex; align-items: center; padding: 10px;">
+                        <span style="font-size: 1.5em; margin-right: 12px;">🎯</span>
+                        <span style="color: #495057;">AI-powered OKRs and actionable recommendations</span>
+                    </div>
+                    <div style="display: flex; align-items: center; padding: 10px;">
+                        <span style="font-size: 1.5em; margin-right: 12px;">🚀</span>
+                        <span style="color: #495057;">Strategic insights to improve employer branding</span>
+                    </div>
+                </div>
+            </div>
+        """)
+
+        # Main navigation cards
+        with gr.Row(equal_height=True):
+            with gr.Column():
+                gr.Markdown("""
+                    <div style="background: linear-gradient(135deg, #4CAF50, #45a049); padding: 25px; border-radius: 15px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3); transition: transform 0.3s ease;">
+                        <div>
+                            <h3 style="color: white; margin-bottom: 15px; font-size: 1.4em; display: flex; align-items: center;">
+                                <span style="font-size: 1.8em; margin-right: 12px;">📈</span> Interactive Graphs
+                            </h3>
+                            <p style="color: rgba(255,255,255,0.95); line-height: 1.6; font-size: 1.05em; margin-bottom: 20px;">
+                                Explore dynamic visualizations of your LinkedIn performance metrics. Track post engagement, 
+                                follower growth, mentions sentiment, and identify trends over time with interactive charts 
+                                and filtering options.
+                            </p>
+                        </div>
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
+                            <div style="color: rgba(255,255,255,0.8); font-size: 0.9em;">
+                                ✨ Real-time analytics<br/>
+                                📊 Multiple chart types<br/>
+                                🔍 Advanced filtering
+                            </div>
+                            <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px;">
+                                <span style="font-size: 2em;">📊</span>
+                            </div>
+                        </div>
+                    </div>
+                """)
+                btn_graphs = gr.Button("🚀 Explore Graphs", variant="primary", size="lg", 
+                                        elem_classes="nav-button", scale=1)
+                
+            with gr.Column():
+                gr.Markdown("""
+                    <div style="background: linear-gradient(135deg, #2196F3, #1976D2); padding: 25px; border-radius: 15px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3); transition: transform 0.3s ease;">
+                        <div>
+                            <h3 style="color: white; margin-bottom: 15px; font-size: 1.4em; display: flex; align-items: center;">
+                                <span style="font-size: 1.8em; margin-right: 12px;">📊</span> Analysis Reports
+                            </h3>
+                            <p style="color: rgba(255,255,255,0.95); line-height: 1.6; font-size: 1.05em; margin-bottom: 20px;">
+                                Access comprehensive quarterly and weekly reports powered by AI analysis. Get detailed 
+                                insights into your employer brand performance, competitor analysis, and market positioning 
+                                with automated report generation.
+                            </p>
+                        </div>
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
+                            <div style="color: rgba(255,255,255,0.8); font-size: 0.9em;">
+                                📋 Automated reports<br/>
+                                🤖 AI-powered insights<br/>
+                                📅 Weekly & quarterly
+                            </div>
+                            <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px;">
+                                <span style="font-size: 2em;">📄</span>
+                            </div>
+                        </div>
+                    </div>
+                """)
+                btn_reports = gr.Button("📊 View Reports", variant="primary", size="lg", 
+                                         elem_classes="nav-button", scale=1)
+
+        with gr.Row(equal_height=True):
+            with gr.Column():
+                gr.Markdown("""
+                    <div style="background: linear-gradient(135deg, #FF9800, #F57C00); padding: 25px; border-radius: 15px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 20px rgba(255, 152, 0, 0.3); transition: transform 0.3s ease;">
+                        <div>
+                            <h3 style="color: white; margin-bottom: 15px; font-size: 1.4em; display: flex; align-items: center;">
+                                <span style="font-size: 1.8em; margin-right: 12px;">🎯</span> OKR Action Plan
+                            </h3>
+                            <p style="color: rgba(255,255,255,0.95); line-height: 1.6; font-size: 1.05em; margin-bottom: 20px;">
+                                Discover AI-generated Objectives and Key Results (OKRs) with concrete action items. 
+                                Transform data insights into measurable goals and strategic initiatives to enhance 
+                                your employer brand effectively.
+                            </p>
+                        </div>
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
+                            <div style="color: rgba(255,255,255,0.8); font-size: 0.9em;">
+                                🎯 Strategic objectives<br/>
+                                ✅ Actionable tasks<br/>
+                                📈 Measurable outcomes
+                            </div>
+                            <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px;">
+                                <span style="font-size: 2em;">🎯</span>
+                            </div>
+                        </div>
+                    </div>
+                """)
+                btn_okr = gr.Button("🎯 Access OKRs", variant="primary", size="lg", 
+                                     elem_classes="nav-button", scale=1)
+                
+            # Quick stats or tips column
+            with gr.Column():
+                gr.Markdown("""
+                    <div style="background: linear-gradient(135deg, #9C27B0, #7B1FA2); padding: 25px; border-radius: 15px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 20px rgba(156, 39, 176, 0.3);">
+                        <div>
+                            <h3 style="color: white; margin-bottom: 15px; font-size: 1.4em; display: flex; align-items: center;">
+                                <span style="font-size: 1.8em; margin-right: 12px;">💡</span> Getting Started
+                            </h3>
+                            <p style="color: rgba(255,255,255,0.95); line-height: 1.6; font-size: 1.05em;">
+                                New to employer brand analytics? Start with the <strong>Graphs</strong> section to 
+                                understand your current performance, then check <strong>Reports</strong> for detailed 
+                                analysis, and finally explore <strong>OKRs</strong> for actionable next steps.
+                            </p>
+                        </div>
+                        <div style="margin-top: 20px; padding: 15px; background: rgba(255,255,255,0.1); border-radius: 8px;">
+                            <div style="color: rgba(255,255,255,0.9); font-size: 0.95em; text-align: center;">
+                                <strong>💪 Pro Tip:</strong><br/>
+                                <span style="font-size: 0.9em;">Regular monitoring leads to 40% better employer brand performance</span>
+                            </div>
+                        </div>
+                    </div>
+                """)
+                # Optional: Add a help or documentation button
+                btn_help = gr.Button("📚 Documentation", variant="secondary", size="lg", 
+                                     elem_classes="nav-button", scale=1)
+
+        # Additional information section
+        gr.Markdown("""
+            <div style="background-color: #e8f4fd; padding: 20px; border-radius: 12px; margin-top: 25px; border: 1px solid #b8daff;">
+                <h3 style="color: #004085; margin-bottom: 15px; display: flex; align-items: center;">
+                    <span style="margin-right: 10px;">ℹ️</span> How It Works
+                </h3>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
+                    <div style="display: flex; align-items: start;">
+                        <div style="background: #007bff; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; font-weight: bold;">1</div>
+                        <div>
+                            <strong style="color: #004085;">Data Collection</strong><br/>
+                            <span style="color: #495057; font-size: 0.95em;">Automatically syncs with your LinkedIn organization data</span>
+                        </div>
+                    </div>
+                    <div style="display: flex; align-items: start;">
+                        <div style="background: #007bff; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; font-weight: bold;">2</div>
+                        <div>
+                            <strong style="color: #004085;">AI Analysis</strong><br/>
+                            <span style="color: #495057; font-size: 0.95em;">Advanced algorithms analyze trends and generate insights</span>
+                        </div>
+                    </div>
+                    <div style="display: flex; align-items: start;">
+                        <div style="background: #007bff; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; font-weight: bold;">3</div>
+                        <div>
+                            <strong style="color: #004085;">Actionable Results</strong><br/>
+                            <span style="color: #495057; font-size: 0.95em;">Receive specific recommendations and measurable goals</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        """)
+    return btn_graphs, btn_reports, btn_okr, btn_help # Return all buttons for click handlers
 
 
 def run_mentions_tab_display(token_state):