البوابة الإلكترونية الموحدة — جهاز شئون البيئة

واجهة أمامية (Front-End) مبنية باستخدام React + Vite، تحاكي تصميم بوابة جهاز شئون البيئة وتحتوي على:

• صفحة تسجيل دخول احترافية (اسم مستخدم / كلمة مرور).
• لوحة تحكم رئيسية بها شريط علوي وقائمة جانبية تضم الإدارات التسع:
  1. إدارة نوعية المياه والهواء والضوضاء
  2. إدارة المخلفات الصلبة والخطرة
  3. إدارة المناطق الساحلية والبحيرات
  4. إدارة تقييم الأثر البيئي
  5. إدارة الشئون القانونية
  6. إدارة الإعلام والتوعية البيئية والتدريب
  7. إدارة خدمات المواطنين
  8. إدارة حماية الأرض والتربة
  9. إدارة المعامل

كل إدارة لها بطاقات إحصائية، جدول بيانات، سجل أنشطة، وإجراءات سريعة خاصة بها.

ملاحظة: هذا المشروع واجهة أمامية فقط. تسجيل الدخول حالياً وهمي (Simulated) — أي اسم مستخدم وكلمة مرور غير فارغين سيسمحان بالدخول. عند بناء الـ Back-End، استبدل الدالة handleSubmit في src/components/Login.jsx باستدعاء API حقيقي.

هيكل المشروع

env-agency-portal/
├── index.html                  نقطة الدخول الخاصة بـ Vite
├── package.json
├── vite.config.js
├── public/
└── src/
    ├── main.jsx                نقطة تشغيل React
    ├── App.jsx                 التحكم في حالة تسجيل الدخول
    ├── index.css                المتغيرات والأنماط العامة
    ├── assets/
    │   └── logo.jpg             شعار الجهاز
    ├── data/
    │   └── departments.js       بيانات الإدارات التسع (تعديل المحتوى من هنا)
    └── components/
        ├── Login.jsx / Login.css
        ├── Dashboard.jsx / Dashboard.css
        ├── Topbar.jsx / Topbar.css
        ├── Sidebar.jsx / Sidebar.css
        └── MainContent.jsx / MainContent.css

التشغيل محلياً

يتطلب Node.js (يفضل الإصدار 18 أو أحدث).

# 1. تثبيت الحزم
npm install

# 2. تشغيل خادم التطوير
npm run dev

# 3. فتح المتصفح على
http://localhost:5173

بناء نسخة الإنتاج

npm run build

سيتم إنشاء مجلد dist/ جاهز للنشر على أي استضافة (Netlify، Vercel، أو خادم استضافة عادي).

الخطوات التالية (Back-End)

هذا المستودع يغطي الواجهة الأمامية فقط. لبناء الواجهة الخلفية ستحتاج إلى:

• نظام مصادقة حقيقي (JWT / Sessions) بدلاً من محاكاة تسجيل الدخول في Login.jsx.
• قاعدة بيانات لكل إدارة من الإدارات التسع (تراخيص، شكاوى، عينات، قضايا... إلخ).
• نقاط API (REST أو GraphQL) تُستبدل بها بيانات src/data/departments.js الثابتة حالياً.