Admin Dashboard

Admin Dashboard — Role-Based Management System

لوحة تحكم احترافية مبنية باستخدام React 18 و TypeScript و Tailwind CSS، مصممة لإدارة المستخدمين والطلبات بنظام صلاحيات متقدم (Role-Based Access Control) مع تجربة استخدام محسوبة Mobile-First.

المشروع بيحاكي سيناريو إنتاج حقيقي لإدارة نظام طلبات ومستخدمين داخل شركة أو متجر إلكتروني.

الفكرة الأساسية

بناء Admin Panel متكامل يوفر:

نظام صلاحيات متعدد المستويات (Super Admin / Admin / User)

إدارة كاملة للطلبات وحالاتها

إدارة المستخدمين والتحكم في الأدوار

تجربة استخدام احترافية متجاوبة 100%

تنظيم كود قابل للتوسع والصيانة

دوري في المشروع

تصميم الـ Architecture بالكامل باستخدام React + Vite

تطبيق نظام Role-Based Access Control عملي

تنظيم الـ API Layer باستخدام Axios

إدارة Server State باستخدام TanStack Query

بناء UI نظيف ومتجاوب بدون أي Horizontal Scroll

تصميم تجربة Mobile محسنة بواجهات Card بدل الجداول

فصل Types وتنظيم Structure احترافي للمشروع

أبرز المميزات التقنية

نظام صلاحيات متقدم

3 أدوار مختلفة بصلاحيات حقيقية

منع التعديل حسب الدور

تحكم كامل في حالة الحساب (Active / Blocked)

منع الأدمن من تعديل نفسه

إدارة الطلبات

تتبع حالة الطلب (Pending / Paid / Shipped / Cancelled)

تعديل الحالة حسب الصلاحيات

عرض إحصائيات الطلبات

عرض الإيرادات للأدمن فقط

إدارة المستخدمين

تغيير الدور

تفعيل أو حظر الحساب

منع الأدمن من تعديل أدمن آخر

تجربة استخدام محسوبة

Mobile Card Layout بدل Table

Bottom Navigation للموبايل

Hamburger Menu

Sticky Headers

Touch-Friendly UI

Responsive Grid System

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

React 18

TypeScript

Vite

Tailwind CSS

TanStack Query

React Context

Axios

JSON Server (Mock API)

القيمة اللي بيعكسها المشروع

المشروع ده يوضح قدرتي على:

بناء نظام إدارة كامل مش مجرد صفحات

تطبيق Business Logic حقيقي داخل الواجهة

التعامل مع الصلاحيات المعقدة

تنظيم مشروع React بشكل احترافي قابل للتوسع

الاهتمام بتجربة الموبايل بنفس قوة الديسكتوب