Code Editor for app.py

import streamlit as st
import pandas as pd
import plotly.express as px

# Set page configuration
st.set_page_config(page_title="SISSuite", layout="wide", initial_sidebar_state="expanded")

# Custom CSS to make it look more like the original
st.markdown("""
<style>
    .main-header {
        color: #2E86AB;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .section-header {
        color: #2E86AB;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        margin-top: 20px;
    }
    .metric-card {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        border-left: 4px solid #2E86AB;
        margin-bottom: 10px;
    }
    .sidebar .sidebar-content {
        background-color: #2c3e50;
    }
    .status-new {
        background-color: #28a745;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
    .status-review {
        background-color: #ffc107;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
    .status-processing {
        background-color: #17a2b8;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
    .status-complete {
        background-color: #6c757d;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
</style>
""", unsafe_allow_html=True)

# Sidebar
with st.sidebar:
    st.markdown("### 🔬 SISSuite")
    st.markdown("---")
    
    st.markdown("**Quick Info**")
    selected_page = st.selectbox("Navigate", ["Dashboard", "Archive", "Lab documents", "Collection criteria"])
    
    st.markdown("---")
    st.markdown("**Toolbar**")
    st.button("📊 Analytics")
    st.button("📋 Documents")
    st.button("🏷️ Tags")
    st.button("💾 Element database")
    
    st.markdown("---")
    st.markdown("**Account settings**")
    st.button("👤 Experiments")
    st.button("⚙️ Configuration")
    st.button("📧 Emails")

# Main content
st.markdown('<h1 class="main-header">Dashboard</h1>', unsafe_allow_html=True)

# Create sample data for Element records
element_data = {
    'Tag/Name': ['Linac - Accuracy Val. 28', 'Linac/MLC - Picket - 28-8', 'Test', 'Sys 2 Linac/MLC 282 - TagName64...'],
    'Revision number': [1.01, 0.73, 0.45, 0.95],
    'Current status': ['New', 'New', 'New', 'New'],
    'Actions': ['📝', '📝', '📝', '📝']
}

evaluation_data = {
    'Tag/Name': ['Acuity v20.50 6x Dose', 'Cerro FY Electron Dose Model-Cerro', '', ''],
    'Revision number': [2.14, 3.23, '', ''],
    'Current status': ['New', 'New', '', ''],
    'Actions': ['📝', '📝', '', '']
}

# FMEA data
fmea_data = {
    'Tag/Name': ['Device GMP', 'GMP'],
    'Revision number': [4.14, 3.15],
    'Current status': ['Review', 'New'],
    'Actions': ['📝', '📝']
}

# IOPA data
iopa_data = {
    'Tag/Name': ['6x FFF Electron Linac', 'Check QA', 'Audit QA', 'Audit-Checking', 'Initial Checking and Reference Protocols', 'Initial Check', 'Siemens Read Setter Quality', 'Initial - Check H TG-43/1 AAL', 'Audit - Siemens FFA'],
    'Revision number': [1.91, 6.02, 3.40, 0.03, 0.01, 0.01, 0.01, 0.01, 4.05],
    'Current status': ['In review', 'New', 'New', 'New', 'New', 'In review', 'In review', 'New', 'New'],
    'Actions': ['📝'] * 9
}

# Create two columns for the top section
col1, col2 = st.columns(2)

with col1:
    st.markdown('<h2 class="section-header">Element records (can Current revisions)</h2>', unsafe_allow_html=True)
    
    # Create DataFrame
    element_df = pd.DataFrame(element_data)
    
    # Display table with custom styling
    st.dataframe(
        element_df,
        use_container_width=True,
        hide_index=True,
        column_config={
            "Tag/Name": st.column_config.TextColumn("Tag/Name", width="medium"),
            "Revision number": st.column_config.NumberColumn("Revision number", format="%.2f"),
            "Current status": st.column_config.TextColumn("Current status"),
            "Actions": st.column_config.TextColumn("Actions", width="small")
        }
    )

with col2:
    st.markdown('<h2 class="section-header">Evaluation records (can Current revisions)</h2>', unsafe_allow_html=True)
    
    # Create DataFrame
    evaluation_df = pd.DataFrame(evaluation_data)
    
    # Display table
    st.dataframe(
        evaluation_df,
        use_container_width=True,
        hide_index=True,
        column_config={
            "Tag/Name": st.column_config.TextColumn("Tag/Name", width="medium"),
            "Revision number": st.column_config.NumberColumn("Revision number", format="%.2f"),
            "Current status": st.column_config.TextColumn("Current status"),
            "Actions": st.column_config.TextColumn("Actions", width="small")
        }
    )

# Second row
col3, col4 = st.columns(2)

with col3:
    st.markdown('<h2 class="section-header">FMEA documents (can Current revisions)</h2>', unsafe_allow_html=True)
    
    # Create DataFrame
    fmea_df = pd.DataFrame(fmea_data)
    
    # Display table
    st.dataframe(
        fmea_df,
        use_container_width=True,
        hide_index=True,
        column_config={
            "Tag/Name": st.column_config.TextColumn("Tag/Name", width="medium"),
            "Revision number": st.column_config.NumberColumn("Revision number", format="%.2f"),
            "Current status": st.column_config.TextColumn("Current status"),
            "Actions": st.column_config.TextColumn("Actions", width="small")
        }
    )

with col4:
    st.markdown('<h2 class="section-header">IOPA (View Current revisions)</h2>', unsafe_allow_html=True)
    
    # Create DataFrame
    iopa_df = pd.DataFrame(iopa_data)
    
    # Display table
    st.dataframe(
        iopa_df,
        use_container_width=True,
        hide_index=True,
        column_config={
            "Tag/Name": st.column_config.TextColumn("Tag/Name", width="medium"),
            "Revision number": st.column_config.NumberColumn("Revision number", format="%.2f"),
            "Current status": st.column_config.TextColumn("Current status"),
            "Actions": st.column_config.TextColumn("Actions", width="small")
        }
    )