ghostfolio/apps/client/src/app/pages/admin/admin-page.html

<div class="container">
  <div class="mb-5 row">
    <div class="col">
      <h3 class="d-flex justify-content-center mb-3" i18n>
        Admin Control Panel
      </h3>
      <mat-card class="mb-3">
        <mat-card-content>
          <div
            *ngIf="exchangeRates?.length > 0"
            class="align-items-start d-flex my-3"
          >
            <div class="w-50" i18n>Exchange Rates</div>
            <div class="w-50">
              <table>
                <tr *ngFor="let exchangeRate of exchangeRates">
                  <td class="d-flex">
                    <gf-value
                      [locale]="user?.settings?.locale"
                      [precision]="2"
                      [value]="1"
                    ></gf-value>
                  </td>
                  <td class="pl-1">{{ exchangeRate.label1 }}</td>
                  <td class="px-2">=</td>
                  <td class="d-flex justify-content-end">
                    <gf-value
                      [locale]="user?.settings?.locale"
                      [precision]="4"
                      [value]="exchangeRate.value"
                    ></gf-value>
                  </td>
                  <td class="pl-1">{{ exchangeRate.label2 }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>Last Data Gathering</div>
            <div class="w-50">
              <div>
                <ng-container *ngIf="lastDataGathering"
                  >{{ lastDataGathering }}</ng-container
                >
                <ng-container *ngIf="dataGatheringInProgress" i18n
                  >In Progress</ng-container
                >
              </div>
              <div class="mt-2 overflow-hidden">
                <div class="mb-2">
                  <button
                    class="mw-100"
                    color="accent"
                    mat-flat-button
                    (click)="onFlushCache()"
                  >
                    <ion-icon
                      class="mr-1"
                      name="close-circle-outline"
                    ></ion-icon>
                    <span i18n>Reset Data Gathering</span>
                  </button>
                </div>
                <div class="mb-2">
                  <button
                    class="mw-100"
                    color="warn"
                    mat-flat-button
                    [disabled]="dataGatheringInProgress"
                    (click)="onGatherMax()"
                  >
                    <ion-icon class="mr-1" name="warning-outline"></ion-icon>
                    <span i18n>Gather All Data</span>
                  </button>
                </div>
                <div>
                  <button
                    class="mb-2 mr-2 mw-100"
                    color="accent"
                    mat-flat-button
                    (click)="onGatherProfileData()"
                  >
                    <ion-icon
                      class="mr-1"
                      name="cloud-download-outline"
                    ></ion-icon>
                    <span i18n>Gather Profile Data</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>User Count</div>
            <div class="w-50">{{ userCount }}</div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>Transaction Count</div>
            <div class="w-50">
              <ng-container *ngIf="transactionCount">
                {{ transactionCount }} ({{ transactionCount / userCount | number
                : '1.2-2' }} <span i18n>per User</span>)
              </ng-container>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <h3 class="mb-3 text-center" i18n>Users</h3>
      <div class="users">
        <table class="gf-table">
          <thead>
            <tr class="mat-header-row">
              <th class="mat-header-cell px-1 py-2 text-right" i18n>#</th>
              <th class="mat-header-cell px-1 py-2" i18n>User</th>
              <th class="mat-header-cell px-1 py-2 text-right" i18n>
                Registration
              </th>
              <th class="mat-header-cell px-1 py-2 text-right" i18n>
                Accounts
              </th>
              <th class="mat-header-cell px-1 py-2 text-right" i18n>
                Transactions
              </th>
              <th class="mat-header-cell px-1 py-2 text-right" i18n>
                Engagement per Day
              </th>
              <th class="mat-header-cell px-1 py-2" i18n>Last Activitiy</th>
              <th class="mat-header-cell px-1 py-2"></th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let userItem of users; let i = index" class="mat-row">
              <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
              <td class="mat-cell px-1 py-2">
                <div class="d-flex align-items-center">
                  <span class="d-none d-sm-inline-block"
                    >{{ userItem.alias || userItem.id }}</span
                  >
                  <span class="d-inline-block d-sm-none"
                    >{{ userItem.alias || (userItem.id | slice:0:5) +
                    '...' }}</span
                  >
                  <ion-icon
                    *ngIf="userItem?.subscription?.type === 'Premium'"
                    class="ml-1 text-muted"
                    name="diamond-outline"
                  ></ion-icon>
                </div>
              </td>
              <td class="mat-cell px-1 py-2 text-right">
                {{ formatDistanceToNow(userItem.createdAt) }}
              </td>
              <td class="mat-cell px-1 py-2 text-right">
                {{ userItem.accountCount }}
              </td>
              <td class="mat-cell px-1 py-2 text-right">
                {{ userItem.transactionCount }}
              </td>
              <td class="mat-cell px-1 py-2 text-right">
                {{ userItem.engagement | number: '1.0-0' }}
              </td>
              <td class="mat-cell px-1 py-2">
                {{ formatDistanceToNow(userItem.lastActivity) }}
              </td>
              <td class="mat-cell px-1 py-2">
                <button
                  class="mx-1 no-min-width px-2"
                  mat-button
                  [matMenuTriggerFor]="accountMenu"
                  (click)="$event.stopPropagation()"
                >
                  <ion-icon name="ellipsis-vertical"></ion-icon>
                </button>
                <mat-menu #accountMenu="matMenu" xPosition="before">
                  <button
                    i18n
                    mat-menu-item
                    [disabled]="userItem.id === user?.id"
                    (click)="onDeleteUser(userItem.id)"
                  >
                    Delete
                  </button>
                </mat-menu>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>