task management

src/app/modules/task-management/components/progess/progess.component.html

@@ -5,7 +5,7 @@
       'custom-progress-gray': color === 'gray'
     }"
   >
-    <div class="custom-progress-blue"></div>
+    <div class="custom-progress-blue" [style.width.%]="value"></div>
   </div>
-  <span>15%</span>
+  <span>{{ value }}%</span>
 </div>

src/app/modules/task-management/components/progess/progess.component.scss

@@ -1,6 +1,6 @@
 .custom-progress {
   width: 100%;
-  height: 7px;
+  height: 9px;
   border-radius: 30px;
   background-color: #fff;
   position: relative;
@@ -8,15 +8,14 @@
 
 .custom-progress-gray {
   width: 100%;
-  height: 7px;
+  height: 9px;
   border-radius: 30px;
   background-color: #ccc;
   position: relative;
 }
 
 .custom-progress-blue {
-  width: 30%;
-  height: 7px;
+  height: 9px;
   border-radius: 30px;
-  background-color: blue;
+  background-color: #2f2c83;
 }

src/app/modules/task-management/components/progess/progess.component.ts

@@ -7,5 +7,6 @@ import { Component, Input } from '@angular/core';
 })
 export class ProgessComponent {
   @Input() color: string = 'white';
+  @Input() value: number = 0;
   @Input() showSpan: boolean = false;
 }

src/app/modules/task-management/components/task/task.component.html

@@ -2,7 +2,12 @@
   <h1>Home Page Design</h1>
   <p>Designing a home page containing meetings, messages, tasks and calendar</p>
 
-  <app-progess [color]="'gray'" [showSpan]="false" class="mt-1"></app-progess>
+  <app-progess
+    [color]="'gray'"
+    [showSpan]="false"
+    class="mt-1"
+    [value]="value"
+  ></app-progess>
 
   <div class="mt-20" fxLayout="row" fxLayoutAlign="space-between start">
     <ul>

src/app/modules/task-management/components/task/task.component.ts

@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-task',
   templateUrl: './task.component.html',
-  styleUrls: ['./task.component.scss']
+  styleUrls: ['./task.component.scss'],
 })
 export class TaskComponent {
-
+  @Input() value: number = 0;
 }

src/app/modules/task-management/task-management-main/task-management-main.component.html

@@ -22,7 +22,11 @@
         fxFlex.gt-sm="50"
       >
         <p>Dashboard Project</p>
-        <app-progess [color]="'white'" [showSpan]="true"></app-progess>
+        <app-progess
+          [color]="'white'"
+          [showSpan]="true"
+          [value]="10"
+        ></app-progess>
       </div>
       <ul fxLayout="row" fxLayoutAlign="start center">
         <li>
@@ -77,26 +81,38 @@
         class="task-managament__tasks__type"
       >
         <div class="to-do" fxFlex.gt-md="25" fxFlex.lt-md="100">
-          <h3 class="bold"><span class="to-to-span"></span> To Do</h3>
-          <app-task></app-task>
-          <app-task></app-task>
+          <h3 class="bold">
+            <span class="to-to-span"></span>
+            <span class="plr-5">To Do</span>
+          </h3>
+          <app-task [value]="15"></app-task>
+          <app-task [value]="15"></app-task>
         </div>
         <div class="in-progress" fxFlex.gt-md="25" fxFlex.lt-md="100">
-          <h3 class="bold"><span class="inprogress-span"></span>In Progress</h3>
-          <app-task></app-task>
-          <app-task></app-task>
-          <app-task></app-task>
-          <app-task></app-task>
+          <h3 class="bold">
+            <span class="inprogress-span"></span>
+            <span class="plr-5">In Progress</span>
+          </h3>
+          <app-task [value]="40"></app-task>
+          <app-task [value]="40"></app-task>
+          <app-task [value]="40"> </app-task>
+          <app-task [value]="40"></app-task>
         </div>
         <div class="need-rivew" fxFlex.gt-md="25" fxFlex.lt-md="100">
-          <h3 class="bold"><span class="review-span"></span> Need Review</h3>
-          <app-task></app-task>
-          <app-task></app-task>
+          <h3 class="bold">
+            <span class="review-span"></span>
+            <span class="plr-5"> <span class="plr-5">Need Review</span> </span>
+          </h3>
+          <app-task [value]="100"></app-task>
+          <app-task [value]="100"></app-task>
         </div>
         <div class="done" fxFlex.gt-md="25" fxFlex.lt-md="100">
-          <h3 class="bold"><span class="done-span"></span>Done</h3>
-          <app-task></app-task>
-          <app-task></app-task>
+          <h3 class="bold">
+            <span class="done-span"></span>
+            <span class="plr-5">Done</span>
+          </h3>
+          <app-task [value]="100"></app-task>
+          <app-task [value]="100"></app-task>
         </div>
       </div>
     </div>

src/styles.scss

@@ -233,3 +233,8 @@ input.mat-input-element {
 .mt-20 {
   margin-top: 20px;
 }
+
+.plr-5 {
+  padding-left: 5px;
+  padding-right: 5px;
+}