MedLink admin dashboard

تم تطوير لوحة تحكم إدارية حديثة ومتكاملة لإدارة منصة طبية إلكترونية (Telemedicine / e-Health)، تربط بين المرضى والأطباء وتتيح للإداريين إدارة كافة جوانب النظام بكفاءة عالية.

التقنيات المستخدمة:

- Frontend Framework: React 19 + TypeScript + TanStack Start (SSR/SSG)

- Routing: TanStack Router (file-based routing مع type-safe navigation)

- State & Data Fetching: TanStack Query (React Query) مع caching وـ invalidation ذكي

- UI Components: Radix UI primitives + shadcn/ui (40+ مكون جاهز: جداول، نماذج، نوافذ حوار، dropdowns...)

- Styling: Tailwind CSS v4 مع نظام تصميم متكامل (design tokens) يدعم Light Mode / Dark Mode

- Charts & Visualization: Recharts (AreaChart, BarChart, LineChart) لعرض الإحصائيات والإيرادات

- Icons: Lucide React

- Build Tool: Vite 7 + SSR/SSG support

- API Integration: REST API integration مع JWT Authentication (Bearer Token)

الوظائف والصفحات الرئيسية:

1. لوحة التحكم الرئيسية (Dashboard):

- إحصائيات مباشرة (Total Users, Active Users, Pending Doctors, Revenue)

- رسم بياني للإيرادات الشهرية (Area Chart مع gradient)

2. إدارة المرضى (Patients):

- جدول متكامل مع pagination

- عرض بيانات المريض (صورة، تاريخ الميلاد، الجنس، تاريخ الانضمام)

- تفعيل/تعطيل الحساب + حذف دائم

3. إدارة الأطباء (Doctors):

- نظام موافقة على تسجيل الأطباء (Approve/Reject)

- تصفية حسب الحالة (All / Pending / Verified)

- عرض التخصص، سنوات الخبرة، التقييم (Stars)، سعر الاستشارة

- تفعيل/تعطيل + حذف دائم

4. التقارير والبلاغات (Reports):

- إدارة بلاغات الرسائل في التطبيق

- عرض محتوى الرسالة، اسم المبلغ، دوره، اسم المريض والطبيب

- نظام حل البلاغات مع Admin Notes

5. الإشعارات (Notifications):

- قائمة إشعارات مباشرة (New Doctor Registration, Payment Failed...)

- عداد رسائل غير مقروءة + Mark as Read

6. التحليلات والإحصائيات (Analytics):

- User Growth Charts (Bar Chart للمرضى vs الأطباء حسب الربع)

- Daily Revenue (Line Chart)

- إحصائيات عامة (Patients, Doctors, Appointments, Reviews)

7. الإعدادات (Settings):

- Danger Zone: مسح كل البيانات (Clear All Data) مع confirmation مطابق

8. نظام المصادقة (Auth):

- صفحة تسجيل دخول آمنة مع JWT Token

- حماية الصفحات (Protected Routes) + redirect تلقائي

- Middleware للـ Authorization

المميزات التقنية:

- تصميم Responsive بالكامل (يعمل على Desktop و Tablet)

- دعم الوضع الليلي والنهائي (Dark/Light Mode) مع تبديل فوري

- تصميم عصري minimalist مع زجاجية (glassmorphism) وتأثيرات blur

- Toast Notifications (Sonner) للتفاعل السريع

- Loader States و Error Handling في كل الصفحات

- Pagination متكامل في الجداول

- Charts تفاعلية مع Tooltips مخصصة

- تكامل CI/CD مع GitHub Actions (dist-check في كل Build)

بنية المشروع:

الكود مبني على بنية نظيفة ومهنية: TanStack Start مع File-Based Routing، مكونات قابلة لإعادة الاستخدام، separation of concerns واضح بين UI components، business logic، وـ API layer.