إدارة مشروع تفصيل ملابس رياضية

import React, { useState } from 'react';

const App = () => {
  const [orders, setOrders] = useState([]);
  const [inventory, setInventory] = useState([]);
  const [employees, setEmployees] = useState([]);
  const [accounts, setAccounts] = useState([]);
  const [reports, setReports] = useState([]);

  const addOrder = (order) => {
    setOrders([...orders, order]);
  };

  const trackOrder = (orderId) => {
    return orders.find(order => order.id === orderId);
  };

  const deliverOrder = (orderId) => {
    setOrders(orders.filter(order => order.id !== orderId));
  };

  const addInventoryItem = (item) => {
    setInventory([...inventory, item]);
  };

  const updateInventoryItem = (itemId, quantity) => {
    setInventory(inventory.map(item => item.id === itemId ? { ...item, quantity } : item));
  };

  const addEmployee = (employee) => {
    setEmployees([...employees, employee]);
  };

  const updateEmployeeAttendance = (employeeId, attendance) => {
    setEmployees(employees.map(employee => employee.id === employeeId ? { ...employee, attendance } : employee));
  };

  const addAccount = (account) => {
    setAccounts([...accounts, account]);
  };

  const generateFinancialReport = () => {
    const totalExpenses = accounts.reduce((acc, account) => acc + account.expenses, 0);
    const totalRevenue = accounts.reduce((acc, account) => acc + account.revenue, 0);
    const profit = totalRevenue - totalExpenses;
    setReports([...reports, { totalExpenses, totalRevenue, profit }]);
  };

  return (
    <div className="App">
      <header className="bg-blue-500 text-white p-4">
        <h1 className="text-2xl font-bold">Sports Apparel Management System</h1>
      </header>
      <main className="p-4">
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Order Management</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Add Order</h3>
              <button onClick={() => addOrder({ id: 1, details: 'Sample Order' })} className="mt-2 bg-green-500 text-white px-4 py-2 rounded">Add</button>
            </div>
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Track Order</h3>
              <button onClick={() => trackOrder(1)} className="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Track</button>
            </div>
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Deliver Order</h3>
              <button onClick={() => deliverOrder(1)} className="mt-2 bg-red-500 text-white px-4 py-2 rounded">Deliver</button>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Inventory Management</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Add Inventory Item</h3>
              <button onClick={() => addInventoryItem({ id: 1, name: 'Sample Item', quantity: 10 })} className="mt-2 bg-green-500 text-white px-4 py-2 rounded">Add</button>
            </div>
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Update Inventory Item</h3>
              <button onClick={() => updateInventoryItem(1, 20)} className="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Update</button>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Employee Management</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Add Employee</h3>
              <button onClick={() => addEmployee({ id: 1, name: 'John Doe', attendance: 'Present' })} className="mt-2 bg-green-500 text-white px-4 py-2 rounded">Add</button>
            </div>
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Update Employee Attendance</h3>
              <button onClick={() => updateEmployeeAttendance(1, 'Absent')} className="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Update</button>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Account Management</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Add Account</h3>
              <button onClick={() => addAccount({ id: 1, revenue: 1000, expenses: 500 })} className="mt-2 bg-green-500 text-white px-4 py-2 rounded">Add</button>
            </div>
            <div className="bg-white p-4 shadow rounded">
              <h3 className="text-lg font-medium">Generate Financial Report</h3>
              <button onClick={generateFinancialReport} className="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Generate</button>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Reports</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {reports.map((report, index) => (
              <div key={index} className="bg-white p-4 shadow rounded">
                <h3 className="text-lg font-medium">Report {index + 1}</h3>
                <p>Total Expenses: ${report.totalExpenses}</p>
                <p>Total Revenue: ${report.totalRevenue}</p>
                <p>Profit: ${report.profit}</p>
              </div>
            ))}
          </div>
        </section>
      </main>
      <footer className="bg-gray-800 text-white p-4">
        <p>© 2025 Sports Apparel Management System. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;