Update app.py

app.py

@@ -31,6 +31,192 @@ except FileNotFoundError:
     st.warning(f"Logo file '{logo_path}' not found. Using placeholder text.")
     logo_html = '<div style="font-size: 18px; font-weight: bold; color: #2c3e50;">BTECH</div>'
 
+# # =================== GLOBAL CSS =====================
+# st.markdown("""
+# <style>
+# body {
+#     background-color: #f6f8fa;
+# }
+
+# /* ===== HEADER WRAPPER ===== */
+# .header-container {
+#     display: flex;
+#     justify-content: space-between;
+#     align-items: center;
+#     padding: 25px 35px;
+#     background: white; /* Latar belakang utama diubah menjadi putih */
+#     border-radius: 0 0 14px 14px; /* Rounded bottom only */
+#     box-shadow: 0 5px 18px rgba(0,0,0,0.15); /* Bayangan lebih lembut */
+#     border: 1px solid #e0e0e0; /* Border tipis untuk definisi */
+#     margin-bottom: 25px;
+#     position: relative;
+#     overflow: hidden; /* Ensure rounded corners clip content */
+# }
+
+# /* Optional: Subtle pattern or texture overlay (optional, can be removed) */
+# /* .header-container::before {
+#     content: "";
+#     position: absolute;
+#     top: 0;
+#     left: 0;
+#     right: 0;
+#     bottom: 0;
+#     background: linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.03) 75%, transparent 75%, transparent);
+#     background-size: 20px 20px;
+#     pointer-events: none;
+# } */
+
+# /* ===== HEADER TEXT ===== */
+# .header-title {
+#     color: #2c3e50; /* Teks header diubah agar kontras dengan latar putih */
+#     font-family: 'Segoe UI', sans-serif;
+#     flex-grow: 1; /* Allow text to take up available space */
+#     margin-right: 20px; /* Space between text and logo */
+#     text-align: left;
+# }
+
+# .header-title h1 {
+#     font-size: 2.7em;
+#     font-weight: 650;
+#     margin: 0;
+#     text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Bayangan teks lebih lembut */
+# }
+
+# .header-title p {
+#     font-size: 1.25em;
+#     opacity: 0.85; /* Sedikit transparan untuk subjudul */
+#     margin-top: 6px;
+#     font-style: italic;
+#     color: #34495e; /* Warna subjudul disesuaikan */
+# }
+
+# /* ===== LOGO WRAPPER ===== */
+# .header-logo {
+#     display: flex;
+#     align-items: center;
+#     justify-content: flex-end; /* Align logo to the right within its container */
+#     flex-shrink: 0; /* Prevent logo container from shrinking */
+# }
+
+# /* ===== LOGO STYLE ===== */
+# .header-logo img {
+#     border-radius: 10px;
+#     border: 2px solid rgba(44, 62, 80, 0.15); /* Border logo disesuaikan */
+#     box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* Bayangan logo lebih lembut */
+#     max-height: 80px; /* Set max height */
+#     max-width: 120px; /* Set max width */
+# }
+
+# /* ===== METRIC CARDS ===== */
+# .metric-card {
+#     background: #ffffff;
+#     padding: 18px 22px;
+#     border-radius: 12px;
+#     border-left: 6px solid #1e3c72;
+#     box-shadow: 0 3px 8px rgba(0,0,0,0.10);
+#     transition: 0.25s ease-in-out;
+# }
+# .metric-card:hover {
+#     transform: translateY(-4px);
+#     box-shadow: 0 6px 15px rgba(0,0,0,0.18);
+# }
+
+# /* ===== INSIGHT BOX ===== */
+# .insight-box {
+#     background: #fafafa;
+#     padding: 18px;
+#     border-radius: 12px;
+#     border-left: 6px solid #ff6b6b;
+#     margin: 15px 0;
+#     box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+# }
+
+# /* ===== RISK MATRIX ===== */
+# .risk-matrix {
+#     border-collapse: collapse;
+#     width: 100%;
+#     margin: 20px 0;
+# }
+# .risk-matrix th, .risk-matrix td {
+#     border: 1px solid #ddd;
+#     padding: 12px;
+#     text-align: center;
+# }
+# .risk-matrix th {
+#     background-color: #f2f2f2;
+# }
+# .critical { background-color: #ffcccc; font-weight: bold; }
+# .high { background-color: #ffebcc; }
+# .medium { background-color: #ffffcc; }
+# .low { background-color: #e6ffe6; }
+
+# /* ===== CHAT UI ===== */
+# .chat-container {
+#     background: white;
+#     padding: 20px;
+#     border-radius: 12px;
+#     height: 400px;
+#     overflow-y: auto;
+#     border: 1px solid #ccc;
+# }
+# .user-message {
+#     background: #e3f2fd;
+#     color: black;
+#     padding: 12px;
+#     border-radius: 12px;
+#     margin: 10px 0;
+#     text-align: right;
+#     border: 1px solid #bbdefb;
+# }
+# .ai-message {
+#     background: #f5f5f5;
+#     color: black;
+#     padding: 12px;
+#     border-radius: 12px;
+#     margin: 10px 0;
+#     text-align: left;
+#     border: 1px solid #e0e0e0;
+# }
+
+# /* ===== INPUT BOX ===== */
+# .chat-box, .user-question, .ai-answer {
+#     background: white;
+#     border: 1px solid #ccc;
+#     border-radius: 10px;
+#     padding: 12px;
+#     margin-bottom: 12px;
+# }
+
+# /* ===== FOOTER ===== */
+# .footer {
+#     text-align: center;
+#     padding: 20px;
+#     color: gray;
+#     font-size: 0.9em;
+# }
+
+# /* ===== HOVER EFFECTS ===== */
+# .metric-card:hover, .insight-box:hover {
+#     box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+#     transition: all 0.3s ease-in-out;
+# }
+
+# </style>
+# """, unsafe_allow_html=True)
+
+# # =================== HEADER =====================
+# st.markdown(f"""
+# <div class="header-container">
+#     <div class="header-title">
+#         <h1>Safety Analysis and AI - Advanced Fatigue Analysis</h1>
+#         <p>Proactive Safety Intelligence for Mining Operations</p>
+#     </div>
+#     <div class="header-logo">
+#         {logo_html}
+#     </div>
+# </div>
+# """, unsafe_allow_html=True)
+
 # =================== GLOBAL CSS =====================
 st.markdown("""
 <style>
@@ -41,166 +227,60 @@ body {
 /* ===== HEADER WRAPPER ===== */
 .header-container {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-between; /* Logo di kanan, teks di tengah */
     align-items: center;
     padding: 25px 35px;
-    background: white; /* Latar belakang utama diubah menjadi putih */
-    border-radius: 0 0 14px 14px; /* Rounded bottom only */
-    box-shadow: 0 5px 18px rgba(0,0,0,0.15); /* Bayangan lebih lembut */
-    border: 1px solid #e0e0e0; /* Border tipis untuk definisi */
+    background: white;
+    border-radius: 0 0 14px 14px;
+    box-shadow: 0 5px 18px rgba(0,0,0,0.15);
+    border: 1px solid #e0e0e0;
     margin-bottom: 25px;
     position: relative;
-    overflow: hidden; /* Ensure rounded corners clip content */
 }
 
-/* Optional: Subtle pattern or texture overlay (optional, can be removed) */
-/* .header-container::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.03) 75%, transparent 75%, transparent);
-    background-size: 20px 20px;
-    pointer-events: none;
-} */
-
 /* ===== HEADER TEXT ===== */
 .header-title {
-    color: #2c3e50; /* Teks header diubah agar kontras dengan latar putih */
-    font-family: 'Segoe UI', sans-serif;
-    flex-grow: 1; /* Allow text to take up available space */
-    margin-right: 20px; /* Space between text and logo */
-    text-align: left;
+    flex: 1; /* Mengambil ruang sebanyak mungkin */
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center horizontal */
+    justify-content: center; /* Center vertical */
+    text-align: center;
 }
 
 .header-title h1 {
     font-size: 2.7em;
     font-weight: 650;
     margin: 0;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Bayangan teks lebih lembut */
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+    color: #2c3e50;
 }
 
 .header-title p {
     font-size: 1.25em;
-    opacity: 0.85; /* Sedikit transparan untuk subjudul */
+    opacity: 0.85;
     margin-top: 6px;
     font-style: italic;
-    color: #34495e; /* Warna subjudul disesuaikan */
+    color: #34495e;
 }
 
 /* ===== LOGO WRAPPER ===== */
 .header-logo {
     display: flex;
     align-items: center;
-    justify-content: flex-end; /* Align logo to the right within its container */
-    flex-shrink: 0; /* Prevent logo container from shrinking */
+    justify-content: flex-end;
+    flex-shrink: 0;
 }
 
-/* ===== LOGO STYLE ===== */
 .header-logo img {
     border-radius: 10px;
-    border: 2px solid rgba(44, 62, 80, 0.15); /* Border logo disesuaikan */
-    box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* Bayangan logo lebih lembut */
-    max-height: 80px; /* Set max height */
-    max-width: 120px; /* Set max width */
-}
-
-/* ===== METRIC CARDS ===== */
-.metric-card {
-    background: #ffffff;
-    padding: 18px 22px;
-    border-radius: 12px;
-    border-left: 6px solid #1e3c72;
-    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
-    transition: 0.25s ease-in-out;
-}
-.metric-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 6px 15px rgba(0,0,0,0.18);
-}
-
-/* ===== INSIGHT BOX ===== */
-.insight-box {
-    background: #fafafa;
-    padding: 18px;
-    border-radius: 12px;
-    border-left: 6px solid #ff6b6b;
-    margin: 15px 0;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
-}
-
-/* ===== RISK MATRIX ===== */
-.risk-matrix {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 20px 0;
-}
-.risk-matrix th, .risk-matrix td {
-    border: 1px solid #ddd;
-    padding: 12px;
-    text-align: center;
-}
-.risk-matrix th {
-    background-color: #f2f2f2;
-}
-.critical { background-color: #ffcccc; font-weight: bold; }
-.high { background-color: #ffebcc; }
-.medium { background-color: #ffffcc; }
-.low { background-color: #e6ffe6; }
-
-/* ===== CHAT UI ===== */
-.chat-container {
-    background: white;
-    padding: 20px;
-    border-radius: 12px;
-    height: 400px;
-    overflow-y: auto;
-    border: 1px solid #ccc;
-}
-.user-message {
-    background: #e3f2fd;
-    color: black;
-    padding: 12px;
-    border-radius: 12px;
-    margin: 10px 0;
-    text-align: right;
-    border: 1px solid #bbdefb;
-}
-.ai-message {
-    background: #f5f5f5;
-    color: black;
-    padding: 12px;
-    border-radius: 12px;
-    margin: 10px 0;
-    text-align: left;
-    border: 1px solid #e0e0e0;
-}
-
-/* ===== INPUT BOX ===== */
-.chat-box, .user-question, .ai-answer {
-    background: white;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    padding: 12px;
-    margin-bottom: 12px;
-}
-
-/* ===== FOOTER ===== */
-.footer {
-    text-align: center;
-    padding: 20px;
-    color: gray;
-    font-size: 0.9em;
-}
-
-/* ===== HOVER EFFECTS ===== */
-.metric-card:hover, .insight-box:hover {
-    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
-    transition: all 0.3s ease-in-out;
+    border: 2px solid rgba(44, 62, 80, 0.15);
+    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+    max-height: 80px;
+    max-width: 120px;
 }
 
+/* Metric cards, insight box, dll. tetap sama... */
 </style>
 """, unsafe_allow_html=True)
 
@@ -212,14 +292,13 @@ st.markdown(f"""
         <p>Proactive Safety Intelligence for Mining Operations</p>
     </div>
     <div class="header-logo">
-        {logo_html}
+        {logo_html}  <!-- Logo tetap di kanan -->
     </div>
 </div>
 """, unsafe_allow_html=True)
 
-# Sisa kode Anda (LOAD DATA, FILTERS, VISUALISASI, dll.) tetap sama di bawah ini
-# ... (Kode selanjutnya disalin dari bagian bawah file Anda, misalnya LOAD DATA ke bawah)
-# =================== LOAD DATA ======================
+# # ... (Kode selanjutnya disalin dari bagian bawah file Anda, misalnya LOAD DATA ke bawah)
+# # =================== LOAD DATA ======================
 @st.cache_data
 def load_data():
     try:
@@ -320,7 +399,6 @@ df_full_report = df.copy()
 # =================== FILTERS (Sidebar) =====================
 filter_dict = {}
 
-# ✅ Sidebar title — elegan, profesional, tanpa emoticon
 st.sidebar.markdown(
     """
     <div style="
@@ -328,7 +406,8 @@ st.sidebar.markdown(
         font-size: 1.35em;
         font-weight: 600;
         color: #2c3e50;
-        padding: 8px 0 12px 0;
+        padding: 10px 0 14px 0;
+        text-align: center;
         border-bottom: 2px solid #3498db;
         margin-bottom: 16px;
     ">
@@ -338,6 +417,8 @@ st.sidebar.markdown(
     unsafe_allow_html=True
 )
 
+with st.sidebar.form("filters_form"):
+
 with st.sidebar.form("filters_form"):
     # ---------------- Date Range ----------------
     if 'date' in df.columns and not df['date'].isna().all():