fill data

src/app/components/board/board.component.scss

@@ -144,7 +144,7 @@ section {
   }
 }
 
-@media screen and (max-width: 910px) {
+@media screen and (max-width: 897px) {
   .search {
     input {
       width: 220px;

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

@@ -13,7 +13,7 @@
             <img src="./../../../assets/img/summary/pencil.svg" alt="" />
           </div>
           <div class="details">
-            <span>1</span>
+            <span>{{ todoTasksCount }}</span>
             <p>To-do</p>
           </div>
         </div>
@@ -22,7 +22,7 @@
             <img src="./../../../assets/img/summary/rake.svg" alt="" />
           </div>
           <div class="details">
-            <span>1</span>
+            <span>{{ doneTasksCount }}</span>
             <p>Done</p>
           </div>
         </div>
@@ -52,19 +52,19 @@
       <div class="bottom-frame">
         <div class="tasks" routerLink="/board">
           <div class="details">
-            <span>5</span>
+            <span>{{ allTasksCount }}</span>
             <p>Task in Board</p>
           </div>
         </div>
         <div class="tasks" routerLink="/board">
           <div class="details">
-            <span>2</span>
+            <span>{{ inprogressTasksCount }}</span>
             <p>Task in Progress</p>
           </div>
         </div>
         <div class="tasks" routerLink="/board">
           <div class="details">
-            <span>2</span>
+            <span>{{ awaitfeedbackTasksCount }}</span>
             <p>Awaiting Feedback</p>
           </div>
         </div>

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

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { TaskService } from '../../services/task.service';
 
 @Component({
   selector: 'app-summary',
@@ -8,4 +9,35 @@ import { RouterModule } from '@angular/router';
   templateUrl: './summary.component.html',
   styleUrl: './summary.component.scss',
 })
-export class SummaryComponent {}
+export class SummaryComponent {
+  allTasksCount: Number = 0;
+  todoTasksCount: Number = 0;
+  inprogressTasksCount: Number = 0;
+  awaitfeedbackTasksCount: Number = 0;
+  doneTasksCount: Number = 0;
+
+  constructor(private taskService: TaskService) {
+    this.taskService.tasksLoaded.subscribe(() => {
+      this.updateTasksCount();
+      this.updateAllTasksCount();
+    });
+  }
+
+  updateAllTasksCount() {
+    this.allTasksCount = this.taskService.allTasks.length;
+  }
+
+  updateTasksCount() {
+    this.todoTasksCount = this.countTasks('todo');
+    this.inprogressTasksCount = this.countTasks('inprogress');
+    this.awaitfeedbackTasksCount = this.countTasks('awaitfeedback');
+    this.doneTasksCount = this.countTasks('done');
+  }
+
+  countTasks(status: string): number {
+    const filteredTasks = this.taskService.allTasks.filter(
+      (task) => task.status === status
+    );
+    return filteredTasks.length;
+  }
+}

src/app/services/task.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core';
+import { EventEmitter, Injectable, inject } from '@angular/core';
 import {
   Firestore,
   collection,
@@ -13,6 +13,7 @@ import { Task } from '../interfaces/task.interface';
 })
 export class TaskService {
   firestore: Firestore = inject(Firestore);
+  tasksLoaded: EventEmitter<void> = new EventEmitter<void>();
 
   allTasks: Task[] = [];
   filteredTasks: Task[] = [];
@@ -30,6 +31,7 @@ export class TaskService {
         const taskData = { ...(element.data() as Task), id: element.id };
         this.allTasks.push(taskData);
       });
+      this.tasksLoaded.emit();
     });
   }