css

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

+<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>{{dashboardData?.thName}}</h1>
+              <!-- <p>Create and manage your dashboards</p> -->
+            </div>
+          </div>
 
-<!-- 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>
+    </div>
 
-<!-- Dashboard Viewer Container - Clean Layout -->
-<div *ngIf="dashboardData" class="viewer-container-clean">
-  <!-- Dashboard Content Only -->
-  <div class="viewer-content-clean">
+    <!-- Enhanced Dashboard Content Area -->
+    <div class="dashboard-content-area">
+
+      <!-- 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_viewer'
-      #viewerLayout
-      [cellSpacing]="cellSpacing"
+            id="dashboard_default"
             [columns]="columns"
-      [allowResizing]="false"
-      [allowDragging]="false"
-      [allowFloating]="false"
-      [showGridLines]="false"
-      class="dashboard-viewer-layout-clean"
+            [cellSpacing]="cellSpacing"
+            [panels]="panels"
+            #editLayout
+            [allowResizing]="true"
+            [allowDragging]="true"
+            class="dashboard-layout"
           >
             <e-panels>
               <e-panel
                 *ngFor="let panel of panels"
-          [row]="panel.row"
-          [col]="panel.col"
+                [id]="panel.id + '-' + panel.row + '-' + panel.col"
                 [sizeX]="panel.sizeX"
                 [sizeY]="panel.sizeY"
-          [id]="panel.id"
-          class="widget-panel-clean"
+                [row]="panel.row"
+                [col]="panel.col"
+                [zIndex]="999"
               >
                 <ng-template #header>
-            <!-- No header -->
                 </ng-template>
                 <ng-template #content>
-            <div class="widget-content-clean">
-              <ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container>
-            </div>
+                  <ng-container
+                    [ngComponentOutlet]="panel.componentType"
+                    [ngComponentOutletInputs]="panel.componentInputs"
+                  ></ng-container>
                 </ng-template>
               </e-panel>
             </e-panels>
           </ejs-dashboardlayout>
         </div>
+      </div>
+    </div>
+  </div>
 </div>

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

-import { Component, OnInit, Type, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, Type, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts';
@@ -60,6 +60,7 @@ export interface DashboardPanel extends PanelModel {
   ],
   templateUrl: './dashboard-viewer.component.html',
   styleUrls: ['./dashboard-viewer.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class DashboardViewerComponent implements OnInit {