Update app.py

app.py

@@ -284,68 +284,55 @@ st.sidebar.markdown('</div>', unsafe_allow_html=True)
 
 
 # =================== HEADER ===================
+import streamlit as st
+import os
 
-# CSS untuk membuat box logo di kanan atas
+# CSS biar header terlihat seperti 1 kotak besar
 st.markdown("""
 <style>
-.header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 20px;
-    border-radius: 10px;
-    background-color: #ffffff;
+.header-box {
+    padding: 15px 25px;
+    background-color: white;
     border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    margin-bottom: 25px;
 }
-
 .header-title {
-    flex-grow: 1;
     text-align: center;
 }
-
-.logo-box {
-    border: 1px solid #e0e0e0;
-    padding: 6px;
-    border-radius: 10px;
-    background-color: #f8f9fa;
-    display: flex;
-    align-items: center;
-}
 </style>
 """, unsafe_allow_html=True)
 
+# ==== HEADER LAYOUT (Columns) ====
+with st.container():
+    st.markdown('<div class="header-box">', unsafe_allow_html=True)
+    col1, col2, col3 = st.columns([1, 5, 1])  # tengah lebih besar
 
-# ======== HEADER LAYOUT ========
-logo_path = "pln.png"
-
-st.markdown('<div class="header-container">', unsafe_allow_html=True)
+    # LEFT (kosong)
+    with col1:
+        st.write("")
 
-# ---- TITLE (CENTER) ----
-st.markdown("""
-    <div class="header-title">
-        <h1 style="margin-bottom:4px;">PLN Audit Insight & Intelligence Dashboard</h1>
-        <p style="color:#546e7a; font-size:1.05em; margin-top:0px;">
-            Operational Risk Intelligence for Audit & Compliance
-        </p>
-    </div>
-""", unsafe_allow_html=True)
+    # CENTER — TITLE
+    with col2:
+        st.markdown("""
+            <div class="header-title">
+                <h1 style="margin-bottom:6px;">PLN Audit Insight & Intelligence Dashboard</h1>
+                <p style="color:#546e7a; font-size:1.05em; margin-top:-8px;">
+                    Operational Risk Intelligence for Audit & Compliance
+                </p>
+            </div>
+        """, unsafe_allow_html=True)
+
+    # RIGHT — LOGO BOX
+    with col3:
+        logo_path = "pln.png"
+        if os.path.exists(logo_path):
+            st.image(logo_path, width=80)
+        else:
+            st.error("Logo not found")
 
-# ---- LOGO (RIGHT BOX) ----
-if os.path.exists(logo_path):
-    st.markdown(f"""
-        <div class="logo-box">
-            <img src="data:image/png;base64,{open(logo_path, "rb").read().hex()}" 
-                 width="70">
-        </div>
-    """, unsafe_allow_html=True)
-else:
-    st.markdown("""
-        <div class="logo-box">
-            <p style="color:red; font-size:0.9em;">Logo missing</p>
-        </div>
-    """, unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)
 
-st.markdown('</div>', unsafe_allow_html=True)
 
 # =================== 1. Pie Charts: Temuan/Person by Company (PG & UM) - PERBAIKAN ===================
 st.markdown("<h3 class='section-title'>OBJECTIVE 1 - Company Reporting Activity: Who Reports the Most?</h3>", unsafe_allow_html=True)