نظام محاسبي للذهب والمجوهرات

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen">
      <header className="bg-yellow-600 text-white p-4">
        <h1 className="text-2xl font-bold">نظام محاسبي للذهب والمجوهرات</h1>
      </header>
      <main className="p-4">
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">الفواتير</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">فاتورة مبيعت</div>
            <div className="bg-white p-4 rounded-lg shadow-md">فاتورة مرتجع مبيعات</div>
            <div className="bg-white p-4 rounded-lg shadow-md">فاتورة مشتريات</div>
            <div className="bg-white p-4 rounded-lg shadow-md">مردود مشتريات</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">الصناديق</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">صندوق المشغول</div>
            <div className="bg-white p-4 rounded-lg shadow-md">سند صرف وقبض</div>
            <div className="bg-white p-4 rounded-lg shadow-md">صندوق الكسروالريال</div>
            <div className="bg-white p-4 rounded-lg shadow-md">صندوق تسكير</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">التحويلات</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">اشعار تحويل</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">التسكير</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">تسكير لعميل</div>
            <div className="bg-white p-4 rounded-lg shadow-md">تسكير عند رئيسي</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">الأصناف</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">الأصناف</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">العملاء والموردين</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">العملاء</div>
            <div className="bg-white p-4 rounded-lg shadow-md">الموردين</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">المحاسبة</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">شجرة محاسبية</div>
            <div className="bg-white p-4 rounded-lg shadow-md">استاذ عام واستاذ مساعد</div>
            <div className="bg-white p-4 rounded-lg shadow-md">كشف حساب</div>
            <div className="bg-white p-4 rounded-lg shadow-md">كشف يومية</div>
            <div className="bg-white p-4 rounded-lg shadow-md">كشف ديون</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">الإعدادات</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-md">تغير الألوان</div>
            <div className="bg-white p-4 rounded-lg shadow-md">الإعدادات</div>
          </div>
        </section>
      </main>
      <footer className="bg-yellow-600 text-white p-4 mt-8">
        <p className="text-center">© 2025 نظام محاسبي للذهب والمجوهرات. جميع الحقوق محفوظة.</p>
      </footer>
    </div>
  );
};

export default App;