Spaces:

alkobr
/

secondproject2

Running

# Arabic Product Management Page Design Prompt for AI Generator ## Project Overview Create a comprehensive Arabic product management interface for the Conversena e-commerce AI platform. This page allows business owners to manage their product catalog, inventory, variants, and product settings with full Arabic RTL support. ## Navigation Context - **Access Point**: User clicks "المنتجات" (Products) from the right sidebar - **Page Route**: `/products` - **Breadcrumb**: الرئيسية > المنتجات - **Active State**: Products menu item highlighted in sidebar ## Language & Direction Requirements - **Primary Language**: Arabic (العربية) - **Text Direction**: Right-to-Left (RTL) layout - **Typography**: Arabic-friendly fonts (Tajawal, Cairo, or Amiri) - **Numbers**: Support both Arabic-Indic (٠١٢٣) and Western (0123) numerals ## Page Layout Structure ### 1. Page Header (رأس الصفحة) **Position**: Top of main content area **Height**: 80px **Background**: White with subtle shadow #### Header Components: - **Page Title**: "إدارة المنتجات" (Product Management) - **Product Count**: "إجمالي المنتجات: ١٢٤" - **Search Bar**: - Placeholder: "البحث عن منتج..." - Icon: Search icon (right side for RTL) - Width: 320px - **Action Buttons**: - **Primary**: "إضافة منتج جديد" (Add New Product) - Blue button - **Secondary**: "استيراد منتجات" (Import Products) - Gray button - **Tertiary**: "تصدير" (Export) - Outline button ### 2. Filter & Sort Bar (شريط التصفية والترتيب) **Position**: Below header **Height**: 60px **Background**: Light gray (#f8fafc) #### Filter Options: - **Category Dropdown**: "جميع الفئات" (All Categories) - **Stock Status**: "حالة المخزون" with options: - متوفر (Available) - منخفض (Low Stock) - نفد المخزون (Out of Stock) - **Price Range**: "نطاق السعر" with min/max inputs - **Sort By**: "ترتيب حسب" with options: - الأحدث (Newest) - الأقدم (Oldest) - السعر (الأقل أولاً) (Price: Low to High) - السعر (الأعلى أولاً) (Price: High to Low) - الأكثر مبيعاً (Best Selling) #### Quick Filters (تصفية سريعة): - **Chips**: منتجات نشطة، تحتاج تحديث، تحذيرات مخزون - **Clear All**: "مسح الكل" link ### 3. Product Statistics Cards (بطاقات إحصائيات المنتجات) **Layout**: 4 cards in a row (responsive) **Position**: Below filter bar #### Card 1: إجمالي المنتجات (Total Products) - **Number**: ١٢٤ - **Subtitle**: +٨ هذا الشهر - **Icon**: Package icon - **Color**: Blue theme #### Card 2: المنتجات النشطة (Active Products) - **Number**: ١١٧ - **Subtitle**: ٩٤.٤٪ من الإجمالي - **Icon**: Check circle icon - **Color**: Green theme #### Card 3: تحذيرات المخزون (Stock Warnings) - **Number**: ١٢ - **Subtitle**: تحتاج إعادة تموين - **Icon**: Warning icon - **Color**: Orange theme #### Card 4: نفد المخزون (Out of Stock) - **Number**: ٧ - **Subtitle**: ٥.٦٪ من الإجمالي - **Icon**: X circle icon - **Color**: Red theme ### 4. Product Table/Grid View (عرض المنتجات) **Default View**: Table view with option to switch to grid **Position**: Main content area #### View Toggle: - **Table View**: جدول (default) - **Grid View**: شبكة - **List View**: قائمة #### Table Columns (أعمدة الجدول): 1. **صورة المنتج** (Product Image) - 80px thumbnail 2. **اسم المنتج** (Product Name) - With SKU below 3. **الفئة** (Category) - Badge style 4. **السعر** (Price) - With currency (ريال) 5. **المخزون** (Stock) - With status indicator 6. **الحالة** (Status) - Active/Inactive toggle 7. **آخر تحديث** (Last Updated) - Relative time 8. **الإجراءات** (Actions) - Dropdown menu #### Table Features: - **Pagination**: Arabic pagination with "السابق/التالي" - **Bulk Actions**: Select multiple products - **Inline Editing**: Click to edit price and stock - **Status Indicators**: - أخضر (Green): Stock > 10 - أصفر (Yellow): Stock 1-10 - أحمر (Red): Stock = 0 - **Row Actions**: - عرض (View) - تحرير (Edit) - تكرار (Duplicate) - حذف (Delete) ### 5. Product Grid View (عرض الشبكة) **Layout**: 4 columns desktop, 2 tablet, 1 mobile **Card Design**: Product cards with hover effects #### Product Card Components: - **Product Image**: 240x240px with overlay actions - **Product Name**: Bold, 16px - **SKU**: Gray, 12px - **Category**: Small badge - **Price**: Large, colored text - **Stock Info**: - متوفر (Available) - Green - منخفض (Low) - Yellow - نفد المخزون (Out of Stock) - Red - **Quick Actions**: Edit, View, Duplicate icons on hover ### 6. Bulk Actions Panel (لوحة الإجراءات المجمعة) **Position**: Appears when products are selected **Style**: Floating panel at bottom #### Available Actions: - **تحديث الحالة** (Update Status) - **تطبيق خصم** (Apply Discount) - **تصدير المحددة** (Export Selected) - **حذف المحددة** (Delete Selected) - **نقل إلى فئة** (Move to Category) ### 7. Empty State (الحالة الفارغة) **Display**: When no products exist or no search results #### Empty State Content: - **Illustration**: Empty box or package icon - **Title**: "لا توجد منتجات" - **Subtitle**: "ابدأ بإضافة منتجك الأول" - **CTA Button**: "إضافة منتج جديد" ### 8. Low Stock Alert Banner (تنبيه المخزون المنخفض) **Position**: Above table when low stock products exist **Style**: Warning banner with dismiss option #### Banner Content: - **Icon**: Warning triangle - **Message**: "لديك ١٢ منتجاً بمخزون منخفض" - **Action**: "عرض المنتجات" link - **Dismiss**: X button ## Interactive Elements ### 1. Add Product Button Action **Behavior**: Opens "إضافة منتج جديد" page/modal **Route**: `/products/add` ### 2. Product Row Click **Behavior**: Navigate to product details page **Route**: `/products/:id` ### 3. Edit Product **Behavior**: Navigate to edit page or open edit modal **Route**: `/products/:id/edit` ### 4. Stock Update **Behavior**: Inline editing with auto-save **Validation**: Prevent negative numbers ### 5. Status Toggle **Behavior**: Immediate update with confirmation **Feedback**: Success toast message ## Design Specifications ### Color Scheme - **Primary**: #3b82f6 (Blue) - **Success**: #10b981 (Green) - **Warning**: #f59e0b (Orange) - **Danger**: #ef4444 (Red) - **Background**: #ffffff (White) - **Surface**: #f8fafc (Light gray) - **Text Primary**: #1f2937 - **Text Secondary**: #6b7280 ### Typography - **Page Title**: Bold, 28px - **Section Headers**: Semibold, 20px - **Table Headers**: Medium, 14px - **Body Text**: Regular, 14px - **Small Text**: Regular, 12px ### Spacing & Layout - **Page Padding**: 24px - **Section Margins**: 32px bottom - **Card Padding**: 20px - **Table Cell Padding**: 12px vertical, 16px horizontal ### Responsive Breakpoints - **Desktop**: 1200px+ - **Tablet**: 768px - 1199px - **Mobile**: < 768px ## Arabic-Specific Features ### Text & Numbers - **Product Names**: Support Arabic product names - **Price Display**: "١٢٥ ريال" format - **Stock Numbers**: Both Arabic and Western numerals - **Dates**: Arabic date format with proper calendar ### Cultural Considerations - **Product Categories**: Common Arabic business categories - **Unit Measurements**: Metric system (كيلو، جرام، متر) - **Currency**: Saudi Riyal as primary, multi-currency support ## States & Feedback ### Loading States - **Table Loading**: Skeleton rows - **Card Loading**: Skeleton cards - **Action Loading**: Spinner on buttons ### Error States - **Network Error**: Retry button with message - **Validation Error**: Inline error messages - **No Results**: Empty state with search suggestion ### Success States - **Save Success**: Toast notification - **Delete Success**: Confirmation with undo option - **Import Success**: Progress indicator with results ## Accessibility Features - **ARIA Labels**: All interactive elements - **Keyboard Navigation**: Full keyboard support - **Screen Reader**: Arabic screen reader compatibility - **Focus Management**: Proper focus indicators - **Color Contrast**: WCAG AA compliance ## Technical Requirements - **Framework**: React with RTL support - **Styling**: Tailwind CSS with RTL variants - **Icons**: Lucide React or Heroicons - **Tables**: React Table or similar - **Forms**: React Hook Form with validation - **State Management**: React Query for data fetching Create a comprehensive, user-friendly Arabic product management interface that allows business owners to efficiently manage their product catalog with modern UX patterns and Arabic cultural considerations. - Follow Up Deployment

b0b6d49 verified over 1 year ago

Raw History Blame Contribute Delete

29.3 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@300;400;500;700&display=swap');
        
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #f8fafc;
        }
        
        .rtl-grid {
            direction: rtl;
        }
        
        .product-card:hover .product-actions {
            opacity: 1;
            transform: translateY(0);
        }
        
        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
        }
        
        .stock-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-left: 5px;
        }
        
        /* Custom scrollbar for RTL */
        .rtl-scroll {
            direction: ltr;
            overflow-y: auto;
        }
        .rtl-scroll-content {
            direction: rtl;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="flex flex-col min-h-screen">
        <!-- Header -->
        <header class="bg-white shadow-sm py-4 px-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-800">إدارة المنتجات</h1>
                    <p class="text-sm text-gray-500">إجمالي المنتجات: ١٢٤</p>
                </div>
                
                <div class="flex items-center space-x-3 space-x-reverse">
                    <div class="relative">
                        <input type="text" placeholder="البحث عن منتج..." class="pr-10 pl-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-80">
                        <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                    </div>
                    
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                        <i class="fas fa-plus ml-2"></i>
                        إضافة منتج جديد
                    </button>
                    
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center">
                        <i class="fas fa-file-import ml-2"></i>
                        استيراد منتجات
                    </button>
                    
                    <button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center">
                        <i class="fas fa-file-export ml-2"></i>
                        تصدير
                    </button>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-1 p-6">
            <!-- Filter Bar -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center space-x-4 space-x-reverse">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">جميع الفئات</label>
                            <select class="border border-gray-300 rounded-lg px-3 py-2 w-40">
                                <option>جميع الفئات</option>
                                <option>أجهزة إلكترونية</option>
                                <option>ملابس</option>
                                <option>أثاث</option>
                                <option>أطعمة</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">حالة المخزون</label>
                            <select class="border border-gray-300 rounded-lg px-3 py-2 w-40">
                                <option>الكل</option>
                                <option>متوفر</option>
                                <option>منخفض</option>
                                <option>نفد المخزون</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">نطاق السعر</label>
                            <div class="flex items-center space-x-2 space-x-reverse">
                                <input type="number" placeholder="الحد الأدنى" class="border border-gray-300 rounded-lg px-3 py-2 w-24">
                                <span>إلى</span>
                                <input type="number" placeholder="الحد الأقصى" class="border border-gray-300 rounded-lg px-3 py-2 w-24">
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-4 space-x-reverse">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">ترتيب حسب</label>
                            <select class="border border-gray-300 rounded-lg px-3 py-2 w-40">
                                <option>الأحدث</option>
                                <option>الأقدم</option>
                                <option>السعر (الأقل أولاً)</option>
                                <option>السعر (الأعلى أولاً)</option>
                                <option>الأكثر مبيعاً</option>
                            </select>
                        </div>
                        
                        <div class="flex items-center space-x-2 space-x-reverse pt-6">
                            <span class="text-sm text-gray-500">تصفية سريعة:</span>
                            <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>
                            <a href="#" class="text-sm text-blue-600 hover:underline">مسح الكل</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                <div class="bg-white rounded-lg shadow-sm p-6 border-r-4 border-blue-500">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">إجمالي المنتجات</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 text-blue-600">
                            <i class="fas fa-box text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-sm p-6 border-r-4 border-green-500">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">المنتجات النشطة</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 text-green-600">
                            <i class="fas fa-check-circle text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-sm p-6 border-r-4 border-yellow-500">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">تحذيرات المخزون</p>
                            <h3 class="text-2xl font-bold mt-1">١٢</h3>
                            <p class="text-yellow-500 text-sm mt-1">تحتاج إعادة تموين</p>
                        </div>
                        <div class="bg-yellow-100 p-3 rounded-full text-yellow-600">
                            <i class="fas fa-exclamation-triangle text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-sm p-6 border-r-4 border-red-500">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm">نفد المخزون</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 text-red-600">
                            <i class="fas fa-times-circle text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Low Stock Alert -->
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-lg flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-yellow-500 text-xl ml-3"></i>
                    <div>
                        <h4 class="font-medium text-yellow-800">لديك ١٢ منتجاً بمخزون منخفض</h4>
                        <p class="text-sm text-yellow-700">بعض المنتجات على وشك النفاد من المخزون</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3 space-x-reverse">
                    <a href="#" class="text-yellow-700 hover:underline font-medium">عرض المنتجات</a>
                    <button class="text-yellow-500 hover:text-yellow-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            
            <!-- View Toggle -->
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center space-x-2 space-x-reverse">
                    <button class="bg-blue-100 text-blue-600 px-3 py-1 rounded-lg">
                        <i class="fas fa-table mr-1"></i>
                        جدول
                    </button>
                    <button class="bg-white border border-gray-300 text-gray-600 px-3 py-1 rounded-lg hover:bg-gray-50">
                        <i class="fas fa-th-large mr-1"></i>
                        شبكة
                    </button>
                    <button class="bg-white border border-gray-300 text-gray-600 px-3 py-1 rounded-lg hover:bg-gray-50">
                        <i class="fas fa-list mr-1"></i>
                        قائمة
                    </button>
                </div>
                
                <div class="text-sm text-gray-500">
                    عرض ١-١٠ من ١٢٤ منتج
                </div>
            </div>
            
            <!-- Products Table -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
                <div class="overflow-x-auto rtl-scroll">
                    <div class="rtl-scroll-content">
                        <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">
                                        <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
                                    </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>
                                    <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">
                                        <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <img src="https://via.placeholder.com/80" alt="Product" class="h-10 w-10 rounded object-cover">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">هاتف سامسونج جالكسي S22</div>
                                        <div class="text-sm text-gray-500">SKU: SAM-S22-BLK</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="bg-blue-100 text-blue-800 status-badge">أجهزة إلكترونية</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">٣٬٤٩٩ ريال</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-900">٤٥</span>
                                            <span class="stock-indicator bg-green-500"></span>
                                        </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 text-right text-sm font-medium">
                                        <div class="relative inline-block text-left">
                                            <button type="button" class="text-gray-400 hover:text-gray-600">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <!-- Product Row 2 -->
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <img src="https://via.placeholder.com/80" alt="Product" class="h-10 w-10 rounded object-cover">
                                    </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-RN-2022</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="bg-purple-100 text-purple-800 status-badge">ملابس</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">٤٩٩ ريال</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-900">٥</span>
                                            <span class="stock-indicator bg-yellow-500"></span>
                                        </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 text-right text-sm font-medium">
                                        <div class="relative inline-block text-left">
                                            <button type="button" class="text-gray-400 hover:text-gray-600">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <!-- Product Row 3 -->
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <img src="https://via.placeholder.com/80" alt="Product" class="h-10 w-10 rounded object-cover">
                                    </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: APP-W-S7</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="bg-blue-100 text-blue-800 status-badge">أجهزة إلكترونية</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">٢٬١١٩٩ ريال</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-900">٠</span>
                                            <span class="stock-indicator bg-red-500"></span>
                                        </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 text-right text-sm font-medium">
                                        <div class="relative inline-block text-left">
                                            <button type="button" class="text-gray-400 hover:text-gray-600">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <!-- More product rows would go here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- Pagination -->
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2 space-x-reverse">
                    <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">
                        السابق
                    </button>
                    <button class="px-3 py-1 bg-blue-600 text-white rounded-lg">1</button>
                    <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">2</button>
                    <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">3</button>
                    <span class="px-2">...</span>
                    <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">10</button>
                    <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">
                        التالي
                    </button>
                </div>
                
                <div class="text-sm text-gray-500">
                    عرض ١٠ منتجات في الصفحة
                </div>
            </div>
        </main>
    </div>

    <!-- Bulk Actions Panel (Hidden by default) -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 p-4 hidden" id="bulkActionsPanel">
        <div class="container mx-auto flex items-center justify-between">
            <div class="flex items-center space-x-4 space-x-reverse">
                <span class="font-medium">٥ منتجات محددة</span>
                
                <select class="border border-gray-300 rounded-lg px-3 py-2">
                    <option>تحديث الحالة</option>
                    <option>تعطيل المنتجات</option>
                    <option>تفعيل المنتجات</option>
                </select>
                
                <select class="border border-gray-300 rounded-lg px-3 py-2">
                    <option>تطبيق خصم</option>
                    <option>خصم 10%</option>
                    <option>خصم 20%</option>
                    <option>خصم 30%</option>
                </select>
                
                <select class="border border-gray-300 rounded-lg px-3 py-2">
                    <option>نقل إلى فئة</option>
                    <option>أجهزة إلكترونية</option>
                    <option>ملابس</option>
                    <option>أثاث</option>
                </select>
            </div>
            
            <div class="flex items-center space-x-3 space-x-reverse">
                <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50">
                    <i class="fas fa-file-export ml-2"></i>
                    تصدير المحددة
                </button>
                
                <button class="bg-red-50 border border-red-200 text-red-600 px-4 py-2 rounded-lg hover:bg-red-100">
                    <i class="fas fa-trash-alt ml-2"></i>
                    حذف المحددة
                </button>
                
                <button class="text-gray-400 hover:text-gray-600" onclick="hideBulkActions()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Toggle bulk actions panel
        function showBulkActions() {
            document.getElementById('bulkActionsPanel').classList.remove('hidden');
        }
        
        function hideBulkActions() {
            document.getElementById('bulkActionsPanel').classList.add('hidden');
        }
        
        // Simulate checkbox selection to show bulk actions
        document.addEventListener('DOMContentLoaded', function() {
            const checkboxes = document.querySelectorAll('input[type="checkbox"]');
            
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
                    
                    if (checkedBoxes.length > 0) {
                        showBulkActions();
                    } else {
                        hideBulkActions();
                    }
                });
            });
        });
    </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/secondproject2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>

	<!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@300;400;500;700&display=swap');

	body {
	font-family: 'Tajawal', sans-serif;
	background-color: #f8fafc;
	}

	.rtl-grid {
	direction: rtl;
	}

	.product-card:hover .product-actions {
	opacity: 1;
	transform: translateY(0);
	}

	.status-badge {
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	}

	.stock-indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	margin-left: 5px;
	}

	/* Custom scrollbar for RTL */
	.rtl-scroll {
	direction: ltr;
	overflow-y: auto;
	}
	.rtl-scroll-content {
	direction: rtl;
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<div class="flex flex-col min-h-screen">
	<!-- Header -->
	<header class="bg-white shadow-sm py-4 px-6">
	<div class="flex items-center justify-between">
	<div>
	<h1 class="text-2xl font-bold text-gray-800">إدارة المنتجات</h1>
	<p class="text-sm text-gray-500">إجمالي المنتجات: ١٢٤</p>
	</div>

	<div class="flex items-center space-x-3 space-x-reverse">
	<div class="relative">
	<input type="text" placeholder="البحث عن منتج..." class="pr-10 pl-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-80">
	<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
	</div>

	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
	<i class="fas fa-plus ml-2"></i>
	إضافة منتج جديد
	</button>

	<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center">
	<i class="fas fa-file-import ml-2"></i>
	استيراد منتجات
	</button>

	<button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center">
	<i class="fas fa-file-export ml-2"></i>
	تصدير
	</button>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="flex-1 p-6">
	<!-- Filter Bar -->
	<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
	<div class="flex flex-wrap items-center justify-between gap-4">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">جميع الفئات</label>
	<select class="border border-gray-300 rounded-lg px-3 py-2 w-40">
	<option>جميع الفئات</option>
	<option>أجهزة إلكترونية</option>
	<option>ملابس</option>
	<option>أثاث</option>
	<option>أطعمة</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">حالة المخزون</label>
	<select class="border border-gray-300 rounded-lg px-3 py-2 w-40">
	<option>الكل</option>
	<option>متوفر</option>
	<option>منخفض</option>
	<option>نفد المخزون</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">نطاق السعر</label>
	<div class="flex items-center space-x-2 space-x-reverse">
	<input type="number" placeholder="الحد الأدنى" class="border border-gray-300 rounded-lg px-3 py-2 w-24">
	<span>إلى</span>
	<input type="number" placeholder="الحد الأقصى" class="border border-gray-300 rounded-lg px-3 py-2 w-24">
	</div>
	</div>
	</div>

	<div class="flex items-center space-x-4 space-x-reverse">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">ترتيب حسب</label>
	<select class="border border-gray-300 rounded-lg px-3 py-2 w-40">
	<option>الأحدث</option>
	<option>الأقدم</option>
	<option>السعر (الأقل أولاً)</option>
	<option>السعر (الأعلى أولاً)</option>
	<option>الأكثر مبيعاً</option>
	</select>
	</div>

	<div class="flex items-center space-x-2 space-x-reverse pt-6">
	<span class="text-sm text-gray-500">تصفية سريعة:</span>
	<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>
	<a href="#" class="text-sm text-blue-600 hover:underline">مسح الكل</a>
	</div>
	</div>
	</div>
	</div>

	<!-- Stats Cards -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
	<div class="bg-white rounded-lg shadow-sm p-6 border-r-4 border-blue-500">
	<div class="flex justify-between items-start">
	<div>
	<p class="text-gray-500 text-sm">إجمالي المنتجات</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 text-blue-600">
	<i class="fas fa-box text-xl"></i>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-lg shadow-sm p-6 border-r-4 border-green-500">
	<div class="flex justify-between items-start">
	<div>
	<p class="text-gray-500 text-sm">المنتجات النشطة</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 text-green-600">
	<i class="fas fa-check-circle text-xl"></i>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-lg shadow-sm p-6 border-r-4 border-yellow-500">
	<div class="flex justify-between items-start">
	<div>
	<p class="text-gray-500 text-sm">تحذيرات المخزون</p>
	<h3 class="text-2xl font-bold mt-1">١٢</h3>
	<p class="text-yellow-500 text-sm mt-1">تحتاج إعادة تموين</p>
	</div>
	<div class="bg-yellow-100 p-3 rounded-full text-yellow-600">
	<i class="fas fa-exclamation-triangle text-xl"></i>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-lg shadow-sm p-6 border-r-4 border-red-500">
	<div class="flex justify-between items-start">
	<div>
	<p class="text-gray-500 text-sm">نفد المخزون</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 text-red-600">
	<i class="fas fa-times-circle text-xl"></i>
	</div>
	</div>
	</div>
	</div>

	<!-- Low Stock Alert -->
	<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-lg flex items-center justify-between">
	<div class="flex items-center">
	<i class="fas fa-exclamation-triangle text-yellow-500 text-xl ml-3"></i>
	<div>
	<h4 class="font-medium text-yellow-800">لديك ١٢ منتجاً بمخزون منخفض</h4>
	<p class="text-sm text-yellow-700">بعض المنتجات على وشك النفاد من المخزون</p>
	</div>
	</div>
	<div class="flex items-center space-x-3 space-x-reverse">
	<a href="#" class="text-yellow-700 hover:underline font-medium">عرض المنتجات</a>
	<button class="text-yellow-500 hover:text-yellow-700">
	<i class="fas fa-times"></i>
	</button>
	</div>
	</div>

	<!-- View Toggle -->
	<div class="flex justify-between items-center mb-4">
	<div class="flex items-center space-x-2 space-x-reverse">
	<button class="bg-blue-100 text-blue-600 px-3 py-1 rounded-lg">
	<i class="fas fa-table mr-1"></i>
	جدول
	</button>
	<button class="bg-white border border-gray-300 text-gray-600 px-3 py-1 rounded-lg hover:bg-gray-50">
	<i class="fas fa-th-large mr-1"></i>
	شبكة
	</button>
	<button class="bg-white border border-gray-300 text-gray-600 px-3 py-1 rounded-lg hover:bg-gray-50">
	<i class="fas fa-list mr-1"></i>
	قائمة
	</button>
	</div>

	<div class="text-sm text-gray-500">
	عرض ١-١٠ من ١٢٤ منتج
	</div>
	</div>

	<!-- Products Table -->
	<div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
	<div class="overflow-x-auto rtl-scroll">
	<div class="rtl-scroll-content">
	<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">
	<input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
	</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>
	<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">
	<input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<img src="https://via.placeholder.com/80" alt="Product" class="h-10 w-10 rounded object-cover">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm font-medium text-gray-900">هاتف سامسونج جالكسي S22</div>
	<div class="text-sm text-gray-500">SKU: SAM-S22-BLK</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="bg-blue-100 text-blue-800 status-badge">أجهزة إلكترونية</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">٣٬٤٩٩ ريال</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<span class="text-sm text-gray-900">٤٥</span>
	<span class="stock-indicator bg-green-500"></span>
	</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 text-right text-sm font-medium">
	<div class="relative inline-block text-left">
	<button type="button" class="text-gray-400 hover:text-gray-600">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</td>
	</tr>

	<!-- Product Row 2 -->
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<img src="https://via.placeholder.com/80" alt="Product" class="h-10 w-10 rounded object-cover">
	</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-RN-2022</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="bg-purple-100 text-purple-800 status-badge">ملابس</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">٤٩٩ ريال</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<span class="text-sm text-gray-900">٥</span>
	<span class="stock-indicator bg-yellow-500"></span>
	</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 text-right text-sm font-medium">
	<div class="relative inline-block text-left">
	<button type="button" class="text-gray-400 hover:text-gray-600">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</td>
	</tr>

	<!-- Product Row 3 -->
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<img src="https://via.placeholder.com/80" alt="Product" class="h-10 w-10 rounded object-cover">
	</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: APP-W-S7</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="bg-blue-100 text-blue-800 status-badge">أجهزة إلكترونية</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">٢٬١١٩٩ ريال</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<span class="text-sm text-gray-900">٠</span>
	<span class="stock-indicator bg-red-500"></span>
	</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 text-right text-sm font-medium">
	<div class="relative inline-block text-left">
	<button type="button" class="text-gray-400 hover:text-gray-600">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</td>
	</tr>

	<!-- More product rows would go here -->
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- Pagination -->
	<div class="flex items-center justify-between">
	<div class="flex items-center space-x-2 space-x-reverse">
	<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">
	السابق
	</button>
	<button class="px-3 py-1 bg-blue-600 text-white rounded-lg">1</button>
	<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">2</button>
	<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">3</button>
	<span class="px-2">...</span>
	<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">10</button>
	<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">
	التالي
	</button>
	</div>

	<div class="text-sm text-gray-500">
	عرض ١٠ منتجات في الصفحة
	</div>
	</div>
	</main>
	</div>

	<!-- Bulk Actions Panel (Hidden by default) -->
	<div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 p-4 hidden" id="bulkActionsPanel">
	<div class="container mx-auto flex items-center justify-between">
	<div class="flex items-center space-x-4 space-x-reverse">
	<span class="font-medium">٥ منتجات محددة</span>

	<select class="border border-gray-300 rounded-lg px-3 py-2">
	<option>تحديث الحالة</option>
	<option>تعطيل المنتجات</option>
	<option>تفعيل المنتجات</option>
	</select>

	<select class="border border-gray-300 rounded-lg px-3 py-2">
	<option>تطبيق خصم</option>
	<option>خصم 10%</option>
	<option>خصم 20%</option>
	<option>خصم 30%</option>
	</select>

	<select class="border border-gray-300 rounded-lg px-3 py-2">
	<option>نقل إلى فئة</option>
	<option>أجهزة إلكترونية</option>
	<option>ملابس</option>
	<option>أثاث</option>
	</select>
	</div>

	<div class="flex items-center space-x-3 space-x-reverse">
	<button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50">
	<i class="fas fa-file-export ml-2"></i>
	تصدير المحددة
	</button>

	<button class="bg-red-50 border border-red-200 text-red-600 px-4 py-2 rounded-lg hover:bg-red-100">
	<i class="fas fa-trash-alt ml-2"></i>
	حذف المحددة
	</button>

	<button class="text-gray-400 hover:text-gray-600" onclick="hideBulkActions()">
	<i class="fas fa-times"></i>
	</button>
	</div>
	</div>
	</div>

	<script>
	// Toggle bulk actions panel
	function showBulkActions() {
	document.getElementById('bulkActionsPanel').classList.remove('hidden');
	}

	function hideBulkActions() {
	document.getElementById('bulkActionsPanel').classList.add('hidden');
	}

	// Simulate checkbox selection to show bulk actions
	document.addEventListener('DOMContentLoaded', function() {
	const checkboxes = document.querySelectorAll('input[type="checkbox"]');

	checkboxes.forEach(checkbox => {
	checkbox.addEventListener('change', function() {
	const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');

	if (checkedBoxes.length > 0) {
	showBulkActions();
	} else {
	hideBulkActions();
	}
	});
	});
	});
	</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/secondproject2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>