Spaces:

---

alkobr

/

secondproject2

Like 0

Running

# 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