Update app.py

app.py

@@ -200,11 +200,26 @@ class B2BCustomerAnalytics:
             risk_dist = self.processed_df.groupby('customer_id')['Churn_Risk'].first().value_counts()
             
             # Create modern horizontal dashboard
-            summary_html = f"""
-             <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 3rem;">
+                        summary_html = f"""
+            <div style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); padding: 2rem; border-radius: 1rem; color: white; margin-bottom: 2rem; text-align: center;">
+                <h1 style="font-size: 2.5rem; font-weight: bold; margin-bottom: 0.5rem;">
+                    B2B Customer Analytics Platform
+                </h1>
+                <p style="font-size: 1.2rem; opacity: 0.9;">
+                    Enterprise Customer Health Monitoring & Churn Prediction System
+                </p>
+            </div>
+
+            <!-- 
+                THIS IS THE CORRECTED LAYOUT CONTAINER.
+                - It uses 'grid' for robust 2D layout.
+                - 'repeat(auto-fit, minmax(220px, 1fr))' creates responsive columns.
+                - 'justify-content: start;' is the KEY FIX that prevents the container from overflowing.
+            -->
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 3rem; justify-content: start;">
 
                 <!-- Card 1: Total Customers -->
-                <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="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>
                     </div>
@@ -215,7 +230,7 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 2: Total Revenue -->
-                <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="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>
                     </div>
@@ -226,7 +241,7 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 3: Avg Order Value -->
-                <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="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>
                     </div>
@@ -237,7 +252,7 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 4: High Risk Clients -->
-                <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="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>
                     </div>
@@ -248,7 +263,7 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 5: Champion Customers -->
-                <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="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>
                     </div>
@@ -259,7 +274,7 @@ class B2BCustomerAnalytics:
                 </div>
 
                 <!-- Card 6: Healthy Customers -->
-                <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="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>
                     </div>