fix: remove duplicate SecurityPage component breaking HF Docker build

frontend/src/app/security/page.tsx

@@ -56,20 +56,13 @@ function RiskBar({ score }: { score: number }) {
   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 }}
-        />
+        <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>
   );
 }
 
-// ─── Alert Row with expandable AI explanation ─────────────────────────────────
 function AlertRow({ alert, index }: { alert: FraudAlert; index: number }) {
   const [expanded, setExpanded] = useState(false);
   const [explanation, setExplanation] = useState<FraudExplanation | null>(null);
@@ -96,72 +89,33 @@ function AlertRow({ alert, index }: { alert: FraudAlert; index: number }) {
   };
 
   return (
-    <motion.div
-      initial={{ opacity: 0, x: -8 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ delay: index * 0.04 }}
-      className={`border-b border-white/5 last:border-0 ${alert.risk_score >= 70 ? "bg-red-500/2" : ""}`}
-    >
-      {/* Main row */}
-      <div
-        className="flex items-center gap-4 px-6 py-4 hover:bg-white/[0.02] transition-colors cursor-pointer"
-        onClick={loadExplanation}
-      >
-        <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" />}
+    <motion.div initial={{ opacity: 0, x: -8 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: index * 0.04 }}
+      className={`border-b border-white/5 last:border-0 ${alert.risk_score >= 70 ? "bg-red-500/2" : ""}`}>
+      <div className="flex items-center gap-4 px-6 py-4 hover:bg-white/[0.02] transition-colors cursor-pointer" onClick={loadExplanation}>
+        <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>
-
         <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 || alert.id).slice(0, 8)}...`}
-            </p>
+            <p className="text-sm font-medium text-white truncate">{alert.merchant || `Transaction ${(alert.transaction_id || 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>
-            )}
+            {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"}
+            {typeof alert.details === "string" ? alert.details : Array.isArray(alert.details) ? (alert.details as string[]).join(" · ") : "Suspicious activity detected"}
           </p>
         </div>
-
-        <div className="flex-shrink-0 hidden sm:block">
-          <RiskBar score={alert.risk_score} />
-        </div>
-
-        {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>
-        )}
-
+        <div className="flex-shrink-0 hidden sm:block"><RiskBar score={alert.risk_score} /></div>
+        {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>}
         <div className="flex-shrink-0 flex items-center gap-1 text-zinc-500">
           <Sparkles className="h-3.5 w-3.5 text-cyan-400" />
           {expanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
         </div>
       </div>
 
-      {/* AI Explanation panel */}
       <AnimatePresence>
         {expanded && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: "auto", opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.25 }}
-            className="overflow-hidden"
-          >
+          <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.25 }} className="overflow-hidden">
             <div className="mx-6 mb-4 rounded-xl border border-cyan-500/20 bg-cyan-500/5 p-4">
               <div className="flex items-start gap-2">
                 <Sparkles className="h-4 w-4 text-cyan-400 flex-shrink-0 mt-0.5" />
@@ -188,20 +142,10 @@ function AlertRow({ alert, index }: { alert: FraudAlert; index: number }) {
                       )}
                       {explanation.amount_vs_avg > 0 && (
                         <div className="flex items-center gap-4 pt-1 border-t border-white/8">
-                          <div>
-                            <p className="text-[10px] text-zinc-500">This transaction</p>
-                            <p className="text-sm font-bold text-white">${alert.amount?.toFixed(2)}</p>
-                          </div>
+                          <div><p className="text-[10px] text-zinc-500">This transaction</p><p className="text-sm font-bold text-white">${alert.amount?.toFixed(2)}</p></div>
                           <div className="text-zinc-600">vs</div>
-                          <div>
-                            <p className="text-[10px] text-zinc-500">Your average</p>
-                            <p className="text-sm font-bold text-zinc-300">${explanation.user_avg_amount.toFixed(2)}</p>
-                          </div>
-                          <div className="ml-auto">
-                            <span className="rounded-full bg-red-500/15 border border-red-500/30 px-2 py-0.5 text-xs font-bold text-red-400">
-                              {explanation.amount_vs_avg.toFixed(1)}× average
-                            </span>
-                          </div>
+                          <div><p className="text-[10px] text-zinc-500">Your average</p><p className="text-sm font-bold text-zinc-300">${explanation.user_avg_amount.toFixed(2)}</p></div>
+                          <div className="ml-auto"><span className="rounded-full bg-red-500/15 border border-red-500/30 px-2 py-0.5 text-xs font-bold text-red-400">{explanation.amount_vs_avg.toFixed(1)}× average</span></div>
                         </div>
                       )}
                     </div>
@@ -216,14 +160,8 @@ function AlertRow({ alert, index }: { alert: FraudAlert; index: number }) {
   );
 }
 
-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 } },
-};
+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();
@@ -233,51 +171,34 @@ export default function SecurityPage() {
   const [filter, setFilter] = useState<"all" | "high" | "pending">("all");
 
   const load = useCallback(async () => {
-    setLoading(true);
-    setError(null);
+    setLoading(true); setError(null);
     try {
       const res = await aiApi.fraudAnalysis(user?.user_id);
       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);
-    }
+      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 filtered = alerts.filter((a) => filter === "high" ? a.risk_score >= 70 : filter === "pending" ? a.status === "pending" || !a.status : 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;
+  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 · Click any alert for a full AI explanation</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
+          <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />Refresh
         </button>
       </motion.div>
 
@@ -288,24 +209,15 @@ export default function SecurityPage() {
         </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 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">
-            Click any flagged transaction to get a full AI explanation of exactly why it was flagged.
-          </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>
+          <p className="text-xs text-zinc-400 mt-0.5">Click any flagged transaction to get a full AI explanation of exactly why it was flagged.</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" },
@@ -315,17 +227,13 @@ export default function SecurityPage() {
         ].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>
+              <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">
@@ -336,16 +244,11 @@ export default function SecurityPage() {
             { icon: Eye, label: "Duplicate Payment Check", desc: "Catches same merchant + amount within 10 minutes" },
           ].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 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 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>
@@ -354,19 +257,15 @@ export default function SecurityPage() {
         </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" : ""} · Click any row for AI explanation`}
-            </p>
+            <p className="text-xs text-zinc-400 mt-0.5">{loading ? "Loading..." : `${filtered.length} alert${filtered.length !== 1 ? "s" : ""} · Click any row for AI explanation`}</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"}`}>
+              <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>
             ))}
@@ -374,25 +273,15 @@ export default function SecurityPage() {
         </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>
+          <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 transactions look clean. AI Shield is monitoring in real-time." : "Try a different filter."}
-            </p>
+            <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 transactions look clean. AI Shield is monitoring in real-time." : "Try a different filter."}</p>
           </div>
         ) : (
-          <div>
-            {filtered.map((alert, i) => (
-              <AlertRow key={alert.id} alert={alert} index={i} />
-            ))}
-          </div>
+          <div>{filtered.map((alert, i) => <AlertRow key={alert.id} alert={alert} index={i} />)}</div>
         )}
       </motion.div>
 
@@ -400,378 +289,7 @@ export default function SecurityPage() {
         <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>
-  );
-}
-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.
+            <span className="text-emerald-400 font-medium">{safeCount} transaction{safeCount !== 1 ? "s" : ""} verified safe</span>{" "}— risk score below threshold.
           </p>
         </motion.div>
       )}