Dashboard App

The One Place Suite Dashboard is the central navigation hub that provides access to all suite applications. It dynamically adapts its layout based on the container context and manages feature sideloading.

Overview

• Route: /feature/one-place-suite-dashboard
• Framework: Angular 19 (Standalone Components)
• Main Component: DashboardHomeComponent

Features

Adaptive Layout

The dashboard automatically switches between two layouts:

1. Center View: Full-width card grid when running as the main feature
2. Left Navigation Menu: Compact vertical menu when acting as a sidebar

Feature Management

• Opens features in right panel (cols: 12)
• Supports top features for Client Search
• Tracks active features with visual indicators
• Prevents re-initialization when already in position

Key Functionality

Layout Detection

private checkAndSetLeftNavMode() {
  const containerWidth = window.innerWidth;
  if (containerWidth < 500) {
    this.setLeftNavMode(true);
  }
}

When container width is less than 500px, the dashboard assumes it's in left menu position.

Feature Navigation

navigateToFeature(feature: DashboardFeatures) {
  // Client Search opens in top panel
  if (feature.featureName === 'Client Search') {
    this.openTopFeature(feature);
    return;
  }
  
  // Other features open in right panel
  this.activeRightFeature = feature.featureName;
  this.moveDashboardToLeftMenu();
  this.openRightFeature(feature);
}

Smart Repositioning

private moveDashboardToLeftMenu() {
  const isAlreadyInLeftMenu = window.innerWidth < 500;
  
  if (!isAlreadyInLeftMenu) {
    // Move dashboard from center to left menu
    ipaSdk.platform.sideload.menuLeftFeature({
      active: true,
      src: '/feature/one-place-suite-dashboard',
      left: 250
    });
  }
  this.setLeftNavMode(true);
}

Prevents unnecessary re-initialization by checking current position.

State Management

Observable-Based UI State

private _isLeftNavMode = new BehaviorSubject<boolean>(false);
isLeftNavMode$ = this._isLeftNavMode.asObservable();

Uses RxJS BehaviorSubject for reactive UI updates.

Active Feature Tracking

activeRightFeature: string | null = null;
activeTopFeature: string | null = null;

isFeatureActive(featureName: string): boolean {
  return this.activeRightFeature === featureName || 
         this.activeTopFeature === featureName;
}

Available Features

Feature	Position	Route
Account Visibility Manager	Right	/feature/account-visibility-manager-v2
PFM Manager	Right	/feature/pfm-manager
Client Search	Top	/feature/one-place-client-search
Mobile Distribution	Right	/feature/cxt-mobile-distribution
One Place Docs	Right	/feature/one-place-docs
IO Docs	Right	/feature/io-docs
IPA Docs	Right	/feature/ipa-docs

Styling

Center View

• Card-based grid layout
• Hover effects with gradient animations
• Responsive columns (1-3 columns based on screen size)

Left Navigation View

• Vertical menu items
• Active state indicators
• Close button for active features
• Fixed 250px width

Usage Example

// Open Account Visibility Manager
ipaSdk.platform.sideload.centerFeature({
  active: true,
  src: '/feature/one-place-suite-dashboard',
  cols: 12
});

The dashboard will automatically handle feature navigation and layout adaptation.