Refactor

src/components/dashboard/revenuestreamwidget.ts

@@ -23,7 +23,7 @@ export class RevenueStreamWidget {
     constructor(public layoutService: LayoutService) {
         this.subscription = this.layoutService.configUpdate$
             .pipe(debounceTime(25))
-            .subscribe((config) => {
+            .subscribe(() => {
                 this.initChart();
             });
     }

src/components/floatingconfigurator.ts

@@ -2,7 +2,7 @@ import { Component, computed, inject } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { StyleClassModule } from 'primeng/styleclass';
 import { AppConfigurator } from '@/src/layout/appconfigurator';
-import { AppConfigService } from '@/src/service/appconfigservice';
+import { LayoutService } from '@/src/service/applayoutservice';
 
 @Component({
   selector: 'floating-configurator',
@@ -28,11 +28,11 @@ import { AppConfigService } from '@/src/service/appconfigservice';
   `,
 })
 export class FloatingConfigurator {
-    configService = inject(AppConfigService);
+    LayoutService = inject(LayoutService);
 
-    isDarkTheme = computed(() => this.configService.appState().darkTheme);
+    isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme);
 
     toggleDarkMode() {
-        this.configService.appState.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
+        this.LayoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
     }
 }

src/views/uikit/chartdoc.ts

@@ -72,7 +72,7 @@ export class ChartDoc {
     constructor(private layoutService: LayoutService) {
         this.subscription = this.layoutService.configUpdate$
             .pipe(debounceTime(25))
-            .subscribe((config) => {
+            .subscribe(() => {
                 this.initCharts();
             });
     }

src/views/uikit/mediadoc.ts

@@ -126,6 +126,8 @@ export class MediaDoc implements OnInit {
                 return 'warn';
             case 'OUTOFSTOCK':
                 return 'danger';
+            default:
+                return 'success';
         }
     }
 

src/views/uikit/overlaydoc.ts

@@ -6,12 +6,15 @@ import { ButtonModule } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
 import { ToastModule } from 'primeng/toast';
 import { DrawerModule } from 'primeng/drawer';
-import { PopoverModule } from 'primeng/popover';
+import { Popover, PopoverModule } from 'primeng/popover';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { OverlayPanel } from 'primeng/overlaypanel';
+import { InputText, InputTextModule } from 'primeng/inputtext';
+import { FormsModule } from '@angular/forms';
 
 @Component({
     standalone: true,
-    imports:[ToastModule,DialogModule,ButtonModule,DrawerModule, PopoverModule, ConfirmPopupModule],
+    imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule],
     template:`
        <div class="flex flex-col md:flex-row gap-8">
         <div class="md:w-1/2">
@@ -32,8 +35,8 @@ import { ConfirmPopupModule } from 'primeng/confirmpopup';
             <div class="card">
                 <div class="font-semibold text-xl mb-4">Popover</div>
                 <div class="flex flex-wrap gap-2">
-                    <p-button type="button" label="Show" (click)="toggleDataTable()" />
-                    <p-popover ref="op2" id="overlay_panel" [style]="{width: '450px'}">
+                    <p-button type="button" label="Show" (click)="toggleDataTable(op2, $event)" />
+                    <p-popover #op2 id="overlay_panel" [style]="{width: '450px'}">
                         <!-- TABLE -->
                     </p-popover>
                 </div>
@@ -95,7 +98,7 @@ import { ConfirmPopupModule } from 'primeng/confirmpopup';
             <div class="card">
                 <div class="font-semibold text-xl mb-4">ConfirmPopup</div>
                 <p-confirmpopup></p-confirmpopup>
-                <p-button ref="popup" (click)="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
+                <p-button #popup (click)="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
             </div>
 
             <div class="card">
@@ -124,8 +127,6 @@ export class OverlayDoc implements OnInit {
 
     products: Product[] = [];
 
-    selectedProduct: Product = {};
-
     visibleLeft: boolean = false;
 
     visibleRight: boolean = false;
@@ -162,14 +163,7 @@ export class OverlayDoc implements OnInit {
         });
     }
 
-    confirm1() {
-        this.confirmationService.confirm({
-            key: 'confirm1',
-            message: 'Are you sure to perform this action?'
-        });
-    }
-
-    confirm2(event: Event) {
+    confirm(event: Event) {
         this.confirmationService.confirm({
             key: 'confirm2',
             target: event.target || new EventTarget,
@@ -184,8 +178,28 @@ export class OverlayDoc implements OnInit {
         });
     }
 
-    formatCurrency(value: number) {
-        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    open() {
+        this.display = true;
     }
 
+    close() {
+        this.display = false;
+    }
+
+    toggleDataTable(op: Popover, event: any) {
+        op.toggle(event);
+    }
+
+    onProductSelect(op, event: any) {
+        op.hide();
+        this.messageService.add({ severity: 'info', summary: 'Product Selected', detail: event?.data.name, life: 3000 });
+    }
+
+    openConfirmation() {
+        this.displayConfirmation = true;
+    }
+
+    closeConfirmation() {
+        this.displayConfirmation = false;
+    }
 }