docs: document that DashboardDesignPreview uses real APIs, not mock data

DashboardDesignPreview fetches live data from 12+ API endpoints:
- Wallet/credits balance
- Marketplace leads
- Lead requests
- Customer requirements
- Jobs
- User profile
- Professional services
- Portfolio
- User roles
- Pricing packages
- Knowledge base
- Notification counts (polling every 30s)

Key insight: Preview shows REAL DATA with generic UI, not mock data.

PREVIEW_REAL_DATA.md

@@ -0,0 +1,110 @@
+# DashboardDesignPreview - Real Data Status
+
+## Overview
+
+The DashboardDesignPreview component is **NOT just mock data** - it uses **real live APIs** to fetch actual data from the backend!
+
+## Live API Integration
+
+When DashboardDesignPreview renders (for custom/unknown sidebar items or preview mode), it fetches real data from:
+
+### 1. **Credits/Wallet**
+
+- **API:** `GET /api/{prefix}/wallet/balance`
+- **Data:** Real Tracecoin balance
+- **Refresh:** Real-time
+
+### 2. **Marketplace (Professionals)**
+
+- **API:** `GET /api/{prefix}/marketplace?limit=50`
+- **Data:** Real customer requirements/leads
+- **Refresh:** On load + manual refresh
+
+### 3. **Lead Requests (Professionals)**
+
+- **API:** `GET /api/{prefix}/leads/requests/me?limit=50`
+- **Data:** Real sent proposals
+- **Refresh:** After actions (create/update/delete)
+
+### 4. **Customer Requirements**
+
+- **API:** `GET /api/customers/requirements?limit=50`
+- **Data:** Real service requests
+- **Refresh:** On load + manual refresh
+
+### 5. **Jobs**
+
+- **API:** `GET /api/jobs?limit=50`
+- **Data:** Real job postings
+- **Refresh:** On load
+
+### 6. **User Profile**
+
+- **API:** `GET /api/{prefix}/profile/me`
+- **Data:** Real profile data
+- **Refresh:** On load
+
+### 7. **Professional Services**
+
+- **API:** `GET /api/{prefix}/services/me`
+- **Data:** Real service packages
+- **Refresh:** After CRUD operations
+
+### 8. **Professional Portfolio**
+
+- **API:** `GET /api/{prefix}/portfolio/me`
+- **Data:** Real portfolio items
+- **Refresh:** After CRUD operations
+
+### 9. **User Roles**
+
+- **API:** `GET /api/users/roles`
+- **Data:** Real registered roles
+- **Refresh:** After role switch/register
+
+### 10. **Pricing Packages**
+
+- **API:** `GET /api/packages`
+- **Data:** Real pricing from admin
+- **Refresh:** On load
+
+### 11. **Knowledge Base**
+
+- **API:** `GET /api/runtime-config/knowledge_base/GLOBAL_KB`
+- **Data:** Real help articles
+- **Refresh:** On load
+
+### 12. **Notifications**
+
+- **API:** `GET /api/me/notifications/unread-count`
+- **Data:** Real unread notification count
+- **Refresh:** Every 30 seconds (polling)
+
+## When is DashboardDesignPreview Used?
+
+1. **Unknown sidebar items** - If backend returns sidebar items not in REAL_PAGES list
+2. **Custom runtime config** - Dynamic sidebar from admin dashboard config
+3. **Development mode** - Testing new features
+4. **Preview mode** - Admin previewing role dashboards
+
+## Key Point
+
+**Even in "preview" mode, you're seeing REAL DATA from the backend!**
+
+The difference between real components and DashboardDesignPreview:
+
+| Aspect          | Real Components  | DashboardDesignPreview |
+| --------------- | ---------------- | ---------------------- |
+| **Data Source** | Real APIs        | Real APIs (same!)      |
+| **UI Design**   | Custom per page  | Generic/standardized   |
+| **Features**    | Full feature set | Basic CRUD operations  |
+| **Performance** | Optimized        | General purpose        |
+| **Maintenance** | Per-component    | Single component       |
+
+## Summary
+
+✅ **Real Components** = Custom UI + Real Data
+✅ **DashboardDesignPreview** = Generic UI + Real Data
+❌ **No Mock Data Anywhere** = Everything is connected to backend
+
+**You ALWAYS see real data, whether using dedicated pages or the preview component!**