Code Editor for app.py

import streamlit as st
import pandas as pd
import numpy as np
from st_aggrid import AgGrid, GridOptionsBuilder

# Configure page
st.set_page_config(layout="wide", page_title="SiSuite Dashboard")

# Custom CSS to match the SiSuite styling
st.markdown("""
<style>
    .main {
        padding: 0;
    }
    .sidebar .sidebar-content {
        background-color: #2E3440;
        color: white;
    }
    .stSelectbox > div > div {
        background-color: #4C566A;
        color: white;
    }
    .metric-card {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #dee2e6;
        margin-bottom: 10px;
    }
    .status-draft { background-color: #6c757d; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
    .status-wip { background-color: #ffc107; color: black; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
    .status-complete { background-color: #28a745; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
</style>
""", unsafe_allow_html=True)

# Sidebar
with st.sidebar:
    st.markdown("## 🔸 SiSuite")
    st.markdown("### Quick links")
    
    menu_items = [
        "📊 Dashboard",
        "📄 Articles", 
        "👥 Documents",
        "🏷️ Collection cleanup"
    ]
    
    selected = st.selectbox("", menu_items, index=0)
    
    st.markdown("### Toolbox")
    toolbox_items = [
        "📈 Analytics",
        "📋 Compliance", 
        "🏷️ Tags",
        "🗃️ Element database"
    ]
    
    for item in toolbox_items:
        st.markdown(f"- {item}")
    
    st.markdown("### Account settings")
    account_items = [
        "👤 Preferences",
        "🔧 Consultancy",
        "📧 Email"
    ]
    
    for item in account_items:
        st.markdown(f"- {item}")

# Main content
st.markdown("# Dashboard")

# Create sample data for the grids
@st.cache_data
def get_element_records():
    data = {
        'TagName': ['Lims', 'Microwave', 'Test', 'Sysiphus', 'Test2'],
        'Revision number': [1.05, 1.03, 0.01, 1.05, 0.01],
        'Current status': ['Draft', 'Draft', 'Draft', 'Draft', 'Draft'],
        'Actions': ['📝', '📝', '📝', '📝', '📝']
    }
    return pd.DataFrame(data)

@st.cache_data
def get_evaluation_records():
    data = {
        'TagName': ['Annex K20 G5 Oleo', 'Senior PC Element Demo Model Steam'],
        'Revision number': [1.23, 1.23],
        'Current status': ['Draft', 'Draft'], 
        'Actions': ['📝', '📝']
    }
    return pd.DataFrame(data)

@st.cache_data
def get_fmea_documents():
    data = {
        'TagName': ['Demo C3BR', 'Test'],
        'Revision number': [4.15, 4.04],
        'Current status': ['In progress', 'Draft'],
        'Actions': ['📝', '📝']
    }
    return pd.DataFrame(data)

@st.cache_data
def get_lopa_data():
    data = {
        'TagName': ['1.1.1.1-ESD#1-LI5927', 'Demo OA', '00710 Testing', 'Audio Checking', 'Initial Discharge Gas Delivery Protection', 'TESTING', 'Interlink Read Barrier Survey', 'TEST - PCTE-1154-D2 (AIM034)', 'Demo DIG-LIK'],
        'Revision number': [1.01, 0.02, 1.02, 0.03, 0.01, 0.01, 0.01, 0.01, 0.02],
        'Current status': ['In progress', 'Draft', 'Draft', 'Draft', 'In progress', 'In progress', 'In progress', 'Draft', 'Draft'],
        'Actions': ['📝'] * 9
    }
    return pd.DataFrame(data)

# Create columns for the grid layout
col1, col2 = st.columns(2)

with col1:
    # Element records grid
    st.markdown("### Element records (Not Current revisions)")
    element_df = get_element_records()
    
    gb = GridOptionsBuilder.from_dataframe(element_df)
    gb.configure_pagination(paginationAutoPageSize=True)
    gb.configure_side_bar()
    gb.configure_default_column(groupable=True, value=True, enableRowGroup=True, aggFunc='sum', editable=True)
    
    gridOptions = gb.build()
    AgGrid(element_df, gridOptions=gridOptions, height=200, fit_columns_on_grid_load=True)

    # FMEA documents grid  
    st.markdown("### FMEA documents (Not Current revisions)")
    fmea_df = get_fmea_documents()
    
    gb = GridOptionsBuilder.from_dataframe(fmea_df)
    gb.configure_pagination(paginationAutoPageSize=True)
    gb.configure_side_bar()
    gb.configure_default_column(groupable=True, value=True, enableRowGroup=True, aggFunc='sum', editable=True)
    
    gridOptions = gb.build()
    AgGrid(fmea_df, gridOptions=gridOptions, height=150, fit_columns_on_grid_load=True)

with col2:
    # Evaluation records grid
    st.markdown("### Evaluation records (Not Current revisions)")
    eval_df = get_evaluation_records()
    
    gb = GridOptionsBuilder.from_dataframe(eval_df)
    gb.configure_pagination(paginationAutoPageSize=True)
    gb.configure_side_bar()
    gb.configure_default_column(groupable=True, value=True, enableRowGroup=True, aggFunc='sum', editable=True)
    
    gridOptions = gb.build()
    AgGrid(eval_df, gridOptions=gridOptions, height=150, fit_columns_on_grid_load=True)

    # LOPA grid
    st.markdown("### LOPA (Not Current revisions)")
    lopa_df = get_lopa_data()
    
    gb = GridOptionsBuilder.from_dataframe(lopa_df)
    gb.configure_pagination(paginationAutoPageSize=True)
    gb.configure_side_bar()
    gb.configure_default_column(groupable=True, value=True, enableRowGroup=True, aggFunc='sum', editable=True)
    
    gridOptions = gb.build()
    AgGrid(lopa_df, gridOptions=gridOptions, height=300, fit_columns_on_grid_load=True)