FraudGuard AI – Credit Card Fraud Detection

\n \n

\n {score}\n / 100\n

Risk Score

\n );\n}\n\n// ─── Transaction Form ─────────────────────────────────────────────────────────\nfunction TransactionForm({ onResult }: { onResult: () => void }) {\n const [form, setForm] = useState({\n amount: \"\", merchant: \"\", category: \"retail\", location: \"\",\n cardLast4: \"\", timeOfDay: \"afternoon\", isInternational: false, isOnline: false,\n });\n const [loading, setLoading] = useState(false);\n const [result, setResult] = useState(null);\n\n const set = (key: string, val: unknown) => setForm(f => ({ ...f, [key]: val }));\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!form.amount || !form.merchant || !form.location || !form.cardLast4) return;\n setLoading(true);\n setResult(null);\n try {\n const res = await fetch(\"/api/transactions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ ...form, amount: parseFloat(form.amount) }),\n });\n const data = await res.json();\n setResult(data);\n onResult();\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

💳 Submit Transaction

\n Amount (USD)\n set(\"amount\", e.target.value)} required />\n

\n Card Last 4 Digits\n set(\"cardLast4\", e.target.value)} required />\n

\n Merchant Name\n set(\"merchant\", e.target.value)} required />\n

\n Category\n \n

\n Time of Day\n \n

\n Location\n set(\"location\", e.target.value)} required />\n

\n 🌍 International Transaction\n \n set(\"isInternational\", e.target.checked)} />\n \n \n

\n 🌐 Online / Card-Not-Present\n \n set(\"isOnline\", e.target.checked)} />\n \n \n

\n \n

\n\n {result && (\n

\n {statusIcon(result.status)}\n {statusLabel(result.status)}\n

\n \n

\n {result.reasons.length > 0 ? (\n <>\n

Risk factors detected:

\n \n ) : (\n

✓ No suspicious patterns detected

\n )}\n

\n );\n}\n\n// ─── Stats Panel ───────────────────────────────────────────────────────────────\nfunction StatsPanel({ stats }: { stats: Stats | null }) {\n if (!stats) return null;\n return (\n

Total Transactions

{stats.total}

Approved

{stats.approved}

Flagged

{stats.flagged}

Blocked

{stats.blocked}

Avg Risk Score

{stats.avgRiskScore}

Total Volume

{fmtAmt(stats.totalAmount)}

\n );\n}\n\n// ─── Transactions Table ───────────────────────────────────────────────────────\nfunction TransactionsTable({ transactions, onClear }: { transactions: Transaction[]; onClear: () => void }) {\n if (transactions.length === 0) {\n return (\n

📭

No transactions yet. Submit one to get started!

\n );\n }\n return (\n <>\n

\n Recent Transactions ({transactions.length})\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {transactions.map(tx => (\n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n

#	Merchant	Category	Amount	Card	Location	Time	Risk	Status	Date
{tx.id}	{tx.merchant}	{tx.category}	{fmtAmt(tx.amount)}	••••{tx.card_last4}	{tx.location}{tx.is_international ? \" 🌍\" : \"\"}	{tx.time_of_day}	\n = 70 ? \"var(--red)\" : tx.risk_score >= 40 ? \"var(--yellow)\" : \"var(--green)\" }}>\n {tx.risk_score}\n \n	\n \n {statusIcon(tx.status)} {tx.status}\n \n	{fmtDate(tx.created_at)}

\n \n );\n}\n\n// ─── How It Works ─────────────────────────────────────────────────────────────\nfunction HowItWorks() {\n const rules = [\n { icon: \"💰\", title: \"Transaction Amount\", desc: \"Transactions over $2,000 trigger medium risk; over $5,000 trigger high risk signals.\" },\n { icon: \"🌍\", title: \"International Flag\", desc: \"Transactions made from international locations add significant risk points.\" },\n { icon: \"🌙\", title: \"Unusual Hours\", desc: \"Transactions made between midnight and 5am are considered suspicious.\" },\n { icon: \"⚠️\", title: \"High-Risk Categories\", desc: \"Cryptocurrency, gambling, and wire transfer categories are elevated risk.\" },\n { icon: \"🌐\", title: \"Online + International\", desc: \"Card-not-present combined with international location doubles the risk flag.\" },\n ];\n\n const thresholds = [\n { label: \"Approved\", range: \"0 – 39\", color: \"var(--green)\", icon: \"✅\", desc: \"Transaction proceeds normally\" },\n { label: \"Flagged\", range: \"40 – 69\", color: \"var(--yellow)\", icon: \"⚠️\", desc: \"Requires manual review\" },\n { label: \"Blocked\", range: \"70 – 100\", color: \"var(--red)\", icon: \"🚫\", desc: \"Transaction is automatically blocked\" },\n ];\n\n return (\n

🧠 Detection Rules

\n {rules.map((r, i) => (\n

\n {r.icon}\n

{r.title}

{r.desc}

\n ))}\n

📊 Risk Thresholds

\n {thresholds.map((t, i) => (\n

\n {t.icon} {t.label}\n Score: {t.range}\n

{t.desc}

\n ))}\n

\n Risk scores are computed by summing weighted signals. Multiple risk factors compound for higher scores.\n

\n );\n}\n\n// ─── App ───────────────────────────────────────────────────────────────────────\nexport default function App() {\n const [tab, setTab] = useState<\"analyze\" | \"history\" | \"how\">(\"analyze\");\n const [transactions, setTransactions] = useState([]);\n const [stats, setStats] = useState(null);\n\n const fetchData = async () => {\n const [txRes, statsRes] = await Promise.all([\n fetch(\"/api/transactions\"),\n fetch(\"/api/stats\"),\n ]);\n setTransactions(await txRes.json());\n setStats(await statsRes.json());\n };\n\n useEffect(() => { fetchData(); }, []);\n\n const handleClear = async () => {\n if (!confirm(\"Clear all transaction history?\")) return;\n await fetch(\"/api/transactions\", { method: \"DELETE\" });\n fetchData();\n };\n\n return (\n <>\n

\n 🛡️\n

FraudGuard AI

Credit Card Fraud Detection System

\n 🔴 LIVE DETECTION\n

\n\n \n\n \n\n {tab === \"analyze\" && (\n

\n \n

📊 Live Insights

\n {stats && stats.total > 0 ? (\n

Fraud Rate

\n {Math.round(((stats.flagged + stats.blocked) / stats.total) * 100)}%\n

{stats.flagged + stats.blocked} of {stats.total} transactions suspicious

\n {[\n { label: \"Approved\", val: stats.approved, color: \"var(--green)\" },\n { label: \"Flagged\", val: stats.flagged, color: \"var(--yellow)\" },\n { label: \"Blocked\", val: stats.blocked, color: \"var(--red)\" },\n ].map(s => (\n

{s.val}

{s.label}

\n ))}\n

Distribution

\n {stats.total > 0 && (\n <>\n

\n \n )}\n

\n ● Approved\n ● Flagged\n ● Blocked\n

\n ) : (\n

📈

Submit transactions to see insights

\n )}\n

\n )}\n\n {tab === \"history\" && (\n \n )}\n\n {tab === \"how\" && }\n\n \n \n );\n}\n","deleted",false,"label",[57,58,36],"frontend","components","301e2150-30d6-11f1-9318-42dde27851f2","162dff4a-30d6-11f1-9318-42dde27851f2",8,["D",1775383191355],"directory",[57,58],{"_34":87,"_13":57,"_37":60,"_39":-5,"_41":42,"_43":88,"_45":46,"_47":89,"_17":49,"_50":63,"_51":-5,"_53":54,"_55":-5,"_76":90,"_18":91},{"_34":79,"_13":80,"_37":81,"_39":-5,"_41":42,"_43":82,"_45":46,"_47":83,"_17":49,"_50":24,"_51":84,"_53":54,"_55":-5,"_76":85,"_18":86},{"_34":68,"_13":69,"_37":70,"_39":-5,"_41":42,"_43":71,"_45":46,"_47":72,"_17":73,"_50":74,"_51":75,"_53":54,"_55":-5,"_76":77,"_18":78},"45d3d8b8-30d7-11f1-9260-42dde27851f2","main.ts","3bc952b4-30d5-11f1-9621-42dde27851f2",11,["D",1775383657264],3,"http","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Initialize DB\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS transactions (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n amount REAL NOT NULL,\n merchant TEXT NOT NULL,\n category TEXT NOT NULL,\n location TEXT NOT NULL,\n card_last4 TEXT NOT NULL,\n time_of_day TEXT NOT NULL,\n is_international INTEGER NOT NULL DEFAULT 0,\n is_online INTEGER NOT NULL DEFAULT 0,\n risk_score REAL NOT NULL,\n status TEXT NOT NULL,\n flagged_reasons TEXT NOT NULL DEFAULT '[]',\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n`);\n\n// Fraud detection logic\nfunction detectFraud(tx: {\n amount: number;\n category: string;\n timeOfDay: string;\n isInternational: boolean;\n isOnline: boolean;\n}): { riskScore: number; reasons: string[]; status: string } {\n const reasons: string[] = [];\n let riskScore = 0;\n\n if (tx.amount > 5000) { riskScore += 35; reasons.push(\"Unusually high transaction amount (>$5,000)\"); }\n else if (tx.amount > 2000) { riskScore += 20; reasons.push(\"High transaction amount (>$2,000)\"); }\n else if (tx.amount > 1000) { riskScore += 10; }\n\n if (tx.isInternational) { riskScore += 25; reasons.push(\"International transaction detected\"); }\n\n if (tx.timeOfDay === \"midnight\" || tx.timeOfDay === \"latenight\") {\n riskScore += 20;\n reasons.push(\"Transaction at unusual hours (midnight–5am)\");\n }\n\n if ([\"crypto\", \"gambling\", \"wire_transfer\"].includes(tx.category)) {\n riskScore += 25;\n reasons.push(`High-risk merchant category: ${tx.category.replace(\"_\", \" \")}`);\n }\n\n if (tx.isOnline && tx.isInternational) {\n riskScore += 15;\n reasons.push(\"Online purchase from international location\");\n }\n\n const clampedScore = Math.min(riskScore, 100);\n let status = \"approved\";\n if (clampedScore >= 70) status = \"blocked\";\n else if (clampedScore >= 40) status = \"flagged\";\n\n return { riskScore: clampedScore, reasons, status };\n}\n\n// Serve the full HTML page\napp.get(\"/\", (c) => {\n return c.html(`\n\n\n\n\nFraudGuard AI – Credit Card Fraud Detection\n\n\n\n\n\n\n\n

Total

—

Approved

—

Flagged

—

Blocked

—

Avg Risk

—

Volume

—

\n\n\n\n\n

💳 Submit Transaction

\n Amount (USD)\n \n

\n Card Last 4 Digits\n \n

\n Merchant Name\n \n

\n Category\n \n

\n Time of Day\n \n

\n Location\n \n

\n 🌍 International Transaction\n \n

\n 🌐 Online / Card-Not-Present\n \n

\n \n

\n\n

📊 Live Insights

📈

Submit a transaction to see live insights

\n\n\n

\n Recent Transactions\n \n

\n \n \n \n \n \n \n

#	Merchant	Category	Amount	Card	Location	Time	Risk	Status	Date
📭 No transactions yet

\n\n\n

🧠 Detection Rules

💰

Transaction Amount

Transactions over $2,000 trigger medium risk (+20 pts); over $5,000 trigger high risk (+35 pts).

🌍

International Flag

Transactions made from international locations add +25 risk points.

🌙

Unusual Hours

Transactions between midnight and 5am are suspicious (+20 pts).

⚠️

High-Risk Categories

Cryptocurrency, gambling, and wire transfers add +25 pts each.

🌐

Online + International

Card-not-present combined with international adds +15 pts bonus.

📊 Risk Thresholds

✅ ApprovedScore: 0–39

Transaction proceeds normally with no intervention.

⚠️ FlaggedScore: 40–69

Transaction is held for manual review by a fraud analyst.

🚫 BlockedScore: 70–100

Transaction is automatically blocked and cardholder is notified.

\n 💡 Tip: Try submitting a transaction with amount $8,500 + Cryptocurrency + Midnight + International + Online to see a perfect 100/100 risk score blocked!\n

\n\n\n\n\n\n`);\n});\n\n// API: Submit transaction\napp.post(\"/api/transactions\", async (c) => {\n const body = await c.req.json();\n const { amount, merchant, category, location, cardLast4, timeOfDay, isInternational, isOnline } = body;\n\n const { riskScore, reasons, status } = detectFraud({\n amount, category, timeOfDay,\n isInternational: !!isInternational,\n isOnline: !!isOnline,\n });\n\n await sqlite.execute({\n sql: `INSERT INTO transactions (amount, merchant, category, location, card_last4, time_of_day, is_international, is_online, risk_score, status, flagged_reasons)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n amount, merchant, category, location, cardLast4, timeOfDay,\n isInternational ? 1 : 0, isOnline ? 1 : 0,\n riskScore, status, JSON.stringify(reasons),\n ],\n });\n\n return c.json({ riskScore, reasons, status });\n});\n\n// API: Get all transactions\napp.get(\"/api/transactions\", async (c) => {\n const result = await sqlite.execute(\n \"SELECT * FROM transactions ORDER BY created_at DESC LIMIT 100\"\n );\n return c.json(result.rows);\n});\n\n// API: Get stats\napp.get(\"/api/stats\", async (c) => {\n const total = await sqlite.execute(\"SELECT COUNT(*) as count FROM transactions\");\n const flagged = await sqlite.execute(\"SELECT COUNT(*) as count FROM transactions WHERE status = 'flagged'\");\n const blocked = await sqlite.execute(\"SELECT COUNT(*) as count FROM transactions WHERE status = 'blocked'\");\n const approved = await sqlite.execute(\"SELECT COUNT(*) as count FROM transactions WHERE status = 'approved'\");\n const avgRisk = await sqlite.execute(\"SELECT AVG(risk_score) as avg FROM transactions\");\n const totalAmount = await sqlite.execute(\"SELECT SUM(amount) as total FROM transactions\");\n\n return c.json({\n total: total.rows[0]?.count ?? 0,\n flagged: flagged.rows[0]?.count ?? 0,\n blocked: blocked.rows[0]?.count ?? 0,\n approved: approved.rows[0]?.count ?? 0,\n avgRiskScore: Math.round((avgRisk.rows[0]?.avg as number) ?? 0),\n totalAmount: Math.round((totalAmount.rows[0]?.total as number) ?? 0),\n });\n});\n\n// API: Clear all transactions\napp.delete(\"/api/transactions\", async (c) => {\n await sqlite.execute(\"DELETE FROM transactions\");\n return c.json({ success: true });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[69],"68ec0362-30d6-11f1-898a-42dde27851f2","README.md","68ec040c-30d6-11f1-898a-42dde27851f2",10,["D",1775383286655],"# 🛡️ FraudGuard AI — Credit Card Fraud Detection\n\nA real-time credit card fraud detection web app built with React, Hono, and SQLite on Val Town.\n\n## 🔗 Live Demo\nDeployed on Val Town — see the endpoint URL in the val's HTTP file.\n\n## 🏗️ Architecture\n\n```mermaid\ngraph TD\n User[\"👤 User / Browser\"] -->|Submit Transaction| FE[\"⚛️ React Frontend\"]\n FE -->|POST /api/transactions| API[\"🔀 Hono Backend (main.ts)\"]\n API -->|Run Rules Engine| Engine[\"🧠 Fraud Detector\"]\n Engine -->|Score + Verdict| API\n API -->|Store Result| DB[\"🗄️ SQLite (std/sqlite)\"]\n API -->|Return JSON| FE\n FE -->|GET /api/stats| API\n API -->|Aggregate Counts| DB\n```\n\n## 🧠 Detection Rules\n\n| Rule | Risk Points |\n|---|---|\n| Amount > $5,000 | +35 |\n| Amount > $2,000 | +20 |\n| International transaction | +25 |\n| Late-night / midnight hours | +20 |\n| High-risk category (crypto, gambling, wire) | +25 |\n| Online + international combo | +15 |\n\n## 🚦 Risk Thresholds\n\n| Score | Status | Action |\n|---|---|---|\n| 0–39 | ✅ Approved | Proceeds normally |\n| 40–69 | ⚠️ Flagged | Requires manual review |\n| 70–100 | 🚫 Blocked | Automatically blocked |\n\n## 📁 File Structure\n\n```\nmain.ts ← Hono HTTP server + fraud detection logic + SQLite\nfrontend/\n index.html ← HTML entry point\n index.tsx ← React entry point\n style.css ← Dark theme UI styles\n components/\n App.tsx ← Full React app (form, stats, table, charts)\nREADME.md\n```\n\n## 🛠️ Tech Stack\n\n- **Backend**: Hono (TypeScript)\n- **Frontend**: React 18 (client-side)\n- **Database**: Val Town SQLite (`std/sqlite`)\n- **Runtime**: Deno on Val Town\n",[],[80],"162dfe78-30d6-11f1-9318-42dde27851f2",4,["D",1775383147837],[92,93,94,95],[57],{"_34":59,"_13":58,"_37":40,"_39":60,"_41":42,"_43":61,"_45":46,"_47":120,"_17":49,"_50":63,"_51":-5,"_53":54,"_55":-5,"_76":121,"_18":122},{"_34":112,"_13":113,"_37":114,"_39":60,"_41":42,"_43":115,"_45":46,"_47":116,"_17":49,"_50":24,"_51":117,"_53":54,"_55":-5,"_76":118,"_18":119},{"_34":104,"_13":105,"_37":106,"_39":60,"_41":42,"_43":107,"_45":46,"_47":108,"_17":49,"_50":24,"_51":109,"_53":54,"_55":-5,"_76":110,"_18":111},{"_34":96,"_13":97,"_37":98,"_39":60,"_41":42,"_43":99,"_45":46,"_47":100,"_17":49,"_50":24,"_51":101,"_53":54,"_55":-5,"_76":102,"_18":103},"2cf7e218-30d6-11f1-ba75-42dde27851f2","style.css","2cf7e2b8-30d6-11f1-ba75-42dde27851f2",6,["D",1775383186070],"@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --bg: #0a0e1a;\n --surface: #111827;\n --surface2: #1a2235;\n --border: #1f2d45;\n --accent: #3b82f6;\n --accent2: #6366f1;\n --green: #10b981;\n --yellow: #f59e0b;\n --red: #ef4444;\n --text: #f1f5f9;\n --muted: #64748b;\n --radius: 12px;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n}\n\n/* ── Header ── */\n.header {\n background: linear-gradient(135deg, #0f1629 0%, #1a1040 50%, #0f1629 100%);\n border-bottom: 1px solid var(--border);\n padding: 1.25rem 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.header-brand { display: flex; align-items: center; gap: .75rem; }\n.header-logo { font-size: 1.6rem; }\n.header-title { font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n.header-sub { font-size: .75rem; color: var(--muted); font-weight: 400; }\n.header-badge { background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.3); color: #60a5fa; padding: .3rem .8rem; border-radius: 9999px; font-size: .7rem; font-weight: 600; letter-spacing: .05em; }\n\n/* ── Layout ── */\n.layout { display: grid; grid-template-columns: 420px 1fr; gap: 1.5rem; padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }\n@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }\n\n/* ── Nav Tabs ── */\n.tabs { display: flex; gap: .5rem; padding: 0 2rem; border-bottom: 1px solid var(--border); background: var(--surface); }\n.tab-btn { padding: .85rem 1.25rem; background: none; border: none; color: var(--muted); font-family: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; }\n.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }\n.tab-btn:hover:not(.active) { color: var(--text); }\n\n/* ── Cards ── */\n.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }\n.card-title { font-size: .875rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; }\n\n/* ── Stats Grid ── */\n.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }\n@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }\n.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem; }\n.stat-card.green { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.05); }\n.stat-card.yellow { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.05); }\n.stat-card.red { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.05); }\n.stat-card.blue { border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.05); }\n.stat-label { font-size: .75rem; color: var(--muted); font-weight: 500; }\n.stat-value { font-size: 1.75rem; font-weight: 800; }\n.stat-card.green .stat-value { color: var(--green); }\n.stat-card.yellow .stat-value { color: var(--yellow); }\n.stat-card.red .stat-value { color: var(--red); }\n.stat-card.blue .stat-value { color: #60a5fa; }\n\n/* ── Form ── */\n.form-group { margin-bottom: 1rem; }\n.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }\nlabel { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); margin-bottom: .35rem; }\ninput, select {\n width: 100%; padding: .6rem .85rem;\n background: var(--surface2); border: 1px solid var(--border);\n color: var(--text); border-radius: 8px; font-family: inherit; font-size: .875rem;\n outline: none; transition: border-color .2s;\n}\ninput:focus, select:focus { border-color: var(--accent); }\nselect option { background: var(--surface); }\n\n.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; }\n.toggle-label { font-size: .875rem; color: var(--text); }\n.toggle { position: relative; width: 44px; height: 24px; cursor: pointer; }\n.toggle input { opacity: 0; width: 0; height: 0; }\n.toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 9999px; transition: .3s; }\n.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: .3s; }\n.toggle input:checked + .toggle-slider { background: var(--accent); }\n.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }\n\n.submit-btn {\n width: 100%; padding: .85rem; border: none; border-radius: 8px;\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n color: white; font-family: inherit; font-size: .95rem; font-weight: 600;\n cursor: pointer; transition: opacity .2s; margin-top: .5rem;\n}\n.submit-btn:hover { opacity: .9; }\n.submit-btn:disabled { opacity: .5; cursor: not-allowed; }\n\n/* ── Result Box ── */\n.result-box { margin-top: 1.25rem; border-radius: 10px; padding: 1.25rem; border: 1px solid; }\n.result-box.approved { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); }\n.result-box.flagged { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.08); }\n.result-box.blocked { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }\n.result-status { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }\n.result-icon { font-size: 1.75rem; }\n.result-label { font-size: 1.1rem; font-weight: 700; }\n.result-box.approved .result-label { color: var(--green); }\n.result-box.flagged .result-label { color: var(--yellow); }\n.result-box.blocked .result-label { color: var(--red); }\n.result-score { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; }\n.risk-bar-wrap { background: var(--border); border-radius: 9999px; height: 8px; margin-bottom: 1rem; overflow: hidden; }\n.risk-bar { height: 100%; border-radius: 9999px; transition: width .8s ease; }\n.risk-bar.low { background: var(--green); }\n.risk-bar.medium { background: var(--yellow); }\n.risk-bar.high { background: var(--red); }\n.reasons-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; }\n.reasons-list li { font-size: .82rem; color: var(--text); display: flex; align-items: flex-start; gap: .5rem; }\n.reasons-list li::before { content: '⚠'; font-size: .75rem; flex-shrink: 0; margin-top: .1rem; }\n\n/* ── Transactions Table ── */\n.table-wrap { overflow-x: auto; }\ntable { width: 100%; border-collapse: collapse; font-size: .83rem; }\nthead tr { border-bottom: 1px solid var(--border); }\nth { text-align: left; padding: .65rem 1rem; color: var(--muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }\ntd { padding: .65rem 1rem; border-bottom: 1px solid rgba(31,45,69,.5); vertical-align: middle; }\ntr:hover td { background: rgba(255,255,255,.02); }\n.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; }\n.badge.approved { background: rgba(16,185,129,.15); color: var(--green); }\n.badge.flagged { background: rgba(245,158,11,.15); color: var(--yellow); }\n.badge.blocked { background: rgba(239,68,68,.15); color: var(--red); }\n\n/* ── Risk Gauge ── */\n.gauge-wrap { display: flex; flex-direction: column; align-items: center; padding: 1rem 0; }\n.gauge-circle { position: relative; width: 120px; height: 120px; }\n.gauge-circle svg { transform: rotate(-90deg); }\n.gauge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }\n.gauge-num { font-size: 1.8rem; font-weight: 800; }\n.gauge-sub { font-size: .65rem; color: var(--muted); }\n\n/* ── Empty State ── */\n.empty-state { text-align: center; padding: 3rem; color: var(--muted); }\n.empty-state .icon { font-size: 3rem; margin-bottom: .75rem; }\n\n/* ── Misc ── */\n.section-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1400px; margin: 0 auto .5rem; }\n.section-title { font-size: 1rem; font-weight: 700; }\n.clear-btn { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: var(--red); padding: .4rem .9rem; border-radius: 8px; font-family: inherit; font-size: .8rem; cursor: pointer; transition: all .2s; }\n.clear-btn:hover { background: rgba(239,68,68,.2); }\n.footer { text-align: center; padding: 2rem; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--border); margin-top: 2rem; }\n.footer a { color: var(--accent); text-decoration: none; }\n.loading { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .6s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n",[],[57,97],"2f293db6-30d6-11f1-9318-42dde27851f2","index.tsx","2f293e6a-30d6-11f1-9318-42dde27851f2",7,["D",1775383189750],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[57,105],"183fdcfe-30d6-11f1-9318-42dde27851f2","index.html","183fddc6-30d6-11f1-9318-42dde27851f2",5,["D",1775383151309],"\n\n\n \n \n Credit Card Fraud Detection\n \n \n\n\n

\n \n\n\n",[],[57,113],["D",1775383191355],[123],[57,58],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":124,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_76":125,"_18":126},["D",1775383264624],[],[57,58,36],"3bc686ce-30d5-11f1-9621-42dde27851f2",["D",1775382781422],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","019d5d0e-abc4-71b9-8cf7-363857f7a442","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019d5d0e-abc4-71b9-8cf7-3a926e3b1ace","tursoName","3bc686ce30d511f1962142dde27851f2","tursoHostname","3bc686ce30d511f1962142dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789582870062],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_182":178},"org",{"_11":12,"_176":-5,"_177":178,"_136":137,"_179":180,"_181":54},"branch",{"_17":71,"_13":16,"_34":42,"_168":127,"_169":-5,"_170":-5,"_171":-5,"_172":-5,"_173":-5,"_174":14,"_175":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zQnZ3QzV2SjQxQWU5TVlXNWFMVDdza2JUT0oifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":127,"_13":14,"_47":239,"_129":-5,"_130":54,"_131":132,"_133":132,"_134":-5,"_135":-5,"_136":137,"_138":-5,"_139":54,"_140":-5,"_141":-5,"_142":49,"_143":144,"_145":146,"_147":148,"_149":240,"_151":-5,"_152":153,"_154":153,"_155":156,"_157":156,"_158":156,"_159":153,"_160":153,"_161":241,"_163":242,"_165":243,"_167":54},[215,221,222],"files",[215,216,217,218,219,220,221,222],"counts",{"_205":49,"_206":207,"_208":49,"_32":209,"_210":211},[203],{"_34":59,"_13":58,"_37":40,"_39":60,"_41":42,"_43":61,"_45":46,"_47":62,"_17":49,"_50":63,"_51":-5,"_53":54,"_55":-5,"_18":202},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[57,58],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":204},[57,58,36],"pulls","branches",1,"forks",{"_212":49,"_214":49},"connections",{"_212":49,"_213":49},"count","unfilledCount","emptyCount",{"_34":87,"_13":57,"_37":60,"_39":-5,"_41":42,"_43":88,"_45":46,"_47":89,"_17":49,"_50":63,"_51":-5,"_53":54,"_55":-5,"_76":237,"_18":238},{"_34":59,"_13":58,"_37":40,"_39":60,"_41":42,"_43":61,"_45":46,"_47":120,"_17":49,"_50":63,"_51":-5,"_53":54,"_55":-5,"_76":235,"_18":236},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":124,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_76":233,"_18":234},{"_34":112,"_13":113,"_37":114,"_39":60,"_41":42,"_43":115,"_45":46,"_47":116,"_17":49,"_50":24,"_51":117,"_53":54,"_55":-5,"_76":231,"_18":232},{"_34":104,"_13":105,"_37":106,"_39":60,"_41":42,"_43":107,"_45":46,"_47":108,"_17":49,"_50":24,"_51":109,"_53":54,"_55":-5,"_76":229,"_18":230},{"_34":96,"_13":97,"_37":98,"_39":60,"_41":42,"_43":99,"_45":46,"_47":100,"_17":49,"_50":24,"_51":101,"_53":54,"_55":-5,"_76":227,"_18":228},{"_34":79,"_13":80,"_37":81,"_39":-5,"_41":42,"_43":82,"_45":46,"_47":83,"_17":49,"_50":24,"_51":84,"_53":54,"_55":-5,"_76":225,"_18":226},{"_34":68,"_13":69,"_37":70,"_39":-5,"_41":42,"_43":71,"_45":46,"_47":72,"_17":73,"_50":74,"_51":75,"_53":54,"_55":-5,"_76":223,"_18":224},[],[69],[],[80],[],[57,97],[],[57,105],[],[57,113],[],[57,58,36],[217],[57,58],[216,218,219,220],[57],["D",1775382781422],["D",1789582870062],{"_11":12,"_182":178},{"_11":12,"_176":-5,"_177":178,"_136":137,"_179":180,"_181":54},{"_17":71,"_13":16,"_34":42,"_168":127,"_169":-5,"_170":-5,"_171":-5,"_172":-5,"_173":-5,"_174":14,"_175":12},"ctx",{"_161":-5,"_199":277,"_278":279,"_280":281,"_282":54,"_283":54,"_284":54,"_285":46,"_286":-5,"_287":-7,"_288":-7,"_289":49,"_290":54,"_291":54,"_292":-5,"_293":54,"_294":54,"_295":54,"_296":-5},"ENV",{"_248":249,"_250":251,"_252":16,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]