Feature/migrate admin page components to standalone (#5212)

* Migrate admin page components to standalone

* Update changelog

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extended the export functionality by custom asset profiles
 - Improved the platform icon in the create or update platform dialog of the admin control
 - Localized the durations of the coupon system
+- Refactored the admin pages to standalone
 - Refactored the Frequently Asked Questions (FAQ) pages to standalone
 - Refactored the home pages to standalone
 - Refactored the resources pages to standalone

apps/client/src/app/app-routing.module.ts

@@ -28,7 +28,7 @@ const routes: Routes = [
   {
     path: internalRoutes.adminControl.path,
     loadChildren: () =>
-      import('./pages/admin/admin-page.module').then((m) => m.AdminPageModule)
+      import('./pages/admin/admin-page.routes').then((m) => m.routes)
   },
   {
     canActivate: [AuthGuard],

apps/client/src/app/components/admin-jobs/admin-jobs.component.ts

@@ -10,6 +10,7 @@ import {
 import { getDateWithTimeFormatString } from '@ghostfolio/common/helper';
 import { AdminJobs, User } from '@ghostfolio/common/interfaces';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -17,8 +18,17 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import {
-import { MatTableDataSource } from '@angular/material/table';
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { IonIcon } from '@ionic/angular/standalone';
 import { JobStatus } from 'bull';
 import { addIcons } from 'ionicons';
 import {
@@ -34,17 +44,28 @@ import {
   removeCircleOutline,
   timeOutline
 } from 'ionicons/icons';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonIcon,
+    MatButtonModule,
+    MatMenuModule,
+    MatSelectModule,
+    MatTableModule,
+    NgxSkeletonLoaderModule,
+    ReactiveFormsModule
+  ],
   selector: 'gf-admin-jobs',
   styleUrls: ['./admin-jobs.scss'],
-  templateUrl: './admin-jobs.html',
+  templateUrl: './admin-jobs.html'
-  standalone: false
 })
-export class AdminJobsComponent implements OnDestroy, OnInit {
+export class GfAdminJobsComponent implements OnDestroy, OnInit {
   public DATA_GATHERING_QUEUE_PRIORITY_LOW = DATA_GATHERING_QUEUE_PRIORITY_LOW;
   public DATA_GATHERING_QUEUE_PRIORITY_HIGH =
     DATA_GATHERING_QUEUE_PRIORITY_HIGH;

apps/client/src/app/components/admin-jobs/admin-jobs.module.ts

@@ -1,28 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTableModule } from '@angular/material/table';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { AdminJobsComponent } from './admin-jobs.component';
-
-@NgModule({
-  declarations: [AdminJobsComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    MatSelectModule,
-    MatTableModule,
-    NgxSkeletonLoaderModule,
-    ReactiveFormsModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAdminJobsModule {}

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -1,3 +1,4 @@
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -14,9 +15,13 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-data.interface';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { SelectionModel } from '@angular/cdk/collections';
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -26,11 +31,24 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatMenuModule } from '@angular/material/menu';
-import { MatSort, Sort, SortDirection } from '@angular/material/sort';
+import {
-import { MatTableDataSource } from '@angular/material/table';
+  MatPaginator,
-import { ActivatedRoute, Router } from '@angular/router';
+  MatPaginatorModule,
+  PageEvent
+} from '@angular/material/paginator';
+import {
+  MatSort,
+  MatSortModule,
+  Sort,
+  SortDirection
+} from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { AssetSubClass, DataSource, SymbolProfile } from '@prisma/client';
 import { isUUID } from 'class-validator';
 import { addIcons } from 'ionicons';
@@ -44,24 +62,41 @@ import {
   trashOutline
 } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
 import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
 
 import { AdminMarketDataService } from './admin-market-data.service';
-import { AssetProfileDialog } from './asset-profile-dialog/asset-profile-dialog.component';
+import { GfAssetProfileDialogComponent } from './asset-profile-dialog/asset-profile-dialog.component';
 import { AssetProfileDialogParams } from './asset-profile-dialog/interfaces/interfaces';
-import { CreateAssetProfileDialog } from './create-asset-profile-dialog/create-asset-profile-dialog.component';
+import { GfCreateAssetProfileDialogComponent } from './create-asset-profile-dialog/create-asset-profile-dialog.component';
 import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'has-fab' },
+  imports: [
+    CommonModule,
+    GfActivitiesFilterComponent,
+    GfPremiumIndicatorComponent,
+    GfSymbolModule,
+    GfValueComponent,
+    IonIcon,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    NgxSkeletonLoaderModule,
+    RouterModule
+  ],
+  providers: [AdminMarketDataService],
   selector: 'gf-admin-market-data',
   styleUrls: ['./admin-market-data.scss'],
-  templateUrl: './admin-market-data.html',
+  templateUrl: './admin-market-data.html'
-  standalone: false
 })
-export class AdminMarketDataComponent
+export class GfAdminMarketDataComponent
   implements AfterViewInit, OnDestroy, OnInit
 {
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -388,7 +423,7 @@ export class AdminMarketDataComponent
       .subscribe((user) => {
         this.user = user;
 
-        const dialogRef = this.dialog.open(AssetProfileDialog, {
+        const dialogRef = this.dialog.open(GfAssetProfileDialogComponent, {
           autoFocus: false,
           data: {
             dataSource,
@@ -423,14 +458,17 @@ export class AdminMarketDataComponent
       .subscribe((user) => {
         this.user = user;
 
-        const dialogRef = this.dialog.open(CreateAssetProfileDialog, {
+        const dialogRef = this.dialog.open(
-          autoFocus: false,
+          GfCreateAssetProfileDialogComponent,
-          data: {
+          {
-            deviceType: this.deviceType,
+            autoFocus: false,
-            locale: this.user?.settings?.locale
+            data: {
-          } as CreateAssetProfileDialogParams,
+              deviceType: this.deviceType,
-          width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+              locale: this.user?.settings?.locale
-        });
+            } as CreateAssetProfileDialogParams,
+            width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+          }
+        );
 
         dialogRef
           .afterClosed()

apps/client/src/app/components/admin-market-data/admin-market-data.module.ts

@@ -1,46 +0,0 @@
-import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter';
-import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { AdminMarketDataComponent } from './admin-market-data.component';
-import { AdminMarketDataService } from './admin-market-data.service';
-import { GfAssetProfileDialogModule } from './asset-profile-dialog/asset-profile-dialog.module';
-import { GfCreateAssetProfileDialogModule } from './create-asset-profile-dialog/create-asset-profile-dialog.module';
-
-@NgModule({
-  declarations: [AdminMarketDataComponent],
-  imports: [
-    CommonModule,
-    GfActivitiesFilterComponent,
-    GfAssetProfileDialogModule,
-    GfCreateAssetProfileDialogModule,
-    GfPremiumIndicatorComponent,
-    GfSymbolModule,
-    GfValueComponent,
-    IonIcon,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatMenuModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatTableModule,
-    NgxSkeletonLoaderModule,
-    RouterModule
-  ],
-  providers: [AdminMarketDataService],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAdminMarketDataModule {}

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -18,8 +18,17 @@ import {
   ScraperConfiguration,
   User
 } from '@ghostfolio/common/interfaces';
+import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
+import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
+import { GfHistoricalMarketDataEditorComponent } from '@ghostfolio/ui/historical-market-data-editor';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
+import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { TextFieldModule } from '@angular/cdk/text-field';
+import { CommonModule } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
@@ -36,12 +45,27 @@ import {
   AbstractControl,
   FormBuilder,
   FormControl,
+  FormsModule,
+  ReactiveFormsModule,
   ValidationErrors,
   Validators
 } from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
-import { MatSnackBar } from '@angular/material/snack-bar';
+  MatCheckboxChange,
+  MatCheckboxModule
+} from '@angular/material/checkbox';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { IonIcon } from '@ionic/angular/standalone';
 import {
   AssetClass,
   AssetSubClass,
@@ -64,14 +88,36 @@ import {
 } from './interfaces/interfaces';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
+  imports: [
+    CommonModule,
+    FormsModule,
+    GfCurrencySelectorComponent,
+    GfEntityLogoComponent,
+    GfHistoricalMarketDataEditorComponent,
+    GfLineChartComponent,
+    GfPortfolioProportionChartComponent,
+    GfSymbolAutocompleteComponent,
+    GfValueComponent,
+    IonIcon,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatInputModule,
+    MatMenuModule,
+    MatSelectModule,
+    MatSnackBarModule,
+    ReactiveFormsModule,
+    TextFieldModule
+  ],
+  providers: [AdminMarketDataService],
   selector: 'gf-asset-profile-dialog',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: 'asset-profile-dialog.html',
   styleUrls: ['./asset-profile-dialog.component.scss'],
-  standalone: false
+  templateUrl: 'asset-profile-dialog.html'
 })
-export class AssetProfileDialog implements OnDestroy, OnInit {
+export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   private static readonly HISTORICAL_DATA_TEMPLATE = `date;marketPrice\n${format(
     new Date(),
     DATE_FORMAT
@@ -175,7 +221,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: AssetProfileDialogParams,
     private dataService: DataService,
-    public dialogRef: MatDialogRef<AssetProfileDialog>,
+    public dialogRef: MatDialogRef<GfAssetProfileDialogComponent>,
     private formBuilder: FormBuilder,
     private notificationService: NotificationService,
     private snackBar: MatSnackBar,
@@ -302,7 +348,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
           ),
           currency: this.assetProfile?.currency,
           historicalData: {
-            csvString: AssetProfileDialog.HISTORICAL_DATA_TEMPLATE
+            csvString: GfAssetProfileDialogComponent.HISTORICAL_DATA_TEMPLATE
           },
           isActive: this.assetProfile?.isActive,
           name: this.assetProfile.name ?? this.assetProfile.symbol,

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts

@@ -1,53 +0,0 @@
-import { AdminMarketDataService } from '@ghostfolio/client/components/admin-market-data/admin-market-data.service';
-import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
-import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
-import { GfHistoricalMarketDataEditorComponent } from '@ghostfolio/ui/historical-market-data-editor';
-import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
-import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
-import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete';
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { TextFieldModule } from '@angular/cdk/text-field';
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { AssetProfileDialog } from './asset-profile-dialog.component';
-
-@NgModule({
-  declarations: [AssetProfileDialog],
-  imports: [
-    CommonModule,
-    FormsModule,
-    GfCurrencySelectorComponent,
-    GfEntityLogoComponent,
-    GfHistoricalMarketDataEditorComponent,
-    GfLineChartComponent,
-    GfPortfolioProportionChartComponent,
-    GfSymbolAutocompleteComponent,
-    GfValueComponent,
-    IonIcon,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    MatExpansionModule,
-    MatInputModule,
-    MatMenuModule,
-    MatSelectModule,
-    MatSnackBarModule,
-    ReactiveFormsModule,
-    TextFieldModule
-  ],
-  providers: [AdminMarketDataService],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAssetProfileDialogModule {}

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts

@@ -4,6 +4,7 @@ import {
   ghostfolioPrefix,
   PROPERTY_CURRENCIES
 } from '@ghostfolio/common/config';
+import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete';
 
 import {
   ChangeDetectionStrategy,
@@ -17,11 +18,17 @@ import {
   FormBuilder,
   FormControl,
   FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
   ValidationErrors,
   ValidatorFn,
   Validators
 } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
 import { isISO4217CurrencyCode } from 'class-validator';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -30,12 +37,21 @@ import { CreateAssetProfileDialogMode } from './interfaces/interfaces';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
+  imports: [
+    FormsModule,
+    GfSymbolAutocompleteComponent,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    ReactiveFormsModule
+  ],
   selector: 'gf-create-asset-profile-dialog',
   styleUrls: ['./create-asset-profile-dialog.component.scss'],
-  templateUrl: 'create-asset-profile-dialog.html',
+  templateUrl: 'create-asset-profile-dialog.html'
-  standalone: false
 })
-export class CreateAssetProfileDialog implements OnInit, OnDestroy {
+export class GfCreateAssetProfileDialogComponent implements OnInit, OnDestroy {
   public createAssetProfileForm: FormGroup;
   public mode: CreateAssetProfileDialogMode;
 
@@ -46,7 +62,7 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
     public readonly adminService: AdminService,
     private readonly changeDetectorRef: ChangeDetectorRef,
     private readonly dataService: DataService,
-    public readonly dialogRef: MatDialogRef<CreateAssetProfileDialog>,
+    public readonly dialogRef: MatDialogRef<GfCreateAssetProfileDialogComponent>,
     public readonly formBuilder: FormBuilder
   ) {}
 

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.module.ts

@@ -1,29 +0,0 @@
-import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatRadioModule } from '@angular/material/radio';
-
-import { CreateAssetProfileDialog } from './create-asset-profile-dialog.component';
-
-@NgModule({
-  declarations: [CreateAssetProfileDialog],
-  imports: [
-    CommonModule,
-    FormsModule,
-    GfSymbolAutocompleteComponent,
-    MatDialogModule,
-    MatButtonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatRadioModule,
-    ReactiveFormsModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfCreateAssetProfileDialogModule {}

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -20,10 +20,22 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { CommonModule } from '@angular/common';
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import {
+  MatSlideToggleChange,
+  MatSlideToggleModule
+} from '@angular/material/slide-toggle';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import {
   addMilliseconds,
   differenceInSeconds,
@@ -43,12 +55,25 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  imports: [
+    CommonModule,
+    FormsModule,
+    GfValueComponent,
+    IonIcon,
+    MatButtonModule,
+    MatCardModule,
+    MatMenuModule,
+    MatSelectModule,
+    MatSnackBarModule,
+    MatSlideToggleModule,
+    ReactiveFormsModule,
+    RouterModule
+  ],
   selector: 'gf-admin-overview',
   styleUrls: ['./admin-overview.scss'],
-  templateUrl: './admin-overview.html',
+  templateUrl: './admin-overview.html'
-  standalone: false
 })
-export class AdminOverviewComponent implements OnDestroy, OnInit {
+export class GfAdminOverviewComponent implements OnDestroy, OnInit {
   public couponDuration: StringValue = '14 days';
   public coupons: Coupon[];
   public hasPermissionForSubscription: boolean;

apps/client/src/app/components/admin-overview/admin-overview.module.ts

@@ -1,38 +0,0 @@
-import { CacheService } from '@ghostfolio/client/services/cache.service';
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { AdminOverviewComponent } from './admin-overview.component';
-
-@NgModule({
-  declarations: [AdminOverviewComponent],
-  exports: [],
-  imports: [
-    CommonModule,
-    FormsModule,
-    GfValueComponent,
-    IonIcon,
-    MatButtonModule,
-    MatCardModule,
-    MatMenuModule,
-    MatSelectModule,
-    MatSnackBarModule,
-    MatSlideToggleModule,
-    ReactiveFormsModule,
-    RouterModule
-  ],
-  providers: [CacheService],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAdminOverviewModule {}

apps/client/src/app/components/admin-platform/admin-platform.component.ts

@@ -5,6 +5,7 @@ import { NotificationService } from '@ghostfolio/client/core/notification/notifi
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
 
 import {
   ChangeDetectionStrategy,
@@ -14,10 +15,13 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatSort } from '@angular/material/sort';
+import { MatMenuModule } from '@angular/material/menu';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatSort, MatSortModule } from '@angular/material/sort';
-import { ActivatedRoute, Router } from '@angular/router';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { Platform } from '@prisma/client';
 import { addIcons } from 'ionicons';
 import {
@@ -29,16 +33,24 @@ import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
-import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog/create-or-update-platform-dialog.component';
+import { GfCreateOrUpdatePlatformDialogComponent } from './create-or-update-platform-dialog/create-or-update-platform-dialog.component';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    GfEntityLogoComponent,
+    IonIcon,
+    MatButtonModule,
+    MatMenuModule,
+    MatSortModule,
+    MatTableModule,
+    RouterModule
+  ],
   selector: 'gf-admin-platform',
   styleUrls: ['./admin-platform.component.scss'],
-  templateUrl: './admin-platform.component.html',
+  templateUrl: './admin-platform.component.html'
-  standalone: false
 })
-export class AdminPlatformComponent implements OnInit, OnDestroy {
+export class GfAdminPlatformComponent implements OnInit, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource = new MatTableDataSource<Platform>();
@@ -141,16 +153,19 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
   }
 
   private openCreatePlatformDialog() {
-    const dialogRef = this.dialog.open(CreateOrUpdatePlatformDialog, {
+    const dialogRef = this.dialog.open(
-      data: {
+      GfCreateOrUpdatePlatformDialogComponent,
-        platform: {
+      {
-          name: null,
+        data: {
-          url: null
+          platform: {
-        }
+            name: null,
-      },
+            url: null
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
+          }
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+        },
-    });
+        height: this.deviceType === 'mobile' ? '98vh' : undefined,
+        width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      }
+    );
 
     dialogRef
       .afterClosed()
@@ -177,17 +192,20 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
   }
 
   private openUpdatePlatformDialog({ id, name, url }) {
-    const dialogRef = this.dialog.open(CreateOrUpdatePlatformDialog, {
+    const dialogRef = this.dialog.open(
-      data: {
+      GfCreateOrUpdatePlatformDialogComponent,
-        platform: {
+      {
-          id,
+        data: {
-          name,
+          platform: {
-          url
+            id,
-        }
+            name,
-      },
+            url
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
+          }
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+        },
-    });
+        height: this.deviceType === 'mobile' ? '98vh' : undefined,
+        width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      }
+    );
 
     dialogRef
       .afterClosed()

apps/client/src/app/components/admin-platform/admin-platform.module.ts

@@ -1,31 +0,0 @@
-import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { AdminPlatformComponent } from './admin-platform.component';
-import { GfCreateOrUpdatePlatformDialogModule } from './create-or-update-platform-dialog/create-or-update-platform-dialog.module';
-
-@NgModule({
-  declarations: [AdminPlatformComponent],
-  exports: [AdminPlatformComponent],
-  imports: [
-    CommonModule,
-    GfCreateOrUpdatePlatformDialogModule,
-    GfEntityLogoComponent,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    MatSortModule,
-    MatTableModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAdminPlatformModule {}

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.component.ts

@@ -1,6 +1,7 @@
 import { CreatePlatformDto } from '@ghostfolio/api/app/platform/create-platform.dto';
 import { UpdatePlatformDto } from '@ghostfolio/api/app/platform/update-platform.dto';
 import { validateObjectForForm } from '@ghostfolio/client/util/form.util';
+import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
 
 import {
   ChangeDetectionStrategy,
@@ -8,8 +9,21 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { Subject } from 'rxjs';
 
 import { CreateOrUpdatePlatformDialogParams } from './interfaces/interfaces';
@@ -17,19 +31,27 @@ import { CreateOrUpdatePlatformDialogParams } from './interfaces/interfaces';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
+  imports: [
+    FormsModule,
+    GfEntityLogoComponent,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
   selector: 'gf-create-or-update-platform-dialog',
   styleUrls: ['./create-or-update-platform-dialog.scss'],
-  templateUrl: 'create-or-update-platform-dialog.html',
+  templateUrl: 'create-or-update-platform-dialog.html'
-  standalone: false
 })
-export class CreateOrUpdatePlatformDialog implements OnDestroy {
+export class GfCreateOrUpdatePlatformDialogComponent implements OnDestroy {
   public platformForm: FormGroup;
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdatePlatformDialogParams,
-    public dialogRef: MatDialogRef<CreateOrUpdatePlatformDialog>,
+    public dialogRef: MatDialogRef<GfCreateOrUpdatePlatformDialogComponent>,
     private formBuilder: FormBuilder
   ) {
     this.platformForm = this.formBuilder.group({

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.module.ts

@@ -1,26 +0,0 @@
-import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-
-import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog.component';
-
-@NgModule({
-  declarations: [CreateOrUpdatePlatformDialog],
-  imports: [
-    CommonModule,
-    FormsModule,
-    GfEntityLogoComponent,
-    MatButtonModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule
-  ]
-})
-export class GfCreateOrUpdatePlatformDialogModule {}

apps/client/src/app/components/admin-settings/admin-settings.component.ts

@@ -1,3 +1,6 @@
+import { GfAdminPlatformComponent } from '@ghostfolio/client/components/admin-platform/admin-platform.component';
+import { GfAdminTagComponent } from '@ghostfolio/client/components/admin-tag/admin-tag.component';
+import { GfDataProviderStatusComponent } from '@ghostfolio/client/components/data-provider-status/data-provider-status.component';
 import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type';
 import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
@@ -11,7 +14,11 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
+import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -19,19 +26,42 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    GfAdminPlatformComponent,
+    GfAdminTagComponent,
+    GfDataProviderStatusComponent,
+    GfEntityLogoComponent,
+    GfPremiumIndicatorComponent,
+    GfValueComponent,
+    IonIcon,
+    MatButtonModule,
+    MatCardModule,
+    MatMenuModule,
+    MatProgressBarModule,
+    MatTableModule,
+    NgxSkeletonLoaderModule,
+    RouterModule
+  ],
   selector: 'gf-admin-settings',
   styleUrls: ['./admin-settings.component.scss'],
-  templateUrl: './admin-settings.component.html',
+  templateUrl: './admin-settings.component.html'
-  standalone: false
 })
-export class AdminSettingsComponent implements OnDestroy, OnInit {
+export class GfAdminSettingsComponent implements OnDestroy, OnInit {
   public dataSource = new MatTableDataSource<DataProviderInfo>();
   public defaultDateFormat: string;
   public displayedColumns = [

apps/client/src/app/components/admin-settings/admin-settings.module.ts

@@ -1,42 +0,0 @@
-import { GfAdminPlatformModule } from '@ghostfolio/client/components/admin-platform/admin-platform.module';
-import { GfAdminTagModule } from '@ghostfolio/client/components/admin-tag/admin-tag.module';
-import { GfDataProviderStatusComponent } from '@ghostfolio/client/components/data-provider-status/data-provider-status.component';
-import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
-import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatTableModule } from '@angular/material/table';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { AdminSettingsComponent } from './admin-settings.component';
-
-@NgModule({
-  declarations: [AdminSettingsComponent],
-  imports: [
-    CommonModule,
-    GfAdminPlatformModule,
-    GfAdminTagModule,
-    GfDataProviderStatusComponent,
-    GfEntityLogoComponent,
-    GfPremiumIndicatorComponent,
-    GfValueComponent,
-    IonIcon,
-    MatButtonModule,
-    MatCardModule,
-    MatMenuModule,
-    MatProgressBarModule,
-    MatTableModule,
-    NgxSkeletonLoaderModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAdminSettingsModule {}

apps/client/src/app/components/admin-tag/admin-tag.component.ts

@@ -13,10 +13,13 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatSort } from '@angular/material/sort';
+import { MatMenuModule } from '@angular/material/menu';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatSort, MatSortModule } from '@angular/material/sort';
-import { ActivatedRoute, Router } from '@angular/router';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { Tag } from '@prisma/client';
 import { addIcons } from 'ionicons';
 import {
@@ -28,16 +31,23 @@ import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
-import { CreateOrUpdateTagDialog } from './create-or-update-tag-dialog/create-or-update-tag-dialog.component';
+import { GfCreateOrUpdateTagDialogComponent } from './create-or-update-tag-dialog/create-or-update-tag-dialog.component';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    IonIcon,
+    MatButtonModule,
+    MatMenuModule,
+    MatSortModule,
+    MatTableModule,
+    RouterModule
+  ],
   selector: 'gf-admin-tag',
   styleUrls: ['./admin-tag.component.scss'],
-  templateUrl: './admin-tag.component.html',
+  templateUrl: './admin-tag.component.html'
-  standalone: false
 })
-export class AdminTagComponent implements OnInit, OnDestroy {
+export class GfAdminTagComponent implements OnInit, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource = new MatTableDataSource<Tag>();
@@ -139,7 +149,7 @@ export class AdminTagComponent implements OnInit, OnDestroy {
   }
 
   private openCreateTagDialog() {
-    const dialogRef = this.dialog.open(CreateOrUpdateTagDialog, {
+    const dialogRef = this.dialog.open(GfCreateOrUpdateTagDialogComponent, {
       data: {
         tag: {
           name: null
@@ -174,7 +184,7 @@ export class AdminTagComponent implements OnInit, OnDestroy {
   }
 
   private openUpdateTagDialog({ id, name }) {
-    const dialogRef = this.dialog.open(CreateOrUpdateTagDialog, {
+    const dialogRef = this.dialog.open(GfCreateOrUpdateTagDialogComponent, {
       data: {
         tag: {
           id,

apps/client/src/app/components/admin-tag/admin-tag.module.ts

@@ -1,28 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { AdminTagComponent } from './admin-tag.component';
-import { GfCreateOrUpdateTagDialogModule } from './create-or-update-tag-dialog/create-or-update-tag-dialog.module';
-
-@NgModule({
-  declarations: [AdminTagComponent],
-  exports: [AdminTagComponent],
-  imports: [
-    CommonModule,
-    GfCreateOrUpdateTagDialogModule,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    MatSortModule,
-    MatTableModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAdminTagModule {}

apps/client/src/app/components/admin-tag/create-or-update-tag-dialog/create-or-update-tag-dialog.component.ts

@@ -8,8 +8,20 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import {
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { Subject } from 'rxjs';
 
 import { CreateOrUpdateTagDialogParams } from './interfaces/interfaces';
@@ -17,19 +29,26 @@ import { CreateOrUpdateTagDialogParams } from './interfaces/interfaces';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
   selector: 'gf-create-or-update-tag-dialog',
   styleUrls: ['./create-or-update-tag-dialog.scss'],
-  templateUrl: 'create-or-update-tag-dialog.html',
+  templateUrl: 'create-or-update-tag-dialog.html'
-  standalone: false
 })
-export class CreateOrUpdateTagDialog implements OnDestroy {
+export class GfCreateOrUpdateTagDialogComponent implements OnDestroy {
   public tagForm: FormGroup;
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTagDialogParams,
-    public dialogRef: MatDialogRef<CreateOrUpdateTagDialog>,
+    public dialogRef: MatDialogRef<GfCreateOrUpdateTagDialogComponent>,
     private formBuilder: FormBuilder
   ) {
     this.tagForm = this.formBuilder.group({

apps/client/src/app/components/admin-tag/create-or-update-tag-dialog/create-or-update-tag-dialog.module.ts

@@ -1,23 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-
-import { CreateOrUpdateTagDialog } from './create-or-update-tag-dialog.component';
-
-@NgModule({
-  declarations: [CreateOrUpdateTagDialog],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule
-  ]
-})
-export class GfCreateOrUpdateTagDialogModule {}

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -7,7 +7,10 @@ import {
 } from '@ghostfolio/common/helper';
 import { AdminUsers, InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -15,8 +18,15 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatButtonModule } from '@angular/material/button';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatMenuModule } from '@angular/material/menu';
+import {
+  MatPaginator,
+  MatPaginatorModule,
+  PageEvent
+} from '@angular/material/paginator';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { IonIcon } from '@ionic/angular/standalone';
 import {
   differenceInSeconds,
   formatDistanceToNowStrict,
@@ -29,6 +39,7 @@ import {
   keyOutline,
   trashOutline
 } from 'ionicons/icons';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -40,12 +51,22 @@ import { ImpersonationStorageService } from '../../services/impersonation-storag
 import { UserService } from '../../services/user/user.service';
 
 @Component({
+  imports: [
+    CommonModule,
+    GfPremiumIndicatorComponent,
+    GfValueComponent,
+    IonIcon,
+    MatButtonModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatTableModule,
+    NgxSkeletonLoaderModule
+  ],
   selector: 'gf-admin-users',
-  standalone: false,
   styleUrls: ['./admin-users.scss'],
   templateUrl: './admin-users.html'
 })
-export class AdminUsersComponent implements OnDestroy, OnInit {
+export class GfAdminUsersComponent implements OnDestroy, OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
   public dataSource = new MatTableDataSource<AdminUsers['users'][0]>();

apps/client/src/app/components/admin-users/admin-users.module.ts

@@ -1,31 +0,0 @@
-import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatTableModule } from '@angular/material/table';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { AdminUsersComponent } from './admin-users.component';
-
-@NgModule({
-  declarations: [AdminUsersComponent],
-  exports: [],
-  imports: [
-    CommonModule,
-    GfPremiumIndicatorComponent,
-    GfValueComponent,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    MatPaginatorModule,
-    MatTableModule,
-    NgxSkeletonLoaderModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAdminUsersModule {}

apps/client/src/app/pages/admin/admin-page-routing.module.ts

@@ -1,53 +0,0 @@
-import { AdminJobsComponent } from '@ghostfolio/client/components/admin-jobs/admin-jobs.component';
-import { AdminMarketDataComponent } from '@ghostfolio/client/components/admin-market-data/admin-market-data.component';
-import { AdminOverviewComponent } from '@ghostfolio/client/components/admin-overview/admin-overview.component';
-import { AdminSettingsComponent } from '@ghostfolio/client/components/admin-settings/admin-settings.component';
-import { AdminUsersComponent } from '@ghostfolio/client/components/admin-users/admin-users.component';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-import { internalRoutes } from '@ghostfolio/common/routes/routes';
-
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { AdminPageComponent } from './admin-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    children: [
-      {
-        path: '',
-        component: AdminOverviewComponent,
-        title: internalRoutes.adminControl.title
-      },
-      {
-        path: internalRoutes.adminControl.subRoutes.jobs.path,
-        component: AdminJobsComponent,
-        title: internalRoutes.adminControl.subRoutes.jobs.title
-      },
-      {
-        path: internalRoutes.adminControl.subRoutes.marketData.path,
-        component: AdminMarketDataComponent,
-        title: internalRoutes.adminControl.subRoutes.marketData.title
-      },
-      {
-        path: internalRoutes.adminControl.subRoutes.settings.path,
-        component: AdminSettingsComponent,
-        title: internalRoutes.adminControl.subRoutes.settings.title
-      },
-      {
-        path: internalRoutes.adminControl.subRoutes.users.path,
-        component: AdminUsersComponent,
-        title: internalRoutes.adminControl.subRoutes.users.title
-      }
-    ],
-    component: AdminPageComponent,
-    path: ''
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class AdminPageRoutingModule {}

apps/client/src/app/pages/admin/admin-page.component.ts

@@ -2,6 +2,9 @@ import { TabConfiguration } from '@ghostfolio/common/interfaces';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
   flashOutline,
@@ -15,10 +18,10 @@ import { Subject } from 'rxjs';
 
 @Component({
   host: { class: 'page has-tabs' },
+  imports: [IonIcon, MatTabsModule, RouterModule],
   selector: 'gf-admin-page',
   styleUrls: ['./admin-page.scss'],
-  templateUrl: './admin-page.html',
+  templateUrl: './admin-page.html'
-  standalone: false
 })
 export class AdminPageComponent implements OnDestroy, OnInit {
   public deviceType: string;

apps/client/src/app/pages/admin/admin-page.module.ts

@@ -1,33 +0,0 @@
-import { GfAdminJobsModule } from '@ghostfolio/client/components/admin-jobs/admin-jobs.module';
-import { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.module';
-import { GfAdminOverviewModule } from '@ghostfolio/client/components/admin-overview/admin-overview.module';
-import { GfAdminSettingsModule } from '@ghostfolio/client/components/admin-settings/admin-settings.module';
-import { GfAdminUsersModule } from '@ghostfolio/client/components/admin-users/admin-users.module';
-import { CacheService } from '@ghostfolio/client/services/cache.service';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatTabsModule } from '@angular/material/tabs';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { AdminPageRoutingModule } from './admin-page-routing.module';
-import { AdminPageComponent } from './admin-page.component';
-
-@NgModule({
-  declarations: [AdminPageComponent],
-  exports: [],
-  imports: [
-    AdminPageRoutingModule,
-    CommonModule,
-    GfAdminJobsModule,
-    GfAdminMarketDataModule,
-    GfAdminOverviewModule,
-    GfAdminSettingsModule,
-    GfAdminUsersModule,
-    IonIcon,
-    MatTabsModule
-  ],
-  providers: [CacheService],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AdminPageModule {}

apps/client/src/app/pages/admin/admin-page.routes.ts

@@ -0,0 +1,46 @@
+import { GfAdminJobsComponent } from '@ghostfolio/client/components/admin-jobs/admin-jobs.component';
+import { GfAdminMarketDataComponent } from '@ghostfolio/client/components/admin-market-data/admin-market-data.component';
+import { GfAdminOverviewComponent } from '@ghostfolio/client/components/admin-overview/admin-overview.component';
+import { GfAdminSettingsComponent } from '@ghostfolio/client/components/admin-settings/admin-settings.component';
+import { GfAdminUsersComponent } from '@ghostfolio/client/components/admin-users/admin-users.component';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+import { internalRoutes } from '@ghostfolio/common/routes/routes';
+
+import { Routes } from '@angular/router';
+
+import { AdminPageComponent } from './admin-page.component';
+
+export const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        component: GfAdminOverviewComponent,
+        title: internalRoutes.adminControl.title
+      },
+      {
+        path: internalRoutes.adminControl.subRoutes.jobs.path,
+        component: GfAdminJobsComponent,
+        title: internalRoutes.adminControl.subRoutes.jobs.title
+      },
+      {
+        path: internalRoutes.adminControl.subRoutes.marketData.path,
+        component: GfAdminMarketDataComponent,
+        title: internalRoutes.adminControl.subRoutes.marketData.title
+      },
+      {
+        path: internalRoutes.adminControl.subRoutes.settings.path,
+        component: GfAdminSettingsComponent,
+        title: internalRoutes.adminControl.subRoutes.settings.title
+      },
+      {
+        path: internalRoutes.adminControl.subRoutes.users.path,
+        component: GfAdminUsersComponent,
+        title: internalRoutes.adminControl.subRoutes.users.title
+      }
+    ],
+    component: AdminPageComponent,
+    path: ''
+  }
+];