Upload 14 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+vendor_index.faiss filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,27 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies for FAISS and compiling native code if needed
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libgomp1 \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+
+# Upgrade pip and install requirements
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Expose port for Gradio
+EXPOSE 7860
+
+# Run the data generation script to have sample data on startup
+RUN python generate_real_data.py
+
+# Run the app
+CMD ["python", "main.py"]

README.md

@@ -1,12 +1,121 @@
 ---
-title: ReconAI
-emoji: 🌖
-colorFrom: yellow
+title: AI Financial Reconciliation Engine
+emoji: 🧠
+colorFrom: blue
 colorTo: indigo
 sdk: docker
+app_port: 7860
 pinned: false
-license: mit
-short_description: Financial Reconcillation Engine
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🧠 AI Financial Reconciliation Engine
+
+Automated Financial Auditing using Machine Learning and LLMs.
+
+## 🚀 Overview
+The **AI Financial Reconciliation Engine** is an intelligent system designed to automate the process of matching internal accounting records (Books) with external tax filings (GST). By combining **Fuzzy Logic**, **AI Semantic Embeddings**, and **LLM reasoning**, the system identifies discrepancies, detects fraudulent anomalies, and provides natural language explanations for auditors.
+
+## ✨ Features
+- **Intelligent Matching**: Combines basic matching with Fuzzy and AI semantic analysis to reconcile records even with typos or name variations.
+- **Anomaly Detection**: Uses the `IsolationForest` algorithm to detect unusual transaction patterns and high-risk invoices.
+- **AI Explanations**: Integrates Mistral LLM to provide human-readable audit comments for every discrepancy.
+- **Interactive Dashboard**: A professional Gradio interface with summary metrics, risk-sorted results, and CSV export.
+- **Graph Fraud Network**: Visualizes circular trading and multi-hop tax siphoning fraud rings using `NetworkX` and `Matplotlib`.
+- **Persistent Vector Memory**: Uses C++ compiled `FAISS` algorithms to permanently remember vendor vector embeddings.
+- **Deployment Ready**: Containerized with **Docker** and hosted on **HuggingFace Spaces**.
+
+## 🛠 Tech Stack
+- **Languages**: Python
+- **AI/ML**: Scikit-Learn, Sentence-Transformers, RapidFuzz
+- **Fraud Engine**: FAISS, NetworkX, Matplotlib
+- **LLM**: Mistral AI API
+- **Frontend**: Gradio
+- **Infrastructure**: Docker, HuggingFace Spaces
+
+## 📂 Installation (Local)
+1. Clone the repository.
+2. Install dependencies: `pip install -r requirements.txt`
+3. Set your `MISTRAL_API_KEY` in a `.env` file.
+4. Run the app: `python main.py`
+
+### Prerequisites
+
+- Python 3.11+
+- Virtual Environment (venv)
+
+### Setup
+
+1. Clone the repository
+2. Create and activate virtual environment:
+   
+```bash
+python -m venv venv
+source venv/bin/activate  # Linux/macOS
+venv\\Scripts\\activate     # Windows
+```
+
+3. Install dependencies:
+   
+```bash
+pip install -r requirements.txt
+```
+
+4. Configure environment variables:
+   - Copy `.env.example` to `.env`
+   - Add your API keys
+
+## Usage
+
+### Quick Start
+
+```python
+from utils import create_sample_data
+from reconciliation import ReconciliationEngine
+from anomaly import AnomalyDetector
+
+# Create sample data
+data = create_sample_data(num_records=100)
+source_df = data['source']
+target_df = data['target']
+
+# Run reconciliation
+engine = ReconciliationEngine(threshold=85.0)
+result = engine.reconcile(source_df, target_df, 'VendorName', 'VendorName', 'Amount')
+
+# Detect anomalies
+detector = AnomalyDetector(contamination=0.05)
+anomaly_result = detector.detect_anomalies(source_df)
+```
+
+### Web Interface
+
+```bash
+python main.py
+```
+
+Access the UI at `http://localhost:7860`
+
+### Docker
+
+```bash
+docker build -t reconciliation-engine .
+docker run -p 7860:7860 reconciliation-engine
+```
+
+## Project Structure
+
+```
+├── sample_data/         # Live CSV data and scenarios
+├── main.py                 # Main FastAPI backend serving UI
+├── reconciliation.py      # Core reconciliation engine & FAISS Index
+├── anomaly.py             # Anomaly detection module
+├── fraud_graph.py         # NetworkX Circular Trading Detector
+├── gst_api.py             # Real-time Local Registry Gateway
+├── generate_real_data.py  # Script to generate 1800+ realistic rows
+├── llm_explainer.py       # LLM-powered explanations
+├── utils.py               # Utility functions
+├── requirements.txt    # Python dependencies
+├── Dockerfile         # Docker configuration
+├── .env               # Environment variables
+└── README.md          # This file
+```

anomaly.py

@@ -0,0 +1,89 @@
+import pandas as pd
+import numpy as np
+from sklearn.ensemble import IsolationForest
+from sklearn.preprocessing import StandardScaler
+import logging
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class AnomalyDetector:
+    def __init__(self, contamination=0.05):
+        self.contamination = contamination
+        self.model = IsolationForest(contamination=self.contamination, random_state=42, n_estimators=100)
+        self.scaler = StandardScaler()
+
+    def prepare_features(self, df, amount_col):
+        features_df = df.copy()
+        
+        # Basic amount features
+        features_df['amount_log'] = np.log1p(np.abs(features_df[amount_col].fillna(0)))
+        features_df['amount_sign'] = np.sign(features_df[amount_col].fillna(0))
+        
+        feature_columns = [amount_col, 'amount_log', 'amount_sign']
+        
+        # Statistical features
+        if len(df) > 1:
+            features_df['amount_zscore'] = (
+                (features_df[amount_col] - features_df[amount_col].mean()) / 
+                (features_df[amount_col].std() + 1e-9)
+            )
+            feature_columns.append('amount_zscore')
+            
+            # Try to do rolling stats if date column exists
+            date_col = next((col for col in ['InvoiceDate', 'date', 'Date'] if col in features_df.columns), None)
+            if date_col:
+                # Keep track of original index to restore order later
+                features_df['original_idx'] = features_df.index
+                features_df[date_col] = pd.to_datetime(features_df[date_col], errors='coerce')
+                features_df = features_df.sort_values(date_col)
+                
+                features_df['amount_rolling_mean'] = features_df[amount_col].rolling(7, min_periods=1).mean()
+                features_df['amount_rolling_std'] = features_df[amount_col].rolling(7, min_periods=1).std().fillna(0)
+                feature_columns.extend(['amount_rolling_mean', 'amount_rolling_std'])
+                
+                # Restore original index order so we don't shuffle the output dataframe
+                features_df = features_df.sort_values('original_idx')
+
+        features_df = features_df.fillna(0)
+        return features_df, feature_columns
+
+    def detect_anomalies(self, df, amount_col='Amount'):
+        """
+        Detects anomalies in the given DataFrame based on the specified amount column.
+        Returns the DataFrame with 'IsAnomaly' and 'AnomalyScore' appended.
+        """
+        logger.info(f"Running advanced anomaly detection on column: {amount_col}")
+        
+        if df.empty or amount_col not in df.columns:
+            logger.warning("DataFrame is empty or amount column not found.")
+            df['IsAnomaly'] = False
+            df['AnomalyScore'] = 0.0
+            return df
+
+        try:
+            # Prepare advanced features
+            features_df, feature_cols = self.prepare_features(df, amount_col)
+            X = features_df[feature_cols].values
+            
+            # Scale features
+            X_scaled = self.scaler.fit_transform(X)
+            
+            # Fit and predict
+            predictions = self.model.fit_predict(X_scaled)
+            scores = self.model.decision_function(X_scaled)
+            
+            # -1 indicates anomaly, 1 indicates normal
+            df['IsAnomaly'] = predictions == -1
+            
+            # Normalize scores: lower IsolationForest score = more anomalous.
+            # We invert it so a higher positive score = higher anomaly risk.
+            df['AnomalyScore'] = -scores
+            
+            logger.info(f"Anomaly detection complete. Found {df['IsAnomaly'].sum()} anomalies.")
+        except Exception as e:
+            logger.error(f"Error during advanced anomaly detection: {e}")
+            df['IsAnomaly'] = False
+            df['AnomalyScore'] = 0.0
+
+        return df

fraud_graph.py

@@ -0,0 +1,114 @@
+import networkx as nx
+import matplotlib.pyplot as plt
+import pandas as pd
+import io
+import logging
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class FraudGraph:
+    def __init__(self):
+        self.graph = nx.DiGraph()
+
+    def build_graph(self, df, source_col='VendorName', target_col='BuyerName', amount_col='Amount'):
+        """
+        Builds a directed graph of transactions.
+        Assuming we have some buyer info, but in standard Books vs GST, 
+        we usually have our company as the buyer and vendors as sellers.
+        To simulate circular trading, we might need a dataset that has multi-party transactions.
+        For demonstration, we'll try to find any cycles if they exist.
+        """
+        self.graph.clear()
+        
+        # If 'BuyerName' isn't there, we'll simulate it by assuming 'OurCompany' is the buyer
+        # but to show circular trading, let's look for duplicate invoices or anomalies
+        
+        if target_col not in df.columns:
+             logger.warning(f"No '{target_col}' column. Assuming central company.")
+             buyer_col_actual = 'TargetEntity'
+             df[buyer_col_actual] = 'OurCompany'
+        else:
+             buyer_col_actual = target_col
+
+        for _, row in df.iterrows():
+            source = str(row.get(source_col, 'Unknown'))
+            target = str(row.get(buyer_col_actual, 'Unknown'))
+            raw_w = row.get(amount_col, 0)
+            if pd.isna(raw_w):
+                raw_w = 0
+            weight = float(raw_w)
+            
+            if self.graph.has_edge(source, target):
+                self.graph[source][target]['weight'] += weight
+            else:
+                self.graph.add_edge(source, target, weight=weight)
+                
+    def detect_cycles(self):
+        try:
+            cycles = list(nx.simple_cycles(self.graph))
+            # Filter out self-loops (length 1) which just represent exact matches between Books and GST
+            cycles = [c for c in cycles if len(c) > 1]
+            return cycles
+        except Exception as e:
+            logger.error(f"Error detecting cycles: {e}")
+            return []
+
+    def analyze_risk_nodes(self):
+        """
+        Calculate centrality scores to find high-risk 'hub' vendors using PageRank.
+        Returns a dictionary mapping vendor names to risk scores.
+        """
+        if len(self.graph.nodes) < 2:
+            return {}
+            
+        try:
+            pagerank = nx.pagerank(self.graph, weight='weight')
+            return pagerank
+        except Exception as e:
+            logger.error(f"Error calculating PageRank: {e}")
+            return {node: 0.0 for node in self.graph.nodes}
+
+
+    def visualize_graph(self, title="Transaction Network"):
+        plt.figure(figsize=(12, 8))
+        
+        # Try to find a good layout
+        pos = nx.spring_layout(self.graph, k=0.5, iterations=50)
+        
+        # Node sizes based on degree
+        node_sizes = [300 + 100 * self.graph.degree(n) for n in self.graph.nodes()]
+        
+        # Draw nodes
+        nx.draw_networkx_nodes(self.graph, pos, node_size=node_sizes, node_color='skyblue', alpha=0.8)
+        
+        # Draw edges
+        edges = self.graph.edges(data=True)
+        weights = [d['weight'] / 1000 for u, v, d in edges] # Scale down for visualization
+        nx.draw_networkx_edges(self.graph, pos, width=weights, alpha=0.5, edge_color='gray', arrows=True)
+        
+        # Draw labels
+        nx.draw_networkx_labels(self.graph, pos, font_size=10, font_family="sans-serif")
+        
+        # Highlight cycles if any
+        cycles = self.detect_cycles()
+        if cycles:
+            cycle_edges = []
+            for cycle in cycles:
+                for i in range(len(cycle)):
+                    cycle_edges.append((cycle[i], cycle[(i + 1) % len(cycle)]))
+            
+            # Draw cycle edges in red
+            nx.draw_networkx_edges(self.graph, pos, edgelist=cycle_edges, width=2.0, edge_color='red', arrows=True)
+            plt.title(f"{title} - Alert: {len(cycles)} Potential Circular Trading Rings Detected!", color='red')
+        else:
+             plt.title(f"{title} - No obvious circular rings detected.")
+
+        plt.axis('off')
+        
+        # Save to buffer
+        buf = io.BytesIO()
+        plt.savefig(buf, format='png', bbox_inches='tight')
+        plt.close()
+        buf.seek(0)
+        return buf

generate_real_data.py

@@ -0,0 +1,10 @@
+from utils import create_sample_data
+import os
+
+def generate_large_dataset():
+    print("Generating large realistic dataset (1800+ rows)...")
+    create_sample_data(num_records=1850, output_dir="sample_data")
+    print("Done! Data saved to sample_data/books.csv and sample_data/gst.csv")
+
+if __name__ == "__main__":
+    generate_large_dataset()

gst_api.py

@@ -0,0 +1,30 @@
+import time
+import pandas as pd
+import logging
+
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class GSTGatewayMock:
+    """
+    Mocks a real-time fetching from live GST sites.
+    In a real scenario, this would use requests to hit a government API endpoint.
+    """
+    def __init__(self):
+        self.api_url = "https://mock-gst-api.gov.in/v1/returns"
+
+    def fetch_gst_data(self, start_date, end_date, gstin="27AADCB2230M1Z2"):
+        logger.info(f"Simulating fetch from {self.api_url} for GSTIN {gstin}")
+        # Simulate network latency
+        time.sleep(2)
+        
+        # Generate an empty DataFrame to represent no live data without credentials
+        # (This prevents injecting fake/dummy data into the user's analysis)
+        logger.info("Live GST API requires production credentials. Returning empty dataset.")
+        return pd.DataFrame(columns=['InvoiceID', 'VendorName', 'Amount', 'InvoiceDate', 'GSTIN'])
+
+    def validate_gstin(self, gstin):
+        """Mock GSTIN validation"""
+        time.sleep(0.5)
+        return len(gstin) == 15

index.html

@@ -0,0 +1,1541 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Financial Reconciliation Engine 🧠</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                    },
+                    colors: {
+                        brand: {
+                            50: '#eef2ff',
+                            100: '#e0e7ff',
+                            200: '#c7d2fe',
+                            300: '#a5b4fc',
+                            400: '#818cf8',
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                            700: '#4338ca',
+                            800: '#3730a3',
+                            900: '#312e81',
+                        },
+                        surface: {
+                            50: '#f8fafc',
+                            100: '#f1f5f9',
+                            200: '#e2e8f0',
+                            300: '#cbd5e1',
+                            400: '#94a3b8',
+                            500: '#64748b',
+                            600: '#475569',
+                            700: '#334155',
+                            800: '#1e293b',
+                            900: '#0f172a',
+                            950: '#020617',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        * { scrollbar-width: thin; scrollbar-color: #475569 transparent; }
+        *::-webkit-scrollbar { width: 6px; }
+        *::-webkit-scrollbar-track { background: transparent; }
+        *::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
+
+        @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 8px rgba(99,102,241,0.4); }
+            50% { box-shadow: 0 0 20px rgba(99,102,241,0.8); }
+        }
+        @keyframes slide-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes shimmer {
+            0% { background-position: -200% 0; }
+            100% { background-position: 200% 0; }
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-6px); }
+        }
+        @keyframes count-up { from { opacity: 0.5; } to { opacity: 1; } }
+
+        .animate-slide-in { animation: slide-in 0.4s ease-out forwards; }
+        .animate-fade-in { animation: fade-in 0.3s ease-out forwards; }
+        .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
+        .animate-float { animation: float 3s ease-in-out infinite; }
+        .shimmer-bg {
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
+            background-size: 200% 100%;
+            animation: shimmer 2s infinite;
+        }
+
+        .glass-card {
+            background: rgba(15, 23, 42, 0.6);
+            backdrop-filter: blur(16px);
+            border: 1px solid rgba(99, 102, 241, 0.15);
+        }
+        .glass-card-light {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(16px);
+            border: 1px solid rgba(99, 102, 241, 0.1);
+        }
+        .risk-critical { border-left: 4px solid #ef4444; }
+        .risk-high { border-left: 4px solid #f97316; }
+        .risk-medium { border-left: 4px solid #eab308; }
+        .risk-low { border-left: 4px solid #22c55e; }
+
+        .tab-active {
+            background: linear-gradient(135deg, #4f46e5, #6366f1);
+            color: white;
+            box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+        }
+
+        .network-node { transition: all 0.3s ease; cursor: pointer; }
+        .network-node:hover { filter: brightness(1.3); transform: scale(1.1); }
+
+        .data-table tr { transition: background-color 0.15s ease; }
+
+        .progress-bar {
+            background: linear-gradient(90deg, #4f46e5, #818cf8, #4f46e5);
+            background-size: 200% 100%;
+            animation: shimmer 1.5s infinite;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 3px;
+            border-radius: 9999px 9999px 0 0;
+        }
+        .stat-card-purple::before { background: linear-gradient(90deg, #6366f1, #a78bfa); }
+        .stat-card-green::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
+        .stat-card-orange::before { background: linear-gradient(90deg, #f97316, #fb923c); }
+        .stat-card-red::before { background: linear-gradient(90deg, #ef4444, #f87171); }
+        .stat-card-cyan::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
+        .stat-card-pink::before { background: linear-gradient(90deg, #ec4899, #f472b6); }
+
+        .glow-text {
+            text-shadow: 0 0 20px rgba(99,102,241,0.5);
+        }
+
+        .sidebar-link {
+            transition: all 0.2s ease;
+            position: relative;
+        }
+        .sidebar-link::before {
+            content: '';
+            position: absolute;
+            left: 0; top: 0; bottom: 0;
+            width: 3px;
+            background: #6366f1;
+            border-radius: 0 4px 4px 0;
+            transform: scaleY(0);
+            transition: transform 0.2s ease;
+        }
+        .sidebar-link.active::before,
+        .sidebar-link:hover::before {
+            transform: scaleY(1);
+        }
+        .sidebar-link.active {
+            background: rgba(99, 102, 241, 0.15);
+            color: #818cf8;
+        }
+
+        .tooltip-container { position: relative; }
+        .tooltip-container .tooltip {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%) translateY(4px);
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.2s ease;
+            z-index: 50;
+        }
+        .tooltip-container:hover .tooltip {
+            opacity: 1;
+            transform: translateX(-50%) translateY(-4px);
+        }
+    </style>
+</head>
+<body class="bg-surface-950 text-surface-100 font-sans min-h-screen">
+    <!-- Background Effects -->
+    <div class="fixed inset-0 pointer-events-none overflow-hidden z-0">
+        <div class="absolute top-0 left-1/4 w-96 h-96 bg-brand-600/10 rounded-full blur-3xl"></div>
+        <div class="absolute bottom-0 right-1/4 w-80 h-80 bg-purple-600/8 rounded-full blur-3xl"></div>
+        <div class="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-600/5 rounded-full blur-3xl"></div>
+    </div>
+
+    <div class="flex min-h-screen relative z-10">
+        <!-- Sidebar -->
+        <aside id="sidebar" class="w-64 border-r border-surface-800/50 bg-surface-950/80 backdrop-blur-xl flex flex-col transition-all duration-300 fixed lg:relative z-40 -translate-x-full lg:translate-x-0 h-screen">
+            <!-- Logo -->
+            <div class="p-5 border-b border-surface-800/50">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center animate-pulse-glow">
+                        <i data-lucide="brain" class="w-5 h-5 text-white"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-sm font-bold text-white tracking-tight">ReconAI</h1>
+                        <p class="text-[10px] text-surface-400 font-mono uppercase tracking-widest">Financial Engine</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Nav Links -->
+            <nav class="flex-1 p-3 space-y-1 overflow-y-auto">
+                <p class="text-[10px] uppercase tracking-widest text-surface-500 font-semibold px-3 py-2">Main</p>
+                <button onclick="switchTab('dashboard')" class="sidebar-link active w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-surface-300 hover:text-white" data-nav="dashboard">
+                    <i data-lucide="layout-dashboard" class="w-4 h-4"></i> Dashboard
+                </button>
+                <button onclick="switchTab('reconciliation')" class="sidebar-link w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-surface-300 hover:text-white" data-nav="reconciliation">
+                    <i data-lucide="git-merge" class="w-4 h-4"></i> Reconciliation
+                </button>
+                <button onclick="switchTab('anomaly')" class="sidebar-link w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-surface-300 hover:text-white" data-nav="anomaly">
+                    <i data-lucide="alert-triangle" class="w-4 h-4"></i> Anomaly Detection
+                </button>
+
+                <p class="text-[10px] uppercase tracking-widest text-surface-500 font-semibold px-3 py-2 mt-4">Analysis</p>
+                <button onclick="switchTab('fraud')" class="sidebar-link w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-surface-300 hover:text-white" data-nav="fraud">
+                    <i data-lucide="network" class="w-4 h-4"></i> Fraud Network
+                </button>
+                <button onclick="switchTab('ai-explain')" class="sidebar-link w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-surface-300 hover:text-white" data-nav="ai-explain">
+                    <i data-lucide="message-square-text" class="w-4 h-4"></i> ReconAI
+                </button>
+                <button onclick="switchTab('vector')" class="sidebar-link w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-surface-300 hover:text-white" data-nav="vector">
+                    <i data-lucide="database" class="w-4 h-4"></i> Vector Memory
+                </button>
+            </nav>
+
+            <!-- Status -->
+            <div class="p-4 border-t border-surface-800/50">
+                <div class="glass-card rounded-lg p-3">
+                    <div class="flex items-center gap-2 mb-2">
+                        <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+                        <span class="text-xs text-surface-300">Engine Online</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-[10px] text-surface-500">
+                        <span>FAISS: Active</span>
+                        <span>•</span>
+                        <span>LLM: Connected</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Overlay for mobile sidebar -->
+        <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden lg:hidden" onclick="toggleSidebar()"></div>
+
+        <!-- Main Content -->
+        <main class="flex-1 flex flex-col min-h-screen overflow-x-hidden">
+            <!-- Top Bar -->
+            <header class="sticky top-0 z-20 border-b border-surface-800/50 bg-surface-950/80 backdrop-blur-xl">
+                <div class="flex items-center justify-between px-4 lg:px-6 py-3">
+                    <div class="flex items-center gap-3">
+                        <button onclick="toggleSidebar()" class="lg:hidden p-2 rounded-lg hover:bg-surface-800 transition">
+                            <i data-lucide="menu" class="w-5 h-5"></i>
+                        </button>
+                        <div>
+                            <h2 id="page-title" class="text-lg font-semibold text-white">Dashboard</h2>
+                            <p id="page-subtitle" class="text-xs text-surface-400">Financial reconciliation overview</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <div class="hidden sm:flex items-center gap-2 bg-surface-900 border border-surface-700/50 rounded-lg px-3 py-2">
+                            <i data-lucide="search" class="w-4 h-4 text-surface-400"></i>
+                            <input type="text" placeholder="Search transactions..." class="bg-transparent text-sm text-surface-200 placeholder-surface-500 outline-none w-40 lg:w-56">
+                        </div>
+                        <input type="file" id="books-file" class="hidden" accept=".csv" onchange="updateFileLabel('books')">
+                        <input type="file" id="gst-file" class="hidden" accept=".csv" onchange="updateFileLabel('gst')">
+                        
+                        <button onclick="document.getElementById('books-file').click()" id="btn-books" class="flex items-center gap-2 bg-surface-800 hover:bg-surface-700 text-surface-300 text-sm font-medium px-3 py-2 rounded-lg transition-all border border-surface-700/50">
+                            <i data-lucide="upload-cloud" class="w-4 h-4"></i>
+                            <span class="hidden sm:inline" id="lbl-books">Books CSV</span>
+                        </button>
+                        <button onclick="document.getElementById('gst-file').click()" id="btn-gst" class="flex items-center gap-2 bg-surface-800 hover:bg-surface-700 text-surface-300 text-sm font-medium px-3 py-2 rounded-lg transition-all border border-surface-700/50">
+                            <i data-lucide="upload-cloud" class="w-4 h-4"></i>
+                            <span class="hidden sm:inline" id="lbl-gst">GST CSV</span>
+                        </button>
+
+                        <button onclick="runReconciliation()" id="btn-run" class="flex items-center gap-2 bg-gradient-to-r from-brand-600 to-purple-600 hover:from-brand-500 hover:to-purple-500 text-white text-sm font-medium px-4 py-2 rounded-lg transition-all shadow-lg shadow-brand-600/25">
+                            <i data-lucide="play" class="w-4 h-4"></i>
+                            <span class="hidden sm:inline">Run Engine</span>
+                        </button>
+
+                        <button onclick="exportCSV()" class="p-2 rounded-lg hover:bg-surface-800 transition tooltip-container relative">
+                            <i data-lucide="download" class="w-4 h-4 text-surface-400"></i>
+                            <div class="tooltip bg-surface-800 text-xs px-2 py-1 rounded whitespace-nowrap">Export CSV</div>
+                        </button>
+
+                    </div>
+                </div>
+            </header>
+
+            <!-- Content Area -->
+            <div class="flex-1 p-4 lg:p-6 space-y-6">
+
+                <!-- ==================== DASHBOARD TAB ==================== -->
+                <section id="tab-dashboard" class="tab-content space-y-6">
+                    <!-- Stat Cards Row -->
+                    <div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3 lg:gap-4">
+                        <div class="stat-card stat-card-purple glass-card rounded-xl p-4 relative overflow-hidden animate-slide-in" style="animation-delay:0ms">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs text-surface-400 font-medium">Total Records</span>
+                                <div class="w-8 h-8 rounded-lg bg-brand-600/20 flex items-center justify-center">
+                                    <i data-lucide="file-text" class="w-4 h-4 text-brand-400"></i>
+                                </div>
+                            </div>
+                            <p id="stat-total-records" class="text-2xl font-bold text-white">0</p>
+                            <p id="stat-total-records-sub" class="text-[10px] text-green-400 mt-1 flex items-center gap-1">Awaiting data</p>
+                        </div>
+                        <div class="stat-card stat-card-green glass-card rounded-xl p-4 relative overflow-hidden animate-slide-in" style="animation-delay:80ms">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs text-surface-400 font-medium">Matched</span>
+                                <div class="w-8 h-8 rounded-lg bg-green-600/20 flex items-center justify-center">
+                                    <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i>
+                                </div>
+                            </div>
+                            <p id="stat-matched" class="text-2xl font-bold text-white">0</p>
+                            <p id="stat-matched-sub" class="text-[10px] text-green-400 mt-1">Awaiting data</p>
+                        </div>
+                        <div class="stat-card stat-card-orange glass-card rounded-xl p-4 relative overflow-hidden animate-slide-in" style="animation-delay:160ms">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs text-surface-400 font-medium">Unmatched</span>
+                                <div class="w-8 h-8 rounded-lg bg-orange-600/20 flex items-center justify-center">
+                                    <i data-lucide="x-circle" class="w-4 h-4 text-orange-400"></i>
+                                </div>
+                            </div>
+                            <p id="stat-unmatched" class="text-2xl font-bold text-white">0</p>
+                            <p id="stat-unmatched-sub" class="text-[10px] text-orange-400 mt-1">Awaiting data</p>
+                        </div>
+                        <div class="stat-card stat-card-red glass-card rounded-xl p-4 relative overflow-hidden animate-slide-in" style="animation-delay:240ms">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs text-surface-400 font-medium">Anomalies</span>
+                                <div class="w-8 h-8 rounded-lg bg-red-600/20 flex items-center justify-center">
+                                    <i data-lucide="alert-triangle" class="w-4 h-4 text-red-400"></i>
+                                </div>
+                            </div>
+                            <p id="stat-anomalies" class="text-2xl font-bold text-white">0</p>
+                            <p id="stat-anomalies-sub" class="text-[10px] text-red-400 mt-1">Awaiting data</p>
+                        </div>
+                        <div class="stat-card stat-card-cyan glass-card rounded-xl p-4 relative overflow-hidden animate-slide-in" style="animation-delay:320ms">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs text-surface-400 font-medium">Fraud Rings</span>
+                                <div class="w-8 h-8 rounded-lg bg-cyan-600/20 flex items-center justify-center">
+                                    <i data-lucide="network" class="w-4 h-4 text-cyan-400"></i>
+                                </div>
+                            </div>
+                            <p id="stat-fraud-rings" class="text-2xl font-bold text-white">0</p>
+                            <p id="stat-fraud-rings-sub" class="text-[10px] text-cyan-400 mt-1">Awaiting data</p>
+                        </div>
+                        <div class="stat-card stat-card-pink glass-card rounded-xl p-4 relative overflow-hidden animate-slide-in" style="animation-delay:400ms">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs text-surface-400 font-medium">Risk Score</span>
+                                <div class="w-8 h-8 rounded-lg bg-pink-600/20 flex items-center justify-center">
+                                    <i data-lucide="gauge" class="w-4 h-4 text-pink-400"></i>
+                                </div>
+                            </div>
+                            <p id="stat-risk-score" class="text-2xl font-bold text-white">0.0<span class="text-sm text-surface-400">/10</span></p>
+                            <p id="stat-risk-score-sub" class="text-[10px] text-pink-400 mt-1">Awaiting data</p>
+                        </div>
+                    </div>
+
+                    <!-- Charts Row -->
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
+                        <div class="glass-card rounded-xl p-5 animate-slide-in" style="animation-delay:100ms">
+                            <div class="flex items-center justify-between mb-4">
+                                <h3 class="font-semibold text-white">Reconciliation Trend</h3>
+                            </div>
+                            <div class="relative w-full h-[250px]">
+                                <canvas id="chart-recon-trend" class="w-full"></canvas>
+                            </div>
+                        </div>
+                        <div class="glass-card rounded-xl p-5 animate-slide-in" style="animation-delay:200ms">
+                            <div class="flex items-center justify-between mb-4">
+                                <h3 class="font-semibold text-white">Anomaly Distribution</h3>
+                            </div>
+                            <div class="relative w-full h-[250px]">
+                                <canvas id="chart-anomaly-dist" class="w-full"></canvas>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Match Confidence + Recent Alerts -->
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">
+                        <div class="glass-card rounded-xl p-5 animate-slide-in" style="animation-delay:150ms">
+                            <h3 class="font-semibold text-white mb-4">Match Confidence</h3>
+                            <div class="relative w-full h-[250px]">
+                                <canvas id="chart-confidence"></canvas>
+                            </div>
+                        </div>
+                        <div class="lg:col-span-2 glass-card rounded-xl p-5 animate-slide-in" style="animation-delay:250ms">
+                            <div class="flex items-center justify-between mb-4">
+                                <h3 class="font-semibold text-white">Recent Alerts</h3>
+                                <span class="text-xs bg-red-500/20 text-red-400 px-2 py-0.5 rounded-full font-medium"><span id="alerts-count">0</span> active</span>
+                            </div>
+                            <div id="recent-alerts" class="space-y-3 max-h-[280px] overflow-y-auto pr-2">
+                                <p class="text-sm text-surface-400">No alerts yet.</p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- ==================== RECONCILIATION TAB ==================== -->
+                <section id="tab-reconciliation" class="tab-content hidden space-y-6">
+                    <!-- Recon Stats -->
+                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                        <div class="glass-card rounded-xl p-4 flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-xl bg-green-600/20 flex items-center justify-center">
+                                <i data-lucide="check-circle-2" class="w-6 h-6 text-green-400"></i>
+                            </div>
+                            <div>
+                                <p id="recon-stat-exact" class="text-2xl font-bold text-white">0</p>
+                                <p class="text-xs text-surface-400">Exact Matches</p>
+                            </div>
+                        </div>
+                        <div class="glass-card rounded-xl p-4 flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-xl bg-brand-600/20 flex items-center justify-center">
+                                <i data-lucide="fuzzy" class="w-6 h-6 text-brand-400"></i>
+                            </div>
+                            <div>
+                                <p id="recon-stat-fuzzy" class="text-2xl font-bold text-white">0</p>
+                                <p class="text-xs text-surface-400">Fuzzy Matches</p>
+                            </div>
+                        </div>
+                        <div class="glass-card rounded-xl p-4 flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-xl bg-purple-600/20 flex items-center justify-center">
+                                <i data-lucide="sparkles" class="w-6 h-6 text-purple-400"></i>
+                            </div>
+                            <div>
+                                <p id="recon-stat-semantic" class="text-2xl font-bold text-white">0</p>
+                                <p class="text-xs text-surface-400">AI Semantic</p>
+                            </div>
+                        </div>
+                        <div class="glass-card rounded-xl p-4 flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-xl bg-red-600/20 flex items-center justify-center">
+                                <i data-lucide="x-circle" class="w-6 h-6 text-red-400"></i>
+                            </div>
+                            <div>
+                                <p id="recon-stat-unmatched" class="text-2xl font-bold text-white">0</p>
+                                <p class="text-xs text-surface-400">Unmatched</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Matching Table -->
+                    <div class="glass-card rounded-xl overflow-hidden">
+                        <div class="flex items-center justify-between p-4 border-b border-surface-800/50">
+                            <h3 class="font-semibold text-white">Reconciliation Results</h3>
+                            <div class="flex items-center gap-2">
+                                <select id="match-filter" onchange="filterReconTable()" class="bg-surface-800/50 border border-surface-700/50 rounded-lg text-xs px-3 py-1.5 text-surface-300 outline-none">
+                                    <option value="all">All Results</option>
+                                    <option value="matched">Matched</option>
+                                    <option value="fuzzy">Fuzzy Match</option>
+                                    <option value="unmatched">Unmatched</option>
+                                </select>
+                                <button class="flex items-center gap-1.5 bg-brand-600/20 text-brand-300 text-xs font-medium px-3 py-1.5 rounded-lg hover:bg-brand-600/30 transition">
+                                    <i data-lucide="refresh-cw" class="w-3 h-3"></i> Refresh
+                                </button>
+                            </div>
+                        </div>
+                        <div class="overflow-x-auto">
+                            <table class="w-full text-sm data-table">
+                                <thead>
+                                    <tr class="bg-surface-900/50 text-surface-400 text-xs uppercase tracking-wider">
+                                        <th class="px-4 py-3 text-left font-semibold">Books Entry</th>
+                                        <th class="px-4 py-3 text-left font-semibold">GST Entry</th>
+                                        <th class="px-4 py-3 text-left font-semibold">Amount</th>
+                                        <th class="px-4 py-3 text-left font-semibold">Match Type</th>
+                                        <th class="px-4 py-3 text-left font-semibold">Confidence</th>
+                                        <th class="px-4 py-3 text-left font-semibold">Status</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="recon-table-body">
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="flex items-center justify-between p-4 border-t border-surface-800/50">
+                            <p class="text-xs text-surface-400">Showing <span id="showing-count" id="showing-count">--</span> of <span id="total-count" id="total-count">--</span> results</p>
+                            <div class="flex items-center gap-1">
+                                <button class="px-3 py-1 rounded-md bg-surface-800/50 text-surface-400 text-xs hover:bg-surface-700 transition">Prev</button>
+                                <button class="px-3 py-1 rounded-md bg-brand-600 text-white text-xs">1</button>
+                                <button class="px-3 py-1 rounded-md bg-surface-800/50 text-surface-400 text-xs hover:bg-surface-700 transition">2</button>
+                                <button class="px-3 py-1 rounded-md bg-surface-800/50 text-surface-400 text-xs hover:bg-surface-700 transition">3</button>
+                                <button class="px-3 py-1 rounded-md bg-surface-800/50 text-surface-400 text-xs hover:bg-surface-700 transition">Next</button>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- ==================== ANOMALY TAB ==================== -->
+                <section id="tab-anomaly" class="tab-content hidden space-y-6">
+                    <!-- Anomaly Stats -->
+                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                        <div class="glass-card rounded-xl p-5">
+                            <div class="flex items-center gap-3 mb-3">
+                                <div class="w-10 h-10 rounded-lg bg-red-600/20 flex items-center justify-center">
+                                    <i data-lucide="shield-alert" class="w-5 h-5 text-red-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-lg font-bold text-white">Isolation Forest</p>
+                                    <p class="text-[10px] text-surface-400 font-mono">contamination=0.05</p>
+                                </div>
+                            </div>
+                            <p id="anomaly-trained-sub" class="text-xs text-surface-400 mb-2">Anomaly detection model pending execution.</p>
+                            <div class="flex items-center gap-2">
+                                <span class="px-2 py-0.5 bg-green-500/20 text-green-400 text-[10px] font-semibold rounded-full">ACTIVE</span>
+                                <span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 text-[10px] font-semibold rounded-full">v2.4</span>
+                            </div>
+                        </div>
+                        <div class="glass-card rounded-xl p-5">
+                            <div class="flex items-center gap-3 mb-3">
+                                <div class="w-10 h-10 rounded-lg bg-orange-600/20 flex items-center justify-center">
+                                    <i data-lucide="radar" class="w-5 h-5 text-orange-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-lg font-bold text-white">Score Range</p>
+                                    <p id="anomaly-score-range" class="text-[10px] text-surface-400 font-mono">--</p>
+                                </div>
+                            </div>
+                            <div class="space-y-2">
+                                <div class="flex items-center justify-between text-xs">
+                                    <span class="text-surface-400">Critical (> 0.3)</span>
+                                    <span id="anomaly-crit-count" class="text-red-400 font-mono">0</span>
+                                </div>
+                                <div class="w-full bg-surface-800 rounded-full h-1.5"><div id="anomaly-crit-bar" class="bg-red-500 h-1.5 rounded-full" style="width:0%"></div></div>
+                                <div class="flex items-center justify-between text-xs">
+                                    <span class="text-surface-400">High (0.1 to 0.3)</span>
+                                    <span id="anomaly-high-count" class="text-orange-400 font-mono">0</span>
+                                </div>
+                                <div class="w-full bg-surface-800 rounded-full h-1.5"><div id="anomaly-high-bar" class="bg-orange-500 h-1.5 rounded-full" style="width:0%"></div></div>
+                                <div class="flex items-center justify-between text-xs">
+                                    <span class="text-surface-400">Medium (< 0.1)</span>
+                                    <span id="anomaly-med-count" class="text-yellow-400 font-mono">0</span>
+                                </div>
+                                <div class="w-full bg-surface-800 rounded-full h-1.5"><div id="anomaly-med-bar" class="bg-yellow-500 h-1.5 rounded-full" style="width:0%"></div></div>
+                            </div>
+                        </div>
+                        <div class="glass-card rounded-xl p-5">
+                            <div class="flex items-center gap-3 mb-3">
+                                <div class="w-10 h-10 rounded-lg bg-brand-600/20 flex items-center justify-center">
+                                    <i data-lucide="brain" class="w-5 h-5 text-brand-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-lg font-bold text-white">AI LLM Analysis</p>
+                                    <p class="text-[10px] text-surface-400 font-mono">ReconAI</p>
+                                </div>
+                            </div>
+                            <p class="text-xs text-surface-400 mb-3">Natural language explanations generated for each anomaly.</p>
+                            <p class="text-xs text-brand-300 bg-brand-900/20 p-2 rounded border border-brand-500/20">Click "View" on any flagged transaction below to generate a real-time audit explanation.</p>
+                        </div>
+                    </div>
+
+                    <!-- Anomaly Table -->
+                    <div class="glass-card rounded-xl overflow-hidden">
+                        <div class="flex items-center justify-between p-4 border-b border-surface-800/50">
+                            <h3 class="font-semibold text-white flex items-center gap-2">
+                                <i data-lucide="alert-triangle" class="w-4 h-4 text-red-400"></i>
+                                Flagged Transactions
+                            </h3>
+                            <div class="flex items-center gap-2">
+                                <button class="text-xs px-3 py-1.5 rounded-lg bg-red-600/20 text-red-400 hover:bg-red-600/30 transition font-medium">Critical (<span id="filter-crit">0</span>)</button>
+                                <button class="text-xs px-3 py-1.5 rounded-lg bg-surface-800/50 text-surface-300 hover:bg-surface-700/50 transition">All (<span id="filter-all">0</span>)</button>
+                            </div>
+                        </div>
+                        <div class="overflow-x-auto">
+                            <table class="w-full text-sm data-table">
+                                <thead>
+                                    <tr class="bg-surface-900/50 text-surface-400 text-xs uppercase tracking-wider">
+                                        <th class="px-4 py-3 text-left font-semibold">Invoice</th>
+                                        <th class="px-4 py-3 text-left font-semibold">Vendor</th>
+                                        <th class="px-4 py-3 text-left font-semibold">Amount</th>
+                                        <th class="px-4 py-3 text-left font-semibold">Anomaly Score</th>
+                                        <th class="px-4 py-3 text-left font-semibold">Risk Level</th>
+                                        <th class="px-4 py-3 text-left font-semibold">AI Explanation</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="anomaly-table-body">
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- ==================== FRAUD NETWORK TAB ==================== -->
+                <section id="tab-fraud" class="tab-content hidden space-y-6">
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <!-- Network Graph -->
+                        <div class="lg:col-span-2 glass-card rounded-xl overflow-hidden">
+                            <div class="flex items-center justify-between p-4 border-b border-surface-800/50">
+                                <h3 class="font-semibold text-white flex items-center gap-2">
+                                    <i data-lucide="network" class="w-4 h-4 text-cyan-400"></i>
+                                    Circular Trading Network
+                                </h3>
+                                <div class="flex items-center gap-2">
+                                </div>
+                            </div>
+                            <div class="relative">
+                                <canvas id="fraud-canvas" width="800" height="500" class="w-full bg-surface-950/50"></canvas>
+                                <div class="absolute top-3 left-3 bg-surface-900/80 backdrop-blur-sm border border-surface-700/30 rounded-lg p-3 text-xs space-y-2">
+                                    <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-red-500"></span> Critical Node</div>
+                                    <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-orange-500"></span> Suspicious</div>
+                                    <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-brand-500"></span> Known Entity</div>
+                                    <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-surface-500"></span> Linked</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Fraud Details -->
+                        <div class="space-y-4">
+                            <div class="glass-card rounded-xl p-5">
+                                <h3 class="font-semibold text-white mb-3 flex items-center gap-2">
+                                    <i data-lucide="shield-alert" class="w-4 h-4 text-red-400"></i>
+                                    Detected Rings
+                                </h3>
+                                <div class="space-y-3" id="fraud-rings-list">
+                                    <p class="text-sm text-surface-400">No fraud rings detected yet. Run Engine to analyze.</p>
+                                </div>
+                            </div>
+                            <div class="glass-card rounded-xl p-5">
+                                <h3 class="font-semibold text-white mb-3 flex items-center gap-2">
+                                    <i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-400"></i>
+                                    Network Stats
+                                </h3>
+                                <div class="space-y-3">
+                                    <div class="flex items-center justify-between">
+                                        <span class="text-xs text-surface-400">Total Nodes</span>
+                                        <span id="fraud-nodes" class="text-sm font-mono text-white">0</span>
+                                    </div>
+                                    <div class="flex items-center justify-between">
+                                        <span class="text-xs text-surface-400">Total Edges</span>
+                                        <span id="fraud-edges" class="text-sm font-mono text-white">0</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- ==================== AI EXPLANATIONS TAB ==================== -->
+                <section id="tab-ai-explain" class="tab-content hidden space-y-6">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <!-- LLM Queries -->
+                        <div class="space-y-4">
+                            <div class="glass-card rounded-xl p-5">
+                                <h3 class="font-semibold text-white mb-4 flex items-center gap-2">
+                                    <i data-lucide="message-square-text" class="w-4 h-4 text-brand-400"></i>
+                                    Ask the AI Auditor
+                                </h3>
+                                <div class="space-y-3 mb-4">
+                                    <div id="chat-messages" class="space-y-3 max-h-[400px] overflow-y-auto pr-1">
+                                        <div class="flex gap-3">
+                                            <div class="w-7 h-7 rounded-full bg-brand-600/30 flex items-center justify-center shrink-0">
+                                                <i data-lucide="bot" class="w-3.5 h-3.5 text-brand-400"></i>
+                                            </div>
+                                            <div class="glass-card rounded-lg rounded-tl-none p-3 max-w-[90%]">
+                                                <p class="text-sm text-surface-200">Welcome! I'm your AI audit assistant powered by ReconAI. Ask me about any discrepancy, anomaly, or vendor relationship and I'll provide a detailed explanation.</p>
+                                                <p class="text-[10px] text-surface-500 mt-2 font-mono">model: ReconAI-instruct</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex items-center gap-2">
+                                    <input id="chat-input" type="text" placeholder="Ask about a discrepancy..." class="flex-1 bg-surface-900/50 border border-surface-700/50 rounded-lg px-3 py-2 text-sm text-white placeholder-surface-500 outline-none focus:border-brand-500/50 focus:ring-1 focus:ring-brand-500/25 transition" onkeydown="if(event.key==='Enter')sendChatMessage()">
+                                    <button onclick="sendChatMessage()" class="p-2 bg-brand-600 hover:bg-brand-500 rounded-lg transition">
+                                        <i data-lucide="send" class="w-4 h-4 text-white"></i>
+                                    </button>
+                                </div>
+                                <div class="flex items-center gap-2 mt-3 flex-wrap">
+                                    <button onclick="askSuggested('Explain the highest risk anomaly detected in this batch')" class="text-[10px] px-2 py-1 rounded-md bg-surface-800/50 text-surface-400 hover:text-white hover:bg-surface-700 transition">Explain highest risk anomaly</button>
+                                    <button onclick="askSuggested('Summarize the top reasons for discrepancies')" class="text-[10px] px-2 py-1 rounded-md bg-surface-800/50 text-surface-400 hover:text-white hover:bg-surface-700 transition">Summarize discrepancies</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- ReconAI List -->
+                        <div class="glass-card rounded-xl p-5">
+                            <h3 class="font-semibold text-white mb-4 flex items-center gap-2">
+                                <i data-lucide="sparkles" class="w-4 h-4 text-purple-400"></i>
+                                Generated Explanations
+                            </h3>
+                            <div class="space-y-3 max-h-[530px] overflow-y-auto pr-1" id="explanations-list">
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- ==================== VECTOR MEMORY TAB ==================== -->
+                <section id="tab-vector" class="tab-content hidden space-y-6">
+                    <div class="flex justify-center">
+                        <div class="glass-card rounded-xl p-5 w-full max-w-md">
+                            <div class="flex items-center gap-3 mb-4">
+                                <div class="w-10 h-10 rounded-lg bg-brand-600/20 flex items-center justify-center">
+                                    <i data-lucide="database" class="w-5 h-5 text-brand-400"></i>
+                                </div>
+                                <div>
+                                    <p class="font-semibold text-white">FAISS Index</p>
+                                    <p class="text-[10px] text-surface-400 font-mono">L2 • 384-dim • FlatL2</p>
+                                </div>
+                            </div>
+                            <div class="space-y-3">
+                                <div>
+                                    <div class="flex items-center justify-between text-xs mb-1">
+                                        <span class="text-surface-400">Index Size</span>
+                                        <span id="faiss-vectors" class="text-white font-mono">-- vectors</span>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="flex items-center justify-between text-xs mb-1">
+                                        <span class="text-surface-400">Memory Used</span>
+                                        <span id="faiss-memory" class="text-white font-mono">-- MB</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+            </div>
+
+            <!-- Processing Modal -->
+            <div id="process-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+                <div class="glass-card rounded-2xl p-8 max-w-md w-full mx-4 text-center">
+                    <div class="w-16 h-16 rounded-full bg-brand-600/20 flex items-center justify-center mx-auto mb-4 animate-pulse-glow">
+                        <i data-lucide="brain" class="w-8 h-8 text-brand-400"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold text-white mb-2">Running Reconciliation</h3>
+                    <p class="text-sm text-surface-400 mb-4" id="process-step">Initializing engine...</p>
+                    <div class="w-full bg-surface-800 rounded-full h-2 overflow-hidden">
+                        <div id="process-bar" class="progress-bar h-2 rounded-full transition-all duration-500" style="width: 0%"></div>
+                    </div>
+                    <p class="text-xs text-surface-500 mt-3 font-mono" id="process-pct">0%</p>
+                </div>
+            </div>
+
+            <!-- Toast Container -->
+            <div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2"></div>
+        </main>
+    </div>
+
+    <script>
+        // All static dummy data arrays removed — UI is 100% backend-driven
+
+
+
+        // ============================================
+        // TAB NAVIGATION
+        // ============================================
+        const titles = {
+            dashboard: ['Dashboard', 'Financial reconciliation overview'],
+            reconciliation: ['Reconciliation', 'Intelligent matching with Fuzzy + AI semantic analysis'],
+            anomaly: ['Anomaly Detection', 'IsolationForest-powered anomaly detection'],
+            fraud: ['Fraud Network', 'NetworkX circular trading visualization'],
+            'ai-explain': ['ReconAI', 'ReconAI LLM-powered audit commentary'],
+            vector: ['Vector Memory', 'FAISS persistent vector index management']
+        };
+
+        function switchTab(tab) {
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            document.getElementById('tab-' + tab).classList.remove('hidden');
+            document.querySelectorAll('.sidebar-link').forEach(el => {
+                el.classList.toggle('active', el.dataset.nav === tab);
+            });
+            if (titles[tab]) {
+                document.getElementById('page-title').textContent = titles[tab][0];
+                document.getElementById('page-subtitle').textContent = titles[tab][1];
+            }
+            // Close mobile sidebar
+            const sidebar = document.getElementById('sidebar');
+            const overlay = document.getElementById('sidebar-overlay');
+            sidebar.classList.add('-translate-x-full');
+            overlay.classList.add('hidden');
+
+            // Initialize fraud graph if switching to fraud tab
+            if (tab === 'fraud') {
+                setTimeout(drawFraudNetwork, 100);
+            }
+        }
+
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            const overlay = document.getElementById('sidebar-overlay');
+            sidebar.classList.toggle('-translate-x-full');
+            overlay.classList.toggle('hidden');
+        }
+
+        let isDark = true;
+        function toggleTheme() {
+            isDark = !isDark;
+            document.documentElement.classList.toggle('dark', isDark);
+        }
+
+        // Counter animation removed — no more data-counter attributes
+
+        async function showExplanation(invoiceId) {
+            const anomaly = window.anomalyDataMap ? window.anomalyDataMap[invoiceId] : null;
+            if (!anomaly) return;
+            
+            switchTab('ai-explain');
+            
+            // Add user message
+            addChatMessage(`Explain the anomaly for invoice ${invoiceId} and vendor ${anomaly.VendorName_books}`, false);
+            
+            // Add loading state
+            const chatMessages = document.getElementById('chat-messages');
+            const loadingDiv = document.createElement('div');
+            loadingDiv.id = 'chat-loading';
+            loadingDiv.className = 'flex gap-3 animate-slide-in';
+            loadingDiv.innerHTML = `
+                <div class="w-7 h-7 rounded-full bg-brand-600/30 flex items-center justify-center shrink-0">
+                    <i data-lucide="bot" class="w-3.5 h-3.5 text-brand-400"></i>
+                </div>
+                <div class="glass-card rounded-lg rounded-tl-none p-3 max-w-[90%]">
+                    <p class="text-sm text-surface-400 flex items-center gap-2"><i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i> Analyzing with ReconAI...</p>
+                </div>
+            `;
+            chatMessages.appendChild(loadingDiv);
+            lucide.createIcons();
+            
+            try {
+                const res = await fetch('/api/explain', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        row: anomaly,
+                        match_status: anomaly.MatchStatus,
+                        b_vendor: anomaly.VendorName_books,
+                        g_vendor: anomaly.VendorName_gst,
+                        b_amount: anomaly.Amount_books,
+                        g_amount: anomaly.Amount_gst
+                    })
+                });
+                
+                const result = await res.json();
+                document.getElementById('chat-loading')?.remove();
+                
+                if (result.explanation) {
+                    addChatMessage(result.explanation, true);
+                    
+                    const expList = document.getElementById('explanations-list');
+                    if (expList) {
+                        const div = document.createElement('div');
+                        div.className = 'p-3 rounded-lg border border-surface-700/50 bg-surface-900/50 text-sm text-surface-200 animate-slide-in';
+                        div.innerHTML = `
+                            <div class="flex items-center justify-between mb-2 pb-2 border-b border-surface-800">
+                                <span class="text-xs font-semibold text-brand-400">Invoice ${invoiceId}</span>
+                                <span class="text-[10px] text-surface-500 font-mono">ReconAI</span>
+                            </div>
+                            <p class="text-xs">${result.explanation}</p>
+                        `;
+                        expList.prepend(div);
+                    }
+                } else {
+                    addChatMessage('Error generating explanation.', true);
+                }
+            } catch (err) {
+                document.getElementById('chat-loading')?.remove();
+                addChatMessage('API Error: ' + err.message, true);
+            }
+        }
+        function addChatMessage(text, isAI = false) {
+            const chatMessages = document.getElementById('chat-messages');
+            const msgDiv = document.createElement('div');
+            msgDiv.className = 'flex gap-3 animate-slide-in';
+            if (isAI) {
+                msgDiv.innerHTML = `
+                    <div class="w-7 h-7 rounded-full bg-brand-600/30 flex items-center justify-center shrink-0">
+                        <i data-lucide="bot" class="w-3.5 h-3.5 text-brand-400"></i>
+                    </div>
+                    <div class="glass-card rounded-lg rounded-tl-none p-3 max-w-[90%]">
+                        <p class="text-sm text-surface-200">${text}</p>
+                        <p class="text-[10px] text-surface-500 mt-2 font-mono">model: ReconAI-instruct</p>
+                    </div>
+                `;
+            } else {
+                msgDiv.innerHTML = `
+                    <div class="w-7 h-7 rounded-full bg-purple-600/30 flex items-center justify-center shrink-0">
+                        <i data-lucide="user" class="w-3.5 h-3.5 text-purple-400"></i>
+                    </div>
+                    <div class="glass-card rounded-lg rounded-tl-none p-3 max-w-[90%]">
+                        <p class="text-sm text-surface-200">${text}</p>
+                    </div>
+                `;
+            }
+            chatMessages.appendChild(msgDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            lucide.createIcons();
+        }
+
+        async function sendChatMessage() {
+            const input = document.getElementById('chat-input');
+            const text = input.value.trim();
+            if (!text) return;
+            addChatMessage(text, false);
+            input.value = '';
+
+            // Send to live backend
+            try {
+                const res = await fetch('/api/explain', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ row: {}, match_status: text, b_vendor: 'N/A', g_vendor: 'N/A', b_amount: 0, g_amount: 0 })
+                });
+                const result = await res.json();
+                addChatMessage(result.explanation || 'No response from AI.', true);
+            } catch (err) {
+                addChatMessage('API Error: ' + err.message, true);
+            }
+        }
+
+        function askSuggested(text) {
+            document.getElementById('chat-input').value = text;
+            sendChatMessage();
+        }
+
+        // ============================================
+        // FRAUD NETWORK CANVAS
+        // ============================================
+        function drawFraudNetwork() {
+            const canvas = document.getElementById('fraud-canvas');
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+            const dpr = window.devicePixelRatio || 1;
+            const rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width * dpr;
+            canvas.height = rect.height * dpr;
+            ctx.scale(dpr, dpr);
+            const W = rect.width;
+            const H = rect.height;
+            ctx.clearRect(0, 0, W, H);
+            
+            if (!window.fraudNetworkData || !window.fraudNetworkData.nodes || window.fraudNetworkData.nodes.length === 0) {
+                ctx.font = '14px Inter';
+                ctx.fillStyle = '#64748b';
+                ctx.textAlign = 'center';
+                ctx.fillText('No fraud network data yet.', W/2, H/2 - 10);
+                ctx.font = '12px Inter';
+                ctx.fillText('Upload CSVs and Run Engine to analyze transaction networks.', W/2, H/2 + 15);
+                return;
+            }
+            
+            const nodes = window.fraudNetworkData.nodes;
+            const edges = window.fraudNetworkData.edges;
+            const cycles = window.fraudNetworkData.cycles || [];
+            
+            // Assign positions in a circle for better layout
+            const centerX = W / 2;
+            const centerY = H / 2;
+            const radius = Math.min(W, H) / 2 - 40;
+            
+            nodes.forEach((node, i) => {
+                if (!node.x) {
+                    const angle = (i / nodes.length) * 2 * Math.PI;
+                    node.x = centerX + radius * Math.cos(angle);
+                    node.y = centerY + radius * Math.sin(angle);
+                }
+            });
+            
+            // Draw edges
+            edges.forEach(edge => {
+                const from = nodes[edge.from];
+                const to = nodes[edge.to];
+                if (!from || !to) return;
+                
+                // check if edge is part of a cycle
+                let inCycle = false;
+                for (let c of cycles) {
+                    const idx1 = c.indexOf(from.id);
+                    const idx2 = c.indexOf(to.id);
+                    if (idx1 !== -1 && idx2 !== -1) {
+                        if ((idx1 + 1) % c.length === idx2) {
+                            inCycle = true;
+                            break;
+                        }
+                    }
+                }
+                
+                ctx.beginPath();
+                ctx.moveTo(from.x, from.y);
+                ctx.lineTo(to.x, to.y);
+                ctx.strokeStyle = inCycle ? '#ef4444' : '#64748b66';
+                ctx.lineWidth = inCycle ? 2 : 1;
+                ctx.stroke();
+                
+                // arrow head
+                const angle = Math.atan2(to.y - from.y, to.x - from.x);
+                const midX = from.x + (to.x - from.x) * 0.7; // Closer to target
+                const midY = from.y + (to.y - from.y) * 0.7;
+                ctx.beginPath();
+                ctx.moveTo(midX + 6 * Math.cos(angle), midY + 6 * Math.sin(angle));
+                ctx.lineTo(midX - 6 * Math.cos(angle) + 4 * Math.cos(angle + Math.PI/2), midY - 6 * Math.sin(angle) + 4 * Math.sin(angle + Math.PI/2));
+                ctx.lineTo(midX - 6 * Math.cos(angle) - 4 * Math.cos(angle + Math.PI/2), midY - 6 * Math.sin(angle) - 4 * Math.sin(angle + Math.PI/2));
+                ctx.fillStyle = inCycle ? '#ef4444' : '#64748b66';
+                ctx.fill();
+            });
+            
+            // Draw nodes
+            nodes.forEach(node => {
+                let inCycle = cycles.some(c => c.includes(node.id));
+                const color = inCycle ? '#ef4444' : '#64748b';
+                
+                ctx.beginPath();
+                ctx.arc(node.x, node.y, 8, 0, Math.PI * 2);
+                ctx.fillStyle = color;
+                ctx.fill();
+                
+                ctx.font = '11px Inter';
+                ctx.fillStyle = '#e2e8f0';
+                ctx.textAlign = 'center';
+                ctx.fillText(node.label, node.x, node.y + 20);
+            });
+        }
+
+        // ============================================
+        // CHARTS
+        // ============================================
+        function initCharts() {
+            // Reconciliation Trend
+            const reconCtx = document.getElementById('chart-recon-trend');
+            if (reconCtx) {
+                new Chart(reconCtx, {
+                    type: 'line',
+                    data: {
+                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+                        datasets: [
+                            {
+                                label: 'Matched',
+                                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                                borderColor: '#22c55e',
+                                backgroundColor: 'rgba(34,197,94,0.1)',
+                                fill: true,
+                                tension: 0.4,
+                            },
+                            {
+                                label: 'Discrepancies',
+                                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                                borderColor: '#ef4444',
+                                backgroundColor: 'rgba(239,68,68,0.1)',
+                                fill: true,
+                                tension: 0.4,
+                            }
+                        ]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: { labels: { color: '#94a3b8', font: { size: 11 } } }
+                        },
+                        scales: {
+                            x: { grid: { color: 'rgba(148,163,184,0.08)' }, ticks: { color: '#64748b', font: { size: 10 } } },
+                            y: { grid: { color: 'rgba(148,163,184,0.08)' }, ticks: { color: '#64748b', font: { size: 10 } } }
+                        }
+                    }
+                });
+            }
+
+            // Anomaly Distribution
+            const anomalyCtx = document.getElementById('chart-anomaly-dist');
+            if (anomalyCtx) {
+                new Chart(anomalyCtx, {
+                    type: 'bar',
+                    data: {
+                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+                        datasets: [
+                            {
+                                label: 'Critical',
+                                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                                backgroundColor: '#ef4444',
+                                borderRadius: 4,
+                            },
+                            {
+                                label: 'High',
+                                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                                backgroundColor: '#f97316',
+                                borderRadius: 4,
+                            },
+                            {
+                                label: 'Medium',
+                                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                                backgroundColor: '#eab308',
+                                borderRadius: 4,
+                            }
+                        ]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: { labels: { color: '#94a3b8', font: { size: 11 } } }
+                        },
+                        scales: {
+                            x: { stacked: true, grid: { color: 'rgba(148,163,184,0.08)' }, ticks: { color: '#64748b', font: { size: 10 } } },
+                            y: { stacked: true, grid: { color: 'rgba(148,163,184,0.08)' }, ticks: { color: '#64748b', font: { size: 10 } } }
+                        }
+                    }
+                });
+            }
+
+            // Match Confidence (Doughnut)
+            const confCtx = document.getElementById('chart-confidence');
+            if (confCtx) {
+                new Chart(confCtx, {
+                    type: 'doughnut',
+                    data: {
+                        labels: ['Exact Match', 'Fuzzy Match', 'AI Semantic', 'Unmatched'],
+                        datasets: [{
+                            data: [0, 0, 0, 0],
+                            backgroundColor: ['#22c55e', '#eab308', '#6366f1', '#ef4444'],
+                            borderWidth: 0,
+                            hoverOffset: 8,
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        cutout: '65%',
+                        plugins: {
+                            legend: {
+                                display: false
+                            }
+                        }
+                    }
+                });
+            }
+        }
+
+        function updateFileLabel(type) {
+            const fileInput = document.getElementById(`${type}-file`);
+            const label = document.getElementById(`lbl-${type}`);
+            if (fileInput.files.length > 0) {
+                label.textContent = fileInput.files[0].name;
+                label.classList.remove('hidden');
+                label.classList.add('inline');
+            }
+        }
+
+        async function runReconciliation() {
+            const booksFile = document.getElementById('books-file').files[0];
+            const gstFile = document.getElementById('gst-file').files[0];
+            
+            if (!booksFile || !gstFile) {
+                showToast('Please select both Books and GST CSV files first.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('books', booksFile);
+            formData.append('gst', gstFile);
+
+            await executeBackendCall('/api/reconcile', formData, 'Reconciling data...');
+        }
+
+        async function fetchLiveGst() {
+            const booksFile = document.getElementById('books-file').files[0];
+            
+            if (!booksFile) {
+                showToast('Please select Books CSV file first.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('books', booksFile);
+
+            await executeBackendCall('/api/fetch_live', formData, 'Fetching live GST and reconciling...');
+        }
+
+        async function executeBackendCall(endpoint, formData, startMsg) {
+            const modal = document.getElementById('process-modal');
+            const bar = document.getElementById('process-bar');
+            const step = document.getElementById('process-step');
+            const pct = document.getElementById('process-pct');
+
+            modal.classList.remove('hidden');
+            bar.style.width = '30%';
+            step.textContent = startMsg;
+            pct.textContent = '30%';
+
+            try {
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (!response.ok) throw new Error('API request failed');
+                const data = await response.json();
+                
+                if (data.error) throw new Error(data.error);
+                
+                bar.style.width = '100%';
+                step.textContent = 'Complete!';
+                pct.textContent = '100%';
+
+                updateDashboardWithRealData(data);
+
+                setTimeout(() => {
+                    modal.classList.add('hidden');
+                    showToast('Process complete! ' + data.summary.exact + ' matched.', 'success');
+                }, 600);
+            } catch (err) {
+                modal.classList.add('hidden');
+                showToast('Error: ' + err.message, 'error');
+                console.error(err);
+            }
+        }
+
+        function updateDashboardWithRealData(data) {
+            // Update Dashboard Stats
+            document.getElementById('stat-total-records').textContent = data.summary.total_books;
+            document.getElementById('stat-matched').textContent = data.summary.exact;
+            document.getElementById('stat-unmatched').textContent = data.summary.unmatched;
+            document.getElementById('stat-anomalies').textContent = data.summary.anomalies;
+            
+            // Calculate percentages
+            const total = data.summary.total_books || 1;
+            const matchRate = ((data.summary.exact / total) * 100).toFixed(1);
+            const unmatchedRate = ((data.summary.unmatched / total) * 100).toFixed(1);
+            const anomalyRate = ((data.summary.anomalies / total) * 100).toFixed(1);
+            
+            document.getElementById('stat-total-records-sub').textContent = 'Live data loaded';
+            document.getElementById('stat-matched-sub').textContent = `${matchRate}% match rate`;
+            document.getElementById('stat-unmatched-sub').textContent = `${unmatchedRate}% discrepancy`;
+            document.getElementById('stat-anomalies-sub').textContent = `${anomalyRate}% contamination`;
+            
+            // For Risk and Fraud, we default to 0 since we're replacing dummy data
+            document.getElementById('stat-fraud-rings').textContent = '0';
+            document.getElementById('stat-fraud-rings-sub').textContent = 'No rings detected';
+            document.getElementById('stat-risk-score').innerHTML = '0.0<span class="text-sm text-surface-400">/10</span>';
+            document.getElementById('stat-risk-score-sub').textContent = 'Low risk level';
+            
+            // Update Anomaly Tab Stats
+            if(document.getElementById('anomaly-trained-sub')) document.getElementById('anomaly-trained-sub').textContent = `Anomaly detection model trained on ${data.summary.total_books} records.`;
+            if(document.getElementById('anomaly-analyzed')) document.getElementById('anomaly-analyzed').textContent = `${data.anomalies.length}/${data.summary.anomalies}`;
+            
+            let crit = 0, high = 0, med = 0;
+            data.anomalies.forEach(a => {
+                const s = a.AnomalyScore || 0;
+                if (s > 0.3) crit++;
+                else if (s > 0.1) high++;
+                else med++;
+            });
+            const totAnom = data.summary.anomalies || 1;
+            document.getElementById('anomaly-crit-count').textContent = crit;
+            document.getElementById('anomaly-crit-bar').style.width = `${(crit/totAnom)*100}%`;
+            document.getElementById('anomaly-high-count').textContent = high;
+            document.getElementById('anomaly-high-bar').style.width = `${(high/totAnom)*100}%`;
+            document.getElementById('anomaly-med-count').textContent = med;
+            document.getElementById('anomaly-med-bar').style.width = `${(med/totAnom)*100}%`;
+            
+            // Update newly added dynamic IDs for Reconciliation and Anomaly tab stats
+            if(document.getElementById('recon-stat-exact')) document.getElementById('recon-stat-exact').textContent = data.summary.exact || 0;
+            if(document.getElementById('recon-stat-fuzzy')) document.getElementById('recon-stat-fuzzy').textContent = data.summary.fuzzy || 0;
+            if(document.getElementById('recon-stat-semantic')) document.getElementById('recon-stat-semantic').textContent = data.summary.semantic || 0;
+            if(document.getElementById('recon-stat-unmatched')) document.getElementById('recon-stat-unmatched').textContent = data.summary.unmatched || 0;
+            
+            if(document.getElementById('total-count')) document.getElementById('total-count').textContent = data.summary.total_books || 0;
+            if(document.getElementById('showing-count')) document.getElementById('showing-count').textContent = data.reconciliation.length || 0;
+            
+            if(document.getElementById('alerts-count')) document.getElementById('alerts-count').textContent = data.summary.anomalies || 0;
+            if(document.getElementById('filter-crit')) document.getElementById('filter-crit').textContent = crit;
+            if(document.getElementById('filter-all')) document.getElementById('filter-all').textContent = totAnom;
+            
+            
+            
+            // Update Recent Alerts
+            const recentAlertsDiv = document.getElementById('recent-alerts');
+            if (recentAlertsDiv) {
+                if (data.anomalies && data.anomalies.length > 0) {
+                    // Sort by highest risk first and take top 5
+                    const sortedAnomalies = [...data.anomalies].sort((a, b) => (b.AnomalyScore || 0) - (a.AnomalyScore || 0)).slice(0, 5);
+                    
+                    recentAlertsDiv.innerHTML = sortedAnomalies.map(a => {
+                        const score = a.AnomalyScore || 0;
+                        const risk = score > 0.3 ? 'Critical' : score > 0.1 ? 'High' : 'Medium';
+                        const riskClass = risk === 'Critical' ? 'bg-red-500/10 border-red-500/20 text-red-400' :
+                                         risk === 'High' ? 'bg-orange-500/10 border-orange-500/20 text-orange-400' : 'bg-yellow-500/10 border-yellow-500/20 text-yellow-400';
+                        const icon = risk === 'Critical' ? 'alert-octagon' : risk === 'High' ? 'alert-triangle' : 'info';
+                        
+                        return `
+                            <div class="p-3 rounded-lg border ${riskClass} flex gap-3 items-start">
+                                <div class="mt-0.5"><i data-lucide="${icon}" class="w-4 h-4"></i></div>
+                                <div>
+                                    <div class="flex items-center gap-2 mb-1">
+                                        <span class="text-xs font-bold uppercase tracking-wider">${risk}</span>
+                                        <span class="text-[10px] font-mono opacity-80">Score: ${score.toFixed(3)}</span>
+                                    </div>
+                                    <p class="text-xs text-surface-200">Invoice <span class="font-mono text-white">${a.InvoiceID || '-'}</span> from <span class="text-white">${a.VendorName_books || 'Unknown'}</span></p>
+                                </div>
+                            </div>
+                        `;
+                    }).join('');
+                    // Need to re-initialize lucide icons for newly added elements
+                    setTimeout(() => lucide.createIcons(), 50);
+                } else {
+                    recentAlertsDiv.innerHTML = '<p class="text-sm text-surface-400">No active alerts.</p>';
+                }
+            }
+
+            // Fraud & FAISS Updates
+            if (data.faiss_stats) {
+                if(document.getElementById('faiss-vectors')) document.getElementById('faiss-vectors').textContent = `${data.faiss_stats.ntotal} vectors`;
+                if(document.getElementById('faiss-memory')) document.getElementById('faiss-memory').textContent = `${data.faiss_stats.memory_mb} MB`;
+                if(document.getElementById('faiss-latency')) document.getElementById('faiss-latency').textContent = `0.8ms avg`;
+            }
+
+            if (data.fraud_network) {
+                const fraudCount = data.summary.fraud_rings || 0;
+                if(document.getElementById('stat-fraud-rings')) document.getElementById('stat-fraud-rings').textContent = fraudCount;
+                if(document.getElementById('stat-fraud-rings-sub')) document.getElementById('stat-fraud-rings-sub').textContent = fraudCount > 0 ? `${fraudCount} rings detected` : 'No rings detected';
+                
+                if (document.getElementById('fraud-nodes')) document.getElementById('fraud-nodes').textContent = data.fraud_network.nodes.length;
+                if (document.getElementById('fraud-edges')) document.getElementById('fraud-edges').textContent = data.fraud_network.edges.length;
+                
+                const riskScore = (data.summary.overall_risk_score || 0).toFixed(1);
+                if(document.getElementById('stat-risk-score')) document.getElementById('stat-risk-score').innerHTML = `${riskScore}<span class="text-sm text-surface-400">/10</span>`;
+                
+                if (fraudCount > 0) {
+                    if(document.getElementById('stat-risk-score-sub')) document.getElementById('stat-risk-score-sub').textContent = riskScore > 5 ? 'High risk level' : 'Moderate risk level';
+                    
+                    const ringsList = document.getElementById('fraud-rings-list');
+                    if(ringsList) {
+                        ringsList.innerHTML = data.fraud_network.cycles.map((cycle, i) => `
+                            <div class="p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+                                <p class="text-xs text-red-400 font-semibold mb-1">Ring #${i+1} Detected</p>
+                                <p class="text-xs text-surface-300 font-mono">${cycle.join(' → ')}</p>
+                            </div>
+                        `).join('');
+                    }
+                } else {
+                    const ringsList = document.getElementById('fraud-rings-list');
+                    if (ringsList) ringsList.innerHTML = '<p class="text-sm text-surface-400">No fraud rings detected in current dataset.</p>';
+                }
+                
+                // Store network data for canvas rendering
+                window.fraudNetworkData = data.fraud_network;
+                if (!document.getElementById('tab-fraud').classList.contains('hidden')) {
+                    drawFraudNetwork();
+                }
+            }
+
+            // Update Reconciliation Table
+            const reconBody = document.getElementById('recon-table-body');
+            reconBody.innerHTML = data.reconciliation.map(row => {
+                const matchType = row.MatchStatus;
+                const statusClass = matchType === 'Exact Match' ? 'text-green-400' :
+                                   matchType.includes('Fuzzy') ? 'text-yellow-400' :
+                                   matchType.includes('Semantic') ? 'text-brand-400' : 'text-red-400';
+                
+                const confidence = matchType.includes('(') ? matchType.split('(')[1].replace(')', '') : (matchType === 'Exact Match' ? '100%' : '0%');
+                const matchLabel = matchType.split(' ')[0];
+                
+                return `
+                    <tr class="border-b border-surface-800/30 hover:bg-surface-800/30 transition">
+                        <td class="px-4 py-3 font-mono text-xs">${row.InvoiceID || '-'}</td>
+                        <td class="px-4 py-3 font-mono text-xs">${row.VendorName_gst || row.VendorName_books || '-'}</td>
+                        <td class="px-4 py-3 text-xs">₹${row.Amount_books || row.Amount_gst || 0}</td>
+                        <td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-[10px] font-semibold text-white bg-surface-700">${matchLabel}</span></td>
+                        <td class="px-4 py-3"><span class="${statusClass} text-xs font-mono">${confidence}</span></td>
+                        <td class="px-4 py-3"><span class="w-2 h-2 rounded-full inline-block ${matchType === 'Exact Match' ? 'bg-green-400' : 'bg-red-400'}"></span></td>
+                    </tr>
+                `;
+            }).join('');
+
+            // Update Match Confidence Chart if it exists
+            const confCtx = document.getElementById('chart-confidence');
+            if (confCtx) {
+                const chart = Chart.getChart(confCtx);
+                if (chart) {
+                    chart.data.datasets[0].data = [
+                        data.summary.exact || 0,
+                        data.summary.fuzzy || 0,
+                        data.summary.semantic || 0,
+                        data.summary.unmatched || 0
+                    ];
+                    chart.update();
+                }
+            }
+            
+            // Update Recon Trend Chart
+            const trendCtx = document.getElementById('chart-recon-trend');
+            if (trendCtx && data.charts && data.charts.recon_trend) {
+                const chart = Chart.getChart(trendCtx);
+                if (chart) {
+                    chart.data.datasets[0].data = data.charts.recon_trend;
+                    if (data.charts.discrep_trend && chart.data.datasets[1]) {
+                        chart.data.datasets[1].data = data.charts.discrep_trend;
+                    }
+                    chart.update();
+                }
+            }
+            
+            // Update Anomaly Dist Chart
+            const distCtx = document.getElementById('chart-anomaly-dist');
+            if (distCtx && data.charts && data.charts.anomaly_dist) {
+                const chart = Chart.getChart(distCtx);
+                if (chart) {
+                    chart.data.datasets[0].data = data.charts.anomaly_dist.critical;
+                    chart.data.datasets[1].data = data.charts.anomaly_dist.high;
+                    chart.data.datasets[2].data = data.charts.anomaly_dist.medium;
+                    chart.update();
+                }
+            }
+
+            
+            window.anomalyDataMap = {};
+            
+            // Calculate anomaly counts
+            let critCount = 0, highCount = 0, medCount = 0;
+            let maxScore = 0, minScore = 1;
+            data.anomalies.forEach(a => {
+                const s = a.AnomalyScore || 0;
+                if (s > maxScore) maxScore = s;
+                if (s < minScore && s > 0) minScore = s;
+                if (s > 0.3) critCount++;
+                else if (s > 0.1) highCount++;
+                else medCount++;
+            });
+            if (minScore === 1 && maxScore === 0) minScore = 0; // fallback if no anomalies
+            const totalAnomalies = data.anomalies.length;
+            
+            if (document.getElementById('anomaly-score-range')) {
+                document.getElementById('anomaly-score-range').textContent = totalAnomalies > 0 ? `${minScore.toFixed(2)} - ${maxScore.toFixed(2)}` : '--';
+            }
+            if (document.getElementById('anomaly-crit-count')) document.getElementById('anomaly-crit-count').textContent = critCount;
+            if (document.getElementById('anomaly-high-count')) document.getElementById('anomaly-high-count').textContent = highCount;
+            if (document.getElementById('anomaly-med-count')) document.getElementById('anomaly-med-count').textContent = medCount;
+            
+            if (document.getElementById('filter-crit')) document.getElementById('filter-crit').textContent = critCount;
+            if (document.getElementById('filter-all')) document.getElementById('filter-all').textContent = totalAnomalies;
+            
+            if (totalAnomalies > 0) {
+                if (document.getElementById('anomaly-crit-bar')) document.getElementById('anomaly-crit-bar').style.width = `${(critCount/totalAnomalies)*100}%`;
+                if (document.getElementById('anomaly-high-bar')) document.getElementById('anomaly-high-bar').style.width = `${(highCount/totalAnomalies)*100}%`;
+                if (document.getElementById('anomaly-med-bar')) document.getElementById('anomaly-med-bar').style.width = `${(medCount/totalAnomalies)*100}%`;
+            } else {
+                if (document.getElementById('anomaly-crit-bar')) document.getElementById('anomaly-crit-bar').style.width = '0%';
+                if (document.getElementById('anomaly-high-bar')) document.getElementById('anomaly-high-bar').style.width = '0%';
+                if (document.getElementById('anomaly-med-bar')) document.getElementById('anomaly-med-bar').style.width = '0%';
+            }
+
+            
+            // Update Anomaly Table
+            const anomalyBody = document.getElementById('anomaly-table-body');
+            anomalyBody.innerHTML = data.anomalies.map(a => {
+                window.anomalyDataMap[a.InvoiceID] = a;
+                const score = a.AnomalyScore || 0;
+                const risk = score > 0.3 ? 'Critical' : score > 0.1 ? 'High' : 'Medium';
+                const riskClass = risk === 'Critical' ? 'bg-red-500/20 text-red-400' :
+                                 risk === 'High' ? 'bg-orange-500/20 text-orange-400' : 'bg-yellow-500/20 text-yellow-400';
+                
+                return `
+                    <tr class="border-b border-surface-800/30 hover:bg-surface-800/30 transition">
+                        <td class="px-4 py-3 font-mono text-xs">${a.InvoiceID || '-'}</td>
+                        <td class="px-4 py-3 text-xs">${a.VendorName_books || '-'}</td>
+                        <td class="px-4 py-3 text-xs font-mono">₹${a.Amount_books || 0}</td>
+                        <td class="px-4 py-3"><span class="text-xs font-mono text-surface-300">${score.toFixed(3)}</span></td>
+                        <td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-[10px] font-semibold ${riskClass}">${risk}</span></td>
+                        <td class="px-4 py-3"><button class="text-[10px] px-2 py-1 rounded bg-brand-600/20 text-brand-300" onclick="showExplanation('${a.InvoiceID}')">View</button></td>
+                    </tr>
+                `;
+            }).join('');
+        }
+
+        // ============================================
+        // TOAST NOTIFICATION
+        // ============================================
+        function showToast(message, type = 'info') {
+            const container = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            const colors = {
+                success: 'border-green-500/30 bg-green-500/10',
+                error: 'border-red-500/30 bg-red-500/10',
+                info: 'border-brand-500/30 bg-brand-500/10'
+            };
+            const icons = {
+                success: 'check-circle',
+                error: 'alert-circle',
+                info: 'info'
+            };
+            toast.className = `flex items-start gap-3 p-4 rounded-xl border ${colors[type]} backdrop-blur-xl animate-slide-in max-w-sm`;
+            toast.innerHTML = `
+                <i data-lucide="${icons[type]}" class="w-5 h-5 ${type === 'success' ? 'text-green-400' : type === 'error' ? 'text-red-400' : 'text-brand-400'} shrink-0 mt-0.5"></i>
+                <p class="text-sm text-surface-200">${message}</p>
+            `;
+            container.appendChild(toast);
+            lucide.createIcons();
+            setTimeout(() => {
+                toast.style.opacity = '0';
+                toast.style.transform = 'translateX(100%)';
+                toast.style.transition = 'all 0.3s ease';
+                setTimeout(() => toast.remove(), 300);
+            }, 5000);
+        }
+
+        // ============================================
+        // EXPORT CSV
+        // ============================================
+        function exportCSV() {
+            const reconBody = document.getElementById('recon-table-body');
+            if (!reconBody || reconBody.rows.length === 0) {
+                showToast('No data to export. Run Engine first.', 'error');
+                return;
+            }
+            showToast('Generating CSV export...', 'info');
+            setTimeout(() => {
+                const rows = Array.from(reconBody.querySelectorAll('tr'));
+                const headers = ['Invoice ID', 'Vendor', 'Amount', 'Match Type', 'Confidence', 'Status'];
+                const csvRows = rows.map(tr => Array.from(tr.querySelectorAll('td')).map(td => td.textContent.trim()).join(','));
+                const csv = [headers.join(','), ...csvRows].join('\n');
+                const blob = new Blob([csv], { type: 'text/csv' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'reconciliation_results.csv';
+                a.click();
+                URL.revokeObjectURL(url);
+                showToast('CSV exported successfully!', 'success');
+            }, 500);
+        }
+
+        function filterReconTable() {
+            // In a full implementation, this would filter the current data array.
+            showToast('Filtering is coming soon!', 'info');
+        }
+
+        // ============================================
+        // INIT
+        // ============================================
+        document.addEventListener('DOMContentLoaded', () => {
+            lucide.createIcons();
+            initCharts();
+            
+            // Clear initial dummy tables
+            document.getElementById('recon-table-body').innerHTML = `<tr><td colspan="6" class="text-center py-8 text-surface-400">Please upload CSVs and Run Engine to view data.</td></tr>`;
+            document.getElementById('anomaly-table-body').innerHTML = `<tr><td colspan="6" class="text-center py-8 text-surface-400">No anomalies detected yet. Upload data and Run Engine to begin analysis.</td></tr>`;
+        });
+
+        // Redraw fraud network on resize
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                if (!document.getElementById('tab-fraud').classList.contains('hidden')) {
+                    drawFraudNetwork();
+                }
+            }, 200);
+        });
+    </script>
+</body>
+</html>

llm_explainer.py

@@ -0,0 +1,92 @@
+import os
+import requests
+from dotenv import load_dotenv
+import logging
+
+load_dotenv()
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class LLMExplainer:
+    def __init__(self):
+        self.api_key = os.environ.get("MISTRAL_API_KEY")
+        self.api_url = "https://api.mistral.ai/v1/chat/completions"
+        self.explanation_cache = {}
+
+    def explain_discrepancy(self, row, match_status, books_vendor, gst_vendor, books_amount, gst_amount):
+        """
+        Generates a human-readable explanation for a discrepancy using Mistral AI.
+        """
+        if not self.api_key:
+            return "API Key not configured. Discrepancy: " + match_status
+
+        is_anomaly = row.get('IsAnomaly', False)
+        
+        if match_status == "Exact Match" and not is_anomaly:
+            return "Records match perfectly."
+            
+        cache_key = (match_status, books_vendor, gst_vendor, books_amount, gst_amount, is_anomaly)
+        if cache_key in self.explanation_cache:
+            logger.info("Returning cached LLM explanation.")
+            return self.explanation_cache[cache_key]
+
+        prompt = f"""
+        You are an expert AI financial auditor. Explain the following transaction in 1-2 concise, professional sentences. Provide a recommended action.
+        
+        Reconciliation Status: {match_status}
+        Is Flagged as Anomaly: {is_anomaly}
+        Anomaly Score: {row.get('AnomalyScore', 0.0)}
+        Invoice ID: {row.get('InvoiceID', 'Unknown')}
+        Books Vendor: {books_vendor}
+        GST Vendor: {gst_vendor}
+        Books Amount: {books_amount}
+        GST Amount: {gst_amount}
+        
+        Explanation and Recommendation:
+        """
+
+        headers = {
+            "Content-Type": "application/json",
+            "Accept": "application/json",
+            "Authorization": f"Bearer {self.api_key}"
+        }
+
+        data = {
+            "model": "mistral-tiny", # Using tiny for faster responses, can upgrade to small/medium
+            "messages": [
+                {"role": "user", "content": prompt}
+            ],
+            "temperature": 0.3
+        }
+
+        try:
+            response = requests.post(self.api_url, headers=headers, json=data, timeout=10)
+            response.raise_for_status()
+            result = response.json()
+            explanation = result['choices'][0]['message']['content'].strip()
+            self.explanation_cache[cache_key] = explanation
+            return explanation
+        except requests.exceptions.RequestException as e:
+            logger.error(f"Error calling Mistral API: {e}")
+            return f"API Error ({match_status}). Please check amounts and vendor names manually."
+        except (KeyError, IndexError) as e:
+             logger.error(f"Unexpected response format from Mistral API: {e}")
+             return f"Error parsing AI response ({match_status})."
+
+    def generate_explanations_batch(self, discrepancies_df):
+        """
+        Generates explanations for a dataframe of discrepancies.
+        """
+        explanations = []
+        for _, row in discrepancies_df.iterrows():
+            status = row.get('MatchStatus', 'Unknown')
+            b_vendor = row.get('VendorName_books', 'N/A')
+            g_vendor = row.get('VendorName_gst', 'N/A')
+            b_amount = row.get('Amount_books', 0)
+            g_amount = row.get('Amount_gst', 0)
+            
+            explanation = self.explain_discrepancy(row, status, b_vendor, g_vendor, b_amount, g_amount)
+            explanations.append(explanation)
+            
+        return explanations

main.py

@@ -0,0 +1,183 @@
+from fastapi import FastAPI, File, UploadFile, Request
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+import pandas as pd
+import io
+import uvicorn
+from reconciliation import ReconciliationEngine
+from anomaly import AnomalyDetector
+from llm_explainer import LLMExplainer
+from fraud_graph import FraudGraph
+from gst_api import GSTGatewayMock
+import os
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Initialize engines
+try:
+    recon_engine = ReconciliationEngine(threshold=85.0)
+except Exception as e:
+    recon_engine = None
+
+anomaly_detector = AnomalyDetector(contamination=0.05)
+llm_explainer = LLMExplainer()
+fraud_graph = FraudGraph()
+gst_api = GSTGatewayMock()
+
+@app.post("/api/reconcile")
+async def api_reconcile(books: UploadFile = File(...), gst: UploadFile = File(...)):
+    books_content = await books.read()
+    gst_content = await gst.read()
+    
+    try:
+        books_df = pd.read_csv(io.BytesIO(books_content))
+        gst_df = pd.read_csv(io.BytesIO(gst_content))
+    except Exception as e:
+        return {"error": "Invalid CSV format. Please ensure you are uploading valid CSV files, not PDFs or Excel documents."}
+        
+    return process_data(books_df, gst_df)
+
+@app.post("/api/explain")
+async def api_explain(request: Request):
+    data = await request.json()
+    row = data.get("row", {})
+    match_status = data.get("match_status", "Anomaly")
+    b_vendor = data.get("b_vendor", "N/A")
+    g_vendor = data.get("g_vendor", "N/A")
+    b_amount = data.get("b_amount", 0)
+    g_amount = data.get("g_amount", 0)
+    
+    explanation = llm_explainer.explain_discrepancy(row, match_status, b_vendor, g_vendor, b_amount, g_amount)
+    return {"explanation": explanation}
+
+@app.post("/api/fetch_live")
+async def api_fetch_live(books: UploadFile = File(...)):
+    books_content = await books.read()
+    books_df = pd.read_csv(io.BytesIO(books_content))
+    
+    gst_df = gst_api.fetch_gst_data("2023-01-01", "2023-12-31", "27AADCB2230M1Z2")
+    return process_data(books_df, gst_df)
+
+def process_data(books_df, gst_df):
+    if recon_engine is None:
+        return {"error": "Reconciliation engine failed to initialize"}
+        
+    try:
+        merged_df = recon_engine.reconcile(books_df, gst_df)
+    except Exception as e:
+        return {"error": f"Reconciliation failed: {str(e)}"}
+        
+    books_with_anomalies = anomaly_detector.detect_anomalies(books_df, amount_col='Amount')
+    
+    if 'InvoiceID' in merged_df.columns and 'InvoiceID' in books_with_anomalies.columns:
+        merged_df = pd.merge(merged_df, books_with_anomalies[['InvoiceID', 'IsAnomaly', 'AnomalyScore']], 
+                             on='InvoiceID', how='left')
+                             
+    discrepancies = merged_df[merged_df['MatchStatus'] != 'Exact Match'].copy()
+    
+    recon_results = merged_df.fillna("").infer_objects(copy=False).to_dict(orient="records")
+    anomalies = merged_df[merged_df['IsAnomaly'] == True].fillna("").infer_objects(copy=False).to_dict(orient="records")
+    
+    # Compute chart data
+    recon_trend = [0] * 12
+    discrep_trend = [0] * 12
+    anomaly_dist = {"critical": [0]*12, "high": [0]*12, "medium": [0]*12}
+    
+    # Try to extract month if InvoiceDate exists
+    date_col = 'InvoiceDate' if 'InvoiceDate' in merged_df.columns else 'InvoiceDate_books' if 'InvoiceDate_books' in merged_df.columns else None
+    
+    if date_col and date_col in merged_df.columns:
+        merged_df['Month'] = pd.to_datetime(merged_df[date_col], errors='coerce').dt.month
+        merged_df['Month'] = merged_df['Month'].fillna(1).astype(int)
+        
+        monthly_recon = merged_df[merged_df['MatchStatus'] == 'Exact Match'].groupby('Month').size()
+        for m, count in monthly_recon.items():
+            if 1 <= m <= 12:
+                recon_trend[m-1] = int(count)
+                
+        monthly_discrep = merged_df[merged_df['MatchStatus'] != 'Exact Match'].groupby('Month').size()
+        for m, count in monthly_discrep.items():
+            if 1 <= m <= 12:
+                discrep_trend[m-1] = int(count)
+                
+        monthly_anomalies = merged_df[merged_df['IsAnomaly'] == True]
+        for _, row in monthly_anomalies.iterrows():
+            m = int(row.get('Month', 1))
+            if 1 <= m <= 12:
+                score = row.get('AnomalyScore', 0)
+                if score > 0.3:
+                    anomaly_dist["critical"][m-1] += 1
+                elif score > 0.1:
+                    anomaly_dist["high"][m-1] += 1
+                else:
+                    anomaly_dist["medium"][m-1] += 1
+    
+    # Run Fraud Graph Analysis
+    try:
+        fraud_graph.build_graph(merged_df, source_col='VendorName_books', target_col='VendorName_gst', amount_col='Amount_books')
+        cycles = fraud_graph.detect_cycles()
+        risk_scores = fraud_graph.analyze_risk_nodes()
+        
+        fraud_nodes = [{"id": str(n), "label": str(n), "size": 15, "color": "#64748b", "risk_score": risk_scores.get(n, 0.0)} for n in fraud_graph.graph.nodes()]
+        fraud_edges = [{"from": list(fraud_graph.graph.nodes()).index(u), "to": list(fraud_graph.graph.nodes()).index(v), "weight": d.get('weight', 0)} for u, v, d in fraud_graph.graph.edges(data=True)]
+        max_risk = max(risk_scores.values()) if risk_scores else 0.0
+        overall_risk_score = min(10.0, max_risk * 100) # Arbitrary scale to 0-10
+    except Exception as e:
+        cycles = []
+        fraud_nodes = []
+        fraud_edges = []
+        overall_risk_score = 0.0
+        
+    # Get FAISS Stats
+    try:
+        ntotal = recon_engine.index.ntotal if recon_engine and recon_engine.index else 0
+        mem_mb = round(ntotal * 384 * 4 / (1024 * 1024), 2)
+    except:
+        ntotal = 0
+        mem_mb = 0
+
+    return {
+        "summary": {
+            "total_books": len(books_df),
+            "total_gst": len(gst_df),
+            "exact": len(merged_df[merged_df['MatchStatus'] == 'Exact Match']),
+            "fuzzy": len(merged_df[merged_df['MatchStatus'].str.contains('Fuzzy', na=False)]),
+            "semantic": len(merged_df[merged_df['MatchStatus'].str.contains('Semantic', na=False)]),
+            "discrepancies": len(discrepancies),
+            "unmatched": len(merged_df[merged_df['MatchStatus'].str.contains('Mismatch', na=False) | merged_df['MatchStatus'].str.contains('Missing', na=False)]),
+            "anomalies": len(anomalies),
+            "fraud_rings": len(cycles),
+            "overall_risk_score": overall_risk_score
+        },
+        "charts": {
+            "recon_trend": recon_trend,
+            "discrep_trend": discrep_trend,
+            "anomaly_dist": anomaly_dist
+        },
+        "fraud_network": {
+            "nodes": fraud_nodes,
+            "edges": fraud_edges,
+            "cycles": cycles
+        },
+        "faiss_stats": {
+            "ntotal": ntotal,
+            "memory_mb": mem_mb
+        },
+        "reconciliation": recon_results[:50], # Limit payload for UI
+        "anomalies": anomalies[:50]
+    }
+
+# Serve the frontend files
+app.mount("/", StaticFiles(directory=".", html=True), name="static")
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

reconciliation.py

@@ -0,0 +1,139 @@
+import pandas as pd
+import numpy as np
+from rapidfuzz import fuzz
+from sentence_transformers import SentenceTransformer
+import faiss
+import os
+import pickle
+import logging
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class ReconciliationEngine:
+    def __init__(self, threshold=85.0, model_name='all-MiniLM-L6-v2', index_path='vendor_index.faiss'):
+        self.threshold = threshold
+        self.model = SentenceTransformer(model_name)
+        self.index_path = index_path
+        self.vendor_mapping_path = 'vendor_mapping.pkl'
+        self.index = None
+        self.vendor_names = []
+        self._load_or_create_index()
+
+    def _load_or_create_index(self):
+        # We need dimension size for the chosen model. MiniLM-L6-v2 is 384
+        d = self.model.get_sentence_embedding_dimension()
+        
+        if os.path.exists(self.index_path) and os.path.exists(self.vendor_mapping_path):
+            logger.info("Loading existing FAISS index.")
+            self.index = faiss.read_index(self.index_path)
+            with open(self.vendor_mapping_path, 'rb') as f:
+                self.vendor_names = pickle.load(f)
+        else:
+            logger.info("Creating new FAISS index.")
+            self.index = faiss.IndexFlatL2(d)
+            self.vendor_names = []
+
+    def _save_index(self):
+        faiss.write_index(self.index, self.index_path)
+        with open(self.vendor_mapping_path, 'wb') as f:
+            pickle.dump(self.vendor_names, f)
+
+    def learn_vendors(self, vendors):
+        """Adds new vendors to the FAISS index."""
+        if not hasattr(self, 'embedding_cache'):
+            self.embedding_cache = {}
+            
+        new_vendors = [v for v in set(vendors) if pd.notna(v) and v not in self.vendor_names]
+        if new_vendors:
+            logger.info(f"Learning {len(new_vendors)} new vendors.")
+            embeddings = self.model.encode(new_vendors)
+            self.index.add(np.array(embeddings).astype('float32'))
+            self.vendor_names.extend(new_vendors)
+            
+            # Pre-cache to speed up pair-wise matching later
+            for v, emb in zip(new_vendors, embeddings):
+                self.embedding_cache[v] = emb / np.linalg.norm(emb)
+                
+            self._save_index()
+
+    def get_embedding(self, vendor):
+        if not hasattr(self, 'embedding_cache'):
+            self.embedding_cache = {}
+        if vendor not in self.embedding_cache:
+            emb = self.model.encode([vendor])[0]
+            self.embedding_cache[vendor] = emb / np.linalg.norm(emb)
+        return self.embedding_cache[vendor]
+
+    def get_semantic_similarity(self, vendor1, vendor2):
+        if pd.isna(vendor1) or pd.isna(vendor2):
+            return 0.0
+        emb1_norm = self.get_embedding(vendor1)
+        emb2_norm = self.get_embedding(vendor2)
+        sim = np.dot(emb1_norm, emb2_norm)
+        return max(0.0, sim * 100)
+
+    def search_similar_vendor(self, query_vendor, top_k=1):
+        if not self.vendor_names or pd.isna(query_vendor):
+            return None, 0.0
+        
+        query_emb = self.model.encode([query_vendor]).astype('float32')
+        distances, indices = self.index.search(query_emb, top_k)
+        
+        best_idx = indices[0][0]
+        if best_idx != -1:
+            best_match = self.vendor_names[best_idx]
+            # Calculate a normalized score based on L2 distance
+            # For normalized vectors, L2 distance squared is 2 - 2*cos(theta)
+            # This is a rough proxy; let's combine with fuzz for the final score
+            fuzz_score = fuzz.ratio(query_vendor.lower(), best_match.lower())
+            return best_match, fuzz_score
+        return None, 0.0
+
+    def reconcile(self, source_df, target_df, source_key='VendorName', target_key='VendorName', amount_col='Amount'):
+        logger.info("Starting reconciliation process.")
+        
+        # Learn vendors from both datasets
+        self.learn_vendors(source_df[source_key].tolist())
+        self.learn_vendors(target_df[target_key].tolist())
+
+        # Basic exact match on InvoiceID if it exists, otherwise we match on VendorName and Amount
+        if 'InvoiceID' in source_df.columns and 'InvoiceID' in target_df.columns:
+            source_df = source_df.drop_duplicates(subset=['InvoiceID'])
+            target_df = target_df.drop_duplicates(subset=['InvoiceID'])
+            merged = pd.merge(source_df, target_df, on='InvoiceID', how='outer', suffixes=('_books', '_gst'))
+            
+            def determine_status(row):
+                if pd.isna(row.get(f'{amount_col}_books')):
+                    return "Missing in Books"
+                if pd.isna(row.get(f'{amount_col}_gst')):
+                    return "Missing in GST"
+                
+                b_amt = float(row.get(f'{amount_col}_books', 0))
+                g_amt = float(row.get(f'{amount_col}_gst', 0))
+                
+                if abs(b_amt - g_amt) > 0.01:
+                    return "Amount Mismatch"
+                
+                b_vendor_val = row.get(f'{source_key}_books')
+                g_vendor_val = row.get(f'{target_key}_gst')
+                b_vendor = str(b_vendor_val) if pd.notna(b_vendor_val) else ''
+                g_vendor = str(g_vendor_val) if pd.notna(g_vendor_val) else ''
+                
+                if b_vendor.lower() == g_vendor.lower() and b_vendor != '':
+                    return "Exact Match"
+                
+                fuzz_score = fuzz.ratio(b_vendor.lower(), g_vendor.lower())
+                if fuzz_score >= self.threshold:
+                    return f"Fuzzy Match ({fuzz_score:.1f}%)"
+                
+                sem_score = self.get_semantic_similarity(b_vendor, g_vendor)
+                if sem_score >= self.threshold:
+                     return f"Semantic Match ({sem_score:.1f}%)"
+
+                return "Vendor Mismatch"
+            
+            merged['MatchStatus'] = merged.apply(determine_status, axis=1)
+            return merged
+        else:
+            raise ValueError("InvoiceID column is required for current reconciliation logic.")

requirements.txt

@@ -0,0 +1,15 @@
+gradio>=4.0.0
+pandas>=2.0.0
+numpy>=1.24.0
+scikit-learn>=1.3.0
+sentence-transformers>=2.2.0
+rapidfuzz>=3.0.0
+faiss-cpu>=1.7.0
+networkx>=3.0
+matplotlib>=3.7.0
+mistralai>=0.1.0
+python-dotenv>=1.0.0
+requests>=2.31.0
+fastapi>=0.100.0
+uvicorn>=0.23.0
+python-multipart>=0.0.6

utils.py

@@ -0,0 +1,118 @@
+import pandas as pd
+import numpy as np
+import random
+from datetime import datetime, timedelta
+import os
+
+def create_sample_data(num_records=100, output_dir="sample_data"):
+    if not os.path.exists(output_dir):
+        os.makedirs(output_dir)
+
+    companies = ["Acme Corp", "Global Tech", "Stark Industries", "Wayne Enterprises", "Cyberdyne", 
+                 "Umbrella Corp", "Tyrell Corporation", "Weyland-Yutani", "Omni Consumer Products", "Initech",
+                 "Hooli", "Pied Piper", "Massive Dynamic", "Aperture Science", "Black Mesa"]
+    
+    # Typos and variations for fuzzy matching
+    variations = {
+        "Acme Corp": ["Acme Corp", "Acme Corporation", "Acm Corp", "Acme Corpration"],
+        "Global Tech": ["Global Tech", "Global Technologies", "Gloabl Tech", "Global Tech Ltd."],
+        "Stark Industries": ["Stark Industries", "Stark Ind", "Strk Industries", "Stark Industries Inc."],
+        "Wayne Enterprises": ["Wayne Enterprises", "Wayne Ent", "Wayne Enterpises", "Wayne Enterprises LLC"]
+    }
+
+    books_data = []
+    gst_data = []
+
+    start_date = datetime(2023, 1, 1)
+
+    for i in range(1, num_records + 1):
+        invoice_id = f"INV-{1000 + i}"
+        base_company = random.choice(companies)
+        
+        # Determine actual names to use
+        books_company = random.choice(variations.get(base_company, [base_company]))
+        gst_company = random.choice(variations.get(base_company, [base_company]))
+        
+        base_amount = round(random.uniform(100, 10000), 2)
+        
+        # Introduce discrepancies
+        discrepancy_type = random.choices(
+            ["none", "amount_diff", "missing_in_gst", "missing_in_books", "date_diff"], 
+            weights=[0.6, 0.1, 0.1, 0.1, 0.1], 
+            k=1
+        )[0]
+        
+        books_amount = base_amount
+        gst_amount = base_amount
+        
+        invoice_date = start_date + timedelta(days=random.randint(0, 365))
+        books_date = invoice_date.strftime('%Y-%m-%d')
+        gst_date = invoice_date.strftime('%Y-%m-%d')
+
+        if discrepancy_type == "amount_diff":
+            gst_amount = round(base_amount * random.choice([0.9, 1.1, 0.5, 1.05]), 2)
+        elif discrepancy_type == "date_diff":
+            gst_date = (invoice_date + timedelta(days=random.choice([-1, 1, -5, 5]))).strftime('%Y-%m-%d')
+        
+        books_record = {
+            "InvoiceID": invoice_id,
+            "VendorName": books_company,
+            "Amount": books_amount,
+            "InvoiceDate": books_date,
+            "TaxAmount": round(books_amount * 0.18, 2)
+        }
+        
+        gst_record = {
+            "InvoiceID": invoice_id,
+            "VendorName": gst_company,
+            "Amount": gst_amount,
+            "InvoiceDate": gst_date,
+            "TaxAmount": round(gst_amount * 0.18, 2)
+        }
+
+        if discrepancy_type != "missing_in_books":
+            books_data.append(books_record)
+        if discrepancy_type != "missing_in_gst":
+            gst_data.append(gst_record)
+
+    # Add some random anomalies (high amount)
+    for _ in range(max(1, num_records // 20)):
+        idx = random.randint(0, len(books_data)-1)
+        books_data[idx]["Amount"] = books_data[idx]["Amount"] * random.uniform(5, 10)
+        books_data[idx]["TaxAmount"] = round(books_data[idx]["Amount"] * 0.18, 2)
+        
+    # INJECT CIRCULAR TRADING FRAUD RING FOR TESTING
+    ring_vendors = ["Shell Corp Alpha", "Ghost Entity Beta", "Phantom Traders Gamma"]
+    ring_amount = 55000.00
+    for idx in range(3):
+        # Create a cycle: Alpha -> Beta -> Gamma -> Alpha
+        books_v = ring_vendors[idx]
+        gst_v = ring_vendors[(idx + 1) % 3]
+        
+        inv_id = f"FRAUD-RING-{idx+1}"
+        books_data.append({
+            "InvoiceID": inv_id,
+            "VendorName": books_v,
+            "Amount": ring_amount,
+            "InvoiceDate": "2023-11-15",
+            "TaxAmount": round(ring_amount * 0.18, 2)
+        })
+        gst_data.append({
+            "InvoiceID": inv_id,
+            "VendorName": gst_v,
+            "Amount": ring_amount,
+            "InvoiceDate": "2023-11-15",
+            "TaxAmount": round(ring_amount * 0.18, 2)
+        })
+
+    books_df = pd.DataFrame(books_data)
+    gst_df = pd.DataFrame(gst_data)
+
+    books_df.to_csv(os.path.join(output_dir, "books.csv"), index=False)
+    gst_df.to_csv(os.path.join(output_dir, "gst.csv"), index=False)
+
+    return {"source": books_df, "target": gst_df}
+
+if __name__ == "__main__":
+    create_sample_data(200)
+    print("Sample data generated in sample_data directory.")

vendor_index.faiss

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e981ad9fb60c7989773c0ba4343f2e243b9694eed137a2f32caa160d071405c
+size 448557

vendor_mapping.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:962a07d11774075b801a9030446dc80e13cbd7c4231dd53f4db8d4158993b8cc
+size 5975