Untitled

import React, { useState, useEffect } from 'react';

// Main App component
const App = () => {
  // State for the user's balance
  const [balance, setBalance] = useState(1000.00); // Initial simulated balance

  // State for transaction history
  const [transactions, setTransactions] = useState([
    { id: 1, type: 'Deposit', amount: 500.00, date: '2025-08-20' },
    { id: 2, type: 'Withdrawal', amount: 150.00, date: '2025-08-22' },
    { id: 3, type: 'Deposit', amount: 650.00, date: '2025-08-25' },
  ]);

  // State for the deposit amount input
  const [depositAmount, setDepositAmount] = useState('');

  // Function to simulate a deposit
  const handleDeposit = () => {
    const amount = parseFloat(depositAmount);
    if (isNaN(amount) || amount <= 0) {
      alert('Please enter a valid positive amount to deposit.'); // Using alert for simplicity, but a custom modal is better for real apps.
      return;
    }

    // Update balance
    setBalance(prevBalance => prevBalance + amount);

    // Add new transaction
    setTransactions(prevTransactions => [
      {
        id: prevTransactions.length + 1,
        type: 'Deposit',
        amount: amount,
        date: new Date().toISOString().slice(0, 10), // Current date
      },
      ...prevTransactions, // Add new transactions to the top
    ]);

    // Clear the input field
    setDepositAmount('');
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4 font-sans antialiased">
      <div className="bg-white rounded-xl shadow-lg p-6 md:p-8 w-full max-w-4xl">
        {/* Header */}
        <h1 className="text-4xl font-bold text-gray-800 mb-6 text-center">
          💰 My Financial Dashboard
        </h1>

        {/* Balance Section */}
        <div className="bg-gradient-to-r from-blue-500 to-indigo-600 text-white p-6 rounded-lg shadow-md mb-8 flex flex-col md:flex-row justify-between items-center">
          <div>
            <p className="text-lg opacity-80 mb-1">Current Balance</p>
            <p className="text-5xl font-extrabold">
              ${balance.toLocaleString('en-US', { minimumFractionDigits: 2 })}
            </p>
          </div>
          <div className="mt-4 md:mt-0 md:ml-4 flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
            <input
              type="number"
              placeholder="Amount to deposit"
              value={depositAmount}
              onChange={(e) => setDepositAmount(e.target.value)}
              className="px-4 py-2 rounded-lg border border-gray-300 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 w-full sm:w-auto"
            />
            <button
              onClick={handleDeposit}
              className="bg-white text-blue-600 font-semibold px-6 py-2 rounded-lg shadow hover:bg-gray-100 transition-colors duration-200 w-full sm:w-auto"
            >
              Deposit Funds
            </button>
          </div>
        </div>

        {/* Transaction History Section */}
        <div className="bg-gray-50 p-6 rounded-lg shadow-md">
          <h2 className="text-2xl font-bold text-gray-700 mb-4">Transaction History</h2>
          {transactions.length === 0 ? (
            <p className="text-gray-600">No transactions yet.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full bg-white rounded-lg overflow-hidden">
                <thead className="bg-gray-200">
                  <tr>
                    <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Date</th>
                    <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Type</th>
                    <th className="py-3 px-4 text-left text-sm font-semibold text-gray-600">Amount</th>
                  </tr>
                </thead>
                <tbody>
                  {transactions.map((transaction) => (
                    <tr key={transaction.id} className="border-b last:border-b-0 hover:bg-gray-50">
                      <td className="py-3 px-4 text-gray-800">{transaction.date}</td>
                      <td className="py-3 px-4 text-gray-800">{transaction.type}</td>
                      <td
                        className={`py-3 px-4 font-medium ${
                          transaction.type === 'Deposit' ? 'text-green-600' : 'text-red-600'
                        }`}
                      >
                        {transaction.type === 'Deposit' ? '+' : '-'}
                        ${transaction.amount.toLocaleString('en-US', { minimumFractionDigits: 2 })}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default App;