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 class="d-flex my-3">
            <div class="w-50" i18n>Exchange Rates</div>
            <div class="w-50">
              <div *ngFor="let exchangeRate of exchangeRates" class="mb-1">
                1 {{ exchangeRate.label1 }} = {{ exchangeRate.value | number :
                '1.5-5' }} {{ exchangeRate.label2 }}
              </div>
            </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">
                <button
                  class="mb-2 mr-2 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>
                <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>
          </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>
      <mat-card class="px-0">
        <mat-card-content class="users">
          <table>
            <thead>
              <tr class="mat-header-row">
                <th class="mat-header-cell pl-3 py-2" i18n>User</th>
                <th class="mat-header-cell pr-2 py-2" i18n>
                  Registration Date
                </th>
                <th class="mat-header-cell pr-2 py-2" i18n>Accounts</th>
                <th class="mat-header-cell pr-2 py-2" i18n>Transactions</th>
                <th class="mat-header-cell pr-2 py-2" i18n>Engagement</th>
                <th class="mat-header-cell pr-3 py-2" i18n>Last Activitiy</th>
                <th class="mat-header-cell pr-3 py-2"></th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let userItem of users" class="mat-row">
                <td class="mat-cell pl-3 py-2">
                  {{ userItem.alias || userItem.id }}
                </td>
                <td class="mat-cell pr-2 py-2">
                  {{ userItem.createdAt | date: defaultDateFormat }}
                </td>
                <td class="mat-cell pr-2 py-2">
                  {{ userItem._count?.Account }}
                </td>
                <td class="mat-cell pr-2 py-2">{{ userItem._count?.Order }}</td>
                <td class="mat-cell pr-2 py-2">
                  {{ userItem.Analytics?.activityCount }}
                </td>
                <td class="mat-cell pr-3 py-2">
                  {{ formatDistanceToNow(userItem.Analytics?.updatedAt) }}
                </td>
                <td class="mat-cell pr-3 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>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>