تطوير نظام إدارة عيادات متكامل (Clinic Management System)

قمت بتطوير نظام متكامل لإدارة العيادات الطبية (Clinic Management System) مبني على مبدئ ال Clean Architecture ،

مع دعم 3 أدوار رئيسية داخل النظام:

Patient

Doctor

Admin

تم تصميم النظام ليكون قابل للتوسع (Scalable) وجاهز للربط مع Backend حقيقي مستقبلاً (مثل Node.js أو Laravel)، مع تطبيق نظام صلاحيات احترافي (Role-Based Access Control).

- نظام المصادقة والصلاحيات (Authentication & Authorization)

صفحة تسجيل دخول موحدة توجه المستخدم حسب دوره.

تسجيل متاح للمرضى والأطباء.

حساب Admin مُعرّف مسبقاً.

حماية كاملة للمسارات (Route Protection).

إدارة JWT باستخدام JOSE.

- مميزات المريض (Patient)

إدارة الملف الطبي (Blood Type – Allergies – العمليات السابقة).

حجز المواعيد بناءً على المواعيد المتاحة.

متابعة حالة المواعيد (Upcoming / Past / Cancelled).

تحميل الوصفات والتقارير الطبية بصيغة PDF.

تجربة استخدام سهلة بواجهة RTL كاملة.

- لوحة تحكم الطبيب (Doctor Dashboard)

إدارة جدول العمل وتحديد ساعات الدوام.

الاطلاع على الملفات الطبية للمرضى.

إضافة Diagnosis وروشتات طبية.

طلب فحوصات مخبرية.

شاشة Analytics تعرض:

إحصائيات المواعيد

الأداء الشهري

تفاصيل الراتب والمكافآت

- لوحة تحكم الإدارة (Admin Dashboard)

إضافة وحذف الأطباء.

إدارة الأقسام والخدمات.

تحديد رسوم الاستشارة.

تقارير أرباح وإحصائيات مرئية باستخدام Recharts.

- الجانب التقني

المشروع يعمل حالياً عبر Mock Backend باستخدام json-server لمحاكاة بيئة حقيقية، مع تصميم مرن يسمح بربطه بسهولة مع Backend فعلي.

تم استخدام:

React 19

TypeScript

Vite

TanStack Query (React Query) لإدارة Server State والـ Caching

Axios

React Hook Form & Formik لإدارة النماذج المعقدة

Tailwind CSS

Framer Motion

# ما يميز هذا المشروع:

هيكلية نظيفة قابلة للتوسع.

نظام صلاحيات متقدم متعدد الأدوار.

إدارة احترافية للـ Server State.

جاهزية للتحول إلى Production.

تجربة مستخدم عربية كاملة (RTL).

ملاحظة: المشروع يعتمد على json-server كـ Mock Backend، لذلك لا يوجد Live Demo مباشر، لكن يمكن تشغيله بسهولة عبر التعليمات الموجودة في ملف README على GitHub.

تم ارفاق رابط عبارة عن فيديو لللمشروع مع ارفاق ملف المشروع .