FraudGuard AI – Credit Card Fraud Detection

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","label",[112],"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",[129],"162dfe78-30d6-11f1-9318-42dde27851f2","frontend","162dff4a-30d6-11f1-9318-42dde27851f2",4,["D",1775383147837],"directory",[136],"pulls","branches",1,"forks","envVars",{"_150":39,"_152":39},"connections",{"_150":39,"_151":39},"count","unfilledCount","emptyCount",{"_18":135,"_20":136,"_113":137,"_115":-5,"_116":68,"_117":138,"_118":103,"_22":207,"_65":39,"_121":140,"_123":-5,"_125":26,"_126":-5,"_162":208,"_85":209},{"_18":202,"_20":201,"_113":195,"_115":137,"_116":68,"_117":203,"_118":103,"_22":204,"_65":39,"_121":140,"_123":-5,"_125":26,"_126":-5,"_162":205,"_85":206},{"_18":192,"_20":193,"_113":194,"_115":195,"_116":68,"_117":196,"_118":103,"_22":197,"_65":39,"_121":96,"_123":198,"_125":26,"_126":-5,"_162":199,"_85":200},{"_18":184,"_20":185,"_113":186,"_115":137,"_116":68,"_117":187,"_118":103,"_22":188,"_65":39,"_121":96,"_123":189,"_125":26,"_126":-5,"_162":190,"_85":191},{"_18":176,"_20":177,"_113":178,"_115":137,"_116":68,"_117":179,"_118":103,"_22":180,"_65":39,"_121":96,"_123":181,"_125":26,"_126":-5,"_162":182,"_85":183},{"_18":168,"_20":169,"_113":170,"_115":137,"_116":68,"_117":171,"_118":103,"_22":172,"_65":39,"_121":96,"_123":173,"_125":26,"_126":-5,"_162":174,"_85":175},{"_18":128,"_20":129,"_113":130,"_115":-5,"_116":68,"_117":131,"_118":103,"_22":165,"_65":39,"_121":96,"_123":133,"_125":26,"_126":-5,"_162":166,"_85":167},{"_18":111,"_20":112,"_113":114,"_115":-5,"_116":68,"_117":66,"_118":103,"_22":161,"_65":120,"_121":122,"_123":124,"_125":26,"_126":-5,"_162":163,"_85":164},["D",1775383657264],"children",[],[112],["D",1775383286655],[],[129],"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",[],[136,169],"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",[],[136,177],"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",[],[136,185],"5bca176e-30d6-11f1-ba75-42dde27851f2","App.tsx","5bca1818-30d6-11f1-ba75-42dde27851f2","301e2222-30d6-11f1-9318-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",[],[136,201,193],"components","301e2150-30d6-11f1-9318-42dde27851f2",8,["D",1775383191355],[155],[136,201],["D",1775383147837],[154,156,157,158],[136],["D",1775382781422],["D",1789495880338],{"_16":17,"_83":79},{"_16":17,"_77":-5,"_78":79,"_32":33,"_80":81,"_82":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":21,"_76":17},"ctx",{"_58":-5,"_105":248,"_249":250,"_251":252,"_253":26,"_254":26,"_255":26,"_256":103,"_257":-5,"_258":-7,"_259":-7,"_260":39,"_261":26,"_262":26,"_263":-5,"_264":26,"_265":26,"_266":26,"_267":-5},"ENV",{"_219":220,"_221":222,"_223":67,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247},"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"]

Search