goal.component.html

<ng-container *ngIf="plan">
  <div class="incentive-header">
    <div class="back">
      <button class="btn btn-prev btn-sm" (click)="cancelPreview()"><i class="fa fa-chevron-left"></i> BACK</button>
    </div>
    <div class="incentive-title">
      {{ plan.title }}
    </div>
    <div class="date-range">
      <button class="btn btn-prev btn-sm"><i class="fa fa-chevron-left"></i></button>
      <span class="range">{{ plan.startDate | date: 'MMM d, yyyy' }} - {{ plan.endDate | date: 'MMM d, yyyy' }}</span>
      <button class="btn btn-next btn-sm"><i class="fa fa-chevron-right"></i></button>
    </div>
  </div>

  <div class="incentive-statistics">
    <div class="current-earnings">
      <div>Current Earnings</div>
      <div class="price">{{ plan.earnings | currency }}</div>
      <div class="selling-days">Selling Days</div>
      <div class="selling-days-text">
        {{ plan.remainingDays > 0 ? plan.remainingDays + ' more selling days' : 'Ended' }}
      </div>
      <div class="selling-days-left" *ngIf="plan.remainingDays > 0">
        left in this incentive period
      </div>
    </div>

    <div class="fixed-payout-metrics">
      <div class="text">
        Fixed Payout Metrics Attainment
        <label>FIXED</label>
      </div>
      <div class="charts">
        <div id="fixed-payout-chart"></div>
        <div class="charts-detail">
          <div class="price">{{ plan.fixedEarnings | currency }}</div>
          <div class="expected">of {{ plan.expected | currency }} potential</div>
        </div>
      </div>
    </div>

    <div class="payper-metrics">
      <div class="text">
        Pay Per Entry Metric Attainment
        <label class="payper">PAY PER</label>
      </div>
      <div class="charts">
        <div id="payper-chart"></div>
      </div>
    </div>
  </div>

  <div class="payments-table">
    <div class="payments-table-header">
      <div class="table-row">
        <div class="payout-type">Payout Type</div>
        <div class="name">Name</div>
        <div class="goal-type">Goal Type</div>
        <div class="payment-progress">Progress</div>
        <div class="current-payout">Current Payout</div>
        <div class="action"></div>
      </div>
    </div>
    <div class="payments-table-body">
      <div class="table-row" *ngFor="let payment of plan.payments">
        <div class="payout-type">
          <span class="type-fixed" *ngIf="payment.type == 0">FIXED</span>
          <span class="type-payper" *ngIf="payment.type == 1">PAY PER</span>
        </div>
        <div class="name">{{ payment.name }}</div>
        <div class="goal-type">{{ goalTypeText(payment.goalType) }}</div>
        <div class="payment-progress"></div>
        <div class="current-payout">{{ payment.earnings | currency }}</div>
        <div class="action">
          <button class="btn btn-white">Details</button>
        </div>
      </div>
    </div>
  </div>
</ng-container>