From 83cdc004db4887865c894850a67b4e3cbefec74c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 7 Jan 2025 10:56:33 +0300
Subject: [PATCH 1/4] Fixed dom structure

---
 src/layout/applayout.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/layout/applayout.ts b/src/layout/applayout.ts
index f8e88f0..5bef5fd 100644
--- a/src/layout/applayout.ts
+++ b/src/layout/applayout.ts
@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 import { AppTopBar } from '@/src/layout/apptopbar';
 import { AppSidebar } from '@/src/layout/appsidebar';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
-import { AppConfigurator } from '@/src/layout/appconfigurator';
 import { AppFooter } from '@/src/layout/appfooter';
 import { filter, Subscription } from 'rxjs';
 import { LayoutService } from '@/src/service/layout/layout.service';
@@ -12,19 +11,16 @@ import { LayoutService } from '@/src/service/layout/layout.service';
 @Component({
     selector: 'app-layout',
     standalone: true,
-    imports: [CommonModule, ToastModule, AppTopBar, AppSidebar, RouterModule, AppFooter, AppConfigurator],
+    imports: [CommonModule, ToastModule, AppTopBar, AppSidebar, RouterModule, AppFooter],
     template: `<div class="layout-wrapper" [ngClass]="containerClass">
         <app-topbar></app-topbar>
-        <div class="layout-sidebar">
-            <app-sidebar></app-sidebar>
-        </div>
+        <app-sidebar></app-sidebar>
         <div class="layout-main-container">
             <div class="layout-main">
                 <router-outlet></router-outlet>
             </div>
             <app-footer></app-footer>
         </div>
-        <app-configurator></app-configurator>
         <div class="layout-mask animate-fadein"></div>
     </div> `
 })

From f48b56e95a793df538adbe29a6407bce1cc63c0a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 7 Jan 2025 11:03:55 +0300
Subject: [PATCH 2/4] Cleanup unused code

---
 src/layout/applayout.ts | 19 +++----------------
 src/layout/apptopbar.ts | 12 +++---------
 2 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/src/layout/applayout.ts b/src/layout/applayout.ts
index 5bef5fd..acc5103 100644
--- a/src/layout/applayout.ts
+++ b/src/layout/applayout.ts
@@ -49,20 +49,6 @@ export class AppLayout {
                 });
             }
 
-            if (!this.profileMenuOutsideClickListener) {
-                this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
-                    const isOutsideClicked = !(
-                        this.appTopBar.menu.nativeElement.isSameNode(event.target) ||
-                        this.appTopBar.menu.nativeElement.contains(event.target) ||
-                        this.appTopBar.topbarMenuButton.nativeElement.isSameNode(event.target) ||
-                        this.appTopBar.topbarMenuButton.nativeElement.contains(event.target)
-                    );
-
-                    if (isOutsideClicked) {
-                    }
-                });
-            }
-
             if (this.layoutService.layoutState().staticMenuMobileActive) {
                 this.blockBodyScroll();
             }
@@ -73,11 +59,12 @@ export class AppLayout {
         });
     }
 
-    isOutsideClicked(event) {
+    isOutsideClicked(event: MouseEvent) {
         const sidebarEl = document.querySelector('.layout-sidebar');
         const topbarEl = document.querySelector('.layout-menu-button');
+        const eventTarget = event.target as Node;
 
-        return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
+        return !(sidebarEl.isSameNode(eventTarget) || sidebarEl.contains(eventTarget) || topbarEl.isSameNode(eventTarget) || topbarEl.contains(eventTarget));
     }
 
     hideMenu() {
diff --git a/src/layout/apptopbar.ts b/src/layout/apptopbar.ts
index 630d6d8..b2eb2ce 100644
--- a/src/layout/apptopbar.ts
+++ b/src/layout/apptopbar.ts
@@ -44,7 +44,6 @@ import { LayoutService } from '@/src/service/layout/layout.service';
                 </button>
                 <div class="relative">
                     <button
-                        #menubutton
                         class="layout-topbar-action layout-topbar-action-highlight"
                         pStyleClass="@next"
                         enterFromClass="hidden"
@@ -60,7 +59,6 @@ import { LayoutService } from '@/src/service/layout/layout.service';
             </div>
 
             <button
-                #topbarmenubutton
                 class="layout-topbar-menu-button layout-topbar-action"
                 pStyleClass="@next"
                 enterFromClass="hidden"
@@ -72,7 +70,7 @@ import { LayoutService } from '@/src/service/layout/layout.service';
                 <i class="pi pi-ellipsis-v"></i>
             </button>
 
-            <div #topbarmenu class="layout-topbar-menu hidden lg:block">
+            <div class="layout-topbar-menu hidden lg:block">
                 <div class="layout-topbar-menu-content">
                     <button type="button" class="layout-topbar-action">
                         <i class="pi pi-calendar"></i>
@@ -92,17 +90,13 @@ import { LayoutService } from '@/src/service/layout/layout.service';
     </div>`
 })
 export class AppTopBar {
+
     items!: MenuItem[];
 
-    @ViewChild('menubutton') menuButton!: ElementRef;
-
-    @ViewChild('topbarmenubutton') topbarMenuButton!: ElementRef;
-
-    @ViewChild('topbarmenu') menu!: ElementRef;
-
     constructor(public layoutService: LayoutService) {}
 
     toggleDarkMode() {
         this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
     }
+
 }

From 078d0636b4d91888d91e8246c93f29883c9da568 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:12:18 +0300
Subject: [PATCH 3/4] Remove unused imports

---
 src/layout/applayout.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layout/applayout.ts b/src/layout/applayout.ts
index acc5103..1f49ff8 100644
--- a/src/layout/applayout.ts
+++ b/src/layout/applayout.ts
@@ -1,5 +1,4 @@
 import { Component, Renderer2, ViewChild } from '@angular/core';
-import { ToastModule } from 'primeng/toast';
 import { CommonModule } from '@angular/common';
 import { AppTopBar } from '@/src/layout/apptopbar';
 import { AppSidebar } from '@/src/layout/appsidebar';
@@ -11,7 +10,7 @@ import { LayoutService } from '@/src/service/layout/layout.service';
 @Component({
     selector: 'app-layout',
     standalone: true,
-    imports: [CommonModule, ToastModule, AppTopBar, AppSidebar, RouterModule, AppFooter],
+    imports: [CommonModule, AppTopBar, AppSidebar, RouterModule, AppFooter],
     template: `<div class="layout-wrapper" [ngClass]="containerClass">
         <app-topbar></app-topbar>
         <app-sidebar></app-sidebar>

From c89ea65b118c81c5ec1cff01dba685cf8f9e07f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:38:04 +0300
Subject: [PATCH 4/4] update uikit components

---
 src/views/uikit/listdoc.ts    |   1 -
 src/views/uikit/mediadoc.ts   |  81 ++++++++-------
 src/views/uikit/menudoc.ts    | 190 ++++++++++++++++++----------------
 src/views/uikit/miscdoc.ts    |   8 +-
 src/views/uikit/overlaydoc.ts |  63 +++++++----
 5 files changed, 191 insertions(+), 152 deletions(-)

diff --git a/src/views/uikit/listdoc.ts b/src/views/uikit/listdoc.ts
index ede5fa6..8af3316 100644
--- a/src/views/uikit/listdoc.ts
+++ b/src/views/uikit/listdoc.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-
 import { FormsModule } from '@angular/forms';
 import { DataViewModule } from 'primeng/dataview';
 import { CommonModule } from '@angular/common';
diff --git a/src/views/uikit/mediadoc.ts b/src/views/uikit/mediadoc.ts
index e33c220..7fecfd0 100644
--- a/src/views/uikit/mediadoc.ts
+++ b/src/views/uikit/mediadoc.ts
@@ -9,52 +9,51 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
 import { PhotoService } from '@/src/service/demo/photo.service';
 
 @Component({
-    standalone:true,
-    imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule],
+    standalone: true,
+    imports: [CommonModule, CarouselModule, ButtonModule, GalleriaModule, ImageModule, TagModule],
     template: `<div class="card">
-        <div class="font-semibold text-xl mb-4">Carousel</div>
-        <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="galleriaResponsiveOptions">
-            <ng-template let-product #item>
-                <div class="border border-surface rounded-border m-2 p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
-                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
+            <div class="font-semibold text-xl mb-4">Carousel</div>
+            <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="galleriaResponsiveOptions">
+                <ng-template let-product #item>
+                    <div class="border border-surface rounded-border m-2 p-4">
+                        <div class="mb-4">
+                            <div class="relative mx-auto">
+                                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
+                                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
+                            </div>
                         </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ product.name }}</div>
-                    <div class="flex justify-between items-center">
-                        <div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
-                        <span>
+                        <div class="mb-4 font-medium">{{ product.name }}</div>
+                        <div class="flex justify-between items-center">
+                            <div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
+                            <span>
                                 <p-button icon="pi pi-heart" severity="secondary" [outlined]="true" />
                                 <p-button icon="pi pi-shopping-cart" styleClass="ml-2" />
                             </span>
+                        </div>
                     </div>
-                </div>
-            </ng-template>
-        </p-carousel>
-    </div>
+                </ng-template>
+            </p-carousel>
+        </div>
 
-    <div class="card">
-        <div class="font-semibold text-xl mb-4">Image</div>
-        <p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" alt="Image" width="250" />
-    </div>
+        <div class="card">
+            <div class="font-semibold text-xl mb-4">Image</div>
+            <p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" alt="Image" width="250" />
+        </div>
 
-    <div class="card">
-        <div class="font-semibold text-xl mb-4">Galleria</div>
-        <p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
-            <ng-template #item let-item>
-                <img [src]="item.itemImageSrc" style="width:100%" />
-            </ng-template>
-            <ng-template #thumbnail let-item>
-                <img [src]="item.thumbnailImageSrc" />
-            </ng-template>
-        </p-galleria>
-    </div>`,
-    providers: [ProductService, PhotoService],
+        <div class="card">
+            <div class="font-semibold text-xl mb-4">Galleria</div>
+            <p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
+                <ng-template #item let-item>
+                    <img [src]="item.itemImageSrc" style="width:100%" />
+                </ng-template>
+                <ng-template #thumbnail let-item>
+                    <img [src]="item.thumbnailImageSrc" />
+                </ng-template>
+            </p-galleria>
+        </div>`,
+    providers: [ProductService, PhotoService]
 })
 export class MediaDoc implements OnInit {
-
     products!: Product[];
 
     images!: any[];
@@ -96,14 +95,17 @@ export class MediaDoc implements OnInit {
         }
     ];
 
-    constructor(private productService: ProductService, private photoService: PhotoService) { }
+    constructor(
+        private productService: ProductService,
+        private photoService: PhotoService
+    ) {}
 
     ngOnInit() {
-        this.productService.getProductsSmall().then(products => {
+        this.productService.getProductsSmall().then((products) => {
             this.products = products;
         });
 
-        this.photoService.getImages().then(images => {
+        this.photoService.getImages().then((images) => {
             this.images = images;
         });
     }
@@ -120,5 +122,4 @@ export class MediaDoc implements OnInit {
                 return 'success';
         }
     }
-
 }
diff --git a/src/views/uikit/menudoc.ts b/src/views/uikit/menudoc.ts
index eeac0e5..e6d00da 100644
--- a/src/views/uikit/menudoc.ts
+++ b/src/views/uikit/menudoc.ts
@@ -14,106 +14,121 @@ import { StepperModule } from 'primeng/stepper';
 import { IconField, IconFieldModule } from 'primeng/iconfield';
 import { InputIcon, InputIconModule } from 'primeng/inputicon';
 
-
 @Component({
-    standalone:true,
-    imports: [CommonModule, BreadcrumbModule, TieredMenuModule, IconFieldModule, InputIconModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule, IconField, InputIcon],
+    standalone: true,
+    imports: [
+        CommonModule,
+        BreadcrumbModule,
+        TieredMenuModule,
+        IconFieldModule,
+        InputIconModule,
+        MenuModule,
+        ButtonModule,
+        ContextMenuModule,
+        MegaMenuModule,
+        PanelMenuModule,
+        TabsModule,
+        MenubarModule,
+        InputTextModule,
+        TabsModule,
+        StepperModule,
+        TabsModule,
+        IconField,
+        InputIcon
+    ],
     template: `
-            <div class="card">
-                <div class="font-semibold text-xl mb-4">Menubar</div>
-                <p-menubar [model]="nestedMenuItems">
-                    <ng-template #end>
-                        <p-iconfield>
-                            <p-inputicon class="pi pi-search"/>
-                            <input type="text" pInputText placeholder="Search">
-                        </p-iconfield>
-                    </ng-template>
+        <div class="card">
+            <div class="font-semibold text-xl mb-4">Menubar</div>
+            <p-menubar [model]="nestedMenuItems">
+                <ng-template #end>
+                    <p-iconfield>
+                        <p-inputicon class="pi pi-search" />
+                        <input type="text" pInputText placeholder="Search" />
+                    </p-iconfield>
+                </ng-template>
+            </p-menubar>
+        </div>
 
+        <div class="card">
+            <div class="font-semibold text-xl mb-4">Breadcrumb</div>
+            <p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
+        </div>
 
-                </p-menubar>
-            </div>
-
-            <div class="card">
-                <div class="font-semibold text-xl mb-4">Breadcrumb</div>
-                <p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
-            </div>
-
-            <div class="flex flex-col md:flex-row gap-8">
-                <div class="md:w-1/2">
-                    <div class="card">
-                        <div class="font-semibold text-xl mb-4">Steps</div>
-                        <p-stepper [value]="1">
-                            <p-step-list>
-                                <p-step [value]="1">Header I</p-step>
-                                <p-step [value]="2">Header II</p-step>
-                                <p-step [value]="3">Header III</p-step>
-                            </p-step-list>
-                        </p-stepper>
-                    </div>
-                </div>
-                <div class="md:w-1/2">
-                    <div class="card">
-                        <div class="font-semibold text-xl mb-4">TabMenu</div>
-                        <p-tabs [value]="0">
-                            <p-tablist>
-                                <p-tab [value]="0">Header I</p-tab>
-                                <p-tab [value]="1">Header II</p-tab>
-                                <p-tab [value]="2">Header III</p-tab>
-                            </p-tablist>
-                        </p-tabs>
-                    </div>
+        <div class="flex flex-col md:flex-row gap-8">
+            <div class="md:w-1/2">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Steps</div>
+                    <p-stepper [value]="1">
+                        <p-step-list>
+                            <p-step [value]="1">Header I</p-step>
+                            <p-step [value]="2">Header II</p-step>
+                            <p-step [value]="3">Header III</p-step>
+                        </p-step-list>
+                    </p-stepper>
                 </div>
             </div>
-
-            <div class="flex flex-col md:flex-row gap-8 mt-6">
-                <div class="md:w-1/3">
-                    <div class="card">
-                        <div class="font-semibold text-xl mb-4">Tiered Menu</div>
-                        <p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu>
-                    </div>
-                </div>
-                <div class="md:w-1/3">
-                    <div class="card">
-                        <div class="font-semibold text-xl mb-4">Plain Menu</div>
-                        <p-menu [model]="menuItems"></p-menu>
-                    </div>
-                </div>
-                <div class="md:w-1/3">
-                    <div class="card">
-                        <div class="font-semibold text-xl mb-4">Overlay Menu</div>
-                        <p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
-                        <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
-                    </div>
-
-                    <div class="card" #anchor>
-                        <div class="font-semibold text-xl mb-4">Context Menu</div>
-                        Right click to display.
-                        <p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
-                    </div>
+            <div class="md:w-1/2">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">TabMenu</div>
+                    <p-tabs [value]="0">
+                        <p-tablist>
+                            <p-tab [value]="0">Header I</p-tab>
+                            <p-tab [value]="1">Header II</p-tab>
+                            <p-tab [value]="2">Header III</p-tab>
+                        </p-tablist>
+                    </p-tabs>
                 </div>
             </div>
+        </div>
 
-            <div class="flex flex-col md:flex-row gap-8 mt-8">
-                <div class="md:w-1/2">
-                    <div class="card">
-                        <div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
-                        <p-megaMenu [model]="megaMenuItems" />
-
-                        <div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
-                        <p-megaMenu [model]="megaMenuItems" orientation="vertical" />
-                    </div>
-                </div>
-                <div class="md:w-1/2">
-                    <div class="card">
-                        <div class="font-semibold text-xl mb-4">PanelMenu</div>
-                        <p-panelMenu [model]="panelMenuItems" />
-                    </div>
+        <div class="flex flex-col md:flex-row gap-8 mt-6">
+            <div class="md:w-1/3">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Tiered Menu</div>
+                    <p-tieredmenu [model]="tieredMenuItems"></p-tieredmenu>
                 </div>
             </div>
-    `,
+            <div class="md:w-1/3">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Plain Menu</div>
+                    <p-menu [model]="menuItems"></p-menu>
+                </div>
+            </div>
+            <div class="md:w-1/3">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Overlay Menu</div>
+                    <p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
+                    <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
+                </div>
+
+                <div class="card" #anchor>
+                    <div class="font-semibold text-xl mb-4">Context Menu</div>
+                    Right click to display.
+                    <p-contextmenu [target]="anchor" [model]="contextMenuItems"></p-contextmenu>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-8 mt-8">
+            <div class="md:w-1/2">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
+                    <p-megamenu [model]="megaMenuItems" />
+
+                    <div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
+                    <p-megamenu [model]="megaMenuItems" orientation="vertical" />
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">PanelMenu</div>
+                    <p-panelmenu [model]="panelMenuItems" />
+                </div>
+            </div>
+        </div>
+    `
 })
 export class MenuDoc {
-
     nestedMenuItems = [
         {
             label: 'Customers',
@@ -521,5 +536,4 @@ export class MenuDoc {
             ]
         }
     ];
-
 }
diff --git a/src/views/uikit/miscdoc.ts b/src/views/uikit/miscdoc.ts
index 16b77b5..cff7360 100644
--- a/src/views/uikit/miscdoc.ts
+++ b/src/views/uikit/miscdoc.ts
@@ -20,10 +20,10 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
             <div class="font-semibold text-xl mb-4">ProgressBar</div>
             <div class="flex flex-col md:flex-row gap-4">
                 <div class="md:w-1/2">
-                    <p-progressBar [value]="value" [showValue]="true"></p-progressBar>
+                    <p-progressbar [value]="value" [showValue]="true"></p-progressbar>
                 </div>
                 <div class="md:w-1/2">
-                    <p-progressBar [value]="50" [showValue]="false"></p-progressBar>
+                    <p-progressbar [value]="50" [showValue]="false"></p-progressbar>
                 </div>
             </div>
         </div>
@@ -70,14 +70,14 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
                 <div class="card">
                     <div class="font-semibold text-xl mb-4">Avatar</div>
                     <div class="font-semibold mb-4">Group</div>
-                    <p-avatarGroup styleClass="mb-4">
+                    <p-avatargroup styleClass="mb-4">
                         <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
                         <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
                         <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
                         <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
                         <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" size="large" shape="circle"></p-avatar>
                         <p-avatar label="+2" shape="circle" size="large" [style]="{ 'background-color': '#9c27b0', color: '#ffffff' }"></p-avatar>
-                    </p-avatarGroup>
+                    </p-avatargroup>
 
                     <div class="font-semibold my-4">Label - Circle</div>
                     <p-avatar class="mr-2" label="P" size="xlarge" shape="circle"></p-avatar>
diff --git a/src/views/uikit/overlaydoc.ts b/src/views/uikit/overlaydoc.ts
index 6ba3fcc..638f2af 100644
--- a/src/views/uikit/overlaydoc.ts
+++ b/src/views/uikit/overlaydoc.ts
@@ -10,12 +10,12 @@ import { InputTextModule } from 'primeng/inputtext';
 import { FormsModule } from '@angular/forms';
 import { TooltipModule } from 'primeng/tooltip';
 import { Product, ProductService } from '@/src/service/demo/product.service';
+import { TableModule } from 'primeng/table';
 
 @Component({
     standalone: true,
-    imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule],
-    template:`
-       <div class="flex flex-col md:flex-row gap-8">
+    imports: [ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule, TableModule, ToastModule],
+    template: ` <div class="flex flex-col md:flex-row gap-8">
         <div class="md:w-1/2">
             <div class="card">
                 <div class="font-semibold text-xl mb-4">Dialog</div>
@@ -28,16 +28,32 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
                         <p-button label="Save" (click)="close()" />
                     </ng-template>
                 </p-dialog>
-                <p-button label="Show" [style]="{width: 'auto'}" (click)="open()" />
+                <p-button label="Show" [style]="{ width: 'auto' }" (click)="open()" />
             </div>
 
             <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(op2, $event)" />
-                    <p-popover #op2 id="overlay_panel" [style]="{width: '450px'}">
-                        <!-- TABLE -->
+                    <p-popover #op2 id="overlay_panel" [style]="{ width: '450px' }">
+                        <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="id" [rows]="5" [paginator]="true" (onRowSelect)="onProductSelect(op2, $event)">
+                            <ng-template #header>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Image</th>
+                                    <th>Price</th>
+                                </tr>
+                            </ng-template>
+                            <ng-template #body let-product>
+                                <tr [pSelectableRow]="product">
+                                    <td>{{ product.name }}</td>
+                                    <td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" class="w-16 shadow-sm" /></td>
+                                    <td>{{ product.price }}</td>
+                                </tr>
+                            </ng-template>
+                        </p-table>
                     </p-popover>
+                    <p-toast />
                 </div>
             </div>
 
@@ -87,10 +103,10 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
                     </p>
                 </p-drawer>
 
-                <p-button icon="pi pi-arrow-right" (click)="visibleLeft = true" [style]="{marginRight: '0.25em'}" />
-                <p-button icon="pi pi-arrow-left" (click)="visibleRight = true" [style]="{marginRight: '0.25em'}" />
-                <p-button icon="pi pi-arrow-down" (click)="visibleTop = true" [style]="{marginRight: '0.25em'}" />
-                <p-button icon="pi pi-arrow-up" (click)="visibleBottom = true" [style]="{marginRight: '0.25em'}" />
+                <p-button icon="pi pi-arrow-right" (click)="visibleLeft = true" [style]="{ marginRight: '0.25em' }" />
+                <p-button icon="pi pi-arrow-left" (click)="visibleRight = true" [style]="{ marginRight: '0.25em' }" />
+                <p-button icon="pi pi-arrow-down" (click)="visibleTop = true" [style]="{ marginRight: '0.25em' }" />
+                <p-button icon="pi pi-arrow-up" (click)="visibleBottom = true" [style]="{ marginRight: '0.25em' }" />
                 <p-button icon="pi pi-external-link" (click)="visibleFull = true" />
             </div>
 
@@ -105,7 +121,7 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
                 <p-button label="Delete" icon="pi pi-trash" severity="danger" [style]="{ width: 'auto' }" (click)="openConfirmation()" />
                 <p-dialog header="Confirmation" [(visible)]="displayConfirmation" [style]="{ width: '350px' }" [modal]="true">
                     <div class="flex items-center justify-center">
-                        <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" > </i>
+                        <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem"> </i>
                         <span>Are you sure you want to proceed?</span>
                     </div>
                     <ng-template #footer>
@@ -119,7 +135,6 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
     providers: [ConfirmationService, MessageService, ProductService]
 })
 export class OverlayDoc implements OnInit {
-
     images: any[] = [];
 
     display: boolean = false;
@@ -138,34 +153,44 @@ export class OverlayDoc implements OnInit {
 
     displayConfirmation: boolean = false;
 
-    constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) { }
+    selectedProduct!: Product;
+
+    constructor(
+        private productService: ProductService,
+        private confirmationService: ConfirmationService,
+        private messageService: MessageService
+    ) {}
 
     ngOnInit() {
-        this.productService.getProductsSmall().then(products => this.products = products);
+        this.productService.getProductsSmall().then((products) => (this.products = products));
 
         this.images = [];
         this.images.push({
             source: 'assets/demo/images/sopranos/sopranos1.jpg',
-            thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1'
+            thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg',
+            title: 'Sopranos 1'
         });
         this.images.push({
             source: 'assets/demo/images/sopranos/sopranos2.jpg',
-            thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2'
+            thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg',
+            title: 'Sopranos 2'
         });
         this.images.push({
             source: 'assets/demo/images/sopranos/sopranos3.jpg',
-            thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3'
+            thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg',
+            title: 'Sopranos 3'
         });
         this.images.push({
             source: 'assets/demo/images/sopranos/sopranos4.jpg',
-            thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4'
+            thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg',
+            title: 'Sopranos 4'
         });
     }
 
     confirm(event: Event) {
         this.confirmationService.confirm({
             key: 'confirm2',
-            target: event.target || new EventTarget,
+            target: event.target || new EventTarget(),
             message: 'Are you sure that you want to proceed?',
             icon: 'pi pi-exclamation-triangle',
             accept: () => {