برنامج محاسبي متقدم

import React from 'react';

function App() {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <header className="text-center mb-8">
        <h1 className="text-4xl font-bold text-blue-600">Inventory Management System</h1>
        <p className="text-gray-600">Manage your warehouses and products efficiently</p>
      </header>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Warehouses</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {/* Warehouse Cards */}
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold text-gray-700">Warehouse 1</h3>
            <p className="text-gray-600">Location: Baghdad</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold text-gray-700">Warehouse 2</h3>
            <p className="text-gray-600">Location: Basra</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold text-gray-700">Warehouse 3</h3>
            <p className="text-gray-600">Location: Erbil</p>
          </div>
        </div>
      </section>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Products</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {/* Product Cards */}
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold text-gray-700">Product A</h3>
            <p className="text-gray-600">Color: Red</p>
            <p className="text-gray-600">Quantity: 100</p>
            <p className="text-gray-600">Cost: 10 IQD</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold text-gray-700">Product B</h3>
            <p className="text-gray-600">Color: Blue</p>
            <p className="text-gray-600">Quantity: 200</p>
            <p className="text-gray-600">Cost: 15 IQD</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold text-gray-700">Product C</h3>
            <p className="text-gray-600">Color: Green</p>
            <p className="text-gray-600">Quantity: 150</p>
            <p className="text-gray-600">Cost: 20 IQD</p>
          </div>
        </div>
      </section>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Transfer Products</h2>
        <div className="bg-white p-6 rounded-lg shadow-md">
          <form className="space-y-4">
            <div>
              <label className="block text-gray-700">From Warehouse</label>
              <select className="mt-1 block w-full p-2 border border-gray-300 rounded-md">
                <option>Warehouse 1</option>
                <option>Warehouse 2</option>
                <option>Warehouse 3</option>
              </select>
            </div>
            <div>
              <label className="block text-gray-700">To Warehouse</label>
              <select className="mt-1 block w-full p-2 border border-gray-300 rounded-md">
                <option>Warehouse 1</option>
                <option>Warehouse 2</option>
                <option>Warehouse 3</option>
              </select>
            </div>
            <div>
              <label className="block text-gray-700">Product</label>
              <select className="mt-1 block w-full p-2 border border-gray-300 rounded-md">
                <option>Product A</option>
                <option>Product B</option>
                <option>Product C</option>
              </select>
            </div>
            <div>
              <label className="block text-gray-700">Quantity</label>
              <input type="number" className="mt-1 block w-full p-2 border border-gray-300 rounded-md" />
            </div>
            <button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Transfer</button>
          </form>
        </div>
      </section>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Export/Import</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Export */}
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold text-gray-700">Export Products</h3>
            <form className="space-y-4">
              <div>
                <label className="block text-gray-700">Warehouse</label>
                <select className="mt-1 block w-full p-2 border border-gray-300 rounded-md">
                  <option>Warehouse 1</option>
                  <option>Warehouse 2</option>
                  <option>Warehouse 3</option>
                </select>
              </div>
              <div>
                <label className="block text-gray-700">Product</label>
                <select className="mt-1 block w-full p-2 border border-gray-300 rounded-md">
                  <option>Product A</option>
                  <option>Product B</option>
                  <option>Product C</option>
                </select>
              </div>
              <div>
                <label className="block text-gray-700">Quantity</label>
                <input type="number" className="mt-1 block w-full p-2 border border-gray-300 rounded-md" />
              </div>
              <button className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">Export</button>
            </form>
          </div>
          {/* Import */}
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold text-gray-700">Import Products</h3>
            <form className="space-y-4">
              <div>
                <label className="block text-gray-700">Warehouse</label>
                <select className="mt-1 block w-full p-2 border border-gray-300 rounded-md">
                  <option>Warehouse 1</option>
                  <option>Warehouse 2</option>
                  <option>Warehouse 3</option>
                </select>
              </div>
              <div>
                <label className="block text-gray-700">Product</label>
                <select className="mt-1 block w-full p-2 border border-gray-300 rounded-md">
                  <option>Product A</option>
                  <option>Product B</option>
                  <option>Product C</option>
                </select>
              </div>
              <div>
                <label className="block text-gray-700">Quantity</label>
                <input type="number" className="mt-1 block w-full p-2 border border-gray-300 rounded-md" />
              </div>
              <button className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Import</button>
            </form>
          </div>
        </div>
      </section>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Reports</h2>
        <div className="bg-white p-6 rounded-lg shadow-md">
          <div className="overflow-x-auto">
            <table className="min-w-full">
              <thead>
                <tr>
                  <th className="text-left py-2 px-4">Date</th>
                  <th className="text-left py-2 px-4">Type</th>
                  <th className="text-left py-2 px-4">Warehouse</th>
                  <th className="text-left py-2 px-4">Product</th>
                  <th className="text-left py-2 px-4">Quantity</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="py-2 px-4">2023-10-01</td>
                  <td className="py-2 px-4">Import</td>
                  <td className="py-2 px-4">Warehouse 1</td>
                  <td className="py-2 px-4">Product A</td>
                  <td className="py-2 px-4">100</td>
                </tr>
                <tr>
                  <td className="py-2 px-4">2023-10-02</td>
                  <td className="py-2 px-4">Export</td>
                  <td className="py-2 px-4">Warehouse 2</td>
                  <td className="py-2 px-4">Product B</td>
                  <td className="py-2 px-4">50</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <footer className="text-center mt-8 text-gray-600">
        <p>&copy; 2025 Inventory Management System. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;