ss

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>
-
-        </div>
-      </div>
-    </div>
-
-    <!-- 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>
+<!-- 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>
 
-        <!-- Dashboard Layout -->
-        <div *ngIf="panels.length > 0" class="dashboard-layout-container">
+<!-- Dashboard Viewer Container - Clean Layout -->
+<div *ngIf="dashboardData" class="viewer-container-clean">
+  <!-- Dashboard Content Only -->
+  <div class="viewer-content-clean">
     <ejs-dashboardlayout
       id="dashboard_default"
-            [columns]="columns"
+      #editLayout
       [cellSpacing]="cellSpacing"
       [panels]="panels"
-            #editLayout
+      [columns]="columns"
       [allowResizing]="false"
       [allowDragging]="false"
+      [allowFloating]="false"
+      [showGridLines]="false"
       class="dashboard-layout"
     >
       <e-panels>
         <e-panel
           *ngFor="let panel of panels"
-                [id]="panel.id + '-' + panel.row + '-' + panel.col"
-                [sizeX]="panel.sizeX"
-                [sizeY]="panel.sizeY"
+          [zIndex]="999"
           [row]="panel.row"
           [col]="panel.col"
-                [zIndex]="999"
+          [sizeX]="panel.sizeX"
+          [sizeY]="panel.sizeY"
+          [id]="panel.id + '-' + panel.row + '-' + panel.col"
+          class="widget-panel-clean"
         >
           <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-template>
         </e-panel>
       </e-panels>
     </ejs-dashboardlayout>
   </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/portal-manage/dashboard-management/widget-config/widget-config.component.ts

-import { Component, Inject, OnInit, OnDestroy, AfterViewInit, ViewChild, ViewContainerRef, ComponentRef } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -10,7 +10,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { FormsModule } from '@angular/forms';
 import { WidgetConfigGeneratorService } from '../services/widget-config-generator.service';
-import { WidgetConfigRegistryService } from './services/widget-config-registry.service';
 import { WidgetModel } from '../models/widgets.model';
 
 export interface WidgetConfigDialogData {
@@ -36,20 +35,16 @@ export interface WidgetConfigDialogData {
   templateUrl: './widget-config.component.html',
   styleUrls: ['./widget-config.component.scss']
 })
-export class WidgetConfigComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('configContainer', { read: ViewContainerRef }) configContainer!: ViewContainerRef;
-
+export class WidgetConfigComponent implements OnInit {
   currentConfig: any;
   availableColumns: string[];
   widgetType: string;
   comboChartTypes: string[] = ['Line', 'Column', 'Area', 'Spline'];
-  private configComponentRef: ComponentRef<any> | null = null;
 
   constructor(
     public dialogRef: MatDialogRef<WidgetConfigComponent>,
     @Inject(MAT_DIALOG_DATA) public data: WidgetConfigDialogData,
-    private widgetConfigGenerator: WidgetConfigGeneratorService,
-    public widgetConfigRegistry: WidgetConfigRegistryService
+    private widgetConfigGenerator: WidgetConfigGeneratorService
   ) { }
 
   ngOnInit(): void {
@@ -72,13 +67,6 @@ export class WidgetConfigComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     }
 
-    // Use fallback config if no config is available
-    if (!this.currentConfig || Object.keys(this.currentConfig).length === 0) {
-      this.currentConfig = this.widgetConfigRegistry.getFallbackConfig(this.widgetType);
-    }
-
-    // Load dynamic config component will be called in ngAfterViewInit
-
     const gridLikeWidgets = ['SyncfusionDatagridWidgetComponent', 'NewDataTableWidget', 'MatrixWidgetComponent'];
     if (gridLikeWidgets.includes(this.widgetType) && !this.currentConfig.columns) {
       this.currentConfig.columns = [];
@@ -285,45 +273,12 @@ export class WidgetConfigComponent implements OnInit, AfterViewInit, OnDestroy {
   addPivotFilter() { this.currentConfig.filters.push({ name: '' }); }
   removePivotFilter(index: number) { this.currentConfig.filters.splice(index, 1); }
 
-  ngAfterViewInit(): void {
-    // Load dynamic config component after view is initialized
-    this.loadConfigComponent();
-  }
-
-  private loadConfigComponent(): void {
-    const configComponentType = this.widgetConfigRegistry.getConfigComponent(this.widgetType);
-
-    if (configComponentType) {
-      // Load the specific config component
-      this.configComponentRef = this.configContainer.createComponent(configComponentType);
-      this.configComponentRef.instance.currentConfig = this.currentConfig;
-      this.configComponentRef.instance.availableColumns = this.availableColumns;
-
-      // Subscribe to config changes
-      if (this.configComponentRef.instance.configChange) {
-        this.configComponentRef.instance.configChange.subscribe((config: any) => {
-          this.currentConfig = config;
-        });
-      }
-    }
-    // If no specific config component is found, the template will show the fallback config
-  }
 
   onSave(): void {
-    // Get the latest config from the dynamic component if it exists
-    if (this.configComponentRef && this.configComponentRef.instance.currentConfig) {
-      this.currentConfig = this.configComponentRef.instance.currentConfig;
-    }
     this.dialogRef.close(this.currentConfig);
   }
 
   onCancel(): void {
     this.dialogRef.close();
   }
-
-  ngOnDestroy(): void {
-    if (this.configComponentRef) {
-      this.configComponentRef.destroy();
-    }
-  }
 }