prevurw

src/app/DPU/dashboard-management/dashboard-management.component.ts

@@ -21,11 +21,15 @@ import { KpiWidgetComponent } from '../widgets/kpi-widget/kpi-widget.component';
 import { WelcomeWidgetComponent } from '../widgets/welcome-widget/welcome-widget.component';
 import { ChartWidgetComponent } from '../widgets/chart-widget/chart-widget.component';
 import { QuickLinksWidgetComponent } from '../widgets/quick-links-widget/quick-links-widget.component';
+// New Syncfusion Widget Imports
+import { SyncfusionDatagridWidgetComponent } from '../widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component';
+import { SyncfusionPivotWidgetComponent } from '../widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component';
+import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widget/syncfusion-chart-widget.component';
 
 @Component({
   selector: 'app-dashboard-management',
   standalone: true,
-  imports: [CommonModule, RouterModule, DashboardLayoutModule, TitleCasePipe, NgComponentOutlet, FormsModule, /* Also add widgets to imports */ CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent],
+  imports: [CommonModule, RouterModule, DashboardLayoutModule, TitleCasePipe, NgComponentOutlet, FormsModule, /* Also add widgets to imports */ CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent, SyncfusionDatagridWidgetComponent, SyncfusionPivotWidgetComponent, SyncfusionChartWidgetComponent],
   templateUrl: './dashboard-management.component.html',
   styleUrls: ['./dashboard-management.component.scss']
 })
@@ -57,7 +61,11 @@ export class DashboardManagementComponent implements OnInit {
     'KpiWidgetComponent': KpiWidgetComponent,
     'WelcomeWidgetComponent': WelcomeWidgetComponent,
     'ChartWidgetComponent': ChartWidgetComponent,
-    'QuickLinksWidgetComponent': QuickLinksWidgetComponent
+    'QuickLinksWidgetComponent': QuickLinksWidgetComponent,
+    // New Syncfusion Widget Mappings
+    'SyncfusionDatagridWidgetComponent': SyncfusionDatagridWidgetComponent,
+    'SyncfusionPivotWidgetComponent': SyncfusionPivotWidgetComponent,
+    'SyncfusionChartWidgetComponent': SyncfusionChartWidgetComponent
   };
 
   constructor(

src/app/DPU/dashboard-viewer/dashboard-viewer.component.ts

@@ -19,11 +19,15 @@ import { KpiWidgetComponent } from '../widgets/kpi-widget/kpi-widget.component';
 import { WelcomeWidgetComponent } from '../widgets/welcome-widget/welcome-widget.component';
 import { ChartWidgetComponent } from '../widgets/chart-widget/chart-widget.component';
 import { QuickLinksWidgetComponent } from '../widgets/quick-links-widget/quick-links-widget.component';
+// New Syncfusion Widget Imports
+import { SyncfusionDatagridWidgetComponent } from '../widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component';
+import { SyncfusionPivotWidgetComponent } from '../widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component';
+import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widget/syncfusion-chart-widget.component';
 
 @Component({
   selector: 'app-dashboard-viewer',
   standalone: true,
-  imports: [CommonModule, RouterModule, DashboardLayoutModule, NgComponentOutlet, CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent],
+  imports: [CommonModule, RouterModule, DashboardLayoutModule, NgComponentOutlet, CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent, SyncfusionDatagridWidgetComponent, SyncfusionPivotWidgetComponent, SyncfusionChartWidgetComponent],
   templateUrl: './dashboard-viewer.component.html',
   styleUrls: ['./dashboard-viewer.component.scss']
 })
@@ -43,7 +47,11 @@ export class DashboardViewerComponent implements OnInit {
     'KpiWidgetComponent': KpiWidgetComponent,
     'WelcomeWidgetComponent': WelcomeWidgetComponent,
     'ChartWidgetComponent': ChartWidgetComponent,
-    'QuickLinksWidgetComponent': QuickLinksWidgetComponent
+    'QuickLinksWidgetComponent': QuickLinksWidgetComponent,
+    // New Syncfusion Widget Mappings
+    'SyncfusionDatagridWidgetComponent': SyncfusionDatagridWidgetComponent,
+    'SyncfusionPivotWidgetComponent': SyncfusionPivotWidgetComponent,
+    'SyncfusionChartWidgetComponent': SyncfusionChartWidgetComponent
   };
 
   constructor(

src/app/DPU/widget-management/widget-form.component.html

@@ -40,6 +40,15 @@
       </div>
     </div>
 
+    <!-- Preview Section -->
+    <div class="mb-4 p-4 border border-gray-300 rounded-lg bg-gray-50">
+      <h3 class="text-lg font-bold mb-2 text-gray-700">Widget Preview</h3>
+      <div class="w-full h-48 border border-gray-400 rounded-lg overflow-hidden shadow-inner flex items-center justify-center bg-white">
+        <ng-container *ngComponentOutlet="previewComponentType"></ng-container>
+        <p *ngIf="!previewComponentType" class="text-gray-500">Enter a valid component name to see a preview.</p>
+      </div>
+    </div>
+
     <!-- Action Buttons -->
     <div class="flex items-center justify-end">
       <button (click)="cancel()" type="button" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">

src/app/DPU/widget-management/widget-form.component.ts

 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Type } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { DashboardService } from '../../shared/services/dashboard.service';
 import { Widget } from '../../shared/models/dashboard.model';
 import { CommonModule } from '@angular/common';
+import { NgComponentOutlet } from '@angular/common';
+
+// Import all the widget components
+import { CompanyInfoWidgetComponent } from '../widgets/company-info-widget.component';
+import { HeadcountWidgetComponent } from '../widgets/headcount-widget.component';
+import { AttendanceOverviewWidgetComponent } from '../widgets/attendance-overview-widget.component';
+import { PayrollSummaryWidgetComponent } from '../widgets/payroll-summary-widget.component';
+import { EmployeeDirectoryWidgetComponent } from '../widgets/employee-directory-widget.component';
+import { KpiWidgetComponent } from '../widgets/kpi-widget/kpi-widget.component';
+import { WelcomeWidgetComponent } from '../widgets/welcome-widget/welcome-widget.component';
+import { ChartWidgetComponent } from '../widgets/chart-widget/chart-widget.component';
+import { QuickLinksWidgetComponent } from '../widgets/quick-links-widget/quick-links-widget.component';
+import { SyncfusionDatagridWidgetComponent } from '../widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component';
+import { SyncfusionPivotWidgetComponent } from '../widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component';
+import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widget/syncfusion-chart-widget.component';
 
 @Component({
   selector: 'app-widget-form',
   standalone: true,
-  imports: [CommonModule, RouterModule, ReactiveFormsModule],
+  imports: [CommonModule, RouterModule, ReactiveFormsModule, NgComponentOutlet, CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent, SyncfusionDatagridWidgetComponent, SyncfusionPivotWidgetComponent, SyncfusionChartWidgetComponent],
   templateUrl: './widget-form.component.html',
 })
 export class WidgetFormComponent implements OnInit {
@@ -18,6 +33,24 @@ export class WidgetFormComponent implements OnInit {
   widgetId: string | null = null;
   appName: string = '';
 
+  previewComponentType: Type<any> | null = null; // For dynamic preview
+
+  // Map string names to actual component classes
+  private widgetComponentMap: { [key: string]: Type<any> } = {
+    'CompanyInfoWidgetComponent': CompanyInfoWidgetComponent,
+    'HeadcountWidgetComponent': HeadcountWidgetComponent,
+    'AttendanceOverviewWidgetComponent': AttendanceOverviewWidgetComponent,
+    'PayrollSummaryWidgetComponent': PayrollSummaryWidgetComponent,
+    'EmployeeDirectoryWidgetComponent': EmployeeDirectoryWidgetComponent,
+    'KpiWidgetComponent': KpiWidgetComponent,
+    'WelcomeWidgetComponent': WelcomeWidgetComponent,
+    'ChartWidgetComponent': ChartWidgetComponent,
+    'QuickLinksWidgetComponent': QuickLinksWidgetComponent,
+    'SyncfusionDatagridWidgetComponent': SyncfusionDatagridWidgetComponent,
+    'SyncfusionPivotWidgetComponent': SyncfusionPivotWidgetComponent,
+    'SyncfusionChartWidgetComponent': SyncfusionChartWidgetComponent
+  };
+
   constructor(
     private fb: FormBuilder,
     private dashboardService: DashboardService,
@@ -44,9 +77,19 @@ export class WidgetFormComponent implements OnInit {
       this.dashboardService.getWidget(this.widgetId).subscribe(widget => {
         if (widget) {
           this.widgetForm.patchValue(widget);
+          this.updatePreview(widget.component);
         }
       });
     }
+
+    // Subscribe to component name changes for live preview
+    this.widgetForm.get('component')?.valueChanges.subscribe(componentName => {
+      this.updatePreview(componentName);
+    });
+  }
+
+  updatePreview(componentName: string): void {
+    this.previewComponentType = this.widgetComponentMap[componentName] || null;
   }
 
   onSubmit(): void {

src/app/DPU/widget-management/widget-list.component.html

@@ -14,6 +14,7 @@
           <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Widget Name</th>
           <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Component</th>
           <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default Size (Cols x Rows)</th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Preview</th>
           <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
         </tr>
       </thead>
@@ -22,13 +23,18 @@
           <td class="px-6 py-4 whitespace-nowrap">{{ widget.name }}</td>
           <td class="px-6 py-4 whitespace-nowrap">{{ widget.component }}</td>
           <td class="px-6 py-4 whitespace-nowrap">{{ widget.cols }} x {{ widget.rows }}</td>
+          <td class="px-6 py-4">
+            <div class="w-48 h-32 border border-gray-300 rounded-lg overflow-hidden shadow-sm flex items-center justify-center bg-gray-50">
+              <ng-container *ngComponentOutlet="getComponentType(widget.component)"></ng-container>
+            </div>
+          </td>
           <td class="px-6 py-4 whitespace-nowrap text-right">
             <button (click)="editWidget(widget.id)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
           </td>
         </tr>
         <!-- Show a message if there are no widgets -->
         <tr *ngIf="!(widgets$ | async)?.length">
-            <td colspan="4" class="text-center py-4">No widgets found.</td>
+            <td colspan="5" class="text-center py-4">No widgets found.</td>
         </tr>
       </tbody>
     </table>

src/app/DPU/widget-management/widget-list.component.ts

 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { Observable } from 'rxjs';
 import { Widget } from '../../shared/models/dashboard.model';
 import { DashboardService } from '../../shared/services/dashboard.service';
 import { CommonModule, TitleCasePipe } from '@angular/common';
+import { NgComponentOutlet } from '@angular/common';
+
+// Import all the widget components
+import { CompanyInfoWidgetComponent } from '../widgets/company-info-widget.component';
+import { HeadcountWidgetComponent } from '../widgets/headcount-widget.component';
+import { AttendanceOverviewWidgetComponent } from '../widgets/attendance-overview-widget.component';
+import { PayrollSummaryWidgetComponent } from '../widgets/payroll-summary-widget.component';
+import { EmployeeDirectoryWidgetComponent } from '../widgets/employee-directory-widget.component';
+import { KpiWidgetComponent } from '../widgets/kpi-widget/kpi-widget.component';
+import { WelcomeWidgetComponent } from '../widgets/welcome-widget/welcome-widget.component';
+import { ChartWidgetComponent } from '../widgets/chart-widget/chart-widget.component';
+import { QuickLinksWidgetComponent } from '../widgets/quick-links-widget/quick-links-widget.component';
+import { SyncfusionDatagridWidgetComponent } from '../widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component';
+import { SyncfusionPivotWidgetComponent } from '../widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component';
+import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widget/syncfusion-chart-widget.component';
 
 @Component({
   selector: 'app-widget-list',
   standalone: true,
-  imports: [CommonModule, RouterModule, TitleCasePipe],
+  imports: [CommonModule, RouterModule, TitleCasePipe, NgComponentOutlet, CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent, SyncfusionDatagridWidgetComponent, SyncfusionPivotWidgetComponent, SyncfusionChartWidgetComponent],
   templateUrl: './widget-list.component.html',
 })
 export class WidgetListComponent implements OnInit {
   widgets$!: Observable<Widget[]>;
   appName: string = '';
 
+  // Map string names to actual component classes
+  private widgetComponentMap: { [key: string]: Type<any> } = {
+    'CompanyInfoWidgetComponent': CompanyInfoWidgetComponent,
+    'HeadcountWidgetComponent': HeadcountWidgetComponent,
+    'AttendanceOverviewWidgetComponent': AttendanceOverviewWidgetComponent,
+    'PayrollSummaryWidgetComponent': PayrollSummaryWidgetComponent,
+    'EmployeeDirectoryWidgetComponent': EmployeeDirectoryWidgetComponent,
+    'KpiWidgetComponent': KpiWidgetComponent,
+    'WelcomeWidgetComponent': WelcomeWidgetComponent,
+    'ChartWidgetComponent': ChartWidgetComponent,
+    'QuickLinksWidgetComponent': QuickLinksWidgetComponent,
+    'SyncfusionDatagridWidgetComponent': SyncfusionDatagridWidgetComponent,
+    'SyncfusionPivotWidgetComponent': SyncfusionPivotWidgetComponent,
+    'SyncfusionChartWidgetComponent': SyncfusionChartWidgetComponent
+  };
+
   constructor(
     private dashboardService: DashboardService,
     private route: ActivatedRoute,
@@ -32,6 +63,10 @@ export class WidgetListComponent implements OnInit {
     }
   }
 
+  getComponentType(componentName: string): Type<any> | null {
+    return this.widgetComponentMap[componentName] || null;
+  }
+
   editWidget(widgetId: string): void {
     this.router.navigate(['/dpu', this.appName, 'widget-warehouse', 'edit', widgetId]);
   }

src/app/DPU/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.html

+<div class="bg-white p-4 rounded-lg shadow-md h-full flex flex-col">
+  <h3 class="text-lg font-semibold text-gray-500 mb-4">{{ title }}</h3>
+  <ejs-chart id='chart-container' [primaryXAxis]='primaryXAxis' [title]='title' class="flex-grow">
+    <e-series-collection>
+      <e-series type='Column' [dataSource]='chartData' xName='month' yName='sales' name='Sales'></e-series>
+    </e-series-collection>
+  </ejs-chart>
+</div>

src/app/DPU/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.ts

+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartModule, ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-syncfusion-chart-widget',
+  standalone: true,
+  imports: [CommonModule, ChartModule],
+  providers: [ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService],
+  templateUrl: './syncfusion-chart-widget.component.html',
+})
+export class SyncfusionChartWidgetComponent implements OnInit {
+  public primaryXAxis: Object;
+  public chartData: Object[];
+  public title: string;
+
+  constructor() {
+    this.chartData = [
+      { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
+      { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
+      { month: 'May', sales: 40 }, { month: 'Jun', sales: 30 },
+      { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 37 },
+      { month: 'Sep', sales: 39 }, { month: 'Oct', sales: 30 },
+      { month: 'Nov', sales: 35 }, { month: 'Dec', sales: 41 }
+    ];
+    this.primaryXAxis = { valueType: 'Category' };
+    this.title = 'Monthly Sales Analysis';
+  }
+
+  ngOnInit(): void { }
+}

src/app/DPU/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.html

+<div class="bg-white p-4 rounded-lg shadow-md h-full flex flex-col">
+  <h3 class="text-lg font-semibold text-gray-500 mb-4">Order Data Grid</h3>
+  <ejs-grid [dataSource]='data' [allowPaging]='true' [pageSettings]='pageSettings' [allowSorting]='true' [allowFiltering]='true' [allowGrouping]='true' class="flex-grow">
+    <e-columns>
+      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column>
+      <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column>
+      <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width='120'></e-column>
+      <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
+    </e-columns>
+  </ejs-grid>
+</div>

src/app/DPU/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts

+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
+
+@Component({
+  selector: 'app-syncfusion-datagrid-widget',
+  standalone: true,
+  imports: [CommonModule, GridModule],
+  providers: [PageService, SortService, FilterService, GroupService],
+  templateUrl: './syncfusion-datagrid-widget.component.html',
+})
+export class SyncfusionDatagridWidgetComponent implements OnInit {
+  public data: object[] = [];
+  public pageSettings: Object = { pageSize: 6 };
+
+  ngOnInit(): void {
+    this.data = [
+      { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCity: 'Reims' },
+      { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCity: 'Münster' },
+      { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCity: 'Rio de Janeiro' },
+      { OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, ShipCity: 'Lyon' },
+      { OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 2, ShipCity: 'Charleroi' },
+      { OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 7, ShipCity: 'Rio de Janeiro' },
+      { OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 8, ShipCity: 'Bern' },
+      { OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, ShipCity: 'Genève' },
+      { OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 1, ShipCity: 'Resende' },
+      { OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 2, ShipCity: 'Caracas' },
+      { OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 3, ShipCity: 'Graz' },
+      { OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, ShipCity: 'Madrid' },
+      { OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 5, ShipCity: 'London' },
+      { OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 6, ShipCity: 'Rio de Janeiro' },
+      { OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 7, ShipCity: 'Madrid' },
+      { OrderID: 10263, CustomerID: 'ERNSH', EmployeeID: 8, ShipCity: 'Graz' },
+      { OrderID: 10264, CustomerID: 'FOLIG', EmployeeID: 9, ShipCity: 'Liège' },
+      { OrderID: 10265, CustomerID: 'BLONP', EmployeeID: 1, ShipCity: 'Marseille' },
+      { OrderID: 10266, CustomerID: 'WARTH', EmployeeID: 2, ShipCity: 'Frankfurt a.M.' },
+      { OrderID: 10267, CustomerID: 'FRANS', EmployeeID: 3, ShipCity: 'Torino' },
+      { OrderID: 10268, CustomerID: 'GROSR', EmployeeID: 4, ShipCity: 'London' },
+      { OrderID: 10269, CustomerID: 'WHITC', EmployeeID: 5, ShipCity: 'Seattle' },
+      { OrderID: 10270, CustomerID: 'VAFFE', EmployeeID: 6, ShipCity: 'Oslo' },
+      { OrderID: 10271, CustomerID: 'BLAUS', EmployeeID: 7, ShipCity: 'Mannheim' },
+      { OrderID: 10272, CustomerID: 'BLONP', EmployeeID: 8, ShipCity: 'Marseille' },
+      { OrderID: 10273, CustomerID: 'WARTH', EmployeeID: 9, ShipCity: 'Frankfurt a.M.' },
+      { OrderID: 10274, CustomerID: 'FRANS', EmployeeID: 1, ShipCity: 'Torino' },
+      { OrderID: 10275, CustomerID: 'GROSR', EmployeeID: 2, ShipCity: 'London' },
+      { OrderID: 10276, CustomerID: 'WHITC', EmployeeID: 3, ShipCity: 'Seattle' },
+    ];
+  }
+}

src/app/DPU/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.html

+<div class="bg-white p-4 rounded-lg shadow-md h-full flex flex-col">
+  <h3 class="text-lg font-semibold text-gray-500 mb-4">Sales Pivot Analysis</h3>
+  <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]='dataSourceSettings' [height]='"100%"' [width]='"100%"' [showFieldList]='true' [showToolbar]='true' [allowCalculatedField]='true' [allowConditionalFormatting]='true' [allowGrouping='true'] class="flex-grow">
+  </ejs-pivotview>
+</div>

src/app/DPU/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.ts

+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, LoadEventArgs } from '@syncfusion/ej2-angular-pivotview';
+
+@Component({
+  selector: 'app-syncfusion-pivot-widget',
+  standalone: true,
+  imports: [CommonModule, PivotViewModule],
+  providers: [FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService],
+  templateUrl: './syncfusion-pivot-widget.component.html',
+})
+export class SyncfusionPivotWidgetComponent implements OnInit {
+  public dataSource: IDataSet[];
+  public dataSourceSettings: Object;
+
+  constructor() {
+    this.dataSource = [
+      { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015' },
+      { 'Sold': 51, 'Amount': 91915, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016' },
+      { 'Sold': 90, 'Amount': 173155, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017' },
+      { 'Sold': 25, 'Amount': 43750, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015' },
+      { 'Sold': 49, 'Amount': 76821, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016' },
+      { 'Sold': 60, 'Amount': 106000, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017' },
+      { 'Sold': 50, 'Amount': 85000, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015' },
+      { 'Sold': 63, 'Amount': 104060, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016' },
+      { 'Sold': 90, 'Amount': 173155, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017' },
+      { 'Sold': 29, 'Amount': 53000, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015' },
+      { 'Sold': 40, 'Amount': 68000, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016' },
+      { 'Sold': 55, 'Amount': 100000, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017' },
+      { 'Sold': 22, 'Amount': 40000, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015' },
+      { 'Sold': 35, 'Amount': 60000, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016' },
+      { 'Sold': 70, 'Amount': 140000, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017' },
+      { 'Sold': 15, 'Amount': 30000, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015' },
+      { 'Sold': 28, 'Amount': 50000, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016' },
+      { 'Sold': 40, 'Amount': 70000, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017' }
+    ];
+
+    this.dataSourceSettings = {
+      dataSource: this.dataSource,
+      expandAll: false,
+      rows: [{ name: 'Country' }],
+      columns: [{ name: 'Year' }],
+      values: [{ name: 'Sold' }, { name: 'Amount' }],
+      filters: [],
+      drilledMembers: [{ name: 'Country', items: ['France'] }]
+    };
+  }
+
+  ngOnInit(): void { }
+}

src/app/shared/services/dashboard.service.ts

@@ -66,6 +66,25 @@ const HR_WIDGETS: Widget[] = [
     component: 'QuickLinksWidgetComponent',
     cols: 2, rows: 3, y: 0, x: 0
   },
+  // New Syncfusion Widgets
+  {
+    id: 'widget-sf-datagrid',
+    name: 'SF Data Grid',
+    component: 'SyncfusionDatagridWidgetComponent',
+    cols: 6, rows: 4, y: 0, x: 0
+  },
+  {
+    id: 'widget-sf-pivot',
+    name: 'SF Pivot Table',
+    component: 'SyncfusionPivotWidgetComponent',
+    cols: 6, rows: 4, y: 0, x: 0
+  },
+  {
+    id: 'widget-sf-chart',
+    name: 'SF Chart',
+    component: 'SyncfusionChartWidgetComponent',
+    cols: 6, rows: 4, y: 0, x: 0
+  },
 ];
 
 const HR_DASHBOARDS: DashboardLayout[] = [
@@ -112,6 +131,17 @@ const HR_DASHBOARDS: DashboardLayout[] = [
       { ...HR_WIDGETS[8], cols: 4, rows: 3, x: 0, y: 2 }, // Monthly Activity Chart
       { ...HR_WIDGETS[9], cols: 2, rows: 3, x: 4, y: 2 }, // Quick Links
     ]
+  },
+  // New Dashboard for 'syncfusion' app
+  {
+    id: 'dash-syncfusion-demo',
+    name: 'Syncfusion Demo',
+    appName: 'syncfusion',
+    widgets: [
+      { ...HR_WIDGETS[10], cols: 6, rows: 4, x: 0, y: 0 }, // SF Data Grid
+      { ...HR_WIDGETS[11], cols: 6, rows: 4, x: 0, y: 4 }, // SF Pivot Table
+      { ...HR_WIDGETS[12], cols: 6, rows: 4, x: 0, y: 8 }, // SF Chart
+    ]
   }
 ];