ww

src/app/app.component.html

 <router-outlet></router-outlet>
 
-<ejs-dialog #notificationDialog
-            [header]="notification?.title"
-            [content]="notification?.content"
-            [visible]="isNotificationVisible"
+<!-- <ejs-dialog #notificationDialog
+            [header]="notification?.title || ''"
+            [content]="notification?.content || ''"
+            [visible]="isNotificationVisible && notification !== null"
             (close)="onDialogClose()"
             [isModal]="true"
             width="400px"
@@ -12,16 +12,16 @@
             [animationSettings]="{ effect: 'Zoom' }">
     <ng-template #header>
         <div [ngClass]="getHeaderClass()">
-            <span class="e-dlg-title">{{ notification?.title }}</span>
+            <span class="e-dlg-title">{{ notification?.title || '' }}</span>
         </div>
     </ng-template>
     <ng-template #content>
         <div class="dialog-content">
-            <p>{{ notification?.content }}</p>
+            <p>{{ notification?.content || '' }}</p>
         </div>
     </ng-template>
      <ng-template #footerTemplate>
         <button ejs-button (click)="onDialogClose()" cssClass="e-primary">OK</button>
     </ng-template>
 </ejs-dialog>
-
+ -->

src/app/app.component.ts

@@ -32,15 +32,18 @@ export class AppComponent implements OnDestroy, OnInit {
   public isNotificationVisible = false;
 
   constructor(private notificationService: NotificationService) {
-    this.notificationSubscription = this.notificationService.notification$.subscribe(
-      (notification) => {
-        this.notification = notification;
-        this.isNotificationVisible = true;
-        if (this.notificationDialog) {
-          this.notificationDialog.show();
-        }
-      }
-    );
+    // this.notificationSubscription = this.notificationService.notification$.subscribe(
+    //   (notification) => {
+    //     this.notification = notification;
+    //     this.isNotificationVisible = true;
+    //     // Add a small delay to ensure the view is updated before showing the dialog
+    //     setTimeout(() => {
+    //       if (this.notificationDialog && this.notification) {
+    //         this.notificationDialog.show();
+    //       }
+    //     }, 0);
+    //   }
+    // );
   }
 
   ngOnInit() {
@@ -49,8 +52,8 @@ export class AppComponent implements OnDestroy, OnInit {
   }
 
   getHeaderClass(): string {
-    if (!this.notification) {
-      return '';
+    if (!this.notification || !this.notification.type) {
+      return 'e-dlg-header-content';
     }
     return `e-dlg-header-content e-dlg-${this.notification.type}`;
   }

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

@@ -106,9 +106,10 @@
             #editLayout
             [allowResizing]="true"
             [allowDragging]="true"
-            [allowFloating]="false"
+            [allowFloating]="allowFloating"
             [enableRtl]="false"
             [enablePersistence]="false"
+            [cellAspectRatio]="cellAspectRatio"
             class="dashboard-layout"
           >
             <e-panels>

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

@@ -89,7 +89,8 @@ export class DashboardManagementComponent implements OnInit, OnDestroy {
   public dashboardData: DashboardModel | null = null;
   public userDashboards: DashboardModel[] = [];
   public selectedDashboardId: DashboardModel | null = null;
-
+  public allowFloating: boolean = false;
+  public cellAspectRatio: number = 100 / 75;
   constructor(
     private dashboardDataService: DashboardDataService,
     private mMenuitemsWidgetService: MMenuitemsWidgetService,

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

@@ -6,7 +6,7 @@ import { MatDialog } from '@angular/material/dialog';
 // Syncfusion Modules
 import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
 import { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';
-import { GridComponent, GridModule, PageService, SelectionService } from '@syncfusion/ej2-angular-grids';
+import { GridComponent, GridModule, PageService, SelectionService, ResizeService } from '@syncfusion/ej2-angular-grids';
 import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
 
 import { NotificationService } from '../../../shared/services/notification.service';
@@ -68,7 +68,7 @@ export interface DashboardPanel extends PanelModel {
     // Add all widget components here to make them available for NgComponentOutlet
     CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent, SyncfusionDatagridWidgetComponent, SyncfusionPivotWidgetComponent, SyncfusionChartWidgetComponent, DataTableWidgetComponent, AreaChartWidgetComponent, BarChartWidgetComponent, PieChartWidgetComponent, ScatterBubbleChartWidgetComponent, MultiRowCardWidgetComponent, ComboChartWidgetComponent, DoughnutChartWidgetComponent, FunnelChartWidgetComponent, GaugeChartWidgetComponent, SimpleKpiWidgetComponent, FilledMapWidgetComponent, MatrixWidgetComponent, SlicerWidgetComponent, SimpleTableWidgetComponent, WaterfallChartWidgetComponent, TreemapWidgetComponent
   ],
-  providers: [PageService, SelectionService],
+  providers: [PageService, SelectionService, ResizeService],
   templateUrl: './dataset-widget-linker.component.html',
   styleUrls: ['./dataset-widget-linker.component.scss']
 })

src/app/portal-manage/dashboard-management/widgets/area-chart-widget/area-chart-widget.component.ts

@@ -28,7 +28,18 @@ export class AreaChartWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
-    this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
+
+    this.chartData = data.map(item => ({
+      x: item[xField] || '',
+      y: item[yField] || 0
+    }));
   }
 
   onReset(): void {

src/app/portal-manage/dashboard-management/widgets/bar-chart-widget/bar-chart-widget.component.ts

@@ -31,7 +31,18 @@ export class BarChartWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
-    this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
+
+    this.chartData = data.map(item => ({
+      x: item[xField] || '',
+      y: item[yField] || 0
+    }));
   }
 
   onReset(): void {

src/app/portal-manage/dashboard-management/widgets/combo-chart-widget/combo-chart-widget.component.html

@@ -10,9 +10,9 @@
 </div>
 
 <!-- Chart -->
-<ejs-chart *ngIf="!isLoading && !hasError && configObj?.series" [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
+<ejs-chart *ngIf="!isLoading && !hasError" [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
     <e-series-collection>
-        <e-series *ngFor="let series of configObj.series"
+        <e-series *ngFor="let series of (configObj?.series || [])"
                   [dataSource]="chartData"
                   [type]="series.type || 'Column'"
                   [xName]="series.xName"

src/app/portal-manage/dashboard-management/widgets/combo-chart-widget/combo-chart-widget.component.ts

@@ -25,10 +25,31 @@ export class ComboChartWidgetComponent extends BaseWidgetComponent {
     this.primaryXAxis = { valueType: 'Category', title: this.configObj.xAxisTitle || '' };
     this.primaryYAxis = { title: this.configObj.yAxisTitle || '' };
     this.chartData = [];
+
+    // Ensure series configuration exists
+    if (!this.configObj.series) {
+      this.configObj.series = [
+        { type: 'Column', xName: 'x', yName: 'y1', name: 'Series 1' },
+        { type: 'Line', xName: 'x', yName: 'y2', name: 'Series 2' }
+      ];
+    }
   }
 
   onDataUpdate(data: any[]): void {
-    this.chartData = data;
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
+    const y2Field = this.configObj.y2Field || 'y2';
+
+    this.chartData = data.map(item => ({
+      x: item[xField] || '',
+      y1: item[yField] || 0,
+      y2: item[y2Field] || 0
+    }));
   }
 
   onReset(): void {

src/app/portal-manage/dashboard-management/widgets/doughnut-chart-widget/doughnut-chart-widget.component.ts

@@ -26,17 +26,27 @@ export class DoughnutChartWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
     let transformedData = data;
 
     if (this.configObj.aggregation === 'count') {
       const counts = transformedData.reduce((acc, item) => {
-        const key = item[this.configObj.xField];
+        const key = item[xField] || '';
         acc[key] = (acc[key] || 0) + 1;
         return acc;
       }, {});
       transformedData = Object.keys(counts).map(key => ({ x: key, y: counts[key] }));
     } else {
-      transformedData = transformedData.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
+      transformedData = transformedData.map(item => ({
+        x: item[xField] || '',
+        y: item[yField] || 0
+      }));
     }
     this.chartData = transformedData;
   }

src/app/portal-manage/dashboard-management/widgets/dynamic-widgets/data-table-widget.component.ts

 
 import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
+import { GridModule, PageService, SortService, FilterService, GroupService, ResizeService } from '@syncfusion/ej2-angular-grids';
 
 @Component({
   selector: 'app-data-table-widget',
   standalone: true,
   imports: [CommonModule, GridModule],
-  providers: [PageService, SortService, FilterService, GroupService],
+  providers: [PageService, SortService, FilterService, GroupService, ResizeService],
   templateUrl: './data-table-widget.component.html',
   styleUrls: ['./data-table-widget.component.scss']
 })

src/app/portal-manage/dashboard-management/widgets/funnel-chart-widget/funnel-chart-widget.component.ts

@@ -26,7 +26,18 @@ export class FunnelChartWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
-    this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
+
+    this.chartData = data.map(item => ({
+      x: item[xField] || '',
+      y: item[yField] || 0
+    }));
   }
 
   onReset(): void {

src/app/portal-manage/dashboard-management/widgets/gauge-chart-widget/gauge-chart-widget.component.ts

@@ -25,14 +25,15 @@ export class GaugeChartWidgetComponent extends BaseWidgetComponent {
 
   onDataUpdate(data: any[]): void {
     let value = 0;
-    if (data.length > 0) {
+    if (data && data.length > 0) {
+      const valueField = this.configObj.valueField || 'value';
       if (this.configObj.aggregation === 'sum') {
-        value = data.reduce((sum, item) => sum + (item[this.configObj.valueField] || 0), 0);
+        value = data.reduce((sum, item) => sum + (item[valueField] || 0), 0);
       } else if (this.configObj.aggregation === 'avg') {
-        const sum = data.reduce((sum, item) => sum + (item[this.configObj.valueField] || 0), 0);
+        const sum = data.reduce((sum, item) => sum + (item[valueField] || 0), 0);
         value = sum / data.length;
       } else {
-        value = data[0][this.configObj.valueField];
+        value = data[0][valueField] || 0;
       }
     }
     this.setAxes(value);

src/app/portal-manage/dashboard-management/widgets/pie-chart-widget/pie-chart-widget.component.ts

@@ -26,17 +26,27 @@ export class PieChartWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
     let transformedData = data;
 
     if (this.configObj.aggregation === 'count') {
       const counts = transformedData.reduce((acc, item) => {
-        const key = item[this.configObj.xField];
+        const key = item[xField] || '';
         acc[key] = (acc[key] || 0) + 1;
         return acc;
       }, {});
       transformedData = Object.keys(counts).map(key => ({ x: key, y: counts[key] }));
     } else {
-      transformedData = transformedData.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
+      transformedData = transformedData.map(item => ({
+        x: item[xField] || '',
+        y: item[yField] || 0
+      }));
     }
     this.chartData = transformedData;
   }

src/app/portal-manage/dashboard-management/widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component.ts

@@ -31,10 +31,26 @@ export class ScatterBubbleChartWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
+    const sizeField = this.configObj.sizeField || 'size';
+
     if (this.type === 'Bubble') {
-      this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField], size: item[this.configObj.sizeField] }));
+      this.chartData = data.map(item => ({
+        x: item[xField] || 0,
+        y: item[yField] || 0,
+        size: item[sizeField] || 0
+      }));
     } else {
-      this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
+      this.chartData = data.map(item => ({
+        x: item[xField] || 0,
+        y: item[yField] || 0
+      }));
     }
   }
 

src/app/portal-manage/dashboard-management/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.html

@@ -22,7 +22,7 @@
     <!-- Chart -->
     <ejs-chart *ngIf="!isLoading && !hasError" style="height: 100%; width: 100%" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
         <e-series-collection>
-            <e-series [dataSource]="chartData.executeLocal(query)" type="Column" xName="x" yName="y" name="Data"></e-series>
+            <e-series [dataSource]="chartData" type="Column" xName="x" yName="y" name="Data"></e-series>
         </e-series-collection>
       </ejs-chart>
 

src/app/portal-manage/dashboard-management/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.ts

 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ChartModule, ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
-import { DataManager, Query } from '@syncfusion/ej2-data'; // Added DataManager and Query import
 import { DashboardStateService } from '../../services/dashboard-state.service';
 import { BaseWidgetComponent } from '../base-widget.component';
 
@@ -13,10 +12,9 @@ import { BaseWidgetComponent } from '../base-widget.component';
   templateUrl: './syncfusion-chart-widget.component.html',
 })
 export class SyncfusionChartWidgetComponent extends BaseWidgetComponent {
-  public chartData: DataManager = new DataManager([]); // Changed type and initialized
+  public chartData: Object[] = []; // Changed to simple array
   public primaryXAxis: Object;
   public primaryYAxis: Object;
-  public query: Query = new Query(); // Added Query instance
 
   constructor(protected override dashboardStateService: DashboardStateService) {
     super(dashboardStateService);
@@ -26,21 +24,31 @@ export class SyncfusionChartWidgetComponent extends BaseWidgetComponent {
     this.title = this.configObj.title || 'Syncfusion Chart';
     this.primaryXAxis = { valueType: 'Category', title: this.configObj.xAxisTitle || '' };
     this.primaryYAxis = { title: this.configObj.yAxisTitle || '' };
-    this.chartData = new DataManager([]);
+    this.chartData = [];
   }
 
   onDataUpdate(data: any[]): void {
-    const dm = new DataManager(data);
-    this.chartData = new DataManager(dm.executeLocal(new Query()).map((item: any) => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] })));
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
+
+    this.chartData = data.map((item: any) => ({
+      x: item[xField] || '',
+      y: item[yField] || 0
+    }));
   }
 
   onReset(): void {
     this.title = 'Syncfusion Chart (Default)';
-    this.chartData = new DataManager([
+    this.chartData = [
       { x: 'Jan', y: 35 }, { x: 'Feb', y: 28 },
       { x: 'Mar', y: 34 }, { x: 'Apr', y: 32 },
       { x: 'May', y: 40 }, { x: 'Jun', y: 30 },
-    ]);
+    ];
     this.primaryXAxis = { valueType: 'Category', title: 'Month' };
     this.primaryYAxis = { title: 'Sales' };
   }

src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts

 import { Component, ViewChild, OnInit, OnDestroy, AfterViewInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { GridModule, PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, GridComponent, ToolbarItems, SearchSettingsModel, GroupSettingsModel, FilterSettingsModel, SelectionSettingsModel, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, PdfExportProperties, ExcelExportProperties, LoadingIndicatorModel, Column,SearchService } from '@syncfusion/ej2-angular-grids';
+import { GridModule, PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, GridComponent, ToolbarItems, SearchSettingsModel, GroupSettingsModel, FilterSettingsModel, SelectionSettingsModel, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, PdfExportProperties, ExcelExportProperties, LoadingIndicatorModel, Column, SearchService, ResizeService } from '@syncfusion/ej2-angular-grids';
 import { MenuEventArgs } from '@syncfusion/ej2-navigations';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { DataManager, Query } from '@syncfusion/ej2-data';
@@ -53,7 +53,7 @@ L10n.load({
   selector: 'app-syncfusion-datagrid-widget',
   standalone: true,
   imports: [CommonModule, GridModule],
-  providers: [PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, SearchService],
+  providers: [PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, SearchService, ResizeService],
   templateUrl: './syncfusion-datagrid-widget.component.html',
   styleUrls: ['./syncfusion-datagrid-widget.component.scss']
 })

src/app/portal-manage/dashboard-management/widgets/waterfall-chart-widget/waterfall-chart-widget.component.ts

@@ -28,7 +28,18 @@ export class WaterfallChartWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
-    this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
+    if (!data || data.length === 0) {
+      this.chartData = [];
+      return;
+    }
+
+    const xField = this.configObj.xField || 'x';
+    const yField = this.configObj.yField || 'y';
+
+    this.chartData = data.map(item => ({
+      x: item[xField] || '',
+      y: item[yField] || 0
+    }));
   }
 
   onReset(): void {