added icon, link, and tweaked some styles

src/interface/src/app/treatments/review-treatment-plan-dialog/review-treatment-plan-dialog.component.html

@@ -41,7 +41,14 @@
         <td>{{ area.name }}</td>
         <td>{{ area.totalStands }}</td>
         <td>{{ area.treatedStands }}</td>
-        <td>{{ area.totalStands - area.treatedStands }}</td>
+        <td>
+          <div class="project-area-wrapper">
+            {{ area.totalStands - area.treatedStands }}
+            <a [routerLink]="['project-area', area.id]" (click)="cancel()">
+              <img src="assets/svg/icons/project-area-icon-blue.svg" />
+            </a>
+          </div>
+        </td>
       </tr>
     </table>
   </div>

src/interface/src/app/treatments/review-treatment-plan-dialog/review-treatment-plan-dialog.component.scss

@@ -41,4 +41,12 @@
   }
 
 
+  .project-area-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+
+  }
+
 }

src/interface/src/app/treatments/review-treatment-plan-dialog/review-treatment-plan-dialog.component.ts

@@ -11,12 +11,19 @@ import { TreatmentSummary } from '@types';
 import { DialogData } from '../../../styleguide/dialogs/dialogs';
 import { ErrorDialogComponent } from '../../../styleguide/dialogs/error-dialog/error-dialog.component';
 import { PendingDialogComponent } from '../../../styleguide/dialogs/pending-dialog/pending-dialog.component';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-review-treatment-plan-dialog',
   standalone: true,
-  imports: [ModalComponent, MatSlideToggleModule, NgForOf, AsyncPipe, NgIf],
+  imports: [
+    ModalComponent,
+    MatSlideToggleModule,
+    NgForOf,
+    AsyncPipe,
+    NgIf,
+    RouterLink,
+  ],
   templateUrl: './review-treatment-plan-dialog.component.html',
   styleUrl: './review-treatment-plan-dialog.component.scss',
 })
@@ -35,6 +42,7 @@ export class ReviewTreatmentPlanDialogComponent {
 
   projectAreas$: Observable<
     {
+      id: number;
       name: string;
       totalStands: number;
       treatedStands: number;
@@ -44,6 +52,7 @@ export class ReviewTreatmentPlanDialogComponent {
     map((summary) =>
       summary.project_areas.map((projectArea) => {
         return {
+          id: projectArea.project_area_id,
           name: projectArea.project_area_name,
           totalStands: projectArea.total_stand_count,
           treatedStands: projectArea.prescriptions

src/interface/src/styleguide/modal/modal.component.scss

@@ -13,15 +13,19 @@
   &.xsmall {
     width: 340px;
   }
+
   &.small {
     width: 460px;
   }
+
   &.medium {
     width: 520px;
   }
+
   &.large {
-    width: 730px;
+    width: 750px;
   }
+
   &.full {
     width: 100%;
   }