Update src/streamlit_app.py

src/streamlit_app.py

@@ -2,165 +2,423 @@ import streamlit as st
 import pandas as pd
 import plotly.express as px
 import plotly.graph_objects as go
+from datetime import datetime, timedelta
 
-# Page config
+# Page config with modern styling
 st.set_page_config(
-    page_title="Auto Digital Public Infrastructure",
+    page_title="Supply Chain Intelligence",
     page_icon="🔗",
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for styling
+# Modern CSS styling
 st.markdown("""
 <style>
-    .main-header {
-        background-color: #4a5568;
+    /* Import modern font */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    
+    /* Global styling */
+    .stApp {
+        font-family: 'Inter', sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+    
+    /* Main container */
+    .main-container {
+        background: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(10px);
+        border-radius: 20px;
+        padding: 2rem;
+        margin: 1rem;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Modern header */
+    .modern-header {
+        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
         color: white;
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin-bottom: 1rem;
+        padding: 2rem;
+        border-radius: 15px;
+        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);
+    }
+    
+    .header-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+        position: relative;
+        z-index: 1;
+    }
+    
+    .header-subtitle {
+        font-size: 1.2rem;
+        font-weight: 400;
+        color: #ffd700;
+        position: relative;
+        z-index: 1;
     }
+    
+    /* Modern metric cards */
     .metric-card {
-        background-color: #f7fafc;
-        padding: 1rem;
-        border-radius: 0.5rem;
-        border-left: 4px solid #3182ce;
+        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+        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;
+        margin-bottom: 1rem;
+    }
+    
+    .metric-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    }
+    
+    .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;
+        margin-bottom: 0.5rem;
+    }
+    
+    .metric-label {
+        color: #64748b;
+        font-size: 0.9rem;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .metric-change {
+        font-size: 0.85rem;
+        font-weight: 600;
+        padding: 0.3rem 0.8rem;
+        border-radius: 20px;
+        margin-top: 0.5rem;
+        display: inline-block;
+    }
+    
+    .metric-positive {
+        background: rgba(34, 197, 94, 0.1);
+        color: #22c55e;
+    }
+    
+    .metric-negative {
+        background: rgba(239, 68, 68, 0.1);
+        color: #ef4444;
+    }
+    
+    /* Modern sidebar */
+    .sidebar-content {
+        background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
+        color: white;
+        border-radius: 15px;
+        padding: 1.5rem;
+        margin-bottom: 1rem;
+    }
+    
+    /* Filter pills */
+    .filter-container {
+        background: rgba(255, 255, 255, 0.7);
+        padding: 1.5rem;
+        border-radius: 15px;
+        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);
+    }
+    
+    /* Section headers */
+    .section-header {
+        font-size: 1.5rem;
+        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;
+    }
+    
+    /* Status indicators */
+    .status-indicator {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+    
+    .status-good { background-color: #22c55e; }
+    .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);
+        }
+    }
+    
+    .fade-in {
+        animation: fadeInUp 0.6s ease-out;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Sample data functions (since we can't import separate files easily)
+# Sample data functions with enhanced data
 @st.cache_data
 def get_material_data():
     return pd.DataFrame({
-        'Material group': ['Engine', 'Hydraulic Cylinder', 'Seating and Interiors', 
-                          'Batteries', 'Control Arms', 'Ball Joints', 'Semiconductors',
-                          'Sensors', 'Brake system', 'Shock Absorbers'],
-        'Fulfillment rate': [70, 65, 62, 70, 72, 70, 76, 75, 78, 80],
-        'Projected Fulfillment rate': [62, 65, 67, 68, 70, 71, 75, 76, 78, 80],
-        'MoM trend': [6.8, 4.1, 3.9, 1.1, 1.2, 6.8, 4.1, 3.9, 1.1, 1.2]
+        'Material Group': ['Engine Components', 'Hydraulic Systems', 'Interior & Seating', 
+                          'Battery Systems', 'Suspension Parts', 'Safety Components', 'Semiconductors',
+                          'Smart Sensors', 'Brake Systems', 'Shock Absorbers'],
+        'Current Rate': [72, 68, 65, 73, 75, 72, 78, 77, 80, 82],
+        'Target Rate': [75, 70, 70, 75, 78, 75, 80, 80, 82, 85],
+        'Trend': ['+2.1%', '+1.8%', '+0.9%', '+2.4%', '+1.2%', '+1.8%', '+2.1%', '+1.9%', '+1.1%', '+1.2%'],
+        'Risk Level': ['Medium', 'High', 'High', 'Low', 'Low', 'Medium', 'Low', 'Low', 'Low', 'Low'],
+        'Last Updated': ['2 hrs ago', '1 hr ago', '3 hrs ago', '1 hr ago', '2 hrs ago', '1 hr ago', '30 min ago', '45 min ago', '1 hr ago', '2 hrs ago']
     })
 
 @st.cache_data
-def get_overall_metrics():
+def get_enhanced_metrics():
     return {
         'fulfillment': 86,
-        'mom_change': 1.5,
-        'material_groups': 3,
-        'skus': 1705,
-        'material_groups_at_risk': 20,
-        'risk_mom_change': 2.2,
-        'skus_at_risk': 25,
-        'sku_risk_mom_change': 4.1
+        'mom_change': 2.3,
+        'material_groups': 147,
+        'skus': 12847,
+        'material_groups_at_risk': 18,
+        'risk_mom_change': -1.8,
+        'skus_at_risk': 23,
+        'sku_risk_mom_change': -2.1,
+        'active_suppliers': 342,
+        'on_time_delivery': 94.2
     }
 
-# Header
+# Header with modern design
 st.markdown("""
-<div class="main-header">
-    <h1>🔗 Auto Digital Public Infrastructure</h1>
-    <h2 style="color: #ffd700;">SUPPLY CHAIN RESILIENCE- CT- Overall metrics</h2>
+<div class="modern-header fade-in">
+    <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)
 
-# Sidebar navigation
+# Modern sidebar
 with st.sidebar:
-    st.markdown("### Navigation")
-    st.markdown("**Master Screen**")
+    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>
+    </div>
+    """, unsafe_allow_html=True)
     
     nav_options = [
-        "HOME",
-        "Supply Chain Resilience",
-        "SC Control Tower", 
-        "Material Group View",
-        "Supplier View",
-        "Demand & Capacity Mgmt.",
-        "Insights & Trends",
-        "Use-Case 2",
-        "Use-Case 3",
-        "...other use-cases"
+        "🏠 Dashboard Home",
+        "📊 Supply Chain Resilience", 
+        "🎯 Control Tower",
+        "📦 Material Groups",
+        "🏭 Supplier Analytics", 
+        "📈 Demand Planning",
+        "🔍 Insights & Trends",
+        "⚡ Real-time Alerts",
+        "📋 Reports Center"
     ]
     
-    selected_nav = st.selectbox("Select Page", nav_options, index=1)
+    selected_nav = st.selectbox("", nav_options, index=1)
+    
+    # Add quick stats in sidebar
+    st.markdown("---")
+    st.markdown("**🚨 Quick Alerts**")
+    st.error("⚠️ 3 critical suppliers need attention")
+    st.warning("📋 12 SKUs below safety stock")
+    st.success("✅ 94% on-time delivery this month")
 
-# Filters section
-st.markdown("### Filters/Splices")
+# Modern filters section
+st.markdown("""
+<div class="filter-container fade-in">
+    <div class="section-header">🔧 Smart Filters & Controls</div>
+</div>
+""", unsafe_allow_html=True)
 
-col1, col2, col3, col4, col5, col6, col7 = st.columns(7)
+col1, col2, col3, col4 = st.columns(4)
+col5, col6, col7, col8 = st.columns(4)
 
 with col1:
-    plant_location = st.selectbox("Plant location", ["Chennai", "Mumbai", "Delhi"], 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 group", ["All", "Engine", "Electronics"], index=0)
+    material_group = st.selectbox("��� Material Category", ["All Categories", "Critical Components", "Standard Parts"], index=0)
 
 with col3:
-    part_sku = st.selectbox("Part/SKU", ["All", "SKU001", "SKU002"], index=0)
+    time_period = st.selectbox("📅 Time Horizon", ["Current Quarter", "FY2025", "Last 6 Months"], index=0)
 
 with col4:
-    time_period = st.selectbox("Time Period", ["FY2026", "FY2025", "FY2027"], index=0)
+    supplier_tier = st.selectbox("🏢 Supplier Tier", ["All Tiers", "Tier 1 Strategic", "Tier 2 Operational"], index=0)
 
 with col5:
-    month = st.selectbox("Month", ["May", "June", "July"], index=0)
+    risk_level = st.selectbox("⚠️ Risk Filter", ["All Levels", "High Risk Only", "Medium Risk", "Low Risk"], index=0)
 
 with col6:
-    supplier_type = st.selectbox("Supplier type", ["All", "Tier 1", "Tier 2"], index=0)
+    performance = st.selectbox("📊 Performance", ["All Performance", "Above Target", "Below Target"], index=0)
 
 with col7:
-    supplier_name = st.selectbox("Supplier Name", ["All", "Supplier A", "Supplier B"], 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)
 
-# Get data
+# Get enhanced data
 material_df = get_material_data()
-metrics = get_overall_metrics()
+metrics = get_enhanced_metrics()
 
-# Main content area
-col1, col2 = st.columns([1, 2])
+# 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)
+
+col1, col2, col3, col4 = st.columns(4)
 
 with col1:
-    # Overall metrics section
-    st.markdown("### 📊 Overall metrics")
-    
-    # Fulfillment metric
     st.markdown(f"""
     <div class="metric-card">
-        <h2>Fulfillment: {metrics['fulfillment']}%</h2>
-        <p style="color: green;">↑ {metrics['mom_change']}% MoM</p>
+        <div class="metric-number">{metrics['fulfillment']}%</div>
+        <div class="metric-label">Overall Fulfillment</div>
+        <div class="metric-change metric-positive">↗ +{metrics['mom_change']}% MoM</div>
     </div>
     """, unsafe_allow_html=True)
+
+with col2:
+    st.markdown(f"""
+    <div class="metric-card">
+        <div class="metric-number">{metrics['on_time_delivery']}%</div>
+        <div class="metric-label">On-Time Delivery</div>
+        <div class="metric-change metric-positive">↗ +1.2% WoW</div>
+    </div>
+    """, unsafe_allow_html=True)
+
+with col3:
+    st.markdown(f"""
+    <div class="metric-card">
+        <div class="metric-number">{metrics['material_groups_at_risk']}%</div>
+        <div class="metric-label">At-Risk Categories</div>
+        <div class="metric-change metric-positive">↘ {metrics['risk_mom_change']}% MoM</div>
+    </div>
+    """, unsafe_allow_html=True)
+
+with col4:
+    st.markdown(f"""
+    <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>
+    """, unsafe_allow_html=True)
+
+# Enhanced data table
+st.markdown('<div class="section-header">📋 Material Group Performance Matrix</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'
     
-    # Other metrics in a 2x2 grid
-    met_col1, met_col2 = st.columns(2)
+    df['Risk Status'] = df['Risk Level'].apply(get_status_html)
+    return df
+
+# 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)
+
+col1, col2 = st.columns(2)
+
+with col1:
+    # Modern fulfillment rate 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']
+    )
     
-    with met_col1:
-        st.metric("Material groups", metrics['material_groups'])
-        st.metric("% Material groups at risk", f"{metrics['material_groups_at_risk']}%", 
-                 delta=f"-{metrics['risk_mom_change']}% MoM")
+    fig1.update_layout(
+        plot_bgcolor='rgba(0,0,0,0)',
+        paper_bgcolor='rgba(0,0,0,0)',
+        font_family="Inter",
+        title_font_size=16,
+        title_font_color="#1e293b",
+        xaxis_tickangle=-45,
+        height=400,
+        margin=dict(t=50, l=50, r=50, b=100)
+    )
     
-    with met_col2:
-        st.metric("SKUs", f"{metrics['skus']:,}")
-        st.metric("% SKUs at risk", f"{metrics['skus_at_risk']}%", 
-                 delta=f"↓{metrics['sku_risk_mom_change']}% MoM")
+    st.plotly_chart(fig1, use_container_width=True)
 
 with col2:
-    # Material group fulfillment table
-    st.markdown("### 📋 Material group wise fulfillment rates")
+    # Risk distribution pie chart
+    risk_counts = material_df['Risk Level'].value_counts()
     
-    # Display the dataframe
-    st.dataframe(material_df, use_container_width=True)
-
-# Add a chart below
-st.markdown("### 📈 Fulfillment Rate Trends")
-
-fig = px.bar(material_df, 
-             x='Material group', 
-             y=['Fulfillment rate', 'Projected Fulfillment rate'],
-             title="Current vs Projected Fulfillment Rates",
-             barmode='group')
+    fig2 = px.pie(
+        values=risk_counts.values,
+        names=risk_counts.index,
+        title="Risk Distribution Across Material Groups",
+        color_discrete_sequence=['#22c55e', '#f59e0b', '#ef4444']
+    )
+    
+    fig2.update_layout(
+        plot_bgcolor='rgba(0,0,0,0)',
+        paper_bgcolor='rgba(0,0,0,0)',
+        font_family="Inter",
+        title_font_size=16,
+        title_font_color="#1e293b",
+        height=400
+    )
+    
+    st.plotly_chart(fig2, use_container_width=True)
 
-fig.update_layout(
-    xaxis_tickangle=-45,
-    height=400,
-    showlegend=True
-)
+st.markdown("</div>", unsafe_allow_html=True)
 
-st.plotly_chart(fig, use_container_width=True)
+# Footer with last update info
+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>
+""".format(timestamp=datetime.now().strftime("%B %d, %Y at %I:%M %p")), unsafe_allow_html=True)