Personal-Test-Ground-NG/src/app/components/calculate-dialog/calculate-dialog.component.html

<h2 mat-dialog-title>Activity Quantitative Report</h2>

<mat-dialog-content>
  <!-- Resources grouped by type -->
  <section>
    <h3>👷 Resources ({{ resourceSummary.length }})</h3>
    <mat-accordion>
      <mat-expansion-panel *ngFor="let type of resourceSummary">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ type.type | titlecase }} ({{ type.resources.length }})
          </mat-panel-title>
        </mat-expansion-panel-header>

        <!-- List each resource of this type -->
        <div *ngFor="let res of type.resources" class="resource-row">
          <span>{{ res.name }}: {{ res.totalQuantity }} {{ res.uom }}</span>
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </section>

  <hr />

  <!-- OUTPUT TOTALS -->
  <section>
    <h3>📦 Total Outputs</h3>
    <ul>
      <li *ngFor="let uom of (totalOutputs | keyvalue)">
        {{ uom.value }} {{ totalOutputUoms[uom.key] }}
      </li>
    </ul>
  </section>

  <hr />

  <!-- TARGET TOTALS -->
  <section>
    <h3>🎯 Total Targets</h3>
    <ul>
      <li *ngFor="let uom of (totalTargets | keyvalue)">
        {{ uom.value }} {{ totalTargetUoms[uom.key] }}
      </li>
    </ul>
  </section>

  <hr />

  <!-- DURATION -->
  <section>
    <h3>⏱️ Total Duration</h3>
    <p>{{ totalDuration }} {{ durationUom }}</p>
  </section>

  <!-- MONTHLY AVERAGES -->
  <section *ngIf="averageOutputsPerMonth && (averageOutputsPerMonth | keyvalue).length">
    <h3>📦 Average Outputs per Month</h3>
    <ul>
      <li *ngFor="let uom of (averageOutputsPerMonth | keyvalue)">
        {{ uom.value | number:'1.0-2' }} {{ totalOutputUoms[uom.key] }}
      </li>
    </ul>
  </section>

  <section *ngIf="averageTargetsPerMonth && (averageTargetsPerMonth | keyvalue).length">
    <h3>🎯 Average Targets per Month</h3>
    <ul>
      <li *ngFor="let uom of (averageTargetsPerMonth | keyvalue)">
        {{ uom.value | number:'1.0-2' }} {{ totalTargetUoms[uom.key] }}
      </li>
    </ul>
  </section>

  <section *ngIf="averageDurationPerMonth && averageDurationPerMonth > 0">
    <h3>⏱️ Average Duration per Month</h3>
    <p>{{ averageDurationPerMonth | number:'1.0-2' }} {{ durationUom }}</p>
  </section>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button mat-button (click)="closeDialog()">Close</button>
</mat-dialog-actions>