تطبيق محاسبة بسيط وعملي

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

const App = () => {
  const [entries, setEntries] = useState([]);
  const [date, setDate] = useState('');
  const [description, setDescription] = useState('');
  const [amount, setAmount] = useState('');

  const handleAddEntry = () => {
    if (date && description && amount) {
      const newEntry = { date, description, amount };
      setEntries([...entries, newEntry]);
      setDate('');
      setDescription('');
      setAmount('');
    }
  };

  const handleDeleteEntry = (index) => {
    const updatedEntries = entries.filter((_, i) => i !== index);
    setEntries(updatedEntries);
  };

  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-4xl font-bold">Tarek Belal Accounting App</h1>
      </header>
      <main className="container mx-auto p-4">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Add New Entry</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <input
              type="date"
              placeholder="Date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              className="p-2 border rounded"
            />
            <input
              type="text"
              placeholder="Description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className="p-2 border rounded"
            />
            <input
              type="number"
              placeholder="Amount"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              className="p-2 border rounded"
            />
          </div>
          <button
            onClick={handleAddEntry}
            className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          >
            Add Entry
          </button>
        </section>
        <section>
          <h2 className="text-2xl font-semibold mb-4">Journal Entries</h2>
          <table className="w-full border-collapse">
            <thead>
              <tr className="bg-gray-200">
                <th className="border p-2">Date</th>
                <th className="border p-2">Description</th>
                <th className="border p-2">Amount</th>
                <th className="border p-2">Actions</th>
              </tr>
            </thead>
            <tbody>
              {entries.map((entry, index) => (
                <tr key={index} className="bg-white">
                  <td className="border p-2">{entry.date}</td>
                  <td className="border p-2">{entry.description}</td>
                  <td className="border p-2">{entry.amount}</td>
                  <td className="border p-2">
                    <button
                      onClick={() => handleDeleteEntry(index)}
                      className="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </main>
      <footer className="bg-blue-600 text-white p-4 mt-8">
        <p className="text-center">© 2025 Tarek Belal. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;