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

<div class="align-items-center d-flex justify-content-end" mat-dialog-title>
  <button
    class="ml-1 no-min-width px-2"
    mat-button
    type="button"
    [matMenuTriggerFor]="userDetailActionsMenu"
    (click)="$event.stopPropagation()"
  >
    <ion-icon name="ellipsis-vertical" />
  </button>
  <mat-menu
    #userDetailActionsMenu="matMenu"
    class="no-max-width"
    xPosition="before"
  >
    <button
      mat-menu-item
      type="button"
      [disabled]="
        !canDeleteUser({
          currentUserId: data.currentUserId,
          userId: data.userId
        })
      "
      (click)="deleteUser()"
    >
      <ng-container i18n>Delete</ng-container>
    </button>
  </mat-menu>
</div>
<div class="flex-grow-1" mat-dialog-content>
  <div class="container p-0">
    <div class="mb-3 row">
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [enableCopyToClipboardButton]="true"
          [value]="user?.id"
          >User ID</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value i18n size="medium" [value]="user?.role">Role</gf-value>
      </div>
    </div>

    <div class="mb-3 row">
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [isDate]="true"
          [locale]="data.locale"
          [value]="user?.createdAt"
          >Registration Date</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [locale]="data.locale"
          [value]="user?.provider"
          >Authentication</gf-value
        >
      </div>
    </div>

    @if (data.hasPermissionForSubscription) {
      <div class="mb-3 row">
        <div class="col-6 mb-3">
          <gf-value
            i18n
            size="medium"
            [locale]="data.locale"
            [value]="user?.subscription ? 'Premium' : 'Basic'"
            >Membership</gf-value
          >
        </div>
        <div class="col-6 mb-3">
          <gf-value
            i18n
            size="medium"
            [value]="
              user?.country ? getCountryName({ code: user.country }) : '-'
            "
            >Country</gf-value
          >
        </div>
      </div>
    }

    <div class="mb-3 row">
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [locale]="data.locale"
          [value]="user?.accountCount"
          >Accounts</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [locale]="data.locale"
          [value]="user?.activityCount"
          >Activities</gf-value
        >
      </div>
    </div>

    @if (data.hasPermissionForSubscription) {
      <div class="mb-3 row">
        <div class="col-6 mb-3">
          <gf-value
            i18n
            size="medium"
            [locale]="data.locale"
            [precision]="0"
            [value]="user?.engagement"
            >Engagement per Day</gf-value
          >
        </div>
        <div class="col-6 mb-3">
          <gf-value
            i18n
            size="medium"
            [locale]="data.locale"
            [value]="user?.dailyApiRequests"
            >API Requests Today</gf-value
          >
        </div>
      </div>

      @if (subscriptionsDataSource.data.length > 0) {
        <div class="row">
          <div class="col">
            <h2 class="h6" i18n>Subscription History</h2>
            <div class="overflow-x-auto">
              <table
                class="gf-table w-100"
                mat-table
                [dataSource]="subscriptionsDataSource"
              >
                <ng-container matColumnDef="createdAt">
                  <th *matHeaderCellDef class="px-1" mat-header-cell>
                    <ng-container i18n>Creation</ng-container>
                  </th>
                  <td *matCellDef="let element" class="px-1" mat-cell>
                    <gf-value
                      [isDate]="true"
                      [locale]="data.locale"
                      [value]="element.createdAt"
                    />
                  </td>
                  <td *matFooterCellDef class="px-1" i18n mat-footer-cell>
                    Total
                  </td>
                </ng-container>

                <ng-container matColumnDef="type">
                  <th *matHeaderCellDef class="px-1" mat-header-cell>
                    <ng-container i18n>Type</ng-container>
                  </th>
                  <td *matCellDef="let element" class="px-1" mat-cell>
                    {{ getType(element) }}
                  </td>
                  <td *matFooterCellDef class="px-1" mat-footer-cell></td>
                </ng-container>

                <ng-container matColumnDef="price">
                  <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
                    <ng-container i18n>Price</ng-container>
                  </th>
                  <td
                    *matCellDef="let element"
                    class="px-1 text-right"
                    mat-cell
                  >
                    @if (element.price === null) {
                      <span>–</span>
                      <span class="ml-1">{{ baseCurrency }}</span>
                    } @else {
                      <gf-value
                        class="d-inline-block justify-content-end"
                        [isCurrency]="true"
                        [locale]="data.locale"
                        [unit]="baseCurrency"
                        [value]="element.price"
                      />
                    }
                  </td>
                  <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
                    <gf-value
                      class="d-inline-block justify-content-end"
                      [isCurrency]="true"
                      [locale]="data.locale"
                      [unit]="baseCurrency"
                      [value]="getSum()"
                    />
                  </td>
                </ng-container>

                <ng-container matColumnDef="expiresAt">
                  <th *matHeaderCellDef class="px-1" mat-header-cell>
                    <ng-container i18n>Expiration</ng-container>
                  </th>
                  <td *matCellDef="let element" class="px-1" mat-cell>
                    <gf-value
                      [isDate]="true"
                      [locale]="data.locale"
                      [value]="element.expiresAt"
                    />
                  </td>
                  <td *matFooterCellDef class="px-1" mat-footer-cell></td>
                </ng-container>

                <tr
                  *matHeaderRowDef="subscriptionsDisplayedColumns"
                  mat-header-row
                ></tr>
                <tr
                  *matRowDef="let row; columns: subscriptionsDisplayedColumns"
                  mat-row
                ></tr>
                <tr
                  *matFooterRowDef="subscriptionsDisplayedColumns"
                  mat-footer-row
                ></tr>
              </table>
            </div>
          </div>
        </div>
      }
    }
  </div>
</div>

<div class="justify-content-end" mat-dialog-actions>
  <button mat-button type="button" (click)="onClose()">
    <ng-container i18n>Close</ng-container>
  </button>
</div>