Update app.py

app.py

@@ -201,18 +201,13 @@ class B2BCustomerAnalytics:
             
             # Create modern horizontal dashboard
             summary_html = f"""
-                        <!-- Flex container for the KPI cards. Adjustments made for a more compact layout. -->
-            <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 3rem;">
+             <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 3rem;">
 
                 <!-- Card 1: Total Customers -->
-                <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #3b82f6; display: flex; align-items: center; gap: 0.75rem;">
-                    <!-- Left Icon -->
+                <div style="flex-grow: 0; flex-basis: 220px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid #3b82f6; display: flex; align-items: center; gap: 0.75rem;">
                     <div style="flex-shrink: 0; padding: 0.5rem; background: #dbeafe; border-radius: 0.5rem;">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#1d4ed8" style="width:24px; height:24px;">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m-7.5-2.962a3.75 3.75 0 015.962 0zM16.5 9.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5zM12 15.75h.008v.008H12v-.008z" />
-                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#1d4ed8" style="width:24px; height:24px;"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m-7.5-2.962a3.75 3.75 0 015.962 0zM16.5 9.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5zM12 15.75h.008v.008H12v-.008z" /></svg>
                     </div>
-                    <!-- Right Text Content -->
                     <div>
                         <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{total_customers:,}</span>
                         <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Total Customers</h3>
@@ -220,14 +215,10 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 2: Total Revenue -->
-                <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #10b981; display: flex; align-items: center; gap: 0.75rem;">
-                    <!-- Left Icon -->
+                <div style="flex-grow: 0; flex-basis: 220px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid #10b981; display: flex; align-items: center; gap: 0.75rem;">
                     <div style="flex-shrink: 0; padding: 0.5rem; background: #d1fae5; border-radius: 0.5rem;">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#047857" style="width:24px; height:24px;">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.75A.75.75 0 013 4.5h.75m0 0a.75.75 0 01.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75V18a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 18v.75m-18 0v-.75a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 18v.75" />
-                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#047857" style="width:24px; height:24px;"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.75A.75.75 0 013 4.5h.75m0 0a.75.75 0 01.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75V18a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 18v.75m-18 0v-.75a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 18v.75" /></svg>
                     </div>
-                    <!-- Right Text Content -->
                     <div>
                         <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">${(total_revenue/1000000):.1f}M</span>
                         <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Total Revenue</h3>
@@ -235,14 +226,10 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 3: Avg Order Value -->
-                <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #8b5cf6; display: flex; align-items: center; gap: 0.75rem;">
-                    <!-- Left Icon -->
+                <div style="flex-grow: 0; flex-basis: 220px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid #8b5cf6; display: flex; align-items: center; gap: 0.75rem;">
                     <div style="flex-shrink: 0; padding: 0.5rem; background: #ede9fe; border-radius: 0.5rem;">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#7c3aed" style="width:24px; height:24px;">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
-                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#7c3aed" style="width:24px; height:24px;"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /></svg>
                     </div>
-                    <!-- Right Text Content -->
                     <div>
                         <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">${avg_order_value:.0f}</span>
                         <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Avg Order Value</h3>
@@ -250,14 +237,10 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 4: High Risk Clients -->
-                <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #ef4444; display: flex; align-items: center; gap: 0.75rem;">
-                    <!-- Left Icon -->
+                <div style="flex-grow: 0; flex-basis: 220px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid #ef4444; display: flex; align-items: center; gap: 0.75rem;">
                     <div style="flex-shrink: 0; padding: 0.5rem; background: #fee2e2; border-radius: 0.5rem;">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#dc2626" style="width:24px; height:24px;">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#dc2626" style="width:24px; height:24px;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
                     </div>
-                    <!-- Right Text Content -->
                     <div>
                         <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{risk_dist.get('High', 0)}</span>
                         <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">High Risk Clients</h3>
@@ -265,14 +248,10 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 5: Champion Customers -->
-                <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #f59e0b; display: flex; align-items: center; gap: 0.75rem;">
-                    <!-- Left Icon -->
+                <div style="flex-grow: 0; flex-basis: 220px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid #f59e0b; display: flex; align-items: center; gap: 0.75rem;">
                     <div style="flex-shrink: 0; padding: 0.5rem; background: #fef3c7; border-radius: 0.5rem;">
-                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#d97706" style="width:24px; height:24px;">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9a9.06 9.06 0 00-4.914.932l-.006.004c-.317.184-.644.362-.978.536a.75.75 0 01-1.114-.658l.012-.023c.125-.23.26-.456.402-.676l.01-.017a9.02 9.02 0 013.91-4.013l.006-.004a9.02 9.02 0 014.013-3.91l.017-.01c.22-.142.446-.277.676-.402l.023-.012a.75.75 0 01.658 1.114c-.174.334-.352.66-.536.978l-.004.006a9.06 9.06 0 00-.932 4.914zM16.5 18.75h-9m9 0a12.015 12.015 0 01-9 0" />
-                        </svg>
+                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#d97706" style="width:24px; height:24px;"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9a9.06 9.06 0 00-4.914.932l-.006.004c-.317.184-.644.362-.978.536a.75.75 0 01-1.114-.658l.012-.023c.125-.23.26-.456.402-.676l.01-.017a9.02 9.02 0 013.91-4.013l.006-.004a9.02 9.02 0 014.013-3.91l.017-.01c.22-.142.446-.277.676-.402l.023-.012a.75.75 0 01.658 1.114c-.174.334-.352.66-.536.978l-.004.006a9.06 9.06 0 00-.932 4.914zM16.5 18.75h-9m9 0a12.015 12.015 0 01-9 0" /></svg>
                     </div>
-                    <!-- Right Text Content -->
                     <div>
                         <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{segment_dist.get('Champions', 0)}</span>
                         <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Champion Customers</h3>
@@ -280,14 +259,10 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 6: Healthy Customers -->
-                <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #06b6d4; display: flex; align-items: center; gap: 0.75rem;">
-                    <!-- Left Icon -->
+                <div style="flex-grow: 0; flex-basis: 220px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid #06b6d4; display: flex; align-items: center; gap: 0.75rem;">
                     <div style="flex-shrink: 0; padding: 0.5rem; background: #cffafe; border-radius: 0.5rem;">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#0891b2" style="width:24px; height:24px;">
-                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#0891b2" style="width:24px; height:24px;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                     </div>
-                    <!-- Right Text Content -->
                     <div>
                         <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{risk_dist.get('Low', 0)}</span>
                         <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Healthy Customers</h3>
@@ -950,7 +925,7 @@ def create_gradio_interface():
         
         with gr.Tabs(elem_classes="tab-nav"):
             
-            with gr.Tab("📊 Data Upload & Dashboard", elem_id="data-tab"):
+            with gr.Tab("Data Upload & Dashboard", elem_id="data-tab"):
                 with gr.Row():
                     with gr.Column(scale=1):
                         file_input = gr.File(
@@ -972,7 +947,7 @@ def create_gradio_interface():
                     elem_classes="block"
                 )
             
-            with gr.Tab("🎯 Customer Segmentation Analysis", elem_id="segmentation-tab"):
+            with gr.Tab("Customer Segmentation Analysis", elem_id="segmentation-tab"):
                 with gr.Row():
                     with gr.Column():
                         segment_chart = gr.Plot(label="Customer Segments Distribution")
@@ -984,7 +959,7 @@ def create_gradio_interface():
                     elem_classes="block"
                 )
             
-            with gr.Tab("🤖 AI-Powered Churn Prediction", elem_id="churn-tab"):
+            with gr.Tab("AI-Powered Churn Prediction", elem_id="churn-tab"):
                 with gr.Column():
                     train_btn = gr.Button(
                         "Train Churn Prediction Model", 
@@ -1001,13 +976,13 @@ def create_gradio_interface():
                         with gr.Column():
                             churn_chart = gr.Plot(label="Churn Risk Distribution")
             
-            with gr.Tab("💰 Revenue Analytics", elem_id="revenue-tab"):
+            with gr.Tab("Revenue Analytics", elem_id="revenue-tab"):
                 revenue_chart = gr.Plot(
                     label="Monthly Revenue Trends",
                     elem_classes="block"
                 )
             
-            with gr.Tab("🔍 Customer Intelligence", elem_id="insights-tab"):
+            with gr.Tab("Customer Intelligence", elem_id="insights-tab"):
                 with gr.Row():
                     with gr.Column(scale=3):
                         customer_id_input = gr.Textbox(
@@ -1024,7 +999,7 @@ def create_gradio_interface():
                 
                 customer_insights = gr.HTML()
             
-            with gr.Tab("📄 Executive Reports", elem_id="reports-tab"):
+            with gr.Tab("Executive Reports", elem_id="reports-tab"):
                 with gr.Column():
                     gr.HTML("""
                     <div style="background: linear-gradient(135deg, #f0f9ff, #e0f2fe); padding: 2rem; border-radius: 1rem; margin-bottom: 2rem; border-left: 4px solid #3b82f6;">