Add holdings

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

@@ -33,6 +33,7 @@ import {
 } from '@angular/core';
 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 { DeviceDetectorService } from 'ngx-device-detector';
 
@@ -43,6 +44,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
     GfLineChartComponent,
     GfPortfolioPerformanceComponent,
     MatButtonModule,
+    MatCardModule,
     RouterModule
   ],
   selector: 'gf-home-overview',
@@ -152,6 +154,7 @@ export class GfHomeOverviewComponent implements OnInit {
 
       this.dataService
         .fetchPortfolioHoldings({
+          filters: [{ id: 'ACTIVE', type: 'HOLDING_TYPE' }],
           range: this.user()?.settings?.dateRange
         })
         .pipe(takeUntilDestroyed(this.destroyRef))

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

@@ -1,5 +1,5 @@
 <div
-  class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
+  class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative px-lg-3"
 >
   @if (
     !hasImpersonationId() &&
@@ -61,8 +61,8 @@
       </div>
     </div>
   } @else {
-    <div class="align-items-center row w-100">
+    <div class="align-items-stretch flex-nowrap row w-100">
-      <div class="col-12 p-0" [class.col-lg-9]="showExperimentalHoldings()">
+      <div class="col-12 col-lg p-0">
         <div class="chart-container mx-auto position-relative">
           <gf-line-chart
             class="position-absolute"
@@ -96,13 +96,23 @@
         </div>
       </div>
       @if (showExperimentalHoldings()) {
-        <div class="col-lg-3 d-none d-lg-block holdings-table-container p-0">
+        <div class="col-lg-4 d-none d-lg-block ml-3 p-0 position-relative">
-          <gf-holdings-table
+          <mat-card
-            mode="simple"
+            appearance="outlined"
-            [holdings]="holdings()"
+            class="h-100 holdings position-absolute w-100"
-            [locale]="user()?.settings?.locale ?? DEFAULT_LOCALE"
+          >
-            (holdingClicked)="onHoldingClicked($event)"
+            <mat-card-header>
-          />
+              <mat-card-title i18n>Holdings</mat-card-title>
+            </mat-card-header>
+            <mat-card-content class="overflow-auto">
+              <gf-holdings-table
+                mode="simple"
+                [holdings]="holdings()"
+                [locale]="user()?.settings?.locale ?? DEFAULT_LOCALE"
+                (holdingClicked)="onHoldingClicked($event)"
+              />
+            </mat-card-content>
+          </mat-card>
         </div>
       }
     </div>

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

@@ -30,9 +30,20 @@
     }
   }
 
-  .holdings-table-container {
+  mat-card {
-    max-height: 50vh;
+    &.holdings {
-    overflow-y: auto;
+      mat-card-content {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      mat-card-title {
+        font-size: 1rem;
+      }
+    }
   }
 
   .introduction {