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 />
    <section>
        <h3>📦 Outputs ({{ outputSummary.length }})</h3>
        <mat-accordion>
            <mat-expansion-panel *ngFor="let type of outputSummary">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        {{ type.type | titlecase }} ({{ type.outputs.length }})
                    </mat-panel-title>
                </mat-expansion-panel-header>

                <div *ngFor="let out of type.outputs" class="output-row">
                    <span>{{ out.name }}: {{ out.totalQuantity }} {{ out.uom }}
                        <span *ngIf="out.totalWeight">({{ out.totalWeight }} kg)</span>
                    </span>
                </div>
            </mat-expansion-panel>
        </mat-accordion>
    </section>
    <section>
        <h3>🎯 Targets ({{ targetSummary.length }})</h3>
        <mat-accordion>
            <mat-expansion-panel *ngFor="let type of targetSummary">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        {{ type.type | titlecase }} ({{ type.targets.length }})
                    </mat-panel-title>
                </mat-expansion-panel-header>

                <div *ngFor="let tgt of type.targets" class="target-row">
                    <span>{{ tgt.name }}: {{ tgt.totalQuantity }} {{ tgt.uom }}</span>
                </div>
            </mat-expansion-panel>
        </mat-accordion>
    </section>


    <!-- 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>