Spaces:

mohsin-devs
/

Bankbot

Sleeping

App Files Files Community

mohsin-devs commited on May 24

Commit

24cf0c4

1 Parent(s): 57083db

feat: login/register page, auth guard, working logout, real user identity, fraud detection UI, remove hardcoded API key

Browse files

Files changed (8) hide show

frontend/src/app/chat/page.tsx +6 -2
frontend/src/app/layout.tsx +2 -4
frontend/src/app/login/page.tsx +232 -0
frontend/src/app/page.tsx +5 -1
frontend/src/app/security/page.tsx +372 -2
frontend/src/components/layout/AppShell.tsx +59 -0
frontend/src/components/layout/Navbar.tsx +18 -5
frontend/src/components/layout/Sidebar.tsx +12 -2

frontend/src/app/chat/page.tsx CHANGED Viewed

@@ -8,6 +8,7 @@ import {
   Wifi, WifiOff, RefreshCw
 } from "lucide-react";
 import { useWebSocketChat, WsStatus } from "@/lib/hooks/useWebSocketChat";
 // ─── Types ────────────────────────────────────────────────────────────────────
 interface Message {
@@ -112,7 +113,7 @@ function MessageBubble({ message, onCopy }: { message: Message; onCopy: (text: s
           ? "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"
       }`}>
-        {isUser ? "A" : <Sparkles className="h-4 w-4 text-white" />}
       </div>
       <div className={`max-w-[75%] ${isUser ? "items-end" : "items-start"} flex flex-col gap-1`}>
@@ -151,6 +152,8 @@ function MessageBubble({ message, onCopy }: { message: Message; onCopy: (text: s
 // ─── Main Chat Page ───────────────────────────────────────────────────────────
 export default function ChatPage() {
   const [messages, setMessages] = useState<Message[]>([
     {
       id: "welcome",
@@ -217,6 +220,7 @@ export default function ChatPage() {
   }, []);
   const { status, sendMessage: wsSend, reconnect } = useWebSocketChat({
     onChunk: handleChunk,
     onStart: handleStart,
     onEnd: handleEnd,
@@ -241,7 +245,7 @@ export default function ChatPage() {
       setIsThinking(true);
       try {
         const { aiApi } = await import("@/lib/api");
-        const res = await aiApi.chat(content);
         setIsThinking(false);
         const id = `ai-${Date.now()}`;
         setMessages((prev) => [

   Wifi, WifiOff, RefreshCw
 } from "lucide-react";
 import { useWebSocketChat, WsStatus } from "@/lib/hooks/useWebSocketChat";
+import { useAuthStore } from "@/lib/stores/authStore";
 // ─── Types ────────────────────────────────────────────────────────────────────
 interface Message {
           ? "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"
       }`}>
+        {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`}>
 // ─── Main Chat Page ───────────────────────────────────────────────────────────
 export default function ChatPage() {
+  const { user } = useAuthStore();
+  const userInitial = user?.name?.charAt(0).toUpperCase() || "U";
   const [messages, setMessages] = useState<Message[]>([
     {
       id: "welcome",
   }, []);
   const { status, sendMessage: wsSend, reconnect } = useWebSocketChat({
+    userId: user?.user_id,
     onChunk: handleChunk,
     onStart: handleStart,
     onEnd: handleEnd,
       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) => [

frontend/src/app/layout.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { DashboardLayout } from "@/components/layout/DashboardLayout";
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
@@ -18,9 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <body className={`${inter.variable} font-sans bg-[#050505] text-white antialiased`}>
-        <DashboardLayout>
-          {children}
-        </DashboardLayout>
       </body>
     </html>
   );

 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { AppShell } from "@/components/layout/AppShell";
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
   return (
     <html lang="en" className="dark">
       <body className={`${inter.variable} font-sans bg-[#050505] text-white antialiased`}>
+        <AppShell>{children}</AppShell>
       </body>
     </html>
   );

frontend/src/app/login/page.tsx ADDED Viewed

	@@ -0,0 +1,232 @@

+"use client";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import { Sparkles, Eye, EyeOff, AlertCircle, Loader2, ArrowRight } from "lucide-react";
+import { useAuthStore } from "@/lib/stores/authStore";
+export default function LoginPage() {
+  const router = useRouter();
+  const { login, register, isAuthenticated, isLoading, error, clearError } = useAuthStore();
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null);
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) router.replace("/");
+  }, [isAuthenticated, router]);
+  // Clear errors when switching modes
+  useEffect(() => {
+    clearError();
+    setLocalError(null);
+  }, [mode, clearError]);
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLocalError(null);
+    clearError();
+    if (!email || !password) {
+      setLocalError("Email and password are required.");
+      return;
+    }
+    if (mode === "register" && !name.trim()) {
+      setLocalError("Name is required.");
+      return;
+    }
+    if (password.length < 6) {
+      setLocalError("Password must be at least 6 characters.");
+      return;
+    }
+    try {
+      if (mode === "login") {
+        await login(email, password);
+      } else {
+        await register(email, password, name.trim());
+      }
+      router.replace("/");
+    } catch {
+      // error is set in the store
+    }
+  };
+  const fillDemo = () => {
+    setEmail("alex@bankbot.dev");
+    setPassword("BankBot2026!");
+    setMode("login");
+    clearError();
+    setLocalError(null);
+  };
+  const displayError = localError || error;
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[#050505] px-4">
+      {/* Ambient gradients */}
+      <div className="fixed inset-0 z-0 pointer-events-none overflow-hidden">
+        <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] rounded-full bg-blue-600/10 blur-[160px]" />
+        <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] rounded-full bg-emerald-600/10 blur-[160px]" />
+        <div className="absolute top-[40%] left-[40%] w-[30%] h-[30%] rounded-full bg-purple-600/5 blur-[120px]" />
+      </div>
+      <motion.div
+        initial={{ opacity: 0, y: 24 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+        className="relative z-10 w-full max-w-md"
+      >
+        {/* Logo */}
+        <div className="flex flex-col items-center mb-8">
+          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400 to-cyan-500 shadow-2xl shadow-emerald-500/30 mb-4">
+            <Sparkles className="h-7 w-7 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-white">BankBot AI</h1>
+          <p className="text-sm text-zinc-400 mt-1">AI-Native Financial Operating System</p>
+        </div>
+        {/* Card */}
+        <div className="rounded-2xl border border-white/10 bg-white/[0.04] backdrop-blur-xl p-8 shadow-2xl">
+          {/* Mode toggle */}
+          <div className="flex rounded-xl border border-white/10 bg-white/5 p-1 mb-6">
+            {(["login", "register"] as const).map((m) => (
+              <button
+                key={m}
+                onClick={() => setMode(m)}
+                className={`flex-1 rounded-lg py-2 text-sm font-medium capitalize transition-all ${
+                  mode === m
+                    ? "bg-white/10 text-white shadow-sm"
+                    : "text-zinc-500 hover:text-zinc-300"
+                }`}
+              >
+                {m === "login" ? "Sign In" : "Register"}
+              </button>
+            ))}
+          </div>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Name field (register only) */}
+            <AnimatePresence>
+              {mode === "register" && (
+                <motion.div
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: "auto" }}
+                  exit={{ opacity: 0, height: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <label className="block text-xs font-medium text-zinc-400 mb-1.5">
+                    Full Name
+                  </label>
+                  <input
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Alex Doe"
+                    autoComplete="name"
+                    className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:bg-white/8 transition-all"
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+            {/* Email */}
+            <div>
+              <label className="block text-xs font-medium text-zinc-400 mb-1.5">
+                Email Address
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+                autoComplete="email"
+                className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:bg-white/8 transition-all"
+              />
+            </div>
+            {/* Password */}
+            <div>
+              <label className="block text-xs font-medium text-zinc-400 mb-1.5">
+                Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder={mode === "register" ? "Min. 6 characters" : "••••••••"}
+                  autoComplete={mode === "login" ? "current-password" : "new-password"}
+                  className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 pr-10 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:bg-white/8 transition-all"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300 transition-colors"
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
+            {/* Error */}
+            <AnimatePresence>
+              {displayError && (
+                <motion.div
+                  initial={{ opacity: 0, y: -4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -4 }}
+                  className="flex items-center gap-2 rounded-xl border border-red-500/20 bg-red-500/10 px-3 py-2.5"
+                >
+                  <AlertCircle className="h-4 w-4 text-red-400 flex-shrink-0" />
+                  <p className="text-xs text-red-300">{displayError}</p>
+                </motion.div>
+              )}
+            </AnimatePresence>
+            {/* Submit */}
+            <motion.button
+              type="submit"
+              disabled={isLoading}
+              whileHover={{ scale: isLoading ? 1 : 1.01 }}
+              whileTap={{ scale: isLoading ? 1 : 0.99 }}
+              className="w-full flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-cyan-500 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30 disabled:opacity-60 disabled:cursor-not-allowed transition-all"
+            >
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <>
+                  {mode === "login" ? "Sign In" : "Create Account"}
+                  <ArrowRight className="h-4 w-4" />
+                </>
+              )}
+            </motion.button>
+          </form>
+          {/* Demo account */}
+          <div className="mt-5 pt-5 border-t border-white/8">
+            <p className="text-xs text-zinc-500 text-center mb-3">Try the demo account</p>
+            <button
+              onClick={fillDemo}
+              className="w-full rounded-xl border border-emerald-500/20 bg-emerald-500/5 py-2.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/10 hover:border-emerald-500/30 transition-all"
+            >
+              <span className="font-mono">alex@bankbot.dev</span>
+              <span className="text-zinc-500 mx-2">/</span>
+              <span className="font-mono">BankBot2026!</span>
+            </button>
+          </div>
+        </div>
+        <p className="text-center text-xs text-zinc-600 mt-6">
+          AI responses are for informational purposes only. Not financial advice.
+        </p>
+      </motion.div>
+    </div>
+  );
+}

frontend/src/app/page.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import {
   ResponsiveContainer, PieChart, Pie, Cell
 } from "recharts";
 import { useDashboardStore } from "@/lib/stores/dashboardStore";
 import Link from "next/link";
 // ─── Category colors ──────────────────────────────────────────────────────────
@@ -107,11 +108,14 @@ function StatCard({ title, value, change, positive, icon: Icon, gradient, iconCo
 // ─── Main Page ────────────────────────────────────────────────────────────────
 export default function Home() {
   const { data, isLoading, error, fetch } = useDashboardStore();
   useEffect(() => {
     fetch();
   }, [fetch]);
   const greeting = () => {
     const h = new Date().getHours();
     if (h < 12) return "Good morning";
@@ -142,7 +146,7 @@ export default function Home() {
       {/* Header */}
       <motion.div variants={itemVariants}>
         <h1 className="text-3xl font-bold tracking-tight text-white">
-          {greeting()}, <span className="gradient-text">Alex</span> 👋
         </h1>
         <p className="text-zinc-400 mt-1 text-sm">
           Here&apos;s your financial overview for today.

   ResponsiveContainer, PieChart, Pie, Cell
 } from "recharts";
 import { useDashboardStore } from "@/lib/stores/dashboardStore";
+import { useAuthStore } from "@/lib/stores/authStore";
 import Link from "next/link";
 // ─── Category colors ──────────────────────────────────────────────────────────
 // ─── Main Page ────────────────────────────────────────────────────────────────
 export default function Home() {
   const { data, isLoading, error, fetch } = useDashboardStore();
+  const { user } = useAuthStore();
   useEffect(() => {
     fetch();
   }, [fetch]);
+  const firstName = user?.name?.split(" ")[0] || "there";
   const greeting = () => {
     const h = new Date().getHours();
     if (h < 12) return "Good morning";
       {/* Header */}
       <motion.div variants={itemVariants}>
         <h1 className="text-3xl font-bold tracking-tight text-white">
+          {greeting()}, <span className="gradient-text">{firstName}</span> 👋
         </h1>
         <p className="text-zinc-400 mt-1 text-sm">
           Here&apos;s your financial overview for today.

frontend/src/app/security/page.tsx CHANGED Viewed

@@ -1,4 +1,374 @@
-import { ComingSoon } from "@/components/ui/ComingSoon";
 export default function SecurityPage() {
-  return <ComingSoon title="Security Center" description="Real-time fraud monitoring, device management, and AI threat detection dashboard." />;
 }

+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { motion } from "framer-motion";
+import {
+  Shield, AlertTriangle, CheckCircle, RefreshCw,
+  TrendingUp, Clock, Zap, Eye, XCircle, Activity
+} from "lucide-react";
+import { aiApi } from "@/lib/api";
+import { useAuthStore } from "@/lib/stores/authStore";
+interface FraudAlert {
+  id: string;
+  risk_score: number;
+  details: string;
+  status?: string;
+  transaction_id?: string;
+  merchant?: string;
+  amount?: number;
+  timestamp?: string;
+}
+interface FraudData {
+  total_alerts: number;
+  pending_reviews: number;
+  alerts: FraudAlert[];
+}
+function Skeleton({ className }: { className?: string }) {
+  return <div className={`shimmer rounded-lg ${className}`} />;
+}
+function RiskBadge({ score }: { score: number }) {
+  const level =
+    score >= 70 ? { label: "High Risk", color: "text-red-400", bg: "bg-red-500/10 border-red-500/20" }
+    : score >= 40 ? { label: "Suspicious", color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/20" }
+    : { label: "Low Risk", color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" };
+  return (
+    <span className={`rounded-full border px-2.5 py-1 text-xs font-semibold ${level.color} ${level.bg}`}>
+      {level.label}
+    </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-24 rounded-full bg-white/10 overflow-hidden">
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: `${score}%` }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+          className="h-full rounded-full"
+          style={{ background: color }}
+        />
+      </div>
+      <span className="text-xs font-mono" style={{ color }}>{score}</span>
+    </div>
+  );
+}
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { staggerChildren: 0.07 } },
+};
+const itemVariants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+};
 export default function SecurityPage() {
+  const { user } = useAuthStore();
+  const [data, setData] = useState<FraudData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState<"all" | "high" | "pending">("all");
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await aiApi.fraudAnalysis(user?.user_id);
+      // Normalize response shape
+      const raw = res as unknown as Record<string, unknown>;
+      const alerts: FraudAlert[] = (raw.alerts as FraudAlert[]) || [];
+      setData({
+        total_alerts: (raw.total_alerts as number) ?? alerts.length,
+        pending_reviews: (raw.pending_reviews as number) ?? alerts.filter((a) => a.status === "pending").length,
+        alerts,
+      });
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [user?.user_id]);
+  useEffect(() => { load(); }, [load]);
+  const alerts = data?.alerts || [];
+  const filtered = alerts.filter((a) => {
+    if (filter === "high") return a.risk_score >= 70;
+    if (filter === "pending") return a.status === "pending" || !a.status;
+    return true;
+  });
+  const highRiskCount = alerts.filter((a) => a.risk_score >= 70).length;
+  const suspiciousCount = alerts.filter((a) => a.risk_score >= 40 && a.risk_score < 70).length;
+  const safeCount = alerts.filter((a) => a.risk_score < 40).length;
+  const avgScore = alerts.length
+    ? Math.round(alerts.reduce((s, a) => s + a.risk_score, 0) / alerts.length)
+    : 0;
+  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">Security Center</h1>
+          <p className="text-zinc-400 mt-1 text-sm">
+            AI-powered fraud detection and transaction monitoring
+          </p>
+        </div>
+        <button
+          onClick={load}
+          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 ${loading ? "animate-spin" : ""}`} />
+          Refresh
+        </button>
+      </motion.div>
+      {/* Error */}
+      {error && (
+        <motion.div variants={itemVariants} 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 fraud data</span> — {error}
+          </p>
+        </motion.div>
+      )}
+      {/* AI Shield Banner */}
+      <motion.div
+        variants={itemVariants}
+        className="flex items-center gap-4 rounded-2xl border border-emerald-500/20 bg-gradient-to-r from-emerald-500/10 via-cyan-500/5 to-blue-500/10 px-5 py-4"
+      >
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex-shrink-0">
+          <Shield className="h-5 w-5 text-emerald-400" />
+        </div>
+        <div className="flex-1">
+          <p className="text-sm font-semibold text-white">AI Fraud Shield Active</p>
+          <p className="text-xs text-zinc-400 mt-0.5">
+            Monitoring amount spikes, late-night activity, rapid transactions, and duplicate payments in real-time.
+          </p>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <div className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
+          <span className="text-xs text-emerald-400 font-medium">Live</span>
+        </div>
+      </motion.div>
+      {/* Stats */}
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        {[
+          {
+            label: "Total Alerts",
+            value: loading ? "—" : String(data?.total_alerts ?? 0),
+            icon: Activity,
+            color: "text-blue-400",
+            border: "border-blue-500/20",
+            bg: "from-blue-500/10 to-blue-500/5",
+          },
+          {
+            label: "High Risk",
+            value: loading ? "—" : String(highRiskCount),
+            icon: XCircle,
+            color: "text-red-400",
+            border: "border-red-500/20",
+            bg: "from-red-500/10 to-red-500/5",
+          },
+          {
+            label: "Suspicious",
+            value: loading ? "—" : String(suspiciousCount),
+            icon: AlertTriangle,
+            color: "text-amber-400",
+            border: "border-amber-500/20",
+            bg: "from-amber-500/10 to-amber-500/5",
+          },
+          {
+            label: "Avg Risk Score",
+            value: loading ? "—" : `${avgScore}/100`,
+            icon: TrendingUp,
+            color: "text-purple-400",
+            border: "border-purple-500/20",
+            bg: "from-purple-500/10 to-purple-500/5",
+          },
+        ].map((stat) => (
+          <motion.div
+            key={stat.label}
+            variants={itemVariants}
+            className={`rounded-2xl border ${stat.border} bg-gradient-to-br ${stat.bg} p-5`}
+          >
+            <div className="flex items-start justify-between">
+              <div>
+                <p className="text-xs text-zinc-400 uppercase tracking-wider">{stat.label}</p>
+                <p className={`mt-2 text-2xl font-bold ${stat.color}`}>{stat.value}</p>
+              </div>
+              <stat.icon className={`h-5 w-5 ${stat.color} opacity-60`} />
+            </div>
+          </motion.div>
+        ))}
+      </div>
+      {/* Detection Rules */}
+      <motion.div variants={itemVariants} className="glass-card p-6">
+        <h2 className="text-base font-semibold text-white mb-4">Active Detection Rules</h2>
+        <div className="grid gap-3 sm:grid-cols-2">
+          {[
+            { icon: TrendingUp, label: "Amount Spike Detection", desc: "Flags transactions 3.5× above your average", active: true },
+            { icon: Clock, label: "Late-Night Monitoring", desc: "Alerts on activity between 11PM – 4AM", active: true },
+            { icon: Zap, label: "Rapid Transaction Guard", desc: "Detects multiple transactions within 3 minutes", active: true },
+            { icon: Eye, label: "Duplicate Payment Check", desc: "Catches same merchant + amount within 10 minutes", active: true },
+          ].map((rule) => (
+            <div key={rule.label} className="flex items-start gap-3 rounded-xl border border-white/8 bg-white/[0.02] p-4">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex-shrink-0">
+                <rule.icon className="h-4 w-4 text-emerald-400" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="text-sm font-medium text-white">{rule.label}</p>
+                  <div className="flex items-center gap-1 flex-shrink-0">
+                    <div className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                    <span className="text-[10px] text-emerald-400">ON</span>
+                  </div>
+                </div>
+                <p className="text-xs text-zinc-500 mt-0.5">{rule.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </motion.div>
+      {/* Alerts Table */}
+      <motion.div variants={itemVariants} className="glass-card overflow-hidden">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/8">
+          <div>
+            <h2 className="text-base font-semibold text-white">Fraud Alerts</h2>
+            <p className="text-xs text-zinc-400 mt-0.5">
+              {loading ? "Loading..." : `${filtered.length} alert${filtered.length !== 1 ? "s" : ""}`}
+            </p>
+          </div>
+          <div className="flex items-center gap-1 rounded-xl border border-white/10 bg-white/5 p-1">
+            {(["all", "high", "pending"] as const).map((f) => (
+              <button
+                key={f}
+                onClick={() => setFilter(f)}
+                className={`rounded-lg px-3 py-1.5 text-xs font-medium capitalize transition-all ${
+                  filter === f ? "bg-white/10 text-white" : "text-zinc-500 hover:text-zinc-300"
+                }`}
+              >
+                {f === "all" ? "All" : f === "high" ? "High Risk" : "Pending"}
+              </button>
+            ))}
+          </div>
+        </div>
+        {loading ? (
+          <div className="space-y-px p-4">
+            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-16 w-full rounded-xl" />)}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="flex flex-col items-center gap-3 py-16 text-center">
+            <CheckCircle className="h-12 w-12 text-emerald-500/40" />
+            <p className="text-sm font-medium text-zinc-400">
+              {alerts.length === 0 ? "No fraud alerts detected" : "No alerts match this filter"}
+            </p>
+            <p className="text-xs text-zinc-600">
+              {alerts.length === 0
+                ? "All your transactions look clean. AI Shield is monitoring in real-time."
+                : "Try a different filter to see more alerts."}
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-white/5">
+            {filtered.map((alert, i) => (
+              <motion.div
+                key={alert.id}
+                initial={{ opacity: 0, x: -8 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: i * 0.04 }}
+                className="flex items-center gap-4 px-6 py-4 hover:bg-white/[0.02] transition-colors"
+              >
+                {/* Risk indicator */}
+                <div
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl border ${
+                    alert.risk_score >= 70
+                      ? "bg-red-500/10 border-red-500/20"
+                      : alert.risk_score >= 40
+                      ? "bg-amber-500/10 border-amber-500/20"
+                      : "bg-emerald-500/10 border-emerald-500/20"
+                  }`}
+                >
+                  {alert.risk_score >= 70 ? (
+                    <XCircle className="h-5 w-5 text-red-400" />
+                  ) : alert.risk_score >= 40 ? (
+                    <AlertTriangle className="h-5 w-5 text-amber-400" />
+                  ) : (
+                    <CheckCircle className="h-5 w-5 text-emerald-400" />
+                  )}
+                </div>
+                {/* Details */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <p className="text-sm font-medium text-white truncate">
+                      {alert.merchant || `Transaction ${alert.transaction_id?.slice(0, 8) || alert.id.slice(0, 8)}...`}
+                    </p>
+                    <RiskBadge score={alert.risk_score} />
+                    {alert.status && (
+                      <span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-zinc-400 capitalize">
+                        {alert.status}
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-xs text-zinc-500 mt-0.5 truncate">
+                    {typeof alert.details === "string"
+                      ? alert.details
+                      : Array.isArray(alert.details)
+                      ? (alert.details as string[]).join(" · ")
+                      : "Suspicious activity detected"}
+                  </p>
+                </div>
+                {/* Score bar */}
+                <div className="flex-shrink-0 hidden sm:block">
+                  <RiskBar score={alert.risk_score} />
+                </div>
+                {/* Amount */}
+                {alert.amount != null && (
+                  <div className="flex-shrink-0 text-right">
+                    <p className="text-sm font-semibold text-white">${Math.abs(alert.amount).toFixed(2)}</p>
+                  </div>
+                )}
+              </motion.div>
+            ))}
+          </div>
+        )}
+      </motion.div>
+      {/* Safe status */}
+      {!loading && safeCount > 0 && (
+        <motion.div
+          variants={itemVariants}
+          className="flex items-center gap-3 rounded-2xl border border-emerald-500/20 bg-emerald-500/5 px-5 py-3"
+        >
+          <CheckCircle className="h-4 w-4 text-emerald-400 flex-shrink-0" />
+          <p className="text-xs text-zinc-400">
+            <span className="text-emerald-400 font-medium">{safeCount} transaction{safeCount !== 1 ? "s" : ""} verified safe</span>
+            {" "}— risk score below threshold. No action required.
+          </p>
+        </motion.div>
+      )}
+    </motion.div>
+  );
 }

frontend/src/components/layout/AppShell.tsx ADDED Viewed

	@@ -0,0 +1,59 @@

+"use client";
+/**
+ * AppShell — top-level client wrapper.
+ * - Login page renders without the dashboard chrome.
+ * - All other pages are guarded: unauthenticated users are redirected to /login.
+ * - Restores session from localStorage on first mount.
+ */
+import { useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { DashboardLayout } from "./DashboardLayout";
+import { useAuthStore } from "@/lib/stores/authStore";
+import { Loader2, Sparkles } from "lucide-react";
+const PUBLIC_PATHS = ["/login"];
+function FullPageSpinner() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[#050505]">
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400 to-cyan-500 shadow-2xl shadow-emerald-500/30">
+          <Sparkles className="h-7 w-7 text-white" />
+        </div>
+        <Loader2 className="h-5 w-5 animate-spin text-emerald-400" />
+        <p className="text-xs text-zinc-500">Loading BankBot AI...</p>
+      </div>
+    </div>
+  );
+}
+export function AppShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { isAuthenticated, restoreSession } = useAuthStore();
+  const [hydrated, setHydrated] = useState(false);
+  const isPublic = PUBLIC_PATHS.includes(pathname);
+  useEffect(() => {
+    // Restore session from localStorage token, then mark hydrated
+    restoreSession().finally(() => setHydrated(true));
+  }, [restoreSession]);
+  // Wait for hydration before making routing decisions
+  if (!hydrated) return <FullPageSpinner />;
+  // Public pages (login) — render without dashboard chrome
+  if (isPublic) return <>{children}</>;
+  // Protected pages — redirect to login if not authenticated
+  if (!isAuthenticated) {
+    router.replace("/login");
+    return <FullPageSpinner />;
+  }
+  // Authenticated — render with full dashboard layout
+  return <DashboardLayout>{children}</DashboardLayout>;
+}

frontend/src/components/layout/Navbar.tsx CHANGED Viewed

@@ -4,8 +4,19 @@ import { Search, User } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { NotificationBell } from "@/components/notifications/NotificationPanel";
 import { motion } from "framer-motion";
 export function Navbar() {
   return (
     <header className="sticky top-0 z-40 flex h-16 w-full items-center justify-between bg-black/40 backdrop-blur-xl border-b border-white/10 px-8">
       {/* Search */}
@@ -43,14 +54,16 @@ export function Navbar() {
         >
           <div className="flex flex-col text-right">
             <span className="text-sm font-semibold text-white group-hover:text-emerald-400 transition-colors leading-tight">
-              Alex Doe
             </span>
-            <span className="text-xs text-emerald-500 leading-tight">Premium</span>
           </div>
           <Avatar className="h-9 w-9 border border-emerald-500/30 ring-2 ring-emerald-500/10">
-            <AvatarImage src="https://github.com/shadcn.png" alt="@user" />
-            <AvatarFallback className="bg-emerald-900 text-emerald-400 text-xs">
-              <User className="h-4 w-4" />
             </AvatarFallback>
           </Avatar>
         </motion.div>

 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { NotificationBell } from "@/components/notifications/NotificationPanel";
 import { motion } from "framer-motion";
+import { useAuthStore } from "@/lib/stores/authStore";
 export function Navbar() {
+  const { user } = useAuthStore();
+  const displayName = user?.name || "User";
+  const initials = displayName
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
   return (
     <header className="sticky top-0 z-40 flex h-16 w-full items-center justify-between bg-black/40 backdrop-blur-xl border-b border-white/10 px-8">
       {/* Search */}
         >
           <div className="flex flex-col text-right">
             <span className="text-sm font-semibold text-white group-hover:text-emerald-400 transition-colors leading-tight">
+              {displayName}
+            </span>
+            <span className="text-xs text-emerald-500 leading-tight">
+              {user?.financial_personality || "Premium"}
             </span>
           </div>
           <Avatar className="h-9 w-9 border border-emerald-500/30 ring-2 ring-emerald-500/10">
+            <AvatarImage src="" alt={displayName} />
+            <AvatarFallback className="bg-emerald-900 text-emerald-400 text-xs font-bold">
+              {initials || <User className="h-4 w-4" />}
             </AvatarFallback>
           </Avatar>
         </motion.div>

frontend/src/components/layout/Sidebar.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
 import {
@@ -18,6 +18,7 @@ import {
   Sparkles,
   Activity,
 } from "lucide-react";
 const navigation = [
   { name: "Overview", href: "/", icon: LayoutDashboard },
@@ -34,6 +35,13 @@ const navigation = [
 export function Sidebar() {
   const pathname = usePathname();
   return (
     <div className="flex h-full w-60 flex-col overflow-y-auto bg-black/60 backdrop-blur-2xl border-r border-white/8 text-white">
@@ -114,7 +122,9 @@ export function Sidebar() {
             </div>
           </div>
-          <button className="group flex w-full items-center rounded-xl px-3 py-2.5 text-sm font-medium text-zinc-500 hover:bg-red-500/8 hover:text-red-400 transition-all duration-200">
             <LogOut className="mr-3 h-4 w-4 flex-shrink-0 transition-colors" />
             Sign Out
           </button>

 "use client";
 import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
 import {
   Sparkles,
   Activity,
 } from "lucide-react";
+import { useAuthStore } from "@/lib/stores/authStore";
 const navigation = [
   { name: "Overview", href: "/", icon: LayoutDashboard },
 export function Sidebar() {
   const pathname = usePathname();
+  const router = useRouter();
+  const { logout } = useAuthStore();
+  const handleLogout = () => {
+    logout();
+    router.replace("/login");
+  };
   return (
     <div className="flex h-full w-60 flex-col overflow-y-auto bg-black/60 backdrop-blur-2xl border-r border-white/8 text-white">
             </div>
           </div>
+          <button
+            onClick={handleLogout}
+            className="group flex w-full items-center rounded-xl px-3 py-2.5 text-sm font-medium text-zinc-500 hover:bg-red-500/8 hover:text-red-400 transition-all duration-200">
             <LogOut className="mr-3 h-4 w-4 flex-shrink-0 transition-colors" />
             Sign Out
           </button>