Update src/streamlit_app.py

src/streamlit_app.py

@@ -4,7 +4,7 @@ import plotly.express as px
 import plotly.graph_objects as go
 from datetime import datetime, timedelta
 
-# Page config with modern styling
+# Page config
 st.set_page_config(
     page_title="Supply Chain Intelligence",
     page_icon="🔗",
@@ -12,7 +12,7 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Modern CSS styling
+# Clean, professional CSS styling
 st.markdown("""
 <style>
     /* Import modern font */
@@ -21,152 +21,133 @@ st.markdown("""
     /* Global styling */
     .stApp {
         font-family: 'Inter', sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-color: #f8fafc;
     }
     
     /* Main container */
     .main-container {
-        background: rgba(255, 255, 255, 0.95);
-        backdrop-filter: blur(10px);
-        border-radius: 20px;
+        background: white;
+        border-radius: 12px;
         padding: 2rem;
-        margin: 1rem;
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        margin: 1rem 0;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e2e8f0;
     }
     
-    /* Modern header */
+    /* Clean header */
     .modern-header {
-        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+        background: #1e293b;
         color: white;
         padding: 2rem;
-        border-radius: 15px;
+        border-radius: 12px;
         margin-bottom: 2rem;
-        box-shadow: 0 10px 30px rgba(30, 60, 114, 0.3);
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .modern-header::before {
-        content: '';
-        position: absolute;
-        top: -50%;
-        right: -50%;
-        width: 100%;
-        height: 200%;
-        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-        transform: rotate(45deg);
+        border-left: 4px solid #3b82f6;
     }
     
     .header-title {
-        font-size: 2.5rem;
-        font-weight: 700;
+        font-size: 2rem;
+        font-weight: 600;
         margin-bottom: 0.5rem;
-        position: relative;
-        z-index: 1;
+        color: white;
     }
     
     .header-subtitle {
-        font-size: 1.2rem;
+        font-size: 1rem;
         font-weight: 400;
-        color: #ffd700;
-        position: relative;
-        z-index: 1;
+        color: #94a3b8;
     }
     
-    /* Modern metric cards */
+    /* Clean metric cards */
     .metric-card {
-        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+        background: white;
         padding: 1.5rem;
-        border-radius: 15px;
-        border: 1px solid rgba(226, 232, 240, 0.8);
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-        transition: all 0.3s ease;
+        border-radius: 12px;
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         margin-bottom: 1rem;
+        transition: all 0.2s ease;
     }
     
     .metric-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        border-color: #cbd5e1;
     }
     
     .metric-number {
         font-size: 2.5rem;
         font-weight: 700;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
+        color: #1e293b;
         margin-bottom: 0.5rem;
     }
     
     .metric-label {
         color: #64748b;
-        font-size: 0.9rem;
+        font-size: 0.875rem;
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.05em;
+        margin-bottom: 0.5rem;
     }
     
     .metric-change {
-        font-size: 0.85rem;
+        font-size: 0.875rem;
         font-weight: 600;
-        padding: 0.3rem 0.8rem;
-        border-radius: 20px;
-        margin-top: 0.5rem;
+        padding: 0.25rem 0.75rem;
+        border-radius: 6px;
         display: inline-block;
     }
     
     .metric-positive {
-        background: rgba(34, 197, 94, 0.1);
-        color: #22c55e;
+        background-color: #dcfce7;
+        color: #166534;
     }
     
     .metric-negative {
-        background: rgba(239, 68, 68, 0.1);
-        color: #ef4444;
+        background-color: #fef2f2;
+        color: #dc2626;
+    }
+    
+    .metric-neutral {
+        background-color: #f1f5f9;
+        color: #475569;
     }
     
-    /* Modern sidebar */
+    /* Clean sidebar */
     .sidebar-content {
-        background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
-        color: white;
-        border-radius: 15px;
+        background: white;
+        color: #1e293b;
+        border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 1rem;
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     
-    /* Filter pills */
+    /* Filter section */
     .filter-container {
-        background: rgba(255, 255, 255, 0.7);
+        background: white;
         padding: 1.5rem;
-        border-radius: 15px;
+        border-radius: 12px;
         margin-bottom: 2rem;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-    }
-    
-    /* Data table styling */
-    .dataframe {
-        border-radius: 15px;
-        overflow: hidden;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     
     /* Section headers */
     .section-header {
-        font-size: 1.5rem;
+        font-size: 1.25rem;
         font-weight: 600;
         color: #1e293b;
         margin-bottom: 1.5rem;
-        padding-bottom: 0.5rem;
-        border-bottom: 3px solid;
-        border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1;
+        padding-bottom: 0.75rem;
+        border-bottom: 2px solid #e2e8f0;
     }
     
     /* Status indicators */
     .status-indicator {
         display: inline-block;
-        width: 12px;
-        height: 12px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
         margin-right: 8px;
     }
@@ -175,25 +156,51 @@ st.markdown("""
     .status-warning { background-color: #f59e0b; }
     .status-critical { background-color: #ef4444; }
     
-    /* Animation for loading */
-    @keyframes fadeInUp {
-        from {
-            opacity: 0;
-            transform: translateY(30px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
+    /* Clean table styling */
+    .dataframe table {
+        border-collapse: collapse;
+        margin: 0;
+        font-size: 0.875rem;
+        width: 100%;
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    
+    .dataframe th {
+        background-color: #f8fafc;
+        color: #374151;
+        font-weight: 600;
+        padding: 12px;
+        text-align: left;
+        border-bottom: 1px solid #e5e7eb;
+    }
+    
+    .dataframe td {
+        padding: 12px;
+        border-bottom: 1px solid #f3f4f6;
+    }
+    
+    .dataframe tr:hover {
+        background-color: #f9fafb;
+    }
+    
+    /* Remove default streamlit styling */
+    .stSelectbox > div > div {
+        background-color: white;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
     }
     
-    .fade-in {
-        animation: fadeInUp 0.6s ease-out;
+    .stSelectbox > div > div:focus-within {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Sample data functions with enhanced data
+# Sample data functions (same as before)
 @st.cache_data
 def get_material_data():
     return pd.DataFrame({
@@ -222,48 +229,48 @@ def get_enhanced_metrics():
         'on_time_delivery': 94.2
     }
 
-# Header with modern design
+# Clean, professional header
 st.markdown("""
-<div class="modern-header fade-in">
-    <div class="header-title">🔗 Supply Chain Intelligence Hub</div>
+<div class="modern-header">
+    <div class="header-title">Supply Chain Intelligence Hub</div>
     <div class="header-subtitle">Real-time Supply Chain Resilience Dashboard • Control Tower Analytics</div>
 </div>
 """, unsafe_allow_html=True)
 
-# Modern sidebar
+# Professional sidebar
 with st.sidebar:
     st.markdown("""
     <div class="sidebar-content">
-        <h3 style="margin-top: 0;">🎛️ Navigation Center</h3>
-        <p style="opacity: 0.8; font-size: 0.9rem;">Select your workspace</p>
+        <h3 style="margin-top: 0; color: #1e293b;">Navigation</h3>
+        <p style="color: #64748b; font-size: 0.875rem;">Select your workspace</p>
     </div>
     """, unsafe_allow_html=True)
     
     nav_options = [
-        "🏠 Dashboard Home",
-        "📊 Supply Chain Resilience", 
-        "🎯 Control Tower",
-        "📦 Material Groups",
-        "🏭 Supplier Analytics", 
-        "📈 Demand Planning",
-        "🔍 Insights & Trends",
-        "⚡ Real-time Alerts",
-        "📋 Reports Center"
+        "Dashboard Home",
+        "Supply Chain Resilience", 
+        "Control Tower",
+        "Material Groups",
+        "Supplier Analytics", 
+        "Demand Planning",
+        "Insights & Trends",
+        "Real-time Alerts",
+        "Reports Center"
     ]
     
     selected_nav = st.selectbox("", nav_options, index=1)
     
-    # Add quick stats in sidebar
+    # Clean alerts section
     st.markdown("---")
-    st.markdown("**🚨 Quick Alerts**")
-    st.error("⚠️ 3 critical suppliers need attention")
+    st.markdown("**System Status**")
+    st.error("⚠️ 3 suppliers need attention")
     st.warning("📋 12 SKUs below safety stock")
-    st.success("✅ 94% on-time delivery this month")
+    st.success("✅ 94% on-time delivery")
 
-# Modern filters section
+# Clean filters section
 st.markdown("""
-<div class="filter-container fade-in">
-    <div class="section-header">🔧 Smart Filters & Controls</div>
+<div class="filter-container">
+    <div class="section-header">Filters & Controls</div>
 </div>
 """, unsafe_allow_html=True)
 
@@ -271,40 +278,35 @@ col1, col2, col3, col4 = st.columns(4)
 col5, col6, col7, col8 = st.columns(4)
 
 with col1:
-    plant_location = st.selectbox("🏭 Plant Location", ["Chennai Hub", "Mumbai Center", "Delhi North", "Bangalore Tech"], index=0)
+    plant_location = st.selectbox("Plant Location", ["Chennai Hub", "Mumbai Center", "Delhi North", "Bangalore Tech"], index=0)
 
 with col2:
-    material_group = st.selectbox("📦 Material Category", ["All Categories", "Critical Components", "Standard Parts"], index=0)
+    material_group = st.selectbox("Material Category", ["All Categories", "Critical Components", "Standard Parts"], index=0)
 
 with col3:
-    time_period = st.selectbox("📅 Time Horizon", ["Current Quarter", "FY2025", "Last 6 Months"], index=0)
+    time_period = st.selectbox("Time Period", ["Current Quarter", "FY2025", "Last 6 Months"], index=0)
 
 with col4:
-    supplier_tier = st.selectbox("🏢 Supplier Tier", ["All Tiers", "Tier 1 Strategic", "Tier 2 Operational"], index=0)
+    supplier_tier = st.selectbox("Supplier Tier", ["All Tiers", "Tier 1 Strategic", "Tier 2 Operational"], index=0)
 
 with col5:
-    risk_level = st.selectbox("⚠️ Risk Filter", ["All Levels", "High Risk Only", "Medium Risk", "Low Risk"], index=0)
+    risk_level = st.selectbox("Risk Level", ["All Levels", "High Risk Only", "Medium Risk", "Low Risk"], index=0)
 
 with col6:
-    performance = st.selectbox("📊 Performance", ["All Performance", "Above Target", "Below Target"], index=0)
+    performance = st.selectbox("Performance", ["All Performance", "Above Target", "Below Target"], index=0)
 
 with col7:
-    geography = st.selectbox("🌍 Geography", ["Global View", "Asia Pacific", "Americas", "Europe"], index=0)
+    geography = st.selectbox("Geography", ["Global View", "Asia Pacific", "Americas", "Europe"], index=0)
 
 with col8:
-    update_freq = st.selectbox("🔄 Update Frequency", ["Real-time", "Hourly", "Daily"], index=0)
+    update_freq = st.selectbox("Update Frequency", ["Real-time", "Hourly", "Daily"], index=0)
 
-# Get enhanced data
+# Get data
 material_df = get_material_data()
 metrics = get_enhanced_metrics()
 
-# Main dashboard content
-st.markdown("""
-<div class="main-container fade-in">
-""", unsafe_allow_html=True)
-
-# Key metrics section with modern cards
-st.markdown('<div class="section-header">📊 Executive Dashboard</div>', unsafe_allow_html=True)
+# Clean metrics section
+st.markdown('<div class="section-header">Key Performance Indicators</div>', unsafe_allow_html=True)
 
 col1, col2, col3, col4 = st.columns(4)
 
@@ -340,85 +342,70 @@ with col4:
     <div class="metric-card">
         <div class="metric-number">{metrics['active_suppliers']:,}</div>
         <div class="metric-label">Active Suppliers</div>
-        <div class="metric-change metric-positive">↗ +15 new this month</div>
+        <div class="metric-change metric-neutral">+15 new</div>
     </div>
     """, unsafe_allow_html=True)
 
-# Enhanced data table
-st.markdown('<div class="section-header">📋 Material Group Performance Matrix</div>', unsafe_allow_html=True)
+# Clean data table
+st.markdown('<div class="section-header">Material Group Performance</div>', unsafe_allow_html=True)
 
-# Add status indicators to the dataframe
-def add_status_indicators(df):
-    def get_status_html(risk_level):
-        if risk_level == 'Low':
-            return '<span class="status-indicator status-good"></span>Low Risk'
-        elif risk_level == 'Medium':
-            return '<span class="status-indicator status-warning"></span>Medium Risk'
-        else:
-            return '<span class="status-indicator status-critical"></span>High Risk'
-    
-    df['Risk Status'] = df['Risk Level'].apply(get_status_html)
-    return df
+# Display clean table
+st.dataframe(material_df, use_container_width=True, hide_index=True)
 
-# Display enhanced table
-enhanced_df = add_status_indicators(material_df.copy())
-st.markdown(enhanced_df.to_html(escape=False, index=False), unsafe_allow_html=True)
-
-# Modern charts section
-st.markdown('<div class="section-header">📈 Performance Analytics</div>', unsafe_allow_html=True)
+# Professional charts
+st.markdown('<div class="section-header">Performance Analytics</div>', unsafe_allow_html=True)
 
 col1, col2 = st.columns(2)
 
 with col1:
-    # Modern fulfillment rate chart
+    # Clean bar chart
     fig1 = px.bar(
         material_df, 
         x='Material Group', 
         y=['Current Rate', 'Target Rate'],
-        title="Current vs Target Fulfillment Rates",
-        color_discrete_sequence=['#667eea', '#764ba2']
+        title="Fulfillment Rates: Current vs Target",
+        color_discrete_sequence=['#3b82f6', '#64748b']
     )
     
     fig1.update_layout(
-        plot_bgcolor='rgba(0,0,0,0)',
-        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='white',
+        paper_bgcolor='white',
         font_family="Inter",
-        title_font_size=16,
+        title_font_size=14,
         title_font_color="#1e293b",
         xaxis_tickangle=-45,
         height=400,
-        margin=dict(t=50, l=50, r=50, b=100)
+        showlegend=True,
+        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1)
     )
     
     st.plotly_chart(fig1, use_container_width=True)
 
 with col2:
-    # Risk distribution pie chart
+    # Clean pie chart
     risk_counts = material_df['Risk Level'].value_counts()
     
     fig2 = px.pie(
         values=risk_counts.values,
         names=risk_counts.index,
-        title="Risk Distribution Across Material Groups",
+        title="Risk Distribution",
         color_discrete_sequence=['#22c55e', '#f59e0b', '#ef4444']
     )
     
     fig2.update_layout(
-        plot_bgcolor='rgba(0,0,0,0)',
-        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='white',
+        paper_bgcolor='white',
         font_family="Inter",
-        title_font_size=16,
+        title_font_size=14,
         title_font_color="#1e293b",
         height=400
     )
     
     st.plotly_chart(fig2, use_container_width=True)
 
-st.markdown("</div>", unsafe_allow_html=True)
-
-# Footer with last update info
+# Clean footer
 st.markdown("""
-<div style="text-align: center; padding: 2rem; color: #64748b; border-top: 1px solid #e2e8f0; margin-top: 2rem;">
-    <p>📊 Dashboard last updated: {timestamp} | 🔄 Auto-refresh: Every 15 minutes | 🎯 Data accuracy: 99.7%</p>
+<div style="text-align: center; padding: 1.5rem; color: #64748b; border-top: 1px solid #e2e8f0; margin-top: 2rem; font-size: 0.875rem;">
+    Dashboard last updated: {timestamp} • Auto-refresh: Every 15 minutes • Data accuracy: 99.7%
 </div>
 """.format(timestamp=datetime.now().strftime("%B %d, %Y at %I:%M %p")), unsafe_allow_html=True)