nxtgauge-frontend-solid/PREVIEW_REAL_DATA.md
Ashwin Kumar f27713a136 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.
2026-04-10 01:53:02 +02:00

3.2 KiB

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!