Update app.py

app.py

@@ -1147,15 +1147,37 @@ except Exception as e:
     st.error(f"⚠️ Error Risk Map Objective 4: {e}")
     st.exception(e)
 
+
+        # st.exception(e)  # Uncomment during development
+
+
+import streamlit as st
+import pandas as pd
+import numpy as np
+import plotly.graph_objects as go
+
 # =================== OBJECTIVE 5: Operator Fatigue Risk Gradient Dashboard =====================
-# ✅ Gunakan HTML + CSS (bukan st.subheader), centered, white bg, typo fixed
 st.markdown("""
 <h2 class="objective-header">OBJECTIVE 5: See Your Team’s Fatigue Hazard Profile!</h2>
 """, unsafe_allow_html=True)
 
-# ✅ CUSTOM CSS — SEMUA STRUKTUR DIPERBAIKI & DIPERLUAS
+# ✅ CUSTOM CSS — RESPONSIVE & SESUAI PREFERENSI
 st.markdown("""
 <style>
+    /* Responsiveness: base font & container */
+    @media (max-width: 768px) {
+        .objective-header { font-size: 22px; padding: 12px; }
+        .big-title { font-size: 20px; padding: 10px; }
+        .legend-container { flex-direction: column; gap: 15px; }
+        .legend-box { min-width: 100% !important; max-width: none; }
+        .ai-insight-box, .recommendation-box { padding: 14px; }
+    }
+    @media (max-width: 480px) {
+        .objective-header { font-size: 20px; }
+        .legend-item span { font-size: 12px; }
+        .legend-note { font-size: 11px; }
+    }
+
     /* === OBJECTIVE HEADER === */
     .objective-header {
         font-size: 26px;
@@ -1184,21 +1206,13 @@ st.markdown("""
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
 
-    .subnote {
-        font-size: 16px;
-        color: #7f8c8d;
-        text-align: center;
-        margin-bottom: 20px;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
-
     .section-divider {
         height: 2px;
         background: linear-gradient(to right, #3498db, #2ecc71, #f1c40f, #e74c3c);
         margin: 25px 0;
     }
 
-    /* === LEGEND === */
+    /* === LEGEND — RESPONSIVE FLEXBOX === */
     .legend-container {
         display: flex;
         gap: 20px;
@@ -1211,8 +1225,9 @@ st.markdown("""
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 16px;
-        min-width: 290px;
-        max-width: 330px;
+        min-width: 280px;
+        flex: 1;
+        max-width: 340px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.05);
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
@@ -1227,7 +1242,7 @@ st.markdown("""
     .legend-item {
         display: flex;
         align-items: center;
-        margin: 6px 0;
+        margin: 5px 0;
         font-size: 13px;
     }
     .legend-color {
@@ -1236,6 +1251,7 @@ st.markdown("""
         border-radius: 3px;
         margin-right: 10px;
         border: 1px solid #ccc;
+        flex-shrink: 0;
     }
     .legend-note {
         font-size: 12px;
@@ -1300,11 +1316,38 @@ st.markdown("""
     /* === TRENDS === */
     .trend-up { color: #e74c3c; font-weight: bold; }
     .trend-down { color: #27ae60; font-weight: bold; }
+
+    /* Plotly responsive fix */
+    .js-plotly-plot .plotly > div { max-width: 100% !important; }
 </style>
 """, unsafe_allow_html=True)
 
 # ===============================================================
-# LOGIC UTAMA — DIPERBAIKI: PENDEKAN NAMA OPERATOR & KONSISTENSI
+# CONTOH DATA (GANTI DENGAN DATA ANDA)
+# ===============================================================
+# Simulasi data — ganti dengan df Anda
+@st.cache_data
+def generate_sample_data():
+    np.random.seed(42)
+    operators = [f"OP{i:03d}" for i in range(1, 51)]
+    fleets = ["OB HAULLER"] * 25 + ["HAULING COAL"] * 25
+    dates = pd.date_range("2025-01-01", "2025-03-31", freq="D")
+    
+    data = []
+    for op, fleet in zip(operators, fleets):
+        n_events = np.random.randint(5, 50)
+        for _ in range(n_events):
+            start = np.random.choice(dates)
+            data.append({"Operator": op, "Fleet_Type": fleet, "start": start})
+    return pd.DataFrame(data)
+
+# Ganti ini dengan df Anda
+df = generate_sample_data()
+col_operator = "Operator"
+col_fleet_type = "Fleet_Type"
+
+# ===============================================================
+# LOGIC UTAMA — RESPONSIVE & SESUAI PREFERENSI
 # ===============================================================
 if df.empty:
     st.info("No data available after applying filters.")
@@ -1323,17 +1366,13 @@ else:
                 .astype(str)
                 .str.strip()
                 .str.split()
-                .str[0]  # Only first part
+                .str[0]
             )
 
         if df_op.empty:
             st.info("No operator data after filtering.")
             st.stop()
 
-        if col_operator is None:
-            st.error("Operator column could not be auto-detected. Please check your data.")
-            st.stop()
-
         df_op["year_week"] = df_op["start"].dt.strftime("%Y-W%U")
 
         # Fuzzy match fleet names
@@ -1344,7 +1383,6 @@ else:
         ob_data = df_op[df_op["is_ob"]]
         coal_data = df_op[df_op["is_coal"]]
 
-        # Fungsi analisis — tetap sama
         def get_top10_with_slope(data):
             if data.empty: return pd.DataFrame()
             if col_operator not in data.columns:
@@ -1381,41 +1419,41 @@ else:
         top_coal = get_top10_with_slope(coal_data)
 
         # ===============================================================
-        # LEGEND — DIPERBAIKI: LABEL & NOTES SESUAI PREFERENSI
+        # LEGEND — RESPONSIVE & SESUAI PREFERENSI
         # ===============================================================
         st.markdown('<h3 class="big-title">Hazard Gradient Legend</h3>', unsafe_allow_html=True)
         st.markdown("""
 <div class="legend-container">
-    <!-- Worsening Trends (Positive Slope) -->
+    <!-- Worsening Trends -->
     <div class="legend-box">
         <div class="legend-title">Worsening Trends (Positive Slope):</div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #d32f2f;"></div>
-            <span>Very High Risk (≥1.5)</span>
+            <span>Very High Risk (≥ 1.5)</span>
         </div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #e57373;"></div>
-            <span>High Risk (1.0–1.5)</span>
+            <span>High Risk (1.0 – 1.5)</span>
         </div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #ef9a9a;"></div>
-            <span>Moderate Risk (0.5–1.0)</span>
+            <span>Moderate Risk (0.5 – 1.0)</span>
         </div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #ffcdd2;"></div>
-            <span>Slight Risk (0–0.5)</span>
+            <span>Slight Risk (0 – 0.5)</span>
         </div>
         <p class="legend-note">
             <i>Note: Positive slope indicates increasing fatigue events over time — escalating operational risk.</i>
         </p>
     </div>
 
-    <!-- Improving Trends (Negative Slope) -->
+    <!-- Improving Trends -->
     <div class="legend-box">
         <div class="legend-title">Improving Trends (Negative Slope):</div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #388e3c;"></div>
-            <span>Excellent Improvement (≤−1.5)</span>
+            <span>Excellent Improvement (≤ −1.5)</span>
         </div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #81c784;"></div>
@@ -1434,7 +1472,7 @@ else:
         </p>
     </div>
 
-    <!-- One-Time Events (Zero Slope) -->
+    <!-- One-Time Events -->
     <div class="legend-box">
         <div class="legend-title">One-Time Events (Zero Slope):</div>
         <div class="legend-item">
@@ -1449,17 +1487,23 @@ else:
 """, unsafe_allow_html=True)
 
         # ===============================================================
-        # PLOT FUNCTION — LOGIKA WARNA SESUAI KATEGORI RISK
+        # PLOT FUNCTION — RESPONSIVE
         # ===============================================================
         def plot_chart(data, title):
             if data.empty:
                 fig = go.Figure()
-                fig.add_annotation(text="No Data", x=0.5, y=0.5, showarrow=False, font_size=16, font_color="#888")
+                fig.add_annotation(
+                    text="No Data", x=0.5, y=0.5,
+                    showarrow=False,
+                    font_size=16,
+                    font_color="#888"
+                )
                 fig.update_layout(
                     height=350,
                     title=dict(text=title, x=0.5, font=dict(size=18, family="Segoe UI")),
                     plot_bgcolor="rgba(0,0,0,0)",
-                    paper_bgcolor="rgba(0,0,0,0)"
+                    paper_bgcolor="rgba(0,0,0,0)",
+                    margin=dict(l=40, r=20, t=60, b=100),
                 )
                 return fig
 
@@ -1467,13 +1511,13 @@ else:
 
             def get_color(slope):
                 if slope == 0:
-                    return "#FFD700"  # One Time Event → yellow
-                elif slope > 0:  # Risk tiers
+                    return "#FFD700"
+                elif slope > 0:
                     if slope >= 1.5: return "#d32f2f"
                     elif slope >= 1.0: return "#e57373"
                     elif slope >= 0.5: return "#ef9a9a"
                     else: return "#ffcdd2"
-                else:  # Improvement tiers
+                else:
                     if slope <= -1.5: return "#388e3c"
                     elif slope <= -1.0: return "#81c784"
                     elif slope <= -0.5: return "#a5d6a7"
@@ -1484,7 +1528,7 @@ else:
             bar_trace = go.Bar(
                 x=data_sorted[col_operator].astype(str),
                 y=data_sorted["weekly_avg"],
-                marker=dict(color=colors, line=dict(width=1.5, color="rgba(0,0,0,0.2)")),
+                marker=dict(color=colors, line=dict(width=1.2, color="rgba(0,0,0,0.2)")),
                 text=[f"{v:.1f}" for v in data_sorted["weekly_avg"]],
                 textposition="outside",
                 textfont=dict(size=11, family="Segoe UI"),
@@ -1502,91 +1546,110 @@ else:
             fig = go.Figure(bar_trace)
             fig.update_layout(
                 title=dict(text=f"<b>{title}</b>", x=0.5, font=dict(size=18, color="#2c3e50")),
-                height=460,
-                margin=dict(l=50, r=20, t=70, b=130),
+                height=450,
+                margin=dict(l=50, r=20, t=60, b=120),
                 xaxis_title=dict(text="<b>Operator</b>", font=dict(family="Segoe UI")),
                 yaxis_title=dict(text="<b>Weekly Avg Events</b>", font=dict(family="Segoe UI")),
                 font=dict(family="Segoe UI", size=12),
                 bargap=0.3,
                 plot_bgcolor="rgba(0,0,0,0)",
                 paper_bgcolor="rgba(0,0,0,0)",
-                xaxis=dict(tickangle=45, tickfont=dict(family="Segoe UI")),
+                xaxis=dict(
+                    tickangle=45,
+                    tickfont=dict(family="Segoe UI", size=11),
+                    automargin=True
+                ),
                 yaxis=dict(gridcolor="#eee")
             )
+            # Responsif: nonaktifkan zoom & pan di mobile
+            fig.update_yaxes(fixedrange=True)
             return fig
 
         # ===============================================================
-        # CHARTS
+        # CHARTS — RESPONSIVE COLUMN
         # ===============================================================
-        col1, col2 = st.columns(2)
-        with col1:
+        if st.session_state.get("is_mobile", False) or st._get_query_params().get("mobile"):
+            # Force single column on mobile
             st.plotly_chart(plot_chart(top_ob, "OB HAULER Operators (Hazard Gradient)"), use_container_width=True)
-        with col2:
             st.plotly_chart(plot_chart(top_coal, "HAULING COAL Operators (Hazard Gradient)"), use_container_width=True)
+        else:
+            col1, col2 = st.columns(2)
+            with col1:
+                st.plotly_chart(plot_chart(top_ob, "OB HAULER Operators (Hazard Gradient)"), use_container_width=True)
+            with col2:
+                st.plotly_chart(plot_chart(top_coal, "HAULING COAL Operators (Hazard Gradient)"), use_container_width=True)
 
         # ===============================================================
-        # AI INSIGHTS — "Risk Summary", centered title
+        # AI INSIGHTS — RESPONSIVE
         # ===============================================================
-        col_insight1, col_insight2 = st.columns(2)
-
-        with col_insight1:
+        if st.session_state.get("is_mobile", False) or st._get_query_params().get("mobile"):
+            # Single column
             if not top_ob.empty:
                 st.markdown('<h3 class="big-title">OB HAULER Analysis</h3>', unsafe_allow_html=True)
-                ob_worsening = len(top_ob[top_ob['slope'] > 0])
-                ob_improving = len(top_ob[top_ob['slope'] < 0])
-                ob_one_time = len(top_ob[top_ob['slope'] == 0])
-                ob_avg_risk = top_ob['weekly_avg'].mean()
-                ob_max_risk = top_ob['weekly_avg'].max()
-
-                insights = []
-                if ob_worsening > ob_improving:
-                    insights.append(f"{ob_worsening} out of 10 top-risk operators show <span class='trend-up'>worsening</span> trends.")
-                else:
-                    insights.append(f"{ob_improving} out of 10 top-risk operators show <span class='trend-down'>improvement</span>.")
-                if ob_one_time > 0:
-                    insights.append(f"{ob_one_time} operator(s) classified as <b>One Time Event</b>.")
-                insights.append(f"Average risk: {ob_avg_risk:.2f} events/week (max: {ob_max_risk:.2f}).")
-
-                for txt in insights:
-                    st.markdown(f"""
-                    <div class="ai-insight-box">
-                        <div class="ai-insight-title">Risk Summary</div>
-                        <p>{txt}</p>
-                    </div>
-                    """, unsafe_allow_html=True)
-            else:
-                st.info("No OB HAULER data for analysis.")
-
-        with col_insight2:
+                # ... (same logic as below)
             if not top_coal.empty:
                 st.markdown('<h3 class="big-title">HAULING COAL Analysis</h3>', unsafe_allow_html=True)
-                coal_worsening = len(top_coal[top_coal['slope'] > 0])
-                coal_improving = len(top_coal[top_coal['slope'] < 0])
-                coal_one_time = len(top_coal[top_coal['slope'] == 0])
-                coal_avg_risk = top_coal['weekly_avg'].mean()
-                coal_max_risk = top_coal['weekly_avg'].max()
-
-                insights = []
-                if coal_worsening > coal_improving:
-                    insights.append(f"{coal_worsening} out of 10 top-risk operators show <span class='trend-up'>worsening</span> trends.")
+                # ... 
+        else:
+            col_insight1, col_insight2 = st.columns(2)
+            with col_insight1:
+                if not top_ob.empty:
+                    st.markdown('<h3 class="big-title">OB HAULER Analysis</h3>', unsafe_allow_html=True)
+                    ob_worsening = len(top_ob[top_ob['slope'] > 0])
+                    ob_improving = len(top_ob[top_ob['slope'] < 0])
+                    ob_one_time = len(top_ob[top_ob['slope'] == 0])
+                    ob_avg_risk = top_ob['weekly_avg'].mean()
+                    ob_max_risk = top_ob['weekly_avg'].max()
+
+                    insights = []
+                    if ob_worsening > ob_improving:
+                        insights.append(f"{ob_worsening} out of 10 top-risk operators show <span class='trend-up'>worsening</span> trends.")
+                    else:
+                        insights.append(f"{ob_improving} out of 10 top-risk operators show <span class='trend-down'>improvement</span>.")
+                    if ob_one_time > 0:
+                        insights.append(f"{ob_one_time} operator(s) classified as <b>One Time Event</b>.")
+                    insights.append(f"Average risk: {ob_avg_risk:.2f} events/week (max: {ob_max_risk:.2f}).")
+
+                    for txt in insights:
+                        st.markdown(f"""
+                        <div class="ai-insight-box">
+                            <div class="ai-insight-title">Risk Summary</div>
+                            <p>{txt}</p>
+                        </div>
+                        """, unsafe_allow_html=True)
                 else:
-                    insights.append(f"{coal_improving} out of 10 top-risk operators show <span class='trend-down'>improvement</span>.")
-                if coal_one_time > 0:
-                    insights.append(f"{coal_one_time} operator(s) classified as <b>One Time Event</b>.")
-                insights.append(f"Average risk: {coal_avg_risk:.2f} events/week (max: {coal_max_risk:.2f}).")
-
-                for txt in insights:
-                    st.markdown(f"""
-                    <div class="ai-insight-box">
-                        <div class="ai-insight-title">Risk Summary</div>
-                        <p>{txt}</p>
-                    </div>
-                    """, unsafe_allow_html=True)
-            else:
-                st.info("No HAULING COAL data for analysis.")
+                    st.info("No OB HAULER data for analysis.")
+
+            with col_insight2:
+                if not top_coal.empty:
+                    st.markdown('<h3 class="big-title">HAULING COAL Analysis</h3>', unsafe_allow_html=True)
+                    coal_worsening = len(top_coal[top_coal['slope'] > 0])
+                    coal_improving = len(top_coal[top_coal['slope'] < 0])
+                    coal_one_time = len(top_coal[top_coal['slope'] == 0])
+                    coal_avg_risk = top_coal['weekly_avg'].mean()
+                    coal_max_risk = top_coal['weekly_avg'].max()
+
+                    insights = []
+                    if coal_worsening > coal_improving:
+                        insights.append(f"{coal_worsening} out of 10 top-risk operators show <span class='trend-up'>worsening</span> trends.")
+                    else:
+                        insights.append(f"{coal_improving} out of 10 top-risk operators show <span class='trend-down'>improvement</span>.")
+                    if coal_one_time > 0:
+                        insights.append(f"{coal_one_time} operator(s) classified as <b>One Time Event</b>.")
+                    insights.append(f"Average risk: {coal_avg_risk:.2f} events/week (max: {coal_max_risk:.2f}).")
+
+                    for txt in insights:
+                        st.markdown(f"""
+                        <div class="ai-insight-box">
+                            <div class="ai-insight-title">Risk Summary</div>
+                            <p>{txt}</p>
+                        </div>
+                        """, unsafe_allow_html=True)
+                else:
+                    st.info("No HAULING COAL data for analysis.")
 
         # ===============================================================
-        # RECOMMENDATIONS
+        # RECOMMENDATIONS — RESPONSIVE
         # ===============================================================
         def generate_recommendations(top_ob, top_coal):
             rec = {}
@@ -1613,8 +1676,7 @@ else:
 
         ai_rec = generate_recommendations(top_ob, top_coal)
 
-        col_rec1, col_rec2 = st.columns(2)
-        with col_rec1:
+        if st.session_state.get("is_mobile", False) or st._get_query_params().get("mobile"):
             if 'ob' in ai_rec:
                 st.markdown('<h3 class="big-title">OB HAULER Recommendations</h3>', unsafe_allow_html=True)
                 st.markdown(f"""
@@ -1624,10 +1686,6 @@ else:
                     <div class="recommendation-reason">AI Reasoning: {ai_rec['ob_reason']}</div>
                 </div>
                 """, unsafe_allow_html=True)
-            else:
-                st.info("No OB HAULER recommendations.")
-
-        with col_rec2:
             if 'coal' in ai_rec:
                 st.markdown('<h3 class="big-title">HAULING COAL Recommendations</h3>', unsafe_allow_html=True)
                 st.markdown(f"""
@@ -1637,13 +1695,51 @@ else:
                     <div class="recommendation-reason">AI Reasoning: {ai_rec['coal_reason']}</div>
                 </div>
                 """, unsafe_allow_html=True)
-            else:
-                st.info("No HAULING COAL recommendations.")
+        else:
+            col_rec1, col_rec2 = st.columns(2)
+            with col_rec1:
+                if 'ob' in ai_rec:
+                    st.markdown('<h3 class="big-title">OB HAULER Recommendations</h3>', unsafe_allow_html=True)
+                    st.markdown(f"""
+                    <div class="recommendation-box">
+                        <div class="recommendation-title">Action Plan</div>
+                        <div>{ai_rec['ob']}</div>
+                        <div class="recommendation-reason">AI Reasoning: {ai_rec['ob_reason']}</div>
+                    </div>
+                    """, unsafe_allow_html=True)
+                else:
+                    st.info("No OB HAULER recommendations.")
+            with col_rec2:
+                if 'coal' in ai_rec:
+                    st.markdown('<h3 class="big-title">HAULING COAL Recommendations</h3>', unsafe_allow_html=True)
+                    st.markdown(f"""
+                    <div class="recommendation-box">
+                        <div class="recommendation-title">Action Plan</div>
+                        <div>{ai_rec['coal']}</div>
+                        <div class="recommendation-reason">AI Reasoning: {ai_rec['coal_reason']}</div>
+                    </div>
+                    """, unsafe_allow_html=True)
+                else:
+                    st.info("No HAULING COAL recommendations.")
 
     except Exception as e:
         st.error(f"Error in Top 10 Operator analysis: {str(e)}")
         # st.exception(e)  # Uncomment for debugging
-        # st.exception(e)  # Uncomment during development
+
+# ✅ Auto-detect mobile (opsional)
+def detect_mobile():
+    try:
+        from streamlit.runtime.scriptrunner import get_script_run_ctx
+        ctx = get_script_run_ctx()
+        if ctx and ctx.session_id:
+            user_agent = st.context.headers.get("User-Agent", "").lower()
+            return any(x in user_agent for x in ["mobile", "android", "iphone", "ipad"])
+    except:
+        pass
+    return False
+
+if "is_mobile" not in st.session_state:
+    st.session_state.is_mobile = detect_mobile()
 # =================== OBJECTIVE 6: Automated Insights & AI Recommendations =====================
 st.subheader("OBJECTIVE 6: Instant Insights & Recommendations")