feat: add constants to SummaryComponent for improved readability and maintainability

src/app/components/summary/summary.component.html

@@ -3,41 +3,39 @@
     [title]="'Join 360'"
     [description]="'summary.headlineDescription' | translate"
   ></app-headline>
+  <!--  Show summary if not loading -->
   @if (!isLoading) {
   <div class="content">
     <div class="summary-container">
-      <!-- Top Frame -->
+      <!-- TOP CONTAINER -->
-      <div class="top-frame">
+      <div class="top-container">
+        <!-- Loop through statuses -->
+        @for (status of UPPER_STATUSES; track status) {
         <div class="todo-done" routerLink="/board">
           <div class="circle">
-            <div class="inline">
+            <!-- If the status is 'todo', display the 'pencil' icon, otherwise display the 'rake' icon -->
-              <img src="./../../../assets/img/summary/pencil.svg" alt="" />
+            @if (status === 'todo') {
-            </div>
+            <img src="./../../../assets/img/summary/pencil.svg" alt="Todo" />
+            } @else {
+            <img src="./../../../assets/img/summary/rake.svg" alt="Done" />
+            }
           </div>
           <div class="details">
-            <span>{{ taskStatusCounts.get("todo") || 0 }}</span>
+            <span>{{ taskStatusCounts.get(status) || 0 }}</span>
-            <p>{{ "summary.todo" | translate }}</p>
+            <p>{{ STATUS_LABELS[status] | translate }}</p>
-          </div>
-        </div>
-        <div class="todo-done" routerLink="/board">
-          <div class="circle">
-            <img src="./../../../assets/img/summary/rake.svg" alt="" />
-          </div>
-          <div class="details">
-            <span>{{ taskStatusCounts.get("done") || 0 }}</span>
-            <p>{{ "summary.done" | translate }}</p>
           </div>
         </div>
+        }
       </div>
 
-      <!-- Middle Frame -->
+      <!-- MIDDLE CONTAINER -->
-      <div class="middle-frame">
+      <div class="middle-container">
         <div class="urgent" routerLink="/board">
           <div class="left">
             <img src="./../../../assets/img/summary/urgent.svg" alt="" />
             <div class="details">
               <span>{{ urgentTasks.length || 0 }}</span>
-              <p>{{ "summary.urgent" | translate }}</p>
+              <p>{{ PRIORITY_LABELS[PRIORITIES[2]] | translate }}</p>
             </div>
           </div>
           <div class="line"></div>
@@ -58,8 +56,8 @@
         </div>
       </div>
 
-      <!-- Bottom Frame -->
+      <!-- BOTTOM CONTAINER -->
-      <div class="bottom-frame">
+      <div class="bottom-container">
         <div class="tasks" routerLink="/board">
           <div class="details">
             <span>{{ totalTasks || 0 }}</span>
@@ -70,40 +68,32 @@
             </p>
           </div>
         </div>
+
+        <!-- Loop through statuses -->
+        @for (status of LOWER_STATUSES; track status) {
         <div class="tasks" routerLink="/board">
           <div class="details">
-            <span>{{ taskStatusCounts.get("inprogress") || 0 }}</span>
+            <span>{{ taskStatusCounts.get(status) || 0 }}</span>
             <p>
-              {{ "summary.taskProgress0" | translate }}<br />{{
+              {{ STATUS_LABELS[status] | translate }}
-                "summary.taskProgress1" | translate
-              }}
-            </p>
-          </div>
-        </div>
-        <div class="tasks" routerLink="/board">
-          <div class="details">
-            <span>{{ taskStatusCounts.get("awaitfeedback") || 0 }}</span>
-            <p>
-              {{ "summary.taskAwaitingFeedback0" | translate }}<br />{{
-                "summary.taskAwaitingFeedback1" | translate
-              }}
             </p>
           </div>
         </div>
+        }
       </div>
     </div>
 
-    <!-- Greeting -->
+    <!-- GREETING CONTAINER -->
     <div class="welcome-container">
       <p>{{ greeting }},</p>
-      @if (currentUser) {
       <span id="welcome-user">
-        {{ currentUser["firstName"] }}<br />
+        {{ currentUser!.firstName }}<br />
-        {{ currentUser["lastName"] }}
+        {{ currentUser!.lastName }}
       </span>
-      }
     </div>
   </div>
+
+  <!-- Show loading spinner if loading -->
   } @else {
   <div class="content">
     <div class="summary-container">

src/app/components/summary/summary.component.scss

@@ -37,8 +37,8 @@
   height: 562px;
 }
 
-.top-frame,
+.top-container,
-.bottom-frame {
+.bottom-container {
   display: flex;
   justify-content: space-between;
 }

src/app/components/summary/summary.component.ts

@@ -5,10 +5,17 @@ import { Task } from '../../interfaces/task.interface';
 import { TaskService } from '../../services/task.service';
 import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component';
 import { finalize, Subject, takeUntil } from 'rxjs';
-
 import { UserService } from '../../services/user.service';
 import { User } from '../../interfaces/user.interface';
 import { HeadlineComponent } from '../../shared/components/headline/headline.component';
+import {
+  STATUS_LABELS,
+  TaskStatus,
+} from '../../constants/task-status.constants';
+import {
+  PRIORITIES,
+  PRIORITY_LABELS,
+} from '../../constants/task-priority.constants';
 
 @Component({
   selector: 'app-summary',
@@ -24,10 +31,15 @@ import { HeadlineComponent } from '../../shared/components/headline/headline.com
 })
 export class SummaryComponent implements OnInit, OnDestroy {
   allTasks: Task[] = [];
-  nextUrgendTask: number[] = [];
   currentUser: User | null = null;
   isLoading = false;
 
+  readonly UPPER_STATUSES = [TaskStatus.TODO, TaskStatus.DONE];
+  readonly LOWER_STATUSES = [TaskStatus.IN_PROGRESS, TaskStatus.AWAIT_FEEDBACK];
+  readonly PRIORITIES = PRIORITIES;
+  readonly PRIORITY_LABELS = PRIORITY_LABELS;
+  readonly STATUS_LABELS = STATUS_LABELS;
+
   private destroy$ = new Subject<void>();
 
   constructor(
@@ -37,20 +49,26 @@ export class SummaryComponent implements OnInit, OnDestroy {
   ) {}
 
   /**
-   * This method loads all tasks from the TaskService.
+   * This method performs the following actions:
+   * - Calls the loadAllTasks method to load all tasks.
+   * - Calls the loadCurrentUser method to load the current user.
    */
   ngOnInit(): void {
     this.loadAllTasks();
     this.loadCurrentUser();
   }
 
+  /**
+   * Emits a value to the `destroy$` subject and completes it to clean up
+   * subscriptions and prevent memory leaks.
+   */
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
   }
 
   /**
-   * Loads all tasks from the TaskService.
+   * Loads all tasks from the TaskService and sets them to the `allTasks` property.
    */
   loadAllTasks(): void {
     this.isLoading = true;
@@ -71,6 +89,9 @@ export class SummaryComponent implements OnInit, OnDestroy {
       });
   }
 
+  /**
+   * Loads the current user from the UserService and sets it to the `currentUser` property.
+   */
   loadCurrentUser(): void {
     this.userService
       .getCurrentUser()