Spaces:
Running
Running
Commit History
-
# 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
Verified signatureb0b6d49 -
undefined - Follow Up Deployment
Verified signature8d0e588
-
# Arabic Dashboard Design Prompt for AI Generator ## Project Overview Create a modern, professional Arabic dashboard interface for the Conversena e-commerce AI platform. This is a comprehensive business intelligence dashboard for managing conversational commerce operations. ## Language & Direction Requirements - **Primary Language**: Arabic (العربية) - **Text Direction**: Right-to-Left (RTL) layout - **Secondary Languages**: Support for Hebrew and English (displayed in UI toggles) - **Typography**: Use Arabic-friendly fonts like Tajawal, Cairo, or Amiri ## Layout Structure ### Sidebar Navigation (الشريط الجانبي) **Position**: Right side of screen (RTL layout) **Width**: 280px desktop, collapsible to 60px **Background**: Dark gradient (#1a1d29 to #2d3748) #### Navigation Items (from top to bottom): 1. **لوحة التحكم** (Dashboard) - Active state 2. **المنتجات** (Products) - With sub-menu indicator 3. **الطلبات** (Orders) - With notification badge 4. **العملاء** (Customers) 5. **المحادثات** (Conversations) - With escalation alert 6. **القنوات** (Channels) 7. **البث** (Broadcasts) 8. **الفريق** (Team) 9. **الإعدادات** (Settings) #### Sidebar Features: - Company logo at top - User profile section at bottom - Collapse/expand toggle button - Active state highlighting - Hover effects with smooth transitions ### Main Content Area (المحتوى الرئيسي) **Layout**: Responsive grid system **Padding**: 24px all sides **Background**: Light gray (#f8fafc) ## Dashboard Components ### 1. Header Section - **Welcome Message**: "مرحباً بك، أحمد" (Welcome, Ahmed) - **Date Range Picker**: With Arabic date format - **Quick Actions**: Notification bell, profile dropdown - **Language Toggle**: AR/HE/EN switcher ### 2. KPI Cards Row (بطاقات المؤشرات) Create 4 cards in a responsive row: #### Card 1: محادثات اليوم (Today's Conversations) - **Main Number**: 127 - **Subtitle**: زيادة 23% عن الأمس - **Icon**: Chat bubble icon - **Color**: Blue theme (#3b82f6) #### Card 2: الطلبات المكتملة (Completed Orders) - **Main Number**: 45 - **Subtitle**: إجمالي المبيعات: 12,450 ريال - **Icon**: Shopping cart icon - **Color**: Green theme (#10b981) #### Card 3: معدل التحويل (Conversion Rate) - **Main Number**: 35.4% - **Subtitle**: تحسن 5.2% هذا الأسبوع - **Icon**: Trending up icon - **Color**: Orange theme (#f59e0b) #### Card 4: منتجات منخفضة المخزون (Low Stock Products) - **Main Number**: 8 - **Subtitle**: تحتاج إعادة تموين - **Icon**: Warning icon - **Color**: Red theme (#ef4444) ### 3. Main Content Grid (الشبكة الرئيسية) **Layout**: 2-column grid on desktop, 1-column on mobile #### Left Column (العمود الأيسر): ##### Analytics Overview Chart (نظرة عامة على التحليلات) - **Title**: "أداء المحادثات الأسبوعي" - **Chart Type**: Line chart showing conversations vs conversions - **Time Period**: Last 7 days - **Interactive**: Hover tooltips with Arabic numbers ##### Top Products Table (أفضل المنتجات) - **Title**: "المنتجات الأكثر طلباً" - **Columns**: اسم المنتج | الاستفسارات | المبيعات | المخزون - **Rows**: 5 top products with product images - **Action**: View details button #### Right Column (العمود الأيمن): ##### Recent Orders (الطلبات الأخيرة) - **Title**: "آخر الطلبات" - **Display**: Order cards with customer name, products, status - **Status Indicators**: - تم التسليم (Delivered) - Green - قيد التوصيل (In Transit) - Blue - عالق (Stuck) - Red - **Action**: View all orders link ##### Escalation Alerts (تنبيهات التصعيد) - **Title**: "المحادثات المتصاعدة" - **Display**: Alert cards with customer info and reason - **Priority Levels**: عالي، متوسط، منخفض - **Action**: Handle escalation button ### 4. Quick Actions Panel (لوحة الإجراءات السريعة) Floating action buttons at bottom-right: - **Add Product**: إضافة منتج - **New Broadcast**: بث جديد - **Manual Order**: طلب يدوي ## Design Specifications ### Color Scheme - **Primary**: #3b82f6 (Blue) - **Secondary**: #10b981 (Green) - **Accent**: #f59e0b (Orange) - **Danger**: #ef4444 (Red) - **Background**: #f8fafc (Light gray) - **Text**: #1f2937 (Dark gray) - **Sidebar**: #1a1d29 (Dark blue) ### Typography - **Headers**: Bold, 24px-18px - **Body**: Regular, 14px-16px - **Captions**: Light, 12px-14px - **Numbers**: Monospace font for consistency ### Interactions - **Hover Effects**: Subtle shadows and color changes - **Loading States**: Skeleton screens for data loading - **Animations**: Smooth transitions (300ms ease-in-out) - **Responsive**: Mobile-first approach ### Arabic-Specific Design Elements - **Number Format**: Use Arabic-Indic numerals (٠١٢٣٤٥٦٧٨٩) option - **Calendar**: Hijri calendar support - **Currency**: Saudi Riyal (ريال) formatting - **Time Format**: 24-hour with Arabic AM/PM ## Technical Requirements - **Framework**: React with RTL support - **Styling**: Tailwind CSS with RTL variants - **Icons**: Lucide React or Heroicons - **Charts**: Recharts or Chart.js - **State Management**: React hooks - **Responsive**: Mobile-first breakpoints ## Accessibility Features - **ARIA Labels**: All interactive elements - **Keyboard Navigation**: Full keyboard support - **Screen Reader**: Arabic screen reader compatibility - **High Contrast**: Alternative color scheme - **Font Scaling**: Responsive font sizes ## Additional Notes - All text should be naturally written in Arabic - Avoid direct translations - use contextually appropriate Arabic terms - Include cultural design elements that resonate with Arabic users - Ensure proper Arabic text rendering and ligatures - Use appropriate Arabic business terminology - Consider regional differences in Arabic dialects for labels Create a modern, professional, and culturally appropriate Arabic dashboard that feels native to Arabic-speaking users while maintaining international usability standards. - Follow Up Deployment
Verified signatured9ea7a6
-
# Conversena Dashboard UI Design Prompt Create a modern, professional dashboard interface for the Conversena Client Portal system with the following specifications: ## Core Requirements ### System Overview - **Product**: Conversena - AI-powered conversational commerce platform - **Target Users**: Business owners, managers, and team members managing social media sales - **Primary Channels**: WhatsApp, Facebook Messenger, Instagram DM - **Languages**: Arabic, Hebrew, English (with RTL support) ### Dashboard Components #### 1. Header Section - **Company Logo**: Conversena branding with modern typography - **Navigation Menu**: Dashboard, Analytics, Products, Orders, Customers, Conversations, AI Settings, Channels, Delivery, Broadcasts, Team, Settings - **User Profile**: Avatar, name, role, notification bell, settings dropdown - **Quick Actions**: Emergency escalation button, new broadcast, manual order entry #### 2. Main Dashboard Layout (4x3 Grid) **Row 1 - Key Performance Indicators** - **Today's Conversations**: Count with percentage change, conversation icon - **Messages Sent**: Volume with hourly breakdown chart - **Orders Placed**: Revenue total with conversion rate - **Active Customers**: Currently engaged users **Row 2 - Visual Analytics** - **Conversion Funnel**: Interactive funnel chart showing visitor → inquiry → order flow - **Top Performing Products**: Horizontal bar chart with product images - **Channel Performance**: Pie chart showing WhatsApp/Messenger/Instagram split - **Order Status**: Donut chart (pending, shipped, delivered, stuck) **Row 3 - Action Items & Alerts** - **Escalations Queue**: List of conversations requiring human attention - **Low Stock Alerts**: Products below threshold with reorder suggestions - **Stuck Deliveries**: Failed deliveries requiring customer follow-up - **Recent Orders**: Live order feed with customer details **Row 4 - System Health & Tools** - **AI Performance**: Response time, confidence score, language detection accuracy - **Token Usage**: Monthly consumption with billing meter - **Quick Tools**: Bulk broadcast, inventory update, manual order entry - **Support**: Help center, tutorial videos, contact support #### 3. Sidebar (Collapsible) - **Date Range Selector**: Today, Week, Month, Custom with calendar picker - **Filter Options**: Channel, language, customer type, order status - **Real-time Notifications**: Live updates for new orders, escalations, alerts - **System Status**: API health, bot status, integration connectivity ### Design Specifications #### Color Scheme - **Primary**: Deep blue (#1e3a8a) - trust, reliability, professional - **Secondary**: Emerald green (#10b981) - growth, success, money - **Accent**: Orange (#f59e0b) - attention, alerts, call-to-action - **Success**: Green (#22c55e) - completed orders, positive metrics - **Warning**: Yellow (#eab308) - low stock, attention needed - **Error**: Red (#ef4444) - failed deliveries, system errors - **Background**: Light gray (#f8fafc) - clean, modern - **Cards**: White (#ffffff) with subtle shadows - **Text**: Dark gray (#1f2937) for readability #### Typography - **Headers**: Bold, modern sans-serif (Inter, Poppins) - **Body**: Clean, readable sans-serif - **Numbers**: Monospace font for metrics and data - **RTL Support**: Proper Arabic/Hebrew font rendering #### Visual Elements - **Icons**: Modern, consistent icon set (Lucide, Heroicons) - **Charts**: Clean, interactive charts with hover effects - **Cards**: Subtle shadows, rounded corners, hover states - **Buttons**: Gradient backgrounds, clear hierarchy - **Badges**: Rounded status indicators with appropriate colors #### Layout Principles - **Responsive**: Mobile-first, tablet-optimized, desktop-enhanced - **Grid System**: 12-column grid with consistent spacing - **White Space**: Generous padding and margins for readability - **Hierarchy**: Clear visual hierarchy with size and color contrast - **Accessibility**: WCAG 2.1 AA compliant with proper contrast ratios #### Interactive Features - **Hover Effects**: Subtle animations on cards and buttons - **Loading States**: Skeleton screens and progress indicators - **Real-time Updates**: Live data refresh without page reload - **Tooltips**: Contextual help for complex metrics - **Micro-animations**: Smooth transitions and state changes #### Data Visualization - **Charts**: Use Chart.js or Recharts for interactive visualizations - **Metrics**: Large, bold numbers with trend indicators (↑↓) - **Progress Bars**: Visual representation of goals and quotas - **Heat Maps**: Product interest and performance visualization - **Time Series**: Historical data with zoom and pan capabilities ### Specific Features to Include #### Business Intelligence - **Revenue Tracking**: Daily/weekly/monthly revenue with growth percentages - **Customer Insights**: New vs returning customers, engagement metrics - **Product Performance**: Best sellers, slow movers, out of stock items - **Channel Analytics**: Performance comparison across social platforms #### Operational Efficiency - **Quick Actions**: One-click access to common tasks - **Bulk Operations**: Mass product updates, customer messaging - **Automation Status**: AI bot performance and configuration - **Team Collaboration**: Shared dashboards, role-based access #### Multi-language Support - **RTL Layout**: Proper right-to-left layout for Arabic and Hebrew - **Language Switcher**: Easy language selection in header - **Localized Content**: Numbers, dates, and text in local format - **Cultural Sensitivity**: Appropriate colors and imagery for Middle Eastern markets ### Technical Implementation Notes - **Framework**: React with TypeScript for type safety - **Styling**: Tailwind CSS for rapid, consistent styling - **State Management**: Context API or Redux for complex state - **Charts**: Recharts or Chart.js for data visualization - **Icons**: Lucide React for consistent iconography - **Responsive**: Mobile-first responsive design - **Performance**: Lazy loading, code splitting, optimized images ### User Experience Goals - **Intuitive**: Easy to understand without training - **Efficient**: Quick access to most important information - **Actionable**: Clear next steps and call-to-action buttons - **Informative**: Rich data presentation without overwhelming users - **Accessible**: Usable by all team members regardless of technical skill Create a dashboard that feels modern, professional, and specifically tailored for Middle Eastern e-commerce businesses using conversational commerce. The interface should inspire confidence in the platform's capabilities while providing actionable insights for business growth. - Initial Deployment
Verified signaturea8d1979 -
initial commit
Verified signatureb7fe794