Update app.py

app.py

@@ -16,128 +16,300 @@ st.set_page_config(
 )
 
 # ==========================================
-# 2. PROFESSIONAL STYLING (THEME OVERRIDE)
+# 2. ENHANCED PROFESSIONAL STYLING
 # ==========================================
 st.markdown("""
     <style>
-        /* IMPORT FONTS */
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
         
-        /* FORCE LIGHT THEME BASE */
+        /* BASE THEME */
         .stApp {
-            background-color: #f8fafc; /* Light Blue-Grey Background */
-            color: #0f172a; /* Slate 900 Text */
-            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            color: #1a202c;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         }
 
-        /* METRIC CARDS */
+        /* HEADER STYLING */
+        .main-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 2rem;
+            border-radius: 16px;
+            box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
+            margin-bottom: 2rem;
+            color: white;
+        }
+        
+        .main-title {
+            font-size: 2.5rem;
+            font-weight: 800;
+            margin: 0;
+            letter-spacing: -0.5px;
+        }
+        
+        .main-subtitle {
+            font-size: 1.1rem;
+            opacity: 0.95;
+            margin-top: 0.5rem;
+            font-weight: 400;
+        }
+
+        /* METRIC CARDS - ENHANCED */
         div[data-testid="stMetric"] {
-            background-color: #ffffff;
-            border: 1px solid #e2e8f0;
-            border-radius: 8px;
-            padding: 15px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            transition: all 0.2s ease;
+            background: white;
+            border: none;
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
+        
         div[data-testid="stMetric"]:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            transform: translateY(-4px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
         }
         
-        /* METRIC TEXT COLORS - Force Dark Text */
         div[data-testid="stMetricValue"] {
-            color: #0f172a !important; 
+            color: #2d3748 !important;
             font-weight: 700 !important;
+            font-size: 2rem !important;
         }
+        
         div[data-testid="stMetricLabel"] {
-            color: #64748b !important; /* Slate 500 */
+            color: #718096 !important;
+            font-weight: 500 !important;
+            font-size: 0.875rem !important;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        div[data-testid="stMetricDelta"] {
+            font-size: 0.875rem !important;
+            font-weight: 600 !important;
+        }
+
+        /* SIDEBAR - MODERN DESIGN */
+        [data-testid="stSidebar"] {
+            background: linear-gradient(180deg, #1a202c 0%, #2d3748 100%);
+            border-right: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        [data-testid="stSidebar"] * {
+            color: #e2e8f0 !important;
+        }
+        
+        [data-testid="stSidebar"] .stSelectbox label,
+        [data-testid="stSidebar"] .stMultiSelect label {
+            color: #cbd5e0 !important;
+            font-weight: 600 !important;
+            font-size: 0.875rem !important;
+        }
+        
+        /* SIDEBAR SECTION HEADERS */
+        [data-testid="stSidebar"] h3 {
+            color: white !important;
+            font-weight: 700 !important;
+            font-size: 1.25rem !important;
+            margin-top: 1.5rem !important;
         }
 
-        /* DATAFRAME TEXT FIX (CRITICAL) */
+        /* DATAFRAME STYLING */
+        div[data-testid="stDataFrame"] {
+            background: white;
+            border-radius: 12px;
+            padding: 1rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        }
+        
         div[data-testid="stDataFrame"] div[role="grid"] {
-            color: #334155 !important; /* Slate 700 */
+            color: #2d3748 !important;
             background-color: white !important;
+            font-size: 0.9rem !important;
         }
+        
         div[data-testid="stDataFrame"] div[role="columnheader"] {
-            color: #0f172a !important;
-            font-weight: 600 !important;
-            background-color: #f1f5f9 !important;
+            color: #1a202c !important;
+            font-weight: 700 !important;
+            background-color: #f7fafc !important;
+            text-transform: uppercase;
+            font-size: 0.75rem !important;
+            letter-spacing: 0.5px;
         }
 
-        /* SIDEBAR STYLING */
-        [data-testid="stSidebar"] {
-            background-color: #1e293b; /* Slate 800 */
+        /* TABS STYLING */
+        .stTabs [data-baseweb="tab-list"] {
+            gap: 8px;
+            background-color: white;
+            border-radius: 12px;
+            padding: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
         }
-        [data-testid="stSidebar"] * {
-            color: #f8fafc !important; /* Light text for sidebar */
+        
+        .stTabs [data-baseweb="tab"] {
+            height: 50px;
+            border-radius: 8px;
+            padding: 0 24px;
+            font-weight: 600;
+            color: #4a5568;
+            background-color: transparent;
         }
-        [data-testid="stSidebar"] .stSelectbox label, 
-        [data-testid="stSidebar"] .stMultiSelect label {
-            color: #94a3b8 !important;
+        
+        .stTabs [aria-selected="true"] {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white !important;
+        }
+
+        /* BUTTONS */
+        .stButton > button {
+            border-radius: 8px;
+            font-weight: 600;
+            padding: 0.5rem 2rem;
+            border: none;
+            transition: all 0.2s ease;
+        }
+        
+        .stButton > button[kind="primary"] {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        
+        .stButton > button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+        }
+
+        /* CUSTOM COMPONENTS */
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 24px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+        }
+        
+        .bg-green { 
+            background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
+            color: #22543d;
+        }
+        
+        .bg-red { 
+            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+            color: #742a2a;
+        }
+        
+        .bg-blue { 
+            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
+            color: #2c5282;
+        }
+        
+        .hotspot-card {
+            background: white;
+            padding: 16px;
+            border-radius: 12px;
+            border-left: 5px solid;
+            margin-bottom: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            transition: all 0.2s ease;
+        }
+        
+        .hotspot-card:hover {
+            transform: translateX(4px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+        }
+
+        /* INFO BOXES */
+        .stAlert {
+            border-radius: 12px;
+            border: none;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         }
 
         /* HEADERS */
-        h1, h2, h3 {
-            color: #0f172a !important;
+        h1, h2, h3, h4 {
+            color: #1a202c !important;
             font-weight: 700 !important;
         }
         
-        /* CUSTOM BADGES */
-        .status-badge {
+        /* COLAB LINK BOX */
+        .colab-box {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            border-left: 5px solid #f59e0b;
+            margin: 1rem 0;
+        }
+        
+        .colab-link {
             display: inline-flex;
             align-items: center;
-            padding: 4px 12px;
-            border-radius: 9999px;
-            font-size: 12px;
+            gap: 8px;
+            padding: 10px 20px;
+            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            color: white !important;
+            text-decoration: none;
+            border-radius: 8px;
             font-weight: 600;
+            transition: all 0.2s ease;
         }
-        .bg-red { background-color: #fee2e2; color: #991b1b; }
-        .bg-green { background-color: #dcfce7; color: #166534; }
-        .bg-blue { background-color: #dbeafe; color: #1e40af; }
         
-        /* CHART BACKGROUNDS */
-        .js-plotly-plot .plotly .main-svg {
-            background-color: rgba(0,0,0,0) !important;
+        .colab-link:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
         }
     </style>
 """, unsafe_allow_html=True)
 
 # ==========================================
-# 3. ROBUST DATA LOADING
+# 3. DATA LOADING
 # ==========================================
 @st.cache_data
 def load_data():
     try:
-        # Attempt to load user data
         df = pd.read_csv('analyzed_aadhaar_data.csv')
     except FileNotFoundError:
-        # FALLBACK: Generate dummy data if file is missing (For Demo Robustness)
-        dates = pd.date_range(start="2025-01-01", periods=100)
+        dates = pd.date_range(start="2025-01-01", periods=150)
         df = pd.DataFrame({
             'date': dates,
-            'state': np.random.choice(['Maharashtra', 'UP', 'Bihar', 'Karnataka', 'Delhi'], 100),
-            'district': np.random.choice(['District A', 'District B', 'District C'], 100),
-            'pincode': np.random.randint(110001, 800000, 100),
-            'RISK_SCORE': np.random.uniform(20, 99, 100),
-            'total_activity': np.random.randint(50, 500, 100),
-            'enrol_adult': np.random.randint(10, 200, 100),
-            'ratio_deviation': np.random.uniform(-0.1, 0.5, 100),
-            'is_weekend': np.random.choice([0, 1], 100, p=[0.7, 0.3])
+            'state': np.random.choice(['Maharashtra', 'Uttar Pradesh', 'Bihar', 'Karnataka', 'Delhi', 'West Bengal', 'Tamil Nadu'], 150),
+            'district': np.random.choice(['District A', 'District B', 'District C', 'District D', 'District E'], 150),
+            'pincode': np.random.randint(110001, 800000, 150),
+            'RISK_SCORE': np.random.uniform(15, 98, 150),
+            'total_activity': np.random.randint(50, 800, 150),
+            'enrol_adult': np.random.randint(10, 400, 150),
+            'ratio_deviation': np.random.uniform(-0.15, 0.6, 150),
+            'is_weekend': np.random.choice([0, 1], 150, p=[0.7, 0.3])
         })
 
-    # Standardize Date
     if 'date' in df.columns:
         df['date'] = pd.to_datetime(df['date'])
     
-    # ---------------------------------------------------------
-    # GEOGRAPHIC FIX: Generate Coords Covering ALL India
-    # ---------------------------------------------------------
-    np.random.seed(42)  # Fixed seed for consistent map
-    # India Bounds: Lat ~8 to ~32, Lon ~68 to ~97
-    df['lat'] = np.random.uniform(8.5, 32.0, size=len(df))
-    df['lon'] = np.random.uniform(70.0, 88.0, size=len(df))
+    # Geographic coordinates for India - State-based realistic placement
+    np.random.seed(42)
+    state_coords = {
+        'Maharashtra': {'lat': (15.5, 22.0), 'lon': (72.5, 80.5)},
+        'Uttar Pradesh': {'lat': (23.5, 30.5), 'lon': (77.0, 84.5)},
+        'Bihar': {'lat': (24.0, 27.5), 'lon': (83.5, 88.5)},
+        'Karnataka': {'lat': (11.5, 18.5), 'lon': (74.0, 78.5)},
+        'Delhi': {'lat': (28.4, 28.9), 'lon': (76.8, 77.5)},
+        'West Bengal': {'lat': (21.5, 27.5), 'lon': (85.5, 89.5)},
+        'Tamil Nadu': {'lat': (8.0, 13.5), 'lon': (76.5, 80.5)}
+    }
+    
+    def assign_coords(row):
+        state = row['state']
+        if state in state_coords:
+            coords = state_coords[state]
+            return pd.Series({
+                'lat': np.random.uniform(coords['lat'][0], coords['lat'][1]),
+                'lon': np.random.uniform(coords['lon'][0], coords['lon'][1])
+            })
+        else:
+            return pd.Series({'lat': np.random.uniform(8.5, 32.0), 'lon': np.random.uniform(70.0, 88.0)})
+    
+    df[['lat', 'lon']] = df.apply(assign_coords, axis=1)
     
-    # Risk Categorization
     df['risk_category'] = pd.cut(
         df['RISK_SCORE'],
         bins=[-1, 50, 75, 85, 100],
@@ -146,21 +318,20 @@ def load_data():
     
     return df
 
-# Load Data
 df = load_data()
 
 # ==========================================
-# 4. SIDEBAR & FILTERS
+# 4. SIDEBAR
 # ==========================================
 with st.sidebar:
-    st.markdown("### 🛡️ Sentinel Control")
+    st.markdown("### 🛡️ SENTINEL CONTROL CENTER")
     st.markdown("---")
     
-    # State Filter
+    # Filters
+    st.markdown("#### 📍 Geographic Filters")
     state_list = ['All'] + sorted(df['state'].unique().tolist())
-    selected_state = st.selectbox("📍 Select State", state_list)
+    selected_state = st.selectbox("State", state_list, key="state_filter")
     
-    # District Filter (Dynamic)
     if selected_state != 'All':
         filtered_df = df[df['state'] == selected_state]
         district_list = ['All'] + sorted(filtered_df['district'].unique().tolist())
@@ -168,16 +339,16 @@ with st.sidebar:
         filtered_df = df.copy()
         district_list = ['All']
         
-    selected_district = st.selectbox("🏙️ Select District", district_list)
+    selected_district = st.selectbox("District", district_list, key="district_filter")
     
     if selected_district != 'All':
         filtered_df = filtered_df[filtered_df['district'] == selected_district]
-        
+    
     st.markdown("---")
+    st.markdown("#### 🚨 Risk Filters")
     
-    # Risk Filter
     risk_filter = st.multiselect(
-        "🚨 Risk Level",
+        "Risk Levels",
         options=['Low', 'Medium', 'High', 'Critical'],
         default=['High', 'Critical']
     )
@@ -186,167 +357,548 @@ with st.sidebar:
         filtered_df = filtered_df[filtered_df['risk_category'].isin(risk_filter)]
     
     st.markdown("---")
-    st.info(f"**User:** UIDAI_Officer\n\n**Team:** UIDAI_4571")
+    st.markdown("#### ⚙️ Advanced Options")
+    
+    show_weekend = st.checkbox("Show Weekend Activity Only", value=False)
+    if show_weekend:
+        filtered_df = filtered_df[filtered_df['is_weekend'] == 1]
+    
+    min_activity = st.slider("Min. Transaction Volume", 0, 800, 0)
+    filtered_df = filtered_df[filtered_df['total_activity'] >= min_activity]
+    
+    st.markdown("---")
+    st.info("**👤 User:** UIDAI_Officer\n\n**🏢 Team:** UIDAI_4571\n\n**📅 Session:** " + datetime.now().strftime("%d %b %Y"))
 
 # ==========================================
-# 5. HEADER & KPI SECTION
+# 5. HEADER
 # ==========================================
-col1, col2 = st.columns([3, 1])
-with col1:
-    st.title("Project Sentinel Dashboard")
-    st.markdown("Context-Aware Fraud Detection System")
+st.markdown("""
+<div class="main-header">
+    <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div>
+            <div class="main-title">🛡️ PROJECT SENTINEL</div>
+            <div class="main-subtitle">AI-Powered Fraud Detection & Risk Analysis System</div>
+        </div>
+        <div style="text-align: right;">
+            <span class="status-badge bg-green">● SYSTEM ACTIVE</span>
+            <div style="font-size: 0.875rem; opacity: 0.9; margin-top: 8px;">
+                Last Sync: Just now
+            </div>
+        </div>
+    </div>
+</div>
+""", unsafe_allow_html=True)
 
-with col2:
-    # Live Status Indicator
-    st.markdown("""
-    <div style="text-align: right; padding-top: 20px;">
-        <span class="status-badge bg-green">● System Online</span>
-        <div style="font-size: 12px; color: #64748b; margin-top: 5px;">Last Updated: Just now</div>
+# ==========================================
+# 6. COLAB INTEGRATION SECTION
+# ==========================================
+st.markdown("""
+<div class="colab-box">
+    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+        <div>
+            <h4 style="margin: 0; color: #1a202c;">📊 Model Training & Analysis</h4>
+            <p style="margin: 0.5rem 0 0 0; color: #4a5568; font-size: 0.9rem;">
+                Access the full ML pipeline, model training, and detailed analytics in Google Colab
+            </p>
+        </div>
+        <div>
+            <a href="https://colab.research.google.com/drive/1YAQ4nfxltvG_cts3fmGc_zi2JQc4oPOT?usp=sharing" 
+               target="_blank" 
+               class="colab-link">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+                    <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
+                    <path d="M12 6c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 10c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4z"/>
+                </svg>
+                Open in Colab
+            </a>
+        </div>
     </div>
-    """, unsafe_allow_html=True)
+</div>
+""", unsafe_allow_html=True)
 
-st.markdown("---")
+st.markdown("##")
 
-# KPI METRICS
-m1, m2, m3, m4 = st.columns(4)
+# ==========================================
+# 7. KPI METRICS
+# ==========================================
 total_centers = len(filtered_df)
 high_risk = len(filtered_df[filtered_df['RISK_SCORE'] > 75])
+critical_risk = len(filtered_df[filtered_df['RISK_SCORE'] > 85])
 avg_risk = filtered_df['RISK_SCORE'].mean() if not filtered_df.empty else 0
 weekend_alerts = len(filtered_df[(filtered_df['is_weekend'] == 1) & (filtered_df['RISK_SCORE'] > 70)])
 
-m1.metric("Total Centers Analyzed", f"{total_centers:,}", border=True)
-m2.metric("High Risk Alerts", f"{high_risk}", delta="Action Required", delta_color="inverse", border=True)
-m3.metric("Avg. Risk Score", f"{avg_risk:.1f}/100", border=True)
-m4.metric("Weekend Anomalies", f"{weekend_alerts}", "Unauthorized Activity", delta_color="off", border=True)
+col1, col2, col3, col4, col5 = st.columns(5)
+
+with col1:
+    st.metric("Centers Analyzed", f"{total_centers:,}", border=True)
+    
+with col2:
+    st.metric("High Risk", f"{high_risk}", 
+              delta=f"{(high_risk/total_centers*100):.1f}%" if total_centers > 0 else "0%",
+              delta_color="inverse", border=True)
+    
+with col3:
+    st.metric("Critical Cases", f"{critical_risk}", 
+              delta="Immediate Action",
+              delta_color="inverse", border=True)
+    
+with col4:
+    st.metric("Avg Risk Score", f"{avg_risk:.1f}", 
+              delta="out of 100",
+              delta_color="off", border=True)
+    
+with col5:
+    st.metric("Weekend Anomalies", f"{weekend_alerts}", 
+              delta="Suspicious",
+              delta_color="inverse", border=True)
 
-st.markdown("##") # Spacer
+st.markdown("##")
 
 # ==========================================
-# 6. MAIN TABS
+# 8. MAIN TABS
 # ==========================================
-tab_map, tab_list, tab_charts = st.tabs(["🗺️ Geographic Risk", "📋 Priority List (Action)", "📊 Pattern Analytics"])
+tab1, tab2, tab3, tab4 = st.tabs([
+    "🗺️ Geographic Risk Map", 
+    "📋 Priority Investigation List", 
+    "📊 Pattern Analytics",
+    "📈 Trend Analysis"
+])
 
-# --- TAB 1: ENHANCED MAP ---
-with tab_map:
-    col_map, col_details = st.columns([3, 1])
+# --- TAB 1: MAP ---
+with tab1:
+    col_map, col_sidebar = st.columns([3, 1])
     
     with col_map:
         if not filtered_df.empty:
-            # Using Open-Street-Map for better contrast
+            # Prepare hover template data
+            hover_text = []
+            for idx, row in filtered_df.iterrows():
+                text = f"<b>{row['district']}, {row['state']}</b><br>"
+                text += f"PIN: {row['pincode']}<br>"
+                text += f"Risk Score: {row['RISK_SCORE']:.1f}/100<br>"
+                text += f"Activity Volume: {row['total_activity']}<br>"
+                text += f"Adult Enrollments: {row['enrol_adult']}<br>"
+                text += f"Date: {row['date'].strftime('%d %b %Y')}"
+                hover_text.append(text)
+            
+            filtered_df['hover_info'] = hover_text
+            
+            # Create map with better visualization
             fig_map = px.scatter_mapbox(
                 filtered_df,
                 lat="lat",
                 lon="lon",
                 color="RISK_SCORE",
                 size="total_activity",
-                color_continuous_scale=["#22c55e", "#eab308", "#ef4444"], # Green -> Yellow -> Red
-                size_max=25,
-                zoom=4,
-                center={"lat": 20.5937, "lon": 78.9629}, # Center of India
-                hover_name="pincode",
-                hover_data={"district": True, "state": True, "RISK_SCORE": True, "lat": False, "lon": False},
-                mapbox_style="open-street-map", # Free, High Contrast
-                height=600,
-                title="<b>Live Fraud Risk Heatmap</b>"
+                color_continuous_scale=["#10b981", "#fbbf24", "#f97316", "#ef4444"],
+                size_max=35,
+                zoom=4.5,
+                center={"lat": 20.5937, "lon": 78.9629},
+                custom_data=['hover_info'],
+                mapbox_style="open-street-map",
+                height=650,
             )
-            fig_map.update_layout(margin={"r":0,"t":40,"l":0,"b":0})
+            
+            # Update hover template
+            fig_map.update_traces(
+                hovertemplate='%{customdata[0]}<extra></extra>',
+                marker=dict(
+                    opacity=0.8,
+                    line=dict(width=1, color='white')
+                )
+            )
+            
+            fig_map.update_layout(
+                margin={"r":0,"t":10,"l":0,"b":0},
+                coloraxis_colorbar=dict(
+                    title="<b>Risk Score</b>",
+                    thickness=20,
+                    len=0.7,
+                    tickmode='linear',
+                    tick0=0,
+                    dtick=20,
+                    tickfont=dict(size=11),
+                    titlefont=dict(size=13, family="Inter")
+                ),
+                font=dict(family="Inter", size=12),
+                hoverlabel=dict(
+                    bgcolor="white",
+                    font_size=13,
+                    font_family="Inter"
+                )
+            )
+            
             st.plotly_chart(fig_map, use_container_width=True)
+            
+            # Add map legend
+            st.markdown("""
+            <div style="background: white; padding: 15px; border-radius: 8px; margin-top: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <div style="display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 15px;">
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <div style="width: 20px; height: 20px; border-radius: 50%; background: #10b981;"></div>
+                        <span style="font-size: 0.85rem; color: #4a5568;"><b>Low Risk</b> (0-50)</span>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <div style="width: 20px; height: 20px; border-radius: 50%; background: #fbbf24;"></div>
+                        <span style="font-size: 0.85rem; color: #4a5568;"><b>Medium Risk</b> (50-75)</span>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <div style="width: 20px; height: 20px; border-radius: 50%; background: #f97316;"></div>
+                        <span style="font-size: 0.85rem; color: #4a5568;"><b>High Risk</b> (75-85)</span>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <div style="width: 20px; height: 20px; border-radius: 50%; background: #ef4444;"></div>
+                        <span style="font-size: 0.85rem; color: #4a5568;"><b>Critical</b> (85-100)</span>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <div style="font-size: 0.85rem; color: #718096;">
+                            <i>Bubble size = Transaction volume</i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
         else:
-            st.warning("No data matches current filters.")
-
-    with col_details:
-        st.subheader("Top Hotspots")
-        # Aggregated View
+            st.warning("⚠️ No data matches current filters. Please adjust your selection.")
+    
+    with col_sidebar:
+        st.markdown("### 🎯 Top Risk Hotspots")
+        st.markdown("---")
+        
         if not filtered_df.empty:
-            top_districts = filtered_df.groupby('district')['RISK_SCORE'].mean().sort_values(ascending=False).head(5)
-            for district, score in top_districts.items():
-                color = "#ef4444" if score > 80 else "#f59e0b"
+            top_districts = filtered_df.groupby('district').agg({
+                'RISK_SCORE': 'mean',
+                'total_activity': 'sum'
+            }).sort_values('RISK_SCORE', ascending=False).head(8)
+            
+            for idx, (district, row) in enumerate(top_districts.iterrows(), 1):
+                score = row['RISK_SCORE']
+                volume = row['total_activity']
+                
+                if score > 85:
+                    color = "#ef4444"
+                    label = "CRITICAL"
+                elif score > 75:
+                    color = "#f59e0b"
+                    label = "HIGH"
+                else:
+                    color = "#10b981"
+                    label = "MEDIUM"
+                
                 st.markdown(f"""
-                <div style="background: white; padding: 12px; border-radius: 8px; border-left: 5px solid {color}; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
-                    <div style="font-weight: 600; color: #1e293b;">{district}</div>
-                    <div style="font-size: 13px; color: #64748b;">Avg Risk: <b>{score:.1f}</b></div>
+                <div class="hotspot-card" style="border-left-color: {color};">
+                    <div style="display: flex; justify-content: space-between; align-items: center;">
+                        <div style="font-weight: 700; color: #1a202c; font-size: 0.95rem;">
+                            #{idx} {district}
+                        </div>
+                        <span style="background: {color}; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700;">
+                            {label}
+                        </span>
+                    </div>
+                    <div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.85rem;">
+                        <span style="color: #718096;">Risk: <b style="color: #2d3748;">{score:.1f}</b></span>
+                        <span style="color: #718096;">Vol: <b style="color: #2d3748;">{int(volume)}</b></span>
+                    </div>
                 </div>
                 """, unsafe_allow_html=True)
 
-# --- TAB 2: FIXED DATAFRAME ---
-with tab_list:
-    st.subheader("Target Investigation List")
-    st.markdown("Filter: *Showing centers with Risk Score > 75*")
-    
-    # Filter for high risk
-    target_list = filtered_df[filtered_df['RISK_SCORE'] > 75].sort_values('RISK_SCORE', ascending=False)
-    
-    # Display Dataframe with enhanced config
-    st.dataframe(
-        target_list[['date', 'state', 'district', 'pincode', 'enrol_adult', 'total_activity', 'RISK_SCORE']],
-        column_config={
-            "RISK_SCORE": st.column_config.ProgressColumn(
-                "Risk Probability",
-                help="Probability of fraud based on context analysis",
-                format="%d%%",
-                min_value=0,
-                max_value=100,
-            ),
-            "date": st.column_config.DateColumn("Date", format="DD MMM YYYY"),
-            "total_activity": st.column_config.NumberColumn("Volume"),
-            "enrol_adult": st.column_config.NumberColumn("Adult Enrols"),
-        },
-        use_container_width=True,
-        hide_index=True,
-        height=400
-    )
+# --- TAB 2: PRIORITY LIST ---
+with tab2:
+    col_header, col_export = st.columns([3, 1])
+    
+    with col_header:
+        st.markdown("### 🎯 Investigation Priority Queue")
+        st.caption("Sorted by risk score - Immediate action required for scores > 85")
     
-    # Export Buttons
-    c1, c2 = st.columns([1, 4])
-    with c1:
+    with col_export:
+        target_list = filtered_df[filtered_df['RISK_SCORE'] > 75].sort_values('RISK_SCORE', ascending=False)
+        
         st.download_button(
-            "📥 Download CSV",
+            "📥 Export Report",
             data=target_list.to_csv(index=False),
-            file_name="uidai_sentinel_report.csv",
+            file_name=f"sentinel_report_{datetime.now().strftime('%Y%m%d_%H%M')}.csv",
             mime="text/csv",
-            type="primary"
+            type="primary",
+            use_container_width=True
+        )
+    
+    st.markdown("##")
+    
+    if not target_list.empty:
+        st.dataframe(
+            target_list[['date', 'state', 'district', 'pincode', 'enrol_adult', 'total_activity', 'ratio_deviation', 'RISK_SCORE']],
+            column_config={
+                "RISK_SCORE": st.column_config.ProgressColumn(
+                    "Risk Score",
+                    help="AI-calculated fraud probability",
+                    format="%.1f%%",
+                    min_value=0,
+                    max_value=100,
+                ),
+                "date": st.column_config.DateColumn("Date", format="DD MMM YYYY"),
+                "total_activity": st.column_config.NumberColumn("Volume", format="%d"),
+                "enrol_adult": st.column_config.NumberColumn("Adult Enrollments", format="%d"),
+                "ratio_deviation": st.column_config.NumberColumn("Deviation", format="%.3f"),
+                "state": "State",
+                "district": "District",
+                "pincode": st.column_config.NumberColumn("PIN Code", format="%d")
+            },
+            use_container_width=True,
+            hide_index=True,
+            height=500
         )
+        
+        st.info(f"📊 **{len(target_list)}** centers flagged for investigation | **{len(target_list[target_list['RISK_SCORE'] > 85])}** critical priority")
+    else:
+        st.success("✅ No high-risk centers found with current filters!")
 
-# --- TAB 3: CHARTS ---
-with tab_charts:
-    c1, c2 = st.columns(2)
+# --- TAB 3: ANALYTICS ---
+with tab3:
+    col1, col2 = st.columns(2)
     
-    with c1:
-        st.subheader("Ghost ID Pattern (Ratio Deviation)")
-        # Scatter Plot - Deviation vs Volume
+    with col1:
+        st.markdown("### 🔍 Ghost ID Pattern Analysis")
+        
         fig_scatter = px.scatter(
             filtered_df,
             x="total_activity",
             y="ratio_deviation",
             color="risk_category",
-            color_discrete_map={'Critical': '#ef4444', 'High': '#f97316', 'Medium': '#eab308', 'Low': '#22c55e'},
-            title="Deviation from District Baseline",
-            labels={"ratio_deviation": "Deviation Score", "total_activity": "Daily Transactions"},
-            hover_data=['pincode', 'district']
+            size="RISK_SCORE",
+            color_discrete_map={
+                'Critical': '#dc2626',
+                'High': '#ea580c',
+                'Medium': '#ca8a04',
+                'Low': '#16a34a'
+            },
+            labels={
+                "ratio_deviation": "Deviation from Baseline",
+                "total_activity": "Daily Transactions"
+            },
+            hover_data=['pincode', 'district', 'state'],
+            height=400
         )
-        # Add Threshold Line
-        fig_scatter.add_hline(y=0.2, line_dash="dash", line_color="red", annotation_text="Fraud Threshold")
+        
+        fig_scatter.add_hline(
+            y=0.2, 
+            line_dash="dash", 
+            line_color="red",
+            annotation_text="Fraud Threshold (0.2)",
+            annotation_position="right"
+        )
+        
+        fig_scatter.update_layout(
+            font=dict(family="Inter"),
+            plot_bgcolor='rgba(0,0,0,0)',
+            paper_bgcolor='rgba(0,0,0,0)'
+        )
+        
         st.plotly_chart(fig_scatter, use_container_width=True)
-
-    with c2:
-        st.subheader("Risk Distribution")
+    
+    with col2:
+        st.markdown("### 📊 Risk Distribution")
+        
         fig_hist = px.histogram(
-            filtered_df, 
-            x="RISK_SCORE", 
-            nbins=20,
-            color_discrete_sequence=['#3b82f6'],
-            title="Histogram of Risk Scores"
+            filtered_df,
+            x="RISK_SCORE",
+            nbins=25,
+            color_discrete_sequence=['#8b5cf6'],
+            labels={"RISK_SCORE": "Risk Score"},
+            height=400
+        )
+        
+        fig_hist.update_layout(
+            bargap=0.05,
+            font=dict(family="Inter"),
+            plot_bgcolor='rgba(0,0,0,0)',
+            paper_bgcolor='rgba(0,0,0,0)',
+            showlegend=False
         )
-        fig_hist.update_layout(bargap=0.1)
+        
         st.plotly_chart(fig_hist, use_container_width=True)
+    
+    st.markdown("##")
+    
+    col3, col4 = st.columns(2)
+    
+    with col3:
+        st.markdown("### 🏛️ State-wise Risk Summary")
+        
+        state_summary = filtered_df.groupby('state').agg({
+            'RISK_SCORE': 'mean',
+            'total_activity': 'sum'
+        }).sort_values('RISK_SCORE', ascending=False).reset_index()
+        
+        fig_bar = px.bar(
+            state_summary,
+            x='state',
+            y='RISK_SCORE',
+            color='RISK_SCORE',
+            color_continuous_scale='RdYlGn_r',
+            labels={'RISK_SCORE': 'Avg Risk Score', 'state': 'State'},
+            height=400
+        )
+        
+        fig_bar.update_layout(
+            font=dict(family="Inter"),
+            plot_bgcolor='rgba(0,0,0,0)',
+            paper_bgcolor='rgba(0,0,0,0)',
+            showlegend=False
+        )
+        
+        st.plotly_chart(fig_bar, use_container_width=True)
+    
+    with col4:
+        st.markdown("### 📈 Risk Category Breakdown")
+        
+        risk_counts = filtered_df['risk_category'].value_counts()
+        
+        fig_pie = px.pie(
+            values=risk_counts.values,
+            names=risk_counts.index,
+            color=risk_counts.index,
+            color_discrete_map={
+                'Critical': '#dc2626',
+                'High': '#ea580c',
+                'Medium': '#ca8a04',
+                'Low': '#16a34a'
+            },
+            height=400
+        )
+        
+        fig_pie.update_traces(
+            textposition='inside',
+            textinfo='percent+label',
+            hovertemplate='<b>%{label}</b><br>Count: %{value}<br>Percentage: %{percent}<extra></extra>'
+        )
+        
+        fig_pie.update_layout(
+            font=dict(family="Inter"),
+            showlegend=True,
+            legend=dict(orientation="h", yanchor="bottom", y=-0.2, xanchor="center", x=0.5)
+        )
+        
+        st.plotly_chart(fig_pie, use_container_width=True)
+
+# --- TAB 4: TRENDS ---
+with tab4:
+    st.markdown("### 📈 Temporal Analysis")
+    
+    if 'date' in filtered_df.columns and not filtered_df.empty:
+        # Time series of risk scores
+        daily_risk = filtered_df.groupby('date').agg({
+            'RISK_SCORE': 'mean',
+            'total_activity': 'sum'
+        }).reset_index()
+        
+        fig_trend = go.Figure()
+        
+        fig_trend.add_trace(go.Scatter(
+            x=daily_risk['date'],
+            y=daily_risk['RISK_SCORE'],
+            mode='lines+markers',
+            name='Avg Risk Score',
+            line=dict(color='#8b5cf6', width=3),
+            marker=dict(size=6),
+            fill='tozeroy',
+            fillcolor='rgba(139, 92, 246, 0.1)'
+        ))
+        
+        fig_trend.update_layout(
+            height=400,
+            font=dict(family="Inter"),
+            plot_bgcolor='rgba(0,0,0,0)',
+            paper_bgcolor='rgba(0,0,0,0)',
+            hovermode='x unified',
+            xaxis_title="Date",
+            yaxis_title="Average Risk Score"
+        )
+        
+        st.plotly_chart(fig_trend, use_container_width=True)
+        
+        st.markdown("##")
+        
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            st.markdown("### 📅 Weekend vs Weekday Risk")
+            
+            weekend_comparison = filtered_df.groupby('is_weekend').agg({
+                'RISK_SCORE': 'mean',
+                'total_activity': 'sum'
+            }).reset_index()
+            
+            weekend_comparison['day_type'] = weekend_comparison['is_weekend'].map({
+                0: 'Weekday',
+                1: 'Weekend'
+            })
+            
+            fig_weekend = px.bar(
+                weekend_comparison,
+                x='day_type',
+                y='RISK_SCORE',
+                color='day_type',
+                color_discrete_map={'Weekday': '#3b82f6', 'Weekend': '#ef4444'},
+                labels={'RISK_SCORE': 'Average Risk Score', 'day_type': ''},
+                height=400
+            )
+            
+            fig_weekend.update_layout(
+                font=dict(family="Inter"),
+                plot_bgcolor='rgba(0,0,0,0)',
+                paper_bgcolor='rgba(0,0,0,0)',
+                showlegend=False
+            )
+            
+            st.plotly_chart(fig_weekend, use_container_width=True)
+        
+        with col2:
+            st.markdown("### 📊 Activity Volume Trends")
+            
+            fig_activity = go.Figure()
+            
+            fig_activity.add_trace(go.Bar(
+                x=daily_risk['date'],
+                y=daily_risk['total_activity'],
+                name='Total Activity',
+                marker_color='#06b6d4'
+            ))
+            
+            fig_activity.update_layout(
+                height=400,
+                font=dict(family="Inter"),
+                plot_bgcolor='rgba(0,0,0,0)',
+                paper_bgcolor='rgba(0,0,0,0)',
+                xaxis_title="Date",
+                yaxis_title="Total Transactions",
+                showlegend=False
+            )
+            
+            st.plotly_chart(fig_activity, use_container_width=True)
+    else:
+        st.warning("⚠️ No temporal data available for analysis.")
 
 # ==========================================
-# 7. FOOTER
+# 9. FOOTER
 # ==========================================
 st.markdown("---")
 st.markdown("""
-<div style="text-align: center; font-size: 13px; color: #94a3b8;">
-    <b>Project Sentinel</b> | UIDAI Hackathon 2026 | Team UIDAI_4571<br>
-    <i>Confidential - For Official Use Only</i>
+<div style="background: white; padding: 1.5rem; border-radius: 12px; margin-top: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);">
+    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+        <div style="text-align: left;">
+            <div style="font-weight: 700; color: #1a202c; font-size: 1.1rem;">🛡️ Project Sentinel</div>
+            <div style="color: #718096; font-size: 0.875rem; margin-top: 4px;">
+                AI-Powered Fraud Detection System
+            </div>
+        </div>
+        <div style="text-align: center; color: #4a5568; font-size: 0.85rem;">
+            <div><b>UIDAI Hackathon 2026</b></div>
+            <div style="margin-top: 4px;">Team UIDAI_4571</div>
+        </div>
+        <div style="text-align: right; color: #94a3b8; font-size: 0.8rem; font-style: italic;">
+            <div>Confidential</div>
+            <div>For Official Use Only</div>
+        </div>
+    </div>
 </div>
 """, unsafe_allow_html=True)