Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,166 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+
+# Page config
+st.set_page_config(
+    page_title="Auto Digital Public Infrastructure",
+    page_icon="🔗",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Custom CSS for styling
+st.markdown("""
+<style>
+    .main-header {
+        background-color: #4a5568;
+        color: white;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1rem;
+    }
+    .metric-card {
+        background-color: #f7fafc;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        border-left: 4px solid #3182ce;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# Sample data functions (since we can't import separate files easily)
+@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]
+    })
+
+@st.cache_data
+def get_overall_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
+    }
+
+# Header
+st.markdown("""
+<div class="main-header">
+    <h1>🔗 Auto Digital Public Infrastructure</h1>
+    <h2 style="color: #ffd700;">SUPPLY CHAIN RESILIENCE- CT- Overall metrics</h2>
+</div>
+""", unsafe_allow_html=True)
+
+# Sidebar navigation
+with st.sidebar:
+    st.markdown("### Navigation")
+    st.markdown("**Master Screen**")
+    
+    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"
+    ]
+    
+    selected_nav = st.selectbox("Select Page", nav_options, index=1)
+
+# Filters section
+st.markdown("### Filters/Splices")
+
+col1, col2, col3, col4, col5, col6, col7 = st.columns(7)
+
+with col1:
+    plant_location = st.selectbox("Plant location", ["Chennai", "Mumbai", "Delhi"], index=0)
+
+with col2:
+    material_group = st.selectbox("Material group", ["All", "Engine", "Electronics"], index=0)
+
+with col3:
+    part_sku = st.selectbox("Part/SKU", ["All", "SKU001", "SKU002"], index=0)
+
+with col4:
+    time_period = st.selectbox("Time Period", ["FY2026", "FY2025", "FY2027"], index=0)
+
+with col5:
+    month = st.selectbox("Month", ["May", "June", "July"], index=0)
+
+with col6:
+    supplier_type = st.selectbox("Supplier type", ["All", "Tier 1", "Tier 2"], index=0)
+
+with col7:
+    supplier_name = st.selectbox("Supplier Name", ["All", "Supplier A", "Supplier B"], index=0)
+
+# Get data
+material_df = get_material_data()
+metrics = get_overall_metrics()
+
+# Main content area
+col1, col2 = st.columns([1, 2])
+
+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>
+    """, unsafe_allow_html=True)
+    
+    # Other metrics in a 2x2 grid
+    met_col1, met_col2 = st.columns(2)
+    
+    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")
+    
+    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")
+
+with col2:
+    # Material group fulfillment table
+    st.markdown("### 📋 Material group wise fulfillment rates")
+    
+    # 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')
+
+fig.update_layout(
+    xaxis_tickangle=-45,
+    height=400,
+    showlegend=True
+)
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+st.plotly_chart(fig, use_container_width=True)