Gestion des paiements

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [clients, setClients] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [paymentStatus, setPaymentStatus] = useState('ALL');

  const addClient = (client) => {
    setClients([...clients, client]);
  };

  const savePayment = (clientId, payment) => {
    setClients(clients.map(client =>
      client.id === clientId ? { ...client, payment } : client
    ));
  };

  const filteredClients = clients.filter(client =>
    client.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
    (paymentStatus === 'ALL' || client.payment === paymentStatus)
  );

  return (
    <div className="App">
      <header className="header">
        <h1>Payment Management System</h1>
      </header>
      <div className="search-bar">
        <input
          type="text"
          placeholder="Search Client"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <select value={paymentStatus} onChange={(e) => setPaymentStatus(e.target.value)}>
          <option value="ALL">All</option>
          <option value="PAID">Paid</option>
          <option value="PARTIAL">Partial</option>
          <option value="NO_PAYMENT">No Payment</option>
        </select>
      </div>
      <div className="client-list">
        {filteredClients.map(client => (
          <div key={client.id} className="client-card">
            <h2>{client.name}</h2>
            <p>Status: {client.payment}</p>
            <button onClick={() => savePayment(client.id, 'PAID')}>Mark as Paid</button>
            <button onClick={() => savePayment(client.id, 'PARTIAL')}>Mark as Partial</button>
            <button onClick={() => savePayment(client.id, 'NO_PAYMENT')}>Mark as No Payment</button>
          </div>
        ))}
      </div>
      <div className="footer">
        <p>© 2025 Payment Management System. All rights reserved.</p>
      </div>
    </div>
  );
};

export default App;