widget

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

@@ -36,6 +36,19 @@ import { SharedModule } from '../../shared/shared.module';
 import { AreaChartWidgetComponent } from '../widgets/area-chart-widget/area-chart-widget.component';
 import { BarChartWidgetComponent } from '../widgets/bar-chart-widget/bar-chart-widget.component';
 import { PieChartWidgetComponent } from '../widgets/pie-chart-widget/pie-chart-widget.component';
+import { ScatterBubbleChartWidgetComponent } from '../widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component';
+import { MultiRowCardWidgetComponent } from '../widgets/multi-row-card-widget/multi-row-card-widget.component';
+import { ComboChartWidgetComponent } from '../widgets/combo-chart-widget/combo-chart-widget.component';
+import { DoughnutChartWidgetComponent } from '../widgets/doughnut-chart-widget/doughnut-chart-widget.component';
+import { FunnelChartWidgetComponent } from '../widgets/funnel-chart-widget/funnel-chart-widget.component';
+import { GaugeChartWidgetComponent } from '../widgets/gauge-chart-widget/gauge-chart-widget.component';
+import { SimpleKpiWidgetComponent } from '../widgets/simple-kpi-widget/simple-kpi-widget.component';
+import { FilledMapWidgetComponent } from '../widgets/filled-map-widget/filled-map-widget.component';
+import { MatrixWidgetComponent } from '../widgets/matrix-widget/matrix-widget.component';
+import { SlicerWidgetComponent } from '../widgets/slicer-widget/slicer-widget.component';
+import { SimpleTableWidgetComponent } from '../widgets/simple-table-widget/simple-table-widget.component';
+import { WaterfallChartWidgetComponent } from '../widgets/waterfall-chart-widget/waterfall-chart-widget.component';
+import { TreemapWidgetComponent } from '../widgets/treemap-widget/treemap-widget.component';
 
 @Component({
   selector: 'app-dashboard-management',
@@ -55,6 +68,19 @@ import { PieChartWidgetComponent } from '../widgets/pie-chart-widget/pie-chart-w
     AreaChartWidgetComponent,
     BarChartWidgetComponent,
     PieChartWidgetComponent,
+    ScatterBubbleChartWidgetComponent,
+    MultiRowCardWidgetComponent,
+    ComboChartWidgetComponent,
+    DoughnutChartWidgetComponent,
+    FunnelChartWidgetComponent,
+    GaugeChartWidgetComponent,
+    SimpleKpiWidgetComponent,
+    FilledMapWidgetComponent,
+    MatrixWidgetComponent,
+    SlicerWidgetComponent,
+    SimpleTableWidgetComponent,
+    WaterfallChartWidgetComponent,
+    TreemapWidgetComponent,
     DashboardLayoutModule,
     ChartAllModule,
     AccumulationChartAllModule // Add Syncfusion DashboardLayoutModule
@@ -133,6 +159,97 @@ export class DashboardManagementComponent implements OnInit {
       cols: 2,
       rows: 2,
     }),
+    new WidgetModel({
+      id: 'local-scatter-bubble-chart',
+      name: 'Scatter/Bubble Chart (Local)',
+      component: 'ScatterBubbleChartWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-multi-row-card',
+      name: 'Multi-Row Card (Local)',
+      component: 'MultiRowCardWidgetComponent',
+      cols: 2,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-combo-chart',
+      name: 'Combo Chart (Local)',
+      component: 'ComboChartWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-doughnut-chart',
+      name: 'Doughnut Chart (Local)',
+      component: 'DoughnutChartWidgetComponent',
+      cols: 2,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-funnel-chart',
+      name: 'Funnel Chart (Local)',
+      component: 'FunnelChartWidgetComponent',
+      cols: 2,
+      rows: 3,
+    }),
+    new WidgetModel({
+      id: 'local-gauge-chart',
+      name: 'Gauge Chart (Local)',
+      component: 'GaugeChartWidgetComponent',
+      cols: 2,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-simple-kpi',
+      name: 'Simple KPI (Local)',
+      component: 'SimpleKpiWidgetComponent',
+      cols: 2,
+      rows: 1,
+    }),
+    new WidgetModel({
+      id: 'local-filled-map',
+      name: 'Filled Map (Local)',
+      component: 'FilledMapWidgetComponent',
+      cols: 4,
+      rows: 3,
+    }),
+    new WidgetModel({
+      id: 'local-matrix',
+      name: 'Matrix (Local)',
+      component: 'MatrixWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-slicer',
+      name: 'Slicer (Local)',
+      component: 'SlicerWidgetComponent',
+      cols: 2,
+      rows: 1,
+    }),
+    new WidgetModel({
+      id: 'local-simple-table',
+      name: 'Simple Table (Local)',
+      component: 'SimpleTableWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-waterfall-chart',
+      name: 'Waterfall Chart (Local)',
+      component: 'WaterfallChartWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-treemap',
+      name: 'Treemap (Local)',
+      component: 'TreemapWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
   ];
 
   private widgetComponentMap: { [key: string]: Type<any> } = {
@@ -153,6 +270,19 @@ export class DashboardManagementComponent implements OnInit {
     'AreaChartWidgetComponent': AreaChartWidgetComponent,
     'BarChartWidgetComponent': BarChartWidgetComponent,
     'PieChartWidgetComponent': PieChartWidgetComponent,
+    'ScatterBubbleChartWidgetComponent': ScatterBubbleChartWidgetComponent,
+    'MultiRowCardWidgetComponent': MultiRowCardWidgetComponent,
+    'ComboChartWidgetComponent': ComboChartWidgetComponent,
+    'DoughnutChartWidgetComponent': DoughnutChartWidgetComponent,
+    'FunnelChartWidgetComponent': FunnelChartWidgetComponent,
+    'GaugeChartWidgetComponent': GaugeChartWidgetComponent,
+    'SimpleKpiWidgetComponent': SimpleKpiWidgetComponent,
+    'FilledMapWidgetComponent': FilledMapWidgetComponent,
+    'MatrixWidgetComponent': MatrixWidgetComponent,
+    'SlicerWidgetComponent': SlicerWidgetComponent,
+    'SimpleTableWidgetComponent': SimpleTableWidgetComponent,
+    'WaterfallChartWidgetComponent': WaterfallChartWidgetComponent,
+    'TreemapWidgetComponent': TreemapWidgetComponent,
     'NewDataTableWidget': DataTableWidgetComponent // Add new widget to map
   };
 

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

@@ -30,6 +30,19 @@ import { PayrollWidgetComponent } from '../widgets/payroll-widget/payroll-widget
 import { AreaChartWidgetComponent } from '../widgets/area-chart-widget/area-chart-widget.component';
 import { BarChartWidgetComponent } from '../widgets/bar-chart-widget/bar-chart-widget.component';
 import { PieChartWidgetComponent } from '../widgets/pie-chart-widget/pie-chart-widget.component';
+import { ScatterBubbleChartWidgetComponent } from '../widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component';
+import { MultiRowCardWidgetComponent } from '../widgets/multi-row-card-widget/multi-row-card-widget.component';
+import { ComboChartWidgetComponent } from '../widgets/combo-chart-widget/combo-chart-widget.component';
+import { DoughnutChartWidgetComponent } from '../widgets/doughnut-chart-widget/doughnut-chart-widget.component';
+import { FunnelChartWidgetComponent } from '../widgets/funnel-chart-widget/funnel-chart-widget.component';
+import { GaugeChartWidgetComponent } from '../widgets/gauge-chart-widget/gauge-chart-widget.component';
+import { SimpleKpiWidgetComponent } from '../widgets/simple-kpi-widget/simple-kpi-widget.component';
+import { FilledMapWidgetComponent } from '../widgets/filled-map-widget/filled-map-widget.component';
+import { MatrixWidgetComponent } from '../widgets/matrix-widget/matrix-widget.component';
+import { SlicerWidgetComponent } from '../widgets/slicer-widget/slicer-widget.component';
+import { SimpleTableWidgetComponent } from '../widgets/simple-table-widget/simple-table-widget.component';
+import { WaterfallChartWidgetComponent } from '../widgets/waterfall-chart-widget/waterfall-chart-widget.component';
+import { TreemapWidgetComponent } from '../widgets/treemap-widget/treemap-widget.component';
 import { SharedModule } from '../../shared/shared.module';
 
 

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

+<ejs-chart [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
+    <e-series-collection>
+        <e-series [dataSource]="chartData" type="Column" xName="month" yName="sales" name="Sales"></e-series>
+        <e-series [dataSource]="chartData" type="Line" xName="month" yName="profit" name="Profit"></e-series>
+    </e-series-collection>
+</ejs-chart>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartModule, ColumnSeriesService, LineSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-combo-chart-widget',
+  standalone: true,
+  imports: [CommonModule, ChartModule],
+  providers: [ColumnSeriesService, LineSeriesService, CategoryService, LegendService, TooltipService, DataLabelService],
+  templateUrl: './combo-chart-widget.component.html',
+})
+export class ComboChartWidgetComponent implements OnInit {
+  @Input() chartData: Object[];
+  @Input() title: string = 'Combo Chart';
+
+  public primaryXAxis: Object;
+  public primaryYAxis: Object;
+
+  ngOnInit(): void {
+    this.primaryXAxis = { valueType: 'Category', title: 'Month' };
+    this.primaryYAxis = { title: 'Value' };
+    if (!this.chartData) {
+      this.chartData = [
+        { month: 'Jan', sales: 35, profit: 10 }, { month: 'Feb', sales: 28, profit: 12 },
+        { month: 'Mar', sales: 34, profit: 8 }, { month: 'Apr', sales: 32, profit: 15 },
+        { month: 'May', sales: 40, profit: 11 }, { month: 'Jun', sales: 30, profit: 13 },
+      ];
+    }
+  }
+}

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

+<ejs-accumulationchart [title]="title" [legendSettings]="legendSettings" [enableSmartLabels]="true">
+    <e-accumulation-series-collection>
+        <e-accumulation-series [dataSource]="chartData" type="Doughnut" xName="browser" yName="users" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }" innerRadius="40%"></e-accumulation-series>
+    </e-accumulation-series-collection>
+</ejs-accumulationchart>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccumulationChartModule, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-doughnut-chart-widget',
+  standalone: true,
+  imports: [CommonModule, AccumulationChartModule],
+  providers: [ AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService],
+  templateUrl: './doughnut-chart-widget.component.html',
+})
+export class DoughnutChartWidgetComponent implements OnInit {
+  @Input() chartData: Object[];
+  @Input() title: string = 'Doughnut Chart';
+  @Input() legendSettings: Object;
+
+  ngOnInit(): void {
+    if (!this.chartData) {
+      this.chartData = [
+        { browser: 'Chrome', users: 37 },
+        { browser: 'Firefox', users: 17 },
+        { browser: 'Internet Explorer', users: 19 },
+        { browser: 'Edge', users: 4 },
+        { browser: 'Safari', users: 11 },
+        { browser: 'Other', users: 12 },
+      ];
+    }
+    this.legendSettings = { visible: true };
+  }
+}

src/app/DPU/widgets/filled-map-widget/filled-map-widget.component.html

+<ejs-maps [titleSettings]="{ text: title }" [zoomSettings]="zoomSettings" [layers]="layers">
+</ejs-maps>

src/app/DPU/widgets/filled-map-widget/filled-map-widget.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MapsModule, MarkerService, ZoomService, DataLabelService, LegendService, MapsTooltipService } from '@syncfusion/ej2-angular-maps';
+
+@Component({
+  selector: 'app-filled-map-widget',
+  standalone: true,
+  imports: [CommonModule, MapsModule],
+  providers: [MarkerService, ZoomService, DataLabelService, LegendService, MapsTooltipService],
+  templateUrl: './filled-map-widget.component.html',
+})
+export class FilledMapWidgetComponent implements OnInit {
+  @Input() title: string = 'Filled Map';
+  @Input() mapData: Object[];
+
+  public zoomSettings: Object;
+  public layers: Object[];
+
+  ngOnInit(): void {
+    this.zoomSettings = { enable: true };
+    if (!this.mapData) {
+      this.mapData = [
+        { country: 'United States', value: 80 },
+        { country: 'Canada', value: 60 },
+        { country: 'Mexico', value: 40 },
+      ];
+    }
+
+    this.layers = [
+      {
+        shapeData: new Object({ data: 'https://cdn.syncfusion.com/maps/map-data/world-map.json' }),
+        shapeDataPath: 'name',
+        shapePropertyPath: 'name',
+        dataSource: this.mapData,
+        tooltipSettings: { visible: true, valuePath: 'value' },
+        shapeSettings: {
+          fill: '#E5EEF6',
+          colorValuePath: 'value',
+          colorMapping: [
+            { value: 0, color: '#C3E6CB' },
+            { value: 50, color: '#FFECB5' },
+            { value: 100, color: '#F5C6CB' }
+          ]
+        }
+      }
+    ];
+  }
+}

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

+<ejs-accumulationchart [title]="title" [legendSettings]="legendSettings" [enableSmartLabels]="true">
+    <e-accumulation-series-collection>
+        <e-accumulation-series [dataSource]="chartData" type="Funnel" xName="x" yName="y" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }"></e-accumulation-series>
+    </e-accumulation-series-collection>
+</ejs-accumulationchart>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccumulationChartModule, FunnelSeriesService, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-funnel-chart-widget',
+  standalone: true,
+  imports: [CommonModule, AccumulationChartModule],
+  providers: [FunnelSeriesService, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService],
+  templateUrl: './funnel-chart-widget.component.html',
+})
+export class FunnelChartWidgetComponent implements OnInit {
+  @Input() chartData: Object[];
+  @Input() title: string = 'Funnel Chart';
+  @Input() legendSettings: Object;
+
+  ngOnInit(): void {
+    if (!this.chartData) {
+      this.chartData = [
+        { x: 'Website Visitors', y: 10000 },
+        { x: 'Leads', y: 8000 },
+        { x: 'Opportunities', y: 6000 },
+        { x: 'Converted', y: 4000 },
+      ];
+    }
+    this.legendSettings = { visible: true };
+  }
+}

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

+<ejs-circulargauge [title]="title" [axes]="axes">
+</ejs-circulargauge>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CircularGaugeModule, GaugeTooltipService, AnnotationsService, GaugePointerService, GaugeAxisSetService } from '@syncfusion/ej2-angular-circulargauge';
+
+@Component({
+  selector: 'app-gauge-chart-widget',
+  standalone: true,
+  imports: [CommonModule, CircularGaugeModule],
+  providers: [GaugeTooltipService, AnnotationsService, GaugePointerService, GaugeAxisSetService],
+  templateUrl: './gauge-chart-widget.component.html',
+})
+export class GaugeChartWidgetComponent implements OnInit {
+  @Input() value: number = 70;
+  @Input() title: string = 'Gauge Chart';
+
+  public axes: Object[];
+
+  ngOnInit(): void {
+    this.axes = [{
+      line: { width: 0 },
+      labelStyle: { font: { size: '0px' } },
+      majorTicks: { height: 0 },
+      minorTicks: { height: 0 },
+      pointers: [{
+        value: this.value,
+        radius: '80%',
+        pointerWidth: 8,
+        cap: { radius: 7 },
+        needleTail: { length: '18%' }
+      }],
+      ranges: [
+        { start: 0, end: 50, color: '#E0B9B9' },
+        { start: 50, end: 75, color: '#B9D7EA' },
+        { start: 75, end: 100, color: '#B9EAB9' }
+      ]
+    }];
+  }
+}

src/app/DPU/widgets/matrix-widget/matrix-widget.component.html

+<div class="card h-100">
+  <div class="card-header">
+    <h5 class="card-title">{{ title }}</h5>
+  </div>
+  <div class="card-body">
+    <table class="w-full text-sm text-left text-gray-500">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+        <tr>
+          <th *ngFor="let header of headers" scope="col" class="px-6 py-3">
+            {{ header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let row of data" class="bg-white border-b">
+          <td *ngFor="let cell of row" class="px-6 py-4">
+            {{ cell }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

src/app/DPU/widgets/matrix-widget/matrix-widget.component.scss

+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}

src/app/DPU/widgets/matrix-widget/matrix-widget.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-matrix-widget',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './matrix-widget.component.html',
+  styleUrls: ['./matrix-widget.component.scss']
+})
+export class MatrixWidgetComponent implements OnInit {
+  @Input() title: string = 'Matrix';
+  @Input() headers: string[] = [];
+  @Input() data: any[][] = [];
+
+  ngOnInit(): void {
+    if (this.headers.length === 0) {
+      this.headers = ['Category', 'Q1', 'Q2', 'Q3', 'Q4'];
+    }
+    if (this.data.length === 0) {
+      this.data = [
+        ['Product A', 100, 120, 150, 130],
+        ['Product B', 80, 90, 110, 100],
+        ['Product C', 150, 130, 160, 140],
+      ];
+    }
+  }
+}

src/app/DPU/widgets/multi-row-card-widget/multi-row-card-widget.component.html

+<div class="card h-100">
+  <div class="card-header">
+    <h5 class="card-title">{{ title }}</h5>
+  </div>
+  <div class="card-body">
+    <div *ngFor="let item of cardData" class="flex justify-between items-center py-2 border-b last:border-b-0">
+      <span class="text-gray-600">{{ item.label }}</span>
+      <span class="font-bold text-lg">{{ item.value }} <span class="text-sm text-gray-500">{{ item.unit }}</span></span>
+    </div>
+  </div>
+</div>

src/app/DPU/widgets/multi-row-card-widget/multi-row-card-widget.component.scss

+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}

src/app/DPU/widgets/multi-row-card-widget/multi-row-card-widget.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-multi-row-card-widget',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './multi-row-card-widget.component.html',
+  styleUrls: ['./multi-row-card-widget.component.scss']
+})
+export class MultiRowCardWidgetComponent implements OnInit {
+  @Input() cardData: any[];
+  @Input() title: string = 'Multi-Row Card';
+
+  ngOnInit(): void {
+    if (!this.cardData) {
+      this.cardData = [
+        { label: 'Total Sales', value: '1,234,567', unit: 'USD' },
+        { label: 'New Customers', value: '5,432', unit: '' },
+        { label: 'Conversion Rate', value: '12.34', unit: '%' },
+      ];
+    }
+  }
+}

src/app/DPU/widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component.html

+<ejs-chart [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
+    <e-series-collection>
+        <e-series [dataSource]="chartData" [type]="type" xName="x" yName="y" size="size" name="Data"></e-series>
+    </e-series-collection>
+</ejs-chart>

src/app/DPU/widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartModule, ScatterSeriesService, BubbleSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-scatter-bubble-chart-widget',
+  standalone: true,
+  imports: [CommonModule, ChartModule],
+  providers: [ScatterSeriesService, BubbleSeriesService, CategoryService, LegendService, TooltipService, DataLabelService],
+  templateUrl: './scatter-bubble-chart-widget.component.html',
+})
+export class ScatterBubbleChartWidgetComponent implements OnInit {
+  @Input() chartData: Object[];
+  @Input() title: string = 'Scatter & Bubble Chart';
+  @Input() type: 'Scatter' | 'Bubble' = 'Scatter';
+
+  public primaryXAxis: Object;
+  public primaryYAxis: Object;
+
+  ngOnInit(): void {
+    this.primaryXAxis = { title: 'X-Value' };
+    this.primaryYAxis = { title: 'Y-Value' };
+    if (!this.chartData) {
+      if (this.type === 'Scatter') {
+        this.chartData = [
+          { x: 10, y: 35 }, { x: 15, y: 28 },
+          { x: 20, y: 34 }, { x: 25, y: 32 },
+          { x: 30, y: 40 }, { x: 35, y: 30 },
+        ];
+      } else { // Bubble
+        this.chartData = [
+          { x: 10, y: 35, size: 5 }, { x: 15, y: 28, size: 8 },
+          { x: 20, y: 34, size: 6 }, { x: 25, y: 32, size: 10 },
+          { x: 30, y: 40, size: 7 }, { x: 35, y: 30, size: 9 },
+        ];
+      }
+    }
+  }
+}

src/app/DPU/widgets/simple-kpi-widget/simple-kpi-widget.component.html

+<div class="card h-100">
+  <div class="card-body flex flex-col justify-center items-center">
+    <h5 class="text-lg font-semibold text-gray-600 mb-2">{{ title }}</h5>
+    <div class="text-5xl font-bold text-gray-800 mb-2">
+      {{ value }}<span *ngIf="unit" class="text-2xl ml-1">{{ unit }}</span>
+    </div>
+    <div *ngIf="trendValue" class="flex items-center text-sm">
+      <span *ngIf="trend === 'up'" class="text-green-500 flex items-center">
+        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
+        {{ trendValue }}
+      </span>
+      <span *ngIf="trend === 'down'" class="text-red-500 flex items-center">
+        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
+        {{ trendValue }}
+      </span>
+      <span *ngIf="trend === 'neutral' && trendValue" class="text-gray-500">
+        {{ trendValue }}
+      </span>
+    </div>
+  </div>
+</div>

src/app/DPU/widgets/simple-kpi-widget/simple-kpi-widget.component.scss

+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}

src/app/DPU/widgets/simple-kpi-widget/simple-kpi-widget.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-simple-kpi-widget',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './simple-kpi-widget.component.html',
+  styleUrls: ['./simple-kpi-widget.component.scss']
+})
+export class SimpleKpiWidgetComponent implements OnInit {
+  @Input() title: string = 'Key Performance Indicator';
+  @Input() value: string = '123,456';
+  @Input() unit: string = '';
+  @Input() trend: 'up' | 'down' | 'neutral' = 'neutral';
+  @Input() trendValue: string = '';
+
+  ngOnInit(): void {
+  }
+}

src/app/DPU/widgets/simple-table-widget/simple-table-widget.component.html

+<div class="card h-100">
+  <div class="card-header">
+    <h5 class="card-title">{{ title }}</h5>
+  </div>
+  <div class="card-body">
+    <table class="w-full text-sm text-left text-gray-500">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+        <tr>
+          <th *ngFor="let header of headers" scope="col" class="px-6 py-3">
+            {{ header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let row of data" class="bg-white border-b">
+          <td *ngFor="let cell of row" class="px-6 py-4">
+            {{ cell }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

src/app/DPU/widgets/simple-table-widget/simple-table-widget.component.scss

+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}

src/app/DPU/widgets/simple-table-widget/simple-table-widget.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-simple-table-widget',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './simple-table-widget.component.html',
+  styleUrls: ['./simple-table-widget.component.scss']
+})
+export class SimpleTableWidgetComponent implements OnInit {
+  @Input() title: string = 'Table';
+  @Input() headers: string[] = [];
+  @Input() data: any[][] = [];
+
+  ngOnInit(): void {
+    if (this.headers.length === 0) {
+      this.headers = ['ID', 'Name', 'Status'];
+    }
+    if (this.data.length === 0) {
+      this.data = [
+        [1, 'Item A', 'Active'],
+        [2, 'Item B', 'Inactive'],
+        [3, 'Item C', 'Active'],
+      ];
+    }
+  }
+}

src/app/DPU/widgets/slicer-widget/slicer-widget.component.html

+<div class="card h-100">
+  <div class="card-header">
+    <h5 class="card-title">{{ title }}</h5>
+  </div>
+  <div class="card-body">
+    <select
+      [(ngModel)]="selectedValue"
+      (change)="onSelectionChange()"
+      class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white"
+    >
+      <option *ngFor="let option of options" [value]="option">
+        {{ option }}
+      </option>
+    </select>
+  </div>
+</div>

src/app/DPU/widgets/slicer-widget/slicer-widget.component.scss

+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}

src/app/DPU/widgets/slicer-widget/slicer-widget.component.ts

+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-slicer-widget',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './slicer-widget.component.html',
+  styleUrls: ['./slicer-widget.component.scss']
+})
+export class SlicerWidgetComponent implements OnInit {
+  @Input() title: string = 'Slicer';
+  @Input() options: string[] = [];
+  @Input() selectedValue: string = '';
+  @Output() selectionChange = new EventEmitter<string>();
+
+  ngOnInit(): void {
+    if (this.options.length === 0) {
+      this.options = ['All', 'Option 1', 'Option 2', 'Option 3'];
+      this.selectedValue = this.options[0];
+    }
+  }
+
+  onSelectionChange(): void {
+    this.selectionChange.emit(this.selectedValue);
+  }
+}

src/app/DPU/widgets/treemap-widget/treemap-widget.component.html

+<ejs-treemap [titleSettings]="{ text: title }" [dataSource]="dataSource" [weightValuePath]="weightValuePath" [leafItemSettings]="leafItemSettings">
+</ejs-treemap>

src/app/DPU/widgets/treemap-widget/treemap-widget.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TreeMapModule, TreeMapTooltipService, TreeMapLegendService, TreeMapHighlightService, TreeMapSelectionService } from '@syncfusion/ej2-angular-treemap';
+
+@Component({
+  selector: 'app-treemap-widget',
+  standalone: true,
+  imports: [CommonModule, TreeMapModule],
+  providers: [TreeMapTooltipService, TreeMapLegendService, TreeMapHighlightService, TreeMapSelectionService],
+  templateUrl: './treemap-widget.component.html',
+})
+export class TreemapWidgetComponent implements OnInit {
+  @Input() title: string = 'Treemap';
+  @Input() treemapData: Object[];
+
+  public dataSource: Object[];
+  public weightValuePath: string;
+  public leafItemSettings: Object;
+
+  ngOnInit(): void {
+    if (!this.treemapData) {
+      this.treemapData = [
+        { Continent: 'Asia', Countries: 'China', population: 1400 },
+        { Continent: 'Asia', Countries: 'India', population: 1350 },
+        { Continent: 'Europe', Countries: 'Germany', population: 83 },
+        { Continent: 'Europe', Countries: 'France', population: 67 },
+        { Continent: 'North America', Countries: 'USA', population: 330 },
+        { Continent: 'North America', Countries: 'Canada', population: 38 },
+      ];
+    }
+    this.dataSource = this.treemapData;
+    this.weightValuePath = 'population';
+    this.leafItemSettings = { labelPath: 'Countries' };
+  }
+}

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

+<ejs-chart [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
+    <e-series-collection>
+        <e-series [dataSource]="chartData" type="Waterfall" xName="category" yName="amount" name="Amount"></e-series>
+    </e-series-collection>
+</ejs-chart>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartModule, WaterfallSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-waterfall-chart-widget',
+  standalone: true,
+  imports: [CommonModule, ChartModule],
+  providers: [WaterfallSeriesService, CategoryService, LegendService, TooltipService, DataLabelService],
+  templateUrl: './waterfall-chart-widget.component.html',
+})
+export class WaterfallChartWidgetComponent implements OnInit {
+  @Input() chartData: Object[];
+  @Input() title: string = 'Waterfall Chart';
+
+  public primaryXAxis: Object;
+  public primaryYAxis: Object;
+
+  ngOnInit(): void {
+    this.primaryXAxis = { valueType: 'Category', title: 'Category' };
+    this.primaryYAxis = { title: 'Amount' };
+    if (!this.chartData) {
+      this.chartData = [
+        { category: 'Starting Balance', amount: 10000 },
+        { category: 'Revenue', amount: 5000 },
+        { category: 'Expenses', amount: -2000 },
+        { category: 'Investments', amount: 3000 },
+        { category: 'Ending Balance', amount: 16000 },
+      ];
+    }
+  }
+}