[Feat] Time & Activities Register Dynamic Tabs (#8182)

* feat: dynamic tabs & routes registered for time & activity page

* feat: routes registered for time & activities page

- Added [Apps/URL] routes registered.
- Added [Screenshot] routes registered.

* feat: routes registered for time & activities page

- Added [Apps/URL] routes registered.
- Added [Screenshot] routes registered.

* fix: screenshots started at  group by

* fix(cspell): typo spelling :-)

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

@@ -144,7 +144,7 @@
 }
 
 ::ng-deep nb-route-tabset .route-tab .tab-link {
-  border-radius: 0.5rem 0.5rem 0 0;
+  border-radius: nb-theme(border-radius) nb-theme(border-radius) 0 0;
   svg {
     fill: nb-theme(text-primary-color);
   }

apps/gauzy/src/app/pages/dashboard/time-tracking/time-tracking.component.html

@@ -279,7 +279,7 @@ <h4>
 									<ng-container *ngFor="let timeSlot of employee.timeSlots">
 										<ng-template swiperSlide>
 											<ngx-screenshots-item
-												[timeformat]="filters?.timeFormat"
+												[timeFormat]="filters?.timeFormat"
 												[timezone]="filters?.timeZone"
 												[timeSlot]="timeSlot"
 												(delete)="onDelete()"

apps/gauzy/src/app/pages/employees/activity/activity.module.ts

@@ -1,12 +1,120 @@
-import { NgModule } from '@angular/core';
-import { NbCardModule, NbRouteTabsetModule } from '@nebular/theme';
+import { Inject, NgModule } from '@angular/core';
+import { ROUTES, RouterModule } from '@angular/router';
+import { NbCardModule, NbSpinnerModule } from '@nebular/theme';
 import { TranslateModule } from '@ngx-translate/core';
-import { SharedModule } from '@gauzy/ui-core/shared';
-import { ActivityRoutingModule } from './activity-routing.module';
+import { PageRouteRegistryService } from '@gauzy/ui-core/core';
+import {
+	ActivityItemModule,
+	DateRangePickerResolver,
+	DynamicTabsModule,
+	GauzyFiltersModule,
+	NoDataMessageModule,
+	SharedModule
+} from '@gauzy/ui-core/shared';
+import { createActivityRoutes } from './activity.routes';
 import { ActivityLayoutComponent } from './layout/layout.component';
+import { AppUrlActivityComponent } from './app-url-activity/app-url-activity.component';
+
+// Nebular Modules
+const NB_MODULES = [NbCardModule, NbSpinnerModule];
+
+// Components
+const COMPONENTS = [AppUrlActivityComponent];
 
 @NgModule({
-	declarations: [ActivityLayoutComponent],
-	imports: [NbCardModule, NbRouteTabsetModule, TranslateModule.forChild(), ActivityRoutingModule, SharedModule]
+	imports: [
+		RouterModule.forChild([]),
+		...NB_MODULES,
+		TranslateModule.forChild(),
+		ActivityItemModule,
+		DynamicTabsModule,
+		GauzyFiltersModule,
+		NoDataMessageModule,
+		SharedModule
+	],
+	declarations: [ActivityLayoutComponent, ...COMPONENTS],
+	providers: [
+		{
+			provide: ROUTES,
+			useFactory: (service: PageRouteRegistryService) => createActivityRoutes(service),
+			deps: [PageRouteRegistryService],
+			multi: true
+		}
+	]
 })
-export class ActivityModule {}
+export class ActivityModule {
+	private static hasRegisteredPageRoutes = false; // Flag to check if routes have been registered
+
+	constructor(@Inject(PageRouteRegistryService) readonly _pageRouteRegistryService: PageRouteRegistryService) {
+		// Register the routes
+		this.registerPageRoutes();
+	}
+
+	/**
+	 * Registers page routes for the activity module.
+	 * Ensures that routes are registered only once.
+	 *
+	 * @returns {void}
+	 */
+	registerPageRoutes(): void {
+		if (ActivityModule.hasRegisteredPageRoutes) {
+			return;
+		}
+
+		// Register Time & Activity Page Routes
+		this._pageRouteRegistryService.registerPageRoute({
+			location: 'time-activity',
+			path: 'time-activities',
+			loadChildren: () =>
+				import('./time-activities/time-activities.module').then((m) => m.TimeAndActivitiesModule)
+		});
+
+		// Register Screenshot Page Routes
+		this._pageRouteRegistryService.registerPageRoute({
+			location: 'time-activity',
+			path: 'screenshots',
+			loadChildren: () => import('./screenshot/screenshot.module').then((m) => m.ScreenshotModule)
+		});
+
+		// Register App Activity Page Routes
+		this._pageRouteRegistryService.registerPageRoute({
+			location: 'time-activity',
+			path: 'apps',
+			component: AppUrlActivityComponent,
+			data: {
+				datePicker: {
+					unitOfTime: 'day',
+					isLockDatePicker: true,
+					isSaveDatePicker: true,
+					isSingleDatePicker: true,
+					isDisableFutureDate: true
+				},
+				title: 'ACTIVITY.APPS', // Register the title for the page
+				type: 'apps' // Register the type for the page
+			},
+			resolve: { dates: DateRangePickerResolver }
+		});
+
+		// Register URL Activity Page Routes
+		this._pageRouteRegistryService.registerPageRoute({
+			location: 'time-activity',
+			path: 'urls',
+			component: AppUrlActivityComponent,
+			data: {
+				datePicker: {
+					unitOfTime: 'day',
+					isLockDatePicker: true,
+					isSaveDatePicker: true,
+					isSingleDatePicker: true,
+					isDisableFutureDate: true
+				},
+				title: 'ACTIVITY.VISITED_SITES', // Register the title for the page
+				type: 'urls' // Register the type for the page
+			},
+			resolve: { dates: DateRangePickerResolver }
+		});
+
+		// Set the flag to true
+		ActivityModule.hasRegisteredPageRoutes = true;
+	}
+}

apps/gauzy/src/app/pages/employees/activity/activity.routes.ts

@@ -0,0 +1,27 @@
+import { Route } from '@angular/router';
+import { PageRouteRegistryService } from '@gauzy/ui-core/core';
+import { ActivityLayoutComponent } from './layout/layout.component';
+
+/**
+ * Create and configures routes for the activity module.
+ *
+ * @param _pageRouteRegistryService - An instance of PageRouteRegistryService
+ * @returns An array of Route objects
+ */
+export const createActivityRoutes = (_pageRouteRegistryService: PageRouteRegistryService): Route[] => [
+	{
+		path: '',
+		component: ActivityLayoutComponent,
+		data: {
+			tabsetId: 'time-activity'
+		},
+		children: [
+			{
+				path: '',
+				redirectTo: 'time-activities',
+				pathMatch: 'full'
+			},
+			..._pageRouteRegistryService.getPageLocationRoutes('time-activity')
+		]
+	}
+];

apps/gauzy/src/app/pages/employees/activity/app-url-activity/app-url-activity/app-url-activity.component.html → apps/gauzy/src/app/pages/employees/activity/app-url-activity/app-url-activity.component.html

@@ -1,7 +1,7 @@
 <div class="custom-card">
 	<div class="filters mb-2 mt-0">
 		<ngx-gauzy-filters
-			[isTimeformat]="true"
+			[isTimeFormat]="true"
 			[saveFilters]="(datePickerConfig$ | async).isSaveDatePicker"
 			(filtersChange)="filtersChange($event)"
 		></ngx-gauzy-filters>

apps/gauzy/src/app/pages/employees/activity/app-url-activity/app-url-activity/app-url-activity.component.scss → apps/gauzy/src/app/pages/employees/activity/app-url-activity/app-url-activity.component.scss

@@ -1,4 +1,4 @@
-@import '../../time-and-activities/time-and-activities/time-and-activities.component.scss';
+@import '../time-activities/time-activities/time-activities.component.scss';
 :host {
   .percentage-col {
     width: 90px;

apps/gauzy/src/app/pages/employees/activity/layout/layout.component.html

@@ -1,12 +1,10 @@
 <nb-card>
 	<nb-card-header class="card-header-title">
 		<h4>
-			<ngx-header-title>
-				{{ title | translate }}
-			</ngx-header-title>
+			<ngx-header-title> {{ title | translate }} </ngx-header-title>
 		</h4>
 	</nb-card-header>
 	<nb-card-body class="p-0">
-		<nb-route-tabset [tabs]="tabs"></nb-route-tabset>
+		<gz-dynamic-tabs [tabsetId]="tabsetId"></gz-dynamic-tabs>
 	</nb-card-body>
-</nb-card>
+</nb-card>

apps/gauzy/src/app/pages/employees/activity/layout/layout.component.scss

@@ -6,11 +6,14 @@
       overflow: unset;
     }
   }
-  ::ng-deep .route-tabset .route-tab a.tab-link {
+  ::ng-deep nb-route-tabset .route-tab .tab-link {
     border-radius: nb-theme(border-radius) nb-theme(border-radius) 0 0;
-    span.tab-text {
-      text-transform: lowercase;
-      display: block;
+    svg {
+      fill: nb-theme(text-primary-color);
+    }
+    span {
+      display: inline-block;
+      text-transform: initial;
       &:first-letter {
         text-transform: uppercase;
       }