4project / index.html
alkobr's picture
undefined - Initial Deployment
de2dafe verified
Raw History Blame Contribute Delete
38.4 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>إدارة المنتجات - Conversena</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;
background-color: #f8fafc;
}
.rtl-input {
direction: rtl;
text-align: right;
}
.product-image {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
.grid-product-image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
}
.status-badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.stock-high {
background-color: #ecfdf5;
color: #065f46;
}
.stock-medium {
background-color: #fef3c7;
color: #92400e;
}
.stock-low {
background-color: #fee2e2;
color: #991b1b;
}
.toggle-checkbox:checked {
right: 0;
border-color: #3b82f6;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #3b82f6;
}
.toggle-label {
transition: all 0.3s ease;
}
.pagination .active {
background-color: #3b82f6;
color: white;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.quick-actions {
opacity: 0;
transition: opacity 0.2s ease;
}
.product-card:hover .quick-actions {
opacity: 1;
}
@media (max-width: 768px) {
.product-image {
width: 60px;
height: 60px;
}
.grid-product-image {
height: 120px;
}
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-6">
<!-- Page Header -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<h1 class="text-2xl font-bold text-gray-800">إدارة المنتجات</h1>
<p class="text-gray-500 mt-1">إجمالي المنتجات: ١٢٤</p>
</div>
<div class="flex flex-col md:flex-row gap-3">
<div class="relative">
<input type="text" placeholder="البحث عن منتج..."
class="rtl-input pr-10 pl-4 py-2 border border-gray-300 rounded-lg w-full md:w-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
</div>
<div class="flex gap-3">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-plus"></i>
<span>إضافة منتج جديد</span>
</button>
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-file-import"></i>
<span>استيراد منتجات</span>
</button>
<button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-file-export"></i>
<span>تصدير</span>
</button>
</div>
</div>
</div>
</div>
<!-- Filter & Sort Bar -->
<div class="bg-gray-50 rounded-lg shadow-sm p-4 mb-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div class="flex flex-wrap gap-3">
<select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>جميع الفئات</option>
<option>أجهزة إلكترونية</option>
<option>ملابس</option>
<option>أثاث</option>
</select>
<select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>حالة المخزون</option>
<option>متوفر</option>
<option>منخفض</option>
<option>نفد المخزون</option>
</select>
<div class="flex items-center gap-2">
<input type="number" placeholder="الحد الأدنى" class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<span>إلى</span>
<input type="number" placeholder="الحد الأقصى" class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>ترتيب حسب</option>
<option>الأحدث</option>
<option>الأقدم</option>
<option>السعر (الأقل أولاً)</option>
<option>السعر (الأعلى أولاً)</option>
<option>الأكثر مبيعاً</option>
</select>
</div>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-500">تصفية سريعة:</span>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">منتجات نشطة</span>
<span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">تحتاج تحديث</span>
<span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">تحذيرات مخزون</span>
</div>
<a href="#" class="text-sm text-blue-600 hover:underline">مسح الكل</a>
</div>
</div>
</div>
<!-- Product Statistics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">إجمالي المنتجات</p>
<h3 class="text-2xl font-bold mt-1">١٢٤</h3>
<p class="text-green-500 text-sm mt-1">+٨ هذا الشهر</p>
</div>
<div class="bg-blue-100 p-3 rounded-full">
<i class="fas fa-box text-blue-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">المنتجات النشطة</p>
<h3 class="text-2xl font-bold mt-1">١١٧</h3>
<p class="text-gray-500 text-sm mt-1">٩٤.٤٪ من الإجمالي</p>
</div>
<div class="bg-green-100 p-3 rounded-full">
<i class="fas fa-check-circle text-green-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">تحذيرات المخزون</p>
<h3 class="text-2xl font-bold mt-1">١٢</h3>
<p class="text-orange-500 text-sm mt-1">تحتاج إعادة تموين</p>
</div>
<div class="bg-orange-100 p-3 rounded-full">
<i class="fas fa-exclamation-triangle text-orange-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">نفد المخزون</p>
<h3 class="text-2xl font-bold mt-1">٧</h3>
<p class="text-gray-500 text-sm mt-1">٥.٦٪ من الإجمالي</p>
</div>
<div class="bg-red-100 p-3 rounded-full">
<i class="fas fa-times-circle text-red-600 text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Low Stock Alert Banner -->
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-exclamation-triangle text-yellow-600"></i>
<p class="text-yellow-800">لديك ١٢ منتجاً بمخزون منخفض</p>
<a href="#" class="text-yellow-700 hover:underline font-medium">عرض المنتجات</a>
</div>
<button class="text-yellow-600 hover:text-yellow-800">
<i class="fas fa-times"></i>
</button>
</div>
<!-- View Toggle -->
<div class="flex justify-end mb-4">
<div class="inline-flex rounded-md shadow-sm">
<button type="button" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-r-lg hover:bg-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-500">
<i class="fas fa-table mr-2"></i> جدول
</button>
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500">
<i class="fas fa-th-large mr-2"></i> شبكة
</button>
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500">
<i class="fas fa-list mr-2"></i> قائمة
</button>
</div>
</div>
<!-- Product Table View -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
صورة المنتج
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
اسم المنتج
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
الفئة
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
السعر
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
المخزون
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
الحالة
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
آخر تحديث
</th>
<th scope="col" 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">
<!-- Product Row 1 -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="product-image">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">حذاء رياضي نايكي</div>
<div class="text-sm text-gray-500">SKU: NK-2023-01</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 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">
٣٤٩ ريال
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge stock-high">متوفر (٤٥)</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
منذ يومين
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="dropdown relative">
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden">
<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>
<a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">حذف</a>
</div>
</div>
</td>
</tr>
<!-- Product Row 2 -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="product-image">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">ساعة ذكية من سامسونج</div>
<div class="text-sm text-gray-500">SKU: SS-2023-02</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
إلكترونيات
</span>
</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="status-badge stock-medium">منخفض (٥)</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
منذ أسبوع
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="dropdown relative">
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden">
<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>
<a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">حذف</a>
</div>
</div>
</td>
</tr>
<!-- Product Row 3 -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<img src="https://images.unsplash.com/photo-1491553895911-0055e52d5d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="product-image">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">حقيبة ظهر للسفر</div>
<div class="text-sm text-gray-500">SKU: BG-2023-03</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 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">
١٩٩ ريال
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge stock-low">نفد المخزون (٠)</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
منذ شهر
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="dropdown relative">
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden">
<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>
<a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">حذف</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
السابق
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
التالي
</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
عرض
<span class="font-medium">١</span>
إلى
<span class="font-medium">١٠</span>
من
<span class="font-medium">١٢٤</span>
نتائج
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">السابق</span>
<i class="fas fa-chevron-right"></i>
</a>
<a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1
</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
2
</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
...
</span>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
8
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">التالي</span>
<i class="fas fa-chevron-left"></i>
</a>
</nav>
</div>
</div>
</div>
</div>
<!-- Product Grid View (Hidden by default) -->
<div class="hidden">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-6">
<!-- Product Card 1 -->
<div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="grid-product-image">
<div class="quick-actions absolute top-3 right-3 flex gap-2">
<button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-blue-600">
<i class="fas fa-edit text-sm"></i>
</button>
<button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-green-600">
<i class="fas fa-eye text-sm"></i>
</button>
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-gray-800 mb-1">حذاء رياضي نايكي</h3>
<p class="text-gray-500 text-sm mb-2">SKU: NK-2023-01</p>
<div class="flex justify-between items-center">
<span class="font-bold text-gray-800">٣٤٩ ريال</span>
<span class="status-badge stock-high">متوفر</span>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="grid-product-image">
<div class="quick-actions absolute top-3 right-3 flex gap-2">
<button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-blue-600">
<i class="fas fa-edit text-sm"></i>
</button>
<button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-green-600">
<i class="fas fa-eye text-sm"></i>
</button>
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-gray-800 mb-1">ساعة ذكية من سامسونج</h3>
<p class="text-gray-500 text-sm mb-2">SKU: SS-2023-02</p>
<div class="flex justify-between items-center">
<span class="font-bold text-gray-800">٨٩٩ ريال</span>
<span class="status-badge stock-medium">منخفض</span>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1491553895911-0055e52d5d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="grid-product-image">
<div class="quick-actions absolute top-3 right-3 flex gap-2">
<button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-blue-600">
<i class="fas fa-edit text-sm"></i>
</button>
<button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-green-600">
<i class="fas fa-eye text-sm"></i>
</button>
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-gray-800 mb-1">حقيبة ظهر للسفر</h3>
<p class="text-gray-500 text-sm mb-2">SKU: BG-2023-03</p>
<div class="flex justify-between items-center">
<span class="font-bold text-gray-800">١٩٩ ريال</span>
<span class="status-badge stock-low">نفد</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bulk Actions Panel (Hidden by default) -->
<div class="hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center gap-4">
<span class="font-medium">تم تحديد ٣ منتجات</span>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex gap-3">
<select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>تحديث الحالة</option>
<option>تفعيل</option>
<option>تعطيل</option>
</select>
<select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>تطبيق خصم</option>
<option>١٠٪ خصم</option>
<option>٢٠٪ خصم</option>
</select>
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-file-export"></i>
<span>تصدير المحددة</span>
</button>
<button class="bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-trash"></i>
<span>حذف المحددة</span>
</button>
</div>
</div>
</div>
<script>
// Toggle dropdown menus
document.querySelectorAll('.dropdown button').forEach(button => {
button.addEventListener('click', (e) => {
e.stopPropagation();
const dropdown = button.parentElement;
const menu = dropdown.querySelector('.dropdown-menu');
// Close all other open dropdowns
document.querySelectorAll('.dropdown-menu').forEach(m => {
if (m !== menu) m.classList.add('hidden');
});
// Toggle current dropdown
menu.classList.toggle('hidden');
});
});
// Close dropdowns when clicking outside
document.addEventListener('click', () => {
document.querySelectorAll('.dropdown-menu').forEach(menu => {
menu.classList.add('hidden');
});
});
// Toggle between table and grid view
const viewToggleButtons = document.querySelectorAll('.inline-flex button');
const tableView = document.querySelector('.overflow-x-auto');
const gridView = document.querySelector('.grid');
viewToggleButtons.forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons
viewToggleButtons.forEach(btn => {
btn.classList.remove('bg-blue-600', 'text-white');
btn.classList.add('bg-white', 'text-gray-700');
});
// Add active class to clicked button
button.classList.add('bg-blue-600', 'text-white');
button.classList.remove('bg-white', 'text-gray-700');
// Toggle views
if (button.textContent.includes('جدول')) {
tableView.classList.remove('hidden');
gridView.classList.add('hidden');
} else if (button.textContent.includes('شبكة')) {
tableView.classList.add('hidden');
gridView.classList.remove('hidden');
}
});
});
// Simulate selecting products to show bulk actions panel
setTimeout(() => {
// Uncomment to show bulk actions panel by default for demo
// document.querySelector('.fixed.bottom-0').classList.remove('hidden');
}, 1000);
</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=alkobr/4project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>