feat: static tabs load template or component dynamically

apps/gauzy/src/app/pages/dashboard/dashboard.component.ts

@@ -183,6 +183,6 @@ export class DashboardComponent extends TranslationBaseComponent implements Afte
 	 */
 	ngOnDestroy() {
 		// Delete the dashboard tabset from the registry
-		this._pageTabRegistryService.deleteTabset('dashboard');
+		this._pageTabRegistryService.deleteTabset(this.tabsetId);
 	}
 }

apps/gauzy/src/app/pages/employees/timesheet/layout/layout.component.ts

@@ -47,7 +47,7 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement
 		if (this._store.hasAnyPermission(...permissions)) {
 			// Register the daily timesheet tab
 			this._pageTabRegistryService.registerPageTab({
-				tabsetId: 'timesheet', // The identifier for the tabset
+				tabsetId: this.tabsetId, // The identifier for the tabset
 				tabId: 'daily', // The identifier for the tab
 				tabsetType: 'route', // The type of tabset to use
 				route: '/pages/employees/timesheets/daily', // The route for the tab
@@ -59,7 +59,7 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement
 
 			// Register the weekly timesheet tab
 			this._pageTabRegistryService.registerPageTab({
-				tabsetId: 'timesheet', // The identifier for the tabset
+				tabsetId: this.tabsetId, // The identifier for the tabset
 				tabId: 'weekly', // The identifier for the tab
 				tabsetType: 'route', // The type of tabset to use
 				route: '/pages/employees/timesheets/weekly', // The route for the tab
@@ -71,7 +71,7 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement
 
 			// Register the calendar timesheet tab
 			this._pageTabRegistryService.registerPageTab({
-				tabsetId: 'timesheet', // The identifier for the tabset
+				tabsetId: this.tabsetId, // The identifier for the tabset
 				tabId: 'calendar', // The identifier for the tab
 				tabsetType: 'route', // The type of tabset to use
 				route: '/pages/employees/timesheets/calendar', // The route for the tab
@@ -86,7 +86,7 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement
 		if (this._store.hasPermission(PermissionsEnum.CAN_APPROVE_TIMESHEET)) {
 			// Register the approvals tab
 			this._pageTabRegistryService.registerPageTab({
-				tabsetId: 'timesheet', // The identifier for the tabset
+				tabsetId: this.tabsetId, // The identifier for the tabset
 				tabId: 'approvals', // The identifier for the tab
 				tabsetType: 'route', // The type of tabset to use
 				route: '/pages/employees/timesheets/approvals', // The route for the tab
@@ -100,6 +100,6 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement
 
 	ngOnDestroy(): void {
 		// Delete the timesheet tabset from the registry
-		this._pageTabRegistryService.deleteTabset('timesheet');
+		this._pageTabRegistryService.deleteTabset(this.tabsetId);
 	}
 }

packages/plugins/job-employee-ui/src/lib/components/job-employee/job-employee.component.ts

@@ -19,7 +19,8 @@ import {
 	Store,
 	ToastrService,
 	PageTabsetRegistryId,
-	PageTabRegistryService
+	PageTabRegistryService,
+	PageDataTableRegistryId
 } from '@gauzy/ui-core/core';
 import { I18nService } from '@gauzy/ui-core/i18n';
 import {
@@ -48,6 +49,7 @@ export enum JobSearchTabsEnum {
 })
 export class JobEmployeeComponent extends PaginationFilterBaseComponent implements AfterViewInit, OnInit, OnDestroy {
 	public tabsetId: PageTabsetRegistryId = this._route.snapshot.data.tabsetId; // The identifier for the tabset
+	public dataTableId: PageDataTableRegistryId = this._route.snapshot.data.dataTableId; // The identifier for the data table
 	public jobSearchTabsEnum = JobSearchTabsEnum;
 	public loading: boolean = false;
 	public settingsSmartTable: any;
@@ -162,6 +164,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 		_pageTabRegistryService.registerPageTab({
 			tabsetId: this.tabsetId, // The identifier for the tabset
 			tabId: 'browse', // The identifier for the tab
+			tabIcon: 'globe-2-outline', // The icon for the tab
 			tabsetType: 'standard', // The type of tabset to use
 			tabTitle: (_i18n) => _i18n.getTranslation('JOB_EMPLOYEE.BROWSE'), // The title for the tab
 			order: 1, // The order of the tab,
@@ -173,6 +176,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 		_pageTabRegistryService.registerPageTab({
 			tabsetId: this.tabsetId, // The identifier for the tabset
 			tabId: 'search', // The identifier for the tab
+			tabIcon: 'search-outline', // The icon for the tab
 			tabsetType: 'standard', // The type of tabset to use
 			tabTitle: (_i18n) => _i18n.getTranslation('JOB_EMPLOYEE.SEARCH'), // The title for the tab
 			order: 2, // The order of the tab,
@@ -184,6 +188,7 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 		_pageTabRegistryService.registerPageTab({
 			tabsetId: this.tabsetId, // The identifier for the tabset
 			tabId: 'history', // The identifier for the tab
+			tabIcon: 'clock-outline', // The icon for the tab
 			tabsetType: 'standard', // The type of tabset to use
 			tabTitle: (_i18n) => _i18n.getTranslation('JOB_EMPLOYEE.HISTORY'), // The title for the tab
 			order: 3, // The order of the tab,
@@ -623,5 +628,9 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
 		}
 	};
 
-	ngOnDestroy(): void {}
+	ngOnDestroy(): void {
+		// Delete the dashboard tabset from the registry
+		this._pageTabRegistryService.deleteTabset(this.tabsetId);
+		this._pageDataTableRegistryService.deleteDataTable(this.dataTableId);
+	}
 }

packages/plugins/job-employee-ui/src/lib/job-employee.routes.ts

@@ -17,6 +17,8 @@ export const createJobEmployeeRoutes = (_pageRouteRegistryService: PageRouteRegi
 		data: {
 			// The tabset identifier for the route
 			tabsetId: 'job-employee',
+			// The data table identifier for the route
+			dataTableId: 'job-employee',
 			// The permission required to access the route
 			permissions: {
 				only: [PermissionsEnum.ORG_JOB_EMPLOYEE_VIEW],

packages/ui-core/core/src/lib/services/page/page-data-table-registry.service.ts

@@ -14,6 +14,21 @@ export class PageDataTableRegistryService implements IPageDataTableRegistry {
 	 */
 	private readonly registry = new Map<PageDataTableRegistryId, PageDataTableRegistryConfig[]>();
 
+	/**
+	 * Retrieves a read-only copy of the data table registry.
+	 *
+	 * This method returns a new `Map` instance based on the current state of the registry.
+	 * This approach ensures that the original `registry` is not directly modified by
+	 * external code, preserving immutability and encapsulation.
+	 *
+	 * @returns A `ReadonlyMap` containing the current data table registry. This map
+	 *          cannot be modified, ensuring that the internal state remains unchanged.
+	 */
+	public getRegistry(): ReadonlyMap<PageDataTableRegistryId, PageDataTableRegistryConfig[]> {
+		// Return a new Map to provide a snapshot of the current registry state
+		return new Map(this.registry);
+	}
+
 	/**
 	 * Register a column configurations.
 	 *
@@ -148,4 +163,29 @@ export class PageDataTableRegistryService implements IPageDataTableRegistry {
 			return acc;
 		}, {});
 	}
+
+	/**
+	 * Deletes a data table from the registry.
+	 *
+	 * This method removes the specified data table from the registry. If the data table does not exist,
+	 * it logs a warning message. Additionally, if the operation is successful, it logs an informational message.
+	 *
+	 * @param dataTableId The identifier of the data table to be removed.
+	 * @returns void
+	 */
+	public deleteDataTable(dataTableId: PageDataTableRegistryId): void {
+		// Check if the data table exists in the registry
+		if (!this.registry.has(dataTableId)) {
+			console.warn(`Data table with id "${dataTableId}" does not exist in the registry.`);
+			return;
+		}
+
+		try {
+			// Remove the data table from the registry
+			this.registry.delete(dataTableId);
+			console.log(`Data table with id "${dataTableId}" has been successfully removed from the registry.`);
+		} catch (error) {
+			console.error(`Failed to remove data table with id "${dataTableId}": ${error.message}`);
+		}
+	}
 }

packages/ui-core/core/src/lib/services/page/page-route-registry.service.ts

@@ -14,6 +14,22 @@ export class PageRouteRegistryService implements IPageRouteRegistry {
 	 */
 	private readonly registry = new Map<PageRouteRegistryId, PageRouteRegistryConfig[]>();
 
+	/**
+	 * Retrieves a read-only snapshot of the page route registry.
+	 *
+	 * This method returns a new `Map` instance based on the current state of the `registry`.
+	 * This approach ensures that the original `registry` remains unchanged and protected
+	 * from direct modifications, preserving encapsulation and immutability.
+	 *
+	 * @returns A `ReadonlyMap` containing the current page route registry. This map
+	 *          provides a snapshot of the registry's state and cannot be modified,
+	 *          ensuring that internal data integrity is maintained.
+	 */
+	public getRegistry(): ReadonlyMap<PageRouteRegistryId, PageRouteRegistryConfig[]> {
+		// Create and return a new Map to provide an immutable view of the current registry state
+		return new Map(this.registry);
+	}
+
 	/**
 	 * Register a single page route configuration.
 	 *

packages/ui-core/core/src/lib/services/page/page-tab-registry.service.ts

@@ -193,9 +193,13 @@ export class PageTabRegistryService implements IPageTabRegistry {
 			return;
 		}
 
-		// Remove the tabset from the registry
-		this.registry.delete(tabsetId);
-		console.log(`Tabset with id "${tabsetId}" has been successfully removed from the registry.`);
+		try {
+			// Remove the tabset from the registry
+			this.registry.delete(tabsetId);
+			console.log(`Tabset with id "${tabsetId}" has been successfully removed from the registry.`);
+		} catch (error) {
+			console.error(`Failed to remove tabset with id "${tabsetId}": ${error.message}`);
+		}
 	}
 
 	/**

packages/ui-core/core/src/lib/services/page/page-tab-registry.types.ts

@@ -7,6 +7,12 @@ import { PageTabsetRegistryId } from '../../common/component-registry.types';
  * Custom page tab configuration options.
  */
 export interface CustomNbRouteTab extends NbRouteTab {
+	/**
+	 * @description
+	 * The identifier for the tab.
+	 */
+	tabId?: string;
+
 	/**
 	 * @description
 	 * Specifies if the tab is active.
@@ -37,12 +43,6 @@ export interface PageTabRegistryConfig extends CustomNbRouteTab {
 	 */
 	tabsetId: PageTabsetRegistryId;
 
-	/**
-	 * @description
-	 * The identifier for the tab.
-	 */
-	tabId: string;
-
 	/**
 	 * @description
 	 * The translatable key for the tab title.

packages/ui-core/shared/src/lib/components/dynamic-tabs/dynamic-tabs.component.html

@@ -8,23 +8,16 @@
 	<nb-tabset>
 		<nb-tab
 			*ngFor="let tab of tabs"
-			[tabTitle]="tab.title"
-			[tabId]="tab.tabId"
-			[active]="tab.active"
-			[disabled]="tab.disabled"
+			[tabTitle]="tab?.title"
+			[tabIcon]="tab?.icon"
+			[tabId]="tab?.tabId"
+			[active]="tab?.active"
+			[disabled]="tab?.disabled"
+			[responsive]="tab?.responsive"
+			[route]="tab?.route"
 		>
-			<!-- Dynamic content/template injection -->
-			<ng-container *ngIf="tab.template">
-				<ng-container *ngTemplateOutlet="tab?.template"></ng-container>
-			</ng-container>
-
-			<!-- Dynamic component injection -->
-			<ng-container *ngIf="tab.component">
-				<ng-template #tabContent></ng-template>
-				<ng-container
-					*ngTemplateOutlet="createDynamicComponentForTab(tab?.component, tabContent)"
-				></ng-container>
-			</ng-container>
+			<!-- Placeholder for dynamic content -->
+			<ng-template #tabContent></ng-template>
 		</nb-tab>
 	</nb-tabset>
 </ng-template>