Spaces:

---

alkobr

/

secondproject2

Like 0

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