widgets

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

@@ -52,8 +52,8 @@
     <div class="widget-list space-y-2">
       <div
         *ngFor="let widget of filteredAvailableWidgets"
-        class="widget-item"
         (click)="addWidgetToDashboard(widget)"
+        class="widget-item p-3 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors duration-200"
       >
         <p class="font-semibold text-gray-700">{{ widget.name }}</p>
         <p class="text-xs text-gray-500">
@@ -137,23 +137,7 @@
     </div>
 
     <div class="dashboard-content">
-      <!-- <ejs-dashboardlayout id='dashboard_management' #managementLayout [cellSpacing]="cellSpacing" [panels]="panels" [columns]="6" [allowResizing]="true" [allowDragging]="true">
-          <e-panels>
-              <e-panel *ngFor="let panel of panels" [row]="panel.row" [col]="panel.col" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [id]="panel.id || ''">
-                  <ng-template [e-header]>
-                      <div class="p-2 bg-white border-b border-gray-200 text-gray-700 font-semibold flex justify-between items-center">
-                        <span>{{panel.header}}</span>
-                        <button (click)="removeWidgetFromDashboard(panel.id!)" class="text-red-500 hover:text-red-700">
-                            <i class="bi bi-trash"></i>
-                        </button>
-                      </div>
-                  </ng-template>
-                  <ng-template [e-content]>
-                      <ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container>
-                  </ng-template>
-              </e-panel>
-          </e-panels>
-      </ejs-dashboardlayout> -->
+      
       <ejs-dashboardlayout
         [columns]="6"
         #editLayout

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

@@ -27,9 +27,12 @@ import { QuickLinksWidgetComponent } from '../widgets/quick-links-widget/quick-l
 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';
+import { TimeTrackingWidgetComponent } from '../widgets/time-tracking-widget/time-tracking-widget.component';
+import { PayrollWidgetComponent } from '../widgets/payroll-widget/payroll-widget.component';
 import { DatasetPickerComponent } from './dataset-picker.component';
 import { DataTableWidgetComponent } from '../widgets/dynamic-widgets/data-table-widget.component'; // Import new widget
 import { AccumulationChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
+import { SharedModule } from '../../shared/shared.module';
 
 @Component({
   selector: 'app-dashboard-management',
@@ -40,15 +43,7 @@ import { AccumulationChartAllModule, ChartAllModule } from '@syncfusion/ej2-angu
     TitleCasePipe,
     NgComponentOutlet,
     FormsModule,
-    CompanyInfoWidgetComponent,
-    HeadcountWidgetComponent,
-    AttendanceOverviewWidgetComponent,
-    PayrollSummaryWidgetComponent,
-    EmployeeDirectoryWidgetComponent,
-    KpiWidgetComponent,
-    WelcomeWidgetComponent,
-    ChartWidgetComponent,
-    QuickLinksWidgetComponent,
+    SharedModule,
     SyncfusionDatagridWidgetComponent,
     SyncfusionPivotWidgetComponent,
     SyncfusionChartWidgetComponent,
@@ -75,6 +70,44 @@ export class DashboardManagementComponent implements OnInit {
   public userDashboards: DashboardModel[] = [];
   public selectedDashboardId: string = '';
 
+  private localWidgets: WidgetModel[] = [
+    new WidgetModel({
+      id: 'local-time-tracking',
+      name: 'Time Tracking (Local)',
+      component: 'TimeTrackingWidgetComponent',
+      cols: 2,
+      rows: 1,
+    }),
+    new WidgetModel({
+      id: 'local-payroll',
+      name: 'Payroll (Local)',
+      component: 'PayrollWidgetComponent',
+      cols: 2,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-sync-pivot',
+      name: 'Syncfusion Pivot Table (Local)',
+      component: 'SyncfusionPivotWidgetComponent',
+      cols: 3,
+      rows: 3,
+    }),
+    new WidgetModel({
+      id: 'local-sync-grid',
+      name: 'Syncfusion Data Grid (Local)',
+      component: 'SyncfusionDatagridWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-sync-chart',
+      name: 'Syncfusion Chart (Local)',
+      component: 'SyncfusionChartWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+  ];
+
   private widgetComponentMap: { [key: string]: Type<any> } = {
     'CompanyInfoWidgetComponent': CompanyInfoWidgetComponent,
     'HeadcountWidgetComponent': HeadcountWidgetComponent,
@@ -88,6 +121,8 @@ export class DashboardManagementComponent implements OnInit {
     'SyncfusionDatagridWidgetComponent': SyncfusionDatagridWidgetComponent,
     'SyncfusionPivotWidgetComponent': SyncfusionPivotWidgetComponent,
     'SyncfusionChartWidgetComponent': SyncfusionChartWidgetComponent,
+    'TimeTrackingWidgetComponent': TimeTrackingWidgetComponent,
+    'PayrollWidgetComponent': PayrollWidgetComponent,
     'NewDataTableWidget': DataTableWidgetComponent // Add new widget to map
   };
 
@@ -109,7 +144,7 @@ export class DashboardManagementComponent implements OnInit {
 
     // Populate availableWidgets from WidgetService
     this.widgetService.getListWidgets().subscribe(widgets => {
-      this.availableWidgets = widgets.map(widget => ({
+      this.availableWidgets = [...widgets, ...this.localWidgets].map(widget => ({
         ...widget,
         config: widget.config || {} // Ensure config property exists
       }));

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

@@ -7,15 +7,14 @@
         <ejs-dashboardlayout id='dashboard_viewer' #viewerLayout [cellSpacing]="cellSpacing" [panels]="panels" [columns]="6" [allowResizing]="false" [allowDragging]="false">
             <e-panels>
                 <e-panel *ngFor="let panel of panels" [row]="panel.row" [col]="panel.col" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [id]="panel.id">
-                    <ng-template [e-header]>
-                        <div class="p-2 bg-white border-b border-gray-200 text-gray-700 font-semibold">{{panel.header}}</div>
+                    <ng-template #header>
+                        <div class="p-2 bg-white border-b border-gray-200 text-gray-700 font-semibold flex justify-between items-center">
+                            <span>{{panel.header}}</span>
+                        </div>
+                    </ng-template>
+                    <ng-template #content>
+                      <ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container>
                     </ng-template>
-                    <!-- Direct content for testing -->
-                    <div style="padding: 10px; background-color: #fff; border: 1px solid #ccc;">
-                        <h3>Panel Content Test</h3>
-                        <p>This is panel: {{ panel.header }}</p>
-                        <p>Component: {{ panel.componentName }}</p>
-                    </div>
                 </e-panel>
             </e-panels>
         </ejs-dashboardlayout>

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

@@ -25,6 +25,10 @@ import { SyncfusionDatagridWidgetComponent } from '../widgets/syncfusion-datagri
 import { SyncfusionPivotWidgetComponent } from '../widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component';
 import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widget/syncfusion-chart-widget.component';
 import { DataTableWidgetComponent } from '../widgets/dynamic-widgets/data-table-widget.component'; // Import new widget
+import { TimeTrackingWidgetComponent } from '../widgets/time-tracking-widget/time-tracking-widget.component';
+import { PayrollWidgetComponent } from '../widgets/payroll-widget/payroll-widget.component';
+import { SharedModule } from '../../shared/shared.module';
+
 
 @Component({
   selector: 'app-dashboard-viewer',
@@ -34,19 +38,11 @@ import { DataTableWidgetComponent } from '../widgets/dynamic-widgets/data-table-
     RouterModule, 
     DashboardLayoutModule, 
     NgComponentOutlet, 
-    CompanyInfoWidgetComponent, 
-    HeadcountWidgetComponent, 
-    AttendanceOverviewWidgetComponent, 
-    PayrollSummaryWidgetComponent, 
-    EmployeeDirectoryWidgetComponent, 
-    KpiWidgetComponent, 
-    WelcomeWidgetComponent, 
-    ChartWidgetComponent, 
-    QuickLinksWidgetComponent, 
+    SharedModule,
     SyncfusionDatagridWidgetComponent, 
     SyncfusionPivotWidgetComponent, 
     SyncfusionChartWidgetComponent,
-    DataTableWidgetComponent // Add new widget to imports
+    DataTableWidgetComponent, // Add new widget to imports
   ],
   templateUrl: './dashboard-viewer.component.html',
   styleUrls: ['./dashboard-viewer.component.scss'],

src/app/DPU/widgets/company-info-widget/company-info-widget.component.html

+
+<div class="card h-100">
+  <div class="card-header">
+    <h5 class="card-title">Company Information</h5>
+  </div>
+  <div class="card-body">
+    <p>This is a placeholder for company information.</p>
+    <p *ngIf="data">Data received: {{ data | json }}</p>
+  </div>
+</div>

src/app/DPU/widgets/company-info-widget/company-info-widget.component.scss

+
+/* Add any specific styles for the company info widget here */
+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+}
+
+.card-header {
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #e0e0e0;
+}

src/app/DPU/widgets/company-info-widget/company-info-widget.component.ts

+
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-company-info-widget',
+  templateUrl: './company-info-widget.component.html',
+  styleUrls: ['./company-info-widget.component.scss']
+})
+export class CompanyInfoWidgetComponent implements OnInit {
+  @Input() data: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/DPU/widgets/employee-directory-widget/employee-directory-widget.component.html

+
+<div class="card h-100">
+  <div class="card-header">
+    <h5 class="card-title">Employee Directory</h5>
+  </div>
+  <div class="card-body">
+    <p>This is a placeholder for the employee directory.</p>
+    <p *ngIf="data">Data received: {{ data | json }}</p>
+  </div>
+</div>

src/app/DPU/widgets/employee-directory-widget/employee-directory-widget.component.scss

+
+/* Add any specific styles for the employee directory widget here */
+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}

src/app/DPU/widgets/employee-directory-widget/employee-directory-widget.component.ts

+
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-employee-directory-widget',
+  templateUrl: './employee-directory-widget.component.html',
+  styleUrls: ['./employee-directory-widget.component.scss']
+})
+export class EmployeeDirectoryWidgetComponent implements OnInit {
+  @Input() data: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

+
+<div class="card h-100">
+  <div class="card-header">
+    <h5 class="card-title">Payroll</h5>
+  </div>
+  <div class="card-body">
+    <p>This is a placeholder for payroll information.</p>
+    <p *ngIf="data">Data received: {{ data | json }}</p>
+  </div>
+</div>

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

+
+/* Add any specific styles for the payroll widget here */
+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}

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

+
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-payroll-widget',
+  templateUrl: './payroll-widget.component.html',
+  styleUrls: ['./payroll-widget.component.scss']
+})
+export class PayrollWidgetComponent implements OnInit {
+  @Input() data: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/DPU/widgets/time-tracking-widget/time-tracking-widget.component.html

+
+<div class="card h-100">
+  <div class="card-header">
+    <h5 class="card-title">Time Tracking</h5>
+  </div>
+  <div class="card-body">
+    <p>This is a placeholder for time tracking information.</p>
+    <p *ngIf="data">Data received: {{ data | json }}</p>
+  </div>
+</div>

src/app/DPU/widgets/time-tracking-widget/time-tracking-widget.component.scss

+
+/* Add any specific styles for the time tracking widget here */
+.card {
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}

src/app/DPU/widgets/time-tracking-widget/time-tracking-widget.component.ts

+
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-time-tracking-widget',
+  templateUrl: './time-tracking-widget.component.html',
+  styleUrls: ['./time-tracking-widget.component.scss']
+})
+export class TimeTrackingWidgetComponent implements OnInit {
+  @Input() data: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/shared/shared.module.ts

@@ -21,6 +21,10 @@ import { AuthService } from './services/auth.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { RenderedHtmlComponent } from '../components/rendered-html/rendered-html.component';
 import { QuillModule } from 'ngx-quill';
+import { CompanyInfoWidgetComponent } from '../DPU/widgets/company-info-widget/company-info-widget.component';
+import { TimeTrackingWidgetComponent } from '../DPU/widgets/time-tracking-widget/time-tracking-widget.component';
+import { PayrollWidgetComponent } from '../DPU/widgets/payroll-widget/payroll-widget.component';
+import { EmployeeDirectoryWidgetComponent } from '../DPU/widgets/employee-directory-widget/employee-directory-widget.component';
 
 
 @NgModule({
@@ -37,7 +41,11 @@ import { QuillModule } from 'ngx-quill';
     AuthenticationLayoutComponent,
     LandingSwitcherComponent,
     LandingLayoutComponent,
-    RenderedHtmlComponent
+    RenderedHtmlComponent,
+    CompanyInfoWidgetComponent,
+    TimeTrackingWidgetComponent,
+    PayrollWidgetComponent,
+    EmployeeDirectoryWidgetComponent
   ],
 
   imports: [
@@ -64,7 +72,11 @@ import { QuillModule } from 'ngx-quill';
     AuthenticationLayoutComponent,
     LandingSwitcherComponent,
     LandingLayoutComponent,
-    RenderedHtmlComponent
+    RenderedHtmlComponent,
+    CompanyInfoWidgetComponent,
+    TimeTrackingWidgetComponent,
+    PayrollWidgetComponent,
+    EmployeeDirectoryWidgetComponent
   ],
   providers: [ColorPickerService, AuthService , TranslateModule],
 })