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

<div class="container">
  <h3 class="d-flex justify-content-center mb-3" i18n>Portfolio</h3>
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <mat-card class="mb-3">
        <h4 i18n>Activities</h4>
        <p class="mb-0">Manage your activities.</p>
        <p class="text-right">
          <a
            color="primary"
            mat-button
            [routerLink]="['/portfolio', 'activities']"
          >
            <span i18n>Open Activities</span>
            <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
          </a>
        </p>
      </mat-card>
    </div>
    <div class="col-xs-12 col-md-6">
      <mat-card class="mb-3">
        <h4 class="align-items-center d-flex">
          <span i18n>Allocations</span>
          <ion-icon
            *ngIf="hasPermissionForSubscription"
            class="ml-1 text-muted"
            name="diamond-outline"
          ></ion-icon>
        </h4>
        <p class="mb-0">Check the allocations of your portfolio.</p>
        <p class="text-right">
          <a
            color="primary"
            mat-button
            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
            [routerLink]="['/portfolio', 'allocations']"
          >
            <span i18n>Open Allocations</span>
            <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
          </a>
        </p>
      </mat-card>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <mat-card class="mb-3">
        <h4 class="align-items-center d-flex">
          <span i18n>Analysis</span>
          <ion-icon
            *ngIf="hasPermissionForSubscription"
            class="ml-1 text-muted"
            name="diamond-outline"
          ></ion-icon>
        </h4>
        <p class="mb-0">Ghostfolio Analysis visualizes your portfolio.</p>
        <p class="text-right">
          <a
            color="primary"
            mat-button
            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
            [routerLink]="['/portfolio', 'analysis']"
          >
            <span i18n>Open Analysis</span>
            <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
          </a>
        </p>
      </mat-card>
    </div>
    <div class="col-xs-12 col-md-6">
      <mat-card class="mb-3">
        <h4 class="align-items-center d-flex">
          <span i18n>X-ray</span>
          <ion-icon
            *ngIf="hasPermissionForSubscription"
            class="ml-1 text-muted"
            name="diamond-outline"
          ></ion-icon>
        </h4>
        <p class="mb-0">
          Ghostfolio X-ray uses static analysis to identify potential issues and
          risks in your portfolio.
        </p>
        <p class="text-right">
          <a
            color="primary"
            mat-button
            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
            [routerLink]="['/portfolio', 'report']"
          >
            <span i18n>Open X-ray</span>
            <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
          </a>
        </p>
      </mat-card>
    </div>
  </div>
</div>