FraudGuard AI – Credit Card Fraud Detection

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_249":250,"_251":252},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_186":-5,"_20":187,"_22":188,"_189":190,"_191":192,"_25":193,"_24":-5,"_194":-5,"_195":-5,"_196":55,"_197":198,"_199":46,"_200":-5,"_201":-5,"_202":203},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","Rubasri","name","credit-card-fraud-detection","branchName","main","version","path","","project",{"_35":130,"_13":14,"_47":131,"_132":-5,"_133":55,"_134":135,"_136":135,"_137":-5,"_138":-5,"_139":140,"_141":-5,"_142":55,"_143":-5,"_144":-5,"_145":63,"_146":147,"_148":149,"_150":151,"_152":153,"_154":-5,"_155":156,"_157":156,"_158":159,"_160":159,"_161":159,"_162":156,"_163":156,"_164":165,"_166":167,"_168":169,"_170":55},"tree",[73,74,75],"file","contents",[32,33,34],"upstream","pull","ahead","behind","envVars",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":63,"_50":71,"_52":-5,"_54":55,"_56":-5,"_18":72},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_18":65},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","45d3d8b8-30d7-11f1-9260-42dde27851f2","main.ts","fileId","3bc952b4-30d5-11f1-9621-42dde27851f2","parentId","branchId","3bc73484-30d5-11f1-9621-42dde27851f2","branchVersion",11,"latest",true,"createdAt",["D",1775383657264],3,"fileType","http","content","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","deleted",false,"label",[37],"68ec0362-30d6-11f1-898a-42dde27851f2","README.md","68ec040c-30d6-11f1-898a-42dde27851f2",10,["D",1775383286655],0,"# 🛡️ 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",[59],"162dfe78-30d6-11f1-9318-42dde27851f2","frontend","162dff4a-30d6-11f1-9318-42dde27851f2",4,["D",1775383147837],"directory",[67],{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":83,"_17":63,"_50":71,"_52":-5,"_54":55,"_56":-5,"_77":84,"_18":85},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":80,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_77":81,"_18":82},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":76,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_77":78,"_18":79},["D",1775383657264],"children",[],[37],["D",1775383286655],[],[59],["D",1775383147837],[86,87,88,89],[67],{"_35":114,"_13":115,"_38":116,"_40":68,"_41":42,"_43":117,"_45":46,"_47":118,"_17":63,"_50":71,"_52":-5,"_54":55,"_56":-5,"_77":119,"_18":120},{"_35":106,"_13":107,"_38":108,"_40":68,"_41":42,"_43":109,"_45":46,"_47":110,"_17":63,"_50":24,"_52":111,"_54":55,"_56":-5,"_77":112,"_18":113},{"_35":98,"_13":99,"_38":100,"_40":68,"_41":42,"_43":101,"_45":46,"_47":102,"_17":63,"_50":24,"_52":103,"_54":55,"_56":-5,"_77":104,"_18":105},{"_35":90,"_13":91,"_38":92,"_40":68,"_41":42,"_43":93,"_45":46,"_47":94,"_17":63,"_50":24,"_52":95,"_54":55,"_56":-5,"_77":96,"_18":97},"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",[],[67,91],"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",[],[67,99],"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",[],[67,107],"301e2150-30d6-11f1-9318-42dde27851f2","components","301e2222-30d6-11f1-9318-42dde27851f2",8,["D",1775383191355],[121],[67,115],{"_35":122,"_13":123,"_38":124,"_40":116,"_41":42,"_43":125,"_45":46,"_47":126,"_17":63,"_50":24,"_52":127,"_54":55,"_56":-5,"_77":128,"_18":129},"5bca176e-30d6-11f1-ba75-42dde27851f2","App.tsx","5bca1818-30d6-11f1-ba75-42dde27851f2",9,["D",1775383264624],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\n// ─── Types ───────────────────────────────────────────────────────────────────\ninterface Transaction {\n id: number;\n amount: number;\n merchant: string;\n category: string;\n location: string;\n card_last4: string;\n time_of_day: string;\n is_international: number;\n is_online: number;\n risk_score: number;\n status: string;\n flagged_reasons: string;\n created_at: string;\n}\n\ninterface Stats {\n total: number;\n approved: number;\n flagged: number;\n blocked: number;\n avgRiskScore: number;\n totalAmount: number;\n}\n\ninterface AnalysisResult {\n riskScore: number;\n reasons: string[];\n status: \"approved\" | \"flagged\" | \"blocked\";\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\nconst statusIcon = (s: string) => s === \"approved\" ? \"✅\" : s === \"flagged\" ? \"⚠️\" : \"🚫\";\nconst statusLabel = (s: string) => s === \"approved\" ? \"Approved\" : s === \"flagged\" ? \"Flagged for Review\" : \"Blocked\";\nconst riskClass = (score: number) => score >= 70 ? \"high\" : score >= 40 ? \"medium\" : \"low\";\nconst fmtAmt = (n: number) => \"$\" + n.toLocaleString(\"en-US\", { minimumFractionDigits: 2, maximumFractionDigits: 2 });\nconst fmtDate = (s: string) => new Date(s).toLocaleString();\n\nconst CATEGORIES = [\n { value: \"retail\", label: \"🛍️ Retail\" },\n { value: \"food\", label: \"🍔 Food & Dining\" },\n { value: \"travel\", label: \"✈️ Travel\" },\n { value: \"entertainment\", label: \"🎭 Entertainment\" },\n { value: \"health\", label: \"🏥 Health & Medical\" },\n { value: \"crypto\", label: \"₿ Cryptocurrency\" },\n { value: \"gambling\", label: \"🎲 Gambling\" },\n { value: \"wire_transfer\", label: \"💸 Wire Transfer\" },\n { value: \"utilities\", label: \"💡 Utilities\" },\n { value: \"electronics\", label: \"💻 Electronics\" },\n];\n\nconst TIME_SLOTS = [\n { value: \"morning\", label: \"🌅 Morning (6am–12pm)\" },\n { value: \"afternoon\", label: \"☀️ Afternoon (12pm–6pm)\" },\n { value: \"evening\", label: \"🌆 Evening (6pm–12am)\" },\n { value: \"latenight\", label: \"🌙 Late Night (12am–3am)\" },\n { value: \"midnight\", label: \"🌑 Midnight (3am–6am)\" },\n];\n\n// ─── Risk Gauge ───────────────────────────────────────────────────────────────\nfunction RiskGauge({ score }: { score: number }) {\n const r = 50, circ = 2 * Math.PI * r;\n const dashoffset = circ - (score / 100) * circ;\n const color = score >= 70 ? \"#ef4444\" : score >= 40 ? \"#f59e0b\" : \"#10b981\";\n return (\n

\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",[],[67,115,123],"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",1789495880338],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_185":181},"org",{"_11":12,"_179":-5,"_180":181,"_139":140,"_182":183,"_184":55},"branch",{"_17":44,"_13":16,"_35":42,"_171":130,"_172":-5,"_173":-5,"_174":-5,"_175":-5,"_176":-5,"_177":14,"_178":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zQnZ3QzV2SjQxQWU5TVlXNWFMVDdza2JUT0oifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":130,"_13":14,"_47":244,"_132":-5,"_133":55,"_134":135,"_136":135,"_137":-5,"_138":-5,"_139":140,"_141":-5,"_142":55,"_143":-5,"_144":-5,"_145":63,"_146":147,"_148":149,"_150":151,"_152":245,"_154":-5,"_155":156,"_157":156,"_158":159,"_160":159,"_161":159,"_162":156,"_163":156,"_164":246,"_166":247,"_168":248,"_170":55},[220,226,227],"files",[220,221,222,223,224,225,226,227],"counts",{"_210":63,"_211":212,"_213":63,"_31":214,"_215":216},[204,205,206],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":63,"_50":71,"_52":-5,"_54":55,"_56":-5,"_18":209},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_18":208},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":207},[37],[59],[67],"pulls","branches",1,"forks",{"_217":63,"_219":63},"connections",{"_217":63,"_218":63},"count","unfilledCount","emptyCount",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":83,"_17":63,"_50":71,"_52":-5,"_54":55,"_56":-5,"_77":242,"_18":243},{"_35":114,"_13":115,"_38":116,"_40":68,"_41":42,"_43":117,"_45":46,"_47":118,"_17":63,"_50":71,"_52":-5,"_54":55,"_56":-5,"_77":240,"_18":241},{"_35":122,"_13":123,"_38":124,"_40":116,"_41":42,"_43":125,"_45":46,"_47":126,"_17":63,"_50":24,"_52":127,"_54":55,"_56":-5,"_77":238,"_18":239},{"_35":106,"_13":107,"_38":108,"_40":68,"_41":42,"_43":109,"_45":46,"_47":110,"_17":63,"_50":24,"_52":111,"_54":55,"_56":-5,"_77":236,"_18":237},{"_35":98,"_13":99,"_38":100,"_40":68,"_41":42,"_43":101,"_45":46,"_47":102,"_17":63,"_50":24,"_52":103,"_54":55,"_56":-5,"_77":234,"_18":235},{"_35":90,"_13":91,"_38":92,"_40":68,"_41":42,"_43":93,"_45":46,"_47":94,"_17":63,"_50":24,"_52":95,"_54":55,"_56":-5,"_77":232,"_18":233},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":80,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_77":230,"_18":231},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":76,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_77":228,"_18":229},[],[37],[],[59],[],[67,91],[],[67,99],[],[67,107],[],[67,115,123],[222],[67,115],[221,223,224,225],[67],["D",1775382781422],["D",1789495880338],{"_11":12,"_185":181},{"_11":12,"_179":-5,"_180":181,"_139":140,"_182":183,"_184":55},{"_17":44,"_13":16,"_35":42,"_171":130,"_172":-5,"_173":-5,"_174":-5,"_175":-5,"_176":-5,"_177":14,"_178":12},"ctx",{"_164":-5,"_201":282,"_283":284,"_285":286,"_287":55,"_288":55,"_289":55,"_290":46,"_291":-5,"_292":-7,"_293":-7,"_294":63,"_295":55,"_296":55,"_297":-5,"_298":55,"_299":55,"_300":55,"_301":-5},"ENV",{"_253":254,"_255":256,"_257":16,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code