ghostfolio/apps/client/src/app/components/admin-overview/admin-overview.html

<div class="container">
  <div class="row">
    <div class="col">
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content>
          <div class="d-flex my-3">
            <div class="w-50" i18n>Version</div>
            <div class="w-50">{{ version }}</div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>User Count</div>
            <div class="w-50">
              <gf-value
                [locale]="user?.settings?.locale"
                [precision]="0"
                [value]="userCount"
              ></gf-value>
            </div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>Activity Count</div>
            <div class="w-50">
              <gf-value
                [locale]="user?.settings?.locale"
                [precision]="0"
                [value]="transactionCount"
              ></gf-value>
              <div *ngIf="transactionCount && userCount">
                {{ transactionCount / userCount | number : '1.2-2' }}
                <span i18n>per User</span>
              </div>
            </div>
          </div>
          <div 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"
                      [value]="1"
                    ></gf-value>
                  </td>
                  <td class="pl-1">{{ exchangeRate.label1 }}</td>
                  <td class="px-1">=</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>
                  <td>
                    <button
                      *ngIf="customCurrencies.includes(exchangeRate.label2)"
                      class="h-100 mx-1 no-min-width px-2"
                      mat-button
                      (click)="onDeleteCurrency(exchangeRate.label2)"
                    >
                      <ion-icon name="trash-outline"></ion-icon>
                    </button>
                  </td>
                </tr>
              </table>
              <div class="mt-2">
                <button
                  color="primary"
                  mat-flat-button
                  (click)="onAddCurrency()"
                >
                  <ion-icon class="mr-1" name="add-outline"></ion-icon>
                  <span i18n>Add Currency</span>
                </button>
              </div>
            </div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>User Signup</div>
            <div class="w-50">
              <mat-checkbox
                color="primary"
                [checked]="info.globalPermissions.includes(permissions.createUserAccount)"
                (change)="onEnableUserSignupModeChange($event)"
              ></mat-checkbox>
            </div>
          </div>
          <div *ngIf="hasPermissionToToggleReadOnlyMode" class="d-flex my-3">
            <div class="w-50" i18n>Read-only Mode</div>
            <div class="w-50">
              <mat-checkbox
                color="primary"
                [checked]="info?.isReadOnlyMode"
                (change)="onReadOnlyModeChange($event)"
              ></mat-checkbox>
            </div>
          </div>
          <div *ngIf="hasPermissionForSystemMessage" class="d-flex my-3">
            <div class="w-50" i18n>System Message</div>
            <div class="w-50">
              <div *ngIf="info?.systemMessage">
                <span>{{ info.systemMessage }}</span>
                <button
                  class="h-100 mx-1 no-min-width px-2"
                  mat-button
                  (click)="onDeleteSystemMessage()"
                >
                  <ion-icon name="trash-outline"></ion-icon>
                </button>
              </div>
              <button
                *ngIf="!info?.systemMessage"
                color="accent"
                mat-flat-button
                (click)="onSetSystemMessage()"
              >
                <ion-icon
                  class="mr-1"
                  name="information-circle-outline"
                ></ion-icon>
                <span i18n>Set Message</span>
              </button>
            </div>
          </div>
          <div
            *ngIf="hasPermissionForSubscription"
            class="d-flex my-3 subscription"
          >
            <div class="w-50" i18n>Coupons</div>
            <div class="w-50">
              <table>
                <tr *ngFor="let coupon of coupons">
                  <td class="text-monospace">{{ coupon.code }}</td>
                  <td class="d-flex justify-content-end pl-2">
                    {{ coupon.duration }}
                  </td>
                  <td>
                    <button
                      class="h-100 mx-1 no-min-width px-2"
                      mat-button
                      (click)="onDeleteCoupon(coupon.code)"
                    >
                      <ion-icon name="trash-outline"></ion-icon>
                    </button>
                  </td>
                </tr>
              </table>
              <div class="mt-2">
                <form #couponForm="ngForm" class="align-items-center d-flex">
                  <mat-form-field
                    appearance="outline"
                    class="mr-2 without-hint"
                  >
                    <mat-select
                      name="duration"
                      [value]="couponDuration"
                      (selectionChange)="onChangeCouponDuration($event.value)"
                    >
                      <mat-option value="7 days">7 Days</mat-option>
                      <mat-option value="14 days">14 Days</mat-option>
                      <mat-option value="30 days">30 Days</mat-option>
                      <mat-option value="90 days">90 Days</mat-option>
                      <mat-option value="180 days">180 Days</mat-option>
                      <mat-option value="1 year">1 Year</mat-option>
                    </mat-select>
                  </mat-form-field>
                  <button
                    class="mt-1"
                    color="primary"
                    mat-flat-button
                    (click)="onAddCoupon()"
                  >
                    <span i18n>Add</span>
                  </button>
                </form>
              </div>
            </div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>Housekeeping</div>
            <div class="w-50">
              <button color="warn" mat-flat-button (click)="onFlushCache()">
                <ion-icon class="mr-1" name="close-circle-outline"></ion-icon>
                <span i18n>Flush Cache</span>
              </button>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>