update UI styling with new components.

app.py

@@ -4,161 +4,174 @@ import numpy as np
 import gradio as gr
 import plotly.graph_objects as go
 from google import genai
-from datetime import timedelta
 
 # --- CONFIG AI ---
 GOOGLE_API_KEY = os.getenv("GOOGLE_API_KEY")
 client_ai = genai.Client(api_key=GOOGLE_API_KEY) if GOOGLE_API_KEY else None
 
 # --- UI STYLE BANK NAGARI PREMIUM ---
-# Palette: #0514DE (Blue), #82C3EB (Light Blue), #F7BD87 (Gold), #FFFFFF (White)
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
-body, .gradio-container { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: #FFFFFF !important; }
+body, .gradio-container { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: #f8fafc !important; }
 
 .nagari-header { 
     background: linear-gradient(135deg, #0514DE 0%, #82C3EB 100%); 
     padding: 35px; border-radius: 15px; border-bottom: 6px solid #F7BD87; 
     margin-bottom: 25px; text-align: center;
 }
+.nagari-header h1 { color: #FFFFFF !important; font-weight: 800 !important; margin: 0; font-size: 2.2em; }
 
-.nagari-header h1 { 
-    color: #FFFFFF !important; font-weight: 800 !important; margin: 0; font-size: 2.2em; 
-}
-
-.card-left { 
+.card-sidebar { 
     background: #E0EDF4; border-radius: 15px; padding: 25px; 
-    border: 1.5px solid #82C3EB; box-shadow: 0 4px 12px rgba(5, 20, 222, 0.08); 
+    border: 1.5px solid #82C3EB; box-shadow: 0 4px 12px rgba(5, 20, 222, 0.1); 
 }
+.health-badge { background: white; padding: 12px; border-radius: 8px; margin-bottom: 12px; border-left: 5px solid #0514DE; font-size: 0.95em; }
 
 .report-card { 
     background: white; border-radius: 12px; padding: 30px; 
     border: 1px solid #E2E8F0; line-height: 1.8; color: #1e293b; 
 }
-
-.nbo-box { 
-    background: #fffdf0; border: 2px solid #F7BD87; padding: 20px; 
-    border-radius: 10px; margin-top: 20px; 
-}
+.nbo-box { background: #fffdf0; border: 2px solid #F7BD87; padding: 20px; border-radius: 10px; margin-top: 20px; }
+.viz-explanation { background: #f1f5f9; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 0.9em; border-left: 4px solid #82C3EB; }
 """
 
-class ArchonMasterEngine:
+class ArchonExecutiveEngine:
     def __init__(self):
         self.load_data()
 
     def load_data(self):
-        # Fase 1: Data Foundation
-        self.df_txn = pd.read_csv('transactions.csv', parse_dates=['date']).sort_values('date')
-        self.df_cust = pd.read_csv('customers.csv')
-        self.df_bal = pd.read_csv('balances_revised.csv', parse_dates=['month']).sort_values('month')
-        self.df_rep = pd.read_csv('repayments_revised.csv', parse_dates=['due_date']).fillna("on_time")
+        # FASE 1: Data Foundation
+        try:
+            self.df_txn = pd.read_csv('transactions.csv', parse_dates=['date']).sort_values('date')
+            self.df_cust = pd.read_csv('customers.csv')
+            self.df_bal = pd.read_csv('balances_revised.csv', parse_dates=['month']).sort_values('month')
+            self.df_rep = pd.read_csv('repayments_revised.csv', parse_dates=['due_date']).fillna("on_time")
+        except Exception as e: print(f"Load Error: {e}")
 
     def analyze(self, customer_id):
         cid = str(customer_id).strip().upper()
         u_txn = self.df_txn[self.df_txn['customer_id'] == cid].copy()
         u_bal = self.df_bal[self.df_bal['customer_id'] == cid].sort_values('month')
         u_rep = self.df_rep[self.df_rep['customer_id'] == cid]
-        u_info_list = self.df_cust[self.df_cust['customer_id'] == cid]
+        u_info_df = self.df_cust[self.df_cust['customer_id'] == cid]
 
-        if u_txn.empty or u_info_list.empty: return None
-        u_info = u_info_list.iloc[0]
+        if u_txn.empty or u_info_df.empty: return None
+        u_info = u_info_df.iloc[0]
 
-        # --- FASE 2 & 3: AGGREGATION ---
-        income_txn = u_txn[u_txn['transaction_type'] == 'credit']['amount'].sum()
-        ref_income = max(income_txn, u_info['monthly_income'])
-        expense = u_txn[u_txn['transaction_type'] == 'debit']['amount'].sum()
-        er = min(expense / ref_income, 1.0) if ref_income > 0 else 1.0
+        # --- FASE 2: TRANSACTION INTELLIGENCE (Logic Only) ---
+        essential_cats = {'groceries', 'utilities', 'transport', 'healthcare', 'education'}
+        essential_purposes = {'bill_payment', 'salary_deduction', 'loan_repayment'}
+        disc_cats = {'restaurant', 'cafe', 'entertainment', 'fashion', 'online_shopping', 'travel'}
+        
+        def classify_exp(row):
+            desc = str(row.get('raw_description', '')).lower()
+            cat = str(row.get('merchant_category', '')).lower()
+            purp = str(row.get('purpose_code', '')).lower()
+            if cat in essential_cats or purp in essential_purposes or any(k in desc for k in essential_cats):
+                return 'essential'
+            return 'discretionary'
+
+        u_txn['expense_type'] = u_txn.apply(classify_exp, axis=1)
+
+        # --- FASE 3 & 4: AGGREGATION & RISK ---
+        inc_txn = u_txn[u_txn['transaction_type'] == 'credit']['amount'].sum()
+        ref_inc = max(inc_txn, u_info['monthly_income'])
+        exp_total = u_txn[u_txn['transaction_type'] == 'debit']['amount'].sum()
+        er = min(exp_total / ref_inc, 1.0) if ref_inc > 0 else 1.0
         
-        # --- FASE 4: RISK SCORING (30/20/20/20/10) ---
-        # Menghitung skor tanpa walrus operator agar stabil
+        # Risk Weights (30/20/20/20/10)
         er_s = 1.0 if er > 0.8 else (0.5 if er > 0.5 else 0.0)
         bt_s = 1.0 if len(u_bal) >= 2 and u_bal.iloc[-1]['avg_balance'] < u_bal.iloc[-2]['avg_balance'] else 0.0
         od_s = 1.0 if (u_bal['min_balance'] <= 0).any() else 0.0
         mp_s = 1.0 if (u_rep['status'] == 'late').any() else 0.0
         
-        # Total Score: 0.1 adalah baseline volatility
-        final_score = (0.3 * er_s) + (0.2 * bt_s) + (0.2 * od_s) + (0.2 * mp_s) + 0.1
-        risk_lv = "HIGH" if final_score >= 0.7 else ("MEDIUM" if final_score >= 0.4 else "LOW")
+        score = (0.3 * er_s) + (0.2 * bt_s) + (0.2 * od_s) + (0.2 * mp_s) + 0.1
+        risk_lv = "HIGH" if score >= 0.7 else ("MEDIUM" if score >= 0.4 else "LOW")
 
-        # --- FASE 5: NBO DECISION ENGINE ---
+        # --- FASE 5: NBO ENGINE ---
         if risk_lv == "HIGH" or mp_s == 1:
-            action, detail = "Restructuring Suggestion", "Prioritas penyelamatan kredit dan penjadwalan ulang cicilan."
-            steps = ["Peninjauan ulang suku bunga", "Perpanjangan tenor", "Konsolidasi kewajiban."]
+            action = "Restructuring Suggestion"
+            desc = "Langkah darurat untuk mengatur ulang jadwal cicilan agar nasabah tidak gagal bayar."
+            steps = ["Penurunan bunga sementara", "Perpanjangan tenor", "Konsolidasi utang."]
         elif er > 0.6:
-            action, detail = "Spending Control", "Pembatasan pengeluaran gaya hidup untuk menjaga likuiditas."
-            steps = ["Set limit QRIS harian", "Notifikasi saldo kritis", "Review pos belanja online."]
+            action = "Spending Control"
+            desc = "Langkah strategis membatasi pengeluaran gaya hidup untuk menyelamatkan kas harian."
+            steps = ["Limit QRIS harian Rp500rb", "Non-aktifkan auto-debit non-esensial", "Evaluasi belanja online."]
         elif risk_lv == "LOW":
-            action, detail = "Promote Investment", "Optimalisasi dana mengendap melalui produk growth."
-            steps = ["Penawaran Deposito Nagari", "Reksa Dana", "Tabungan Berjangka."]
+            action = "Promote Investment"
+            desc = "Optimalisasi kelebihan dana nasabah ke produk investasi yang memberikan bagi hasil."
+            steps = ["Deposito Nagari Gold", "Tabungan Berjangka", "Pilihan Reksa Dana."]
         else:
-            action, detail = "Financial Education", "Edukasi pengelolaan arus kas harian agar resiliensi meningkat."
-            steps = ["Modul perencanaan budget", "Webinar literasi", "Saran RM Mingguan."]
+            action = "Financial Education"
+            desc = "Edukasi berkala agar nasabah bisa mempertahankan stabilitas keuangannya."
+            steps = ["Modul Budgeting", "Tips belanja cerdas", "Webinar Perencanaan Keuangan."]
 
-        return risk_lv, final_score, er, u_bal, u_txn, expense, ref_income, action, detail, steps, er_s, bt_s, od_s, mp_s
+        return risk_lv, score, er, u_bal, u_txn, exp_total, ref_inc, action, desc, steps, er_s, bt_s, od_s, mp_s
 
-    def get_narrative(self, risk_lv, score, er, u_bal, exp, inc, action, detail, steps, cid, u_txn):
-        # FASE 6: EXPLAINABLE SUMMARY (NARRATIVE)
-        msg = f"### 📊 LAPORAN EKSEKUTIF ARCHON-AI\n\n"
-        msg += f"Analisis resiliensi untuk nasabah **{cid}** menunjukkan profil risiko **{risk_lv}** (Skor: {score:.2f}).\n\n"
+    def create_narrative(self, risk_lv, score, er, u_bal, exp, inc, action, desc, steps, cid, u_txn):
+        # Fase 6: Narrative Summary
+        txt = f"### ANALISIS EKSEKUTIF ARCHON: NASABAH {cid}\n\n"
+        txt += f"Hasil evaluasi hibrida menunjukkan tingkat resiliensi **{risk_lv}** (Skor: {score:.2f}).\n\n"
         
-        msg += f"**Mengapa Skor Ini Muncul?**\n"
-        msg += f"* **Rasio Belanja ({er:.1%})**: Anda menghabiskan Rp{exp:,.0f} dari daya beli Rp{inc:,.0f}. "
-        msg += "Ini menunjukkan defisit kas yang berisiko." if er > 0.8 else "Angka ini menunjukkan manajemen kas yang sehat."
+        txt += f"**Mengapa Hasil Ini Muncul?**\n"
+        txt += f"* **Rasio Belanja ({er:.1%})**: Bapak/Ibu menggunakan Rp{exp:,.0f} dari pendapatan Rp{inc:,.0f}. "
+        txt += "Rasio di atas 80% sangat kritis karena hampir tidak menyisakan dana darurat." if er > 0.8 else "Angka ini menunjukkan kontrol belanja yang sangat baik."
         
         if not u_bal.empty:
-            last_bal = u_bal.iloc[-1]['avg_balance']
-            msg += f"\n* **Tren Saldo**: Saldo saat ini Rp{last_bal:,.0f}. "
-            msg += "Terjadi penurunan saldo rata-rata, mengindikasikan tabungan mulai tergerus." if len(u_bal) > 1 and last_bal < u_bal.iloc[-2]['avg_balance'] else "Saldo tumbuh stabil."
-
-        msg += f"\n\n<div class='nbo-box'>🎯 REKOMENDASI TINDAKAN (NBO): {action}\n\n"
-        msg += f"**Bagaimana?:** {detail}\n\n"
-        msg += f"**Langkah-langkah Strategis:**\n"
-        for i, s in enumerate(steps, 1): msg += f"{i}. {s}\n"
-        msg += f"</div>"
-
-        # GEN-AI BACKUP
-        if client_ai:
-            try:
-                tx = u_txn.tail(1)['raw_description'].iloc[0]
-                prompt = f"Advisor Bank Nagari: Nasabah {cid} ({risk_lv} risk). Saran hangat personal terkait {tx}, maks 2 kalimat."
-                resp = client_ai.models.generate_content(model="gemini-1.5-flash", contents=prompt)
-                msg += f"\n---\n**💡 SARAN VIRTUAL ADVISOR:**\n_{resp.text}_"
-            except: pass
-        return msg
-
-# --- UI EXECUTION ---
-engine = ArchonMasterEngine()
+            txt += f"\n* **Analisis Saldo**: Saldo terakhir Rp{u_bal.iloc[-1]['avg_balance']:,.0f}. "
+            txt += "Waspada, tren saldo sedang menurun, yang artinya nasabah sedang melakukan 'pemakanan tabungan'." if len(u_bal) > 1 and u_bal.iloc[-1]['avg_balance'] < u_bal.iloc[-2]['avg_balance'] else "Tren saldo tumbuh stabil."
+
+        txt += f"\n\n<div class='nbo-box'>**REKOMENDASI TINDAKAN (NBO): {action}**\n\n"
+        txt += f"**Bagaimana:** {desc}\n\n"
+        txt += f"**Langkah-Langkah:**\n"
+        for i, s in enumerate(steps, 1): txt += f"{i}. {s}\n"
+        txt += f"</div>"
+        return txt
+
+    def create_viz(self, u_bal, u_txn):
+        # 1. Arus Kas (Inflow vs Outflow)
+        u_txn['m'] = u_txn['date'].dt.to_period('M').dt.to_timestamp()
+        cf = u_txn.groupby(['m', 'transaction_type'])['amount'].sum().unstack().fillna(0)
+        f1 = go.Figure()
+        f1.add_trace(go.Bar(x=cf.index, y=cf.get('credit', 0), name='Pemasukan (Inflow)', marker_color='#82C3EB'))
+        f1.add_trace(go.Bar(x=cf.index, y=cf.get('debit', 0), name='Pengeluaran (Outflow)', marker_color='#0514DE'))
+        f1.update_layout(title="Laporan Arus Kas Bulanan", barmode='group', template='plotly_white')
+
+        # 2. Tren Saldo
+        f2 = go.Figure()
+        f2.add_trace(go.Scatter(x=u_bal['month'], y=u_bal['avg_balance'], name='Saldo Rata-rata', line=dict(color='#F7BD87', width=4)))
+        f2.update_layout(title="Kesehatan Pertumbuhan Saldo", template='plotly_white')
+        
+        # 3. Komposisi Belanja (New: Essential vs Discretionary)
+        exp_dist = u_txn[u_txn['transaction_type'] == 'debit'].groupby('expense_type')['amount'].sum()
+        f3 = go.Figure(data=[go.Pie(labels=exp_dist.index, values=exp_dist.values, hole=.4, marker_colors=['#0514DE', '#F7BD87'])])
+        f3.update_layout(title="Komposisi Pengeluaran (Gaya Hidup vs Kebutuhan)")
+        
+        return f1, f2, f3
+
+# --- UI LOGIC ---
+engine = ArchonExecutiveEngine()
 
 def run_app(cust_id):
     res = engine.analyze(cust_id)
-    if not res: return "## ❌ ID Tidak Valid", "Gunakan C0001 - C0120", None, None
+    if not res: return "## ❌ ID Tidak Valid", "Gunakan ID C0001 - C0120", None, None, None
     
-    risk_lv, score, er, u_bal, u_txn, exp, inc, action, detail, steps, er_s, bt_s, od_s, mp_s = res
-    report = engine.get_narrative(risk_lv, score, er, u_bal, exp, inc, action, detail, steps, cust_id, u_txn)
+    risk_lv, score, er, u_bal, u_txn, exp, inc, action, desc, steps, er_s, bt_s, od_s, mp_s = res
+    report = engine.create_narrative(risk_lv, score, er, u_bal, exp, inc, action, desc, steps, cust_id, u_txn)
+    p1, p2, p3 = engine.create_viz(u_bal, u_txn)
     
-    # Graphs - CORRECTED
-    f1 = go.Figure()
-    u_txn['m'] = u_txn['date'].dt.to_period('M').dt.to_timestamp()
-    cf = u_txn.groupby(['m', 'transaction_type'])['amount'].sum().unstack().fillna(0)
-    f1.add_trace(go.Bar(x=cf.index, y=cf.get('credit', 0), name='Pemasukan (Inflow)', marker_color='#82C3EB'))
-    f1.add_trace(go.Bar(x=cf.index, y=cf.get('debit', 0), name='Pengeluaran (Outflow)', marker_color='#0514DE'))
-    f1.update_layout(title="Inflow vs Outflow Bulanan", barmode='group', template='plotly_white')
-
-    f2 = go.Figure()
-    f2.add_trace(go.Scatter(x=u_bal['month'], y=u_bal['avg_balance'], name='Saldo Rata-rata', line=dict(color='#F7BD87', width=4)))
-    f2.update_layout(title="Tren Pertumbuhan Saldo", template='plotly_white')
-
     color = "#ef4444" if risk_lv == "HIGH" else ("#f59e0b" if risk_lv == "MEDIUM" else "#10b981")
     sidebar = f"""
-    <div class='card-left'>
+    <div class='card-sidebar'>
         <h2 style='color: #0514DE; margin:0;'>Summary Report</h2>
-        <div style='background:{color}; color:white; padding:10px 20px; border-radius:30px; font-weight:bold; display:inline-block; margin:15px 0;'>{risk_lv} RISK</div>
-        <div style='background:white; padding:10px; border-radius:8px; margin-bottom:10px; border-left:4px solid #0514DE;'><b>Score:</b> {score:.2f}</div>
-        <div style='background:white; padding:10px; border-radius:8px; margin-bottom:10px; border-left:4px solid #0514DE;'><b>Ratio:</b> {er:.1%}</div>
-        <div style='background:white; padding:10px; border-radius:8px; border-left:4px solid #0514DE;'><b>Trend:</b> {'🔻 Turun' if bt_s == 1 else '🔼 Stabil'}</div>
+        <div style='background:{color}; color:white; padding:10px 20px; border-radius:30px; font-weight:bold; display:inline-block; margin:15px 0;'>{risk_lv} RISK LEVEL</div>
+        <div class='health-badge'><b>Risk Score:</b> {score:.2f} / 1.00</div>
+        <div class='health-badge'><b>Expense Ratio:</b> {er:.1%} {'⚠️' if er > 0.8 else '✅'}</div>
+        <div class='health-badge'><b>Balance Trend:</b> {'🔻 Menurun' if bt_s == 1 else '🔺 Stabil'}</div>
+        <div class='health-badge'><b>Credit History:</b> {'⚠️ Late' if mp_s == 1 else '✔️ Lancar'}</div>
     </div>
     """
-    return sidebar, report, f1, f2
+    return sidebar, report, p1, p2, p3
 
 with gr.Blocks(css=custom_css) as demo:
     gr.HTML("<div class='nagari-header'><h1>ARCHON-AI</h1></div>")
@@ -172,12 +185,20 @@ with gr.Blocks(css=custom_css) as demo:
                 with gr.Tab("Audit Summary"):
                     out_report = gr.Markdown(elem_classes="report-card")
                 with gr.Tab("Visual Analytics"):
-                    gr.Markdown("### Analisis Arus Kas\n**Batang Muda (Light Blue)** = Uang Masuk. **Batang Tua (Deep Blue)** = Uang Keluar.")
+                    gr.Markdown("### 1. Analisis Arus Kas")
                     plot_cf = gr.Plot()
+                    gr.HTML("<div class='viz-explanation'><b>Cara Baca:</b> Batang Muda (Pemasukan) harus lebih tinggi dari Batang Tua (Pengeluaran). Jika Batang Tua dominan, likuiditas nasabah dalam bahaya.</div>")
+                    
                     gr.Markdown("---")
-                    gr.Markdown("### Tren Pertumbuhan Saldo\nMenunjukkan konsistensi nasabah dalam membangun cadangan likuiditas.")
+                    gr.Markdown("### 2. Tren Pertumbuhan Saldo")
                     plot_bal = gr.Plot()
+                    gr.HTML("<div class='viz-explanation'><b>Cara Baca:</b> Garis yang naik menunjukkan nasabah memiliki daya tahan (resiliensi) terhadap krisis ekonomi.</div>")
+                    
+                    gr.Markdown("---")
+                    gr.Markdown("### 3. Komposisi Gaya Hidup")
+                    plot_dist = gr.Plot()
+                    gr.HTML("<div class='viz-explanation'><b>Cara Baca:</b> Semakin besar porsi Biru (Essential), semakin sehat keuangan nasabah. Porsi Emas (Discretionary) yang besar menunjukkan gaya hidup boros.</div>")
 
-    btn.click(fn=run_app, inputs=id_in, outputs=[out_side, out_report, plot_cf, plot_bal])
+    btn.click(fn=run_app, inputs=id_in, outputs=[out_side, out_report, plot_cf, plot_bal, plot_dist])
 
 demo.launch()