Gestion des paiements quotidiens

import React, { useState } from 'react';

const App = () => {
  const [payments, setPayments] = useState([]);
  const [amountPaid, setAmountPaid] = useState('');
  const [remainingAmount, setRemainingAmount] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const newPayment = {
      amountPaid: parseFloat(amountPaid),
      remainingAmount: parseFloat(remainingAmount),
      date: new Date().toLocaleDateString(),
    };
    setPayments([...payments, newPayment]);
    setAmountPaid('');
    setRemainingAmount('');
  };

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <h1 className="text-4xl font-bold text-center text-blue-600 mb-8">Daily Payment System</h1>
      <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-lg">
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Amount Paid</label>
            <input
              type="number"
              value={amountPaid}
              onChange={(e) => setAmountPaid(e.target.value)}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Remaining Amount</label>
            <input
              type="number"
              value={remainingAmount}
              onChange={(e) => setRemainingAmount(e.target.value)}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              required
            />
          </div>
          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          >
            Add Payment
          </button>
        </form>
        <div className="mt-8">
          <h2 className="text-2xl font-semibold text-gray-800 mb-4">Payment History</h2>
          {payments.length > 0 ? (
            <ul className="space-y-4">
              {payments.map((payment, index) => (
                <li key={index} className="bg-gray-50 p-4 rounded-lg shadow-sm">
                  <div className="flex justify-between">
                    <span className="text-gray-600">Date: {payment.date}</span>
                    <span className="text-green-600">Paid: ${payment.amountPaid}</span>
                    <span className="text-red-600">Remaining: ${payment.remainingAmount}</span>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-gray-500">No payments recorded yet.</p>
          )}
        </div>
      </div>
      <footer className="mt-8 text-center text-gray-500">
        © 2025 Payment System. All rights reserved.
      </footer>
    </div>
  );
};

export default App;