view

src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.html

-<!-- Error Message -->
-<div *ngIf="errorMessage" class="error-message">
-  <div class="error-message-content">
-    <i class="bi bi-exclamation-triangle-fill error-icon"></i>
-    <span class="error-text">Error:</span>
-    <span class="error-description">{{ errorMessage }}</span>
-  </div>
-</div>
+<div class="min-h-screen dashboard-background">
+  <!-- Enhanced Dashboard Header -->
+  <div class="dashboard-header-container">
+    <div class="header-content">
+      <div class="header-flex">
+        <div class="header-left">
+          <!-- Dashboard Title with Icon -->
+          <div class="header-title-section">
+            <div class="title-icon">
+              <i class="bi bi-grid-3x3-gap"></i>
+            </div>
+            <div class="title-content">
+              <h1>Dashboard Management</h1>
+              <p>Create and manage your dashboards</p>
+            </div>
+          </div>
+
+
+        </div>
+
+
+      </div>
+    </div>
+
+    <!-- Enhanced Dashboard Content Area -->
+    <div class="dashboard-content-area">
+      <!-- View Dashboard Button -->
+
+
+      <!-- Dashboard Content -->
+      <div class="dashboard-content-card">
+        <div *ngIf="!panels || panels.length === 0" class="empty-state">
+          <div class="empty-state-icon">
+            <i class="bi bi-grid-3x3-gap"></i>
+          </div>
+          <h3 class="empty-state-title">Empty Dashboard</h3>
+          <p class="empty-state-description">
+            To get started, select a dashboard from the dropdown above or create
+            a new one. Then, click on a widget from the sidebar on the left to
+            add it to this canvas.
+          </p>
+        </div>
+
+        <!-- Dashboard Layout -->
+        <div *ngIf="panels.length > 0" class="dashboard-layout-container">
+          <ejs-dashboardlayout
+            id="dashboard_default"
+            [columns]="columns"
+            [cellSpacing]="cellSpacing"
+            [panels]="panels"
+            #editLayout
+            [allowResizing]="false"
+            [allowDragging]="false"
+            [allowFloating]="allowFloating"
+            [enableRtl]="false"
+            [enablePersistence]="false"
+            [cellAspectRatio]="cellAspectRatio"
+            [mediaQuery]='mediaQuery'
+            class="dashboard-layout"
+          >
+            <e-panels>
+              <e-panel
+                *ngFor="let panel of panels"
+                [id]="panel.id"
+                [sizeX]="panel.sizeX"
+                [sizeY]="panel.sizeY"
+                [row]="panel.row"
+                [col]="panel.col"
+                [minSizeX]="panel.minSizeX"
+                [minSizeY]="panel.minSizeY"
+                [maxSizeX]="panel.maxSizeX"
+                [maxSizeY]="panel.maxSizeY"
+                [zIndex]="999"
+              >
+                <ng-template #content>
+                  <ng-container
+                    [ngComponentOutlet]="panel.componentType"
+                    [ngComponentOutletInputs]="panel.componentInputs"
+                  ></ng-container>
+                </ng-template>
+              </e-panel>
+            </e-panels>
+          </ejs-dashboardlayout>
+        </div>
+      </div>
+    </div>
+
 
-<!-- Dashboard Viewer Container - Clean Layout -->
-<div *ngIf="dashboardData" class="dashboard-content-area">
-  <!-- Dashboard Content Only -->
-  <div class="dashboard-layout-container">
-    <ejs-dashboardlayout
-      id="dashboard_default"
-      #editLayout
-      [cellSpacing]="cellSpacing"
-      [panels]="panels"
-      [columns]="columns"
-      [allowResizing]="false"
-      [allowDragging]="false"
-      class="dashboard-layout"
-    >
-      <e-panels>
-        <e-panel
-          *ngFor="let panel of panels"
-          [zIndex]="999"
-          [row]="panel.row"
-          [col]="panel.col"
-          [sizeX]="panel.sizeX"
-          [sizeY]="panel.sizeY"
-          [id]="panel.id"
-        >
-          <ng-template #header>
-            <!-- No header -->
-          </ng-template>
-          <ng-template #content>
-            <ng-container
-              [ngComponentOutlet]="panel.componentType"
-              [ngComponentOutletInputs]="panel.componentInputs"
-            ></ng-container>
-          </ng-template>
-        </e-panel>
-      </e-panels>
-    </ejs-dashboardlayout>
   </div>
 </div>

src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.ts

@@ -63,13 +63,15 @@ export interface DashboardPanel extends PanelModel {
   encapsulation: ViewEncapsulation.None
 })
 export class DashboardViewerComponent implements OnInit, OnDestroy {
-
   public panels: DashboardPanel[] = [];
   public cellSpacing: number[] = [8, 8];
+  public mediaQuery: string = 'max-width: 700px';
   public columns: number = 6;
   public dashboardData: DashboardModel | null = null;
   public errorMessage: string | null = null;
-
+  public isFullscreen: boolean = true;
+  public allowFloating: boolean = false;
+  public cellAspectRatio: number = 100 / 75;
   constructor(
     private route: ActivatedRoute,
     private dashboardDataService: DashboardDataService,
@@ -78,17 +80,11 @@ export class DashboardViewerComponent implements OnInit, OnDestroy {
   ) { }
 
   goBack(): void {
+
     window.history.back();
   }
 
   ngOnInit(): void {
-    // Set responsive columns based on screen size
-    this.setResponsiveColumns();
-
-    // Listen for window resize events
-    window.addEventListener('resize', () => {
-      this.setResponsiveColumns();
-    });
 
     this.route.paramMap.pipe(
       map(params => params.get('dashboardId')),
@@ -137,30 +133,17 @@ export class DashboardViewerComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    // Clean up event listener
-    window.removeEventListener('resize', () => {
-      this.setResponsiveColumns();
-    });
+    // Clean up fullscreen mode
   }
 
-  private setResponsiveColumns(): void {
-    const width = window.innerWidth;
-    if (width <= 480) {
-      this.columns = 2;
-      this.cellSpacing = [4, 4];
-    } else if (width <= 768) {
-      this.columns = 3;
-      this.cellSpacing = [6, 6];
-    } else if (width <= 1024) {
-      this.columns = 4;
-      this.cellSpacing = [8, 8];
-    } else if (width <= 1200) {
-      this.columns = 5;
-      this.cellSpacing = [8, 8];
-    } else {
-      this.columns = 6;
-      this.cellSpacing = [8, 8];
+  private setViewportMeta(): void {
+    let viewport = document.querySelector('meta[name="viewport"]');
+    if (!viewport) {
+      viewport = document.createElement('meta');
+      viewport.setAttribute('name', 'viewport');
+      document.head.appendChild(viewport);
     }
+    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
   }
 
   mapWidgetsToPanels(widgets: any[]): DashboardPanel[] {
@@ -183,10 +166,10 @@ export class DashboardViewerComponent implements OnInit, OnDestroy {
         return {
           id: `${(widget as any).instanceId}-${widget.y}-${widget.x}`,
           header: widget.thName,
-          sizeX: widget.cols,
-          sizeY: widget.rows,
-          row: widget.y,
-          col: widget.x,
+          sizeX: widget.cols || 4, // Default size if not specified
+          sizeY: widget.rows || 3, // Default size if not specified
+          row: widget.y || 0,
+          col: widget.x || 0,
           componentType: componentType,
           componentInputs: {
             config: JSON.stringify(configObject),