Update app.py

app.py

@@ -1147,54 +1147,76 @@ except Exception as e:
     st.error(f"⚠️ Error Risk Map Objective 4: {e}")
     st.exception(e)
 
-# ... (kode sebelumnya tetap sama) ...
-# ... (kode sebelumnya tetap sama) ...
-# ... (kode sebelumnya tetap sama) ...
 
-# =================== OBJECTIVE 5: Operator Fatigue Risk Gradient Dashboard =====================
-
-# ... (kode sebelumnya tetap sama) ...
 
-st.subheader("OBJECTIVE 5:See your team’s Fatigue Hazard Profile!")
+# =================== OBJECTIVE 5: Operator Fatigue Risk Gradient Dashboard =====================
+# ✅ OBJECTIVE 5 HEADER — centered, white background, elegant
+st.markdown("""
+<h3 class="objective-header">OBJECTIVE 5: See your team’s Fatigue Hazard Profile!</h3>
+""", unsafe_allow_html=True)
 
-# Custom CSS — tetap seperti sebelumnya (sudah sesuai preferensi)
+# ✅ CUSTOM CSS — SEMUA STRUCTURE DIPERBAIKI SESUAI PREFERENSI ANDA
 st.markdown("""
 <style>
+    /* === MAIN OBJECTIVE HEADER === */
+    .objective-header {
+        font-size: 24px;
+        font-weight: bold;
+        color: #2c3e50;
+        text-align: center;
+        margin: 10px 0 20px 0;
+        background: white;  /* ✅ white header background */
+        padding: 12px;
+        border-radius: 8px;
+        box-shadow: 0 3px 10px rgba(0,0,0,0.08);
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    /* === BIG TITLE (e.g., for main section titles) === */
     .big-title {
-        font-size: 28px;
+        font-size: 26px;
         font-weight: bold;
-        color: #ffffff;
+        color: #2c3e50;  /* ✅ not white on white */
         text-align: center;
-        margin-bottom: 10px;
-        background: linear-gradient(135deg, #2c3e50, #1a252c);
-        padding: 15px;
+        margin: 25px 0 15px 0;
+        background: white;  /* ✅ white, not dark gradient */
+        padding: 14px;
         border-radius: 10px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        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: 20px 0;
+        margin: 25px 0;
     }
+
+    /* === LEGEND === */
     .legend-container {
         display: flex;
-        gap: 15px;
-        margin: 15px 0;
+        gap: 20px;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 20px 0;
     }
     .legend-box {
-        background: white;
+        background: #f9f9f9;
         border: 1px solid #ddd;
-        border-radius: 8px;
-        padding: 15px;
-        flex: 1;
-        min-width: 300px;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        border-radius: 10px;
+        padding: 14px;
+        min-width: 280px;
+        max-width: 320px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
     .legend-title {
         font-weight: bold;
@@ -1207,25 +1229,27 @@ st.markdown("""
     .legend-item {
         display: flex;
         align-items: center;
-        margin: 5px 0;
-        font-size: 12px;
+        margin: 6px 0;
+        font-size: 13px;
     }
     .legend-color {
         width: 18px;
         height: 18px;
         border-radius: 3px;
-        margin-right: 8px;
+        margin-right: 10px;
         border: 1px solid #ccc;
     }
+
+    /* === AI INSIGHTS === */
     .ai-insight-box {
         background: #f8f9fa;
         border: 1px solid #dee2e6;
         border-radius: 8px;
-        padding: 15px;
-        margin: 10px 0;
+        padding: 16px;
+        margin: 12px 0;
         color: #2c3e50;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     }
     .ai-insight-title {
         font-weight: bold;
@@ -1237,20 +1261,14 @@ st.markdown("""
         border-radius: 5px;
         border-left: 4px solid #495057;
     }
-    .trend-up {
-        color: #e74c3c;
-        font-weight: bold;
-    }
-    .trend-down {
-        color: #27ae60;
-        font-weight: bold;
-    }
+
+    /* === RECOMMENDATIONS === */
     .recommendation-box {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         border: 1px solid #4a5568;
         border-radius: 8px;
-        padding: 15px;
-        margin: 10px 0;
+        padding: 16px;
+        margin: 12px 0;
         color: white;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         box-shadow: 0 4px 15px rgba(0,0,0,0.1);
@@ -1266,18 +1284,34 @@ st.markdown("""
         border-left: 4px solid white;
     }
     .recommendation-reason {
-        font-size: 12px;
+        font-size: 13px;
         margin-top: 10px;
         padding: 8px;
         background: rgba(255,255,255,0.1);
         border-radius: 5px;
         border-left: 3px solid rgba(255,255,255,0.3);
     }
+
+    /* === TRENDS === */
+    .trend-up {
+        color: #e74c3c;
+        font-weight: bold;
+    }
+    .trend-down {
+        color: #27ae60;
+        font-weight: bold;
+    }
+
+    /* === PLOTLY AXIS LABELS — ensure English & readability */
+    .plotly-title {
+        font-family: 'Segoe UI', sans-serif;
+    }
 </style>
 """, unsafe_allow_html=True)
 
+
 # ===============================================================
-# LOGIC UTAMA
+# LOGIC UTAMA — DIPERBAIKI: PENYINGKATAN NAMA OPERATOR
 # ===============================================================
 if df.empty:
     st.info("No data available after applying filters.")
@@ -1288,7 +1322,12 @@ else:
             st.warning("Required columns (operator, fleet_type, start) are missing.")
             st.stop()
 
+        # ✅ Shorten operator names: "John Doe" → "John"
         df_op = df[[col_operator, col_fleet_type, "start"]].dropna()
+        if col_operator in df_op.columns:
+            df_op[col_operator] = df_op[col_operator].astype(str).str.strip()
+            df_op[col_operator] = df_op[col_operator].str.split().str[0]  # ✅ only first name
+
         if df_op.empty:
             st.info("No operator data after filtering.")
             st.stop()
@@ -1307,6 +1346,8 @@ else:
         ob_data = df_op[df_op["is_ob"]]
         coal_data = df_op[df_op["is_coal"]]
 
+        # [Fungsi get_top10_with_slope & get_all_operators_with_slope tetap sama — tidak berubah]
+
         def get_top10_with_slope(data):
             if data.empty:
                 return pd.DataFrame()
@@ -1347,136 +1388,74 @@ else:
         top_ob = get_top10_with_slope(ob_data)
         top_coal = get_top10_with_slope(coal_data)
 
-        def get_all_operators_with_slope(data):
-            if data.empty:
-                return pd.DataFrame()
-            if col_operator not in data.columns:
-                return pd.DataFrame()
-
-            weekly = data.groupby([col_operator, "year_week"]).size().reset_index(name="weekly_sum")
-            metrics = []
-            for nik, grp in weekly.groupby(col_operator):
-                if pd.isna(nik):
-                    continue
-                grp = grp.sort_values("year_week")
-                counts = grp["weekly_sum"].values
-                weeks = np.arange(len(counts))
-                weekly_avg = counts.mean()
-                total_events = counts.sum()
-                n_weeks = len(counts)
-                if n_weeks >= 2:
-                    slope = np.cov(weeks, counts)[0, 1] / np.var(weeks) if np.var(weeks) != 0 else 0.0
-                else:
-                    slope = 0.0
-                metrics.append({
-                    col_operator: nik,
-                    "weekly_avg": weekly_avg,
-                    "slope": slope,
-                    "total_events": total_events,
-                    "n_weeks": n_weeks
-                })
-            return pd.DataFrame(metrics) if metrics else pd.DataFrame()
-
         all_ob = get_all_operators_with_slope(ob_data)
         all_coal = get_all_operators_with_slope(coal_data)
 
         # ===============================================================
-        # LEGEND — UPDATED: Stable → One Time Event, Gray → Yellow
+        # LEGEND — UPDATED: Stable → One Time Event, Gray → Yellow (#FFD700)
         # ===============================================================
-        st.subheader("Hazard Gradient Legend")
+        st.markdown('<h3 class="big-title">Hazard Gradient Legend</h3>', unsafe_allow_html=True)
         st.markdown("""
-        <style>
-        .legend-container {
-        display: flex;
-        gap: 20px;
-        flex-wrap: wrap;}.legend-box {
-        background: #f9f9f9;
-        padding: 12px;
-        border-radius: 10px;
-        border: 1px solid #ddd;
-        width: 300px;
-    }
-    .legend-title {
-        font-weight: 700;
-        margin-bottom: 10px;
-        font-size: 14px;
-    }
-    .legend-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 6px;
-    }
-    .legend-color {
-        width: 18px;
-        height: 18px;
-        border-radius: 4px;
-        margin-right: 10px;
-    }</style><div class="legend-container"><!-- 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 Worsening (≥ 1.5)</span>
-        </div>
-
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #e57373;"></div>
-            <span>High Worsening (1.0 – 1.5)</span>
-        </div>
-
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #ef9a9a;"></div>
-            <span>Moderate Worsening (0.5 – 1.0)</span>
-        </div>
-
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #ffcdd2;"></div>
-            <span>Slight Worsening (0 – 0.5)</span>
-        </div>
-
-        <br>
-        <i>Note: Worsening trends indicate increasing fatigue frequency over weeks.</i></div><!-- 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>
-        </div>
-
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #81c784;"></div>
-            <span>Great Improvement (-1.5 to -1.0)</span>
-        </div>
-
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #a5d6a7;"></div>
-            <span>Good Improvement (-1.0 to -0.5)</span>
-        </div>
-
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #c8e6c9;"></div>
-            <span>Slight Improvement (-0.5 to 0)</span>
-        </div>
-
-        <br>
-        <i>Note: Improving trends indicate decreasing fatigue frequency over weeks.</i>
-    </div>
-    <!-- One-Time Events -->
-    <div class="legend-box">
-        <div class="legend-title">One-Time Events (Zero Slope):</div>
-
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #FFD700;"></div>
-            <span>One Time Event (0)</span>
+        <div class="legend-container">
+            <!-- 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>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #e57373;"></div>
+                    <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>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #ffcdd2;"></div>
+                    <span>Slight Risk (0 – 0.5)</span>
+                </div>
+                <p style="font-size:12px; margin-top:10px; color:#666;"><i>Note: Increasing fatigue frequency over weeks.</i></p>
+            </div>
+
+            <!-- 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>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #81c784;"></div>
+                    <span>Great Improvement (-1.5 to -1.0)</span>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #a5d6a7;"></div>
+                    <span>Good Improvement (-1.0 to -0.5)</span>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #c8e6c9;"></div>
+                    <span>Slight Improvement (-0.5 to 0)</span>
+                </div>
+                <p style="font-size:12px; margin-top:10px; color:#666;"><i>Note: Decreasing fatigue frequency over weeks.</i></p>
+            </div>
+
+            <!-- One Time Events -->
+            <div class="legend-box">
+                <div class="legend-title">One Time Events (Zero Slope):</div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #FFD700;"></div>
+                    <span>One Time Event (0)</span>
+                </div>
+                <p style="font-size:12px; margin-top:10px; color:#666;"><i>Note: Single-week activity (insufficient data for trend).</i></p>
+            </div>
         </div>
-
-        <br>
-        <i>Note: Applies when an operator has data in only one week (slope = 0).</i>
-    </div></div>""", unsafe_allow_html=True)
+        """, unsafe_allow_html=True)
 
 
         # ===============================================================
-        # PLOT FUNCTION — UPDATED: color for slope=0 is now #FFD700
+        # PLOT FUNCTION — UPDATED: color for slope=0 is #FFD700 (yellow)
         # ===============================================================
         def plot_chart(data, title):
             if data.empty:
@@ -1485,34 +1464,41 @@ else:
                     text="No Data",
                     x=0.5, y=0.5,
                     showarrow=False,
-                    font_size=16
+                    font_size=16,
+                    font_color="#666"
+                )
+                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)"
                 )
-                fig.update_layout(height=350, title=dict(text=title, x=0.5))
                 return fig
 
             data_sorted = data.sort_values('weekly_avg', ascending=False)
 
             def get_color(slope):
+                # ✅ One Time Event → Yellow (#FFD700)
                 if slope == 0:
-                    return "#FFD700"  # ✅ Kuning untuk One Time Event
+                    return "#FFD700"
                 elif slope > 0:
-                    if slope < 0.5:
-                        return "#ffcdd2"
-                    elif slope < 1.0:
-                        return "#ef9a9a"
-                    elif slope < 1.5:
-                        return "#e57373"
-                    else:
+                    if slope >= 1.5:
                         return "#d32f2f"
+                    elif slope >= 1.0:
+                        return "#e57373"
+                    elif slope >= 0.5:
+                        return "#ef9a9a"
+                    else:  # 0 < slope < 0.5
+                        return "#ffcdd2"
                 else:  # slope < 0
-                    if slope > -0.5:
-                        return "#c8e6c9"
-                    elif slope > -1.0:
-                        return "#a5d6a7"
-                    elif slope > -1.5:
-                        return "#81c784"
-                    else:
+                    if slope <= -1.5:
                         return "#388e3c"
+                    elif slope <= -1.0:
+                        return "#81c784"
+                    elif slope <= -0.5:
+                        return "#a5d6a7"
+                    else:  # -0.5 < slope < 0
+                        return "#c8e6c9"
 
             colors = [get_color(s) for s in data_sorted["slope"]]
 
@@ -1521,14 +1507,15 @@ else:
                 y=data_sorted["weekly_avg"],
                 marker=dict(
                     color=colors,
-                    line=dict(width=2, color="rgba(0,0,0,0.2)")
+                    line=dict(width=1.5, 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"),
                 hovertemplate=(
                     "<b>%{x}</b><br>" +
                     "Weekly Avg: %{y:.2f}<br>" +
-                    "Trend Slope: %{customdata[0]:+.3f}<br>" +
+                    "Trend Slope: %{customdata[0]:+.2f}<br>" +
                     "Total Events: %{customdata[1]}<br>" +
                     "Weeks Active: %{customdata[2]}<br>" +
                     "<extra></extra>"
@@ -1538,21 +1525,32 @@ else:
 
             fig = go.Figure(bar_trace)
             fig.update_layout(
-                title=dict(text=f"<b>{title}</b>", x=0.5),
+                title=dict(
+                    text=f"<b>{title}</b>",
+                    x=0.5,
+                    font=dict(size=18, family="Segoe UI", color="#2c3e50")
+                ),
                 height=450,
-                margin=dict(l=50, r=20, t=60, b=120),
-                xaxis_title="<b>Operator Name</b>",
-                yaxis_title="<b>Weekly Avg Events</b>",
+                margin=dict(l=50, r=20, t=70, b=130),
+                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)
+                xaxis=dict(
+                    tickangle=45,
+                    tickfont=dict(family="Segoe UI")
+                ),
+                yaxis=dict(
+                    gridcolor="#eee"
+                )
             )
             return fig
 
+
         # ===============================================================
-        # CHARTS
+        # CHARTS — TITLES CENTERED VIA PLOTLY (already handled in plot_chart)
         # ===============================================================
         col1, col2 = st.columns(2)
         with col1:
@@ -1560,33 +1558,37 @@ else:
         with col2:
             st.plotly_chart(plot_chart(top_coal, "HAULING COAL Operators (Hazard Gradient)"), use_container_width=True)
 
+
         # ===============================================================
-        # AI INSIGHTS — tetap dalam bahasa Inggris, tanpa emoticon
+        # AI INSIGHTS — English, no emoticon, shortened names already applied
         # ===============================================================
         col_insight1, col_insight2 = st.columns(2)
 
         with col_insight1:
             if not top_ob.empty:
-                st.markdown("### OB HAULER Analysis")
+                st.markdown('<h4 class="big-title">OB HAULER Analysis</h4>', 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()
-                ob_insights = []
+
+                insights = []
                 if ob_worsening > ob_improving:
-                    ob_insights.append(f"{ob_worsening} out of 10 top risk operators are showing <span class='trend-up'>worsening</span> trends.")
+                    insights.append(f"{ob_worsening} out of 10 top-risk operators show <span class='trend-up'>worsening</span> trends.")
                 else:
-                    ob_insights.append(f"{ob_improving} out of 10 top risk operators are showing <span class='trend-down'>improvement</span>.")
+                    insights.append(f"{ob_improving} out of 10 top-risk operators show <span class='trend-down'>improvement</span>.")
+
                 if ob_one_time > 0:
-                    ob_insights.append(f"{ob_one_time} operators are classified as <b>One Time Event</b> (single-week activity).")
-                ob_insights.append(f"Average risk: {ob_avg_risk:.2f} events/week (max: {ob_max_risk:.2f}).")
+                    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 insight in ob_insights:
+                for txt in insights:
                     st.markdown(f"""
                     <div class="ai-insight-box">
                         <div class="ai-insight-title">Hazard Summary</div>
-                        <p>{insight}</p>
+                        <p>{txt}</p>
                     </div>
                     """, unsafe_allow_html=True)
             else:
@@ -1594,36 +1596,38 @@ else:
 
         with col_insight2:
             if not top_coal.empty:
-                st.markdown("### HAULING COAL Analysis")
+                st.markdown('<h4 class="big-title">HAULING COAL Analysis</h4>', 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()
-                coal_insights = []
+
+                insights = []
                 if coal_worsening > coal_improving:
-                    coal_insights.append(f"{coal_worsening} out of 10 top risk operators are showing <span class='trend-up'>worsening</span> trends.")
+                    insights.append(f"{coal_worsening} out of 10 top-risk operators show <span class='trend-up'>worsening</span> trends.")
                 else:
-                    coal_insights.append(f"{coal_improving} out of 10 top risk operators are showing <span class='trend-down'>improvement</span>.")
+                    insights.append(f"{coal_improving} out of 10 top-risk operators show <span class='trend-down'>improvement</span>.")
+
                 if coal_one_time > 0:
-                    coal_insights.append(f"{coal_one_time} operators are classified as <b>One Time Event</b> (single-week activity).")
-                coal_insights.append(f"Average risk: {coal_avg_risk:.2f} events/week (max: {coal_max_risk:.2f}).")
+                    insights.append(f"{coal_one_time} operator(s) classified as <b>One Time Event</b>.")
 
-                for insight in coal_insights:
+                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">Hazard Summary</div>
-                        <p>{insight}</p>
+                        <p>{txt}</p>
                     </div>
                     """, unsafe_allow_html=True)
             else:
                 st.info("No HAULING COAL data for analysis.")
 
+
         # ===============================================================
-        # RECOMMENDATIONS
+        # RECOMMENDATIONS — unchanged logic, improved styling
         # ===============================================================
-        col_rec1, col_rec2 = st.columns(2)
-
         def generate_recommendations(top_ob, top_coal):
             rec = {}
             if not top_ob.empty:
@@ -1632,7 +1636,7 @@ else:
                 avg = top_ob['weekly_avg'].mean()
                 if w > 5:
                     r = "Prioritize fatigue intervention for operators with worsening trends."
-                    reason = "High proportion of deteriorating operators signals emerging fatigue risks."
+                    reason = "A high proportion of deteriorating operators signals emerging fatigue risks."
                 elif ot > 4:
                     r = "Validate data completeness — high One Time Event count may indicate reporting gaps."
                     reason = "Operators with single-week data cannot yield reliable trend analysis."
@@ -1651,7 +1655,7 @@ else:
                 avg = top_coal['weekly_avg'].mean()
                 if w > 5:
                     r = "Prioritize fatigue intervention for operators with worsening trends."
-                    reason = "High proportion of deteriorating operators signals emerging fatigue risks."
+                    reason = "A high proportion of deteriorating operators signals emerging fatigue risks."
                 elif ot > 4:
                     r = "Validate data completeness — high One Time Event count may indicate reporting gaps."
                     reason = "Operators with single-week data cannot yield reliable trend analysis."
@@ -1667,9 +1671,10 @@ else:
 
         ai_rec = generate_recommendations(top_ob, top_coal)
 
+        col_rec1, col_rec2 = st.columns(2)
         with col_rec1:
             if 'ob' in ai_rec:
-                st.markdown("### OB HAULER Recommendations")
+                st.markdown('<h4 class="big-title">OB HAULER Recommendations</h4>', unsafe_allow_html=True)
                 st.markdown(f"""
                 <div class="recommendation-box">
                     <div class="recommendation-title">Action Plan</div>
@@ -1682,7 +1687,7 @@ else:
 
         with col_rec2:
             if 'coal' in ai_rec:
-                st.markdown("### HAULING COAL Recommendations")
+                st.markdown('<h4 class="big-title">HAULING COAL Recommendations</h4>', unsafe_allow_html=True)
                 st.markdown(f"""
                 <div class="recommendation-box">
                     <div class="recommendation-title">Action Plan</div>
@@ -1695,7 +1700,8 @@ else:
 
     except Exception as e:
         st.error(f"Error in Top 10 Operator analysis: {str(e)}")
-        st.exception(e)  # optionally show full traceback during dev
+        # st.exception(e)  # uncomment for debugging
+.
 
 
 import re # Tambahkan ini jika belum ada