| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>لوحة التحكم الإدارية</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Tajawal', sans-serif; |
| } |
| |
| .sidebar-item:hover .sidebar-submenu { |
| display: block; |
| } |
| |
| .rtl-grid { |
| direction: rtl; |
| } |
| |
| .chart-container { |
| height: 300px; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 text-gray-800"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="hidden md:flex md:flex-shrink-0"> |
| <div class="flex flex-col w-64 bg-gradient-to-b from-blue-800 to-blue-900 text-white"> |
| <div class="flex items-center justify-center h-16 px-4 border-b border-blue-700"> |
| <div class="flex items-center"> |
| <i class="fas fa-chart-line text-xl mr-2 text-blue-300"></i> |
| <span class="text-xl font-bold">إدارة الأعمال</span> |
| </div> |
| </div> |
| <div class="flex flex-col flex-grow overflow-y-auto"> |
| <div class="mt-5 flex-1 px-4 space-y-2"> |
| |
| <div class="sidebar-item"> |
| <a href="index.html" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-blue-700 text-white"> |
| <i class="fas fa-tachometer-alt ml-3"></i> |
| <span>لوحة التحكم</span> |
| </a> |
| </div> |
| |
| |
| <div class="sidebar-item relative"> |
| <a href="#" class="flex items-center justify-between px-4 py-3 text-sm font-medium rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white"> |
| <div class="flex items-center"> |
| <i class="fas fa-users ml-3"></i> |
| <span>إدارة المستخدمين</span> |
| </div> |
| <i class="fas fa-chevron-down text-xs"></i> |
| </a> |
| <div class="sidebar-submenu hidden mt-1 space-y-1 bg-blue-800 rounded-lg p-2"> |
| <a href="users.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">قائمة المستخدمين</a> |
| <a href="permissions.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">صلاحيات المستخدمين</a> |
| <a href="add-user.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">إضافة مستخدم</a> |
| </div> |
| </div> |
| |
| |
| <div class="sidebar-item relative"> |
| <a href="#" class="flex items-center justify-between px-4 py-3 text-sm font-medium rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white"> |
| <div class="flex items-center"> |
| <i class="fas fa-boxes ml-3"></i> |
| <span>المنتجات</span> |
| </div> |
| <i class="fas fa-chevron-down text-xs"></i> |
| </a> |
| <div class="sidebar-submenu hidden mt-1 space-y-1 bg-blue-800 rounded-lg p-2"> |
| <a href="products.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">جميع المنتجات</a> |
| <a href="add-product.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">إضافة منتج</a> |
| <a href="categories.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">التصنيفات</a> |
| </div> |
| </div> |
| |
| |
| <div class="sidebar-item"> |
| <a href="orders.html" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white"> |
| <i class="fas fa-shopping-cart ml-3"></i> |
| <span>الطلبات</span> |
| </a> |
| </div> |
| |
| |
| <div class="sidebar-item relative"> |
| <a href="#" class="flex items-center justify-between px-4 py-3 text-sm font-medium rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white"> |
| <div class="flex items-center"> |
| <i class="fas fa-chart-pie ml-3"></i> |
| <span>التقارير</span> |
| </div> |
| <i class="fas fa-chevron-down text-xs"></i> |
| </a> |
| <div class="sidebar-submenu hidden mt-1 space-y-1 bg-blue-800 rounded-lg p-2"> |
| <a href="sales-reports.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">تقارير المبيعات</a> |
| <a href="customer-reports.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">تقارير العملاء</a> |
| <a href="product-reports.html" class="block px-4 py-2 text-sm rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">تقارير المنتجات</a> |
| </div> |
| </div> |
| |
| |
| <div class="sidebar-item"> |
| <a href="settings.html" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white"> |
| <i class="fas fa-cog ml-3"></i> |
| <span>الإعدادات</span> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="px-4 py-4 border-t border-blue-700"> |
| <div class="flex items-center"> |
| <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile"> |
| <div class="mr-3"> |
| <p class="text-sm font-medium">أحمد محمد</p> |
| <p class="text-xs text-blue-300">مدير النظام</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-col flex-1 overflow-hidden"> |
| |
| <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200"> |
| |
| <button class="md:hidden text-gray-500 focus:outline-none"> |
| <i class="fas fa-bars"></i> |
| </button> |
| |
| |
| <div class="flex-1 max-w-md mr-4"> |
| <div class="relative"> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
| <i class="fas fa-search text-gray-400"></i> |
| </div> |
| <input type="text" class="w-full pr-10 pl-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="بحث..."> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| |
| <div class="relative"> |
| <button class="p-1 text-gray-500 rounded-full hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-bell"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| </div> |
| |
| |
| <div class="relative"> |
| <button class="p-1 text-gray-500 rounded-full hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-envelope"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| </div> |
| |
| |
| <div class="relative"> |
| <button class="flex items-center focus:outline-none" id="user-menu"> |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile"> |
| <span class="mr-2 text-sm font-medium">أحمد محمد</span> |
| <i class="fas fa-chevron-down text-xs"></i> |
| </button> |
| <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-10" id="user-menu-dropdown"> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">الملف الشخصي</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">الإعدادات</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">تسجيل الخروج</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-auto p-6"> |
| |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> |
| <div> |
| <h1 class="text-2xl font-bold">مرحبا بك، أحمد!</h1> |
| <p class="text-gray-600">هذه نظرة عامة على أداء عملك</p> |
| </div> |
| <div class="mt-4 md:mt-0"> |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-plus ml-2"></i> |
| إنشاء تقرير جديد |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6 rtl-grid"> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">إجمالي الإيرادات</p> |
| <h3 class="text-2xl font-bold">$24,780</h3> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| <i class="fas fa-dollar-sign text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium"> |
| <i class="fas fa-arrow-up ml-1"></i> 12.5% |
| </span> |
| <span class="text-gray-500 text-sm mr-2">مقارنة بالشهر الماضي</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">طلبات جديدة</p> |
| <h3 class="text-2xl font-bold">1,245</h3> |
| </div> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-shopping-cart text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium"> |
| <i class="fas fa-arrow-up ml-1"></i> 8.3% |
| </span> |
| <span class="text-gray-500 text-sm mr-2">مقارنة بالأسبوع الماضي</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">عملاء جدد</p> |
| <h3 class="text-2xl font-bold">856</h3> |
| </div> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <i class="fas fa-users text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-red-500 text-sm font-medium"> |
| <i class="fas fa-arrow-down ml-1"></i> 2.1% |
| </span> |
| <span class="text-gray-500 text-sm mr-2">مقارنة بالأسبوع الماضي</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">معدل التحويل</p> |
| <h3 class="text-2xl font-bold">3.6%</h3> |
| </div> |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
| <i class="fas fa-percentage text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium"> |
| <i class="fas fa-arrow-up ml-1"></i> 1.2% |
| </span> |
| <span class="text-gray-500 text-sm mr-2">مقارنة بالأسبوع الماضي</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6 rtl-grid"> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold">مبيعات الشهر</h2> |
| <div class="flex space-x-2 space-x-reverse"> |
| <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded-lg">شهري</button> |
| <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">سنوي</button> |
| </div> |
| </div> |
| <div class="chart-container"> |
| <canvas id="salesChart"></canvas> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold">مصادر الإيرادات</h2> |
| <button class="text-blue-500 text-sm font-medium">عرض الكل</button> |
| </div> |
| <div class="chart-container"> |
| <canvas id="revenueChart"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 rtl-grid"> |
| |
| <div class="bg-white rounded-lg shadow"> |
| <div class="p-6 border-b border-gray-200"> |
| <h2 class="text-lg font-semibold">الطلبات الحديثة</h2> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-0001</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">محمد علي</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">مكتمل</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$120.00</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-0002</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">سارة أحمد</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">قيد المعالجة</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$85.50</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-0003</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">خالد حسن</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">تم الشحن</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$220.00</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-0004</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">نورا سعيد</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">ملغي</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$65.00</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="p-4 border-t border-gray-200"> |
| <button class="w-full py-2 text-sm font-medium text-blue-600 hover:text-blue-800"> |
| عرض جميع الطلبات |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow"> |
| <div class="p-6 border-b border-gray-200"> |
| <h2 class="text-lg font-semibold">المنتجات الأكثر مبيعاً</h2> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="p-4 flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-md bg-blue-500 flex items-center justify-center"> |
| <i class="fas fa-box text-white"></i> |
| </div> |
| <div class="mr-4 flex-1"> |
| <h4 class="text-sm font-medium text-gray-900">حاسوب محمول</h4> |
| <p class="text-xs text-gray-500">الإلكترونيات</p> |
| </div> |
| <div class="text-sm font-medium text-gray-900">$1,200</div> |
| </div> |
| <div class="p-4 flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-md bg-green-500 flex items-center justify-center"> |
| <i class="fas fa-tshirt text-white"></i> |
| </div> |
| <div class="mr-4 flex-1"> |
| <h4 class="text-sm font-medium text-gray-900">قميص رجالي</h4> |
| <p class="text-xs text-gray-500">الملابس</p> |
| </div> |
| <div class="text-sm font-medium text-gray-900">$45</div> |
| </div> |
| <div class="p-4 flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-md bg-purple-500 flex items-center justify-center"> |
| <i class="fas fa-mobile-alt text-white"></i> |
| </div> |
| <div class="mr-4 flex-1"> |
| <h4 class="text-sm font-medium text-gray-900">هاتف ذكي</h4> |
| <p class="text-xs text-gray-500">الإلكترونيات</p> |
| </div> |
| <div class="text-sm font-medium text-gray-900">$899</div> |
| </div> |
| <div class="p-4 flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-md bg-yellow-500 flex items-center justify-center"> |
| <i class="fas fa-book text-white"></i> |
| </div> |
| <div class="mr-4 flex-1"> |
| <h4 class="text-sm font-medium text-gray-900">كتاب البرمجة</h4> |
| <p class="text-xs text-gray-500">الكتب</p> |
| </div> |
| <div class="text-sm font-medium text-gray-900">$35</div> |
| </div> |
| </div> |
| <div class="p-4 border-t border-gray-200"> |
| <button class="w-full py-2 text-sm font-medium text-blue-600 hover:text-blue-800"> |
| عرض جميع المنتجات |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| |
| document.getElementById('user-menu').addEventListener('click', function() { |
| document.getElementById('user-menu-dropdown').classList.toggle('hidden'); |
| }); |
| |
| |
| document.addEventListener('click', function(event) { |
| if (!event.target.closest('#user-menu') && !event.target.closest('#user-menu-dropdown')) { |
| document.getElementById('user-menu-dropdown').classList.add('hidden'); |
| } |
| }); |
| |
| |
| document.querySelectorAll('.sidebar-item > a').forEach(item => { |
| item.addEventListener('click', function(e) { |
| if (this.nextElementSibling && this.nextElementSibling.classList.contains('sidebar-submenu')) { |
| e.preventDefault(); |
| this.nextElementSibling.classList.toggle('hidden'); |
| const icon = this.querySelector('.fa-chevron-down'); |
| icon.classList.toggle('transform'); |
| icon.classList.toggle('rotate-180'); |
| } |
| }); |
| }); |
| |
| |
| const salesCtx = document.getElementById('salesChart').getContext('2d'); |
| const salesChart = new Chart(salesCtx, { |
| type: 'line', |
| data: { |
| labels: ['1', '5', '10', '15', '20', '25', '30'], |
| datasets: [{ |
| label: 'المبيعات', |
| data: [1200, 1900, 1500, 2300, 1800, 2500, 3000], |
| backgroundColor: 'rgba(59, 130, 246, 0.05)', |
| borderColor: 'rgba(59, 130, 246, 1)', |
| borderWidth: 2, |
| tension: 0.4, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| display: true, |
| color: 'rgba(0, 0, 0, 0.05)' |
| }, |
| ticks: { |
| callback: function(value) { |
| return '$' + value; |
| } |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const revenueCtx = document.getElementById('revenueChart').getContext('2d'); |
| const revenueChart = new Chart(revenueCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['الإلكترونيات', 'الملابس', 'الأثاث', 'الكتب'], |
| datasets: [{ |
| data: [45, 25, 20, 10], |
| backgroundColor: [ |
| 'rgba(59, 130, 246, 0.8)', |
| 'rgba(16, 185, 129, 0.8)', |
| 'rgba(139, 92, 246, 0.8)', |
| 'rgba(245, 158, 11, 0.8)' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right', |
| rtl: true, |
| labels: { |
| usePointStyle: true, |
| padding: 20 |
| } |
| } |
| }, |
| cutout: '70%' |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Almanaei/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
