import React, { useState } from 'react'; import './App.css'; const App = () => { const [payments, setPayments] = useState([]); const [amountPaid, setAmountPaid] = useState(''); const [amountRemaining, setAmountRemaining] = useState(''); const handlePaymentSubmit = (e) => { e.preventDefault(); if (amountPaid && amountRemaining) { const newPayment = { id: Date.now(), amountPaid, amountRemaining, date: new Date().toLocaleDateString() }; setPayments([...payments, newPayment]); setAmountPaid(''); setAmountRemaining(''); } }; return ( <div className='App'> <header className='bg-blue-600 text-white p-4'> <h1 className='text-2xl'>Daily Payment Manager</h1> </header> <main className='p-4'> <form onSubmit={handlePaymentSubmit} className='mb-4'> <div className='grid grid-cols-2 gap-4'> <input type='number' value={amountPaid} onChange={(e) => setAmountPaid(e.target.value)} placeholder='Amount Paid' className='p-2 border rounded' /> <input type='number' value={amountRemaining} onChange={(e) => setAmountRemaining(e.target.value)} placeholder='Amount Remaining' className='p-2 border rounded' /> </div> <button type='submit' className='mt-2 bg-blue-500 text-white p-2 rounded'>Add Payment</button> </form> <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'> {payments.map(payment => ( <div key={payment.id} className='p-4 border rounded'> <h3 className='text-lg font-semibold'>{payment.date}</h3> <p>Amount Paid: ${payment.amountPaid}</p> <p>Amount Remaining: ${payment.amountRemaining}</p> </div> ))} </div> </main> <footer className='bg-gray-800 text-white p-4 text-center'> <p>© 2025 Payment System. All rights reserved.</p> </footer> </div> ); }; export default App;