# 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

index.html

@@ -1,65 +1,80 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Conversena Dashboard</title>
+    <title>لوحة تحكم Conversena</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-        
         body {
-            font-family: 'Inter', sans-serif;
-            direction: ltr;
-        }
-        
-        .rtl {
-            direction: rtl;
+            font-family: 'Tajawal', sans-serif;
         }
         
-        .card-hover:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        .sidebar-collapsed {
+            width: 80px !important;
         }
         
-        .sidebar {
-            transition: all 0.3s ease;
+        .sidebar-collapsed .nav-text {
+            display: none;
         }
         
-        .sidebar.collapsed {
-            width: 70px;
+        .sidebar-collapsed .logo-text {
+            display: none;
         }
         
-        .sidebar.collapsed .sidebar-text {
+        .sidebar-collapsed .user-name {
             display: none;
         }
         
-        .sidebar.collapsed .logo-text {
+        .sidebar-collapsed .user-role {
             display: none;
         }
         
-        .sidebar.collapsed .sidebar-item {
+        .sidebar-collapsed .nav-item {
             justify-content: center;
         }
         
-        .notification-badge {
-            position: absolute;
-            top: -5px;
-            right: -5px;
+        .chart-container {
+            height: 300px;
         }
         
-        .chart-container {
-            position: relative;
-            height: 200px;
-            width: 100%;
+        .kpi-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        .order-status-delivered {
+            background-color: #D1FAE5;
+            color: #065F46;
+        }
+        
+        .order-status-transit {
+            background-color: #DBEAFE;
+            color: #1E40AF;
+        }
+        
+        .order-status-stuck {
+            background-color: #FEE2E2;
+            color: #991B1B;
+        }
+        
+        .alert-high {
+            border-right: 4px solid #EF4444;
+        }
+        
+        .alert-medium {
+            border-right: 4px solid #F59E0B;
+        }
+        
+        .alert-low {
+            border-right: 4px solid #10B981;
         }
         
-        .progress-ring__circle {
-            transition: stroke-dashoffset 0.35s;
-            transform: rotate(-90deg);
-            transform-origin: 50% 50%;
+        .rtl-input {
+            direction: rtl;
+            text-align: right;
         }
         
         @keyframes pulse {
@@ -76,576 +91,522 @@
         }
     </style>
 </head>
-<body class="bg-gray-50">
+<body class="bg-gray-50 text-gray-800">
     <div class="flex h-screen overflow-hidden">
         <!-- Sidebar -->
-        <div class="sidebar bg-white border-r border-gray-200 flex flex-col w-64">
-            <div class="flex items-center justify-between p-4 border-b border-gray-200">
-                <div class="flex items-center space-x-2">
-                    <div class="w-8 h-8 bg-blue-600 rounded-md flex items-center justify-center">
-                        <i class="fas fa-comment-dots text-white"></i>
+        <div id="sidebar" class="w-72 bg-gradient-to-b from-gray-900 to-gray-800 text-white transition-all duration-300 ease-in-out flex flex-col h-full">
+            <div class="p-4 flex items-center justify-between border-b border-gray-700">
+                <div class="flex items-center">
+                    <div class="w-10 h-10 rounded-md bg-blue-500 flex items-center justify-center">
+                        <i class="fas fa-comment-dots text-white text-xl"></i>
                     </div>
-                    <span class="logo-text text-xl font-bold text-gray-800">Conversena</span>
+                    <span class="logo-text mr-3 font-bold text-xl">Conversena</span>
                 </div>
-                <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-chevron-left"></i>
+                <button id="sidebar-toggle" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-bars"></i>
                 </button>
             </div>
             
-            <div class="p-4 border-b border-gray-200">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-sm font-medium text-gray-500">Date Range</span>
-                    <button class="text-blue-600 text-sm font-medium">Custom</button>
-                </div>
-                <div class="grid grid-cols-4 gap-2">
-                    <button class="py-1 px-2 text-xs rounded bg-blue-600 text-white">Today</button>
-                    <button class="py-1 px-2 text-xs rounded bg-gray-100 text-gray-700 hover:bg-gray-200">Week</button>
-                    <button class="py-1 px-2 text-xs rounded bg-gray-100 text-gray-700 hover:bg-gray-200">Month</button>
-                    <button class="py-1 px-2 text-xs rounded bg-gray-100 text-gray-700 hover:bg-gray-200">Year</button>
-                </div>
-            </div>
-            
-            <div class="flex-1 overflow-y-auto">
-                <nav class="p-2">
-                    <div class="space-y-1">
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-700">
-                            <i class="fas fa-tachometer-alt mr-3 text-blue-600"></i>
-                            <span class="sidebar-text">Dashboard</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-chart-line mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Analytics</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-box-open mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Products</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-shopping-bag mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Orders</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-users mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Customers</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-comments mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Conversations</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-robot mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">AI Settings</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-plug mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Channels</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-truck mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Delivery</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-bullhorn mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Broadcasts</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-user-friends mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Team</span>
-                        </a>
-                        <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100">
-                            <i class="fas fa-cog mr-3 text-gray-500"></i>
-                            <span class="sidebar-text">Settings</span>
-                        </a>
+            <div class="flex-1 overflow-y-auto py-4">
+                <nav>
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg border-r-4 border-blue-500 bg-gray-700">
+                        <div class="flex items-center nav-item">
+                            <i class="fas fa-tachometer-alt text-gray-300"></i>
+                            <span class="nav-text mr-3">لوحة التحكم</span>
+                        </div>
+                    </div>
+                    
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg">
+                        <div class="flex items-center justify-between nav-item">
+                            <div class="flex items-center">
+                                <i class="fas fa-box text-gray-300"></i>
+                                <span class="nav-text mr-3">المنتجات</span>
+                            </div>
+                            <i class="fas fa-chevron-left text-gray-400 text-xs"></i>
+                        </div>
+                    </div>
+                    
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg">
+                        <div class="flex items-center justify-between nav-item">
+                            <div class="flex items-center">
+                                <i class="fas fa-shopping-cart text-gray-300"></i>
+                                <span class="nav-text mr-3">الطلبات</span>
+                            </div>
+                            <span class="bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
+                        </div>
+                    </div>
+                    
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg">
+                        <div class="flex items-center nav-item">
+                            <i class="fas fa-users text-gray-300"></i>
+                            <span class="nav-text mr-3">العملاء</span>
+                        </div>
+                    </div>
+                    
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg">
+                        <div class="flex items-center justify-between nav-item">
+                            <div class="flex items-center">
+                                <i class="fas fa-comments text-gray-300"></i>
+                                <span class="nav-text mr-3">المحادثات</span>
+                            </div>
+                            <span class="bg-yellow-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">!</span>
+                        </div>
+                    </div>
+                    
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg">
+                        <div class="flex items-center nav-item">
+                            <i class="fas fa-broadcast-tower text-gray-300"></i>
+                            <span class="nav-text mr-3">القنوات</span>
+                        </div>
+                    </div>
+                    
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg">
+                        <div class="flex items-center nav-item">
+                            <i class="fas fa-bullhorn text-gray-300"></i>
+                            <span class="nav-text mr-3">البث</span>
+                        </div>
+                    </div>
+                    
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg">
+                        <div class="flex items-center nav-item">
+                            <i class="fas fa-users-cog text-gray-300"></i>
+                            <span class="nav-text mr-3">الفريق</span>
+                        </div>
+                    </div>
+                    
+                    <div class="px-4 py-3 hover:bg-gray-700 cursor-pointer rounded-r-lg">
+                        <div class="flex items-center nav-item">
+                            <i class="fas fa-cog text-gray-300"></i>
+                            <span class="nav-text mr-3">الإعدادات</span>
+                        </div>
                     </div>
                 </nav>
             </div>
             
-            <div class="p-4 border-t border-gray-200">
+            <div class="p-4 border-t border-gray-700">
                 <div class="flex items-center">
-                    <div class="relative">
-                        <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-                        <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-white"></span>
+                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
+                        <span class="text-white font-bold">أ</span>
                     </div>
-                    <div class="ml-3 sidebar-text">
-                        <p class="text-sm font-medium text-gray-700">Ahmed Khalid</p>
-                        <p class="text-xs text-gray-500">Admin</p>
+                    <div class="mr-3">
+                        <div class="user-name font-medium">أحمد محمد</div>
+                        <div class="user-role text-gray-400 text-sm">مدير النظام</div>
                     </div>
                 </div>
             </div>
         </div>
         
-        <!-- Main content -->
+        <!-- Main Content -->
         <div class="flex-1 overflow-auto">
             <!-- Header -->
-            <header class="bg-white border-b border-gray-200">
-                <div class="px-4 py-3 flex items-center justify-between">
-                    <div class="flex items-center space-x-4">
-                        <h1 class="text-xl font-bold text-gray-800">Dashboard Overview</h1>
-                        <div class="relative">
-                            <button class="flex items-center space-x-1 text-sm font-medium text-gray-600 hover:text-gray-900">
-                                <span>Today</span>
-                                <i class="fas fa-chevron-down text-xs"></i>
-                            </button>
-                        </div>
+            <header class="bg-white shadow-sm">
+                <div class="px-6 py-4 flex items-center justify-between">
+                    <div>
+                        <h1 class="text-xl font-bold">مرحباً بك، أحمد</h1>
+                        <p class="text-gray-500 text-sm">اليوم: ١٤ رجب ١٤٤٤ - ٦ فبراير ٢٠٢٣</p>
                     </div>
                     
-                    <div class="flex items-center space-x-4">
-                        <button class="relative p-1 text-gray-500 hover:text-gray-700">
-                            <i class="fas fa-bell"></i>
-                            <span class="notification-badge inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full">5</span>
-                        </button>
+                    <div class="flex items-center space-x-4 space-x-reverse">
+                        <div class="relative">
+                            <select class="appearance-none bg-gray-100 border border-gray-300 rounded-md py-2 px-4 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option>العربية</option>
+                                <option>English</option>
+                                <option>עברית</option>
+                            </select>
+                            <div class="pointer-events-none absolute left-3 top-1/2 transform -translate-y-1/2">
+                                <i class="fas fa-chevron-down text-gray-400"></i>
+                            </div>
+                        </div>
                         
                         <div class="relative">
-                            <button id="language-switcher" class="flex items-center space-x-1 text-sm font-medium text-gray-600 hover:text-gray-900">
-                                <i class="fas fa-globe"></i>
-                                <span>English</span>
-                                <i class="fas fa-chevron-down text-xs"></i>
+                            <button class="text-gray-500 hover:text-gray-700">
+                                <i class="fas fa-bell text-xl"></i>
+                                <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">2</span>
                             </button>
                         </div>
                         
-                        <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center space-x-2">
-                            <i class="fas fa-bolt"></i>
-                            <span>Emergency</span>
-                        </button>
+                        <div class="flex items-center space-x-2 space-x-reverse">
+                            <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
+                                <span class="text-white font-bold">أ</span>
+                            </div>
+                            <span class="font-medium">أحمد محمد</span>
+                        </div>
                     </div>
                 </div>
             </header>
             
-            <!-- Main dashboard content -->
-            <main class="p-4">
-                <!-- Quick stats -->
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between">
+            <!-- Main Content Area -->
+            <main class="p-6">
+                <!-- KPI Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+                    <!-- Today's Conversations -->
+                    <div class="kpi-card bg-white rounded-lg shadow p-6 transition-all duration-300">
+                        <div class="flex justify-between items-start">
                             <div>
-                                <p class="text-sm font-medium text-gray-500">Today's Conversations</p>
-                                <p class="text-2xl font-bold text-gray-800 mt-1">1,248</p>
-                                <div class="flex items-center mt-1">
-                                    <span class="text-xs font-medium text-green-500 flex items-center">
-                                        <i class="fas fa-arrow-up mr-1"></i> 12.4%
-                                    </span>
-                                    <span class="text-xs text-gray-500 ml-2">vs yesterday</span>
-                                </div>
+                                <p class="text-gray-500">محادثات اليوم</p>
+                                <h3 class="text-3xl font-bold mt-2">١٢٧</h3>
+                                <p class="text-green-500 text-sm mt-1">زيادة ٢٣% عن الأمس</p>
                             </div>
-                            <div class="bg-blue-50 p-3 rounded-full">
-                                <i class="fas fa-comments text-blue-600 text-xl"></i>
+                            <div class="bg-blue-100 p-3 rounded-full">
+                                <i class="fas fa-comments text-blue-500 text-xl"></i>
                             </div>
                         </div>
                     </div>
                     
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between">
+                    <!-- Completed Orders -->
+                    <div class="kpi-card bg-white rounded-lg shadow p-6 transition-all duration-300">
+                        <div class="flex justify-between items-start">
                             <div>
-                                <p class="text-sm font-medium text-gray-500">Messages Sent</p>
-                                <p class="text-2xl font-bold text-gray-800 mt-1">5,742</p>
-                                <div class="flex items-center mt-1">
-                                    <span class="text-xs font-medium text-green-500 flex items-center">
-                                        <i class="fas fa-arrow-up mr-1"></i> 8.2%
-                                    </span>
-                                    <span class="text-xs text-gray-500 ml-2">vs yesterday</span>
-                                </div>
+                                <p class="text-gray-500">الطلبات المكتملة</p>
+                                <h3 class="text-3xl font-bold mt-2">٤٥</h3>
+                                <p class="text-gray-500 text-sm mt-1">إجمالي المبيعات: ١٢,٤٥٠ ريال</p>
                             </div>
-                            <div class="bg-green-50 p-3 rounded-full">
-                                <i class="fas fa-paper-plane text-green-600 text-xl"></i>
+                            <div class="bg-green-100 p-3 rounded-full">
+                                <i class="fas fa-shopping-cart text-green-500 text-xl"></i>
                             </div>
                         </div>
-                        <div class="mt-3 h-1 w-full bg-gray-100 rounded-full">
-                            <div class="h-1 bg-green-500 rounded-full" style="width: 65%"></div>
-                        </div>
                     </div>
                     
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between">
+                    <!-- Conversion Rate -->
+                    <div class="kpi-card bg-white rounded-lg shadow p-6 transition-all duration-300">
+                        <div class="flex justify-between items-start">
                             <div>
-                                <p class="text-sm font-medium text-gray-500">Orders Placed</p>
-                                <p class="text-2xl font-bold text-gray-800 mt-1">$12,845</p>
-                                <div class="flex items-center mt-1">
-                                    <span class="text-xs font-medium text-green-500 flex items-center">
-                                        <i class="fas fa-arrow-up mr-1"></i> 22.7%
-                                    </span>
-                                    <span class="text-xs text-gray-500 ml-2">vs yesterday</span>
-                                </div>
+                                <p class="text-gray-500">معدل التحويل</p>
+                                <h3 class="text-3xl font-bold mt-2">٣٥.٤%</h3>
+                                <p class="text-green-500 text-sm mt-1">تحسن ٥.٢% هذا الأسبوع</p>
                             </div>
-                            <div class="bg-purple-50 p-3 rounded-full">
-                                <i class="fas fa-shopping-bag text-purple-600 text-xl"></i>
+                            <div class="bg-orange-100 p-3 rounded-full">
+                                <i class="fas fa-chart-line text-orange-500 text-xl"></i>
                             </div>
                         </div>
-                        <div class="mt-3">
-                            <p class="text-xs text-gray-500">Conversion: <span class="font-medium text-gray-800">3.8%</span></p>
-                        </div>
                     </div>
                     
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between">
+                    <!-- Low Stock Products -->
+                    <div class="kpi-card bg-white rounded-lg shadow p-6 transition-all duration-300">
+                        <div class="flex justify-between items-start">
                             <div>
-                                <p class="text-sm font-medium text-gray-500">Active Customers</p>
-                                <p class="text-2xl font-bold text-gray-800 mt-1">428</p>
-                                <div class="flex items-center mt-1">
-                                    <span class="text-xs font-medium text-green-500 flex items-center">
-                                        <i class="fas fa-arrow-up mr-1"></i> 5.1%
-                                    </span>
-                                    <span class="text-xs text-gray-500 ml-2">vs yesterday</span>
-                                </div>
+                                <p class="text-gray-500">منتجات منخفضة المخزون</p>
+                                <h3 class="text-3xl font-bold mt-2">٨</h3>
+                                <p class="text-red-500 text-sm mt-1">تحتاج إعادة تموين</p>
                             </div>
-                            <div class="bg-yellow-50 p-3 rounded-full">
-                                <i class="fas fa-user-friends text-yellow-600 text-xl"></i>
+                            <div class="bg-red-100 p-3 rounded-full">
+                                <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
                             </div>
                         </div>
-                        <div class="mt-3">
-                            <p class="text-xs text-gray-500">New: <span class="font-medium text-gray-800">87</span></p>
-                        </div>
                     </div>
                 </div>
                 
-                <!-- Charts row -->
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-lg font-medium text-gray-800">Conversion Funnel</h3>
-                            <div class="flex space-x-2">
-                                <button class="text-xs px-2 py-1 bg-gray-100 rounded-md">Week</button>
-                                <button class="text-xs px-2 py-1 bg-blue-600 text-white rounded-md">Month</button>
-                                <button class="text-xs px-2 py-1 bg-gray-100 rounded-md">Year</button>
+                <!-- Main Grid -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <!-- Left Column -->
+                    <div class="lg:col-span-2 space-y-6">
+                        <!-- Analytics Chart -->
+                        <div class="bg-white rounded-lg shadow p-6">
+                            <div class="flex justify-between items-center mb-6">
+                                <h2 class="text-lg font-bold">أداء المحادثات الأسبوعي</h2>
+                                <div class="flex space-x-2 space-x-reverse">
+                                    <button class="px-3 py-1 bg-blue-500 text-white rounded-md text-sm">أسبوع</button>
+                                    <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm">شهر</button>
+                                    <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm">سنة</button>
+                                </div>
+                            </div>
+                            
+                            <div class="chart-container">
+                                <canvas id="analyticsChart" height="300"></canvas>
                             </div>
                         </div>
-                        <div class="chart-container">
-                            <canvas id="funnelChart"></canvas>
-                        </div>
-                    </div>
-                    
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-lg font-medium text-gray-800">Channel Performance</h3>
-                            <button class="text-sm text-blue-600 hover:text-blue-800">View Details</button>
-                        </div>
-                        <div class="chart-container">
-                            <canvas id="channelChart"></canvas>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Third row -->
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-lg font-medium text-gray-800">Escalations Queue</h3>
-                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">5 New</span>
-                        </div>
-                        <div class="space-y-3">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0">
-                                    <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-medium text-gray-900">Lina Hassan</p>
-                                    <p class="text-sm text-gray-500">Order #4578 delayed</p>
-                                    <div class="mt-1 flex items-center text-xs text-gray-500">
-                                        <span>WhatsApp • 15 min ago</span>
-                                    </div>
-                                </div>
-                                <div class="ml-auto">
-                                    <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Handle</button>
-                                </div>
+                        
+                        <!-- Top Products -->
+                        <div class="bg-white rounded-lg shadow">
+                            <div class="p-6 border-b border-gray-200">
+                                <h2 class="text-lg font-bold">المنتجات الأكثر طلباً</h2>
                             </div>
                             
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0">
-                                    <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-medium text-gray-900">Mohammed Ali</p>
-                                    <p class="text-sm text-gray-500">Product return request</p>
-                                    <div class="mt-1 flex items-center text-xs text-gray-500">
-                                        <span>Facebook • 32 min ago</span>
-                                    </div>
-                                </div>
-                                <div class="ml-auto">
-                                    <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Handle</button>
-                                </div>
+                            <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>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="bg-white divide-y divide-gray-200">
+                                        <tr>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="flex items-center">
+                                                    <div class="flex-shrink-0 h-10 w-10">
+                                                        <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt="">
+                                                    </div>
+                                                    <div class="mr-4">
+                                                        <div class="text-sm font-medium text-gray-900">هاتف ذكي X10</div>
+                                                        <div class="text-sm text-gray-500">إلكترونيات</div>
+                                                    </div>
+                                                </div>
+                                            </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 text-gray-500">٤٥</td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">١٢</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="flex items-center">
+                                                    <div class="flex-shrink-0 h-10 w-10">
+                                                        <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt="">
+                                                    </div>
+                                                    <div class="mr-4">
+                                                        <div class="text-sm font-medium text-gray-900">سماعات لاسلكية</div>
+                                                        <div class="text-sm text-gray-500">إلكترونيات</div>
+                                                    </div>
+                                                </div>
+                                            </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 text-gray-500">٣٢</td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">٨</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="flex items-center">
+                                                    <div class="flex-shrink-0 h-10 w-10">
+                                                        <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt="">
+                                                    </div>
+                                                    <div class="mr-4">
+                                                        <div class="text-sm font-medium text-gray-900">ساعة ذكية</div>
+                                                        <div class="text-sm text-gray-500">إلكترونيات</div>
+                                                    </div>
+                                                </div>
+                                            </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 text-gray-500">٢٨</td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">٥</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="flex items-center">
+                                                    <div class="flex-shrink-0 h-10 w-10">
+                                                        <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt="">
+                                                    </div>
+                                                    <div class="mr-4">
+                                                        <div class="text-sm font-medium text-gray-900">حقيبة ظهر</div>
+                                                        <div class="text-sm text-gray-500">أزياء</div>
+                                                    </div>
+                                                </div>
+                                            </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 text-gray-500">٢١</td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">٣</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="flex items-center">
+                                                    <div class="flex-shrink-0 h-10 w-10">
+                                                        <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt="">
+                                                    </div>
+                                                    <div class="mr-4">
+                                                        <div class="text-sm font-medium text-gray-900">نظارة شمسية</div>
+                                                        <div class="text-sm text-gray-500">أزياء</div>
+                                                    </div>
+                                                </div>
+                                            </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 text-gray-500">١٩</td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">٧</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
                             </div>
                             
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0">
-                                    <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-medium text-gray-900">Youssef Ahmed</p>
-                                    <p class="text-sm text-gray-500">Payment issue</p>
-                                    <div class="mt-1 flex items-center text-xs text-gray-500">
-                                        <span>Instagram • 1 hour ago</span>
-                                    </div>
-                                </div>
-                                <div class="ml-auto">
-                                    <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Handle</button>
-                                </div>
+                            <div class="p-4 border-t border-gray-200 text-center">
+                                <button class="text-blue-500 hover:text-blue-700 text-sm font-medium">عرض الكل</button>
                             </div>
                         </div>
-                        <div class="mt-4">
-                            <button class="w-full py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50">
-                                View All Escalations
-                            </button>
-                        </div>
                     </div>
                     
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-lg font-medium text-gray-800">Low Stock Alerts</h3>
-                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">3 Critical</span>
-                        </div>
-                        <div class="space-y-4">
-                            <div class="flex items-center">
-                                <div class="flex-shrink-0 h-10 w-10 rounded-md overflow-hidden">
-                                    <img class="h-full w-full object-cover" src="https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg" alt="">
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-medium text-gray-900">Leather Wallet</p>
-                                    <p class="text-sm text-gray-500">SKU: LW-4592</p>
-                                </div>
-                                <div class="ml-auto">
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">2 left</span>
-                                </div>
+                    <!-- Right Column -->
+                    <div class="space-y-6">
+                        <!-- Recent Orders -->
+                        <div class="bg-white rounded-lg shadow">
+                            <div class="p-6 border-b border-gray-200">
+                                <h2 class="text-lg font-bold">آخر الطلبات</h2>
                             </div>
                             
-                            <div class="flex items-center">
-                                <div class="flex-shrink-0 h-10 w-10 rounded-md overflow-hidden">
-                                    <img class="h-full w-full object-cover" src="https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-02.jpg" alt="">
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-medium text-gray-900">Cotton T-Shirt</p>
-                                    <p class="text-sm text-gray-500">SKU: CT-7821</p>
-                                </div>
-                                <div class="ml-auto">
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">5 left</span>
+                            <div class="divide-y divide-gray-200">
+                                <div class="p-4">
+                                    <div class="flex justify-between items-start">
+                                        <div>
+                                            <p class="font-medium">علي حسن</p>
+                                            <p class="text-sm text-gray-500 mt-1">هاتف ذكي X10 × 1</p>
+                                            <p class="text-sm text-gray-500">٥٥٠ ريال</p>
+                                        </div>
+                                        <span class="order-status-delivered px-2 py-1 rounded-full text-xs font-medium">تم التسليم</span>
+                                    </div>
                                 </div>
-                            </div>
-                            
-                            <div class="flex items-center">
-                                <div class="flex-shrink-0 h-10 w-10 rounded-md overflow-hidden">
-                                    <img class="h-full w-full object-cover" src="https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-03.jpg" alt="">
+                                
+                                <div class="p-4">
+                                    <div class="flex justify-between items-start">
+                                        <div>
+                                            <p class="font-medium">سارة أحمد</p>
+                                            <p class="text-sm text-gray-500 mt-1">سماعات لاسلكية × 2</p>
+                                            <p class="text-sm text-gray-500">٣٠٠ ريال</p>
+                                        </div>
+                                        <span class="order-status-transit px-2 py-1 rounded-full text-xs font-medium">قيد التوصيل</span>
+                                    </div>
                                 </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-medium text-gray-900">Ceramic Mug</p>
-                                    <p class="text-sm text-gray-500">SKU: CM-3567</p>
+                                
+                                <div class="p-4">
+                                    <div class="flex justify-between items-start">
+                                        <div>
+                                            <p class="font-medium">محمد خالد</p>
+                                            <p class="text-sm text-gray-500 mt-1">ساعة ذكية × 1</p>
+                                            <p class="text-sm text-gray-500">٤٢٠ ريال</p>
+                                        </div>
+                                        <span class="order-status-stuck px-2 py-1 rounded-full text-xs font-medium">عالق</span>
+                                    </div>
                                 </div>
-                                <div class="ml-auto">
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">3 left</span>
+                                
+                                <div class="p-4">
+                                    <div class="flex justify-between items-start">
+                                        <div>
+                                            <p class="font-medium">ليلى عبدالله</p>
+                                            <p class="text-sm text-gray-500 mt-1">حقيبة ظهر × 1</p>
+                                            <p class="text-sm text-gray-500">١٥٠ ريال</p>
+                                        </div>
+                                        <span class="order-status-delivered px-2 py-1 rounded-full text-xs font-medium">تم التسليم</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="mt-4">
-                            <button class="w-full py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50">
-                                View Inventory
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Fourth row -->
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-lg font-medium text-gray-800">AI Performance</h3>
-                            <div class="flex items-center">
-                                <span class="h-2.5 w-2.5 rounded-full bg-green-400 mr-1.5"></span>
-                                <span class="text-xs text-gray-500">Operational</span>
+                            
+                            <div class="p-4 border-t border-gray-200 text-center">
+                                <button class="text-blue-500 hover:text-blue-700 text-sm font-medium">عرض الكل</button>
                             </div>
                         </div>
-                        <div class="space-y-4">
-                            <div>
-                                <div class="flex items-center justify-between mb-1">
-                                    <span class="text-sm font-medium text-gray-500">Response Time</span>
-                                    <span class="text-sm font-bold text-gray-800">1.2s</span>
-                                </div>
-                                <div class="w-full bg-gray-200 rounded-full h-2">
-                                    <div class="bg-green-500 h-2 rounded-full" style="width: 95%"></div>
-                                </div>
+                        
+                        <!-- Escalation Alerts -->
+                        <div class="bg-white rounded-lg shadow">
+                            <div class="p-6 border-b border-gray-200">
+                                <h2 class="text-lg font-bold">المحادثات المتصاعدة</h2>
                             </div>
                             
-                            <div>
-                                <div class="flex items-center justify-between mb-1">
-                                    <span class="text-sm font-medium text-gray-500">Confidence Score</span>
-                                    <span class="text-sm font-bold text-gray-800">87%</span>
-                                </div>
-                                <div class="w-full bg-gray-200 rounded-full h-2">
-                                    <div class="bg-blue-500 h-2 rounded-full" style="width: 87%"></div>
+                            <div class="divide-y divide-gray-200">
+                                <div class="p-4 alert-high">
+                                    <div class="flex justify-between items-start">
+                                        <div>
+                                            <p class="font-medium">خالد سعيد</p>
+                                            <p class="text-sm text-gray-500 mt-1">مشكلة في المنتج المستلم</p>
+                                            <p class="text-xs text-gray-400 mt-1">منذ ٢ ساعة</p>
+                                        </div>
+                                        <span class="text-red-500 text-xs font-medium">عالي</span>
+                                    </div>
                                 </div>
-                            </div>
-                            
-                            <div>
-                                <div class="flex items-center justify-between mb-1">
-                                    <span class="text-sm font-medium text-gray-500">Language Detection</span>
-                                    <span class="text-sm font-bold text-gray-800">92%</span>
+                                
+                                <div class="p-4 alert-medium">
+                                    <div class="flex justify-between items-start">
+                                        <div>
+                                            <p class="font-medium">نورا محمد</p>
+                                            <p class="text-sm text-gray-500 mt-1">استفسار عن حالة الطلب</p>
+                                            <p class="text-xs text-gray-400 mt-1">منذ ٤ ساعات</p>
+                                        </div>
+                                        <span class="text-yellow-500 text-xs font-medium">متوسط</span>
+                                    </div>
                                 </div>
-                                <div class="w-full bg-gray-200 rounded-full h-2">
-                                    <div class="bg-purple-500 h-2 rounded-full" style="width: 92%"></div>
+                                
+                                <div class="p-4 alert-low">
+                                    <div class="flex justify-between items-start">
+                                        <div>
+                                            <p class="font-medium">أحمد علي</p>
+                                            <p class="text-sm text-gray-500 mt-1">طلب تغيير عنوان التوصيل</p>
+                                            <p class="text-xs text-gray-400 mt-1">منذ ٦ ساعات</p>
+                                        </div>
+                                        <span class="text-green-500 text-xs font-medium">منخفض</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                    
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-lg font-medium text-gray-800">Token Usage</h3>
-                            <span class="text-sm text-gray-500">Monthly</span>
-                        </div>
-                        <div class="flex items-center justify-center mb-4">
-                            <div class="relative w-32 h-32">
-                                <svg class="w-full h-full" viewBox="0 0 36 36">
-                                    <path
-                                        d="M18 2.0845
-                                            a 15.9155 15.9155 0 0 1 0 31.831
-                                            a 15.9155 15.9155 0 0 1 0 -31.831"
-                                        fill="none"
-                                        stroke="#E5E7EB"
-                                        stroke-width="3"
-                                        stroke-dasharray="100, 100"
-                                    />
-                                    <path
-                                        d="M18 2.0845
-                                            a 15.9155 15.9155 0 0 1 0 31.831
-                                            a 15.9155 15.9155 0 0 1 0 -31.831"
-                                        fill="none"
-                                        stroke="#3B82F6"
-                                        stroke-width="3"
-                                        stroke-dasharray="65, 100"
-                                    />
-                                </svg>
-                                <div class="absolute inset-0 flex items-center justify-center">
-                                    <span class="text-2xl font-bold text-gray-800">65%</span>
-                                </div>
+                            
+                            <div class="p-4 border-t border-gray-200">
+                                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md text-sm font-medium">معالجة التصعيد</button>
                             </div>
                         </div>
-                        <div class="text-center">
-                            <p class="text-sm text-gray-600">Used: <span class="font-medium text-gray-800">65,000</span> / 100,000</p>
-                            <p class="text-xs text-gray-500 mt-1">Resets on 1st of next month</p>
-                        </div>
-                    </div>
-                    
-                    <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-200">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-lg font-medium text-gray-800">Quick Tools</h3>
-                            <button class="text-sm text-blue-600 hover:text-blue-800">More Tools</button>
-                        </div>
-                        <div class="grid grid-cols-2 gap-3">
-                            <button class="flex flex-col items-center justify-center p-3 bg-gray-50 rounded-md hover:bg-gray-100">
-                                <i class="fas fa-bullhorn text-blue-600 text-xl mb-2"></i>
-                                <span class="text-xs font-medium text-gray-700">Broadcast</span>
-                            </button>
-                            <button class="flex flex-col items-center justify-center p-3 bg-gray-50 rounded-md hover:bg-gray-100">
-                                <i class="fas fa-boxes text-green-600 text-xl mb-2"></i>
-                                <span class="text-xs font-medium text-gray-700">Inventory</span>
-                            </button>
-                            <button class="flex flex-col items-center justify-center p-3 bg-gray-50 rounded-md hover:bg-gray-100">
-                                <i class="fas fa-shopping-cart text-purple-600 text-xl mb-2"></i>
-                                <span class="text-xs font-medium text-gray-700">New Order</span>
-                            </button>
-                            <button class="flex flex-col items-center justify-center p-3 bg-gray-50 rounded-md hover:bg-gray-100">
-                                <i class="fas fa-question-circle text-yellow-600 text-xl mb-2"></i>
-                                <span class="text-xs font-medium text-gray-700">Support</span>
-                            </button>
-                        </div>
                     </div>
                 </div>
             </main>
         </div>
     </div>
-
+    
+    <!-- Quick Actions -->
+    <div class="fixed bottom-6 left-6 space-y-3">
+        <button class="w-12 h-12 rounded-full bg-blue-500 text-white shadow-lg flex items-center justify-center hover:bg-blue-600 transition-colors duration-300 group">
+            <i class="fas fa-plus"></i>
+            <span class="absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300">إضافة منتج</span>
+        </button>
+        
+        <button class="w-12 h-12 rounded-full bg-green-500 text-white shadow-lg flex items-center justify-center hover:bg-green-600 transition-colors duration-300 group">
+            <i class="fas fa-bullhorn"></i>
+            <span class="absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300">بث جديد</span>
+        </button>
+        
+        <button class="w-12 h-12 rounded-full bg-orange-500 text-white shadow-lg flex items-center justify-center hover:bg-orange-600 transition-colors duration-300 group">
+            <i class="fas fa-shopping-cart"></i>
+            <span class="absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300">طلب يدوي</span>
+        </button>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
         // Toggle sidebar
         document.getElementById('sidebar-toggle').addEventListener('click', function() {
-            document.querySelector('.sidebar').classList.toggle('collapsed');
-            const icon = this.querySelector('i');
-            if (document.querySelector('.sidebar').classList.contains('collapsed')) {
-                icon.classList.remove('fa-chevron-left');
-                icon.classList.add('fa-chevron-right');
-            } else {
-                icon.classList.remove('fa-chevron-right');
-                icon.classList.add('fa-chevron-left');
-            }
-        });
-
-        // Language switcher
-        document.getElementById('language-switcher').addEventListener('click', function() {
-            // In a real app, this would toggle between languages
-            alert('Language switcher would change the UI language here');
+            document.getElementById('sidebar').classList.toggle('sidebar-collapsed');
         });
-
-        // Initialize charts
-        document.addEventListener('DOMContentLoaded', function() {
-            // Funnel chart
-            const funnelCtx = document.getElementById('funnelChart').getContext('2d');
-            const funnelChart = new Chart(funnelCtx, {
-                type: 'bar',
-                data: {
-                    labels: ['Visitors', 'Conversations', 'Orders', 'Revenue'],
-                    datasets: [{
-                        label: 'Conversion Steps',
-                        data: [10000, 4500, 1500, 845],
-                        backgroundColor: [
-                            'rgba(59, 130, 246, 0.7)',
-                            'rgba(16, 185, 129, 0.7)',
-                            'rgba(245, 158, 11, 0.7)',
-                            'rgba(139, 92, 246, 0.7)'
-                        ],
-                        borderColor: [
-                            'rgba(59, 130, 246, 1)',
-                            'rgba(16, 185, 129, 1)',
-                            'rgba(245, 158, 11, 1)',
-                            'rgba(139, 92, 246, 1)'
-                        ],
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
+        
+        // Initialize chart
+        const ctx = document.getElementById('analyticsChart').getContext('2d');
+        const analyticsChart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
+                datasets: [
+                    {
+                        label: 'المحادثات',
+                        data: [85, 110, 98, 120, 115, 140, 127],
+                        borderColor: '#3B82F6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        tension: 0.3,
+                        fill: true
                     },
-                    plugins: {
-                        legend: {
-                            display: false
-                        }
+                    {
+                        label: 'التحويلات',
+                        data: [25, 32, 28, 35, 38, 42, 45],
+                        borderColor: '#10B981',
+                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                        tension: 0.3,
+                        fill: true
                     }
-                }
-            });
-
-            // Channel performance chart
-            const channelCtx = document.getElementById('channelChart').getContext('2d');
-            const channelChart = new Chart(channelCtx, {
-                type: 'doughnut',
-                data: {
-                    labels: ['WhatsApp', 'Facebook', 'Instagram', 'Other'],
-                    datasets: [{
-                        data: [65, 20, 12, 3],
-                        backgroundColor: [
-                            'rgba(16, 185, 129, 0.7)',
-                            'rgba(59, 130, 246, 0.7)',
-                            'rgba(236, 72, 153, 0.7)',
-                            'rgba(209, 213, 219, 0.7)'
-                        ],
-                        borderColor: [
-                            'rgba(16, 185, 129, 1)',
-                            'rgba(59, 130, 246, 1)',
-                            'rgba(236, 72, 153, 1)',
-                            'rgba(209, 213, 219, 1)'
-                        ],
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            position: 'right',
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                        rtl: true,
+                        labels: {
+                            usePointStyle: true,
+                            padding: 20
                         }
                     },
-                    cutout: '70%'
+                    tooltip: {
+                        rtl: true,
+                        titleAlign: 'right',
+                        bodyAlign: 'right'
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
                 }
-            });
+            }
         });
     </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>