ghostfolio/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

<gf-dialog-header
  position="center"
  [deviceType]="data.deviceType"
  [title]="name"
  (closeButtonClicked)="onClose()"
/>

<div class="flex-grow-1" mat-dialog-content>
  <div class="container p-0">
    <div class="row">
      <div class="col-12 d-flex justify-content-center mb-3">
        <gf-value
          size="large"
          [isCurrency]="true"
          [locale]="user?.settings?.locale"
          [unit]="user?.settings?.baseCurrency"
          [value]="valueInBaseCurrency"
        />
      </div>
    </div>

    <div class="chart-container mb-3">
      <gf-investment-chart
        class="h-100"
        [currency]="user?.settings?.baseCurrency"
        [historicalDataItems]="historicalDataItems"
        [isInPercent]="
          data.hasImpersonationId || user.settings.isRestrictedView
        "
        [isLoading]="isLoadingChart"
        [locale]="user?.settings?.locale"
      />
    </div>

    <div class="mb-3 row">
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [isCurrency]="true"
          [locale]="user?.settings?.locale"
          [precision]="balancePrecision"
          [unit]="currency"
          [value]="balance"
          >Cash Balance</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [isCurrency]="true"
          [locale]="user?.settings?.locale"
          [precision]="equityPrecision"
          [unit]="currency"
          [value]="equity"
          >Equity</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [isCurrency]="true"
          [locale]="user?.settings?.locale"
          [precision]="interestInBaseCurrencyPrecision"
          [unit]="user?.settings?.baseCurrency"
          [value]="interestInBaseCurrency"
          >Interest</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [isCurrency]="true"
          [locale]="user?.settings?.locale"
          [precision]="dividendInBaseCurrencyPrecision"
          [unit]="user?.settings?.baseCurrency"
          [value]="dividendInBaseCurrency"
          >Dividend</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value i18n size="medium" [value]="transactionCount"
          >Activities</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value i18n size="medium" [value]="platformName">Platform</gf-value>
      </div>
    </div>

    <mat-tab-group
      animationDuration="0ms"
      [mat-stretch-tabs]="false"
      [ngClass]="{ 'd-none': isLoadingActivities }"
    >
      <mat-tab>
        <ng-template mat-tab-label>
          <ion-icon name="albums-outline" />
          <div class="d-none d-sm-block ml-2" i18n>Holdings</div>
        </ng-template>
        <gf-holdings-table
          [baseCurrency]="user?.settings?.baseCurrency"
          [deviceType]="data.deviceType"
          [hasPermissionToOpenDetails]="false"
          [holdings]="holdings"
          [locale]="user?.settings?.locale"
        />
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <ion-icon name="swap-vertical-outline" />
          <div class="d-none d-sm-block ml-2" i18n>Activities</div>
        </ng-template>
        <gf-activities-table
          [baseCurrency]="user?.settings?.baseCurrency"
          [dataSource]="dataSource"
          [deviceType]="data.deviceType"
          [hasPermissionToCreateActivity]="false"
          [hasPermissionToDeleteActivity]="false"
          [hasPermissionToExportActivities]="
            !data.hasImpersonationId && !user.settings.isRestrictedView
          "
          [hasPermissionToFilter]="false"
          [hasPermissionToOpenDetails]="false"
          [locale]="user?.settings?.locale"
          [showAccountColumn]="false"
          [showActions]="
            !data.hasImpersonationId &&
            data.hasPermissionToCreateActivity &&
            user?.settings?.isExperimentalFeatures &&
            !user?.settings?.isRestrictedView
          "
          [sortColumn]="sortColumn"
          [sortDirection]="sortDirection"
          [totalItems]="totalItems"
          (activityToClone)="onCloneActivity($event)"
          (activityToUpdate)="onUpdateActivity($event)"
          (export)="onExport()"
          (sortChanged)="onSortChanged($event)"
        />
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <ion-icon name="cash-outline" />
          <div class="d-none d-sm-block ml-2" i18n>Cash Balances</div>
        </ng-template>
        <gf-account-balances
          [accountBalances]="accountBalances"
          [accountCurrency]="currency"
          [accountId]="data.accountId"
          [locale]="user?.settings?.locale"
          [showActions]="
            !data.hasImpersonationId &&
            hasPermissionToDeleteAccountBalance &&
            !user.settings.isRestrictedView
          "
          (accountBalanceCreated)="onAddAccountBalance($event)"
          (accountBalanceDeleted)="onDeleteAccountBalance($event)"
        />
      </mat-tab>
    </mat-tab-group>
  </div>
</div>

<gf-dialog-footer
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
/>