fix: resolve AI assistant page client crash by converting to HTTP streaming fallback, passing env vars to supervisord, and add payments feature

backend/app/ai/chat.py

@@ -169,7 +169,7 @@ def get_chat_response(db: Session, user_id: str, prompt: str) -> str:
     
     # Determine backend
     OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", "")
-    GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "")
+    GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "") or os.environ.get("GROQ_KEY", "")
     
     response_content = None
     
@@ -238,7 +238,7 @@ def stream_chat_response(db: Session, user_id: str, prompt: str):
     chat_memory.add_message(user_id, "user", prompt)
     
     OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", "")
-    GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "")
+    GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "") or os.environ.get("GROQ_KEY", "")
     
     complete_reply = ""
     

backend/app/ai/loan_prediction_model.pkl

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

backend/app/ai/ollama_integration.py

@@ -6,7 +6,11 @@ import time
 # ─── Backend credentials (read once at module load) ───────────────────────────
 OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", "")
 OPENAI_MODEL   = os.environ.get("OPENAI_MODEL", "gpt-4o-mini")
-GROQ_API_KEY   = os.environ.get("GROQ_API_KEY", "")
+# Accept key from env OR the HF Spaces secret variable name GROQ_API_KEY
+GROQ_API_KEY   = (
+    os.environ.get("GROQ_API_KEY", "")
+    or os.environ.get("GROQ_KEY", "")
+)
 USE_GROQ       = bool(GROQ_API_KEY)
 
 OLLAMA_URL = "http://127.0.0.1:11434"
@@ -25,8 +29,13 @@ else:
         AI_BACKEND_AVAILABLE = False
 
 def has_active_ai_backend() -> bool:
-    """Returns True if OpenAI, Groq, or local Ollama is active and reachable."""
-    return AI_BACKEND_AVAILABLE
+    """Returns True if OpenAI, Groq, or local Ollama is active and reachable.
+    Re-reads env vars each call so HF Spaces secrets are always picked up."""
+    if os.environ.get("OPENAI_API_KEY", ""):
+        return True
+    if os.environ.get("GROQ_API_KEY", "") or os.environ.get("GROQ_KEY", ""):
+        return True
+    return AI_BACKEND_AVAILABLE  # falls back to the Ollama ping result from startup
 
 BANKING_KEYWORDS = [
     "account", "loan", "card", "balance",
@@ -190,9 +199,13 @@ def stream_openai_response(prompt, history=None, model=None, language="English")
 
 def get_groq_response(prompt, history=None, model="llama-3.3-70b-versatile", language="English"):
     """Fetches a response from Groq AI API."""
+    # Re-read key at call time so HF Spaces secrets are always picked up
+    groq_key = os.environ.get("GROQ_API_KEY", "") or os.environ.get("GROQ_KEY", "") or GROQ_API_KEY
+    if not groq_key:
+        return None
     try:
         from groq import Groq
-        client = Groq(api_key=GROQ_API_KEY)
+        client = Groq(api_key=groq_key)
 
         sys_prompt = SYSTEM_PROMPT.format(language=language)
         messages = [{"role": "system", "content": sys_prompt}]
@@ -218,9 +231,13 @@ def get_groq_response(prompt, history=None, model="llama-3.3-70b-versatile", lan
 
 def stream_groq_response(prompt, history=None, model="llama-3.3-70b-versatile", language="English"):
     """Yields streamed response chunks from Groq AI API."""
+    # Re-read key at call time so HF Spaces secrets are always picked up
+    groq_key = os.environ.get("GROQ_API_KEY", "") or os.environ.get("GROQ_KEY", "") or GROQ_API_KEY
+    if not groq_key:
+        return
     try:
         from groq import Groq
-        client = Groq(api_key=GROQ_API_KEY)
+        client = Groq(api_key=groq_key)
 
         sys_prompt = SYSTEM_PROMPT.format(language=language)
         messages = [{"role": "system", "content": sys_prompt}]

backend/app/database/models.py

@@ -26,6 +26,7 @@ class User(Base):
     ai_insights = relationship("AIInsight", back_populates="user")
     notifications = relationship("Notification", back_populates="user")
     analytics_snapshots = relationship("AnalyticsSnapshot", back_populates="user")
+    payments = relationship("Payment", back_populates="user")
 
 class Account(Base):
     __tablename__ = "accounts"
@@ -145,3 +146,24 @@ class AnalyticsSnapshot(Base):
     trends_json = Column(JSON, default={})
 
     user = relationship("User", back_populates="analytics_snapshots")
+
+
+class Payment(Base):
+    __tablename__ = "payments"
+
+    id = Column(String, primary_key=True, index=True, default=generate_uuid)
+    user_id = Column(String, ForeignKey("users.id"), nullable=False)
+    amount = Column(Float, nullable=False)
+    currency = Column(String, default="USD")
+    recipient_name = Column(String, nullable=False)
+    recipient_account = Column(String, nullable=False)
+    payment_type = Column(String, nullable=False)   # transfer|bill_payment|subscription|incoming|outgoing
+    status = Column(String, default="pending")       # pending|completed|failed|flagged
+    risk_score = Column(Float, default=0.0)          # 0–100
+    fraud_flag = Column(Boolean, default=False)
+    created_at = Column(DateTime(timezone=True), server_default=func.now())
+    transaction_reference = Column(String, nullable=True)
+    note = Column(String, nullable=True)
+    ai_insight = Column(Text, nullable=True)
+
+    user = relationship("User", back_populates="payments")

backend/app/main.py

@@ -21,6 +21,7 @@ from app.auth.router        import router as auth_router
 from app.dashboard.router   import router as dashboard_router
 from app.notifications.router import router as notifications_router
 from app.transactions.router  import router as transactions_router
+from app.payments.router      import router as payments_router
 
 # ─── Observability ────────────────────────────────────────────────────────────
 from app.middleware.logging import RequestLoggingMiddleware, metrics, api_logger
@@ -130,6 +131,7 @@ app.include_router(ws_router)
 app.include_router(dashboard_router)
 app.include_router(notifications_router)
 app.include_router(transactions_router)
+app.include_router(payments_router)
 
 # ─── Core endpoints ───────────────────────────────────────────────────────────
 @app.get("/", tags=["Core"])

backend/app/payments/router.py

@@ -0,0 +1,212 @@
+"""
+Payments router — create, list, transfer, verify, delete.
+All endpoints require JWT authentication.
+"""
+from typing import Optional
+from fastapi import APIRouter, Depends, HTTPException, Query
+from sqlalchemy.orm import Session
+
+from app.database.database import get_db
+from app.database.models import Payment, User
+from app.auth.router import get_current_user
+from app.payments.schemas import PaymentCreate, TransferCreate, PaymentVerify
+from app.payments.service import create_payment, create_internal_transfer
+from app.middleware.cache import cache
+
+router = APIRouter(prefix="/api/payments", tags=["Payments"])
+
+
+# ─── Create payment ───────────────────────────────────────────────────────────
+
+@router.post("/create", status_code=201)
+def post_create_payment(
+    req: PaymentCreate,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    """
+    Create a new outgoing payment. Runs fraud scoring, deducts balance,
+    creates a Transaction record, fires notification if flagged.
+    """
+    try:
+        payment = create_payment(
+            db=db,
+            user_id=current_user.id,
+            amount=req.amount,
+            currency=req.currency,
+            recipient_name=req.recipient_name,
+            recipient_account=req.recipient_account,
+            payment_type=req.payment_type,
+            note=req.note,
+        )
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+    # Invalidate dashboard cache so balance updates immediately
+    cache.delete(f"dashboard:overview:{current_user.id}")
+
+    return _serialize(payment)
+
+
+# ─── Internal transfer ────────────────────────────────────────────────────────
+
+@router.post("/transfer", status_code=201)
+def post_transfer(
+    req: TransferCreate,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    """
+    Move funds between the user's own accounts (checking → savings/investment).
+    """
+    try:
+        payment = create_internal_transfer(
+            db=db,
+            user_id=current_user.id,
+            amount=req.amount,
+            to_account_type=req.to_account_type,
+            note=req.note,
+        )
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+    cache.delete(f"dashboard:overview:{current_user.id}")
+    return _serialize(payment)
+
+
+# ─── Payment history ──────────────────────────────────────────────────────────
+
+@router.get("/history")
+def get_payment_history(
+    page: int = Query(default=1, ge=1),
+    limit: int = Query(default=20, ge=1, le=100),
+    payment_type: Optional[str] = None,
+    status: Optional[str] = None,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    query = db.query(Payment).filter(Payment.user_id == current_user.id)
+    if payment_type:
+        query = query.filter(Payment.payment_type == payment_type)
+    if status:
+        query = query.filter(Payment.status == status)
+
+    total = query.count()
+    payments = (
+        query.order_by(Payment.created_at.desc())
+        .offset((page - 1) * limit)
+        .limit(limit)
+        .all()
+    )
+
+    total_sent = sum(
+        p.amount for p in db.query(Payment)
+        .filter(Payment.user_id == current_user.id, Payment.payment_type != "incoming")
+        .all()
+    )
+    total_received = sum(
+        p.amount for p in db.query(Payment)
+        .filter(Payment.user_id == current_user.id, Payment.payment_type == "incoming")
+        .all()
+    )
+    flagged_count = db.query(Payment).filter(
+        Payment.user_id == current_user.id, Payment.fraud_flag == True
+    ).count()
+
+    return {
+        "payments": [_serialize(p) for p in payments],
+        "total": total,
+        "page": page,
+        "pages": max(1, (total + limit - 1) // limit),
+        "stats": {
+            "total_sent": round(total_sent, 2),
+            "total_received": round(total_received, 2),
+            "flagged_count": flagged_count,
+        },
+    }
+
+
+# ─── Single payment ───────────────────────────────────────────────────────────
+
+@router.get("/{payment_id}")
+def get_payment(
+    payment_id: str,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    payment = db.query(Payment).filter(
+        Payment.id == payment_id,
+        Payment.user_id == current_user.id,
+    ).first()
+    if not payment:
+        raise HTTPException(status_code=404, detail="Payment not found.")
+    return _serialize(payment)
+
+
+# ─── Verify / confirm a flagged payment ──────────────────────────────────────
+
+@router.post("/verify")
+def post_verify_payment(
+    req: PaymentVerify,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    payment = db.query(Payment).filter(
+        Payment.id == req.payment_id,
+        Payment.user_id == current_user.id,
+    ).first()
+    if not payment:
+        raise HTTPException(status_code=404, detail="Payment not found.")
+
+    if req.confirm:
+        payment.status = "completed"
+        payment.fraud_flag = False
+    else:
+        payment.status = "failed"
+
+    db.commit()
+    db.refresh(payment)
+    return {"message": "Payment updated.", "payment": _serialize(payment)}
+
+
+# ─── Delete / cancel a payment ────────────────────────────────────────────────
+
+@router.delete("/{payment_id}")
+def delete_payment(
+    payment_id: str,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    payment = db.query(Payment).filter(
+        Payment.id == payment_id,
+        Payment.user_id == current_user.id,
+    ).first()
+    if not payment:
+        raise HTTPException(status_code=404, detail="Payment not found.")
+    if payment.status == "completed":
+        raise HTTPException(status_code=400, detail="Cannot delete a completed payment.")
+
+    db.delete(payment)
+    db.commit()
+    return {"message": "Payment cancelled and removed."}
+
+
+# ─── Serializer ───────────────────────────────────────────────────────────────
+
+def _serialize(p: Payment) -> dict:
+    return {
+        "id": p.id,
+        "user_id": p.user_id,
+        "amount": p.amount,
+        "currency": p.currency,
+        "recipient_name": p.recipient_name,
+        "recipient_account": p.recipient_account,
+        "payment_type": p.payment_type,
+        "status": p.status,
+        "risk_score": p.risk_score,
+        "fraud_flag": p.fraud_flag,
+        "created_at": p.created_at.isoformat() if p.created_at else None,
+        "transaction_reference": p.transaction_reference,
+        "note": p.note,
+        "ai_insight": p.ai_insight,
+    }

backend/app/payments/schemas.py

@@ -0,0 +1,48 @@
+from pydantic import BaseModel, Field
+from typing import Optional
+from datetime import datetime
+
+
+class PaymentCreate(BaseModel):
+    amount: float = Field(..., gt=0, description="Payment amount, must be positive")
+    currency: str = Field(default="USD", max_length=3)
+    recipient_name: str = Field(..., min_length=1, max_length=120)
+    recipient_account: str = Field(..., min_length=1, max_length=80)
+    payment_type: str = Field(
+        default="transfer",
+        description="transfer | bill_payment | subscription | incoming | outgoing"
+    )
+    note: Optional[str] = Field(default=None, max_length=255)
+
+
+class TransferCreate(BaseModel):
+    amount: float = Field(..., gt=0)
+    to_account_type: str = Field(
+        ..., description="checking | savings | investment — destination account type"
+    )
+    note: Optional[str] = Field(default=None, max_length=255)
+
+
+class PaymentVerify(BaseModel):
+    payment_id: str
+    confirm: bool = True
+
+
+class PaymentResponse(BaseModel):
+    id: str
+    user_id: str
+    amount: float
+    currency: str
+    recipient_name: str
+    recipient_account: str
+    payment_type: str
+    status: str
+    risk_score: float
+    fraud_flag: bool
+    created_at: datetime
+    transaction_reference: Optional[str]
+    note: Optional[str]
+    ai_insight: Optional[str]
+
+    class Config:
+        from_attributes = True

backend/app/payments/service.py

@@ -0,0 +1,382 @@
+"""
+Payment service — fraud scoring, ledger writes, AI insights, notifications.
+All payment activity is persisted and wired into the fraud engine.
+"""
+import os
+import uuid
+from datetime import datetime, timedelta
+from typing import Optional
+
+import numpy as np
+from sqlalchemy.orm import Session
+
+from app.database.models import (
+    Payment, Transaction, Account, User, Notification, FraudLog, generate_uuid
+)
+
+
+# ─── Fraud scoring for payments ───────────────────────────────────────────────
+
+def score_payment_fraud(
+    db: Session,
+    user_id: str,
+    amount: float,
+    recipient_account: str,
+    recipient_name: str,
+    payment_type: str,
+) -> tuple[float, list[str], bool]:
+    """
+    Returns (risk_score 0-100, reasons list, fraud_flag bool).
+    Runs 5 heuristic rules against payment history + transaction history.
+    """
+    score = 0.0
+    reasons: list[str] = []
+
+    # ── Historical baseline from transactions ─────────────────────────────────
+    accounts = db.query(Account).filter(Account.user_id == user_id).all()
+    account_ids = [a.id for a in accounts]
+
+    recent_txns = (
+        db.query(Transaction)
+        .filter(
+            Transaction.account_id.in_(account_ids),
+            Transaction.type == "debit",
+        )
+        .order_by(Transaction.timestamp.desc())
+        .limit(30)
+        .all()
+    )
+
+    if recent_txns:
+        amounts = [t.amount for t in recent_txns]
+        avg_amt = float(np.mean(amounts))
+        std_amt = float(np.std(amounts)) if len(amounts) > 1 else 0.0
+
+        # Rule 1: Amount spike
+        if amount > avg_amt * 4.0:
+            score += 40
+            reasons.append(
+                f"Payment amount ${amount:,.2f} is {amount/max(avg_amt,1):.1f}× your historical average."
+            )
+        elif amount > avg_amt * 2.5:
+            score += 20
+            reasons.append(
+                f"Payment amount ${amount:,.2f} is significantly above your usual spending."
+            )
+    else:
+        avg_amt = 0.0
+
+    # Rule 2: Late-night timing
+    hour = datetime.utcnow().hour
+    if hour >= 23 or hour < 4:
+        score += 20
+        reasons.append("Payment initiated between 11 PM – 4 AM (unusual hours).")
+
+    # ── Historical baseline from payments ─────────────────────────────────────
+    recent_payments = (
+        db.query(Payment)
+        .filter(Payment.user_id == user_id)
+        .order_by(Payment.created_at.desc())
+        .limit(20)
+        .all()
+    )
+
+    # Rule 3: Velocity — more than 3 payments in last 10 minutes
+    cutoff = datetime.utcnow() - timedelta(minutes=10)
+    rapid = [p for p in recent_payments if p.created_at and p.created_at >= cutoff]
+    if len(rapid) >= 3:
+        score += 25
+        reasons.append(f"{len(rapid)} payments in the last 10 minutes — velocity anomaly.")
+
+    # Rule 4: Duplicate recipient + amount within 15 minutes
+    dup_cutoff = datetime.utcnow() - timedelta(minutes=15)
+    for p in recent_payments[:5]:
+        if (
+            p.recipient_account == recipient_account
+            and abs(p.amount - amount) < 0.01
+            and p.created_at
+            and p.created_at >= dup_cutoff
+        ):
+            score += 30
+            reasons.append(
+                f"Duplicate payment detected: same recipient and amount within 15 minutes."
+            )
+            break
+
+    # Rule 5: New/unknown recipient (never paid before)
+    known_recipients = {p.recipient_account for p in recent_payments}
+    if recipient_account not in known_recipients and amount > 500:
+        score += 15
+        reasons.append(
+            f"First-time payment to '{recipient_name}' for a large amount (${amount:,.2f})."
+        )
+
+    score = min(100.0, score)
+    fraud_flag = score >= 50
+    return round(score, 1), reasons, fraud_flag
+
+
+# ─── AI insight for payment ───────────────────────────────────────────────────
+
+def get_payment_ai_insight(
+    amount: float,
+    recipient_name: str,
+    payment_type: str,
+    risk_score: float,
+    fraud_flag: bool,
+    avg_balance: float,
+) -> str:
+    """
+    Generates a concise AI insight string. Uses Groq if available, else rule-based.
+    """
+    GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "") or os.environ.get("GROQ_KEY", "")
+    OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", "")
+
+    prompt = (
+        f"Payment of ${amount:,.2f} to '{recipient_name}' ({payment_type}). "
+        f"User's average account balance: ${avg_balance:,.2f}. "
+        f"Fraud risk score: {risk_score}/100. "
+        f"Provide a single concise sentence (max 25 words) of financial advice about this payment."
+    )
+
+    if OPENAI_API_KEY:
+        try:
+            from openai import OpenAI
+            client = OpenAI(api_key=OPENAI_API_KEY)
+            resp = client.chat.completions.create(
+                model="gpt-4o-mini",
+                messages=[{"role": "user", "content": prompt}],
+                max_tokens=60,
+                temperature=0.3,
+            )
+            return resp.choices[0].message.content.strip()
+        except Exception:
+            pass
+
+    if GROQ_API_KEY:
+        try:
+            from groq import Groq
+            client = Groq(api_key=GROQ_API_KEY)
+            resp = client.chat.completions.create(
+                model="llama-3.3-70b-versatile",
+                messages=[{"role": "user", "content": prompt}],
+                max_tokens=60,
+                temperature=0.3,
+            )
+            return resp.choices[0].message.content.strip()
+        except Exception:
+            pass
+
+    # Rule-based fallback
+    if fraud_flag:
+        return f"⚠️ High-risk payment flagged. Verify recipient '{recipient_name}' before proceeding."
+    if amount > avg_balance * 0.3:
+        return f"This payment represents {amount/max(avg_balance,1)*100:.0f}% of your balance — review before confirming."
+    if payment_type == "subscription":
+        return f"Recurring subscription to {recipient_name}. Review usage to ensure value."
+    return f"Payment of ${amount:,.2f} to {recipient_name} processed successfully."
+
+
+# ─── Core payment creation ────────────────────────────────────────────────────
+
+def create_payment(
+    db: Session,
+    user_id: str,
+    amount: float,
+    currency: str,
+    recipient_name: str,
+    recipient_account: str,
+    payment_type: str,
+    note: Optional[str] = None,
+) -> Payment:
+    """
+    Creates a payment record, runs fraud scoring, deducts from checking account,
+    creates a matching Transaction, fires a Notification if flagged, and persists.
+    """
+    # ── Fraud scoring ─────────────────────────────────────────────────────────
+    risk_score, fraud_reasons, fraud_flag = score_payment_fraud(
+        db, user_id, amount, recipient_account, recipient_name, payment_type
+    )
+
+    # ── Determine status ──────────────────────────────────────────────────────
+    status = "flagged" if fraud_flag else "completed"
+
+    # ── Average balance for AI insight ────────────────────────────────────────
+    accounts = db.query(Account).filter(Account.user_id == user_id).all()
+    avg_balance = sum(a.balance for a in accounts) / max(len(accounts), 1)
+
+    # ── AI insight ────────────────────────────────────────────────────────────
+    ai_insight = get_payment_ai_insight(
+        amount, recipient_name, payment_type, risk_score, fraud_flag, avg_balance
+    )
+
+    # ── Transaction reference ─────────────────────────────────────────────────
+    txn_ref = f"PAY-{uuid.uuid4().hex[:10].upper()}"
+
+    # ── Persist payment ───────────────────────────────────────────────────────
+    payment = Payment(
+        id=generate_uuid(),
+        user_id=user_id,
+        amount=amount,
+        currency=currency,
+        recipient_name=recipient_name,
+        recipient_account=recipient_account,
+        payment_type=payment_type,
+        status=status,
+        risk_score=risk_score,
+        fraud_flag=fraud_flag,
+        transaction_reference=txn_ref,
+        note=note,
+        ai_insight=ai_insight,
+    )
+    db.add(payment)
+
+    # ── Deduct from checking account (outgoing payments) ─────────────────────
+    if payment_type not in ("incoming",):
+        checking = (
+            db.query(Account)
+            .filter(Account.user_id == user_id, Account.type == "checking")
+            .first()
+        )
+        if checking and checking.balance >= amount:
+            checking.balance = round(checking.balance - amount, 2)
+
+            # Mirror as a Transaction for dashboard/analytics
+            txn = Transaction(
+                id=generate_uuid(),
+                account_id=checking.id,
+                amount=amount,
+                type="debit",
+                category=_payment_type_to_category(payment_type),
+                merchant=recipient_name,
+                tags=["payment", payment_type],
+                ai_generated_metadata={
+                    "payment_id": payment.id,
+                    "risk_score": risk_score,
+                    "fraud_flag": fraud_flag,
+                    "txn_ref": txn_ref,
+                },
+            )
+            db.add(txn)
+
+            # Write FraudLog if flagged
+            if fraud_flag:
+                fraud_log = FraudLog(
+                    id=generate_uuid(),
+                    transaction_id=txn.id,
+                    risk_score=risk_score / 100.0,
+                    suspicious_activity_details="; ".join(fraud_reasons),
+                    status="pending",
+                )
+                db.add(fraud_log)
+
+    # ── Notification ──────────────────────────────────────────────────────────
+    if fraud_flag:
+        notif = Notification(
+            id=generate_uuid(),
+            user_id=user_id,
+            title="🚨 High-Risk Payment Flagged",
+            message=(
+                f"Payment of ${amount:,.2f} to '{recipient_name}' was flagged "
+                f"(risk score: {risk_score:.0f}/100). "
+                f"Reason: {fraud_reasons[0] if fraud_reasons else 'Anomaly detected.'} "
+                f"Reference: {txn_ref}"
+            ),
+            type="alert",
+            read_status=False,
+        )
+        db.add(notif)
+    elif amount >= 500:
+        notif = Notification(
+            id=generate_uuid(),
+            user_id=user_id,
+            title="💸 Large Payment Processed",
+            message=(
+                f"${amount:,.2f} sent to '{recipient_name}'. "
+                f"Reference: {txn_ref}. {ai_insight}"
+            ),
+            type="insight",
+            read_status=False,
+        )
+        db.add(notif)
+
+    db.commit()
+    db.refresh(payment)
+    return payment
+
+
+def create_internal_transfer(
+    db: Session,
+    user_id: str,
+    amount: float,
+    to_account_type: str,
+    note: Optional[str] = None,
+) -> Payment:
+    """
+    Moves funds between the user's own accounts (e.g. checking → savings).
+    """
+    accounts = db.query(Account).filter(Account.user_id == user_id).all()
+    from_acct = next((a for a in accounts if a.type == "checking"), None)
+    to_acct = next((a for a in accounts if a.type == to_account_type), None)
+
+    if not from_acct:
+        raise ValueError("No checking account found.")
+    if not to_acct:
+        raise ValueError(f"No {to_account_type} account found.")
+    if from_acct.id == to_acct.id:
+        raise ValueError("Source and destination accounts are the same.")
+    if from_acct.balance < amount:
+        raise ValueError(f"Insufficient funds. Available: ${from_acct.balance:,.2f}")
+
+    txn_ref = f"TRF-{uuid.uuid4().hex[:10].upper()}"
+
+    # Debit source
+    from_acct.balance = round(from_acct.balance - amount, 2)
+    db.add(Transaction(
+        id=generate_uuid(), account_id=from_acct.id,
+        amount=amount, type="debit", category="Transfer",
+        merchant=f"Transfer to {to_account_type.capitalize()}",
+        tags=["transfer", "internal"],
+        ai_generated_metadata={"txn_ref": txn_ref},
+    ))
+
+    # Credit destination
+    to_acct.balance = round(to_acct.balance + amount, 2)
+    db.add(Transaction(
+        id=generate_uuid(), account_id=to_acct.id,
+        amount=amount, type="credit", category="Transfer",
+        merchant=f"Transfer from Checking",
+        tags=["transfer", "internal"],
+        ai_generated_metadata={"txn_ref": txn_ref},
+    ))
+
+    payment = Payment(
+        id=generate_uuid(),
+        user_id=user_id,
+        amount=amount,
+        currency="USD",
+        recipient_name=f"My {to_account_type.capitalize()} Account",
+        recipient_account=to_acct.id,
+        payment_type="transfer",
+        status="completed",
+        risk_score=0.0,
+        fraud_flag=False,
+        transaction_reference=txn_ref,
+        note=note or f"Internal transfer to {to_account_type}",
+        ai_insight=f"Transferred ${amount:,.2f} to your {to_account_type} account.",
+    )
+    db.add(payment)
+    db.commit()
+    db.refresh(payment)
+    return payment
+
+
+def _payment_type_to_category(payment_type: str) -> str:
+    mapping = {
+        "bill_payment": "Utilities",
+        "subscription": "Entertainment",
+        "transfer": "Transfer",
+        "outgoing": "Payment",
+        "incoming": "Income",
+    }
+    return mapping.get(payment_type, "Payment")

frontend/src/app/chat/page.tsx

@@ -5,9 +5,8 @@ import { motion, AnimatePresence } from "framer-motion";
 import {
   Send, Sparkles, TrendingUp, Shield, PieChart,
   Zap, Copy, ThumbsUp, ThumbsDown, RotateCcw, Mic, Paperclip,
-  Wifi, WifiOff, RefreshCw
 } from "lucide-react";
-import { useWebSocketChat, WsStatus } from "@/lib/hooks/useWebSocketChat";
+import { aiApi } from "@/lib/api";
 import { useAuthStore } from "@/lib/stores/authStore";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -22,36 +21,11 @@ interface Message {
 // ─── Suggested Prompts ────────────────────────────────────────────────────────
 const suggestions = [
   { icon: TrendingUp, label: "Forecast my balance", color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
-  { icon: PieChart, label: "Analyze my spending", color: "text-blue-400", bg: "bg-blue-500/10 border-blue-500/20" },
-  { icon: Shield, label: "Check fraud risk", color: "text-purple-400", bg: "bg-purple-500/10 border-purple-500/20" },
-  { icon: Zap, label: "Optimize my budget", color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/20" },
+  { icon: PieChart,   label: "Analyze my spending", color: "text-blue-400",    bg: "bg-blue-500/10 border-blue-500/20" },
+  { icon: Shield,     label: "Check fraud risk",    color: "text-purple-400",  bg: "bg-purple-500/10 border-purple-500/20" },
+  { icon: Zap,        label: "Optimize my budget",  color: "text-amber-400",   bg: "bg-amber-500/10 border-amber-500/20" },
 ];
 
-// ─── Connection Status Badge ──────────────────────────────────────────────────
-function ConnectionBadge({ status, onReconnect }: { status: WsStatus; onReconnect: () => void }) {
-  const config = {
-    connected: { icon: Wifi, color: "text-emerald-400", label: "Live", dot: "bg-emerald-400" },
-    connecting: { icon: RefreshCw, color: "text-amber-400", label: "Connecting...", dot: "bg-amber-400" },
-    disconnected: { icon: WifiOff, color: "text-zinc-500", label: "Offline", dot: "bg-zinc-500" },
-    error: { icon: WifiOff, color: "text-red-400", label: "Error", dot: "bg-red-400" },
-  }[status];
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className={`h-1.5 w-1.5 rounded-full ${config.dot} ${status === "connecting" ? "animate-pulse" : ""}`} />
-      <span className={`text-xs ${config.color}`}>{config.label}</span>
-      {(status === "disconnected" || status === "error") && (
-        <button
-          onClick={onReconnect}
-          className="text-xs text-zinc-500 hover:text-zinc-300 underline transition-colors"
-        >
-          Retry
-        </button>
-      )}
-    </div>
-  );
-}
-
 // ─── AI Orb ───────────────────────────────────────────────────────────────────
 function AIOrb({ isThinking }: { isThinking: boolean }) {
   return (
@@ -69,8 +43,8 @@ function AIOrb({ isThinking }: { isThinking: boolean }) {
       <motion.div
         animate={{
           boxShadow: isThinking
-            ? ["0 0 20px rgba(16,185,129,0.6), 0 0 60px rgba(59,130,246,0.4)", "0 0 40px rgba(16,185,129,0.8), 0 0 80px rgba(59,130,246,0.5)", "0 0 20px rgba(16,185,129,0.6), 0 0 60px rgba(59,130,246,0.4)"]
-            : ["0 0 20px rgba(16,185,129,0.3), 0 0 40px rgba(59,130,246,0.2)", "0 0 30px rgba(16,185,129,0.5), 0 0 60px rgba(59,130,246,0.3)", "0 0 20px rgba(16,185,129,0.3), 0 0 40px rgba(59,130,246,0.2)"],
+            ? ["0 0 20px rgba(16,185,129,0.6),0 0 60px rgba(59,130,246,0.4)", "0 0 40px rgba(16,185,129,0.8),0 0 80px rgba(59,130,246,0.5)", "0 0 20px rgba(16,185,129,0.6),0 0 60px rgba(59,130,246,0.4)"]
+            : ["0 0 20px rgba(16,185,129,0.3),0 0 40px rgba(59,130,246,0.2)", "0 0 30px rgba(16,185,129,0.5),0 0 60px rgba(59,130,246,0.3)", "0 0 20px rgba(16,185,129,0.3),0 0 40px rgba(59,130,246,0.2)"],
         }}
         transition={{ duration: isThinking ? 0.8 : 3, repeat: Infinity, ease: "easeInOut" }}
         className="relative h-16 w-16 rounded-full bg-gradient-to-br from-emerald-400 via-cyan-400 to-blue-500 flex items-center justify-center"
@@ -87,7 +61,15 @@ function AIOrb({ isThinking }: { isThinking: boolean }) {
 }
 
 // ─── Message Bubble ───────────────────────────────────────────────────────────
-function MessageBubble({ message, onCopy }: { message: Message; onCopy: (text: string) => void }) {
+function MessageBubble({
+  message,
+  onCopy,
+  userInitial,
+}: {
+  message: Message;
+  onCopy: (text: string) => void;
+  userInitial: string;
+}) {
   const isUser = message.role === "user";
 
   const renderContent = (text: string) =>
@@ -108,30 +90,37 @@ function MessageBubble({ message, onCopy }: { message: Message; onCopy: (text: s
       transition={{ duration: 0.3, ease: "easeOut" }}
       className={`flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"}`}
     >
-      <div className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl ${
-        isUser
-          ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xs font-bold"
-          : "bg-gradient-to-br from-emerald-400 to-cyan-500"
-      }`}>
+      {/* Avatar */}
+      <div
+        className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl text-xs font-bold ${
+          isUser
+            ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white"
+            : "bg-gradient-to-br from-emerald-400 to-cyan-500"
+        }`}
+      >
         {isUser ? userInitial : <Sparkles className="h-4 w-4 text-white" />}
       </div>
 
-      <div className={`max-w-[75%] ${isUser ? "items-end" : "items-start"} flex flex-col gap-1`}>
-        <div className={`rounded-2xl px-4 py-3 text-sm leading-relaxed ${
-          isUser
-            ? "bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-tr-sm"
-            : "glass border border-white/10 text-zinc-100 rounded-tl-sm"
-        }`}>
+      {/* Bubble */}
+      <div className={`max-w-[75%] flex flex-col gap-1 ${isUser ? "items-end" : "items-start"}`}>
+        <div
+          className={`rounded-2xl px-4 py-3 text-sm leading-relaxed ${
+            isUser
+              ? "bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-tr-sm"
+              : "glass border border-white/10 text-zinc-100 rounded-tl-sm"
+          }`}
+        >
           <div className="whitespace-pre-wrap">{renderContent(message.content)}</div>
           {message.streaming && <span className="streaming-cursor" />}
         </div>
 
+        {/* Action buttons (AI messages only) */}
         {!isUser && !message.streaming && (
           <div className="flex items-center gap-1 px-1">
             {[
-              { icon: Copy, label: "Copy", action: () => onCopy(message.content) },
-              { icon: ThumbsUp, label: "Good", action: () => {} },
-              { icon: ThumbsDown, label: "Bad", action: () => {} },
+              { icon: Copy,      label: "Copy",  action: () => onCopy(message.content) },
+              { icon: ThumbsUp,  label: "Good",  action: () => {} },
+              { icon: ThumbsDown,label: "Bad",   action: () => {} },
               { icon: RotateCcw, label: "Retry", action: () => {} },
             ].map(({ icon: Icon, label, action }) => (
               <button
@@ -153,121 +142,101 @@ function MessageBubble({ message, onCopy }: { message: Message; onCopy: (text: s
 // ─── Main Chat Page ───────────────────────────────────────────────────────────
 export default function ChatPage() {
   const { user } = useAuthStore();
-  const userInitial = user?.name?.charAt(0).toUpperCase() || "U";
+  const userInitial = user?.name?.charAt(0).toUpperCase() ?? "U";
+
   const [messages, setMessages] = useState<Message[]>([
     {
       id: "welcome",
       role: "assistant",
-      content: "Hello! I'm your AI financial assistant with full context of your accounts, spending patterns, and goals.\n\nWhat would you like to explore today?",
+      content:
+        "Hello! I'm your AI financial assistant with full context of your accounts, spending patterns, and goals.\n\nWhat would you like to explore today?",
       timestamp: new Date(),
     },
   ]);
   const [input, setInput] = useState("");
   const [isThinking, setIsThinking] = useState(false);
-  const [streamingId, setStreamingId] = useState<string | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const currentStreamId = useRef<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
 
+  // Auto-scroll on new messages
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
-  // ── WebSocket handlers ────────────────────────────────────────────────────
-  const handleChunk = useCallback((chunk: string) => {
-    const id = currentStreamId.current;
-    if (!id) return;
+  // ── Simulated word-by-word streaming from HTTP response ───────────────────
+  const streamWords = useCallback((msgId: string, fullText: string) => {
+    const words = fullText.split(" ");
+    let i = 0;
+
+    // Mark as streaming
     setMessages((prev) =>
-      prev.map((m) => m.id === id ? { ...m, content: m.content + chunk } : m)
+      prev.map((m) => (m.id === msgId ? { ...m, streaming: true } : m))
     );
-  }, []);
 
-  const handleStart = useCallback(() => {
-    const id = `ai-${Date.now()}`;
-    currentStreamId.current = id;
-    setIsThinking(false);
-    setStreamingId(id);
-    setMessages((prev) => [
-      ...prev,
-      { id, role: "assistant", content: "", streaming: true, timestamp: new Date() },
-    ]);
-  }, []);
-
-  const handleEnd = useCallback(() => {
-    const id = currentStreamId.current;
-    if (id) {
+    const interval = setInterval(() => {
+      if (i >= words.length) {
+        clearInterval(interval);
+        setMessages((prev) =>
+          prev.map((m) => (m.id === msgId ? { ...m, streaming: false } : m))
+        );
+        return;
+      }
+      const chunk = words.slice(0, i + 1).join(" ");
       setMessages((prev) =>
-        prev.map((m) => m.id === id ? { ...m, streaming: false } : m)
+        prev.map((m) => (m.id === msgId ? { ...m, content: chunk } : m))
       );
-      setStreamingId(null);
-      currentStreamId.current = null;
-    }
+      i++;
+    }, 28); // ~35 words/sec — feels natural
   }, []);
 
-  const handleWsError = useCallback((msg: string) => {
-    setIsThinking(false);
-    setStreamingId(null);
-    currentStreamId.current = null;
-    setMessages((prev) => [
-      ...prev,
-      {
-        id: `err-${Date.now()}`,
-        role: "assistant",
-        content: `⚠️ ${msg}`,
-        timestamp: new Date(),
-      },
-    ]);
-  }, []);
+  // ── Send message ──────────────────────────────────────────────────────────
+  const sendMessage = useCallback(
+    async (text?: string) => {
+      const content = (text ?? input).trim();
+      if (!content || isThinking) return;
 
-  const { status, sendMessage: wsSend, reconnect } = useWebSocketChat({
-    userId: user?.user_id,
-    onChunk: handleChunk,
-    onStart: handleStart,
-    onEnd: handleEnd,
-    onError: handleWsError,
-  });
+      // Cancel any in-flight request
+      abortRef.current?.abort();
+      abortRef.current = new AbortController();
 
-  // ── Send message ──────────────────────────────────────────────────────────
-  const sendMessage = useCallback(async (text?: string) => {
-    const content = (text || input).trim();
-    if (!content || isThinking || streamingId) return;
+      setInput("");
+      setIsThinking(true);
 
-    setInput("");
-    setMessages((prev) => [
-      ...prev,
-      { id: `user-${Date.now()}`, role: "user", content, timestamp: new Date() },
-    ]);
+      // Add user message
+      setMessages((prev) => [
+        ...prev,
+        { id: `user-${Date.now()}`, role: "user", content, timestamp: new Date() },
+      ]);
 
-    const sent = wsSend(content);
+      // Placeholder AI message
+      const aiId = `ai-${Date.now()}`;
+      setMessages((prev) => [
+        ...prev,
+        { id: aiId, role: "assistant", content: "", streaming: true, timestamp: new Date() },
+      ]);
 
-    if (!sent) {
-      // WebSocket not ready — fall back to HTTP
-      setIsThinking(true);
       try {
-        const { aiApi } = await import("@/lib/api");
         const res = await aiApi.chat(content, user?.user_id);
         setIsThinking(false);
-        const id = `ai-${Date.now()}`;
-        setMessages((prev) => [
-          ...prev,
-          { id, role: "assistant", content: res.response, streaming: false, timestamp: new Date() },
-        ]);
-      } catch {
+        streamWords(aiId, res.response);
+      } catch (err) {
         setIsThinking(false);
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: `err-${Date.now()}`,
-            role: "assistant",
-            content: `⚠️ Could not reach the AI backend. Please check your connection.`,
-            timestamp: new Date(),
-          },
-        ]);
+        const errMsg =
+          (err as Error).message === "Session expired. Please log in again."
+            ? "Session expired. Please refresh and log in again."
+            : "⚠️ Could not reach the AI backend. Please try again.";
+        setMessages((prev) =>
+          prev.map((m) =>
+            m.id === aiId
+              ? { ...m, content: errMsg, streaming: false }
+              : m
+          )
+        );
       }
-    } else {
-      setIsThinking(true);
-    }
-  }, [input, isThinking, streamingId, wsSend]);
+    },
+    [input, isThinking, user?.user_id, streamWords]
+  );
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -280,26 +249,33 @@ export default function ChatPage() {
     navigator.clipboard.writeText(text).catch(() => {});
   };
 
+  const isStreaming = messages.some((m) => m.streaming);
+
   return (
     <div className="flex h-[calc(100vh-4rem)] flex-col -m-8">
-      {/* Header */}
+      {/* ── Header ───────────────────────────────────────────────────���─────── */}
       <div className="flex items-center justify-between border-b border-white/10 bg-black/20 backdrop-blur-xl px-8 py-4 flex-shrink-0">
         <div className="flex items-center gap-3">
-          <ConnectionBadge status={status} onReconnect={reconnect} />
+          {/* Live indicator */}
+          <div className="flex items-center gap-2">
+            <div className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            <span className="text-xs text-emerald-400">Live AI</span>
+          </div>
           <div className="h-4 w-px bg-white/10" />
           <div>
             <h1 className="text-base font-semibold text-white">BankBot AI Assistant</h1>
-            <p className="text-xs text-zinc-500">Context-aware · Real-time streaming · Personalized</p>
+            <p className="text-xs text-zinc-500">Context-aware · Groq-powered · Personalized</p>
           </div>
         </div>
         <div className="flex items-center gap-2 text-xs text-zinc-500">
           <Shield className="h-3.5 w-3.5 text-emerald-400" />
-          <span>End-to-end encrypted</span>
+          <span>Encrypted</span>
         </div>
       </div>
 
-      {/* Messages */}
+      {/* ── Messages ───────────────────────────────────────────────────────── */}
       <div className="flex-1 overflow-y-auto px-8 py-6 space-y-5">
+        {/* Welcome orb (only when just the welcome message exists) */}
         {messages.length === 1 && (
           <motion.div
             initial={{ opacity: 0, scale: 0.8 }}
@@ -313,26 +289,35 @@ export default function ChatPage() {
               <p className="text-sm text-zinc-400 mt-1">Ask me anything about your finances</p>
             </div>
             <div className="grid grid-cols-2 gap-3 w-full max-w-md">
-              {suggestions.map((s) => (
-                <motion.button
-                  key={s.label}
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.97 }}
-                  onClick={() => sendMessage(s.label)}
-                  className={`flex items-center gap-2 rounded-xl border px-4 py-3 text-sm font-medium transition-all ${s.bg} ${s.color} hover:brightness-110`}
-                >
-                  <s.icon className="h-4 w-4" />
-                  {s.label}
-                </motion.button>
-              ))}
+              {suggestions.map((s) => {
+                const Icon = s.icon;
+                return (
+                  <motion.button
+                    key={s.label}
+                    whileHover={{ scale: 1.03 }}
+                    whileTap={{ scale: 0.97 }}
+                    onClick={() => sendMessage(s.label)}
+                    className={`flex items-center gap-2 rounded-xl border px-4 py-3 text-sm font-medium transition-all ${s.bg} ${s.color} hover:brightness-110`}
+                  >
+                    <Icon className="h-4 w-4" />
+                    {s.label}
+                  </motion.button>
+                );
+              })}
             </div>
           </motion.div>
         )}
 
         {messages.map((msg) => (
-          <MessageBubble key={msg.id} message={msg} onCopy={copyToClipboard} />
+          <MessageBubble
+            key={msg.id}
+            message={msg}
+            onCopy={copyToClipboard}
+            userInitial={userInitial}
+          />
         ))}
 
+        {/* Thinking dots */}
         <AnimatePresence>
           {isThinking && (
             <motion.div
@@ -363,24 +348,27 @@ export default function ChatPage() {
         <div ref={messagesEndRef} />
       </div>
 
-      {/* Quick suggestions */}
+      {/* ── Quick suggestions (after first message) ────────────────────────── */}
       {messages.length > 1 && (
         <div className="flex gap-2 px-8 pb-2 overflow-x-auto flex-shrink-0">
-          {suggestions.map((s) => (
-            <button
-              key={s.label}
-              onClick={() => sendMessage(s.label)}
-              disabled={!!streamingId || isThinking}
-              className={`flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all disabled:opacity-40 ${s.bg} ${s.color} hover:brightness-110`}
-            >
-              <s.icon className="h-3 w-3" />
-              {s.label}
-            </button>
-          ))}
+          {suggestions.map((s) => {
+            const Icon = s.icon;
+            return (
+              <button
+                key={s.label}
+                onClick={() => sendMessage(s.label)}
+                disabled={isStreaming || isThinking}
+                className={`flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all disabled:opacity-40 ${s.bg} ${s.color} hover:brightness-110`}
+              >
+                <Icon className="h-3 w-3" />
+                {s.label}
+              </button>
+            );
+          })}
         </div>
       )}
 
-      {/* Input */}
+      {/* ── Input ──────────────────────────────────────────────────────────── */}
       <div className="flex-shrink-0 border-t border-white/10 bg-black/20 backdrop-blur-xl px-8 py-4">
         <div className="flex items-end gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 focus-within:border-emerald-500/40 transition-all">
           <button className="text-zinc-500 hover:text-zinc-300 transition-colors mb-0.5">
@@ -393,7 +381,7 @@ export default function ChatPage() {
             onKeyDown={handleKeyDown}
             placeholder="Ask about your finances, forecasts, fraud alerts..."
             rows={1}
-            disabled={!!streamingId}
+            disabled={isStreaming || isThinking}
             className="flex-1 resize-none bg-transparent text-sm text-white placeholder:text-zinc-500 focus:outline-none leading-relaxed max-h-32 disabled:opacity-50"
             style={{ minHeight: "24px" }}
           />
@@ -405,7 +393,7 @@ export default function ChatPage() {
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               onClick={() => sendMessage()}
-              disabled={!input.trim() || isThinking || !!streamingId}
+              disabled={!input.trim() || isThinking || isStreaming}
               className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
             >
               <Send className="h-3.5 w-3.5" />

frontend/src/app/payments/page.tsx

@@ -0,0 +1,895 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  CreditCard, Send, ArrowLeftRight, RefreshCw, AlertTriangle,
+  CheckCircle2, XCircle, Clock, ShieldAlert, Search, Filter,
+  TrendingUp, TrendingDown, Zap, ChevronLeft, ChevronRight,
+  X, Loader2, Sparkles, DollarSign, Receipt, Ban,
+} from "lucide-react";
+import { paymentsApi, Payment } from "@/lib/api";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+type Tab = "send" | "transfer" | "history";
+type PaymentType = "transfer" | "bill_payment" | "subscription" | "outgoing";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function formatDate(ts: string) {
+  if (!ts) return "";
+  const d = new Date(ts);
+  const now = new Date();
+  const diff = Math.floor((now.getTime() - d.getTime()) / 86400000);
+  if (diff === 0) return "Today " + d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+  if (diff === 1) return "Yesterday";
+  if (diff < 7) return `${diff} days ago`;
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+}
+
+function StatusBadge({ status, fraudFlag }: { status: string; fraudFlag: boolean }) {
+  if (fraudFlag || status === "flagged") {
+    return (
+      <span className="inline-flex items-center gap-1 rounded-full bg-red-500/15 border border-red-500/30 px-2.5 py-0.5 text-xs font-medium text-red-400">
+        <ShieldAlert className="h-3 w-3" /> Flagged
+      </span>
+    );
+  }
+  if (status === "completed") {
+    return (
+      <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 border border-emerald-500/30 px-2.5 py-0.5 text-xs font-medium text-emerald-400">
+        <CheckCircle2 className="h-3 w-3" /> Completed
+      </span>
+    );
+  }
+  if (status === "failed") {
+    return (
+      <span className="inline-flex items-center gap-1 rounded-full bg-zinc-500/15 border border-zinc-500/30 px-2.5 py-0.5 text-xs font-medium text-zinc-400">
+        <XCircle className="h-3 w-3" /> Failed
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/15 border border-amber-500/30 px-2.5 py-0.5 text-xs font-medium text-amber-400">
+      <Clock className="h-3 w-3" /> Pending
+    </span>
+  );
+}
+
+function RiskBar({ score }: { score: number }) {
+  const color = score >= 70 ? "#ef4444" : score >= 40 ? "#f59e0b" : "#10b981";
+  return (
+    <div className="flex items-center gap-2">
+      <div className="h-1.5 w-20 rounded-full bg-white/10 overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-500"
+          style={{ width: `${score}%`, background: color }}
+        />
+      </div>
+      <span className="text-xs font-medium" style={{ color }}>{score.toFixed(0)}</span>
+    </div>
+  );
+}
+
+function Skeleton({ className }: { className?: string }) {
+  return <div className={`shimmer rounded-lg ${className}`} />;
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { staggerChildren: 0.05 } },
+};
+const itemVariants = {
+  hidden: { opacity: 0, y: 14 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
+};
+
+// ─── Send Money Form ──────────────────────────────────────────────────────────
+function SendMoneyForm({ onSuccess }: { onSuccess: () => void }) {
+  const [form, setForm] = useState({
+    recipient_name: "",
+    recipient_account: "",
+    amount: "",
+    payment_type: "outgoing" as PaymentType,
+    note: "",
+    currency: "USD",
+  });
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<Payment | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const payment = await paymentsApi.create({
+        ...form,
+        amount: parseFloat(form.amount),
+      });
+      setResult(payment);
+      onSuccess();
+      setForm({ recipient_name: "", recipient_account: "", amount: "", payment_type: "outgoing", note: "", currency: "USD" });
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="glass-card p-6">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/15 border border-emerald-500/20">
+          <Send className="h-5 w-5 text-emerald-400" />
+        </div>
+        <div>
+          <h2 className="text-base font-semibold text-white">Send Money</h2>
+          <p className="text-xs text-zinc-500">Fraud-scored in real time</p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-xs font-medium text-zinc-400 mb-1.5">Recipient Name</label>
+            <input
+              required
+              value={form.recipient_name}
+              onChange={(e) => setForm({ ...form, recipient_name: e.target.value })}
+              placeholder="John Smith"
+              className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/40 transition-all"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-zinc-400 mb-1.5">Account / Reference</label>
+            <input
+              required
+              value={form.recipient_account}
+              onChange={(e) => setForm({ ...form, recipient_account: e.target.value })}
+              placeholder="IBAN / Account No."
+              className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/40 transition-all"
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <label className="block text-xs font-medium text-zinc-400 mb-1.5">Amount</label>
+            <div className="relative">
+              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">$</span>
+              <input
+                required
+                type="number"
+                min="0.01"
+                step="0.01"
+                value={form.amount}
+                onChange={(e) => setForm({ ...form, amount: e.target.value })}
+                placeholder="0.00"
+                className="w-full rounded-xl border border-white/10 bg-white/5 pl-7 pr-3 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/40 transition-all"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-zinc-400 mb-1.5">Currency</label>
+            <select
+              value={form.currency}
+              onChange={(e) => setForm({ ...form, currency: e.target.value })}
+              className="w-full rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500/40 transition-all"
+            >
+              {["USD", "EUR", "GBP", "CAD", "AUD"].map((c) => (
+                <option key={c} value={c}>{c}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-zinc-400 mb-1.5">Type</label>
+            <select
+              value={form.payment_type}
+              onChange={(e) => setForm({ ...form, payment_type: e.target.value as PaymentType })}
+              className="w-full rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500/40 transition-all"
+            >
+              <option value="outgoing">Payment</option>
+              <option value="bill_payment">Bill Payment</option>
+              <option value="subscription">Subscription</option>
+              <option value="transfer">Transfer</option>
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-zinc-400 mb-1.5">Note (optional)</label>
+          <input
+            value={form.note}
+            onChange={(e) => setForm({ ...form, note: e.target.value })}
+            placeholder="Rent, invoice #123, etc."
+            maxLength={255}
+            className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/40 transition-all"
+          />
+        </div>
+
+        {error && (
+          <div className="flex items-center gap-2 rounded-xl border border-red-500/20 bg-red-500/5 px-4 py-3">
+            <AlertTriangle className="h-4 w-4 text-red-400 flex-shrink-0" />
+            <p className="text-xs text-red-400">{error}</p>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full flex items-center justify-center gap-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3 text-sm font-semibold text-black transition-all"
+        >
+          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+          {loading ? "Processing…" : "Send Payment"}
+        </button>
+      </form>
+
+      {/* Result card */}
+      <AnimatePresence>
+        {result && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className={`mt-4 rounded-xl border p-4 ${
+              result.fraud_flag
+                ? "border-red-500/30 bg-red-500/5"
+                : "border-emerald-500/30 bg-emerald-500/5"
+            }`}
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex items-center gap-2">
+                {result.fraud_flag
+                  ? <ShieldAlert className="h-5 w-5 text-red-400 flex-shrink-0" />
+                  : <CheckCircle2 className="h-5 w-5 text-emerald-400 flex-shrink-0" />
+                }
+                <div>
+                  <p className={`text-sm font-semibold ${result.fraud_flag ? "text-red-400" : "text-emerald-400"}`}>
+                    {result.fraud_flag ? "Payment Flagged — Review Required" : "Payment Sent Successfully"}
+                  </p>
+                  <p className="text-xs text-zinc-500 mt-0.5">Ref: {result.transaction_reference}</p>
+                </div>
+              </div>
+              <button onClick={() => setResult(null)} className="text-zinc-600 hover:text-zinc-400">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+            {result.ai_insight && (
+              <div className="mt-3 flex items-start gap-2 rounded-lg bg-white/5 px-3 py-2">
+                <Sparkles className="h-3.5 w-3.5 text-cyan-400 flex-shrink-0 mt-0.5" />
+                <p className="text-xs text-zinc-300">{result.ai_insight}</p>
+              </div>
+            )}
+            <div className="mt-2 flex items-center gap-3">
+              <RiskBar score={result.risk_score} />
+              <span className="text-xs text-zinc-500">risk score</span>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// ─── Transfer Form ────────────────────────────────────────────────────────────
+function TransferForm({ onSuccess }: { onSuccess: () => void }) {
+  const [form, setForm] = useState({ amount: "", to_account_type: "savings", note: "" });
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<Payment | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const payment = await paymentsApi.transfer({
+        amount: parseFloat(form.amount),
+        to_account_type: form.to_account_type,
+        note: form.note || undefined,
+      });
+      setResult(payment);
+      onSuccess();
+      setForm({ amount: "", to_account_type: "savings", note: "" });
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="glass-card p-6">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 border border-blue-500/20">
+          <ArrowLeftRight className="h-5 w-5 text-blue-400" />
+        </div>
+        <div>
+          <h2 className="text-base font-semibold text-white">Internal Transfer</h2>
+          <p className="text-xs text-zinc-500">Move funds between your accounts</p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="rounded-xl border border-white/8 bg-white/3 p-4">
+          <div className="flex items-center justify-between text-xs text-zinc-500 mb-3">
+            <span>From</span>
+            <ArrowLeftRight className="h-3.5 w-3.5" />
+            <span>To</span>
+          </div>
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex-1 rounded-lg border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-zinc-300">
+              Checking Account
+            </div>
+            <select
+              value={form.to_account_type}
+              onChange={(e) => setForm({ ...form, to_account_type: e.target.value })}
+              className="flex-1 rounded-lg border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500/40 transition-all"
+            >
+              <option value="savings">Savings Account</option>
+              <option value="investment">Investment Account</option>
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-zinc-400 mb-1.5">Amount</label>
+          <div className="relative">
+            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">$</span>
+            <input
+              required
+              type="number"
+              min="0.01"
+              step="0.01"
+              value={form.amount}
+              onChange={(e) => setForm({ ...form, amount: e.target.value })}
+              placeholder="0.00"
+              className="w-full rounded-xl border border-white/10 bg-white/5 pl-7 pr-3 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-blue-500/40 transition-all"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-zinc-400 mb-1.5">Note (optional)</label>
+          <input
+            value={form.note}
+            onChange={(e) => setForm({ ...form, note: e.target.value })}
+            placeholder="Emergency fund, vacation savings…"
+            className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-blue-500/40 transition-all"
+          />
+        </div>
+
+        {error && (
+          <div className="flex items-center gap-2 rounded-xl border border-red-500/20 bg-red-500/5 px-4 py-3">
+            <AlertTriangle className="h-4 w-4 text-red-400 flex-shrink-0" />
+            <p className="text-xs text-red-400">{error}</p>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full flex items-center justify-center gap-2 rounded-xl bg-blue-500 hover:bg-blue-400 disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3 text-sm font-semibold text-white transition-all"
+        >
+          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <ArrowLeftRight className="h-4 w-4" />}
+          {loading ? "Transferring…" : "Transfer Funds"}
+        </button>
+      </form>
+
+      <AnimatePresence>
+        {result && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="mt-4 rounded-xl border border-blue-500/30 bg-blue-500/5 p-4"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="h-5 w-5 text-blue-400" />
+                <div>
+                  <p className="text-sm font-semibold text-blue-400">Transfer Complete</p>
+                  <p className="text-xs text-zinc-500">Ref: {result.transaction_reference}</p>
+                </div>
+              </div>
+              <button onClick={() => setResult(null)} className="text-zinc-600 hover:text-zinc-400">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+            {result.ai_insight && (
+              <div className="mt-3 flex items-start gap-2 rounded-lg bg-white/5 px-3 py-2">
+                <Sparkles className="h-3.5 w-3.5 text-cyan-400 flex-shrink-0 mt-0.5" />
+                <p className="text-xs text-zinc-300">{result.ai_insight}</p>
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// ─── Payment History ──────────────────────────────────────────────────────────
+function PaymentHistory({ refreshKey }: { refreshKey: number }) {
+  const [payments, setPayments] = useState<Payment[]>([]);
+  const [stats, setStats] = useState({ total_sent: 0, total_received: 0, flagged_count: 0 });
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [pages, setPages] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [typeFilter, setTypeFilter] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [selected, setSelected] = useState<Payment | null>(null);
+  const [actionLoading, setActionLoading] = useState(false);
+
+  const load = useCallback(async (p = 1) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await paymentsApi.history({
+        page: p,
+        limit: 15,
+        payment_type: typeFilter || undefined,
+        status: statusFilter || undefined,
+      });
+      setPayments(res.payments);
+      setStats(res.stats);
+      setTotal(res.total);
+      setPage(res.page);
+      setPages(res.pages);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [typeFilter, statusFilter]);
+
+  useEffect(() => { load(1); }, [load, refreshKey]);
+
+  const filtered = search
+    ? payments.filter(
+        (p) =>
+          p.recipient_name.toLowerCase().includes(search.toLowerCase()) ||
+          (p.transaction_reference || "").toLowerCase().includes(search.toLowerCase()) ||
+          p.payment_type.toLowerCase().includes(search.toLowerCase())
+      )
+    : payments;
+
+  const handleVerify = async (confirm: boolean) => {
+    if (!selected) return;
+    setActionLoading(true);
+    try {
+      await paymentsApi.verify(selected.id, confirm);
+      setSelected(null);
+      load(page);
+    } catch (err) {
+      alert((err as Error).message);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleCancel = async (id: string) => {
+    if (!confirm("Cancel this payment?")) return;
+    try {
+      await paymentsApi.cancel(id);
+      load(page);
+    } catch (err) {
+      alert((err as Error).message);
+    }
+  };
+
+  const TYPE_ICONS: Record<string, React.ReactNode> = {
+    transfer: <ArrowLeftRight className="h-4 w-4 text-blue-400" />,
+    bill_payment: <Receipt className="h-4 w-4 text-amber-400" />,
+    subscription: <Zap className="h-4 w-4 text-purple-400" />,
+    outgoing: <Send className="h-4 w-4 text-emerald-400" />,
+    incoming: <TrendingUp className="h-4 w-4 text-cyan-400" />,
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Stats row */}
+      <div className="grid grid-cols-3 gap-4">
+        <div className="glass-card p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <TrendingDown className="h-4 w-4 text-zinc-400" />
+            <p className="text-xs text-zinc-400">Total Sent</p>
+          </div>
+          <p className="text-xl font-bold text-white">${stats.total_sent.toLocaleString("en-US", { minimumFractionDigits: 2 })}</p>
+        </div>
+        <div className="glass-card p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <TrendingUp className="h-4 w-4 text-emerald-400" />
+            <p className="text-xs text-zinc-400">Total Received</p>
+          </div>
+          <p className="text-xl font-bold text-emerald-400">${stats.total_received.toLocaleString("en-US", { minimumFractionDigits: 2 })}</p>
+        </div>
+        <div className="glass-card p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <ShieldAlert className="h-4 w-4 text-red-400" />
+            <p className="text-xs text-zinc-400">Flagged</p>
+          </div>
+          <p className="text-xl font-bold text-red-400">{stats.flagged_count}</p>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="relative flex-1 min-w-[200px] max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search recipient, reference…"
+            className="w-full rounded-xl border border-white/10 bg-white/5 py-2 pl-9 pr-3 text-sm text-white placeholder:text-zinc-500 focus:outline-none focus:border-emerald-500/40 transition-all"
+          />
+        </div>
+        <select
+          value={typeFilter}
+          onChange={(e) => { setTypeFilter(e.target.value); setPage(1); }}
+          className="rounded-xl border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-zinc-300 focus:outline-none"
+        >
+          <option value="">All Types</option>
+          <option value="outgoing">Payment</option>
+          <option value="transfer">Transfer</option>
+          <option value="bill_payment">Bill Payment</option>
+          <option value="subscription">Subscription</option>
+          <option value="incoming">Incoming</option>
+        </select>
+        <select
+          value={statusFilter}
+          onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
+          className="rounded-xl border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-zinc-300 focus:outline-none"
+        >
+          <option value="">All Status</option>
+          <option value="completed">Completed</option>
+          <option value="flagged">Flagged</option>
+          <option value="pending">Pending</option>
+          <option value="failed">Failed</option>
+        </select>
+        <div className="flex items-center gap-1.5 text-xs text-zinc-500">
+          <Filter className="h-3.5 w-3.5" />
+          <span>{total} total</span>
+        </div>
+      </div>
+
+      {error && (
+        <div className="flex items-center gap-3 rounded-2xl border border-amber-500/20 bg-amber-500/5 px-5 py-3">
+          <AlertTriangle className="h-4 w-4 text-amber-400 flex-shrink-0" />
+          <p className="text-xs text-zinc-400">
+            <span className="text-amber-400 font-medium">Could not load payments</span> — {error}
+          </p>
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="glass-card overflow-hidden">
+        <div className="grid grid-cols-12 gap-3 border-b border-white/8 px-5 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">
+          <div className="col-span-4">Recipient</div>
+          <div className="col-span-2">Type</div>
+          <div className="col-span-2">Status</div>
+          <div className="col-span-2">Risk</div>
+          <div className="col-span-1 text-right">Amount</div>
+          <div className="col-span-1 text-right">Actions</div>
+        </div>
+
+        <div className="divide-y divide-white/5">
+          {loading
+            ? Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="grid grid-cols-12 gap-3 px-5 py-4">
+                  <div className="col-span-4 flex items-center gap-3">
+                    <Skeleton className="h-9 w-9 rounded-xl flex-shrink-0" />
+                    <div className="space-y-1.5">
+                      <Skeleton className="h-3.5 w-24" />
+                      <Skeleton className="h-3 w-16" />
+                    </div>
+                  </div>
+                  <div className="col-span-2 flex items-center"><Skeleton className="h-5 w-20 rounded-full" /></div>
+                  <div className="col-span-2 flex items-center"><Skeleton className="h-5 w-20 rounded-full" /></div>
+                  <div className="col-span-2 flex items-center"><Skeleton className="h-3 w-20 rounded-full" /></div>
+                  <div className="col-span-1 flex items-center justify-end"><Skeleton className="h-4 w-14" /></div>
+                  <div className="col-span-1 flex items-center justify-end"><Skeleton className="h-6 w-6 rounded-lg" /></div>
+                </div>
+              ))
+            : filtered.map((p, i) => (
+                <motion.div
+                  key={p.id}
+                  initial={{ opacity: 0, x: -8 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: i * 0.03 }}
+                  className={`grid grid-cols-12 gap-3 px-5 py-4 cursor-pointer transition-colors hover:bg-white/2 ${
+                    p.fraud_flag ? "bg-red-500/3" : ""
+                  }`}
+                  onClick={() => setSelected(p)}
+                >
+                  {/* Recipient */}
+                  <div className="col-span-4 flex items-center gap-3">
+                    <div className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white ${
+                      p.fraud_flag ? "bg-red-500/20 border border-red-500/30" : "bg-white/8 border border-white/10"
+                    }`}>
+                      {p.recipient_name.charAt(0).toUpperCase()}
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-white leading-tight">{p.recipient_name}</p>
+                      <p className="text-xs text-zinc-600 leading-tight font-mono">{formatDate(p.created_at)}</p>
+                    </div>
+                  </div>
+
+                  {/* Type */}
+                  <div className="col-span-2 flex items-center gap-1.5">
+                    {TYPE_ICONS[p.payment_type] || <DollarSign className="h-4 w-4 text-zinc-500" />}
+                    <span className="text-xs text-zinc-400 capitalize">{p.payment_type.replace("_", " ")}</span>
+                  </div>
+
+                  {/* Status */}
+                  <div className="col-span-2 flex items-center">
+                    <StatusBadge status={p.status} fraudFlag={p.fraud_flag} />
+                  </div>
+
+                  {/* Risk */}
+                  <div className="col-span-2 flex items-center">
+                    <RiskBar score={p.risk_score} />
+                  </div>
+
+                  {/* Amount */}
+                  <div className="col-span-1 flex items-center justify-end">
+                    <span className={`text-sm font-semibold ${
+                      p.payment_type === "incoming" ? "text-emerald-400" : "text-white"
+                    }`}>
+                      {p.payment_type === "incoming" ? "+" : "-"}${p.amount.toFixed(2)}
+                    </span>
+                  </div>
+
+                  {/* Actions */}
+                  <div className="col-span-1 flex items-center justify-end" onClick={(e) => e.stopPropagation()}>
+                    {(p.status === "pending" || p.status === "flagged") && (
+                      <button
+                        onClick={() => handleCancel(p.id)}
+                        className="rounded-lg p-1.5 text-zinc-600 hover:text-red-400 hover:bg-red-500/10 transition-all"
+                        title="Cancel payment"
+                      >
+                        <Ban className="h-3.5 w-3.5" />
+                      </button>
+                    )}
+                  </div>
+                </motion.div>
+              ))}
+        </div>
+
+        {!loading && filtered.length === 0 && (
+          <div className="flex flex-col items-center gap-3 py-16 text-center">
+            <CreditCard className="h-10 w-10 text-zinc-700" />
+            <p className="text-sm text-zinc-500">No payments found</p>
+            {(search || typeFilter || statusFilter) && (
+              <button
+                onClick={() => { setSearch(""); setTypeFilter(""); setStatusFilter(""); }}
+                className="text-xs text-emerald-400 hover:text-emerald-300 transition-colors"
+              >
+                Clear filters
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {pages > 1 && (
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-zinc-500">Page {page} of {pages} · {total} total</p>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => load(page - 1)}
+              disabled={page <= 1 || loading}
+              className="flex items-center gap-1.5 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-xs text-zinc-400 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              <ChevronLeft className="h-3.5 w-3.5" /> Previous
+            </button>
+            <button
+              onClick={() => load(page + 1)}
+              disabled={page >= pages || loading}
+              className="flex items-center gap-1.5 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-xs text-zinc-400 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              Next <ChevronRight className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Detail modal */}
+      <AnimatePresence>
+        {selected && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+            onClick={() => setSelected(null)}
+          >
+            <motion.div
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              className="glass-card w-full max-w-md p-6"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="flex items-start justify-between mb-5">
+                <div>
+                  <h3 className="text-base font-semibold text-white">{selected.recipient_name}</h3>
+                  <p className="text-xs text-zinc-500 font-mono mt-0.5">{selected.transaction_reference}</p>
+                </div>
+                <button onClick={() => setSelected(null)} className="text-zinc-600 hover:text-zinc-400">
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+
+              <div className="space-y-3">
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="rounded-xl bg-white/5 border border-white/8 p-3">
+                    <p className="text-xs text-zinc-500">Amount</p>
+                    <p className="text-lg font-bold text-white mt-0.5">${selected.amount.toFixed(2)} {selected.currency}</p>
+                  </div>
+                  <div className="rounded-xl bg-white/5 border border-white/8 p-3">
+                    <p className="text-xs text-zinc-500">Status</p>
+                    <div className="mt-1"><StatusBadge status={selected.status} fraudFlag={selected.fraud_flag} /></div>
+                  </div>
+                </div>
+
+                <div className="rounded-xl bg-white/5 border border-white/8 p-3 space-y-2">
+                  <div className="flex justify-between text-xs">
+                    <span className="text-zinc-500">Account</span>
+                    <span className="text-zinc-300 font-mono">{selected.recipient_account}</span>
+                  </div>
+                  <div className="flex justify-between text-xs">
+                    <span className="text-zinc-500">Type</span>
+                    <span className="text-zinc-300 capitalize">{selected.payment_type.replace("_", " ")}</span>
+                  </div>
+                  <div className="flex justify-between text-xs">
+                    <span className="text-zinc-500">Date</span>
+                    <span className="text-zinc-300">{formatDate(selected.created_at)}</span>
+                  </div>
+                  {selected.note && (
+                    <div className="flex justify-between text-xs">
+                      <span className="text-zinc-500">Note</span>
+                      <span className="text-zinc-300">{selected.note}</span>
+                    </div>
+                  )}
+                </div>
+
+                <div className="rounded-xl bg-white/5 border border-white/8 p-3">
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="text-xs text-zinc-500">Fraud Risk Score</p>
+                    <RiskBar score={selected.risk_score} />
+                  </div>
+                  {selected.fraud_flag && (
+                    <p className="text-xs text-red-400 mt-1">⚠️ This payment was flagged by the fraud engine.</p>
+                  )}
+                </div>
+
+                {selected.ai_insight && (
+                  <div className="flex items-start gap-2 rounded-xl bg-cyan-500/5 border border-cyan-500/15 p-3">
+                    <Sparkles className="h-3.5 w-3.5 text-cyan-400 flex-shrink-0 mt-0.5" />
+                    <p className="text-xs text-zinc-300">{selected.ai_insight}</p>
+                  </div>
+                )}
+
+                {selected.fraud_flag && (
+                  <div className="flex gap-2 pt-1">
+                    <button
+                      onClick={() => handleVerify(true)}
+                      disabled={actionLoading}
+                      className="flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-emerald-500/15 border border-emerald-500/30 py-2.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/25 disabled:opacity-50 transition-all"
+                    >
+                      {actionLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="h-3.5 w-3.5" />}
+                      Approve
+                    </button>
+                    <button
+                      onClick={() => handleVerify(false)}
+                      disabled={actionLoading}
+                      className="flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-red-500/15 border border-red-500/30 py-2.5 text-xs font-medium text-red-400 hover:bg-red-500/25 disabled:opacity-50 transition-all"
+                    >
+                      {actionLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <XCircle className="h-3.5 w-3.5" />}
+                      Reject
+                    </button>
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+export default function PaymentsPage() {
+  const [tab, setTab] = useState<Tab>("history");
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const handleSuccess = () => {
+    setRefreshKey((k) => k + 1);
+    // Switch to history after a short delay so user sees the result card first
+    setTimeout(() => setTab("history"), 1200);
+  };
+
+  const TABS: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    { id: "history", label: "Payment History", icon: <CreditCard className="h-4 w-4" /> },
+    { id: "send", label: "Send Money", icon: <Send className="h-4 w-4" /> },
+    { id: "transfer", label: "Transfer", icon: <ArrowLeftRight className="h-4 w-4" /> },
+  ];
+
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      className="flex flex-col gap-6"
+    >
+      {/* Header */}
+      <motion.div variants={itemVariants} className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-white">Payments</h1>
+          <p className="text-zinc-400 mt-1 text-sm">
+            Real-time fraud scoring · AI insights · Persistent ledger
+          </p>
+        </div>
+        <button
+          onClick={() => setRefreshKey((k) => k + 1)}
+          className="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-xs text-zinc-400 hover:text-white transition-colors"
+        >
+          <RefreshCw className="h-3.5 w-3.5" />
+          Refresh
+        </button>
+      </motion.div>
+
+      {/* Tab bar */}
+      <motion.div variants={itemVariants} className="flex items-center gap-1 rounded-2xl border border-white/8 bg-white/3 p-1 w-fit">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => setTab(t.id)}
+            className={`relative flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all ${
+              tab === t.id ? "text-white" : "text-zinc-500 hover:text-zinc-300"
+            }`}
+          >
+            {tab === t.id && (
+              <motion.div
+                layoutId="activeTab"
+                className="absolute inset-0 rounded-xl bg-white/10 border border-white/10"
+                transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
+              />
+            )}
+            <span className="relative">{t.icon}</span>
+            <span className="relative">{t.label}</span>
+          </button>
+        ))}
+      </motion.div>
+
+      {/* Tab content */}
+      <motion.div variants={itemVariants}>
+        <AnimatePresence mode="wait">
+          {tab === "send" && (
+            <motion.div key="send" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }}>
+              <SendMoneyForm onSuccess={handleSuccess} />
+            </motion.div>
+          )}
+          {tab === "transfer" && (
+            <motion.div key="transfer" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }}>
+              <TransferForm onSuccess={handleSuccess} />
+            </motion.div>
+          )}
+          {tab === "history" && (
+            <motion.div key="history" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }}>
+              <PaymentHistory refreshKey={refreshKey} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
+    </motion.div>
+  );
+}

frontend/src/app/status/page.tsx

@@ -28,7 +28,7 @@ interface ApiStatus {
   version: string;
 }
 
-const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+const API = process.env.NEXT_PUBLIC_API_URL || "";
 
 function formatUptime(s: number) {
   if (s < 60) return `${s}s`;

frontend/src/components/layout/Sidebar.tsx

@@ -17,14 +17,16 @@ import {
   Shield,
   Sparkles,
   Activity,
+  CreditCard,
 } from "lucide-react";
 import { useAuthStore } from "@/lib/stores/authStore";
 
 const navigation = [
   { name: "Overview", href: "/", icon: LayoutDashboard },
   { name: "Transactions", href: "/transactions", icon: ArrowRightLeft },
+  { name: "Payments", href: "/payments", icon: CreditCard, badge: "NEW" },
   { name: "Analytics", href: "/analytics", icon: BarChart2 },
-  { name: "Simulator", href: "/simulator", icon: Zap, badge: "NEW" },
+  { name: "Simulator", href: "/simulator", icon: Zap },
   { name: "Loans", href: "/loans", icon: Wallet },
   { name: "Goals", href: "/goals", icon: Target },
   { name: "AI Assistant", href: "/chat", icon: MessageSquare, badge: "AI" },

frontend/src/lib/api.ts

@@ -260,6 +260,82 @@ export const transactionsApi = {
   },
 };
 
+// ─── Payments ─────────────────────────────────────────────────────────────────
+export interface Payment {
+  id: string;
+  user_id: string;
+  amount: number;
+  currency: string;
+  recipient_name: string;
+  recipient_account: string;
+  payment_type: string;
+  status: "pending" | "completed" | "failed" | "flagged";
+  risk_score: number;
+  fraud_flag: boolean;
+  created_at: string;
+  transaction_reference: string | null;
+  note: string | null;
+  ai_insight: string | null;
+}
+
+export interface PaymentHistoryResponse {
+  payments: Payment[];
+  total: number;
+  page: number;
+  pages: number;
+  stats: {
+    total_sent: number;
+    total_received: number;
+    flagged_count: number;
+  };
+}
+
+export const paymentsApi = {
+  create: (data: {
+    amount: number;
+    currency?: string;
+    recipient_name: string;
+    recipient_account: string;
+    payment_type?: string;
+    note?: string;
+  }) =>
+    apiFetch<Payment>("/api/payments/create", {
+      method: "POST",
+      body: JSON.stringify(data),
+    }),
+
+  transfer: (data: { amount: number; to_account_type: string; note?: string }) =>
+    apiFetch<Payment>("/api/payments/transfer", {
+      method: "POST",
+      body: JSON.stringify(data),
+    }),
+
+  history: (params: {
+    page?: number;
+    limit?: number;
+    payment_type?: string;
+    status?: string;
+  } = {}) => {
+    const qs = new URLSearchParams();
+    if (params.page) qs.set("page", String(params.page));
+    if (params.limit) qs.set("limit", String(params.limit));
+    if (params.payment_type) qs.set("payment_type", params.payment_type);
+    if (params.status) qs.set("status", params.status);
+    return apiFetch<PaymentHistoryResponse>(`/api/payments/history?${qs}`);
+  },
+
+  get: (id: string) => apiFetch<Payment>(`/api/payments/${id}`),
+
+  verify: (payment_id: string, confirm: boolean) =>
+    apiFetch<{ message: string; payment: Payment }>("/api/payments/verify", {
+      method: "POST",
+      body: JSON.stringify({ payment_id, confirm }),
+    }),
+
+  cancel: (id: string) =>
+    apiFetch<{ message: string }>(`/api/payments/${id}`, { method: "DELETE" }),
+};
+
 // ─── WebSocket factory ────────────────────────────────────────────────────────
 export function createChatWebSocket(userId?: string): WebSocket {
   const wsBase = getWsBase();

hf/start.sh

@@ -37,6 +37,15 @@ fi
 # CORS: allow HF Space domain + localhost
 export BACKEND_CORS_ORIGINS='["http://localhost:7860","http://localhost:3000","https://*.hf.space","*"]'
 
+# ── Log which AI backend is active ───────────────────────────────────────────
+if [ -n "$OPENAI_API_KEY" ]; then
+    echo "[INFO] AI backend: OpenAI (key detected)"
+elif [ -n "$GROQ_API_KEY" ]; then
+    echo "[INFO] AI backend: Groq (key detected)"
+else
+    echo "[WARN] No AI API key set — AI will use offline fallback. Set GROQ_API_KEY in HF Secrets for live AI."
+fi
+
 # ── Initialize database ───────────────────────────────────────────────────────
 echo "[1/3] Initializing database..."
 cd /app/backend

hf/supervisord.conf

@@ -16,7 +16,8 @@ startsecs=5
 stdout_logfile=/var/log/supervisor/fastapi.log
 stderr_logfile=/var/log/supervisor/fastapi.log
 stdout_logfile_maxbytes=5MB
-environment=PYTHONUNBUFFERED="1",PYTHONPATH="/app/backend"
+; Pass all env vars from the parent shell (set by start.sh / HF Spaces secrets)
+environment=PYTHONUNBUFFERED="1",PYTHONPATH="/app/backend",GROQ_API_KEY="%(ENV_GROQ_API_KEY)s",OPENAI_API_KEY="%(ENV_OPENAI_API_KEY)s",DATABASE_URL="%(ENV_DATABASE_URL)s",USE_SQLITE="%(ENV_USE_SQLITE)s",JWT_SECRET_KEY="%(ENV_JWT_SECRET_KEY)s",BACKEND_CORS_ORIGINS="%(ENV_BACKEND_CORS_ORIGINS)s",REDIS_URL="%(ENV_REDIS_URL)s"
 
 [program:nextjs]
 command=node server.js