Update app.py

app.py

@@ -1,3 +1,4 @@
+
 import streamlit as st
 import pandas as pd
 import plotly.express as px
@@ -24,8 +25,6 @@ st.markdown("""<style>
         margin-bottom: 25px;
         box-shadow: 0 4px 12px rgba(0,0,0,0.06);
         border: 1px solid #e0e0e0;
-        position: relative; /* Penting untuk positioning logo */
-        box-sizing: border-box; /* Agar padding tidak menambah lebar total */
     }
     h1, h2, h3, h4, h5, .stMarkdown h1, .stMarkdown h2, .stMarkdown h3 {
         text-align: center;
@@ -284,32 +283,69 @@ else:
 st.sidebar.markdown('</div>', unsafe_allow_html=True)
 
 
-# =================== HEADER DENGAN LOGO DI POJOK KANAN ATAS DALAM BOX ===================
-# Gunakan HTML dan CSS untuk menyusun header dengan logo mengambang di kanan atas
-header_html = f"""
-<div class="main-header">
-    <!-- Logo mengambang (absolute) di pojok kanan atas -->
-    <img src="pln.png" style="position: absolute; top: 10px; right: 10px; width: 80px; height: auto; object-fit: contain;" alt="PLN Logo">
-    
-    <!-- Konten teks header -->
-    <h1>PLN Audit Insight & Intelligence Dashboard</h1>
-    <p style="text-align:center; color:#546e7a; font-size:1.1em; margin-top:8px;">
-        Operational Risk Intelligence for Audit & Compliance
-    </p>
-</div>
-"""
-
-st.markdown(header_html, unsafe_allow_html=True)
-
-# Pastikan file pln.png ada di direktori yang sama dengan app.py
-if not os.path.exists("pln.png"):
-    st.warning("⚠️ File logo `pln.png` tidak ditemukan di direktori aplikasi. Harap letakkan file tersebut di sini.")
-
-# (Lanjutkan dengan bagian dashboard lainnya di sini...)
-# Contoh ringan:
-st.write(f"### Data Overview (Filtered)")
-st.write(f"Showing {len(df_filtered)} records based on selected filters.")
-st.dataframe(df_filtered[['kode_temuan', 'temuan_kategori', 'nama_perusahaan', 'temuan_nama_distrik', 'created_at']].head())
+# =================== HEADER ===================
+
+# CSS untuk membuat box logo di kanan atas
+st.markdown("""
+<style>
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 20px;
+    border-radius: 10px;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+}
+
+.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 ========
+logo_path = "pln.png"
+
+st.markdown('<div class="header-container">', unsafe_allow_html=True)
+
+# ---- 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)
+
+# ---- 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)
 
 # =================== 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)