```typescript import React from "react"; export default function App() { const [balance, setBalance] = React.useState(1000); const [transactionAmount, setTransactionAmount] = React.useState(""); const [transactions, setTransactions] = React.useState<{ id: number; amount: number; type: string }[]>([]); const [accountHolder, setAccountHolder] = React.useState(""); const [transactionsFilter, setTransactionsFilter] = React.useState("all"); const handleTransaction = (amount: number, type: string) => { const newBalance = balance + amount; setBalance(newBalance); setTransactions([...transactions, { id: transactions.length + 1, amount, type }]); }; const handleDeposit = () => { const amount = parseFloat(transactionAmount); if (!isNaN(amount) && amount > 0) { handleTransaction(amount, "Deposit"); setTransactionAmount(""); } }; const handleWithdraw = () => { const amount = parseFloat(transactionAmount); if (!isNaN(amount) && amount > 0 && amount <= balance) { handleTransaction(-amount, "Withdraw"); setTransactionAmount(""); } }; const filteredTransactions = transactionsFilter === "all" ? transactions : transactions.filter(t => t.type === transactionsFilter); return (

Banking SaaS Platform

Welcome, {accountHolder || "User"}

Balance: ${balance.toFixed(2)}

setAccountHolder(e.target.value)} className="mt-4 p-2 border rounded w-full" placeholder="Enter Account Holder Name" /> setTransactionAmount(e.target.value)} className="mt-4 p-2 border rounded w-full" placeholder="Enter amount" />

Filter Transactions:

Transactions:

0 ? 'text-green-600' : 'text-red-600'}`}> {transaction.type}: ${Math.abs(transaction.amount).toFixed(2)}
No transactions found.

); } ```