Feature/link to holdings tab in holdings table on overview tab of home page (#8266)

* Add link to holdings tab

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a link to the holdings tab in the holdings table on the overview tab of the home page (experimental)
+
 ### Changed
 
 - Improved the style of the close button in the dialog footer component

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

@@ -36,6 +36,9 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowForwardOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
@@ -44,6 +47,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
     GfHoldingsTableComponent,
     GfLineChartComponent,
     GfPortfolioPerformanceComponent,
+    IonIcon,
     MatButtonModule,
     MatCardModule,
     RouterModule
@@ -71,9 +75,15 @@ export class GfHomeOverviewComponent implements OnInit {
   protected readonly user = signal<User | null>(null);
 
   protected readonly routerLinkAccounts = internalRoutes.accounts.routerLink;
+
+  protected readonly routerLinkHomeHoldings =
+    internalRoutes.home.subRoutes.holdings.routerLink;
+
   protected readonly routerLinkPortfolio = internalRoutes.portfolio.routerLink;
+
   protected readonly routerLinkPortfolioActivities =
     internalRoutes.portfolio.subRoutes.activities.routerLink;
+
   protected readonly routerLinkPortfolioActivitiesCreate =
     internalRoutes.portfolio.subRoutes.activities.subRoutes.create.routerLink;
 
@@ -134,6 +144,8 @@ export class GfHomeOverviewComponent implements OnInit {
           this.update();
         }
       });
+
+    addIcons({ arrowForwardOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/home-overview/home-overview.html

@@ -101,8 +101,20 @@
             appearance="outlined"
             class="h-100 holdings position-absolute w-100"
           >
-            <mat-card-header>
+            <mat-card-header class="align-items-center">
               <mat-card-title i18n>Holdings</mat-card-title>
+              <a
+                class="ms-auto"
+                i18n-title
+                mat-icon-button
+                title="View Details"
+                [routerLink]="routerLinkHomeHoldings"
+              >
+                <ion-icon
+                  class="d-block text-body-secondary"
+                  name="arrow-forward-outline"
+                />
+              </a>
             </mat-card-header>
             <mat-card-content class="overflow-auto">
               <gf-holdings-table

apps/client/src/app/components/home-overview/home-overview.scss

@@ -34,6 +34,19 @@
     &.holdings {
       --mat-card-title-text-size: var(--mat-sys-title-medium-size);
 
+      mat-card-header {
+        a[mat-icon-button] {
+          --mat-icon-button-icon-size: 1rem;
+
+          margin-right: -0.125rem;
+          margin-top: -0.5rem;
+        }
+
+        mat-card-title {
+          padding-left: 0.1875rem;
+        }
+      }
+
       mat-card-content {
         scrollbar-width: none;