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

<div class="container">
  <div class="row mb-5">
    <div class="col-lg">
      <h2 class="d-none d-sm-block h3 mb-3 text-center" i18n>FIRE</h2>
      <div>
        <h4 class="align-items-center d-flex mb-3">
          <span i18n>Calculator</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </h4>
        <gf-fire-calculator
          [annualInterestRate]="user?.settings?.annualInterestRate"
          [colorScheme]="user?.settings?.colorScheme"
          [currency]="user?.settings?.baseCurrency"
          [deviceType]="deviceType"
          [fireWealth]="fireWealth?.toNumber()"
          [hasPermissionToUpdateUserSettings]="
            !hasImpersonationId && hasPermissionToUpdateUserSettings
          "
          [locale]="user?.settings?.locale"
          [ngStyle]="{
            opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial',
            'pointer-events':
              user?.subscription?.type === 'Basic' ? 'none' : 'initial'
          }"
          [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
          [retirementDate]="user?.settings?.retirementDate"
          [savingsRate]="user?.settings?.savingsRate"
          (annualInterestRateChanged)="onAnnualInterestRateChange($event)"
          (projectedTotalAmountChanged)="onProjectedTotalAmountChange($event)"
          (retirementDateChanged)="onRetirementDateChange($event)"
          (savingsRateChanged)="onSavingsRateChange($event)"
        />
      </div>
    </div>
  </div>
  <div>
    <h4 class="align-items-center d-flex">
      <span i18n>4% Rule</span>
      @if (user?.subscription?.type === 'Basic') {
        <gf-premium-indicator class="ml-1" />
      }
    </h4>
    @if (isLoading) {
      <div>
        <ngx-skeleton-loader
          animation="pulse"
          class="my-1"
          [theme]="{
            height: '1rem',
            width: '100%'
          }"
        />
        <ngx-skeleton-loader
          animation="pulse"
          [theme]="{
            height: '1rem',
            width: '10rem'
          }"
        />
      </div>
    } @else {
      <div
        i18n
        [ngClass]="{ 'text-muted': user?.subscription?.type === 'Basic' }"
      >
        If you retire today, you would be able to withdraw
        <span class="font-weight-bold"
          ><gf-value
            class="d-inline-block"
            [isCurrency]="true"
            [locale]="user?.settings?.locale"
            [unit]="user?.settings?.baseCurrency"
            [value]="withdrawalRatePerYear?.toNumber()"
          />
          per year</span
        >
        or
        <span class="font-weight-bold"
          ><gf-value
            class="d-inline-block"
            [isCurrency]="true"
            [locale]="user?.settings?.locale"
            [unit]="user?.settings?.baseCurrency"
            [value]="withdrawalRatePerMonth?.toNumber()"
          />
          per month</span
        >, based on your total assets of
        <span class="font-weight-bold"
          ><gf-value
            class="d-inline-block"
            [isCurrency]="true"
            [locale]="user?.settings?.locale"
            [unit]="user?.settings?.baseCurrency"
            [value]="fireWealth?.toNumber()"
          />
        </span>
        and a withdrawal rate of 4%.
      </div>
    }
  </div>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col">
      <h2 class="h3 mb-3 text-center">X-ray</h2>
      <p class="mb-4">
        <span i18n
          >Ghostfolio X-ray uses static analysis to identify potential issues
          and risks in your portfolio.</span
        >
        <span class="d-none"
          >It will be highly configurable in the future: activate / deactivate
          rules and customize the thresholds to match your personal investment
          style.</span
        >
      </p>
      <div class="mb-4">
        <h4 class="align-items-center d-flex m-0">
          <span i18n>Emergency Fund</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </h4>
        <gf-rules
          [hasPermissionToUpdateUserSettings]="
            !hasImpersonationId &&
            hasPermissionToUpdateUserSettings &&
            user?.settings?.isExperimentalFeatures
          "
          [isLoading]="isLoadingPortfolioReport"
          [rules]="emergencyFundRules"
          [settings]="user?.settings?.xRayRules"
          (rulesUpdated)="onRulesUpdated($event)"
        />
      </div>
      <div class="mb-4">
        <h4 class="align-items-center d-flex m-0">
          <span i18n>Currency Cluster Risks</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </h4>
        <gf-rules
          [hasPermissionToUpdateUserSettings]="
            !hasImpersonationId &&
            hasPermissionToUpdateUserSettings &&
            user?.settings?.isExperimentalFeatures
          "
          [isLoading]="isLoadingPortfolioReport"
          [rules]="currencyClusterRiskRules"
          [settings]="user?.settings?.xRayRules"
          (rulesUpdated)="onRulesUpdated($event)"
        />
      </div>
      <div class="mb-4">
        <h4 class="align-items-center d-flex m-0">
          <span i18n>Account Cluster Risks</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </h4>
        <gf-rules
          [hasPermissionToUpdateUserSettings]="
            !hasImpersonationId &&
            hasPermissionToUpdateUserSettings &&
            user?.settings?.isExperimentalFeatures
          "
          [isLoading]="isLoadingPortfolioReport"
          [rules]="accountClusterRiskRules"
          [settings]="user?.settings?.xRayRules"
          (rulesUpdated)="onRulesUpdated($event)"
        />
      </div>
      <div class="mb-4">
        <h4 class="align-items-center d-flex m-0">
          <span i18n>Fees</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </h4>
        <gf-rules
          [hasPermissionToUpdateUserSettings]="
            !hasImpersonationId &&
            hasPermissionToUpdateUserSettings &&
            user?.settings?.isExperimentalFeatures
          "
          [isLoading]="isLoadingPortfolioReport"
          [rules]="feeRules"
          [settings]="user?.settings?.xRayRules"
          (rulesUpdated)="onRulesUpdated($event)"
        />
      </div>
      @if (inactiveRules?.length > 0) {
        <div>
          <h4 class="m-0" i18n>Inactive</h4>
          <gf-rules
            [hasPermissionToUpdateUserSettings]="
              !hasImpersonationId &&
              hasPermissionToUpdateUserSettings &&
              user?.settings?.isExperimentalFeatures
            "
            [isLoading]="isLoadingPortfolioReport"
            [rules]="inactiveRules"
            [settings]="user?.settings?.xRayRules"
            (rulesUpdated)="onRulesUpdated($event)"
          />
        </div>
      }
    </div>
  </div>
</div>