\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","label",[180,181,163],"frontend","components","permalink","https://www.val.town/x/Rubasri/credit-card-fraud-detection/code/frontend/components/App.tsx","extension","tsx","actionData","errors"]