Update app.py

app.py

@@ -28,6 +28,10 @@ from ui.ui_generators import (
     create_enhanced_report_tab, # NEW: Import the function to build the enhanced Report tab UI
     BOMB_ICON, EXPLORE_ICON, FORMULA_ICON, ACTIVE_ICON
 )
+
+#ui import
+from ui.config import custom_css, custom_theme
+
 # NEW: Import the new OKR UI functions
 from ui.okr_ui_generator import create_enhanced_okr_tab, format_okrs_for_enhanced_display, get_initial_okr_display
 from ui.analytics_plot_generator import update_analytics_plots_figures, create_placeholder_plot
@@ -95,8 +99,12 @@ except ImportError as e:
         return {'header_html': '<h1>Agentic modules not loaded.</h1>', 'body_markdown': 'Report display unavailable.'}
 
 
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
-              title="LinkedIn Organization Dashboard") as app:
+with gr.Blocks(
+    theme=custom_theme,
+    css=custom_css,
+    title="LinkedIn Organization Dashboard - Enhanced",
+    head="<link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'>"
+) as app:
     # --- STATE MANAGEMENT ---
     token_state = gr.State(value={
         "token": None, "client_id": None, "org_urn": None,
@@ -127,7 +135,18 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
 
 
     # --- UI LAYOUT ---
-    gr.Markdown("# 🚀 LinkedIn Organization Dashboard")
+    # --- ENHANCED UI HEADER ---
+    with gr.Row():
+        with gr.Column():
+            gr.HTML("""
+                <div class="main-title">
+                    🚀 LinkedIn Organization Dashboard
+                </div>
+                <div class="main-subtitle">
+                    Advanced Analytics & AI-Powered Insights for Your LinkedIn Performance
+                </div>
+            """)
+
     url_user_token_display = gr.Textbox(label="User Token (Hidden)", interactive=False, visible=False)
     org_urn_display = gr.Textbox(label="Org URN (Hidden)", interactive=False, visible=False)
     # MODIFIED: Initially hide the status_box and make its value empty
@@ -237,7 +256,15 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
 
     with gr.Tabs() as tabs:
         # --- NEW HOME TAB ---
-        with gr.TabItem("1️⃣ Home", id="tab_home"):
+        with gr.TabItem("🏠 Home", id="tab_home"):
+            gr.HTML("""
+                <div style="text-align: center; margin: 40px 0;">
+                    <h2 style="color: white; font-weight: 700; margin-bottom: 20px;">Welcome to Your Dashboard</h2>
+                    <p style="color: rgba(255,255,255,0.7); font-size: 1.1rem; max-width: 600px; margin: 0 auto;">
+                        Navigate through your LinkedIn analytics, AI-generated reports, and actionable insights to maximize your organization's social media performance.
+                    </p>
+                </div>
+            """)
             # Call the new function from ui_generators to build the Home tab content
             btn_graphs, btn_reports, btn_okr, btn_help = build_home_tab_ui()
 
@@ -253,14 +280,26 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
         # --- REPLACED: Agentic Analysis Report Tab with enhanced UI ---
         # The create_enhanced_report_tab function now builds this entire tab's UI.
         # It also returns the relevant Gradio components needed for callbacks.
-        with gr.TabItem("3️⃣ Agentic Analysis Report", id="tab_agentic_report", visible=AGENTIC_MODULES_LOADED):
+        with gr.TabItem("📊 AI Analysis Reports", id="tab_agentic_report", visible=AGENTIC_MODULES_LOADED):
+            gr.HTML("""
+                <div style="text-align: center; margin-bottom: 30px;">
+                    <h2 style="color: white; font-weight: 700; margin-bottom: 10px;">Comprehensive AI Analysis</h2>
+                    <p style="color: rgba(255,255,255,0.7);">Deep insights generated from your LinkedIn organization data</p>
+                </div>
+            """)
             # The create_enhanced_report_tab function handles the CSS and HTML structure
             # MODIFIED: Unpacked 4 values instead of 3
             agentic_pipeline_status_md, report_selector_dd, report_header_html_display, report_body_markdown_display = \
                 create_enhanced_report_tab(AGENTIC_MODULES_LOADED)
 
 
-        with gr.TabItem("4️⃣ Agentic OKRs & Tasks", id="tab_agentic_okrs", visible=AGENTIC_MODULES_LOADED):
+        with gr.TabItem("🎯 OKRs & Action Items", id="tab_agentic_okrs", visible=AGENTIC_MODULES_LOADED):
+            gr.HTML("""
+                <div style="text-align: center; margin-bottom: 30px;">
+                    <h2 style="color: white; font-weight: 700; margin-bottom: 10px;">AI-Generated OKRs & Tasks</h2>
+                    <p style="color: rgba(255,255,255,0.7);">Strategic objectives and actionable tasks based on your data analysis</p>
+                </div>
+            """)
             gr.Markdown("## 🎯 AI Generated OKRs and Actionable Tasks (from Bubble.io)")
             gr.Markdown("Basato sull'analisi AI, l'agente ha proposto i seguenti OKR.")