Update app.py

app.py

@@ -1659,492 +1659,192 @@ else:
         st.exception(e)  # optionally show full traceback during dev
 
 
-# =================== OBJECTIVE 6: Automated Insights & AI Recommendations =====================
-st.markdown(
-    '''
-    <div style="
-        text-align: center;
-        font-size: 1.5em;
-        font-weight: bold;
-        margin-bottom: 20px;
-        color: #2c3e50;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    ">
-        OBJECTIVE 6: Instant Insights & Recommendations
-    </div>
-    ''',
-    unsafe_allow_html=True
-)
 
-# Helper: format % in red (hazard indicator)
-def format_red_pct(value):
-    return f'<span style="color: #d32f2f; font-weight: bold;">{value:.1f}%</span>'
+# =================== OBJECTIVE 6: Automated Insights & AI Recommendations =====================
+st.subheader("OBJECTIVE 6: Instant Insights & Recommendations")
 
-# Split layout
+# Membagi tampilan menjadi dua kolom
 col_insights, col_recs = st.columns(2)
 
-# ================= LEFT COLUMN: Insights =================
+# Kolom kiri: Insights by Advanced Analytics
 with col_insights:
-    st.markdown(
-        '''
-        <div style="
-            text-align: center;
-            font-size: 1.3em;
-            font-weight: bold;
-            margin-bottom: 15px;
-            color: #2c3e50;
-        ">Insights by Advanced Analytics</div>
-        ''',
-        unsafe_allow_html=True
-    )
+    st.subheader("Insights by Advanced Analytics")
 
-    # 1. Critical Hour Analysis (3–6 AM)
-    critical_hours = [3, 4, 5, 6]  # sesuai label "3-6 AM"
+    # 1. Critical Hour Analysis (2-5 AM)
+    critical_hours = [2, 3, 4, 5]
     critical_alerts = df[df['hour'].isin(critical_hours)]
     critical_pct = (len(critical_alerts) / len(df)) * 100 if len(df) > 0 else 0
 
-    st.markdown(f"**Critical Hour Risk (3–6 AM)**", unsafe_allow_html=True)
+    st.markdown(f"**Critical Hour Risk (3-6 AM)**")
+    # Use conditional formatting for background color
     bg_color = "#ffcccc" if critical_pct > 50 else "#ffebcc" if critical_pct > 25 else "#ffffcc" if critical_pct > 10 else "#e6ffe6"
-    st.markdown(
-        f'''
-        <div style="
-            background-color: {bg_color};
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 12px;
-            font-family: 'Segoe UI', sans-serif;
-        ">
-            Critical Hour Alerts: <b>{len(critical_alerts)}</b> ({format_red_pct(critical_pct)} of total alerts)
-        </div>
-        ''',
-        unsafe_allow_html=True
-    )
-
-    if critical_pct > 10:
-        st.markdown(
-            f'''
-            <div style="
-                background-color: #fff8e1;
-                color: #5d4037;
-                padding: 10px;
-                border-radius: 5px;
-                border-left: 4px solid #ff9800;
-                margin-bottom: 15px;
-                font-family: 'Segoe UI', sans-serif;
-            ">
-                ⚠️ <strong>High risk:</strong> {format_red_pct(critical_pct)} of fatigue alerts occur during critical hours (3–6 AM). 
-                This is a known circadian dip period.
-            </div>
-            ''',
-            unsafe_allow_html=True
-        )
+    st.markdown(f'<div style="background-color: {bg_color}; padding: 10px; border-radius: 5px;">Critical Hour Alerts: {len(critical_alerts)} ({critical_pct:.1f}% of total alerts)</div>', unsafe_allow_html=True)
+    if critical_pct > 10:  # If more than 10% of alerts happen in critical hours
+        st.warning(f"High risk: {critical_pct:.1f}% of fatigue alerts occur during critical hours (3-6 AM). This is a known circadian dip period.")
     else:
-        st.markdown(
-            f'''
-            <div style="
-                background-color: #e8f5e8;
-                color: #2e7d32;
-                padding: 10px;
-                border-radius: 5px;
-                border-left: 4px solid #4caf50;
-                margin-bottom: 15px;
-                font-family: 'Segoe UI', sans-serif;
-            ">
-                ✓ <strong>Acceptable:</strong> {format_red_pct(critical_pct)} of alerts occur during critical hours. 
-                This is within acceptable range.
-            </div>
-            ''',
-            unsafe_allow_html=True
-        )
+        st.info(f"{critical_pct:.1f}% of alerts occur during critical hours. This is within acceptable range.")
 
-    # 2. High-Speed Fatigue Analysis
-    if col_speed and col_speed in df.columns and not df[col_speed].dropna().empty:
-        high_speed_threshold = df[col_speed].quantile(0.75)
-        high_speed_fatigue = df[df[col_speed] >= high_speed_threshold]
+    # 2. High-Speed Fatigue Analysis (Environmental Risk)
+    if col_speed and col_speed in df.columns:
+        high_speed_threshold = df[col_speed].quantile(0.75) if not df[col_speed].dropna().empty else 0  # Handle empty series
+        high_speed_fatigue = df[df[col_speed] >= high_speed_threshold] if high_speed_threshold > 0 else pd.DataFrame()
         high_speed_pct = (len(high_speed_fatigue) / len(df)) * 100 if len(df) > 0 else 0
-
-        st.markdown(f"**High-Speed Fatigue Risk (Speed > {high_speed_threshold:.0f} km/h)**", unsafe_allow_html=True)
-        st.markdown(
-            f'''
-            <div style="
-                background-color: #f9f9f9;
-                padding: 10px;
-                border-radius: 5px;
-                border: 1px solid #e0e0e0;
-                margin-bottom: 12px;
-                font-family: 'Segoe UI', sans-serif;
-            ">
-                High-Speed Fatigue Events: <span style="color: #1a73e8; font-weight: bold;">{len(high_speed_fatigue)}</span> 
-                ({format_red_pct(high_speed_pct)} of total alerts)
-            </div>
-            ''',
-            unsafe_allow_html=True
-        )
-
-        if high_speed_pct > 20:
-            st.markdown(
-                f'''
-                <div style="
-                    background-color: #fff8e1;
-                    color: #5d4037;
-                    padding: 10px;
-                    border-radius: 5px;
-                    border-left: 4px solid #ff9800;
-                    margin-bottom: 15px;
-                    font-family: 'Segoe UI', sans-serif;
-                ">
-                    ⚠️ <strong>High risk:</strong> {format_red_pct(high_speed_pct)} of fatigue alerts occur at high speeds. 
-                    This increases accident severity potential.
-                </div>
-                ''',
-                unsafe_allow_html=True
-            )
+        
+        st.markdown(f"**High-Speed Fatigue Risk (Speed > {high_speed_threshold:.0f} km/h)**")
+        st.metric("High-Speed Fatigue Events", f"{len(high_speed_fatigue)}", f"{high_speed_pct:.1f}% of total alerts")
+        if high_speed_pct > 20:  # If more than 20% of alerts happen at high speed
+            st.warning(f"High risk: {high_speed_pct:.1f}% of fatigue alerts occur at high speeds. This increases accident severity potential.")
         else:
-            st.markdown(
-                f'''
-                <div style="
-                    background-color: #e8f5e8;
-                    color: #2e7d32;
-                    padding: 10px;
-                    border-radius: 5px;
-                    border-left: 4px solid #4caf50;
-                    margin-bottom: 15px;
-                    font-family: 'Segoe UI', sans-serif;
-                ">
-                    ✓ <strong>Acceptable:</strong> {format_red_pct(high_speed_pct)} of alerts occur at high speeds. 
-                    This is within acceptable range.
-                </div>
-                ''',
-                unsafe_allow_html=True
-            )
+            st.info(f"{high_speed_pct:.1f}% of alerts occur at high speeds. This is within acceptable range.")
     else:
-        st.markdown(
-            '''
-            <div style="
-                background-color: #f1f3f4;
-                padding: 10px;
-                border-radius: 5px;
-                font-style: italic;
-                color: #607d8b;
-                margin-bottom: 15px;
-            ">Speed data not available for High-Speed Fatigue Analysis.</div>
-            ''',
-            unsafe_allow_html=True
-        )
+        st.info("Speed data not available for High-Speed Fatigue Analysis.")
 
     # 3. Shift Pattern Analysis
     if col_shift and col_shift in df.columns:
-        shift_counts = df[col_shift].value_counts().sort_index()
-        st.markdown(f"**Shift Pattern Risk**", unsafe_allow_html=True)
-
+        shift_counts = df[col_shift].value_counts()
+        # shift_alerts_by_hour = df.groupby([col_shift, 'hour']).size().reset_index(name='alerts') # Tidak digunakan dalam tampilan ini
+        
+        st.markdown(f"**Shift Pattern Risk**")
         for shift_val in shift_counts.index:
-            count = shift_counts[shift_val]
-            shift_pct = (count / len(df)) * 100
-            st.markdown(
-                f'''
-                <div style="
-                    background-color: #f9f9f9;
-                    padding: 8px;
-                    border-radius: 5px;
-                    border: 1px solid #e0e0e0;
-                    margin: 6px 0;
-                    font-family: 'Segoe UI', sans-serif;
-                ">
-                    Shift {shift_val} Alerts: <span style="color: #1a73e8; font-weight: bold;">{count}</span> 
-                    ({format_red_pct(shift_pct)} of total alerts)
-                </div>
-                ''',
-                unsafe_allow_html=True
-            )
-
-            if shift_pct > 50:
-                st.markdown(
-                    f'''
-                    <div style="
-                        background-color: #fff8e1;
-                        color: #5d4037;
-                        padding: 8px;
-                        border-radius: 5px;
-                        border-left: 4px solid #ff9800;
-                        margin: 6px 0 12px 0;
-                        font-family: 'Segoe UI', sans-serif;
-                    ">
-                        ⚠️ <strong>Disproportionate risk:</strong> Shift {shift_val} has {format_red_pct(shift_pct)} alerts. 
-                        Review shift scheduling and workload.
-                    </div>
-                    ''',
-                    unsafe_allow_html=True
-                )
+            shift_pct = (shift_counts[shift_val] / len(df)) * 100
+            st.metric(f"Shift {shift_val} Alerts", f"{shift_counts[shift_val]}", f"{shift_pct:.1f}% of total alerts")
+            if shift_pct > 50:  # If one shift has more than 50% of alerts
+                st.warning(f"Shift {shift_val} has disproportionately high alerts ({shift_pct:.1f}%). Review shift scheduling and workload.")
             else:
-                st.markdown(
-                    f'''
-                    <div style="
-                        background-color: #e8f5e8;
-                        color: #2e7d32;
-                        padding: 8px;
-                        border-radius: 5px;
-                        border-left: 4px solid #4caf50;
-                        margin: 6px 0 12px 0;
-                        font-family: 'Segoe UI', sans-serif;
-                    ">
-                        ✓ <strong>Acceptable:</strong> Shift {shift_val} alert distribution is acceptable ({format_red_pct(shift_pct)}).
-                    </div>
-                    ''',
-                    unsafe_allow_html=True
-                )
+                st.info(f"Shift {shift_val} alert distribution is acceptable ({shift_pct:.1f}%).")
     else:
-        st.markdown(
-            '''
-            <div style="
-                background-color: #f1f3f4;
-                padding: 10px;
-                border-radius: 5px;
-                font-style: italic;
-                color: #607d8b;
-                margin-bottom: 15px;
-            ">Shift data not available for Shift Pattern Analysis.</div>
-            ''',
-            unsafe_allow_html=True
-        )
+        st.info("Shift data not available for Shift Pattern Analysis.")
 
-    # 4. Operator Risk Profiling (anonymized)
+    # 4. Operator Risk Profiling
     if col_operator and col_operator in df.columns:
         operator_alerts = df[col_operator].value_counts()
-        top_risk_operators = operator_alerts.head(5)
-        st.markdown(f"**High-Risk Operator Identification**", unsafe_allow_html=True)
-
+        top_risk_operators = operator_alerts.head(5)  # Top 5 operators by alerts
+        
+        st.markdown(f"**High-Risk Operator Identification**")
         for op_name, count in top_risk_operators.items():
             op_pct = (count / len(df)) * 100
-            display_name = str(op_name).split()[0] if pd.notna(op_name) else "Unknown"
-            st.markdown(
-                f'''
-                <div style="
-                    background-color: #f9f9f9;
-                    padding: 8px;
-                    border-radius: 5px;
-                    border: 1px solid #e0e0e0;
-                    margin: 6px 0;
-                    font-family: 'Segoe UI', sans-serif;
-                ">
-                    Operator: <b>{display_name}</b> — <span style="color: #1a73e8; font-weight: bold;">{count}</span> alerts 
-                    ({format_red_pct(op_pct)} of total alerts)
-                </div>
-                ''',
-                unsafe_allow_html=True
-            )
-
-            if op_pct > 5:
-                st.markdown(
-                    f'''
-                    <div style="
-                        background-color: #fff8e1;
-                        color: #5d4037;
-                        padding: 8px;
-                        border-radius: 5px;
-                        border-left: 4px solid #ff9800;
-                        margin: 6px 0 12px 0;
-                        font-family: 'Segoe UI', sans-serif;
-                    ">
-                        ⚠️ <strong>High risk:</strong> Operator {display_name} has {format_red_pct(op_pct)} of alerts. 
-                        Consider coaching or rest plan.
-                    </div>
-                    ''',
-                    unsafe_allow_html=True
-                )
+            st.metric(f"Operator: {op_name}", f"{count} alerts", f"{op_pct:.1f}% of total alerts")
+            if op_pct > 5:  # If an operator has more than 5% of all alerts
+                st.warning(f"Operator {op_name} has high fatigue risk ({op_pct:.1f}% of alerts). Consider coaching or rest plan.")
             else:
-                st.markdown(
-                    f'''
-                    <div style="
-                        background-color: #e8f5e8;
-                        color: #2e7d32;
-                        padding: 8px;
-                        border-radius: 5px;
-                        border-left: 4px solid #4caf50;
-                        margin: 6px 0 12px 0;
-                        font-family: 'Segoe UI', sans-serif;
-                    ">
-                        ✓ <strong>Acceptable:</strong> Operator {display_name} fatigue risk is within acceptable range ({format_red_pct(op_pct)}).
-                    </div>
-                    ''',
-                    unsafe_allow_html=True
-                )
+                st.info(f"Operator {op_name} fatigue risk is within acceptable range ({op_pct:.1f}%).")
     else:
-        st.markdown(
-            '''
-            <div style="
-                background-color: #f1f3f4;
-                padding: 10px;
-                border-radius: 5px;
-                font-style: italic;
-                color: #607d8b;
-                margin-bottom: 15px;
-            ">Operator data not available for Operator Risk Profiling.</div>
-            ''',
-            unsafe_allow_html=True
-        )
+        st.info("Operator data not available for Operator Risk Profiling.")
 
 
-# ================= RIGHT COLUMN: AI Recommendations =================
+# Kolom kanan: AI Recommendations
 with col_recs:
-    st.markdown(
-        '''
-        <div style="
-            text-align: center;
-            font-size: 1.3em;
-            font-weight: bold;
-            margin-bottom: 15px;
-            color: #2c3e50;
-        ">Recommendations</div>
-        ''',
-        unsafe_allow_html=True
-    )
-
+    st.subheader("Recommendations")
     ai_recs = []
+    insights_found = [] # Untuk menyimpan insight yang ditemukan
+
+    # Peak hour
+    if "hour" in df.columns and not df.empty:
+        peak_hour = df["hour"].value_counts().idxmax()
+        critical_hours = [2, 3, 4, 5]
+        if peak_hour in critical_hours:
+            insights_found.append(f" Most fatigue risk occurs at **{peak_hour}:00** — during critical circadian low period (3-6 AM). Consider enhanced monitoring.")
+        else:
+            insights_found.append(f"Most fatigue risk occurs at **{peak_hour}:00** — likely due to circadian drop.")
 
-    # 1. Critical Hour Insight → Recommendation
-    if critical_pct > 10:
-        ai_recs.append({
-            "title": "Enhance Monitoring During Circadian Low",
-            "action": "Deploy enhanced fatigue monitoring systems (e.g., EOR or real-time biometrics) specifically during 3–6 AM shifts.",
-            "data_point": f"Critical Hour Alerts: {len(critical_alerts)} ({format_red_pct(critical_pct)} of total alerts)",
-            "reason": "High alert concentration during the circadian trough (3–6 AM) significantly increases operational risk."
-        })
+    # Risk shift
+    if col_shift and not df.empty:
+        worst_shift = df[col_shift].value_counts().idxmax()
+        insights_found.append(f" Highest fatigue recorded in **Shift {worst_shift}** — review scheduling & workload.")
 
-    # 2. High-Speed Insight → Recommendation
-    if col_speed in df.columns and not df[col_speed].empty:
-        high_speed_threshold = df[col_speed].quantile(0.75)
-        high_speed_fatigue = df[df[col_speed] >= high_speed_threshold]
-        high_speed_pct = (len(high_speed_fatigue) / len(df)) * 100 if len(df) > 0 else 0
-        if high_speed_pct > 20:
+    # Worst operator
+    if col_operator and not df.empty:
+        worst_operator = df[col_operator].value_counts().idxmax()
+        insights_found.append(f" Operator at highest risk: **{worst_operator}** — suggested coaching or rest plan.")
+
+    # Duration risk
+    if "duration_sec" in df.columns and not df.empty:
+        avg_duration = df["duration_sec"].mean()
+        if not pd.isna(avg_duration) and avg_duration > 10:
+            insights_found.append(" Long fatigue event duration suggests slow response — improve alerting training.")
+
+    # Generate recommendations based on found insights
+    if insights_found:
+        # Contoh rekomendasi berdasarkan insight
+        if any("circadian low" in i.lower() for i in insights_found):
             ai_recs.append({
-                "title": "Integrate Speed & Fatigue Controls",
-                "action": "Implement speed advisory or automatic speed reduction triggers when fatigue alerts occur at high speeds.",
-                "data_point": f"High-Speed Fatigue Events: {len(high_speed_fatigue)} ({format_red_pct(high_speed_pct)} of total alerts)",
-                "reason": "Fatigue at high speed multiplies collision severity; proactive speed management reduces fatality risk."
+                "recommendation": "Deploy enhanced fatigue monitoring systems (e.g., EOR) specifically during 3-6 AM shifts.",
+                "data_point": f"Critical Hour Alerts: {len(critical_alerts)} ({critical_pct:.1f}% of total alerts)",
+                "reason": "High percentage of alerts occurring during the known circadian low period (3-6 AM) indicates increased risk during these hours."
             })
-
-    # 3. Shift Imbalance → Recommendation
-    if col_shift in df.columns:
-        shift_counts = df[col_shift].value_counts()
-        worst_shift = shift_counts.idxmax()
-        worst_pct = (shift_counts[worst_shift] / len(df)) * 100
-        if worst_pct > 50:
+        if any("shift" in i.lower() for i in insights_found):
             ai_recs.append({
-                "title": "Rebalance Shift Workload",
-                "action": "Review shift rotation policies, rest intervals, and task allocation for Shift {worst_shift}.",
-                "data_point": f"Shift {worst_shift} Alerts: {shift_counts[worst_shift]} ({format_red_pct(worst_pct)} of total alerts)",
-                "reason": f"Overconcentration of fatigue events in one shift suggests systemic scheduling or ergonomic issues."
+                "recommendation": "Review shift rotation schedules to minimize consecutive high-risk shifts.",
+                "data_point": f"Shift {worst_shift} Alerts: {df[col_shift].value_counts()[worst_shift]} ({(df[col_shift].value_counts()[worst_shift] / len(df)) * 100:.1f}% of total alerts)",
+                "reason": f"The identified high-risk shift ({worst_shift}) has the highest number of fatigue alerts, suggesting scheduling or workload issues."
             })
-
-    # 4. High-Risk Operator → Recommendation
-    if col_operator in df.columns:
-        operator_counts = df[col_operator].value_counts()
-        worst_op = operator_counts.idxmax()
-        worst_op_pct = (operator_counts[worst_op] / len(df)) * 100
-        display_name = str(worst_op).split()[0] if pd.notna(worst_op) else "Unknown"
-        if worst_op_pct > 5:
+        if any("operator" in i.lower() for i in insights_found):
             ai_recs.append({
-                "title": "Individual Risk Intervention",
-                "action": "Initiate targeted coaching, health screening, or adjusted rest plan for Operator {display_name}.",
-                "data_point": f"Operator {display_name} Alerts: {operator_counts[worst_op]} ({format_red_pct(worst_op_pct)} of total alerts)",
-                "reason": "Persistent high alerts for one individual may indicate medical, behavioral, or training factors requiring support."
+                "recommendation": "Initiate individual coaching or mandatory rest periods for high-risk operators.",
+                "data_point": f"Operator {worst_operator} Alerts: {df[col_operator].value_counts()[worst_operator]} ({(df[col_operator].value_counts()[worst_operator] / len(df)) * 100:.1f}% of total alerts)",
+                "reason": f"The identified high-risk operator ({worst_operator}) has the highest number of fatigue alerts, indicating a need for targeted intervention."
             })
-
-    # 5. Long Duration → Recommendation
-    if "duration_sec" in df.columns and not df["duration_sec"].dropna().empty:
-        avg_duration = df["duration_sec"].mean()
-        if pd.notna(avg_duration) and avg_duration > 10:
+        if any("duration" in i.lower() for i in insights_found):
             ai_recs.append({
-                "title": "Improve Alert Response Protocol",
-                "action": "Review and retrain on fatigue alert acknowledgment procedures; consider haptic or multi-sensory alerts.",
-                "data_point": f"Average Fatigue Event Duration: {avg_duration:.1f} seconds",
-                "reason": "Long event duration (>10s) suggests delayed recognition or response—increasing near-miss potential."
+                "recommendation": "Review and improve alert response protocols and training.",
+                "data_point": f"Average Fatigue Event Duration: {avg_duration:.2f} seconds",
+                "reason": "Long average duration suggests potential delays in response time or alert acknowledgment, requiring protocol review."
+            })
+        if any("high-speed" in i.lower() for i in insights_found):
+            ai_recs.append({
+                "recommendation": "Implement speed management strategies in conjunction with fatigue monitoring.",
+                "data_point": f"High-Speed Fatigue Events: {len(high_speed_fatigue)} ({high_speed_pct:.1f}% of total alerts)",
+                "reason": "A significant percentage of alerts occur at high speeds, increasing accident severity risk. Speed control is crucial."
+            })
+        if not ai_recs:
+            ai_recs.append({
+                "recommendation": "Data quality is sufficient. Focus on implementing recommendations from Objectives 1-5.",
+                "data_point": "General Data Quality Check",
+                "reason": "No specific high-impact insights were automatically identified from the aggregated data in this section."
             })
 
-    # Final fallback
-    if not ai_recs:
-        ai_recs.append({
-            "title": "Baseline Monitoring",
-            "action": "Continue routine monitoring and periodic review of fatigue trends.",
-            "data_point": "No high-risk patterns detected in current dataset.",
-            "reason": "Data indicates balanced risk distribution—maintain current controls and re-evaluate monthly."
-        })
-
-    # Render recommendations
-    for rec in ai_recs:
-        # Replace placeholder {worst_shift}/{display_name} if needed
-        action = rec["action"]
-        if "{worst_shift}" in action and col_shift in df.columns:
-            worst_shift = df[col_shift].value_counts().idxmax()
-            action = action.replace("{worst_shift}", str(worst_shift))
-        if "{display_name}" in action and col_operator in df.columns:
-            worst_op = df[col_operator].value_counts().idxmax()
-            display_name = str(worst_op).split()[0] if pd.notna(worst_op) else "Unknown"
-            action = action.replace("{display_name}", display_name)
-
-        st.markdown(
-            f'''
+        # Menampilkan rekomendasi dalam format kotak yang sesuai dengan permintaan
+        for rec in ai_recs:
+            # Gunakan div dengan class khusus untuk membuat kotak rekomendasi di kolom kanan
+            # Gaya diambil dari .insight-box untuk konsistensi dan menghindari warna ungu
+            st.markdown(f"""
             <div style="
-                background: #ffffff;
-                border: 1px solid #e0e0e0;
+                background: #f8f9fa;
+                border: 1px solid #dee2e6;
                 border-radius: 8px;
-                padding: 16px;
-                margin: 12px 0;
+                padding: 15px;
+                margin: 10px 0;
                 color: #2c3e50;
                 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
             ">
                 <div style="
                     font-weight: bold;
-                    color: #1a237e;
-                    font-size: 15px;
-                    margin-bottom: 10px;
-                    padding-bottom: 6px;
-                    border-bottom: 1px solid #e0e0e0;
-                ">📌 {rec['title']}</div>
-                
-                <div style="font-size: 14px; margin-bottom: 12px;">
-                    <strong>Action:</strong> {action}
-                </div>
-                
-                <div style="
-                    font-size: 12px;
-                    background: #f5f9ff;
+                    color: #2c3e50;
+                    margin-bottom: 8px;
+                    font-size: 14px;
+                    background: #e9ecef;
                     padding: 8px;
                     border-radius: 5px;
-                    margin-top: 8px;
-                ">
+                    border-left: 4px solid #495057;
+                ">AI Recommendation</div>
+                <div style="padding-top: 8px; font-size: 14px; margin-bottom: 10px;">
+                    <strong>Action:</strong> {rec['recommendation']}
+                </div>
+                <div style="font-size: 12px; padding: 8px; background: #e9ecef; border-radius: 5px; margin-top: 5px;">
                     <strong>Data Point:</strong> {rec['data_point']}
                 </div>
-                
-                <div style="
-                    font-size: 12px;
-                    background: #f8f9fa;
-                    padding: 8px;
-                    border-radius: 5px;
-                    margin-top: 6px;
-                ">
+                <div style="font-size: 12px; padding: 8px; background: #f1f1f1; border-radius: 5px; margin-top: 5px;">
                     <strong>AI Reasoning:</strong> {rec['reason']}
                 </div>
             </div>
-            ''',
-            unsafe_allow_html=True
-        )
+            """, unsafe_allow_html=True)
+    else:
+        st.info("No specific data points available for AI recommendations. Ensure relevant columns (hour, shift, operator, duration, speed) are present and populated.")
 
 # ================= FOOTER ===========================
 st.markdown("---")
-st.markdown(
-    '''
-    <div style="
-        text-align: center;
-        color: #6c757d;
-        font-size: 0.9em;
-        font-family: 'Segoe UI', sans-serif;
-        margin-top: 20px;
-        padding: 10px;
-    ">
-        FatigueAnalyzer — Transforming Mining Safety with Intelligent Analytics | Contact: info@bukittechnology.com
-    </div>
-    ''',
-    unsafe_allow_html=True
-)
+st.markdown('<div class="footer">FatigueAnalyzer - Transforming Mining Safety with Intelligent Analytics | Contact: info@bukittechnology.com</div>', unsafe_allow_html=True)