Code Editor for app.py

import streamlit as st
import pandas as pd
import numpy as np

# Set page config
st.set_page_config(page_title="SISuite", layout="wide")

# Custom CSS for styling
st.markdown("""
<style>
    .main > div {
        padding-top: 0rem;
    }
    .stSidebar > div {
        background-color: #2E3440;
        color: white;
    }
    .sidebar-title {
        font-weight: bold;
        color: white;
        font-size: 18px;
        margin-bottom: 20px;
    }
    .sidebar-section {
        margin-bottom: 15px;
    }
    .sidebar-item {
        color: #D8DEE9;
        margin: 5px 0;
        font-size: 14px;
    }
    .card {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    .card-title {
        font-size: 14px;
        font-weight: bold;
        color: #374151;
        margin-bottom: 15px;
    }
    .status-badge {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }
    .status-active {
        background-color: #10B981;
        color: white;
    }
    .status-inactive {
        background-color: #6B7280;
        color: white;
    }
    .status-pending {
        background-color: #F59E0B;
        color: white;
    }
    .action-button {
        background-color: #3B82F6;
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
    }
</style>
""", unsafe_allow_html=True)

# Sidebar
with st.sidebar:
    st.markdown('<div class="sidebar-title">🟦 SISuite</div>', unsafe_allow_html=True)
    
    st.markdown("**Quick links**")
    st.markdown("📊 Dashboard")
    st.markdown("📁 Articles")
    st.markdown("📄 Documents")
    st.markdown("🔄 Verification process")
    
    st.markdown("**Toolbox**")
    st.markdown("📈 Analytics")
    st.markdown("📋 Documents")
    st.markdown("🏷️ Tags")
    st.markdown("💾 Element database")
    
    st.markdown("**Account settings**")
    st.markdown("⚙️ Equipment")
    st.markdown("📊 Consultancy")
    st.markdown("👥 Admin")

# Main content
st.title("Dashboard")

# Create sample data
@st.cache_data
def create_sample_data():
    # Element records data
    element_data = {
        'Tag/Name': ['Level Transmitter X2', 'Flow Meter 1', 'Test'],
        'Revision number': [1.01, 1.05, 0.01],
        'Current status': ['Confirmed', 'Active', 'Active'],
        'Actions': ['🔍', '🔍', '🔍']
    }
    
    # Evaluation records data
    evaluation_data = {
        'Tag/Name': ['Arsenic X2-SL Valve', 'Sensor PT Element Demo Model Green'],
        'Revision number': [1.01, 1.01],
        'Current status': ['Confirmed', 'Confirmed'],
        'Actions': ['🔍', '🔍']
    }
    
    # FMEA documents data
    fmea_data = {
        'Tag/Name': ['Distep Valve', 'Valve'],
        'Revision number': [1.01, 1.04],
        'Current status': ['Pending', 'Confirmed'],
        'Actions': ['🔍', '🔍']
    }
    
    # LOPA data
    lopa_data = {
        'Tag/Name': ['P-21 Extruder', 'Temp GA', 'Temp GB', 'Pump Overhang', 'Initial Discharge Line Balance Protection', 'Pump Overhang', 'Remote-Reset Starter Service', 'HVAC-TDH-A-7858 Air Stripper', 'Water Purifier System - X2'],
        'Revision number': [1.01, 0.02, 0.03, 0.03, 0.01, 0.01, 0.01, 0.01, 0.01],
        'Current status': ['Confirmed', 'Confirmed', 'Confirmed', 'Confirmed', 'Confirmed', 'Confirmed', 'Confirmed', 'Confirmed', 'Confirmed'],
        'Actions': ['🔍'] * 9
    }
    
    return element_data, evaluation_data, fmea_data, lopa_data

element_data, evaluation_data, fmea_data, lopa_data = create_sample_data()

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

with col1:
    # Element records section
    st.markdown("""
    <div class="card">
        <div class="card-title">Element records <span style="color: #6B7280;">none Current revisions</span></div>
    </div>
    """, unsafe_allow_html=True)
    
    # Convert to DataFrame and display
    element_df = pd.DataFrame(element_data)
    st.dataframe(element_df, use_container_width=True, hide_index=True)
    
    # FMEA documents section
    st.markdown("""
    <div class="card">
        <div class="card-title">FMEA documents <span style="color: #6B7280;">none Current revisions</span></div>
    </div>
    """, unsafe_allow_html=True)
    
    fmea_df = pd.DataFrame(fmea_data)
    st.dataframe(fmea_df, use_container_width=True, hide_index=True)

with col2:
    # Evaluation records section
    st.markdown("""
    <div class="card">
        <div class="card-title">Evaluation records <span style="color: #6B7280;">none Current revisions</span></div>
    </div>
    """, unsafe_allow_html=True)
    
    evaluation_df = pd.DataFrame(evaluation_data)
    st.dataframe(evaluation_df, use_container_width=True, hide_index=True)
    
    # LOPA section
    st.markdown("""
    <div class="card">
        <div class="card-title">LOPA <span style="color: #6B7280;">none Current revisions</span></div>
    </div>
    """, unsafe_allow_html=True)
    
    lopa_df = pd.DataFrame(lopa_data)
    st.dataframe(lopa_df, use_container_width=True, hide_index=True)