src/streamlit_app.py

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
)

st.plotly_chart(fig, use_container_width=True)