Add holdings

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

@@ -5,17 +5,20 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   DEFAULT_CURRENCY,
   DEFAULT_DATE_RANGE,
+  DEFAULT_LOCALE,
   NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
 } from '@ghostfolio/common/config';
 import {
   AssetProfileIdentifier,
   LineChartItem,
   PortfolioPerformance,
+  PortfolioPosition,
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { hasScope, scopes } from '@ghostfolio/common/scopes';
+import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 import { DataService } from '@ghostfolio/ui/services';
 
@@ -36,6 +39,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    GfHoldingsTableComponent,
     GfLineChartComponent,
     GfPortfolioPerformanceComponent,
     MatButtonModule,
@@ -46,9 +50,13 @@ import { DeviceDetectorService } from 'ngx-device-detector';
   templateUrl: './home-overview.html'
 })
 export class GfHomeOverviewComponent implements OnInit {
+  protected readonly DEFAULT_LOCALE = DEFAULT_LOCALE;
   protected readonly errors = signal<AssetProfileIdentifier[]>([]);
   protected readonly hasImpersonationId = signal(false);
   protected readonly historicalDataItems = signal<LineChartItem[] | null>(null);
+  protected readonly holdings = signal<PortfolioPosition[] | undefined>(
+    undefined
+  );
   protected readonly isLoadingPerformance = signal(true);
   protected readonly performance = signal<PortfolioPerformance | null>(null);
   protected readonly performanceLabel = $localize`Performance`;
@@ -81,6 +89,10 @@ export class GfHomeOverviewComponent implements OnInit {
       : false;
   });
 
+  protected readonly showExperimentalHoldings = computed(() => {
+    return this.user()?.settings?.isExperimentalFeatures === true;
+  });
+
   protected readonly unit = computed(() => {
     return this.showDetails()
       ? (this.user()?.settings?.baseCurrency ?? DEFAULT_CURRENCY)
@@ -126,6 +138,19 @@ export class GfHomeOverviewComponent implements OnInit {
     this.historicalDataItems.set(null);
     this.isLoadingPerformance.set(true);
 
+    if (this.showExperimentalHoldings()) {
+      this.holdings.set(undefined);
+
+      this.dataService
+        .fetchPortfolioHoldings({
+          range: this.user()?.settings?.dateRange
+        })
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe(({ holdings }) => {
+          this.holdings.set(holdings);
+        });
+    }
+
     this.dataService
       .fetchPortfolioPerformance({
         range: this.user()?.settings?.dateRange ?? DEFAULT_DATE_RANGE

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

@@ -61,8 +61,8 @@
       </div>
     </div>
   } @else {
-    <div class="row w-100">
+    <div class="align-items-center row w-100">
-      <div class="col p-0">
+      <div class="col-12 p-0" [class.col-lg-9]="showExperimentalHoldings()">
         <div class="chart-container mx-auto position-relative">
           <gf-line-chart
             class="position-absolute"
@@ -80,21 +80,31 @@
             [showYAxis]="false"
           />
         </div>
+        <div class="overview-container row mt-1">
+          <div class="col">
+            <gf-portfolio-performance
+              class="pb-4"
+              [errors]="errors()"
+              [isLoading]="isLoadingPerformance()"
+              [locale]="user()?.settings?.locale"
+              [performance]="performance()"
+              [precision]="precision()"
+              [showDetails]="showDetails()"
+              [unit]="unit()"
+            />
+          </div>
+        </div>
       </div>
-    </div>
+      @if (showExperimentalHoldings()) {
-    <div class="overview-container row mt-1">
+        <div class="col-lg-3 d-none d-lg-block">
-      <div class="col">
+          <gf-holdings-table
-        <gf-portfolio-performance
+            mode="simple"
-          class="pb-4"
+            [hasPermissionToOpenDetails]="false"
-          [errors]="errors()"
+            [holdings]="holdings()"
-          [isLoading]="isLoadingPerformance()"
+            [locale]="user()?.settings?.locale ?? DEFAULT_LOCALE"
-          [locale]="user()?.settings?.locale"
+          />
-          [performance]="performance()"
+        </div>
-          [precision]="precision()"
+      }
-          [showDetails]="showDetails()"
-          [unit]="unit()"
-        />
-      </div>
     </div>
   }
 </div>