task-management

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

@@ -0,0 +1,11 @@
+<div fxLayout="row" fxLayoutAlign="start center">
+  <div
+    [ngClass]="{
+      'custom-progress': color === 'white',
+      'custom-progress-gray': color === 'gray'
+    }"
+  >
+    <div class="custom-progress-blue"></div>
+  </div>
+  <span>15%</span>
+</div>

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

@@ -0,0 +1,22 @@
+.custom-progress {
+  width: 100%;
+  height: 7px;
+  border-radius: 30px;
+  background-color: #fff;
+  position: relative;
+}
+
+.custom-progress-gray {
+  width: 100%;
+  height: 7px;
+  border-radius: 30px;
+  background-color: #ccc;
+  position: relative;
+}
+
+.custom-progress-blue {
+  width: 30%;
+  height: 7px;
+  border-radius: 30px;
+  background-color: blue;
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgessComponent } from './progess.component';
+
+describe('ProgessComponent', () => {
+  let component: ProgessComponent;
+  let fixture: ComponentFixture<ProgessComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProgessComponent]
+    });
+    fixture = TestBed.createComponent(ProgessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-progess',
+  templateUrl: './progess.component.html',
+  styleUrls: ['./progess.component.scss'],
+})
+export class ProgessComponent {
+  @Input() color: string = 'white';
+  @Input() showSpan: boolean = false;
+}

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

@@ -0,0 +1,9 @@
+<div class="projects">
+  <p class="bold">Projects</p>
+  <ul>
+    <li>Dashboard Project</li>
+    <li>Mobile App</li>
+    <li>Web Platform</li>
+    <li>Dashboard Design</li>
+  </ul>
+</div>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjecctsComponent } from './projeccts.component';
+
+describe('ProjecctsComponent', () => {
+  let component: ProjecctsComponent;
+  let fixture: ComponentFixture<ProjecctsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjecctsComponent]
+    });
+    fixture = TestBed.createComponent(ProjecctsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -0,0 +1,25 @@
+<section class="task-item">
+  <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>
+
+  <div class="mt-20" fxLayout="row" fxLayoutAlign="space-between start">
+    <ul>
+      <li>
+        <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+      </li>
+    </ul>
+
+    <div class="gap-10" fxLayout="row" fxLayoutAlign="end center">
+      <p class="gap-5" fxLayout="row" fxLayoutAlign="center center">
+        <img src="../../../../../assets/images/chat_icon.svg" alt="" title="" />
+        22
+      </p>
+      <p class="gap-5" fxLayout="row" fxLayoutAlign="center center">
+        <img src="../../../../../assets/images/chat_icon.svg" alt="" title="" />
+        2
+      </p>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskComponent } from './task.component';
+
+describe('TaskComponent', () => {
+  let component: TaskComponent;
+  let fixture: ComponentFixture<TaskComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TaskComponent]
+    });
+    fixture = TestBed.createComponent(TaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -0,0 +1,33 @@
+<div class="team-members">
+  <p class="bold">Team Members</p>
+  <ul>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+      <img src="../../../../assets/images/avatar.png" alt="" title="" />
+      <div>
+        <p>User name</p>
+        <span>Online</span>
+      </div>
+    </li>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+      <img src="../../../../assets/images/avatar.png" alt="" title="" />
+      <div>
+        <p>User name</p>
+        <span>Online</span>
+      </div>
+    </li>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+      <img src="../../../../assets/images/avatar.png" alt="" title="" />
+      <div>
+        <p>User name</p>
+        <span>Online</span>
+      </div>
+    </li>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+      <img src="../../../../assets/images/avatar.png" alt="" title="" />
+      <div>
+        <p>User name</p>
+        <span>Online</span>
+      </div>
+    </li>
+  </ul>
+</div>

src/app/modules/task-management/components/teams-member/teams-member.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamsMemberComponent } from './teams-member.component';
+
+describe('TeamsMemberComponent', () => {
+  let component: TeamsMemberComponent;
+  let fixture: ComponentFixture<TeamsMemberComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TeamsMemberComponent]
+    });
+    fixture = TestBed.createComponent(TeamsMemberComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-teams-member',
+  templateUrl: './teams-member.component.html',
+  styleUrls: ['./teams-member.component.scss']
+})
+export class TeamsMemberComponent {
+
+}

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

@@ -1,45 +1,104 @@
 <section
-  class="task-managament h-100"
+  class="task-managament"
   fxLayout="row wrap"
   fxLayoutAlign="start start"
 >
   <div fxFlex.lt-md="100" fxFlex.gt-sm="20">
     <h1 class="bold">Task Management</h1>
-    <div class="projects">
-      <p class="bold">Projects</p>
-      <ul>
-        <li>Dashboard Project</li>
-        <li>Mobile App</li>
-        <li>Web Platform</li>
-        <li>Dashboard Design</li>
-      </ul>
-    </div>
-    <div class="team-members">
-      <p class="bold">Team Members</p>
-      <ul>
-        <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+    <app-projeccts></app-projeccts>
+    <app-teams-member></app-teams-member>
+  </div>
+  <div
+    fxFlex.lt-md="100"
+    fxFlex.gt-sm="80"
+    fxLayout="column"
+    fxLayoutAlign="space-between stretch"
+    class="gap-20"
+  >
+    <main fxLayout="row" fxLayoutAlign="space-between center">
+      <div
+        class="task-managament__dashboard"
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="50"
+      >
+        <p>Dashboard Project</p>
+        <app-progess [color]="'white'" [showSpan]="true"></app-progess>
+      </div>
+      <ul fxLayout="row" fxLayoutAlign="start center">
+        <li>
           <img src="../../../../assets/images/avatar.png" alt="" title="" />
-          <div>
-            <p>User name</p>
-            <span>Online</span>
-          </div>
         </li>
-        <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+        <li>
           <img src="../../../../assets/images/avatar.png" alt="" title="" />
-          <div>
-            <p>User name</p>
-            <span>Online</span>
-          </div>
         </li>
-        <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+        <li>
           <img src="../../../../assets/images/avatar.png" alt="" title="" />
-          <div>
-            <p>User name</p>
-            <span>Online</span>
-          </div>
         </li>
+        <li class="count">+15</li>
       </ul>
+    </main>
+    <div class="task-managament__tasks">
+      <div
+        fxLayout="row"
+        fxLayoutAlign="space-between center"
+        class="border-bottom-white pb-0-5"
+      >
+        <p class="bold">
+          Total Tasks
+          <span>30</span>
+        </p>
+
+        <ul fxLayout="row" fxLayoutAlign="end center">
+          <li
+            [ngClass]="{ 'active-tab': acctiveNumber === 0 }"
+            (click)="onCChangeTab(0)"
+          >
+            <img src="" alt="" title="" />
+            <span>Board</span>
+          </li>
+          <li
+            (click)="onCChangeTab(1)"
+            [ngClass]="{ 'active-tab': acctiveNumber === 1 }"
+          >
+            <img src="" alt="" title="" /> <span>Table</span>
+          </li>
+          <li
+            (click)="onCChangeTab(2)"
+            [ngClass]="{ 'active-tab': acctiveNumber === 2 }"
+          >
+            <img src="" alt="" title="" /> <span>List</span>
+          </li>
+        </ul>
+      </div>
+
+      <div
+        fxLayout="row"
+        fxLayoutAlign="start start"
+        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>
+        </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>
+        </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>
+        </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>
+        </div>
+      </div>
     </div>
   </div>
-  <div fxFlex.lt-md="100" fxFlex.gt-sm="80"></div>
 </section>

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

@@ -0,0 +1 @@
+

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

@@ -3,8 +3,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-task-management-main',
   templateUrl: './task-management-main.component.html',
-  styleUrls: ['./task-management-main.component.scss']
+  styleUrls: ['./task-management-main.component.scss'],
 })
 export class TaskManagementMainComponent {
-
+  acctiveNumber: number = 0;
+  onCChangeTab(id: number): void {
+    this.acctiveNumber = id;
+  }
 }

src/app/modules/task-management/task-management.module.ts

@@ -5,9 +5,20 @@ import { TaskManagementRoutingModule } from './task-management-routing.module';
 import { TaskManagementComponent } from './task-management.component';
 import { TaskManagementMainComponent } from './task-management-main/task-management-main.component';
 import { SharedModule } from '@shared/shared.module';
+import { TeamsMemberComponent } from './components/teams-member/teams-member.component';
+import { ProjecctsComponent } from './components/projeccts/projeccts.component';
+import { TaskComponent } from './components/task/task.component';
+import { ProgessComponent } from './components/progess/progess.component';
 
 @NgModule({
-  declarations: [TaskManagementComponent, TaskManagementMainComponent],
+  declarations: [
+    TaskManagementComponent,
+    TaskManagementMainComponent,
+    TeamsMemberComponent,
+    ProjecctsComponent,
+    TaskComponent,
+    ProgessComponent,
+  ],
   imports: [CommonModule, TaskManagementRoutingModule, SharedModule],
 })
 export class TaskManagementModule {}

src/app/modules/task-management/task-managemnt-theme.scss

@@ -4,10 +4,11 @@
       background-color: $off-white;
       border-radius: 25px;
       padding: 20px;
+      margin: 20px 0;
       div {
         h1 {
           color: $main-color;
-          margin-bottom: 10px;
+          margin-bottom: 30px;
         }
       }
 
@@ -72,6 +73,138 @@
           }
         }
       }
+
+      main {
+        padding: 0 40px;
+        ul {
+          list-style: none;
+          li {
+            img {
+              width: 40px;
+            }
+          }
+
+          .count {
+            background-color: $white-color;
+            border-radius: 50%;
+            padding: 12px 10px;
+            columns: #707070;
+          }
+        }
+      }
+      &__dashboard {
+        background-color: $light-blue;
+        padding: 20px;
+        border-radius: 20px;
+        color: $white-color;
+        div {
+          span {
+            font-size: 15px;
+            margin: 0 10px;
+          }
+        }
+      }
+
+      &__tasks {
+        padding: 0 40px;
+        ul {
+          list-style: none;
+          li {
+            color: $main-color;
+            transition: all 0.5s;
+            padding: 10px 20px;
+
+            cursor: pointer;
+            &:hover {
+              color: $white-color;
+            }
+          }
+        }
+
+        p {
+          color: $main-color;
+          font-size: 15px;
+          span {
+            background-color: #2f2c8326;
+            border-radius: 50%;
+            padding: 5px;
+            font-size: 12px;
+          }
+        }
+
+        &__type {
+          padding: 20px 0;
+          gap: 10px;
+          .to-do {
+            width: 100%;
+          }
+          h3 {
+            color: $main-color;
+            font-size: 15px;
+          }
+          .to-to-span,
+          .inprogress-span,
+          .review-span,
+          .done-span {
+            background-color: #ff6600;
+            width: 10px;
+            height: 10px;
+            display: inline-block;
+            border-radius: 50%;
+          }
+          .inprogress-span {
+            background-color: #009fe3;
+          }
+
+          .review-span {
+            background-color: #ffed00;
+          }
+
+          .done-span {
+            background-color: #0fbb37;
+          }
+        }
+      }
+
+      .task-item {
+        background-color: $white-color;
+        padding: 10px 10px;
+        margin-top: 10px;
+        border-radius: 10px;
+
+        h1 {
+          color: #252525;
+          font-size: 16px;
+          margin-bottom: 5px;
+        }
+
+        p {
+          font-size: 13px;
+          color: $span-color;
+          margin-bottom: 20px;
+        }
+
+        div {
+          ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            li {
+              padding: 0;
+              margin: 0;
+            }
+          }
+        }
+      }
+
+      .active-tab {
+        color: #009fe3 !important;
+        background-color: #009fe324;
+        border-radius: 10px;
+        color: $white-color;
+        padding: 10px 20px;
+        font-weight: bold;
+      }
     }
   }
 }

src/app/shared/shared.module.ts

@@ -24,6 +24,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatDialogModule } from '@angular/material/dialog';
 import { ErrorFormComponent } from './components/error-form/error-form.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -45,6 +46,7 @@ const MATERIAL_MODULES = [
   MatSlideToggleModule,
   MatButtonModule,
   MatDialogModule,
+  MatProgressBarModule,
 ];
 
 const COMPONENTS = [ErrorFormComponent, WarningComponent, FileUploadComponent];

src/styles.scss

@@ -221,3 +221,15 @@ input.mat-input-element {
 .top-02 {
   margin-top: 0.2rem !important;
 }
+
+.border-bottom-white {
+  border-bottom: 1px solid $white-color;
+}
+
+.pb-0-5 {
+  padding-bottom: 0.5rem;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}