Dashboard

Overview

The dashboard is a widget-based customizable interface that adapts to the user’s selected goal (buyer, seller, referrer, PM). Users can add, remove, rearrange, and configure widgets.

Module path: src/lib/modules/dashboard/ Route: /dashboard

Widget System

Widget Definitions

12 widgets organized by category:

Widget	Category	Description
sales_summary	Sales	Revenue and sales overview
orders	Sales	Recent and active orders
payouts	Sales	Earnings and payout history
messages	Chat	Chat inbox and conversations
inbox	Chat	Messages and notifications
team_chat	Chat	Team conversations
active_projects	Projects	Current projects
project_board	Projects	Task and milestone board
milestones	Projects	Project progress tracking
recommended_sellers	General	Discover sellers
referral_stats	Referrals	Referral performance
campaign_links	Referrals	Referral links and campaigns

Widget Instance

interface WidgetInstance {
  instanceId: string;
  widgetDefinitionId: string;
  position: { x: number; y: number; w: number; h: number };
  config: Record<string, unknown>;
  visibility: 'pinned' | 'hidden' | 'collapsed';
}

Dashboard Templates

4 pre-configured layouts matching onboarding goals:

Template	Widgets
seller_default	Sales Summary, Orders, Messages, Payouts
buyer_default	Inbox, Active Projects, Recommended Sellers
pm_default	Project Board, Milestones, Team Chat
referral_default	Referral Stats, Campaign Links, Payouts

State Management

File: src/lib/modules/dashboard/stores/dashboard-manager.svelte.ts

dashboardManager.dashboard;        // Current dashboard data
dashboardManager.grid;             // Widget instances
dashboardManager.isEditMode;       // Edit mode toggle
dashboardManager.selectedInstanceId; // Selected widget

dashboardManager.ensureDashboard(templateId);
dashboardManager.addWidget(widgetDefinitionId);
dashboardManager.removeWidget(instanceId);
dashboardManager.updateLayout(grid);
dashboardManager.updateWidgetConfig(instanceId, config);
dashboardManager.resetToTemplate(templateId);

Persistence: Firestore at users/{uid}/dashboards/{dashboardId} with 600ms debounced saves.

Components

Component	Purpose
DashboardShell	4-column grid layout rendering widgets
WidgetContainer	Widget wrapper with lock/unavailable handling
WidgetPicker	Dialog for adding widgets
WidgetSettingsPanel	Dynamic form for widget configuration
WidgetUnavailable	Fallback for removed widget definitions

Dashboard Page

The main dashboard page (/dashboard) also includes:

• Welcome message with user name
• OnboardingTracker - 4-step progress (Profile, Hub, Referrals, Academy)
• Profile completion card - Progress percentage with clickable items
• Hub completion card - Marketplace readiness checklist
• WhatsNew - Tabbed content (Blogs, Promotions, Updates, Videos)
• InviteTeamForm - Team invitation
• VideoIntroDialog - Welcome video modal
• QuickLinks - Navigation shortcuts

Plan-Based Access Control

Widgets check the user’s subscription plan via subscriptionManager:

• Free: Limited widget access
• Standard: Extended access
• Elite: Full access to all widgets

Locked widgets show an upgrade prompt in the WidgetContainer.