From 7ca9e33f3a073926af8257bc93e5bf14f7818296 Mon Sep 17 00:00:00 2001
From: csehatt741 <att741@gmail.com>
Date: Sun, 29 Jun 2025 09:22:01 +0200
Subject: [PATCH] holdig detail dialog Overview tab created

---
 .../holding-detail-dialog.html                | 563 +++++++++---------
 1 file changed, 291 insertions(+), 272 deletions(-)

diff --git a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
index 0f6c46a80..74cc4ddf4 100644
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
@@ -35,284 +35,303 @@
       [symbol]="data.symbol"
     />
 
-    <div class="row">
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [colorizeSign]="true"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [precision]="netPerformanceWithCurrencyEffectPrecision"
-          [unit]="data.baseCurrency"
-          [value]="netPerformanceWithCurrencyEffect"
-        >
-          @if (
-            SymbolProfile?.currency &&
-            data.baseCurrency !== SymbolProfile?.currency
-          ) {
-            Change with currency effect
-          } @else {
-            Change
-          }
-        </gf-value>
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [colorizeSign]="true"
-          [isPercent]="true"
-          [locale]="data.locale"
-          [value]="netPerformancePercentWithCurrencyEffect"
-        >
-          @if (
-            SymbolProfile?.currency &&
-            data.baseCurrency !== SymbolProfile?.currency
-          ) {
-            Performance with currency effect
-          } @else {
-            Performance
-          }
-        </gf-value>
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [unit]="SymbolProfile?.currency"
-          [value]="averagePrice"
-          >Average Unit Price</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [unit]="SymbolProfile?.currency"
-          [value]="marketPrice"
-          >Market Price</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [ngClass]="{
-            'text-danger':
-              marketPriceMin?.toFixed(2) === marketPrice?.toFixed(2) &&
-              marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
-          }"
-          [unit]="SymbolProfile?.currency"
-          [value]="marketPriceMin"
-          >Minimum Price</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [ngClass]="{
-            'text-success':
-              marketPriceMax?.toFixed(2) === marketPrice?.toFixed(2) &&
-              marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
-          }"
-          [unit]="SymbolProfile?.currency"
-          [value]="marketPriceMax"
-          >Maximum Price</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [locale]="data.locale"
-          [precision]="quantityPrecision"
-          [value]="quantity"
-          >Quantity</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [precision]="investmentInBaseCurrencyWithCurrencyEffectPrecision"
-          [unit]="data.baseCurrency"
-          [value]="investmentInBaseCurrencyWithCurrencyEffect"
-          >Investment</gf-value
-        >
-      </div>
-      @if (dividendInBaseCurrency && user?.settings?.isExperimentalFeatures) {
-        <div class="col-6 mb-3">
-          <gf-value
-            i18n
-            size="medium"
-            [isCurrency]="true"
-            [locale]="data.locale"
-            [precision]="dividendInBaseCurrencyPrecision"
-            [unit]="data.baseCurrency"
-            [value]="dividendInBaseCurrency"
-            >Dividend</gf-value
-          >
-        </div>
-        <div class="col-6 mb-3">
-          <gf-value
-            i18n
-            size="medium"
-            [isPercent]="true"
-            [locale]="data.locale"
-            [value]="dividendYieldPercentWithCurrencyEffect"
-            >Dividend Yield</gf-value
-          >
-        </div>
-      }
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [unit]="data.baseCurrency"
-          [value]="feeInBaseCurrency"
-          >Fees</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isDate]="true"
-          [locale]="data.locale"
-          [value]="firstBuyDate"
-          >First Activity</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          size="medium"
-          [locale]="data.locale"
-          [value]="transactionCount"
-        >
-          @if (transactionCount === 1) {
-            <ng-container i18n>Activity</ng-container>
-          } @else {
-            <ng-container i18n>Activities</ng-container>
-          }
-        </gf-value>
-      </div>
-      <div class="col-6 mb-3"></div>
-      <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [hidden]="!assetClass" [value]="assetClass"
-          >Asset Class</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [hidden]="!assetSubClass"
-          [value]="assetSubClass"
-          >Asset Sub Class</gf-value
-        >
-      </div>
-      @if (
-        SymbolProfile?.countries?.length > 0 ||
-        SymbolProfile?.sectors?.length > 0
-      ) {
-        @if (
-          SymbolProfile?.countries?.length === 1 &&
-          SymbolProfile?.sectors?.length === 1
-        ) {
-          <div class="col-6 mb-3">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="SymbolProfile.sectors[0].name"
-              >Sector</gf-value
-            >
-          </div>
-          @if (SymbolProfile?.countries?.length === 1) {
-            <div class="col-6 mb-3">
-              <gf-value
-                i18n
-                size="medium"
-                [locale]="data.locale"
-                [value]="SymbolProfile.countries[0].name"
-                >Country</gf-value
-              >
-            </div>
-          }
-        } @else {
-          <div class="col-md-6 mb-3">
-            <div class="h5" i18n>Sectors</div>
-            <gf-portfolio-proportion-chart
-              [baseCurrency]="data.baseCurrency"
-              [colorScheme]="data.colorScheme"
-              [data]="sectors"
-              [isInPercent]="true"
-              [keys]="['name']"
-              [locale]="data.locale"
-              [maxItems]="10"
-            />
-          </div>
-          <div class="col-md-6 mb-3">
-            <div class="h5" i18n>Countries</div>
-            <gf-portfolio-proportion-chart
-              [baseCurrency]="data.baseCurrency"
-              [colorScheme]="data.colorScheme"
-              [data]="countries"
-              [isInPercent]="true"
-              [keys]="['name']"
-              [locale]="data.locale"
-              [maxItems]="10"
-            />
-          </div>
-        }
-      }
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [hidden]="!SymbolProfile?.symbol"
-          [value]="SymbolProfile?.symbol"
-          >Symbol</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          size="medium"
-          [hidden]="!SymbolProfile?.isin"
-          [value]="SymbolProfile?.isin"
-          >ISIN</gf-value
-        >
-      </div>
-
-      @if (dataProviderInfo) {
-        <div class="col-md-12 mb-3 text-center">
-          <hr />
-          <gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]" />
-          <hr />
-        </div>
-      }
-    </div>
-
     <mat-tab-group
       animationDuration="0ms"
       class="mb-5"
       [mat-stretch-tabs]="false"
       [ngClass]="{ 'd-none': !dataSource?.data.length }"
     >
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <ion-icon name="swap-vertical-outline" />
+          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+        </ng-template>
+        <div class="flex-grow-1" mat-dialog-content>
+          <div class="container p-0">
+            <div class="row">
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [colorizeSign]="true"
+                  [isCurrency]="true"
+                  [locale]="data.locale"
+                  [precision]="netPerformanceWithCurrencyEffectPrecision"
+                  [unit]="data.baseCurrency"
+                  [value]="netPerformanceWithCurrencyEffect"
+                >
+                  @if (
+                    SymbolProfile?.currency &&
+                    data.baseCurrency !== SymbolProfile?.currency
+                  ) {
+                    Change with currency effect
+                  } @else {
+                    Change
+                  }
+                </gf-value>
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [colorizeSign]="true"
+                  [isPercent]="true"
+                  [locale]="data.locale"
+                  [value]="netPerformancePercentWithCurrencyEffect"
+                >
+                  @if (
+                    SymbolProfile?.currency &&
+                    data.baseCurrency !== SymbolProfile?.currency
+                  ) {
+                    Performance with currency effect
+                  } @else {
+                    Performance
+                  }
+                </gf-value>
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isCurrency]="true"
+                  [locale]="data.locale"
+                  [unit]="SymbolProfile?.currency"
+                  [value]="averagePrice"
+                  >Average Unit Price</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isCurrency]="true"
+                  [locale]="data.locale"
+                  [unit]="SymbolProfile?.currency"
+                  [value]="marketPrice"
+                  >Market Price</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isCurrency]="true"
+                  [locale]="data.locale"
+                  [ngClass]="{
+                    'text-danger':
+                      marketPriceMin?.toFixed(2) === marketPrice?.toFixed(2) &&
+                      marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
+                  }"
+                  [unit]="SymbolProfile?.currency"
+                  [value]="marketPriceMin"
+                  >Minimum Price</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isCurrency]="true"
+                  [locale]="data.locale"
+                  [ngClass]="{
+                    'text-success':
+                      marketPriceMax?.toFixed(2) === marketPrice?.toFixed(2) &&
+                      marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
+                  }"
+                  [unit]="SymbolProfile?.currency"
+                  [value]="marketPriceMax"
+                  >Maximum Price</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [locale]="data.locale"
+                  [precision]="quantityPrecision"
+                  [value]="quantity"
+                  >Quantity</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isCurrency]="true"
+                  [locale]="data.locale"
+                  [precision]="
+                    investmentInBaseCurrencyWithCurrencyEffectPrecision
+                  "
+                  [unit]="data.baseCurrency"
+                  [value]="investmentInBaseCurrencyWithCurrencyEffect"
+                  >Investment</gf-value
+                >
+              </div>
+              @if (
+                dividendInBaseCurrency && user?.settings?.isExperimentalFeatures
+              ) {
+                <div class="col-6 mb-3">
+                  <gf-value
+                    i18n
+                    size="medium"
+                    [isCurrency]="true"
+                    [locale]="data.locale"
+                    [precision]="dividendInBaseCurrencyPrecision"
+                    [unit]="data.baseCurrency"
+                    [value]="dividendInBaseCurrency"
+                    >Dividend</gf-value
+                  >
+                </div>
+                <div class="col-6 mb-3">
+                  <gf-value
+                    i18n
+                    size="medium"
+                    [isPercent]="true"
+                    [locale]="data.locale"
+                    [value]="dividendYieldPercentWithCurrencyEffect"
+                    >Dividend Yield</gf-value
+                  >
+                </div>
+              }
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isCurrency]="true"
+                  [locale]="data.locale"
+                  [unit]="data.baseCurrency"
+                  [value]="feeInBaseCurrency"
+                  >Fees</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isDate]="true"
+                  [locale]="data.locale"
+                  [value]="firstBuyDate"
+                  >First Activity</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  size="medium"
+                  [locale]="data.locale"
+                  [value]="transactionCount"
+                >
+                  @if (transactionCount === 1) {
+                    <ng-container i18n>Activity</ng-container>
+                  } @else {
+                    <ng-container i18n>Activities</ng-container>
+                  }
+                </gf-value>
+              </div>
+              <div class="col-6 mb-3"></div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [hidden]="!assetClass"
+                  [value]="assetClass"
+                  >Asset Class</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [hidden]="!assetSubClass"
+                  [value]="assetSubClass"
+                  >Asset Sub Class</gf-value
+                >
+              </div>
+              @if (
+                SymbolProfile?.countries?.length > 0 ||
+                SymbolProfile?.sectors?.length > 0
+              ) {
+                @if (
+                  SymbolProfile?.countries?.length === 1 &&
+                  SymbolProfile?.sectors?.length === 1
+                ) {
+                  <div class="col-6 mb-3">
+                    <gf-value
+                      i18n
+                      size="medium"
+                      [locale]="data.locale"
+                      [value]="SymbolProfile.sectors[0].name"
+                      >Sector</gf-value
+                    >
+                  </div>
+                  @if (SymbolProfile?.countries?.length === 1) {
+                    <div class="col-6 mb-3">
+                      <gf-value
+                        i18n
+                        size="medium"
+                        [locale]="data.locale"
+                        [value]="SymbolProfile.countries[0].name"
+                        >Country</gf-value
+                      >
+                    </div>
+                  }
+                } @else {
+                  <div class="col-md-6 mb-3">
+                    <div class="h5" i18n>Sectors</div>
+                    <gf-portfolio-proportion-chart
+                      [baseCurrency]="data.baseCurrency"
+                      [colorScheme]="data.colorScheme"
+                      [data]="sectors"
+                      [isInPercent]="true"
+                      [keys]="['name']"
+                      [locale]="data.locale"
+                      [maxItems]="10"
+                    />
+                  </div>
+                  <div class="col-md-6 mb-3">
+                    <div class="h5" i18n>Countries</div>
+                    <gf-portfolio-proportion-chart
+                      [baseCurrency]="data.baseCurrency"
+                      [colorScheme]="data.colorScheme"
+                      [data]="countries"
+                      [isInPercent]="true"
+                      [keys]="['name']"
+                      [locale]="data.locale"
+                      [maxItems]="10"
+                    />
+                  </div>
+                }
+              }
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [hidden]="!SymbolProfile?.symbol"
+                  [value]="SymbolProfile?.symbol"
+                  >Symbol</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  size="medium"
+                  [hidden]="!SymbolProfile?.isin"
+                  [value]="SymbolProfile?.isin"
+                  >ISIN</gf-value
+                >
+              </div>
+
+              @if (dataProviderInfo) {
+                <div class="col-md-12 mb-3 text-center">
+                  <hr />
+                  <gf-data-provider-credits
+                    [dataProviderInfos]="[dataProviderInfo]"
+                  />
+                  <hr />
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="swap-vertical-outline" />