config

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

@@ -80,8 +80,8 @@
           (change)="loadSelectedDashboard()"
           class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white"
         >
-          <option *ngFor="let dash of userDashboards" [value]="dash.id">
-            {{ dash.name }}
+          <option *ngFor="let dash of userDashboards" [ngValue]="dash">
+            {{ dash.thName }}
           </option>
         </select>
         <app-dataset-picker
@@ -90,7 +90,7 @@
         <div *ngIf="dashboardData" class="relative flex items-center">
           <input
             type="text"
-            [(ngModel)]="dashboardData.name"
+            [(ngModel)]="dashboardData.thName"
             (blur)="saveDashboardName()"
             class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 font-semibold"
           />
@@ -137,7 +137,7 @@
     </div>
 
     <div class="dashboard-content">
-      
+
       <ejs-dashboardlayout
         [columns]="6"
         #editLayout

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

@@ -111,7 +111,7 @@ export class DashboardManagementComponent implements OnInit {
   public dashboardData: DashboardModel | null = null;
 
   public userDashboards: DashboardModel[] = [];
-  public selectedDashboardId: string = '';
+  public selectedDashboardId: DashboardModel
 
   private localWidgets: WidgetModel[] = [
     new WidgetModel({
@@ -212,6 +212,15 @@ export class DashboardManagementComponent implements OnInit {
       component: 'ScatterBubbleChartWidgetComponent',
       cols: 3,
       rows: 2,
+      config: {
+        title: 'Employee Performance vs. Salary (Scatter)',
+        source: { type: 'url', url: 'assets/data/employee-data.json' },
+        xField: 'performanceScore',
+        yField: 'salary',
+        xAxisTitle: 'Performance Score',
+        yAxisTitle: 'Salary',
+        type: 'Scatter'
+      }
     }),
     new WidgetModel({
       id: 'local-multi-row-card',
@@ -377,10 +386,10 @@ export class DashboardManagementComponent implements OnInit {
   ngOnInit(): void {
     this.dashboardDataService.getDashboards().subscribe(dashboards => {
       this.userDashboards = dashboards;
-      if (this.userDashboards.length > 0) {
-        this.selectedDashboardId = this.userDashboards[0].id;
-        this.loadSelectedDashboard();
-      }
+      // if (this.userDashboards.length > 0) {
+      //   this.selectedDashboardId = this.userDashboards[0];
+      //   this.loadSelectedDashboard();
+      // }
     });
 
     // Populate availableWidgets from WidgetService
@@ -410,8 +419,9 @@ export class DashboardManagementComponent implements OnInit {
   }
 
   loadSelectedDashboard(): void {
+    console.log(this.selectedDashboardId)
     if (this.selectedDashboardId) {
-      this.dashboardDataService.getDashboardById(this.selectedDashboardId).subscribe(dashboard => {
+      this.dashboardDataService.getDashboardById(this.selectedDashboardId.dashboardId).subscribe(dashboard => {
         if (dashboard) {
           this.dashboardData = dashboard;
           this.panels = this.mapWidgetsToPanels(dashboard.widgets || []);
@@ -427,13 +437,13 @@ export class DashboardManagementComponent implements OnInit {
     const newDashboardName = prompt('Enter a name for the new dashboard:');
     if (newDashboardName) {
       const newDashboard = new DashboardModel({
-        id: `dash-${Date.now()}`,
-        name: newDashboardName,
+        dashboardId: `dash-${Date.now()}`,
+        thName: newDashboardName,
         widgets: []
       });
-      this.dashboardDataService.addDashboard(newDashboard).subscribe(addedDashboard => {
+      this.dashboardDataService.saveDashboard(newDashboard).subscribe(addedDashboard => {
         this.userDashboards.push(addedDashboard);
-        this.selectedDashboardId = addedDashboard.id;
+        this.selectedDashboardId = addedDashboard;
         this.loadSelectedDashboard();
       });
     }
@@ -441,7 +451,7 @@ export class DashboardManagementComponent implements OnInit {
 
   saveDashboardName(): void {
     if (this.dashboardData) {
-      this.dashboardDataService.updateDashboard(this.dashboardData).subscribe();
+      this.dashboardDataService.saveDashboard(this.dashboardData).subscribe();
     }
   }
 
@@ -451,7 +461,7 @@ export class DashboardManagementComponent implements OnInit {
       // Ensure widget.config exists, initialize if not.
       const widgetConfig = widget.config || {};
 
-      
+
 
       return {
         id: widget.id,
@@ -484,11 +494,11 @@ export class DashboardManagementComponent implements OnInit {
     if (dataFetchTasks.length > 0) {
       forkJoin(dataFetchTasks).subscribe(() => {
         console.log('All data fetched, now saving dashboard...');
-        this.dashboardDataService.updateDashboard(this.dashboardData!).subscribe();
+        this.dashboardDataService.saveDashboard(this.dashboardData!).subscribe();
       });
     } else {
       console.log('No data to fetch, saving dashboard directly...');
-      this.dashboardDataService.updateDashboard(this.dashboardData).subscribe();
+      this.dashboardDataService.saveDashboard(this.dashboardData).subscribe();
     }
   }
 
@@ -538,18 +548,9 @@ export class DashboardManagementComponent implements OnInit {
 
   deleteDashboard(): void {
     if (this.selectedDashboardId && confirm('Are you sure you want to delete this dashboard?')) {
-      this.dashboardDataService.deleteDashboard(this.selectedDashboardId).subscribe(() => {
-        this.dashboardDataService.getDashboards().subscribe(dashboards => {
-          this.userDashboards = dashboards;
-          if (this.userDashboards.length > 0) {
-            this.selectedDashboardId = this.userDashboards[0].id;
-            this.loadSelectedDashboard();
-          } else {
-            this.selectedDashboardId = '';
-            this.dashboardData = null;
-            this.panels = [];
-          }
-        });
+      this.dashboardDataService.deleteDashboard(this.selectedDashboardId).subscribe(result => {
+
+        console.log(result)
       });
     }
   }
@@ -558,7 +559,7 @@ export class DashboardManagementComponent implements OnInit {
     if (!this.dashboardData) return;
     if (confirm('Are you sure you want to remove this widget?')) {
       const updatedDashboard = { ...this.dashboardData, widgets: this.dashboardData.widgets.filter(w => w.id !== panelId) };
-      this.dashboardDataService.updateDashboard(updatedDashboard).subscribe(updated => {
+      this.dashboardDataService.saveDashboard(updatedDashboard).subscribe(updated => {
         this.dashboardData = updated;
         this.panels = this.mapWidgetsToPanels(this.dashboardData.widgets);
       });
@@ -597,7 +598,7 @@ export class DashboardManagementComponent implements OnInit {
               // Re-map panels to reflect changes
               this.panels = this.mapWidgetsToPanels(this.dashboardData.widgets);
               // Save the updated dashboard
-              this.dashboardDataService.updateDashboard(this.dashboardData).subscribe();
+              this.dashboardDataService.saveDashboard(this.dashboardData).subscribe();
             }
           }
         }

src/app/DPU/dashboard-management/dataset-picker.component.html

@@ -2,7 +2,7 @@
   <label for="dataset-select">Select Dataset:</label>
   <select id="dataset-select" (change)="onDatasetChange($event)">
     <option value="">-- Please choose a dataset --</option>
-    <option *ngFor="let dataset of datasets$ | async" [value]="dataset.id">
+    <option *ngFor="let dataset of datasets$ | async" [value]="dataset">
       {{ dataset.name }}
     </option>
   </select>

src/app/DPU/dashboard-management/dataset-picker.component.scss

@@ -2,7 +2,6 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 20px;
 }
 
 label {

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

@@ -147,7 +147,7 @@ export class DashboardViewerComponent implements OnInit {
   }
 
   loadDashboard(dashboard: DashboardModel): void {
-    this.dashboardName = dashboard.name;
+    this.dashboardName = dashboard.thName;
 
     if (dashboard.datasetId) {
       this.dashboardStateService.selectDataset(dashboard.datasetId);

src/app/DPU/models/widgets.model.ts

@@ -57,23 +57,29 @@ export class WidgetModel implements IWidget {
 }
 
 export interface IDashboard {
-  id: string;
-  name: string;
+  dashboardId: string;
+  thName: string;
+  engName: string;
+  application: string;
   description: string;
   datasetId?: string;
   widgets: IWidget[];
 }
 
 export class DashboardModel implements IDashboard {
-  id: string;
-  name: string;
+  dashboardId: string;
+  thName: string;
+  engName: string;
+  application: string;
   description: string;
   datasetId?: string;
   widgets: IWidget[];
 
   constructor(data: Partial<IDashboard>) {
-    this.id = data.id ?? '';
-    this.name = data.name ?? '';
+    this.dashboardId = data.dashboardId ?? '';
+    this.thName = data.thName ?? '';
+    this.engName = data.engName ?? '';
+    this.application = data.application ?? '';
     this.description = data.description ?? '';
     this.datasetId = data.datasetId;
     this.widgets = data.widgets ? data.widgets.map(w => new WidgetModel(w)) : [];

src/app/DPU/services/dashboard-data.service.ts

 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { DashboardModel, WidgetModel } from '../models/widgets.model';
-import { MockDashboardService } from './mock-dashboard.service';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DashboardDataService {
-
-  constructor(private mockDashboardService: MockDashboardService) { }
-
-  getDashboards(): Observable<DashboardModel[]> {
-    // In a real application, this would call an API
-    return this.mockDashboardService.getDashboards();
+  apiBaseUrl = environment.url + "dashboard"
+  constructor(private http: HttpClient) { }
+
+  getDashboards(queryParams?: any): Observable<DashboardModel[]> {
+    let params = new HttpParams();
+    if (queryParams) {
+      Object.keys(queryParams).forEach(key => {
+        params = params.set(key, queryParams[key]);
+      });
+    }
+    return this.http.get<DashboardModel[]>(`${this.apiBaseUrl}/lists/search`, { params })
   }
 
   getDashboardById(id: string): Observable<DashboardModel | undefined> {
-    // In a real application, this would call an API
-    return this.mockDashboardService.getDashboardById(id);
+    return this.http
+      .get<DashboardModel>(this.apiBaseUrl + "/" + id)
   }
 
   // For now, these methods will operate on the in-memory mock data
   // In a real application, these would call API endpoints for CUD operations
-  addDashboard(dashboard: DashboardModel): Observable<DashboardModel> {
-    // Simulate adding to mock data (not persistent across app restarts)
-    const currentDashboards = this.mockDashboardService.getDashboards();
-    currentDashboards.subscribe(dashboards => {
-      dashboards.push(dashboard);
-    });
-    return of(dashboard);
-  }
-
-  updateDashboard(updatedDashboard: DashboardModel): Observable<DashboardModel> {
-    // Simulate updating mock data (not persistent across app restarts)
-    const currentDashboards = this.mockDashboardService.getDashboards();
-    currentDashboards.subscribe(dashboards => {
-      const index = dashboards.findIndex(d => d.id === updatedDashboard.id);
-      if (index > -1) {
-        dashboards[index] = updatedDashboard;
-      }
-    });
-    return of(updatedDashboard);
+  saveDashboard(dashboard: DashboardModel): Observable<DashboardModel> {
+    return this.http.post<any>(this.apiBaseUrl, dashboard);
   }
 
-  deleteDashboard(id: string): Observable<void> {
-    // Simulate deleting from mock data (not persistent across app restarts)
-    const currentDashboards = this.mockDashboardService.getDashboards();
-    currentDashboards.subscribe(dashboards => {
-      const index = dashboards.findIndex(d => d.id === id);
-      if (index > -1) {
-        dashboards.splice(index, 1);
-      }
-    });
-    return of(undefined);
+  deleteDashboard(dashboard: DashboardModel): Observable<void> {
+    const options = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: {}
+    };
+    return this.http.delete<any>(this.apiBaseUrl, options);
   }
 
   // Assuming widgets are managed as part of dashboards for now

src/app/DPU/services/mock-dashboard.service.ts

-import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { DashboardModel, WidgetModel } from '../models/widgets.model';
-
-export const MOCK_DASHBOARD_DATA: DashboardModel[] = [
-  {
-    id: '1',
-    name: 'Sales Dashboard',
-    description: 'Dashboard showing sales performance over time.',
-    widgets: [
-      { id: '101', name: 'Monthly Sales', component: 'ChartWidgetComponent', cols: 2, rows: 1, x: 0, y: 0, data: { type: 'bar', labels: ['Jan', 'Feb', 'Mar'], datasets: [{ data: [65, 59, 80], label: 'Series A' }] }, config: {} },
-      { id: '102', name: 'Top Products', component: 'SyncfusionDatagridWidgetComponent', cols: 2, rows: 1, x: 2, y: 0, data: { columns: ['Product', 'Sales'], data: [{ Product: 'A', Sales: 100 }, { Product: 'B', Sales: 150 }] }, config: {} }
-    ]
-  },
-  {
-    id: '2',
-    name: 'Marketing Overview',
-    description: 'Overview of marketing campaign performance.',
-    widgets: [
-      { id: '201', name: 'Website Traffic', component: 'ChartWidgetComponent', cols: 2, rows: 1, x: 0, y: 0, data: { type: 'line', labels: ['Week 1', 'Week 2', 'Week 3'], datasets: [{ data: [120, 150, 130], label: 'Visitors' }] }, config: {} },
-      { id: '202', name: 'Conversion Rate', component: 'KpiWidgetComponent', cols: 1, rows: 1, x: 2, y: 0, data: { value: '2.5%', label: 'Conversion' }, config: {} }
-    ]
-  },
-  {
-    id: '3',
-    name: 'All Widgets Test Dashboard',
-    description: 'Dashboard for testing all available widgets.',
-    widgets: [
-      { id: '301', name: 'Company Info', component: 'CompanyInfoWidgetComponent', cols: 2, rows: 1, x: 0, y: 0, data: { companyName: 'Test Company', address: '123 Test St.' }, config: {} },
-      { id: '302', name: 'Headcount', component: 'HeadcountWidgetComponent', cols: 1, rows: 1, x: 2, y: 0, data: { count: 150 }, config: {} },
-      { id: '303', name: 'Attendance Overview', component: 'AttendanceOverviewWidgetComponent', cols: 2, rows: 1, x: 3, y: 0, data: { present: 140, absent: 10 }, config: {} },
-      { id: '304', name: 'Payroll Summary', component: 'PayrollSummaryWidgetComponent', cols: 2, rows: 1, x: 0, y: 1, data: { totalPayroll: 100000, currency: 'USD' }, config: {} },
-      { id: '305', name: 'Employee Directory', component: 'EmployeeDirectoryWidgetComponent', cols: 2, rows: 2, x: 2, y: 1, data: { employees: [{ name: 'Alice', dept: 'HR' }, { name: 'Bob', dept: 'IT' }] }, config: {} },
-      { id: '306', name: 'KPI Widget', component: 'KpiWidgetComponent', cols: 1, rows: 1, x: 4, y: 1, data: { value: '95%', label: 'Success Rate' }, config: {} },
-      { id: '307', name: 'Welcome Widget', component: 'WelcomeWidgetComponent', cols: 2, rows: 1, x: 0, y: 3, data: { message: 'Welcome to the Dashboard!' }, config: {} },
-      { id: '308', name: 'Chart Widget', component: 'ChartWidgetComponent', cols: 2, rows: 1, x: 2, y: 3, data: { type: 'bar', labels: ['A', 'B', 'C'], datasets: [{ data: [10, 20, 30], label: 'Data' }] }, config: {} },
-      { id: '309', name: 'Quick Links', component: 'QuickLinksWidgetComponent', cols: 1, rows: 1, x: 4, y: 3, data: { links: [{ name: 'Google', url: 'https://google.com' }] }, config: {} },
-      { id: '310', name: 'Syncfusion Datagrid', component: 'SyncfusionDatagridWidgetComponent', cols: 3, rows: 2, x: 0, y: 4, data: { columns: ['ID', 'Name'], data: [{ ID: 1, Name: 'Item 1' }, { ID: 2, Name: 'Item 2' }] }, config: {} },
-      { id: '311', name: 'Syncfusion Pivot', component: 'SyncfusionPivotWidgetComponent', cols: 3, rows: 2, x: 3, y: 4, data: { data: [{ year: '2023', sales: 100 }, { year: '2024', sales: 120 }], rows: [{ name: 'year' }], columns: [{ name: 'sales' }] }, config: {} },
-      { id: '312', name: 'Syncfusion Chart', component: 'SyncfusionChartWidgetComponent', cols: 2, rows: 1, x: 0, y: 6, data: { chartData: [{ x: 'Jan', y: 10 }, { x: 'Feb', y: 20 }], primaryXAxis: { valueType: 'Category' }, series: [{ type: 'Column', xName: 'x', yName: 'y' }] }, config: {} },
-      { id: '313', name: 'Employee Data (Pre-configured)', component: 'NewDataTableWidget', cols: 4, rows: 3, x: 0, y: 7, data: {}, config: {
-        title: 'Employee List (Pre-configured)',
-        source: {
-          type: 'url',
-          url: 'assets/data/sample1.json'
-        },
-        data: [], // This will be populated by the service
-        columns: [
-          { field: 'EmployeeID', headerText: 'ID', width: 70 },
-          { field: 'FirstName', headerText: 'First Name', width: 120 },
-          { field: 'LastName', headerText: 'Last Name', width: 120 },
-          { field: 'Position', headerText: 'Position', width: 150 },
-          { field: 'Department', headerText: 'Department', width: 150 },
-        ]
-      } }
-    ]
-  }
-];
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MockDashboardService {
-
-  constructor() { }
-
-  getDashboards(): Observable<DashboardModel[]> {
-    return of(MOCK_DASHBOARD_DATA);
-  }
-
-  getDashboardById(id: string): Observable<DashboardModel | undefined> {
-    const dashboard = MOCK_DASHBOARD_DATA.find(d => d.id === id);
-    return of(dashboard);
-  }
-}

src/app/DPU/state/dashboard.actions.ts

-import { createAction, props } from '@ngrx/store';
-import { DashboardModel, WidgetModel, DatasetModel } from '../models/widgets.model';
-
-export const loadDashboards = createAction('[Dashboard] Load Dashboards');
-export const loadDashboardsSuccess = createAction('[Dashboard] Load Dashboards Success', props<{ dashboards: DashboardModel[] }>());
-export const loadDashboardsFailure = createAction('[Dashboard] Load Dashboards Failure', props<{ error: any }>());
-
-export const loadWidgets = createAction('[Dashboard] Load Widgets');
-export const loadWidgetsSuccess = createAction('[Dashboard] Load Widgets Success', props<{ widgets: WidgetModel[] }>());
-export const loadWidgetsFailure = createAction('[Dashboard] Load Widgets Failure', props<{ error: any }>());
-
-export const loadDatasets = createAction('[Dashboard] Load Datasets');
-export const loadDatasetsSuccess = createAction('[Dashboard] Load Datasets Success', props<{ datasets: DatasetModel[] }>());
-export const loadDatasetsFailure = createAction('[Dashboard] Load Datasets Failure', props<{ error: any }>());
-
-export const addDashboard = createAction('[Dashboard] Add Dashboard', props<{ dashboard: DashboardModel }>());
-export const addDashboardSuccess = createAction('[Dashboard] Add Dashboard Success', props<{ dashboard: DashboardModel }>());
-export const addDashboardFailure = createAction('[Dashboard] Add Dashboard Failure', props<{ error: any }>());
-
-export const updateDashboard = createAction('[Dashboard] Update Dashboard', props<{ dashboard: DashboardModel }>());
-export const updateDashboardSuccess = createAction('[Dashboard] Update Dashboard Success', props<{ dashboard: DashboardModel }>());
-export const updateDashboardFailure = createAction('[Dashboard] Update Dashboard Failure', props<{ error: any }>());
-
-export const deleteDashboard = createAction('[Dashboard] Delete Dashboard', props<{ id: string }>());
-export const deleteDashboardSuccess = createAction('[Dashboard] Delete Dashboard Success', props<{ id: string }>());
-export const deleteDashboardFailure = createAction('[Dashboard] Delete Dashboard Failure', props<{ error: any }>());

src/app/DPU/state/dashboard.effects.ts

-import { Injectable } from '@angular/core';
-import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { of } from 'rxjs';
-import { catchError, map, mergeMap } from 'rxjs/operators';
-import { DashboardDataService } from '../../shared/services/dashboard-data.service';
-import * as DashboardActions from './dashboard.actions';
-
-@Injectable()
-export class DashboardEffects {
-
-  loadDashboards$ = createEffect(() => this.actions$.pipe(
-    ofType(DashboardActions.loadDashboards),
-    mergeMap(() => this.dashboardDataService.getDashboards()
-      .pipe(
-        map(dashboards => DashboardActions.loadDashboardsSuccess({ dashboards })),
-        catchError(error => of(DashboardActions.loadDashboardsFailure({ error })))
-      ))
-  ));
-
-  loadWidgets$ = createEffect(() => this.actions$.pipe(
-    ofType(DashboardActions.loadWidgets),
-    mergeMap(() => this.dashboardDataService.getWidgets()
-      .pipe(
-        map(widgets => DashboardActions.loadWidgetsSuccess({ widgets })),
-        catchError(error => of(DashboardActions.loadWidgetsFailure({ error })))
-      ))
-  ));
-
-  loadDatasets$ = createEffect(() => this.actions$.pipe(
-    ofType(DashboardActions.loadDatasets),
-    mergeMap(() => this.dashboardDataService.getDatasets()
-      .pipe(
-        map(datasets => DashboardActions.loadDatasetsSuccess({ datasets })),
-        catchError(error => of(DashboardActions.loadDatasetsFailure({ error })))
-      ))
-  ));
-
-  addDashboard$ = createEffect(() => this.actions$.pipe(
-    ofType(DashboardActions.addDashboard),
-    mergeMap(action => this.dashboardDataService.addDashboard(action.dashboard)
-      .pipe(
-        map(dashboard => DashboardActions.addDashboardSuccess({ dashboard })),
-        catchError(error => of(DashboardActions.addDashboardFailure({ error })))
-      ))
-  ));
-
-  updateDashboard$ = createEffect(() => this.actions$.pipe(
-    ofType(DashboardActions.updateDashboard),
-    mergeMap(action => this.dashboardDataService.updateDashboard(action.dashboard)
-      .pipe(
-        map(dashboard => DashboardActions.updateDashboardSuccess({ dashboard })),
-        catchError(error => of(DashboardActions.updateDashboardFailure({ error })))
-      ))
-  ));
-
-  deleteDashboard$ = createEffect(() => this.actions$.pipe(
-    ofType(DashboardActions.deleteDashboard),
-    mergeMap(action => this.dashboardDataService.deleteDashboard(action.id)
-      .pipe(
-        map(() => DashboardActions.deleteDashboardSuccess({ id: action.id })),
-        catchError(error => of(DashboardActions.deleteDashboardFailure({ error })))
-      ))
-  ));
-
-  constructor(
-    private actions$: Actions,
-    private dashboardDataService: DashboardDataService
-  ) {}
-}

src/app/DPU/state/dashboard.reducer.ts

-import { createReducer, on } from '@ngrx/store';
-import { DashboardModel, WidgetModel, DatasetModel } from '../models/widgets.model';
-import * as DashboardActions from './dashboard.actions';
-
-export interface DashboardState {
-  dashboards: DashboardModel[];
-  widgets: WidgetModel[];
-  datasets: DatasetModel[];
-  error: any;
-}
-
-export const initialState: DashboardState = {
-  dashboards: [],
-  widgets: [],
-  datasets: [],
-  error: null,
-};
-
-export const dashboardReducer = createReducer(
-  initialState,
-  on(DashboardActions.loadDashboardsSuccess, (state, { dashboards }) => ({ ...state, dashboards })),
-  on(DashboardActions.loadDashboardsFailure, (state, { error }) => ({ ...state, error })),
-  on(DashboardActions.loadWidgetsSuccess, (state, { widgets }) => ({ ...state, widgets })),
-  on(DashboardActions.loadWidgetsFailure, (state, { error }) => ({ ...state, error })),
-  on(DashboardActions.loadDatasetsSuccess, (state, { datasets }) => ({ ...state, datasets })),
-  on(DashboardActions.loadDatasetsFailure, (state, { error }) => ({ ...state, error })),
-  on(DashboardActions.addDashboardSuccess, (state, { dashboard }) => ({ ...state, dashboards: [...state.dashboards, dashboard] })),
-  on(DashboardActions.addDashboardFailure, (state, { error }) => ({ ...state, error })),
-  on(DashboardActions.updateDashboardSuccess, (state, { dashboard }) => ({
-    ...state,
-    dashboards: state.dashboards.map(d => d.id === dashboard.id ? dashboard : d)
-  })),
-  on(DashboardActions.updateDashboardFailure, (state, { error }) => ({ ...state, error })),
-  on(DashboardActions.deleteDashboardSuccess, (state, { id }) => ({
-    ...state,
-    dashboards: state.dashboards.filter(d => d.id !== id)
-  })),
-  on(DashboardActions.deleteDashboardFailure, (state, { error }) => ({ ...state, error }))
-);

src/app/DPU/state/dashboard.selectors.ts

-import { createFeatureSelector, createSelector } from '@ngrx/store';
-import { DashboardState } from './dashboard.reducer';
-import { DashboardModel } from '../models/widgets.model';
-
-export const selectDashboardState = createFeatureSelector<DashboardState>('dashboard');
-
-export const selectAllDashboards = createSelector(
-  selectDashboardState,
-  (state: DashboardState) => state.dashboards
-);
-
-export const selectAllWidgets = createSelector(
-  selectDashboardState,
-  (state: DashboardState) => state.widgets
-);
-
-export const selectAllDatasets = createSelector(
-  selectDashboardState,
-  (state: DashboardState) => state.datasets
-);
-
-export const selectDashboardById = (id: string) => createSelector(
-  selectAllDashboards,
-  (dashboards: DashboardModel[]) => dashboards.find(d => d.id === id)
-);
-
-export const selectError = createSelector(
-  selectDashboardState,
-  (state: DashboardState) => state.error
-);

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

@@ -5,7 +5,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { NgComponentOutlet } from '@angular/common';
 import { Store } from '@ngrx/store';
-import * as DashboardActions from '../state/dashboard.actions';
+// import * as DashboardActions from '../state/dashboard.actions';
 import { WidgetModel } from '../models/widgets.model';
 
 // Import all the widget components
@@ -75,7 +75,7 @@ export class WidgetFormComponent implements OnInit {
 
     if (this.widgetId && this.widgetId !== 'new') {
       this.isNew = false;
-      this.store.dispatch(DashboardActions.loadWidgets());
+      // this.store.dispatch(DashboardActions.loadWidgets());
       // this.store.select(DashboardSelectors.selectWidgetById(this.widgetId)).subscribe(widget => {
       //   if (widget) {
       //     this.widgetForm.patchValue(widget);

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

@@ -5,8 +5,6 @@ import { Observable } from 'rxjs';
 import { CommonModule, TitleCasePipe } from '@angular/common';
 import { NgComponentOutlet } from '@angular/common';
 import { Store } from '@ngrx/store';
-import * as DashboardActions from '../state/dashboard.actions';
-import * as DashboardSelectors from '../state/dashboard.selectors';
 import { WidgetModel } from '../models/widgets.model';
 
 // Import all the widget components
@@ -56,8 +54,8 @@ export class WidgetListComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.store.dispatch(DashboardActions.loadWidgets());
-    this.widgets$ = this.store.select(DashboardSelectors.selectAllWidgets);
+    // this.store.dispatch(DashboardActions.loadWidgets());
+    // this.widgets$ = this.store.select(DashboardSelectors.selectAllWidgets);
   }
 
   getComponentType(componentName: string): Type<any> | null {

src/app/app.config.ts

@@ -25,8 +25,6 @@ import { DashboardDataService } from './shared/services/dashboard-data.service';
 import { provideStore, provideState } from '@ngrx/store';
 import { provideEffects } from '@ngrx/effects';
 import { provideStoreDevtools } from '@ngrx/store-devtools';
-import { dashboardReducer } from './DPU/state/dashboard.reducer';
-import { DashboardEffects } from './DPU/state/dashboard.effects';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
@@ -84,8 +82,6 @@ export const appConfig: ApplicationConfig = {
     httpInterceptorProviders,
     DashboardDataService,
     provideStore(),
-    provideState({ name: 'dashboard', reducer: dashboardReducer }),
-    provideEffects([DashboardEffects]),
     provideStoreDevtools({ maxAge: 25, logOnly: environment.production })
   ]
 };

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

@@ -8,93 +8,32 @@ import { DashboardModel, WidgetModel, DatasetModel } from '../../DPU/models/widg
 })
 export class DashboardDataService {
 
-  private mockDatasets: DatasetModel[] = [
-    new DatasetModel({ id: 'ds-1', name: 'Sales Data', url: '/api/data/sales' }),
-    new DatasetModel({ id: 'ds-2', name: 'HR Data', url: '/api/data/hr' }),
-    new DatasetModel({ id: 'ds-3', name: 'Marketing Data', url: '/api/data/marketing' })
-  ];
-
-  private mockData: { [key: string]: any[] } = {
-    'ds-1': [
-      { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), ShipName: 'Vins et alcools Chevalier' },
-      { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), ShipName: 'Toms Spezialitäten' },
-      { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), ShipName: 'Hanari Carnes' },
-    ],
-    'ds-2': [
-      { Name: 'John Doe', Title: 'CEO', Country: 'USA' },
-      { Name: 'Jane Smith', Title: 'CFO', Country: 'USA' },
-      { Name: 'Peter Jones', Title: 'CTO', Country: 'UK' },
-    ]
-  };
-
-  private mockDashboards: DashboardModel[] = [
-    new DashboardModel({
-      id: 'dash-1',
-      name: 'Sales Dashboard',
-      datasetId: 'ds-1',
-      widgets: [
-        new WidgetModel({ id: 'widget-1', name: 'Welcome Message', component: 'WelcomeWidgetComponent', cols: 2, rows: 1, y: 0, x: 0, data: { userName: 'Jane Doe' } }),
-        new WidgetModel({ id: 'widget-2', name: 'Sales Data Grid', component: 'SyncfusionDatagridWidgetComponent', cols: 4, rows: 3, y: 0, x: 2, data: {} })
-      ]
-    }),
-    new DashboardModel({
-      id: 'dash-2',
-      name: 'HR Dashboard',
-      datasetId: 'ds-2',
-      widgets: [
-        new WidgetModel({ id: 'widget-1', name: 'Welcome Message', component: 'WelcomeWidgetComponent', cols: 2, rows: 1, y: 0, x: 0, data: { userName: 'John Smith' } })
-      ]
-    })
-  ];
-
-  private mockWidgets: WidgetModel[] = [
-    new WidgetModel({ id: 'widget-1', name: 'Welcome Message', component: 'WelcomeWidgetComponent', cols: 2, rows: 1, y: 0, x: 0, data: { userName: 'Default User' } }),
-    new WidgetModel({ id: 'widget-2', name: 'Sales Data Grid', component: 'SyncfusionDatagridWidgetComponent', cols: 4, rows: 3, y: 0, x: 2, data: {} }),
-    new WidgetModel({ id: 'widget-3', name: 'Chart Widget', component: 'ChartWidgetComponent', cols: 3, rows: 2, y: 0, x: 0, data: {} })
-  ];
-
   constructor() { }
 
-  // Dashboard methods
-  getDashboards(): Observable<DashboardModel[]> {
-    return of(this.mockDashboards).pipe(catchError(this.handleError));
-  }
-
-  getDashboardById(id: string): Observable<DashboardModel | undefined> {
-    return of(this.mockDashboards.find(d => d.id === id)).pipe(catchError(this.handleError));
-  }
-
-  addDashboard(dashboard: DashboardModel): Observable<DashboardModel> {
-    this.mockDashboards.push(dashboard);
-    return of(dashboard).pipe(catchError(this.handleError));
-  }
+  // // Dashboard methods
+  // getDashboards(): Observable<DashboardModel[]> {
+  //   return of(this.mockDashboards).pipe(catchError(this.handleError));
+  // }
 
-  updateDashboard(dashboard: DashboardModel): Observable<DashboardModel> {
-    const index = this.mockDashboards.findIndex(d => d.id === dashboard.id);
-    if (index !== -1) {
-      this.mockDashboards[index] = dashboard;
-    }
-    return of(dashboard).pipe(catchError(this.handleError));
-  }
+  // addDashboard(dashboard: DashboardModel): Observable<DashboardModel> {
+  //   this.mockDashboards.push(dashboard);
+  //   return of(dashboard).pipe(catchError(this.handleError));
+  // }
 
-  deleteDashboard(id: string): Observable<void> {
-    this.mockDashboards = this.mockDashboards.filter(d => d.id !== id);
-    return of(undefined).pipe(catchError(this.handleError));
-  }
 
   // Widget methods
-  getWidgets(): Observable<WidgetModel[]> {
-    return of(this.mockWidgets).pipe(catchError(this.handleError));
-  }
-
-  // Dataset methods
-  getDatasets(): Observable<DatasetModel[]> {
-    return of(this.mockDatasets).pipe(catchError(this.handleError));
-  }
-
-  getDatasetById(id: string): Observable<DatasetModel | undefined> {
-    return of(this.mockDatasets.find(ds => ds.id === id)).pipe(catchError(this.handleError));
-  }
+  // getWidgets(): Observable<WidgetModel[]> {
+  //   return of(this.mockWidgets).pipe(catchError(this.handleError));
+  // }
+
+  // // Dataset methods
+  // getDatasets(): Observable<DatasetModel[]> {
+  //   return of(this.mockDatasets).pipe(catchError(this.handleError));
+  // }
+
+  // getDatasetById(id: string): Observable<DatasetModel | undefined> {
+  //   return of(this.mockDatasets.find(ds => ds.id === id)).pipe(catchError(this.handleError));
+  // }
 
   private handleError(error: any) {
     console.error(error);