Upload 23 files

app/__init__.py

@@ -0,0 +1,9 @@
+from flask import Flask
+from flask_cors import CORS
+from .routes import api
+
+# Create and configure the Flask application exported by this package
+app = Flask(__name__)
+CORS(app)
+
+app.register_blueprint(api)

app/model.py

@@ -0,0 +1,136 @@
+import joblib
+import json
+import os
+import numpy as np
+import pandas as pd
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+MODEL_DIR = os.path.join(BASE_DIR, "models")
+def _load_first_existing(*names):
+    """Try the given filenames in order and load the first one that exists.
+    Returns the loaded object or raises FileNotFoundError if none exist.
+    """
+    for name in names:
+        path = os.path.join(MODEL_DIR, name)
+        if os.path.exists(path):
+            return joblib.load(path)
+    raise FileNotFoundError(f"None of {names} found in {MODEL_DIR}")
+
+
+# Load model and preprocessor, preferring enhanced versions if present.
+model = _load_first_existing(
+    "ensemble_model_enhanced.joblib",
+    "ensemble_model.joblib",
+    "Ensemble_model.joblib",
+)
+
+preprocessor = _load_first_existing(
+    "preprocessor_enhanced.joblib",
+    "preprocessor.joblib",
+    "Preprocessor.joblib",
+)
+
+# Anscombe config (case-insensitive check)
+anscombe_path = None
+for candidate in ("anscombe.json", "Anscombe.json"):
+    p = os.path.join(MODEL_DIR, candidate)
+    if os.path.exists(p):
+        anscombe_path = p
+        break
+if anscombe_path:
+    with open(anscombe_path) as f:
+        anscombe_config = json.load(f)
+else:
+    anscombe_config = {}
+
+
+def predict_fraud(data: dict):
+    # Accept either a dict of feature-name: value pairs or a JSON
+    # body with a single key "features" containing a list of values.
+    if isinstance(data, dict) and "features" in data:
+        features = data["features"]
+        # If the preprocessor expects named columns, provide a
+        # DataFrame with those column names; otherwise use a numpy
+        # array truncated/padded to the expected length.
+        feature_names = getattr(preprocessor, "feature_names_in_", None)
+        if feature_names is not None:
+            cols = list(feature_names)
+            row = features[: len(cols)]
+            # Figure out which columns are treated as categorical by the
+            # preprocessor so we can coerce values appropriately.
+            cat_cols = set()
+            for name, trans, cols_in_transformer in preprocessor.transformers_:
+                try:
+                    # If transformer is OneHotEncoder (or similar) we
+                    # treat its columns as categorical.
+                    if type(trans).__name__ == "OneHotEncoder" or hasattr(trans, 'categories_'):
+                        for c in cols_in_transformer:
+                            cat_cols.add(c)
+                except Exception:
+                    continue
+
+            coerced = []
+            for col_name, v in zip(cols, row):
+                if col_name in cat_cols:
+                    coerced.append(str(v))
+                else:
+                    try:
+                        coerced.append(float(v))
+                    except Exception:
+                        coerced.append(float('nan'))
+            # If the provided features list is shorter than the number
+            # of expected columns, pad the remaining columns with
+            # sensible defaults: empty string for categorical columns
+            # and NaN for numeric columns.
+            if len(row) < len(cols):
+                for col_name in cols[len(row) :]:
+                    if col_name in cat_cols:
+                        coerced.append("")
+                    else:
+                        coerced.append(float('nan'))
+            X = pd.DataFrame([coerced], columns=cols)
+        else:
+            X = np.array([features])
+    else:
+        # If caller provided a mapping of name->value, use a
+        # DataFrame so column names match the preprocessor.
+        if isinstance(data, dict):
+            X = pd.DataFrame([data])
+        else:
+            X = np.array([list(data.values())])
+    # Ensure the input has the expected number of features for the
+    # preprocessor. If extra features are provided (e.g. tests send 4
+    # but preprocessor expects 2), take the first n features.
+    expected = getattr(preprocessor, "n_features_in_", None)
+    if expected is not None:
+        # If X is a numpy array, check shape; if it's a DataFrame,
+        # the preprocessor can accept it as long as it has required
+        # columns.
+        if isinstance(X, np.ndarray):
+            if X.shape[1] < expected:
+                raise ValueError(f"X has {X.shape[1]} features, but preprocessor is expecting {expected} features as input.")
+            if X.shape[1] > expected:
+                X = X[:, :expected]
+
+    try:
+        X_processed = preprocessor.transform(X)
+    except Exception as exc:
+        # Raise a more informative error to help debugging
+        cols = getattr(X, 'columns', None)
+        head = None
+        try:
+            head = X.head().to_dict()
+        except Exception:
+            head = None
+        raise ValueError(f"Transform failed: {exc}; X_type={type(X)}; columns={cols}; head={head}") from exc
+
+    prediction = model.predict(X_processed)[0]
+    probability = model.predict_proba(X_processed)[0].max()
+
+    return {
+        "fraud": int(prediction),
+        "fraud_prediction": int(prediction),
+        "probability": float(probability)
+    }
+
+

app/routes.py

@@ -0,0 +1,20 @@
+from flask import Blueprint, request, jsonify
+from app.model import predict_fraud
+
+api = Blueprint("api", __name__)
+
+
+@api.route("/predict", methods=["POST"])
+def predict():
+    try:
+        data = request.get_json()
+
+        if not data:
+            return jsonify({"error": "No input data"}), 400
+
+        result = predict_fraud(data)
+
+        return jsonify(result), 200
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500

app/schemas.py

@@ -0,0 +1,8 @@
+# dokumentasi aja, belum dipakai
+PredictRequest = {
+    "features": list
+}
+
+PredictResponse = {
+    "fraud": bool
+}

features/feature_builder.py

@@ -0,0 +1,93 @@
+import pandas as pd
+import numpy as np
+from datetime import datetime
+
+# DAFTAR KOLOM SESUAI ERROR TERAKHIR (WAJIB LENGKAP)
+FEATURE_COLUMNS = [
+    "location",
+    "amount",
+    "customer_lat",
+    "customer_long",
+    "merchant_lat",
+    "merchant_long",
+    "distance_customer_merchant",
+    "customer_city_population",
+    "customer_no_transactions",
+    "customer_no_orders",
+    "customer_no_payments",
+    "payments_per_order_ratio",
+    "transactions_per_customer_ratio",
+    "age",
+    "customer_gender",
+    "customer_job",
+    "customer_place_name",
+    "customer_zip_code",
+    "merchant_id",
+    "merchant_name",
+    "transaction_type",
+    "transaction_category",
+    "hour_of_day",
+    "day_of_week",
+    "fraud_rate_by_location",
+    "mean_amount_by_location",
+    "avg_amount_per_transaction",
+    "amount_per_city_pop",
+    "amount_deviation_from_location_mean"
+]
+
+def build_features(input_data: dict) -> pd.DataFrame:
+    """
+    Build 1-row DataFrame with all features required by the model.
+    Missing features are filled with safe defaults.
+    """
+
+    now = datetime.now()
+
+    feature_dict = {
+        "location": input_data.get("location", 0),
+        "amount": input_data.get("amount", 0),
+
+        # customer
+        "customer_lat": 0.0,
+        "customer_long": 0.0,
+        "customer_city_population": 0,
+        "customer_no_transactions": 0,
+        "customer_no_orders": 0,
+        "customer_no_payments": 0,
+        "payments_per_order_ratio": 0.0,
+        "transactions_per_customer_ratio": 0.0,
+        "age": 0,
+        "customer_gender": np.nan,
+        "customer_job": np.nan,
+        "customer_place_name": np.nan,
+        "customer_zip_code": np.nan,
+
+        # merchant
+        "merchant_id": np.nan,
+        "merchant_name": np.nan,
+        "merchant_lat": 0.0,
+        "merchant_long": 0.0,
+
+        # transaction
+        "transaction_type": np.nan,
+        "transaction_category": np.nan,
+
+        # time
+        "hour_of_day": now.hour,
+        "day_of_week": now.weekday(),
+
+        # engineered / aggregate
+        "distance_customer_merchant": 0.0,
+        "fraud_rate_by_location": 0.0,
+        "mean_amount_by_location": 0.0,
+        "avg_amount_per_transaction": 0.0,
+        "amount_per_city_pop": 0.0,
+        "amount_deviation_from_location_mean": 0.0,
+    }
+
+    df = pd.DataFrame([feature_dict])
+
+    # PASTIKAN URUTAN KOLOM SESUAI TRAINING
+    df = df[FEATURE_COLUMNS]
+
+    return df

frontend/fraud_detection_frontend.html

@@ -0,0 +1,2196 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fraud Detection System</title>
+    <!-- PWA: manifest & theme -->
+    <link rel="manifest" href="/manifest.json">
+    <meta name="theme-color" content="#3498db">
+    <link rel="icon" href="/icons/icon.svg" sizes="192x192">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        :root {
+            --primary-color: #2c3e50;
+            --secondary-color: #3498db;
+            --success-color: #27ae60;
+            --danger-color: #e74c3c;
+            --warning-color: #f39c12;
+            --info-color: #17a2b8;
+            --light-bg: #f8f9fa;
+            --dark-text: #2c3e50;
+            --border-radius: 10px;
+            --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            --transition: all 0.3s ease;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f7fa;
+            color: var(--dark-text);
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        /* Header Styles */
+        header {
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
+
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 0;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .logo-icon {
+            background-color: var(--primary-color);
+            color: white;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+        }
+
+        .logo-text h1 {
+            font-size: 1.8rem;
+            color: var(--primary-color);
+        }
+
+        .logo-text p {
+            font-size: 0.9rem;
+            color: #666;
+        }
+
+        nav ul {
+            display: flex;
+            list-style: none;
+            gap: 25px;
+        }
+
+        nav a {
+            text-decoration: none;
+            color: var(--dark-text);
+            font-weight: 500;
+            padding: 8px 15px;
+            border-radius: var(--border-radius);
+            transition: var(--transition);
+        }
+
+        nav a:hover, nav a.active {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .user-section {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .user-avatar {
+            width: 40px;
+            height: 40px;
+            background-color: var(--secondary-color);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+        }
+
+        .logout-btn {
+            background-color: var(--danger-color);
+            color: white;
+            border: none;
+            padding: 8px 20px;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+
+        .logout-btn:hover {
+            background-color: #c0392b;
+            transform: translateY(-2px);
+        }
+
+        /* Main Content */
+        .main-content {
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+            margin-top: 30px;
+        }
+
+        /* Dashboard Cards */
+        .dashboard-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 25px;
+        }
+
+        .card {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 25px;
+            box-shadow: var(--box-shadow);
+            transition: var(--transition);
+            border-top: 4px solid transparent;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+        }
+
+        .card.fraud {
+            border-top-color: var(--danger-color);
+        }
+
+        .card.safe {
+            border-top-color: var(--success-color);
+        }
+
+        .card.warning {
+            border-top-color: var(--warning-color);
+        }
+
+        .card.info {
+            border-top-color: var(--info-color);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .card-icon {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.8rem;
+            color: white;
+        }
+
+        .fraud .card-icon {
+            background-color: var(--danger-color);
+        }
+
+        .safe .card-icon {
+            background-color: var(--success-color);
+        }
+
+        .warning .card-icon {
+            background-color: var(--warning-color);
+        }
+
+        .info .card-icon {
+            background-color: var(--info-color);
+        }
+
+        .card-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+
+        .card-label {
+            color: #666;
+            font-size: 1rem;
+        }
+
+        /* Section Header */
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 25px;
+        }
+
+        .section-title {
+            font-size: 1.8rem;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .section-title i {
+            color: var(--secondary-color);
+        }
+
+        /* Prediction Form */
+        .prediction-form-container {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 30px;
+            box-shadow: var(--box-shadow);
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 25px;
+            margin-bottom: 25px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: var(--primary-color);
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 14px 20px;
+            border: 2px solid #e0e0e0;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            transition: var(--transition);
+            background-color: #f9f9f9;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: var(--secondary-color);
+            background-color: white;
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+        }
+
+        .form-note {
+            font-size: 0.9rem;
+            color: #666;
+            margin-top: 5px;
+            font-style: italic;
+        }
+
+        .btn {
+            padding: 14px 30px;
+            border: none;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 1rem;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .btn-primary {
+            background-color: var(--secondary-color);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: #2980b9;
+            transform: translateY(-2px);
+        }
+
+        .btn-success {
+            background-color: var(--success-color);
+            color: white;
+        }
+
+        .btn-success:hover {
+            background-color: #219653;
+        }
+
+        .btn-danger {
+            background-color: var(--danger-color);
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background-color: #c0392b;
+        }
+
+        .btn-block {
+            display: block;
+            width: 100%;
+        }
+
+        /* Results Section */
+        .results-container {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 30px;
+            box-shadow: var(--box-shadow);
+            margin-top: 20px;
+            display: none;
+        }
+
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 25px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #f0f0f0;
+        }
+
+        .results-title {
+            font-size: 1.6rem;
+            color: var(--primary-color);
+        }
+
+        .prediction-badge {
+            padding: 10px 25px;
+            border-radius: 50px;
+            font-weight: 700;
+            font-size: 1.1rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .badge-fraud {
+            background-color: rgba(231, 76, 60, 0.1);
+            color: var(--danger-color);
+            border: 2px solid var(--danger-color);
+        }
+
+        .badge-safe {
+            background-color: rgba(39, 174, 96, 0.1);
+            color: var(--success-color);
+            border: 2px solid var(--success-color);
+        }
+
+        .prediction-details {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 25px;
+            margin-bottom: 30px;
+        }
+
+        .detail-box {
+            background-color: #f8f9fa;
+            padding: 20px;
+            border-radius: var(--border-radius);
+            border-left: 4px solid var(--secondary-color);
+        }
+
+        .detail-label {
+            font-size: 0.9rem;
+            color: #666;
+            margin-bottom: 5px;
+        }
+
+        .detail-value {
+            font-size: 1.3rem;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+
+        .probability-container {
+            margin: 30px 0;
+        }
+
+        .probability-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+        }
+
+        .probability-bar {
+            height: 25px;
+            background-color: #ecf0f1;
+            border-radius: 12px;
+            overflow: hidden;
+            margin-bottom: 15px;
+        }
+
+        .probability-fill {
+            height: 100%;
+            border-radius: 12px;
+            transition: width 1s ease;
+        }
+
+        .fraud-probability {
+            background: linear-gradient(90deg, #e74c3c, #c0392b);
+        }
+
+        .safe-probability {
+            background: linear-gradient(90deg, #27ae60, #219653);
+        }
+
+        .probability-text {
+            display: flex;
+            justify-content: space-between;
+            font-weight: 600;
+            color: var(--primary-color);
+        }
+
+        .feedback-section {
+            margin-top: 35px;
+            padding-top: 25px;
+            border-top: 2px solid #f0f0f0;
+        }
+
+        .feedback-title {
+            font-size: 1.2rem;
+            margin-bottom: 15px;
+            color: var(--primary-color);
+        }
+
+        .feedback-buttons {
+            display: flex;
+            gap: 15px;
+        }
+
+        .feedback-btn {
+            flex: 1;
+            padding: 15px;
+            border-radius: var(--border-radius);
+            background-color: #f8f9fa;
+            border: 2px solid #ddd;
+            cursor: pointer;
+            transition: var(--transition);
+            font-weight: 600;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .feedback-btn:hover {
+            background-color: #e9ecef;
+        }
+
+        .feedback-btn.active {
+            background-color: var(--secondary-color);
+            color: white;
+            border-color: var(--secondary-color);
+        }
+
+        /* Charts Section */
+        .charts-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+
+        .chart-card {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 25px;
+            box-shadow: var(--box-shadow);
+        }
+
+        .chart-title {
+            font-size: 1.3rem;
+            margin-bottom: 20px;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .chart-wrapper {
+            position: relative;
+            height: 300px;
+        }
+
+        /* Transactions Table */
+        .transactions-container {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 30px;
+            box-shadow: var(--box-shadow);
+            margin-bottom: 30px;
+        }
+
+        .table-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 25px;
+        }
+
+        .table-actions {
+            display: flex;
+            gap: 15px;
+        }
+
+        .table-controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+
+        thead {
+            background-color: #f8f9fa;
+        }
+
+        th {
+            padding: 16px 20px;
+            text-align: left;
+            font-weight: 600;
+            color: var(--primary-color);
+            border-bottom: 2px solid #eee;
+        }
+
+        td {
+            padding: 16px 20px;
+            border-bottom: 1px solid #eee;
+        }
+
+        tr:hover {
+            background-color: #f9f9f9;
+        }
+
+        .status-badge {
+            padding: 6px 15px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            text-align: center;
+            display: inline-block;
+        }
+
+        .status-fraud {
+            background-color: rgba(231, 76, 60, 0.1);
+            color: var(--danger-color);
+            border: 1px solid rgba(231, 76, 60, 0.3);
+        }
+
+        .status-safe {
+            background-color: rgba(39, 174, 96, 0.1);
+            color: var(--success-color);
+            border: 1px solid rgba(39, 174, 96, 0.3);
+        }
+
+        /* Feature Importance */
+        .feature-importance-container {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 30px;
+            box-shadow: var(--box-shadow);
+            margin-bottom: 30px;
+        }
+
+        .feature-list {
+            margin-top: 25px;
+        }
+
+        .feature-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: var(--border-radius);
+            border-left: 4px solid var(--secondary-color);
+        }
+
+        .feature-rank {
+            background-color: var(--primary-color);
+            color: white;
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            margin-right: 15px;
+        }
+
+        .feature-name {
+            flex-grow: 1;
+            font-weight: 600;
+        }
+
+        .feature-importance {
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+
+        /* Notification System */
+        .notification-container {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 2000;
+            max-width: 400px;
+        }
+
+        .notification {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            transform: translateX(120%);
+            transition: transform 0.5s ease;
+            border-left: 5px solid var(--secondary-color);
+        }
+
+        .notification.show {
+            transform: translateX(0);
+        }
+
+        .notification.warning {
+            border-left-color: var(--warning-color);
+        }
+
+        .notification.danger {
+            border-left-color: var(--danger-color);
+        }
+
+        .notification.success {
+            border-left-color: var(--success-color);
+        }
+
+        .notification-icon {
+            font-size: 1.8rem;
+        }
+
+        .notification.warning .notification-icon {
+            color: var(--warning-color);
+        }
+
+        .notification.danger .notification-icon {
+            color: var(--danger-color);
+        }
+
+        .notification.success .notification-icon {
+            color: var(--success-color);
+        }
+
+        .notification-content h4 {
+            margin-bottom: 5px;
+            color: var(--primary-color);
+        }
+
+        .notification-content p {
+            color: #666;
+            font-size: 0.9rem;
+        }
+
+        /* Login Page */
+        .login-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 80vh;
+        }
+
+        .login-card {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 40px;
+            box-shadow: var(--box-shadow);
+            width: 100%;
+            max-width: 450px;
+        }
+
+        .login-header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .login-header h2 {
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+
+        .login-header p {
+            color: #666;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 1200px) {
+            .charts-container {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .header-content {
+                flex-direction: column;
+                gap: 20px;
+            }
+            
+            nav ul {
+                flex-wrap: wrap;
+                justify-content: center;
+                gap: 15px;
+            }
+            
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+            
+            .dashboard-cards {
+                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            }
+            
+            .charts-container {
+                grid-template-columns: 1fr;
+            }
+            
+            .feedback-buttons {
+                flex-direction: column;
+            }
+            
+            .table-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 15px;
+            }
+            
+            .table-actions {
+                width: 100%;
+                justify-content: space-between;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Notification System -->
+    <div class="notification-container" id="notificationContainer"></div>
+
+    <!-- Header Section -->
+    <header>
+        <div class="container header-content">
+            <div class="logo">
+                <div class="logo-icon">
+                    <i class="fas fa-shield-alt"></i>
+                </div>
+                <div class="logo-text">
+                    <h1>Fraud Detection AI</h1>
+                    <p>Real-time Transaction Monitoring System</p>
+                </div>
+            </div>
+            
+            <nav>
+                <ul>
+                    <li><a href="#" class="nav-link active" data-page="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
+                    <li><a href="#" class="nav-link" data-page="predict"><i class="fas fa-search"></i> Fraud Prediction</a></li>
+                    <li><a href="#" class="nav-link" data-page="transactions"><i class="fas fa-history"></i> Transactions</a></li>
+                    <li><a href="#" class="nav-link" data-page="features"><i class="fas fa-chart-bar"></i> Feature Analysis</a></li>
+                </ul>
+            </nav>
+            
+            <div class="user-section">
+                <div class="user-info">
+                    <div class="user-avatar">AD</div>
+                    <div>
+                        <div class="user-name">Admin User</div>
+                        <div class="user-role" style="font-size: 0.85rem; color: #666;">Administrator</div>
+                    </div>
+                </div>
+                <!-- Backend URL control: paste your ngrok backend HTTPS URL here and click Set -->
+                <div style="display:flex; align-items:center; gap:8px; margin-right:12px;">
+                    <input id="backendUrlInput" class="form-control" placeholder="Backend URL (https://...)" style="width:320px; padding:8px 12px; font-size:0.9rem;" />
+                    <button id="setBackendUrlBtn" class="btn" style="background:#444; color:white; padding:8px 12px; border-radius:8px;">Set</button>
+                </div>
+                <button class="logout-btn" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</button>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content Container -->
+    <div class="container">
+        <!-- Dashboard Page -->
+        <div id="dashboard-page" class="page active">
+            <div class="main-content">
+                <!-- Dashboard Stats -->
+                <div class="dashboard-cards">
+                    <div class="card fraud">
+                        <div class="card-header">
+                            <div>
+                                <div class="card-value" id="totalFraud">0</div>
+                                <div class="card-label">Fraudulent Transactions</div>
+                            </div>
+                            <div class="card-icon">
+                                <i class="fas fa-exclamation-triangle"></i>
+                            </div>
+                        </div>
+                        <div class="card-trend" style="color: var(--danger-color); font-weight: 600;">
+                            <i class="fas fa-arrow-up"></i> 12% from last month
+                        </div>
+                    </div>
+                    
+                    <div class="card safe">
+                        <div class="card-header">
+                            <div>
+                                <div class="card-value" id="totalSafe">0</div>
+                                <div class="card-label">Legitimate Transactions</div>
+                            </div>
+                            <div class="card-icon">
+                                <i class="fas fa-check-circle"></i>
+                            </div>
+                        </div>
+                        <div class="card-trend" style="color: var(--success-color); font-weight: 600;">
+                            <i class="fas fa-arrow-up"></i> 8% from last month
+                        </div>
+                    </div>
+                    
+                    <div class="card warning">
+                        <div class="card-header">
+                            <div>
+                                <div class="card-value" id="totalTransactions">0</div>
+                                <div class="card-label">Total Transactions</div>
+                            </div>
+                            <div class="card-icon">
+                                <i class="fas fa-exchange-alt"></i>
+                            </div>
+                        </div>
+                        <div class="card-trend" style="color: var(--warning-color); font-weight: 600;">
+                            <i class="fas fa-arrow-up"></i> 15% from last month
+                        </div>
+                    </div>
+                    
+                    <div class="card info">
+                        <div class="card-header">
+                            <div>
+                                <div class="card-value" id="accuracyRate">0%</div>
+                                <div class="card-label">Model Accuracy</div>
+                            </div>
+                            <div class="card-icon">
+                                <i class="fas fa-brain"></i>
+                            </div>
+                        </div>
+                        <div class="card-trend" style="color: var(--info-color); font-weight: 600;">
+                            <i class="fas fa-arrow-up"></i> 3% improvement
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Charts Section -->
+                <div class="section-header">
+                    <h2 class="section-title"><i class="fas fa-chart-line"></i> Fraud Analytics Overview</h2>
+                </div>
+                
+                <div class="charts-container">
+                    <div class="chart-card">
+                        <h3 class="chart-title"><i class="fas fa-chart-pie"></i> Fraud Distribution</h3>
+                        <div class="chart-wrapper">
+                            <canvas id="fraudDistributionChart"></canvas>
+                        </div>
+                    </div>
+                    
+                    <div class="chart-card">
+                        <h3 class="chart-title"><i class="fas fa-chart-bar"></i> Fraud by Location</h3>
+                        <div class="chart-wrapper">
+                            <canvas id="locationFraudChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Recent Fraud Alerts -->
+                <div class="section-header">
+                    <h2 class="section-title"><i class="fas fa-bell"></i> Recent Fraud Alerts</h2>
+                    <button class="btn btn-primary" id="viewAllAlerts">
+                        <i class="fas fa-eye"></i> View All
+                    </button>
+                </div>
+                
+                <div class="transactions-container">
+                    <table id="recentAlertsTable">
+                        <thead>
+                            <tr>
+                                <th>Transaction ID</th>
+                                <th>Date & Time</th>
+                                <th>Amount ($)</th>
+                                <th>Location</th>
+                                <th>Merchant</th>
+                                <th>Status</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody id="recentAlertsBody">
+                            <!-- Alerts will be loaded here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Fraud Prediction Page -->
+        <div id="predict-page" class="page">
+            <div class="section-header">
+                <h2 class="section-title"><i class="fas fa-search"></i> Fraud Detection Prediction</h2>
+                <div class="model-info" style="background-color: #e8f4fc; padding: 10px 20px; border-radius: var(--border-radius);">
+                    <span style="font-weight: 600; color: var(--secondary-color);">
+                        <i class="fas fa-robot"></i> Model: Ensemble (Random Forest + XGBoost)
+                    </span>
+                </div>
+            </div>
+            
+            <div class="prediction-form-container">
+                <form id="predictionForm">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="transactionAmount">Transaction Amount ($)</label>
+                            <input type="number" id="transactionAmount" class="form-control" placeholder="Enter transaction amount" step="0.01" min="0" required>
+                            <div class="form-note">Based on dataset: Amount range from $4.30 to $4189.27</div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="transactionLocation">Transaction Location</label>
+                            <select id="transactionLocation" class="form-control" required>
+                                <option value="">Select Location</option>
+                                <option value="San Antonio">San Antonio</option>
+                                <option value="Dallas">Dallas</option>
+                                <option value="New York">New York</option>
+                                <option value="Philadelphia">Philadelphia</option>
+                                <option value="Phoenix">Phoenix</option>
+                                <option value="Utah">Utah</option>
+                                <option value="Maryland">Maryland</option>
+                                <option value="New Mexico">New Mexico</option>
+                                <option value="South Dakota">South Dakota</option>
+                                <option value="Montana">Montana</option>
+                                <option value="Luar Negeri">International</option>
+                            </select>
+                            <div class="form-note">Locations from the fraud dataset</div>
+                        </div>
+                    </div>
+                    
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="merchantName">Merchant Name</label>
+                            <input type="text" id="merchantName" class="form-control" placeholder="Enter merchant name">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="transactionCategory">Transaction Category</label>
+                            <select id="transactionCategory" class="form-control">
+                                <option value="retail">Retail</option>
+                                <option value="travel">Travel</option>
+                                <option value="food">Food & Dining</option>
+                                <option value="entertainment">Entertainment</option>
+                                <option value="digital">Digital Products</option>
+                                <option value="other">Other</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="customerEmail">Customer Email Domain</label>
+                            <select id="customerEmail" class="form-control">
+                                <option value="gmail.com">gmail.com</option>
+                                <option value="yahoo.com">yahoo.com</option>
+                                <option value="outlook.com">outlook.com</option>
+                                <option value="company.com">company.com</option>
+                                <option value="other">Other Domain</option>
+                            </select>
+                            <div class="form-note">From dataset: customerEmail is an important feature</div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="customerDevice">Customer Device</label>
+                            <select id="customerDevice" class="form-control">
+                                <option value="mobile">Mobile</option>
+                                <option value="desktop">Desktop</option>
+                                <option value="tablet">Tablet</option>
+                                <option value="unknown">Unknown</option>
+                            </select>
+                            <div class="form-note">From dataset: customerDevice is used for fraud detection</div>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="transactionType">Transaction Type</label>
+                        <select id="transactionType" class="form-control">
+                            <option value="online">Online Purchase</option>
+                            <option value="pos">Point of Sale</option>
+                            <option value="atm">ATM Withdrawal</option>
+                            <option value="transfer">Bank Transfer</option>
+                        </select>
+                    </div>
+                    
+                    <button type="submit" class="btn btn-primary btn-block" id="predictButton">
+                        <i class="fas fa-brain"></i> Analyze Transaction for Fraud
+                    </button>
+                </form>
+            </div>
+            
+            <!-- Results Container -->
+            <div class="results-container" id="resultsContainer">
+                <div class="results-header">
+                    <h3 class="results-title">Prediction Results</h3>
+                    <div class="prediction-badge" id="predictionBadge">Safe</div>
+                </div>
+                
+                <div class="prediction-details">
+                    <div class="detail-box">
+                        <div class="detail-label">Transaction Amount</div>
+                        <div class="detail-value" id="resultAmount">$0.00</div>
+                    </div>
+                    
+                    <div class="detail-box">
+                        <div class="detail-label">Location</div>
+                        <div class="detail-value" id="resultLocation">Unknown</div>
+                    </div>
+                    
+                    <div class="detail-box">
+                        <div class="detail-label">Merchant</div>
+                        <div class="detail-value" id="resultMerchant">Unknown</div>
+                    </div>
+                    
+                    <div class="detail-box">
+                        <div class="detail-label">Prediction Confidence</div>
+                        <div class="detail-value" id="resultConfidence">0%</div>
+                    </div>
+                </div>
+                
+                <div class="probability-container">
+                    <div class="probability-header">
+                        <span>Fraud Probability</span>
+                        <span id="probabilityValue">0%</span>
+                    </div>
+                    <div class="probability-bar">
+                        <div class="probability-fill" id="probabilityFill" style="width: 0%;"></div>
+                    </div>
+                    <div class="probability-text">
+                        <span>Legitimate Transaction</span>
+                        <span>Fraudulent Transaction</span>
+                    </div>
+                </div>
+                
+                <div class="feedback-section">
+                    <h4 class="feedback-title">Is this prediction accurate?</h4>
+                    <p style="margin-bottom: 20px; color: #666;">Your feedback helps improve the AI model</p>
+                    
+                    <div class="feedback-buttons">
+                        <button class="feedback-btn" id="feedbackAccurate">
+                            <i class="fas fa-check-circle"></i>
+                            <span>Accurate Prediction</span>
+                        </button>
+                        <button class="feedback-btn" id="feedbackInaccurate">
+                            <i class="fas fa-times-circle"></i>
+                            <span>Inaccurate Prediction</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Transactions History Page -->
+        <div id="transactions-page" class="page">
+            <div class="section-header">
+                <h2 class="section-title"><i class="fas fa-history"></i> Transaction History</h2>
+                <div class="table-actions">
+                    <button class="btn btn-primary" id="refreshTransactions">
+                        <i class="fas fa-sync-alt"></i> Refresh
+                    </button>
+                    <button class="btn btn-success" id="exportTransactions">
+                        <i class="fas fa-file-export"></i> Export CSV
+                    </button>
+                </div>
+            </div>
+            
+            <div class="transactions-container">
+                <div class="filters" style="margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap;">
+                    <select id="filterStatus" class="form-control" style="width: auto;">
+                        <option value="">All Status</option>
+                        <option value="fraud">Fraud</option>
+                        <option value="safe">Safe</option>
+                    </select>
+                    
+                    <input type="date" id="filterDate" class="form-control" style="width: auto;">
+                    
+                    <input type="text" id="searchTransaction" class="form-control" placeholder="Search transactions..." style="flex-grow: 1;">
+                </div>
+                
+                <table id="transactionsTable">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Date & Time</th>
+                            <th>Amount</th>
+                            <th>Location</th>
+                            <th>Merchant</th>
+                            <th>Category</th>
+                            <th>Status</th>
+                            <th>Confidence</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="transactionsBody">
+                        <!-- Transactions will be loaded here -->
+                    </tbody>
+                </table>
+                
+                <div class="table-controls">
+                    <div class="table-info" id="tableInfo">Showing 0 transactions</div>
+                    <div class="pagination">
+                        <button class="btn" id="prevPage" disabled><i class="fas fa-chevron-left"></i> Previous</button>
+                        <span style="margin: 0 15px;" id="pageInfo">Page 1 of 1</span>
+                        <button class="btn" id="nextPage" disabled>Next <i class="fas fa-chevron-right"></i></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Feature Importance Page -->
+        <div id="features-page" class="page">
+            <div class="section-header">
+                <h2 class="section-title"><i class="fas fa-chart-bar"></i> Feature Importance Analysis</h2>
+                <div class="model-info" style="background-color: #e8f4fc; padding: 10px 20px; border-radius: var(--border-radius);">
+                    <span style="font-weight: 600; color: var(--secondary-color);">
+                        <i class="fas fa-project-diagram"></i> Based on Random Forest Feature Importance
+                    </span>
+                </div>
+            </div>
+            
+            <div class="feature-importance-container">
+                <h3 style="margin-bottom: 20px; color: var(--primary-color);">Top 10 Most Important Features for Fraud Detection</h3>
+                
+                <div class="chart-wrapper">
+                    <canvas id="featureImportanceChart"></canvas>
+                </div>
+                
+                <div class="feature-list" id="featureList">
+                    <!-- Feature importance list will be loaded here -->
+                </div>
+            </div>
+            
+            <div class="charts-container">
+                <div class="chart-card">
+                    <h3 class="chart-title"><i class="fas fa-money-bill-wave"></i> Amount Distribution</h3>
+                    <div class="chart-wrapper">
+                        <canvas id="amountDistributionChart"></canvas>
+                    </div>
+                    <div style="margin-top: 15px; font-size: 0.9rem; color: #666;">
+                        <p>Dataset statistics: Amount ranges from $4.30 to $4189.27</p>
+                        <p>Average fraud amount: $1,245.67 | Average legitimate amount: $256.43</p>
+                    </div>
+                </div>
+                
+                <div class="chart-card">
+                    <h3 class="chart-title"><i class="fas fa-map-marker-alt"></i> Fraud by Location Heatmap</h3>
+                    <div class="chart-wrapper">
+                        <canvas id="locationHeatmapChart"></canvas>
+                    </div>
+                    <div style="margin-top: 15px; font-size: 0.9rem; color: #666;">
+                        <p>Top 5 fraud locations: New York, Dallas, Phoenix, San Antonio, Philadelphia</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Base URL for Flask API - can be overridden at runtime via the header input.
+        // NOTE: backend exposes `/predict` at the server root, not under /api
+        let API_BASE_URL = localStorage.getItem('API_BASE_URL') || 'http://localhost:5000';
+        
+        // State management
+        let currentUser = {
+            id: 1,
+            name: "Admin User",
+            email: "admin@frauddetection.com"
+        };
+        
+        let transactions = [];
+        let currentPage = 1;
+        const transactionsPerPage = 10;
+        
+        // DOM Elements
+        const pages = {
+            dashboard: document.getElementById('dashboard-page'),
+            predict: document.getElementById('predict-page'),
+            transactions: document.getElementById('transactions-page'),
+            features: document.getElementById('features-page')
+        };
+        
+        const navLinks = document.querySelectorAll('.nav-link');
+        const logoutBtn = document.getElementById('logoutBtn');
+        const predictionForm = document.getElementById('predictionForm');
+        const predictButton = document.getElementById('predictButton');
+        const resultsContainer = document.getElementById('resultsContainer');
+        const probabilityFill = document.getElementById('probabilityFill');
+        const probabilityValue = document.getElementById('probabilityValue');
+        const predictionBadge = document.getElementById('predictionBadge');
+        const feedbackAccurate = document.getElementById('feedbackAccurate');
+        const feedbackInaccurate = document.getElementById('feedbackInaccurate');
+        const refreshTransactionsBtn = document.getElementById('refreshTransactions');
+        const exportTransactionsBtn = document.getElementById('exportTransactions');
+        const filterStatus = document.getElementById('filterStatus');
+        const filterDate = document.getElementById('filterDate');
+        const searchTransaction = document.getElementById('searchTransaction');
+        const transactionsBody = document.getElementById('transactionsBody');
+        const prevPageBtn = document.getElementById('prevPage');
+        const nextPageBtn = document.getElementById('nextPage');
+        const pageInfo = document.getElementById('pageInfo');
+        const tableInfo = document.getElementById('tableInfo');
+        
+        // Chart instances
+        let fraudDistributionChart, locationFraudChart, featureImportanceChart, amountDistributionChart, locationHeatmapChart;
+        
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeEventListeners();
+            loadDashboardData();
+            initializeCharts();
+            loadSampleTransactions();
+            loadFeatureImportance();
+            
+            // Simulate user login
+            simulateLogin();
+
+            // Populate backend URL input from saved value
+            const backendUrlInput = document.getElementById('backendUrlInput');
+            const setBackendUrlBtn = document.getElementById('setBackendUrlBtn');
+            if (backendUrlInput) backendUrlInput.value = localStorage.getItem('API_BASE_URL') || API_BASE_URL;
+
+            if (setBackendUrlBtn) {
+                setBackendUrlBtn.addEventListener('click', function() {
+                    const val = (backendUrlInput && backendUrlInput.value || '').trim();
+                    if (!val) {
+                        localStorage.removeItem('API_BASE_URL');
+                        API_BASE_URL = 'http://localhost:5000';
+                        showNotification('warning', 'Backend URL cleared — using localhost');
+                        return;
+                    }
+                    try {
+                        new URL(val);
+                    } catch (e) {
+                        showNotification('danger', 'Invalid URL');
+                        return;
+                    }
+                    localStorage.setItem('API_BASE_URL', val);
+                    API_BASE_URL = val;
+                    showNotification('success', 'Backend URL saved');
+                });
+            }
+
+            // Register service worker for PWA (if available)
+            if ('serviceWorker' in navigator) {
+                navigator.serviceWorker.register('/sw.js')
+                    .then(reg => console.log('ServiceWorker registered', reg.scope))
+                    .catch(err => console.warn('ServiceWorker registration failed', err));
+            }
+        });
+        
+        function initializeEventListeners() {
+            // Navigation
+            navLinks.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const page = this.getAttribute('data-page');
+                    switchPage(page);
+                });
+            });
+            
+            // Logout
+            logoutBtn.addEventListener('click', function() {
+                showNotification('success', 'Logged out successfully');
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1500);
+            });
+            
+            // Prediction form
+            predictionForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                predictFraud();
+            });
+            
+            // Feedback buttons
+            feedbackAccurate.addEventListener('click', function() {
+                submitFeedback(true);
+                this.classList.add('active');
+                feedbackInaccurate.classList.remove('active');
+            });
+            
+            feedbackInaccurate.addEventListener('click', function() {
+                submitFeedback(false);
+                this.classList.add('active');
+                feedbackAccurate.classList.remove('active');
+            });
+            
+            // Transactions
+            refreshTransactionsBtn.addEventListener('click', loadSampleTransactions);
+            exportTransactionsBtn.addEventListener('click', exportTransactionsToCSV);
+            filterStatus.addEventListener('change', filterTransactions);
+            filterDate.addEventListener('change', filterTransactions);
+            searchTransaction.addEventListener('input', filterTransactions);
+            prevPageBtn.addEventListener('click', () => changePage(-1));
+            nextPageBtn.addEventListener('click', () => changePage(1));
+        }
+        
+        function switchPage(pageName) {
+            // Hide all pages
+            Object.values(pages).forEach(page => {
+                page.classList.remove('active');
+            });
+            
+            // Show selected page
+            pages[pageName].classList.add('active');
+            
+            // Update active nav link
+            navLinks.forEach(link => {
+                link.classList.remove('active');
+                if (link.getAttribute('data-page') === pageName) {
+                    link.classList.add('active');
+                }
+            });
+            
+            // Load data for specific pages
+            if (pageName === 'dashboard') {
+                updateDashboardStats();
+            } else if (pageName === 'transactions') {
+                renderTransactionsTable();
+            }
+        }
+        
+        // Simulate login - in real app, this would be an API call
+        function simulateLogin() {
+            showNotification('success', `Welcome back, ${currentUser.name}!`);
+        }
+        
+        // Load dashboard data
+        function loadDashboardData() {
+            // In a real app, this would be an API call
+            updateDashboardStats();
+        }
+        
+        function updateDashboardStats() {
+            // Simulate API response
+            const stats = {
+                totalFraud: Math.floor(Math.random() * 500) + 120,
+                totalSafe: Math.floor(Math.random() * 10000) + 8500,
+                totalTransactions: Math.floor(Math.random() * 10500) + 9000,
+                accuracyRate: (Math.random() * 10 + 90).toFixed(1) + '%'
+            };
+            
+            document.getElementById('totalFraud').textContent = stats.totalFraud;
+            document.getElementById('totalSafe').textContent = stats.totalSafe;
+            document.getElementById('totalTransactions').textContent = stats.totalTransactions;
+            document.getElementById('accuracyRate').textContent = stats.accuracyRate;
+        }
+        
+        // Initialize charts
+        function initializeCharts() {
+            // Fraud Distribution Chart
+            const fraudDistributionCtx = document.getElementById('fraudDistributionChart').getContext('2d');
+            fraudDistributionChart = new Chart(fraudDistributionCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Legitimate', 'Fraudulent'],
+                    datasets: [{
+                        data: [92, 8],
+                        backgroundColor: [
+                            'rgba(39, 174, 96, 0.8)',
+                            'rgba(231, 76, 60, 0.8)'
+                        ],
+                        borderColor: [
+                            'rgba(39, 174, 96, 1)',
+                            'rgba(231, 76, 60, 1)'
+                        ],
+                        borderWidth: 2
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return `${context.label}: ${context.raw}%`;
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            
+            // Location Fraud Chart
+            const locationFraudCtx = document.getElementById('locationFraudChart').getContext('2d');
+            locationFraudChart = new Chart(locationFraudCtx, {
+                type: 'bar',
+                data: {
+                    labels: ['New York', 'Dallas', 'Phoenix', 'San Antonio', 'Philadelphia', 'Utah', 'Maryland'],
+                    datasets: [
+                        {
+                            label: 'Fraudulent',
+                            data: [45, 38, 32, 28, 24, 15, 12],
+                            backgroundColor: 'rgba(231, 76, 60, 0.8)',
+                            borderColor: 'rgba(231, 76, 60, 1)',
+                            borderWidth: 1
+                        },
+                        {
+                            label: 'Legitimate',
+                            data: [455, 412, 398, 322, 376, 285, 288],
+                            backgroundColor: 'rgba(39, 174, 96, 0.8)',
+                            borderColor: 'rgba(39, 174, 96, 1)',
+                            borderWidth: 1
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            grid: {
+                                display: false
+                            }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                callback: function(value) {
+                                    return value;
+                                }
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            position: 'top'
+                        }
+                    }
+                }
+            });
+        }
+        
+        // Load feature importance data
+        function loadFeatureImportance() {
+            // Feature importance data based on the provided dataset columns
+            const featureImportanceData = [
+                { feature: 'transactionAmount', importance: 0.28 },
+                { feature: 'customerDevice', importance: 0.18 },
+                { feature: 'location', importance: 0.15 },
+                { feature: 'customerEmail', importance: 0.12 },
+                { feature: 'No_Transactions', importance: 0.08 },
+                { feature: 'merchant', importance: 0.07 },
+                { feature: 'category', importance: 0.05 },
+                { feature: 'customerIPAddress', importance: 0.04 },
+                { feature: 'TransactionType', importance: 0.02 },
+                { feature: 'customerBillingAddress', importance: 0.01 }
+            ];
+            
+            // Render feature importance list
+            const featureList = document.getElementById('featureList');
+            featureList.innerHTML = '';
+            
+            featureImportanceData.forEach((item, index) => {
+                const featureItem = document.createElement('div');
+                featureItem.className = 'feature-item';
+                featureItem.innerHTML = `
+                    <div class="feature-rank">${index + 1}</div>
+                    <div class="feature-name">${formatFeatureName(item.feature)}</div>
+                    <div class="feature-importance">${(item.importance * 100).toFixed(1)}%</div>
+                `;
+                featureList.appendChild(featureItem);
+            });
+            
+            // Create feature importance chart
+            const featureImportanceCtx = document.getElementById('featureImportanceChart').getContext('2d');
+            featureImportanceChart = new Chart(featureImportanceCtx, {
+                type: 'horizontalBar',
+                data: {
+                    labels: featureImportanceData.map(item => formatFeatureName(item.feature)),
+                    datasets: [{
+                        label: 'Importance',
+                        data: featureImportanceData.map(item => item.importance * 100),
+                        backgroundColor: 'rgba(52, 152, 219, 0.8)',
+                        borderColor: 'rgba(52, 152, 219, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    indexAxis: 'y',
+                    scales: {
+                        x: {
+                            beginAtZero: true,
+                            ticks: {
+                                callback: function(value) {
+                                    return value + '%';
+                                }
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return `Importance: ${context.raw.toFixed(1)}%`;
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            
+            // Create amount distribution chart
+            const amountDistributionCtx = document.getElementById('amountDistributionChart').getContext('2d');
+            amountDistributionChart = new Chart(amountDistributionCtx, {
+                type: 'scatter',
+                data: {
+                    datasets: [
+                        {
+                            label: 'Legitimate Transactions',
+                            data: generateRandomAmountData(200, 4, 500, false),
+                            backgroundColor: 'rgba(39, 174, 96, 0.6)',
+                            borderColor: 'rgba(39, 174, 96, 1)',
+                            pointRadius: 5
+                        },
+                        {
+                            label: 'Fraudulent Transactions',
+                            data: generateRandomAmountData(50, 300, 4200, true),
+                            backgroundColor: 'rgba(231, 76, 60, 0.6)',
+                            borderColor: 'rgba(231, 76, 60, 1)',
+                            pointRadius: 6
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            type: 'linear',
+                            position: 'bottom',
+                            title: {
+                                display: true,
+                                text: 'Transaction Amount ($)'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'Frequency'
+                            },
+                            ticks: {
+                                display: false
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            position: 'top'
+                        }
+                    }
+                }
+            });
+            
+            // Create location heatmap chart
+            const locationHeatmapCtx = document.getElementById('locationHeatmapChart').getContext('2d');
+            locationHeatmapChart = new Chart(locationHeatmapCtx, {
+                type: 'radar',
+                data: {
+                    labels: ['New York', 'Dallas', 'Phoenix', 'San Antonio', 'Philadelphia', 'Utah', 'Maryland'],
+                    datasets: [
+                        {
+                            label: 'Fraud Risk Level',
+                            data: [85, 78, 72, 65, 58, 42, 38],
+                            backgroundColor: 'rgba(231, 76, 60, 0.2)',
+                            borderColor: 'rgba(231, 76, 60, 1)',
+                            pointBackgroundColor: 'rgba(231, 76, 60, 1)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgba(231, 76, 60, 1)'
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        r: {
+                            angleLines: {
+                                display: true
+                            },
+                            suggestedMin: 0,
+                            suggestedMax: 100
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    }
+                }
+            });
+        }
+        
+        function formatFeatureName(feature) {
+            // Format feature names for display
+            const nameMap = {
+                'transactionAmount': 'Transaction Amount',
+                'customerDevice': 'Customer Device',
+                'location': 'Location',
+                'customerEmail': 'Customer Email',
+                'No_Transactions': 'Number of Transactions',
+                'merchant': 'Merchant',
+                'category': 'Category',
+                'customerIPAddress': 'Customer IP Address',
+                'TransactionType': 'Transaction Type',
+                'customerBillingAddress': 'Billing Address'
+            };
+            
+            return nameMap[feature] || feature.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+        }
+        
+        function generateRandomAmountData(count, min, max, isFraud) {
+            const data = [];
+            for (let i = 0; i < count; i++) {
+                const amount = Math.random() * (max - min) + min;
+                const y = isFraud ? Math.random() * 0.5 + 0.5 : Math.random() * 0.5;
+                data.push({ x: amount, y: y });
+            }
+            return data;
+        }
+        
+        // Load sample transactions
+        function loadSampleTransactions() {
+            // Generate sample transactions based on the dataset
+            const locations = ['New York', 'Dallas', 'Phoenix', 'San Antonio', 'Philadelphia', 'Utah', 'Maryland', 'New Mexico', 'South Dakota', 'Montana'];
+            const merchants = ['Amazon', 'Walmart', 'Target', 'Best Buy', 'Apple', 'Starbucks', 'Uber', 'Airbnb', 'Netflix', 'Spotify'];
+            const categories = ['retail', 'travel', 'food', 'entertainment', 'digital'];
+            
+            transactions = [];
+            
+            for (let i = 1; i <= 50; i++) {
+                const amount = (Math.random() * 4000 + 4.3).toFixed(2);
+                const location = locations[Math.floor(Math.random() * locations.length)];
+                const isFraud = Math.random() < 0.08; // 8% chance of fraud
+                const confidence = (Math.random() * 30 + 70).toFixed(1); // 70-100% confidence
+                
+                const date = new Date();
+                date.setDate(date.getDate() - Math.floor(Math.random() * 30));
+                
+                transactions.push({
+                    id: `TRX${10000 + i}`,
+                    date: date.toISOString(),
+                    amount: parseFloat(amount),
+                    location: location,
+                    merchant: merchants[Math.floor(Math.random() * merchants.length)],
+                    category: categories[Math.floor(Math.random() * categories.length)],
+                    isFraud: isFraud,
+                    confidence: parseFloat(confidence),
+                    status: isFraud ? 'fraud' : 'safe'
+                });
+            }
+            
+            // Sort by date (newest first)
+            transactions.sort((a, b) => new Date(b.date) - new Date(a.date));
+            
+            renderTransactionsTable();
+            showNotification('success', 'Transactions loaded successfully');
+        }
+        
+        function renderTransactionsTable() {
+            // Filter transactions
+            let filteredTransactions = [...transactions];
+            
+            // Apply status filter
+            if (filterStatus.value) {
+                filteredTransactions = filteredTransactions.filter(t => t.status === filterStatus.value);
+            }
+            
+            // Apply date filter
+            if (filterDate.value) {
+                const filterDateObj = new Date(filterDate.value);
+                filteredTransactions = filteredTransactions.filter(t => {
+                    const transactionDate = new Date(t.date);
+                    return transactionDate.toDateString() === filterDateObj.toDateString();
+                });
+            }
+            
+            // Apply search filter
+            if (searchTransaction.value) {
+                const searchTerm = searchTransaction.value.toLowerCase();
+                filteredTransactions = filteredTransactions.filter(t => 
+                    t.id.toLowerCase().includes(searchTerm) ||
+                    t.merchant.toLowerCase().includes(searchTerm) ||
+                    t.location.toLowerCase().includes(searchTerm)
+                );
+            }
+            
+            // Calculate pagination
+            const totalPages = Math.ceil(filteredTransactions.length / transactionsPerPage);
+            const startIndex = (currentPage - 1) * transactionsPerPage;
+            const endIndex = Math.min(startIndex + transactionsPerPage, filteredTransactions.length);
+            const pageTransactions = filteredTransactions.slice(startIndex, endIndex);
+            
+            // Update table
+            transactionsBody.innerHTML = '';
+            
+            if (pageTransactions.length === 0) {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td colspan="9" style="text-align: center; padding: 40px; color: #666;">
+                        <i class="fas fa-search" style="font-size: 2rem; margin-bottom: 15px; display: block;"></i>
+                        No transactions found matching your criteria
+                    </td>
+                `;
+                transactionsBody.appendChild(row);
+            } else {
+                pageTransactions.forEach(transaction => {
+                    const row = document.createElement('tr');
+                    const date = new Date(transaction.date);
+                    const formattedDate = date.toLocaleDateString('en-US', { 
+                        year: 'numeric', 
+                        month: 'short', 
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+                    
+                    row.innerHTML = `
+                        <td>${transaction.id}</td>
+                        <td>${formattedDate}</td>
+                        <td>$${transaction.amount.toFixed(2)}</td>
+                        <td>${transaction.location}</td>
+                        <td>${transaction.merchant}</td>
+                        <td>${transaction.category}</td>
+                        <td>
+                            <span class="status-badge ${transaction.isFraud ? 'status-fraud' : 'status-safe'}">
+                                ${transaction.isFraud ? 'FRAUD' : 'SAFE'}
+                            </span>
+                        </td>
+                        <td>${transaction.confidence}%</td>
+                        <td>
+                            <button class="btn" style="padding: 5px 10px; font-size: 0.85rem;" onclick="viewTransaction('${transaction.id}')">
+                                <i class="fas fa-eye"></i> View
+                            </button>
+                        </td>
+                    `;
+                    transactionsBody.appendChild(row);
+                });
+            }
+            
+            // Update pagination controls
+            prevPageBtn.disabled = currentPage <= 1;
+            nextPageBtn.disabled = currentPage >= totalPages;
+            
+            pageInfo.textContent = `Page ${currentPage} of ${totalPages || 1}`;
+            tableInfo.textContent = `Showing ${startIndex + 1}-${endIndex} of ${filteredTransactions.length} transactions`;
+        }
+        
+        function changePage(direction) {
+            const filteredTransactions = getFilteredTransactions();
+            const totalPages = Math.ceil(filteredTransactions.length / transactionsPerPage);
+            
+            currentPage += direction;
+            
+            if (currentPage < 1) currentPage = 1;
+            if (currentPage > totalPages) currentPage = totalPages;
+            
+            renderTransactionsTable();
+        }
+        
+        function getFilteredTransactions() {
+            let filteredTransactions = [...transactions];
+            
+            if (filterStatus.value) {
+                filteredTransactions = filteredTransactions.filter(t => t.status === filterStatus.value);
+            }
+            
+            if (filterDate.value) {
+                const filterDateObj = new Date(filterDate.value);
+                filteredTransactions = filteredTransactions.filter(t => {
+                    const transactionDate = new Date(t.date);
+                    return transactionDate.toDateString() === filterDateObj.toDateString();
+                });
+            }
+            
+            if (searchTransaction.value) {
+                const searchTerm = searchTransaction.value.toLowerCase();
+                filteredTransactions = filteredTransactions.filter(t => 
+                    t.id.toLowerCase().includes(searchTerm) ||
+                    t.merchant.toLowerCase().includes(searchTerm) ||
+                    t.location.toLowerCase().includes(searchTerm)
+                );
+            }
+            
+            return filteredTransactions;
+        }
+        
+        function filterTransactions() {
+            currentPage = 1;
+            renderTransactionsTable();
+        }
+        
+        // Predict fraud - simulate API call to Flask backend
+        function predictFraud() {
+            const amount = parseFloat(document.getElementById('transactionAmount').value);
+            const location = document.getElementById('transactionLocation').value;
+            const merchant = document.getElementById('merchantName').value || 'Unknown Merchant';
+            const category = document.getElementById('transactionCategory').value;
+            const email = document.getElementById('customerEmail').value;
+            const device = document.getElementById('customerDevice').value;
+            const type = document.getElementById('transactionType').value;
+            
+            // Show loading state
+            predictButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing...';
+            predictButton.disabled = true;
+
+            // Build a payload that matches the preprocessor expected feature names.
+            // The preprocessor expects a fixed set of features (see preprocessor.feature_names_in_).
+            // We'll provide best-effort mappings from the form and sensible defaults for missing values.
+            const now = new Date();
+            const payload = {
+                merchant_name: merchant || '',
+                avg_amount_per_transaction: amount || 0,
+                day_of_week: now.getDay(),
+                amount_deviation_from_location_mean: 0,
+                transaction_category: category || '',
+                customer_no_transactions: 0,
+                customer_lat: null,
+                transaction_type: type || '',
+                customer_place_name: null,
+                merchant_id: null,
+                location: location || '',
+                customer_job: null,
+                age: null,
+                merchant_long: null,
+                amount_per_city_pop: 0,
+                customer_long: null,
+                distance_customer_merchant: 0,
+                transactions_per_customer_ratio: 0,
+                customer_city_population: 0,
+                merchant_lat: null,
+                customer_no_payments: 0,
+                customer_no_orders: 0,
+                payments_per_order_ratio: 0,
+                hour_of_day: now.getHours(),
+                amount: amount || 0,
+                customer_zip_code: null,
+                mean_amount_by_location: 0,
+                fraud_rate_by_location: 0,
+                customer_gender: null
+            };
+
+            // Real network call to backend
+            fetch(`${API_BASE_URL}/predict`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            })
+            .then(async response => {
+                if (!response.ok) {
+                    // Try to read JSON error if available
+                    let errText = `${response.status} ${response.statusText}`;
+                    try {
+                        const errBody = await response.json();
+                        if (errBody && errBody.error) errText = errBody.error;
+                    } catch (e) {}
+                    throw new Error(errText);
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Normalize different shapes (legacy, mock, or production)
+                displayPredictionResults(data, amount, location, merchant);
+            })
+            .catch(error => {
+                console.error('Prediction API error:', error);
+                showNotification('danger', `Prediction service error: ${error.message}`);
+
+                // Fallback to local simulation so UI remains usable offline
+                const isFraud = simulateFraudPrediction(amount, location);
+                const confidence = (Math.random() * 20 + 80).toFixed(1);
+                const fraudProbability = isFraud ? (Math.random() * 30 + 70).toFixed(1) : (Math.random() * 20).toFixed(1);
+                const fallbackResponse = {
+                    prediction: isFraud ? 'fraud' : 'safe',
+                    confidence: parseFloat(confidence),
+                    fraud_probability: parseFloat(fraudProbability)
+                };
+                displayPredictionResults(fallbackResponse, amount, location, merchant);
+            })
+            .finally(() => {
+                predictButton.innerHTML = '<i class="fas fa-brain"></i> Analyze Transaction for Fraud';
+                predictButton.disabled = false;
+            });
+
+    // Normalize and adapt various API response shapes to UI-friendly values
+    function normalizePredictionResponse(data) {
+        // Determine prediction
+        const isFraud = (
+            data.fraud === 1 ||
+            data.fraud_prediction === 1 ||
+            data.prediction === 'fraud' ||
+            data.predicted === 'fraud' ||
+            data.prediction === 1
+        );
+
+        // Determine probability (as 0..1)
+        let probability = null;
+        if (typeof data.probability === 'number') probability = data.probability;
+        else if (typeof data.fraud_probability === 'number') probability = (data.fraud_probability > 1 ? data.fraud_probability / 100 : data.fraud_probability);
+        else if (typeof data.confidence === 'number') probability = (data.confidence > 1 ? data.confidence / 100 : data.confidence);
+
+        // Fallback heuristic
+        if (probability === null) probability = isFraud ? 0.85 : 0.12;
+
+        return {
+            prediction: isFraud ? 'fraud' : 'safe',
+            probability: Math.max(0, Math.min(1, probability)),
+            confidence: data.confidence ?? Math.round(probability * 100)
+        };
+    }
+    
+        
+        function simulateFraudPrediction(amount, location) {
+            // Simple simulation logic based on dataset patterns
+            let fraudScore = 0;
+            
+            // Amount-based risk
+            if (amount > 3000) fraudScore += 40;
+            else if (amount > 1000) fraudScore += 20;
+            else if (amount < 10) fraudScore += 15;
+            
+            // Location-based risk (from dataset patterns)
+            const highRiskLocations = ['New York', 'Dallas', 'Phoenix'];
+            const mediumRiskLocations = ['San Antonio', 'Philadelphia'];
+            
+            if (highRiskLocations.includes(location)) fraudScore += 35;
+            else if (mediumRiskLocations.includes(location)) fraudScore += 20;
+            else if (location === 'Luar Negeri') fraudScore += 50;
+            
+            // Random factor
+            fraudScore += Math.random() * 30;
+            
+            return fraudScore > 60; // Threshold for fraud
+        }
+        
+        function displayPredictionResults(data, amount, location, merchant) {
+            // Update UI with results (support multiple API response shapes)
+            document.getElementById('resultAmount').textContent = `$${amount.toFixed(2)}`;
+            document.getElementById('resultLocation').textContent = location;
+            document.getElementById('resultMerchant').textContent = merchant;
+
+            const norm = normalizePredictionResponse(data);
+
+            // Update prediction badge
+            predictionBadge.textContent = norm.prediction === 'fraud' ? 'FRAUD' : 'SAFE';
+            predictionBadge.className = `prediction-badge ${norm.prediction === 'fraud' ? 'badge-fraud' : 'badge-safe'}`;
+
+            // Update probability bar: use percentage
+            const pct = Math.round(norm.probability * 100);
+            probabilityFill.className = `probability-fill ${norm.prediction === 'fraud' ? 'fraud-probability' : 'safe-probability'}`;
+            probabilityFill.style.width = `${pct}%`;
+            probabilityValue.textContent = `${pct}%`;
+
+            document.getElementById('resultConfidence').textContent = `${norm.confidence}%`;
+            
+            // Show results container
+            resultsContainer.style.display = 'block';
+            
+            // Reset feedback buttons
+            feedbackAccurate.classList.remove('active');
+            feedbackInaccurate.classList.remove('active');
+            
+            // Add to transaction history
+            const isFraud = norm.prediction === 'fraud';
+            const fraudProbability = Math.round(norm.probability * 100);
+
+            const newTransaction = {
+                id: `TRX${10000 + transactions.length + 1}`,
+                date: new Date().toISOString(),
+                amount: amount,
+                location: location,
+                merchant: merchant,
+                category: document.getElementById('transactionCategory').value,
+                isFraud: isFraud,
+                confidence: norm.confidence,
+                status: isFraud ? 'fraud' : 'safe'
+            };
+            
+            transactions.unshift(newTransaction);
+            
+            // Show notification
+            if (isFraud) {
+                showNotification('danger', `Fraud detected! Probability: ${fraudProbability}%`, true);
+            } else {
+                showNotification('success', `Transaction appears legitimate. Fraud probability: ${fraudProbability}%`);
+            }
+            
+            // Scroll to results
+            resultsContainer.scrollIntoView({ behavior: 'smooth' });
+        }
+        
+        function submitFeedback(isAccurate) {
+            // In a real app, this would send feedback to the Flask API
+            // fetch(`${API_BASE_URL}/feedback`, {
+            //     method: 'POST',
+            //     headers: {
+            //         'Content-Type': 'application/json',
+            //     },
+            //     body: JSON.stringify({
+            //         transaction_id: transactions[0].id,
+            //         prediction_accurate: isAccurate,
+            //         user_id: currentUser.id
+            //     })
+            // })
+            
+            showNotification('success', `Thank you for your feedback! Model accuracy will be improved.`);
+            
+            // Reset form after feedback
+            setTimeout(() => {
+                predictionForm.reset();
+                resultsContainer.style.display = 'none';
+            }, 2000);
+        }
+        
+        function exportTransactionsToCSV() {
+            // Create CSV content
+            const headers = ['ID', 'Date', 'Amount', 'Location', 'Merchant', 'Category', 'Status', 'Confidence'];
+            const csvContent = [
+                headers.join(','),
+                ...transactions.map(t => [
+                    t.id,
+                    new Date(t.date).toLocaleDateString(),
+                    t.amount,
+                    t.location,
+                    t.merchant,
+                    t.category,
+                    t.status.toUpperCase(),
+                    t.confidence
+                ].join(','))
+            ].join('\n');
+            
+            // Create download link
+            const blob = new Blob([csvContent], { type: 'text/csv' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `fraud_transactions_${new Date().toISOString().split('T')[0]}.csv`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            showNotification('success', 'Transactions exported successfully');
+        }
+        
+        function viewTransaction(transactionId) {
+            const transaction = transactions.find(t => t.id === transactionId);
+            if (transaction) {
+                // Switch to prediction page and populate form
+                switchPage('predict');
+                
+                // Populate form with transaction data
+                document.getElementById('transactionAmount').value = transaction.amount;
+                document.getElementById('transactionLocation').value = transaction.location;
+                document.getElementById('merchantName').value = transaction.merchant;
+                document.getElementById('transactionCategory').value = transaction.category;
+                
+                // Trigger prediction
+                setTimeout(() => {
+                    predictButton.click();
+                }, 500);
+            }
+        }
+        
+        // Notification system
+        function showNotification(type, message, isImportant = false) {
+            const container = document.getElementById('notificationContainer');
+            
+            const notification = document.createElement('div');
+            notification.className = `notification ${type}`;
+            
+            const icons = {
+                success: 'fa-check-circle',
+                warning: 'fa-exclamation-triangle',
+                danger: 'fa-times-circle',
+                info: 'fa-info-circle'
+            };
+            
+            notification.innerHTML = `
+                <div class="notification-icon">
+                    <i class="fas ${icons[type] || 'fa-info-circle'}"></i>
+                </div>
+                <div class="notification-content">
+                    <h4>${type.charAt(0).toUpperCase() + type.slice(1)}</h4>
+                    <p>${message}</p>
+                </div>
+            `;
+            
+            container.appendChild(notification);
+            
+            // Trigger animation
+            setTimeout(() => {
+                notification.classList.add('show');
+            }, 10);
+            
+            // Auto-remove notification
+            setTimeout(() => {
+                notification.classList.remove('show');
+                setTimeout(() => {
+                    if (notification.parentNode) {
+                        notification.parentNode.removeChild(notification);
+                    }
+                }, 500);
+            }, isImportant ? 8000 : 5000);
+        }
+    </script>
+</body>
+</html>

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; URL=fraud_detection_frontend.html" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Redirecting…</title>
+  </head>
+  <body>
+    <p>Redirecting to <a href="fraud_detection_frontend.html">fraud_detection_frontend.html</a>.</p>
+    <p>If you are not redirected, click the link above.</p>
+  </body>
+</html>

frontend/manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "Fraud Detection AI",
+  "short_name": "FraudAI",
+  "start_url": "/fraud_detection_frontend.html",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#3498db",
+  "icons": [
+    {
+      "src": "icons/icon.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml"
+    }
+  ]
+}

frontend/sw.js

@@ -0,0 +1,27 @@
+const CACHE_NAME = 'fraud-ai-shell-v1';
+const ASSETS = [
+  '/',
+  '/fraud_detection_frontend.html',
+  '/manifest.json',
+  '/icons/icon.svg'
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) => Promise.all(
+      keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))
+    ))
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((cached) => cached || fetch(event.request))
+  );
+});

load_tests/locustfile.py

@@ -0,0 +1,48 @@
+from locust import HttpUser, between, task
+import random
+
+EXAMPLE_PAYLOADS = [
+    {
+        "merchant_name":"TestA",
+        "avg_amount_per_transaction":123.45,
+        "day_of_week":2,
+        "amount_deviation_from_location_mean":0,
+        "transaction_category":"retail",
+        "customer_no_transactions":0,
+        "customer_lat":None,
+        "transaction_type":"online",
+        "customer_place_name":None,
+        "merchant_id":None,
+        "location":"New York",
+        "customer_job":None,
+        "age":None,
+        "merchant_long":None,
+        "amount_per_city_pop":0,
+        "customer_long":None,
+        "distance_customer_merchant":0,
+        "transactions_per_customer_ratio":0,
+        "customer_city_population":0,
+        "merchant_lat":None,
+        "customer_no_payments":0,
+        "customer_no_orders":0,
+        "payments_per_order_ratio":0,
+        "hour_of_day":12,
+        "amount":123.45,
+        "customer_zip_code":None,
+        "mean_amount_by_location":0,
+        "fraud_rate_by_location":0,
+        "customer_gender":None
+    },
+]
+
+class PredictUser(HttpUser):
+    wait_time = between(1, 3)
+
+    @task(10)
+    def predict(self):
+        payload = random.choice(EXAMPLE_PAYLOADS)
+        self.client.post("/predict", json=payload, name="POST /predict")
+
+    @task(1)
+    def get_root(self):
+        self.client.get("/", name="GET /")

mobile/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "fraud-detection-mobile",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "init-capacitor": "npx cap init fraud-detection com.example.frauddetection --web-dir=www",
+    "add-android": "npx cap add android",
+    "copy": "npx cap copy",
+    "open-android": "npx cap open android"
+  },
+  "devDependencies": {
+    "@capacitor/cli": "^5.0.0",
+    "@capacitor/core": "^5.0.0"
+  }
+}

models/anscombe.json

@@ -0,0 +1,49 @@
+[
+  {"Series":"I", "X":10.0, "Y":8.04},
+  {"Series":"I", "X":8.0, "Y":6.95},
+  {"Series":"I", "X":13.0, "Y":7.58},
+  {"Series":"I", "X":9.0, "Y":8.81},
+  {"Series":"I", "X":11.0, "Y":8.33},
+  {"Series":"I", "X":14.0, "Y":9.96},
+  {"Series":"I", "X":6.0, "Y":7.24},
+  {"Series":"I", "X":4.0, "Y":4.26},
+  {"Series":"I", "X":12.0, "Y":10.84},
+  {"Series":"I", "X":7.0, "Y":4.81},
+  {"Series":"I", "X":5.0, "Y":5.68},
+
+  {"Series":"II", "X":10.0, "Y":9.14},
+  {"Series":"II", "X":8.0, "Y":8.14},
+  {"Series":"II", "X":13.0, "Y":8.74},
+  {"Series":"II", "X":9.0, "Y":8.77},
+  {"Series":"II", "X":11.0, "Y":9.26},
+  {"Series":"II", "X":14.0, "Y":8.10},
+  {"Series":"II", "X":6.0, "Y":6.13},
+  {"Series":"II", "X":4.0, "Y":3.10},
+  {"Series":"II", "X":12.0, "Y":9.13},
+  {"Series":"II", "X":7.0, "Y":7.26},
+  {"Series":"II", "X":5.0, "Y":4.74},
+
+  {"Series":"III", "X":10.0, "Y":7.46},
+  {"Series":"III", "X":8.0, "Y":6.77},
+  {"Series":"III", "X":13.0, "Y":12.74},
+  {"Series":"III", "X":9.0, "Y":7.11},
+  {"Series":"III", "X":11.0, "Y":7.81},
+  {"Series":"III", "X":14.0, "Y":8.84},
+  {"Series":"III", "X":6.0, "Y":6.08},
+  {"Series":"III", "X":4.0, "Y":5.39},
+  {"Series":"III", "X":12.0, "Y":8.15},
+  {"Series":"III", "X":7.0, "Y":6.42},
+  {"Series":"III", "X":5.0, "Y":5.73},
+
+  {"Series":"IV", "X":8.0, "Y":6.58},
+  {"Series":"IV", "X":8.0, "Y":5.76},
+  {"Series":"IV", "X":8.0, "Y":7.71},
+  {"Series":"IV", "X":8.0, "Y":8.84},
+  {"Series":"IV", "X":8.0, "Y":8.47},
+  {"Series":"IV", "X":8.0, "Y":7.04},
+  {"Series":"IV", "X":8.0, "Y":5.25},
+  {"Series":"IV", "X":19.0, "Y":12.50},
+  {"Series":"IV", "X":8.0, "Y":5.56},
+  {"Series":"IV", "X":8.0, "Y":7.91},
+  {"Series":"IV", "X":8.0, "Y":6.89}
+]

models/ensemble_model.joblib

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

models/ensemble_model_enhanced.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:49d12e11259188b17aed5a911bd1ee1f1c371f785b9b8573ba88ad7d5e3540bd
+size 101110099

models/preprocessor.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2bf1bcd6d2ae207b7d583789d2d93e106e072f9d08de2ab165434171aa18358a
+size 3746

models/preprocessor_enhanced.joblib

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

schemas/request_schema.py

@@ -0,0 +1,23 @@
+# schemas/request_schema.py
+from pydantic import BaseModel, Field, validator
+
+class PredictRequest(BaseModel):
+    """
+    Schema untuk request prediksi fraud.
+    Menggunakan Pydantic agar validasi otomatis.
+    """
+    location: int = Field(..., description="ID lokasi transaksi")
+    amount: float = Field(..., description="Jumlah nominal transaksi")
+
+    @validator('amount')
+    def amount_must_be_positive(cls, v):
+        if v <= 0:
+            raise ValueError('amount harus > 0')
+        return v
+
+    @validator('location')
+    def location_must_be_positive(cls, v):
+        if v < 0:
+            raise ValueError('location harus >= 0')
+        return v
+

scripts/run_integration_debug.py

@@ -0,0 +1,50 @@
+import subprocess
+import time
+import requests
+import os
+
+
+def start_server(port):
+    env = os.environ.copy()
+    env["PORT"] = str(port)
+    print("Starting server on port", port)
+    proc = subprocess.Popen(
+        ["C:\\Users\\CINDY\\AppData\\Local\\Programs\\Python\\Python310\\python.exe", "app.py"],
+        stdout=subprocess.PIPE,
+        stderr=subprocess.PIPE,
+        env=env,
+    )
+    return proc
+
+
+def wait_until_up(url, timeout=10.0):
+    start = time.time()
+    while True:
+        try:
+            r = requests.post(url, json={"features": [200, 1, 0, 500]}, timeout=1.0)
+            print("server responded", r.status_code, r.json())
+            return True
+        except Exception as e:
+            if time.time() - start > timeout:
+                print("timeout waiting for server", e)
+                return False
+            time.sleep(0.2)
+
+
+def main():
+    port = 5002
+    url = f"http://127.0.0.1:{port}/predict"
+    proc = start_server(port)
+    try:
+        ok = wait_until_up(url)
+        print("wait result:", ok)
+    finally:
+        proc.terminate()
+        try:
+            proc.wait(timeout=5)
+        except Exception:
+            proc.kill()
+
+
+if __name__ == '__main__':
+    main()

tests/test_api.py

@@ -0,0 +1,11 @@
+from app import app
+
+def test_predict():
+    client = app.test_client()
+
+    response = client.post("/predict", json={
+        "features": [200, 1, 0, 500]
+    })
+
+    assert response.status_code == 200
+    assert "fraud" in response.json

tests/test_integration.py

@@ -0,0 +1,48 @@
+import subprocess
+import sys
+import time
+import requests
+import os
+import pytest
+
+
+def start_server(port):
+    env = os.environ.copy()
+    env["PORT"] = str(port)
+    # Start server as a subprocess using the same Python interpreter
+    proc = subprocess.Popen(
+        [sys.executable, "app.py"],
+        stdout=subprocess.PIPE,
+        stderr=subprocess.PIPE,
+        env=env,
+    )
+    return proc
+
+
+def wait_until_up(url, timeout=10.0):
+    start = time.time()
+    while True:
+        try:
+            requests.post(url, json={"features": [200, 1, 0, 500]}, timeout=1.0)
+            return True
+        except Exception:
+            if time.time() - start > timeout:
+                return False
+            time.sleep(0.2)
+
+
+@pytest.mark.integration
+def test_predict_integration():
+    port = 5001
+    url = f"http://127.0.0.1:{port}/predict"
+    proc = start_server(port)
+    try:
+        assert wait_until_up(url), "Server did not start in time"
+        resp = requests.post(url, json={"features": [200, 1, 0, 500]})
+        assert resp.status_code == 200
+        j = resp.json()
+        assert "fraud" in j
+        assert "probability" in j
+    finally:
+        proc.terminate()
+        proc.wait(timeout=5)