ClinicPlus - منصة العيادات الطبية

📋 نظرة عامة على المشروع

ClinicPlus هي منصة متكاملة لإدارة العيادات الطبية مبنية بأحدث تقنيات الويب. تقدم حلاً شاملاً لعمليات العيادة، بما في ذلك إدارة المرضى، وملفات الأطباء، وجدولة المواعيد، وتتبع السجلات الطبية، ولوحات التحكم الإدارية.

🛠️ التقنيات المستخدمة

الإطار الأساسي

• Next.js 16 (بنية App Router)
• TypeScript (تطوير آمن النوع)

الواجهة الأمامية

• React 19
• Tailwind CSS 4 (التنسيقات)
• shadcn/ui (مكتبة المكونات)
• MUI (Material UI 7) (مكونات لوحة الإدارة)
• Chart.js (تصور البيانات)
• MUI X Charts (الرسوم البيانية المتقدمة)
• Lucide React و Tabler Icons (مكتبات الأيقونات)

الخادم وقواعد البيانات

• MongoDB (قاعدة البيانات)
• Mongoose 9 (ODM - مخطط الكائنات والمستندات)

المصادقة والأمان

• NextAuth.js 4 (إطار المصادقة)
• Google OAuth (تسجيل الدخول عبر جوجل)

الوسائط والتخزين

• Cloudinary (رفع وإدارة الصور/الملفات)

الأدوات المساعدة

• Lodash (وظائف مساعدة)
• React Hot Toast (الإشعارات)
• Class Variance Authority (متغيرات المكونات)

🏗️ هيكل المشروع

هيكل المجلدات

graduateion_project/
├── app/ # Next.js App Router
│ ├── (public)/ # الصفحات العامة (لا تتطلب مصادقة)
│ │ ├── page.tsx # الصفحة الرئيسية
│ │ ├── doctors/ # قائمة الأطباء
│ │ ├── doctors/[id]/ # ملف الطبيب التفصيلي
│ │ ├── about/ # صفحة من نحن/الفريق
│ │ └── statics/ # صفحة الإحصائيات والتحليلات
│ │
│ ├── (dashboard)/ # صفحات لوحة التحكم (محمية)
│ │ ├── admin/ # لوحة تحكم الإدارة
│ │ │ ├── users/ # إدارة المستخدمين
│ │ │ ├── doctors/ # إدارة الأطباء
│ │ │ └── ... # ميزات الإدارة
│ │ └── profile/ # صفحات الملف الشخصي
│ │
│ ├── api/ # مسارات API الخلفية
│ │ ├── auth/[...nextauth]/ # نقاط مصادقة المصادقة
│ │ ├── profile/ # واجهات إدارة الملف الشخصي
│ │ ├── admin/ # واجهات عمليات الإدارة
│ │ ├── doctors/ # واجهات الأطباء العامة
│ │ └── upload/ # واجهة رفع الملفات
│ │
│ ├── Components/ # مكونات واجهة مشتركة
│ ├── layout.tsx # التنسيق الأساسي مع البيانات الوصفية
│ └── globals.css # الأنماط العامة
│
├── components/
│ └── ui/ # عناصر واجهة قابلة لإعادة الاستخدام (shadcn)
│
├── models/ # نماذج قاعدة بيانات Mongoose
│ ├── User.ts # مخطط المستخدم
│ ├── Doctors.ts # مخطط الطبيب
│ ├── Review.ts # مخطط التقييم
│ ├── MedicalHistory.ts # مخطط السجل الطبي
│ └── UpcomingDates.ts # مخطط المواعيد
│
├── lib/ # مكتبات الأدوات المساعدة
│ ├── db.ts # اتصال قاعدة البيانات
│ ├── auth.ts # تكوين المصادقة
│ └── ... # وظائف مساعدة
│
├── types/ # تعريفات TypeScript
├── public/ # الأصول الثابتة
├── next.config.ts # تكوين Next.js
├── tsconfig.json # تكوين TypeScript
├── tailwind.config.ts # تكوين Tailwind CSS
└── package.json # التبعيات والبرامج النصية

👥 الأدوار والصلاحيات

1. الزائر (غير مسجل)

• تصفح الصفحات العامة (الرئيسية، من نحن، الإحصائيات)
• عرض قائمة الأطباء
• عرض ملفات الأطباء العامة والتقييمات
• البحث عن الأطباء

2. المستخدم المسجل (مريض)

• جميع صلاحيات الزائر
• تعديل الملف الشخصي
• إضافة تقييمات وتقييمات للأطباء
• عرض وإدارة السجل الطبي
• عرض المواعيد القادمة

3. الطبيب

• جميع صلاحيات المستخدم المسجل
• الوصول إلى صفحة الملف الشخصي الخاصة بالطبيب
• إدارة معلومات الملف الشخصي للطبيب
• عرض تقييمات المرضى
• إدارة المواعيد

4. المدير (Admin)

• جميع الصلاحيات
• الوصول إلى لوحة /admin
• إدارة جميع المستخدمين (عرض، تعديل، حذف)
• إدارة الأطباء (إضافة، تعديل، إزالة)
• إضافة مستخدمين كأطباء
• عرض تحليلات النظام

التحكم في صلاحية الإدارة: يتم تحديدها عبر متغير البيئة AUTH_ADMINS (قائمة عناوين بريد إلكتروني مفصولة بفواصل)

📦 نماذج قاعدة البيانات

نموذج المستخدم (User)

• المعلومات الشخصية (الاسم، البريد الإلكتروني، الصورة الرمزية)
• تعيين الأدوار (مريض، طبيب، مدير)
• ربط المصادقة (Google OAuth)
• إعدادات الملف الشخصي

نموذج الأطباء (Doctors)

• تفاصيل ملف الطبيب
• التخصص
• مجاميع التقييمات والمراجعات
• معلومات التوفر
• صور الملف الشخصي

نموذج التقييم (Review)

• مرجع المقيّم (المستخدم)
• مرجع الطبيب
• التقييم (نتيجة رقمية)
• نص التعليق
• الطابع الزمني

نموذج السجل الطبي (MedicalHistory)

• مرجع المريض
• السجلات الطبية
• معلومات التشخيص
• تاريخ العلاج
• تتبع التاريخ

نموذج المواعيد القادمة (UpcomingDates)

• جدولة المواعيد
• ربط المريض بالطبيب
• إدارة التاريخ/الوقت
• تتبع الحالة

🔌 نقاط واجهة البرمجة (API Endpoints)

الواجهات العامة (لا تتطلب مصادقة)

GET /api/doctors # عرض جميع الأطباء (مع البحث والتصفح)
GET /api/doctors/[id] # الحصول على طبيب بالمعرف
POST /api/doctors/[id]/reviews # إضافة تقييم (يتطلب مصادقة)

واجهات الملف الشخصي (تتطلب مصادقة)

GET /api/profile # الحصول على الملف الشخصي
PATCH /api/profile # تحديث الملف الشخصي
GET /api/profile/doctor/medical-history # الحصول على السجل الطبي
POST /api/profile/doctor/medical-history # إضافة سجل طبي
GET /api/profile/doctor/appointments # الحصول على المواعيد
POST /api/profile/doctor/appointments # إضافة موعد

واجهات الإدارة (تتطلب مصادقة مدير)

GET /api/admin/users # عرض جميع المستخدمين
GET /api/admin/users/[id] # الحصول على تفاصيل مستخدم
PATCH /api/admin/users/[id] # تحديث مستخدم
GET /api/admin/doctors # عرض جميع الأطباء
POST /api/admin/doctors # إضافة طبيب جديد
GET /api/admin/doctors/[id] # الحصول على تفاصيل طبيب
PATCH /api/admin/doctors/[id] # تحديث طبيب
DELETE /api/admin/doctors/[id] # حذف طبيب

واجهات أخرى

POST /api/upload # رفع ملف إلى Cloudinary
GET/POST /api/auth/[...nextauth] # مصادقة NextAuth

🌐 تدفق التطبيق

رحلة المستخدم

1. الوصول والتصفح (زائر)

الصفحة الرئيسية → تصفح الأطباء → عرض ملف الطبيب → (اختياري: التسجيل)

2. سير عمل المريض

تسجيل الدخول (Google OAuth)
↓
لوحة التحكم/الملف الشخصي
↓
├─ تعديل إعدادات الملف الشخصي
├─ عرض السجل الطبي
├─ حجز المواعيد
├─ تقييم الأطباء
└─ إدارة الحساب

3. سير عمل الطبيب

تسجيل الدخول (Google OAuth)
↓
صفحة ملف الطبيب
↓
├─ تحديث المعلومات المهنية
├─ عرض تقييمات المرضى
├─ إدارة المواعيد
└─ عرض السجل الطبي (إذا كان أيضاً مريضاً)

4. سير عمل المدير

تسجيل الدخول (Google OAuth - يجب أن يكون في AUTH_ADMINS)
↓
لوحة الإدارة (/admin)
↓
├─ إدارة المستخدمين
│ ├─ عرض قائمة المستخدمين
│ ├─ تعديل بيانات المستخدم
│ └─ إدارة أدوار المستخدمين
│
├─ إدارة الأطباء
│ ├─ عرض بطاقات الأطباء
│ ├─ إضافة طبيب جديد
│ ├─ تعديل ملف الطبيب
│ └─ إزالة طبيب
│
└─ تحليلات النظام

🔐 تدفق المصادقة

ينقر المستخدم على "تسجيل الدخول"
↓
إعادة توجيه إلى Google OAuth
↓
NextAuth يتحقق من بيانات الاعتماد
↓
إنشاء جلسة مستخدم
↓
├─ إذا مستخدم جديد → إنشاء مستند User في MongoDB
├─ إذا مستخدم موجود → تحميل الملف الشخصي
└─ إذا البريد في AUTH_ADMINS → منح صلاحية الإدارة
↓
إعادة توجيه إلى الصفحة المناسبة (الملف الشخصي/لوحة التحكم)

🎨 ميزات الواجهة وتجربة المستخدم

الصفحات العامة

• قسم البطل (Hero): منطقة جذابة للصفحة الرئيسية
• قسم الميزات: أبرز ميزات المنصة
• دليل الأطباء: قائمة قابلة للبحث والتصفح
• ملف الطبيب: عرض تفصيلي مع التقييمات
• من نحن/الفريق: معلومات المؤسسة
• الإحصائيات: لوحة تحليلات (مقاييس عامة)

صفحات لوحة التحكم

• الملف الشخصي للمستخدم: واجهة بتبويبات للإعدادات
• لوحة الإدارة: جداول بيانات، رسوم بيانية، أدوات إدارة
• تصميم متجاوب: نهج الجوال أولاً
• واجهة حديثة: تصميم طبي احترافي ونظيف

⚙️ تكوين البيئة

أنشئ ملف .env.local مع المتغيرات التالية:

# قاعدة البيانات
MONGODB_URI=mongodb://...

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secret_key

# صلاحية الإدارة (عناوين بريد مفصولة بفواصل)
AUTH_ADMINS=admin@example.com,doctor@example.com

# Cloudinary (لرفع الصور)
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

# اختياري (للبيانات الوصفية)
NEXT_PUBLIC_SITE_URL=http://localhost:3000

🚀 البدء

التثبيت

# تثبيت التبعيات
npm install

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

# افتح المتصفح
http://localhost:3000

البرامج النصية المتاحة

npm run dev # تشغيل خادم التطوير
npm run build # بناء للإنتاج (مع Turbopack)
npm run start # تشغيل خادم الإنتاج

📊 ملخص الميزات الرئيسية

الميزة

الوصف

الموقع العام

صفحات محسنة لمحركات البحث مع بيانات وصفية ودعم Open Graph

دليل الأطباء

بحث وتصفية وتصفح خلال قوائم الأطباء

نظام التقييمات

المستخدمون المسجلون يمكنهم تقييم الأطباء

ملفات المستخدمين

إدارة ملف شخصي مخصص للمرضى

ملفات الأطباء

ملف مهني مع المواعيد والتقييمات

السجل الطبي

تتبع السجلات الطبية للمرضى

المواعيد

جدولة وإدارة المواعيد القادمة

لوحة الإدارة

عمليات CRUD كاملة للمستخدمين والأطباء

Google OAuth

مصادقة آمنة عبر تسجيل الدخول بجوجل

رفع الصور

تكامل Cloudinary لصور الملف الشخصي

التحليلات

إحصائيات وتصور البيانات

واجهة متجاوبة

تصميم للجوال أولاً مع Tailwind CSS

🔧 النقاط التقنية البارزة

• مكونات الخادم: يستفيد من Next.js 16 RSC (مكونات React للخادم)
• مسارات API: خلفية RESTful داخل تطبيق Next.js
• أمان النوع: تغطية TypeScript كاملة
• قاعدة البيانات: MongoDB مع التحقق من صحة مخطط Mongoose
• إدارة الجلسات: NextAuth مع جلسات JWT
• التحسينات: تقسيم الكود التلقائي في Next.js، تحسين الصور
• SEO: علامات وصفية، Open Graph، بطاقات Twitter مهيأة
• معالجة الأخطاء: حدود أخطاء الخادم والعميل

✅ قائمة التحقق قبل النشر

• تعيين جميع متغيرات البيئة على منصة الاستضافة
• التحقق من اتصال MongoDB
• تكوين URI إعادة توجيه Google OAuth لنطاق الإنتاج
• تعيين NEXTAUTH_URL إلى رابط الإنتاج
• تعيين NEXT_PUBLIC_SITE_URL إلى رابط الإنتاج
• التحقق من عناوين البريد AUTH_ADMINS
• اختبار تكامل رفع Cloudinary
• تشغيل npm run build بنجاح
• اختبار تدفق المصادقة
• التحقق من التحكم في صلاحية الإدارة
• فحص البيانات الوصفية وصور Open Graph
• اختبار التصميم المتجاوبة على الأجهزة المحمولة

🐛 المشاكل الشائعة وحلولها

1. تطوير Windows (أخطاء ENOENT)

المشكلة: أخطاء .next/static/development/_buildManifest.js.tmp.* الحل:

• احذف مجلد .next
• أعد تشغيل خادم التطوير: npm run dev

2. خطأ Mongoose MissingSchemaError

المشكلة: لم يتم العثور على المخطط أثناء populate الحل: استورد النماذج المطلوبة في ملف المسار قبل استخدام populate

3. تسلسل ObjectId

المشكلة: تمرير MongoDB ObjectId إلى مكونات العميل الحل: حوّل إلى سلسلة: String(doc._id)

📈 التحسينات المستقبلية

• مجموعة اختبارات آلية (اختبارات API + UI)
• مخططات التحقق من صحة المدخلات (Zod/Yup)
• سجل تدقيق لعمليات الإدارة
• تحديد المعدل لنقاط النهاية العامة
• تكامل خط CI/CD
• إشعارات البريد الإلكتروني للمواعيد
• نظام دردشة في الوقت الحقيقي
• مرشحات بحث متقدمة
• دعم متعدد اللغات (i18n)
• تصدير التقارير (PDF/CSV)

📞 الدعم والتوثيق

للحصول على تعليمات الإعداد المفصلة واستكشاف المشاكل وإصلاحها، راجع:

• README.md - دليل البدء السريع
• PROJECT_GUIDE_EN.md - الدليل الإنجليزي الشامل
• PROJECT_GUIDE_AR.md - الدليل العربي الشامل
• توثيق Next.js الرسمي: https://nextjs.org/docs

بني باستخدام: Next.js 16, TypeScript, MongoDB, NextAuth, Tailwind CSS, shadcn/ui, MUI, Chart.js, Cloudinary