Update app.py

app.py

@@ -7,6 +7,8 @@ import numpy as np
 from datetime import datetime, timedelta
 from typing import List
 import os
+import sklearn
+import kaleido
 
 # =================== PAGE CONFIG ===================
 st.set_page_config(
@@ -1070,8 +1072,447 @@ except Exception as e:
     st.error(f"⚠️ Error Risk Matrix: {e}")
     # st.exception(e) # Uncomment for debugging
 
+# =================== 7. PREDICTIVE INSIGHTS (FINAL — PLN BLUE EDITION v2) ===================
+# ✅ Panel 1: ONLY Coverage < 90% AND Slope < 0
+# ✅ Panel 3: ONLY Coverage = 100% AND Slope > 0 → Avg/Month
+# ✅ Estetik: Sortable, Hover, Zebra, PLN Blue, No Emoticons
+
+st.markdown("<h3 class='section-title'>OBJECTIVE 6 - Predictive Dashboard & Early Warning Signals</h3>", unsafe_allow_html=True)
+
+
+# ✅ Enhanced CSS + Minimal Sortable JS
+st.markdown("""
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+.predictive-panel {
+    margin-bottom: 28px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
+    overflow: hidden;
+    border: 1px solid #edf2f7;
+}
+.predictive-header {
+    background: #E3F2FD;
+    color: #003DA5;
+    font-weight: 700;
+    font-size: 1.1em;
+    padding: 14px 20px;
+    border-left: 4px solid #003DA5;
+}
+.predictive-table-wrapper {
+    padding: 0 20px 20px;
+}
+.predictive-table-wrapper table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: 'Inter', sans-serif;
+    font-size: 0.94em;
+    margin-top: 12px;
+}
+.predictive-table-wrapper th,
+.predictive-table-wrapper td {
+    text-align: center !important;
+    padding: 12px 10px;
+    border: 1px solid #e5e7eb;
+    vertical-align: middle;
+}
+.predictive-table-wrapper th {
+    background-color: #f8fafc;
+    font-weight: 600;
+    color: #003DA5;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+}
+.predictive-table-wrapper th:hover {
+    background-color: #edf2f7;
+}
+.predictive-table-wrapper th::after {
+    content: " ⇵";
+    opacity: 0.4;
+    margin-left: 4px;
+}
+.predictive-table-wrapper th.asc::after {
+    content: " ↑";
+    opacity: 1;
+    color: #003DA5;
+}
+.predictive-table-wrapper th.desc::after {
+    content: " ↓";
+    opacity: 1;
+    color: #c62828;
+}
+.predictive-table-wrapper tr:nth-child(even) {
+    background-color: #fafcff;
+}
+.predictive-table-wrapper tr:hover {
+    background-color: #f0f7ff !important;
+}
+.predictive-note {
+    font-size: 0.86em;
+    color: #64748b;
+    margin-top: 10px;
+    padding: 0 20px;
+    line-height: 1.5;
+}
+.spark {
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+}
+.status-active { color: #2e7d32; font-weight: bold; }
+.status-neutral { color: #f57c00; }
+.status-inactive { color: #c62828; font-weight: bold; }
+.trend-rising { color: #c62828; font-weight: 600; }
+.trend-stable { color: #388e3c; }
+.trend-declining { color: #d32f2f; }
+.footer-insight {
+    background: #003DA5;
+    color: white;
+    padding: 14px 24px;
+    border-radius: 10px;
+    font-weight: 600;
+    margin-top: 20px;
+    text-align: center;
+    font-size: 1.08em;
+    box-shadow: 0 3px 10px rgba(0,61,165,0.15);
+}
+.warning-box {
+    background: #fff8e1;
+    border-left: 4px solid #ffc107;
+    padding: 12px 16px;
+    font-size: 0.9em;
+    color: #5d4037;
+    margin: 10px 20px 0;
+    border-radius: 0 6px 6px 0;
+}
+</style>
+
+<script>
+function makeSortable(tableId) {
+    const table = document.getElementById(tableId);
+    if (!table) return;
+    let headers = table.querySelectorAll("th");
+    headers.forEach((header, i) => {
+        header.onclick = () => {
+            headers.forEach(h => h.classList.remove('asc', 'desc'));
+            let rows = Array.from(table.querySelectorAll("tr:nth-child(n+2)"));
+            let isNumeric = !isNaN(rows[0]?.cells[i]?.textContent.replace(/[^0-9.-]/g, ''));
+            rows.sort((a, b) => {
+                let aVal = a.cells[i].textContent.trim();
+                let bVal = b.cells[i].textContent.trim();
+                if (isNumeric) {
+                    aVal = parseFloat(aVal.replace(/[^0-9.-]/g, '')) || 0;
+                    bVal = parseFloat(bVal.replace(/[^0-9.-]/g, '')) || 0;
+                }
+                return header.classList.contains('asc') ? bVal - aVal : aVal - bVal;
+            });
+            header.classList.toggle('asc');
+            header.classList.toggle('desc');
+            rows.forEach(row => table.querySelector('tbody').appendChild(row));
+        };
+    });
+}
+setTimeout(() => {
+    makeSortable('tbl-locations');
+    makeSortable('tbl-divisions');
+    makeSortable('tbl-issues');
+}, 800);
+</script>
+""", unsafe_allow_html=True)
+
+# 🔹 Helper: ASCII Sparkline in PLN Blue
+def ascii_sparkline_pln(data):
+    if not data or len(data) == 0:
+        return ""
+    try:
+        data = [float(x) for x in data]
+        min_val, max_val = min(data), max(data)
+        if max_val == min_val:
+            norm = [3] * len(data)
+        else:
+            norm = [int(7 * (x - min_val) / (max_val - min_val + 1e-9)) for x in data]
+        blocks = "▁▂▃▄▅▆▇█"
+        spark = "".join(blocks[min(max(0, i), 7)] for i in norm)
+        return f"<span class='spark' style='color:#003DA5;'>{spark}</span>"
+    except:
+        return "<span class='spark' style='color:#999;'>▁▁▁</span>"
+
+# ——————— 1. Locations: ONLY Coverage < 90% AND Slope < 0 ———————
+def predict_locations(df):
+    if 'nama_lokasi_full' not in df.columns or df.empty:
+        return pd.DataFrame()
+    
+    start_month = df['created_at'].min().to_period('M')
+    end_month = df['created_at'].max().to_period('M')
+    all_months = pd.period_range(start=start_month, end=end_month, freq='M')
+    
+    df_monthly = (
+        df.groupby(['nama_lokasi_full', df['created_at'].dt.to_period('M')])
+        .size()
+        .unstack(fill_value=0)
+        .reindex(columns=all_months, fill_value=0)
+        .stack()
+        .reset_index(name='count')
+    )
+    df_monthly.columns = ['Location', 'Month', 'Count']
+    
+    results = []
+    for lokasi, group in df_monthly.groupby('Location'):
+        ts = group.set_index('Month')['Count']
+        total = len(all_months)
+        active = (ts > 0).sum()
+        coverage = active / total if total > 0 else 0
+        avg_rate = ts.mean()
+        
+        if len(ts) >= 2:
+            try:
+                slope = np.polyfit(np.arange(len(ts)), ts.values, 1)[0]
+                # ✅ FILTER: Coverage < 90% AND Slope < 0
+                if slope < 0 and coverage < 0.9:
+                    reason = f"Slope = {slope:.3f}, Coverage = {coverage*100:.1f}%. Avg: {avg_rate:.2f}/mo."
+                    results.append({
+                        'Location': lokasi,
+                        'Avg Reports/Month': round(avg_rate, 2),
+                        'Coverage (%)': round(coverage * 100, 1),
+                        'Trend Slope': round(slope, 3),
+                        'Trend': ascii_sparkline_pln(ts.values.tolist()),
+                        'Reason': reason
+                    })
+            except:
+                continue
+    df_res = pd.DataFrame(results)
+    return df_res.sort_values('Trend Slope', ascending=True) if not df_res.empty else df_res  # most negative first
+
+# ——————— 2. Divisions ———————
+def predict_divisions(df):
+    if 'nama' not in df.columns:
+        return pd.DataFrame()
+    
+    start_month = df['created_at'].min().to_period('M')
+    end_month = df['created_at'].max().to_period('M')
+    all_months = pd.period_range(start=start_month, end=end_month, freq='M')
+    
+    df_monthly = (
+        df.groupby(['nama', df['created_at'].dt.to_period('M')])
+        .size()
+        .unstack(fill_value=0)
+        .reindex(columns=all_months, fill_value=0)
+        .stack()
+        .reset_index(name='count')
+    )
+    df_monthly.columns = ['Division', 'Month', 'Count']
+    
+    results = []
+    for div, group in df_monthly.groupby('Division'):
+        ts = group.set_index('Month')['Count']
+        total = len(all_months)
+        active = (ts > 0).sum()
+        gaps = total - active
+        coverage = active / total if total > 0 else 0
+        
+        if gaps > 2:
+            status = "<span class='status-inactive'>Inactive</span>"
+        elif gaps == 0:
+            status = "<span class='status-active'>Active</span>"
+        else:
+            status = "<span class='status-neutral'>Neutral</span>"
+        
+        bar = ''.join(['●' if c > 0 else '○' for c in ts.values])
+        trend_line = f"<span class='spark' style='color:#003DA5;'>{bar}</span>"
+        results.append({
+            'Division': div,
+            'Active Months': int(active),
+            'Total Months': int(total),
+            'Coverage (%)': round(coverage * 100, 1),
+            'Status': status,
+            'Trend': trend_line
+        })
+    df_res = pd.DataFrame(results)
+    return df_res.sort_values('Coverage (%)', ascending=True) if not df_res.empty else df_res
+
+# ——————— 3. Issues: ONLY Coverage=100% & Trend Slope > 0 → Avg/Month ———————
+def predict_issues(df):
+    if 'kategori' not in df.columns or df.empty:
+        return pd.DataFrame()
+    
+    start_month = df['created_at'].min().to_period('M')
+    end_month = df['created_at'].max().to_period('M')
+    all_months = pd.period_range(start=start_month, end=end_month, freq='M')
+    n_months = len(all_months)
+    
+    results = []
+    for cat, group in df.groupby('kategori'):
+        ts_data = (
+            group.groupby(group['created_at'].dt.to_period('M'))
+            .size()
+            .reindex(all_months, fill_value=0)
+        )
+        total_reports = ts_data.sum()
+        avg_per_month = total_reports / n_months if n_months > 0 else 0
+        active_months = (ts_data > 0).sum()
+        coverage = active_months / n_months if n_months > 0 else 0
+        
+        slope = 0.0
+        if len(ts_data) >= 2:
+            try:
+                slope = np.polyfit(np.arange(len(ts_data)), ts_data.values, 1)[0]
+            except:
+                pass
+        
+        results.append({
+            'Category': cat,
+            'Avg/Month': round(avg_per_month, 2),
+            'Coverage (%)': round(coverage * 100, 1),
+            'Trend Slope': round(slope, 3),
+            'Trend': ascii_sparkline_pln(ts_data.values.tolist())
+        })
+    
+    df_res = pd.DataFrame(results)
+    
+    # ✅ FILTER: Coverage = 100% AND Trend Slope > 0
+    if not df_res.empty:
+        df_res = df_res[
+            (df_res['Coverage (%)'] == 100.0) &
+            (df_res['Trend Slope'] > 0)
+        ].copy()
+        
+        df_res['Status'] = df_res['Trend Slope'].apply(
+            lambda s: "<span class='trend-rising'>High-Risk Rising</span>" if s > 0.2 else
+                      "<span class='trend-stable'>Emerging Rising</span>"
+        )
+        df_res = df_res.sort_values('Trend Slope', ascending=False)
+    
+    return df_res.reset_index(drop=True)
+
+# ——————— RUN ———————
+df_loc = predict_locations(df_filtered)
+df_div = predict_divisions(df_filtered)
+df_issue = predict_issues(df_filtered)
+
+# 🎯 PANEL 1: Locations (FILTERED: Coverage < 90% & Slope < 0)
+st.markdown("<div class='predictive-panel'>", unsafe_allow_html=True)
+st.markdown("<div class='predictive-header'>1. Which areas are predicted to have no future inspections?</div>", unsafe_allow_html=True)
+if not df_loc.empty:
+    cols = ['Location', 'Avg Reports/Month', 'Coverage (%)', 'Trend Slope', 'Trend', 'Reason']
+
+    # 🔥 Rename hanya untuk DISPLAY, bukan data asli
+    df_display = df_loc[cols].rename(columns={
+        "Reason": "Reason Forecast"
+    })
+
+    html = df_display.to_html(escape=False, index=False, table_id="tbl-locations")
+    st.markdown(f"<div class='predictive-table-wrapper'>{html}</div>", unsafe_allow_html=True)
+
+    st.markdown(
+        "<div class='predictive-note'>"
+        "<strong>Criteria:</strong> Coverage < 90% AND negative slope. "
+        "High-risk: steep negative slope + low baseline activity."
+        "</div>",
+        unsafe_allow_html=True
+    )
+
+else:
+    st.markdown(
+        "<div class='predictive-table-wrapper'>"
+        "<p style='text-align:center; color:#666; padding:24px; font-style:italic;'>"
+        "No locations meet criteria: Coverage < 90% and negative trend."
+        "</p>"
+        "<div class='warning-box'>"
+        "💡 Note: Locations with Coverage ≥ 90% are excluded — they are considered stable reporting zones."
+        "</div>"
+        "</div>",
+        unsafe_allow_html=True
+    )
+st.markdown("</div>", unsafe_allow_html=True)
+
+# 🎯 PANEL 2: Divisions
+st.markdown("<div class='predictive-panel'>", unsafe_allow_html=True)
+st.markdown("<div class='predictive-header'>2. Which Areas Are Likely to Be Frequently or Rarely Inspected?</div>", unsafe_allow_html=True)
+if not df_div.empty:
+    cols = ['Division', 'Active Months', 'Total Months', 'Coverage (%)', 'Status', 'Trend']
+
+    # 🔵 Rename ONLY for display (Status → Forecast Inspection)
+    df_display = df_div[cols].rename(columns={
+        "Status": "Forecast Inspection"
+    })
+
+    html = df_display.to_html(escape=False, index=False, table_id="tbl-divisions")
+    st.markdown(f"<div class='predictive-table-wrapper'>{html}</div>", unsafe_allow_html=True)
+
+    st.markdown(
+        "<div class='predictive-note'>"
+        "<strong>Forecast Inspection:</strong> "
+        "<span class='status-active'>Active</span> (0 gaps), "
+        "<span class='status-neutral'>Neutral</span> (1–2 gaps), "
+        "<span class='status-inactive'>Inactive</span> (>2 gaps)."
+        "</div>",
+        unsafe_allow_html=True
+    )
+else:
+    st.markdown(
+        "<div class='predictive-table-wrapper'>"
+        "<p style='text-align:center; color:#666; padding:24px; font-style:italic;'>"
+        "Insufficient division data (≥2 months required)."
+        "</p></div>",
+        unsafe_allow_html=True
+    )
+
+st.markdown("</div>", unsafe_allow_html=True)
+
+
+# 🎯 PANEL 3: Issues (FILTERED: Coverage=100% & Rising)
+st.markdown("<div class='predictive-panel'>", unsafe_allow_html=True)
+st.markdown(
+    "<div class='predictive-header'>"
+    "3. Which Issue Categories Are Likely to Appear in the Next 3 Months"
+    "<span style='font-size:0.75em; font-weight:400; color:#003DA5;'>"
+    " &nbsp;&nbsp;(* Categorization uses NLP — Natural Language Processing from random text)"
+    "</span>"
+    "</div>",
+    unsafe_allow_html=True
+)
+
+if not df_issue.empty:
+    cols = ['Category', 'Avg/Month', 'Coverage (%)', 'Trend Slope', 'Status', 'Trend']
+
+    # 🔵 Rename ONLY for display
+    df_display = df_issue[cols].rename(columns={
+        "Status": "Status Issue for Next Month"
+    })
+
+    html = df_display.to_html(escape=False, index=False, table_id="tbl-issues")
+    st.markdown(f"<div class='predictive-table-wrapper'>{html}</div>", unsafe_allow_html=True)
+
+    st.markdown(
+        "<div class='predictive-note'>"
+        "<strong>Filtered:</strong> Reported every month (100% coverage) with increasing trend. "
+        "<strong>Avg/Month</strong> = total ÷ months. "
+        "<span class='trend-rising'>High-Risk Rising</span> = slope > 0.2."
+        "</div>",
+        unsafe_allow_html=True
+    )
+
+else:
+    st.markdown(
+        "<div class='predictive-table-wrapper'>"
+        "<p style='text-align:center; color:#c62828; padding:24px; font-weight:500;'>"
+        "⚠️ No rising categories with 100% monthly coverage."
+        "</p>"
+        "<p style='text-align:center; color:#666; font-size:0.9em;'>"
+        "Consider relaxing coverage filter if data is sparse."
+        "</p></div>",
+        unsafe_allow_html=True
+    )
+
+st.markdown("</div>", unsafe_allow_html=True)
+
+
+
 # =================== 6. ✅ AI INSIGHT ENGINE (BARU - BERDASARKAN DATA & RATIO) ===================
-st.markdown("## 6. Insight & Recommendation")
+
+st.markdown("<h3 class='section-title'>OBJECTIVE 7 - Insight and Recommendation</h3>", unsafe_allow_html=True)
 
 def compute_ai_insights(df: pd.DataFrame) -> List[dict]:
     """