From 23cfb554f11ea5e2e788625f8645d9449e3fedbb Mon Sep 17 00:00:00 2001
From: develite98 <phongcao3091998@gmail.com>
Date: Wed, 8 Nov 2023 01:30:34 +0700
Subject: [PATCH] feat(): update task swimlane

---
 .../messenger/messenger.component.html        | 25 ++++-----
 apps/mix-cms/src/assets/styles/variables.scss |  2 +
 .../src/assets/styles/variables.scss          |  2 +
 libs/mix-lib/src/model/core/mix-task.model.ts | 32 ++++++------
 .../task-create/task-create.component.html    | 51 ++++++++++++-------
 .../task-create/task-create.component.ts      | 11 ++++
 .../task-detail-modal.component.ts            |  6 +--
 .../task-dnd-list.component.html              | 26 +++++-----
 .../task-dnd-list.component.scss              |  6 ---
 .../task-dnd-list/task-dnd-list.component.ts  | 25 +++++----
 .../task-group-list.component.html            | 16 ++++++
 .../task-group-list.component.scss            | 14 +++++
 .../task-group-list.component.ts              | 27 ++++++++++
 .../task-parent-card.component.html           | 13 +++++
 .../task-parent-card.component.scss           | 23 +++++++++
 .../task-parent-card.component.ts             | 29 +++++++++++
 .../src/modules/task-manage/project.json      |  8 +--
 .../modules/task-manage/store/task.store.ts   | 16 +++++-
 .../task-manage/task-manage.component.html    | 47 +++++++++++------
 .../task-manage/task-manage.component.scss    | 46 ++++++++++-------
 .../task-manage/task-manage.component.ts      | 22 +++++---
 tsconfig.base.json                            |  6 +--
 22 files changed, 320 insertions(+), 133 deletions(-)
 create mode 100644 libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.html
 create mode 100644 libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.scss
 create mode 100644 libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.ts
 create mode 100644 libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.html
 create mode 100644 libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.scss
 create mode 100644 libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts

diff --git a/apps/mix-cms/src/app/components/messenger/messenger.component.html b/apps/mix-cms/src/app/components/messenger/messenger.component.html
index 372924f2..fdc4b375 100644
--- a/apps/mix-cms/src/app/components/messenger/messenger.component.html
+++ b/apps/mix-cms/src/app/components/messenger/messenger.component.html
@@ -1,28 +1,25 @@
 <div class="messenger-box">
   <div class="messenger-box__header">
     <span class="messenger-box__header-title"> Global Message </span>
-    <!-- <button [appearance]="'outline'"
-            [size]="'s'"
-            (click)="toggleMinimize()"
-            tuiButton>
-      {{ minimize ? 'Show' : 'Close'}}
-    </button> -->
   </div>
 
-  <div #messageContainer
-       class="messenger-box__content">
+  <div #messageContainer class="messenger-box__content">
     <span class="messenger-box__date">{{ date | date }}</span>
     <ng-container *ngFor="let message of displayMessages">
-      <mix-messenger-message [fromAnother]="message.fromAnother"
-                             [message]="message"></mix-messenger-message>
+      <mix-messenger-message
+        [fromAnother]="message.fromAnother"
+        [message]="message"
+      ></mix-messenger-message>
     </ng-container>
   </div>
 
   <div class="messenger-box__chat-zone">
-    <tui-text-area [expandable]="false"
-                   [formControl]="message"
-                   [maxLength]="100"
-                   (keydown.enter)="submitMessage($event)">
+    <tui-text-area
+      [expandable]="false"
+      [formControl]="message"
+      [maxLength]="100"
+      (keydown.enter)="submitMessage($event)"
+    >
       Press enter to send message
     </tui-text-area>
     <mix-emoji-picker (emojiSelect)="emojiSelect($event)"></mix-emoji-picker>
diff --git a/apps/mix-cms/src/assets/styles/variables.scss b/apps/mix-cms/src/assets/styles/variables.scss
index 9e873c5e..1b1211ef 100644
--- a/apps/mix-cms/src/assets/styles/variables.scss
+++ b/apps/mix-cms/src/assets/styles/variables.scss
@@ -53,6 +53,8 @@ html {
   --text-size-l: 1.125rem;
   --text-size-xl: 1.25rem;
   --text-size-xxl: 1.5rem;
+
+  --blue-02: #008aa8;
 }
 
 html[mode='dark'] {
diff --git a/apps/mix-kanban/src/assets/styles/variables.scss b/apps/mix-kanban/src/assets/styles/variables.scss
index 9e873c5e..1b1211ef 100644
--- a/apps/mix-kanban/src/assets/styles/variables.scss
+++ b/apps/mix-kanban/src/assets/styles/variables.scss
@@ -53,6 +53,8 @@ html {
   --text-size-l: 1.125rem;
   --text-size-xl: 1.25rem;
   --text-size-xxl: 1.5rem;
+
+  --blue-02: #008aa8;
 }
 
 html[mode='dark'] {
diff --git a/libs/mix-lib/src/model/core/mix-task.model.ts b/libs/mix-lib/src/model/core/mix-task.model.ts
index 5466f9f8..a7250061 100644
--- a/libs/mix-lib/src/model/core/mix-task.model.ts
+++ b/libs/mix-lib/src/model/core/mix-task.model.ts
@@ -1,18 +1,3 @@
-export interface MixTask {
-  title: string;
-  id: number;
-  createdDateTime: Date;
-  description?: string;
-  taskStatus: 'New' | 'ReadyForTest' | 'InProgress' | 'Done';
-  assignee: string;
-}
-
-export enum TaskType {
-  STORY = 'Story',
-  TASK = 'Task',
-  BUG = 'Bug',
-}
-
 export enum TaskStatus {
   BACKLOG = 'Backlog',
   SELECTED = 'Selected',
@@ -22,11 +7,18 @@ export enum TaskStatus {
 
 export const TaskStatusDisplay = {
   [TaskStatus.BACKLOG]: 'Backlog',
-  [TaskStatus.SELECTED]: 'Selected for Development',
+  [TaskStatus.SELECTED]: 'Ready for Dev',
   [TaskStatus.IN_PROGRESS]: 'In progress',
   [TaskStatus.DONE]: 'Done',
 };
 
+export const TaskStatusColors = {
+  [TaskStatus.BACKLOG]: 'rgb(112, 114, 143)',
+  [TaskStatus.SELECTED]: 'rgb(228, 64, 87)',
+  [TaskStatus.IN_PROGRESS]: 'rgb(228, 124, 64)',
+  [TaskStatus.DONE]: 'rgb(168, 228, 64)',
+};
+
 export enum TaskPriority {
   LOWEST = 'Lowest',
   LOW = 'Low',
@@ -51,6 +43,13 @@ export const TaskPriorityIcon = {
   [TaskPriority.LOWEST]: 'arrow_downward',
 };
 
+export enum TaskType {
+  STORY = 'Story',
+  TASK = 'Task',
+  BUG = 'Bug',
+  SWIMLANE = 'Swimlane',
+}
+
 export const TaskTypeIcons = {
   [TaskType.BUG]: 'assets/images/tasks/bug.svg',
   [TaskType.TASK]: 'assets/images/tasks/task.svg',
@@ -74,4 +73,5 @@ export interface MixTaskNew {
   userIds: string[];
   projectId?: string;
   priority: number;
+  parentTaskId?: number;
 }
diff --git a/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html b/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html
index 991cfda7..b05513cb 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html
+++ b/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html
@@ -1,20 +1,27 @@
-<div class="task-create"
-     [formGroup]="taskForm">
+<div class="task-create" [formGroup]="taskForm">
   <div class="text-l">Create Task</div>
 
-  <div class="mt-4 mb-1 text-sub text-500">Task Type</div>
-  <mix-select [items]="typeItems"
-              [labelProcess]="typeLabel"
-              formControlName="type"></mix-select>
+  <ng-container *ngIf="parentTask">
+    <div class="mt-4 mb-1 text-sub text-500">Task Type</div>
+    <mix-select
+      [items]="typeItems"
+      [labelProcess]="typeLabel"
+      formControlName="type"
+    ></mix-select>
 
-  <div class="mt-3 mb-1 text-sub text-500">Task Priority</div>
-  <mix-select [items]="prorityItems"
-              [labelProcess]="priorityLabel"
-              formControlName="taskPriority"></mix-select>
+    <div class="mt-3 mb-1 text-sub text-500">Task Priority</div>
+    <mix-select
+      [items]="prorityItems"
+      [labelProcess]="priorityLabel"
+      formControlName="taskPriority"
+    ></mix-select>
+  </ng-container>
 
   <div class="mt-3 mb-1 text-sub text-500">Short Summary</div>
-  <mix-input formControlName="title"
-             placeHolder="Quick description about your task"></mix-input>
+  <mix-input
+    formControlName="title"
+    placeHolder="Quick description about your task"
+  ></mix-input>
 
   <div class="mt-3 mb-1 text-sub text-500">Description</div>
   <mix-rich-text-editor formControlName="description"></mix-rich-text-editor>
@@ -22,12 +29,18 @@
   <div class="mt-3 mb-1 text-sub text-500">Reporter</div>
   <mix-user-select formControlName="reporter"></mix-user-select>
 
-  <div *ngIf="loadingState$ | async as state"
-       class="mt-4 d-flex justify-content-end align-items-center gap-2">
-    <mix-button [loading]="state === 'Loading'"
-                (click)="createTask()">Create</mix-button>
-    <mix-button type="outline"
-                [disabled]="state === 'Loading'"
-                (click)="dialogRef.close()">Cancel</mix-button>
+  <div
+    *ngIf="loadingState$ | async as state"
+    class="mt-4 d-flex justify-content-end align-items-center gap-2"
+  >
+    <mix-button [loading]="state === 'Loading'" (click)="createTask()"
+      >Create</mix-button
+    >
+    <mix-button
+      type="outline"
+      [disabled]="state === 'Loading'"
+      (click)="dialogRef.close()"
+      >Cancel</mix-button
+    >
   </div>
 </div>
diff --git a/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.ts b/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.ts
index 4fa2e692..b7573d6d 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.ts
+++ b/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.ts
@@ -45,6 +45,7 @@ export class TaskCreateComponent extends BaseComponent {
   public taskStore = inject(TaskStore);
   public dialogRef = inject(DialogRef);
   public toast = inject(HotToastService);
+  public parentTask?: MixTaskNew;
 
   public typeLabel = (type: TaskType) => type;
   public typeItems = [TaskType.BUG, TaskType.STORY, TaskType.TASK];
@@ -66,8 +67,18 @@ export class TaskCreateComponent extends BaseComponent {
     taskStatus: new FormControl(TaskStatus.BACKLOG),
     reporter: new FormControl(),
     priority: new FormControl(999),
+    parentTaskId: new FormControl(),
   });
 
+  public ngOnInit() {
+    this.parentTask = this.dialogRef.data?.['parentTask'];
+    if (this.parentTask) {
+      this.taskForm.controls.parentTaskId.patchValue(this.parentTask.id);
+    } else {
+      this.taskForm.controls.type.patchValue(TaskType.SWIMLANE);
+    }
+  }
+
   public createTask() {
     if (FormHelper.validateForm(this.taskForm)) {
       this.taskService
diff --git a/libs/mix-share/src/modules/task-manage/components/task-detail-modal/task-detail-modal.component.ts b/libs/mix-share/src/modules/task-manage/components/task-detail-modal/task-detail-modal.component.ts
index c93ca8d8..5fadf534 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-detail-modal/task-detail-modal.component.ts
+++ b/libs/mix-share/src/modules/task-manage/components/task-detail-modal/task-detail-modal.component.ts
@@ -91,10 +91,10 @@ export class TaskDetailModalComponent extends BaseComponent implements OnInit {
         .saveTask(value as MixTaskNew)
         .pipe(this.observerLoadingState())
         .subscribe({
-          next: (result) => {
+          next: () => {
             this.toast.success('Success update your task');
-            this.taskStore.addTask(result as unknown as MixTaskNew, 'Update');
-            if (close )this.dialogRef.close();
+            this.taskStore.addTask(value as unknown as MixTaskNew, 'Update');
+            if (close) this.dialogRef.close();
           },
           error: () => {
             this.toast.error('Something error, please try again');
diff --git a/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.html b/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.html
index 318b04e8..0a0f48da 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.html
+++ b/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.html
@@ -1,17 +1,17 @@
 <div class="task-list">
-  <div class="title text-uppercase text-truncate">
-    {{ TaskStatusDisplay[status] }} {{ tasks.length }}
-  </div>
-
-  <div class="items"
-       [cdkDropListData]="tasks"
-       [id]="status"
-       (cdkDropListDropped)="drop($event)"
-       cdkDropList>
-    <mix-task-card *ngFor="let task of tasks"
-                   [cdkDragData]="task"
-                   [task]="task"
-                   cdkDrag>
+  <div
+    class="items"
+    [cdkDropListData]="tasks"
+    [id]="status"
+    (cdkDropListDropped)="drop($event)"
+    cdkDropList
+  >
+    <mix-task-card
+      *ngFor="let task of tasks"
+      [cdkDragData]="task"
+      [task]="task"
+      cdkDrag
+    >
     </mix-task-card>
   </div>
 </div>
diff --git a/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.scss b/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.scss
index 1a305d54..2c42fec7 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.scss
+++ b/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.scss
@@ -15,12 +15,6 @@
   .items {
     flex-grow: 1;
   }
-
-  .title {
-    margin-top: 8px;
-    margin-bottom: 14px;
-    padding-left: 8px;
-  }
 }
 
 .cdk-drag-preview {
diff --git a/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.ts b/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.ts
index 59711af8..1e660d07 100644
--- a/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.ts
+++ b/libs/mix-share/src/modules/task-manage/components/task-dnd-list/task-dnd-list.component.ts
@@ -14,19 +14,14 @@ import {
   ViewEncapsulation,
   inject,
 } from '@angular/core';
-import {
-  MixTask,
-  MixTaskNew,
-  TaskStatus,
-  TaskStatusDisplay,
-} from '@mixcore/lib/model';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MixTaskNew, TaskStatus } from '@mixcore/lib/model';
+import { HotToastService } from '@ngneat/hot-toast';
 import { Observable, combineLatest, forkJoin } from 'rxjs';
-import { TaskCardComponent } from '../task-card/task-card.component';
 import { TaskFilterStore } from '../../store/filter.store';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { TaskStore } from '../../store/task.store';
 import { TaskService } from '../../store/task.service';
-import { HotToastService } from '@ngneat/hot-toast';
+import { TaskStore } from '../../store/task.store';
+import { TaskCardComponent } from '../task-card/task-card.component';
 
 @Component({
   selector: 'mix-task-dnd-list',
@@ -43,8 +38,7 @@ export class TaskDndListComponent implements OnInit {
   public taskService = inject(TaskService);
   public toast = inject(HotToastService);
 
-  public TaskStatusDisplay = TaskStatusDisplay;
-
+  @Input() public parentTaskId?: number;
   @Input() public status!: TaskStatus;
   @Input() public listTasks!: Observable<MixTaskNew[]>;
   public tasks: MixTaskNew[] = [];
@@ -96,7 +90,12 @@ export class TaskDndListComponent implements OnInit {
 
   private updateListPosition(newList: MixTaskNew[]) {
     const requests = newList.map((issue, idx) => {
-      const newIssueWithNewPosition = { ...issue, priority: idx + 1 };
+      const newIssueWithNewPosition = {
+        ...issue,
+        priority: idx + 1,
+        parentTaskId: this.parentTaskId,
+      };
+
       this.taskStore.addTask(newIssueWithNewPosition, 'Update');
       return this.taskService.saveTask(newIssueWithNewPosition);
     });
diff --git a/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.html b/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.html
new file mode 100644
index 00000000..4d3c7a28
--- /dev/null
+++ b/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.html
@@ -0,0 +1,16 @@
+<mix-task-parent-card
+  [task]="parentTask"
+  [open]="open()"
+  (expandClick)="toggleExpand()"
+></mix-task-parent-card>
+
+<div class="task-group" cdkDropListGroup *ngIf="open()">
+  <mix-task-dnd-list
+    *ngFor="let status of taskStatuses"
+    class="task-dnd-list"
+    [listTasks]="store.getTaskByStatus(status, parentTask.id)"
+    [status]="status"
+    [parentTaskId]="parentTask.id"
+  >
+  </mix-task-dnd-list>
+</div>
diff --git a/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.scss b/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.scss
new file mode 100644
index 00000000..82178a34
--- /dev/null
+++ b/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.scss
@@ -0,0 +1,14 @@
+.task-group {
+  display: flex;
+  width: 100%;
+  gap: 12px;
+}
+
+.task-dnd-list {
+  display: block;
+  min-height: 160px;
+  min-width: var(--task-min-col-w);
+  width: var(--task-col-w);
+  background-color: var(--task-list-bg);
+  border-radius: 0.125rem;
+}
diff --git a/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.ts b/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.ts
new file mode 100644
index 00000000..83527431
--- /dev/null
+++ b/libs/mix-share/src/modules/task-manage/components/task-group-list/task-group-list.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, inject, signal } from '@angular/core';
+import { MixTaskNew, TaskStatus, TaskStatusDisplay } from '@mixcore/lib/model';
+import { TaskStore } from '../../store/task.store';
+import { TaskDndListComponent } from '../task-dnd-list/task-dnd-list.component';
+import { TaskParentCardComponent } from '../task-parent-card/task-parent-card.component';
+
+@Component({
+  selector: 'mix-task-group-list',
+  standalone: true,
+  imports: [CommonModule, TaskDndListComponent, TaskParentCardComponent],
+  templateUrl: './task-group-list.component.html',
+  styleUrls: ['./task-group-list.component.scss'],
+})
+export class TaskGroupListComponent {
+  @Input() public parentTask!: MixTaskNew;
+  @Input() public showHeader = false;
+  @Input() public taskStatuses: TaskStatus[] = [];
+
+  public TaskStatusDisplay = TaskStatusDisplay;
+  public store = inject(TaskStore);
+  public open = signal(true);
+
+  public toggleExpand() {
+    this.open.set(!this.open());
+  }
+}
diff --git a/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.html b/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.html
new file mode 100644
index 00000000..c8d3d309
--- /dev/null
+++ b/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.html
@@ -0,0 +1,13 @@
+<div class="w-100 task-parent-card text-m" [class.--open]="open">
+  <mix-button [size]="'xs'" [type]="'icon'" (click)="expandClick.emit()"
+    ><span class="mix-icon expand-icon text-xxl">expand_more</span>
+  </mix-button>
+
+  <span>
+    {{ task.title }}
+  </span>
+
+  <mix-button class="ms-2" [size]="'xs'" [iconBtn]="true" (click)="addTask()">
+    <span class="mix-icon text-xxl">add</span>
+  </mix-button>
+</div>
diff --git a/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.scss b/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.scss
new file mode 100644
index 00000000..7515e756
--- /dev/null
+++ b/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.scss
@@ -0,0 +1,23 @@
+.task-parent-card {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 0.8rem 0.8rem 0.8rem 0rem;
+  border-bottom: solid 1px #eceff4;
+  transition: all 0.2s ease-in-out;
+
+  .expand-icon {
+    transition: all 0.2s ease-in-out;
+    transform: rotate(-90deg);
+  }
+
+  &.--open {
+    color: var(--blue-02, #008aa8);
+    border-bottom: unset;
+
+    .expand-icon {
+      transform: rotate(0deg);
+      color: var(--blue-02);
+    }
+  }
+}
diff --git a/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts b/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts
new file mode 100644
index 00000000..070f63ff
--- /dev/null
+++ b/libs/mix-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { MixTaskNew } from '@mixcore/lib/model';
+import { MixButtonComponent } from '@mixcore/ui/button';
+import { DialogService } from '@ngneat/dialog';
+import { TaskCreateComponent } from '../task-create/task-create.component';
+
+@Component({
+  selector: 'mix-task-parent-card',
+  standalone: true,
+  imports: [CommonModule, MixButtonComponent],
+  templateUrl: './task-parent-card.component.html',
+  styleUrls: ['./task-parent-card.component.scss'],
+})
+export class TaskParentCardComponent {
+  @Input() public task!: MixTaskNew;
+  @Input() public open = true;
+  @Output() public expandClick = new EventEmitter();
+  public dialog = inject(DialogService);
+
+  public addTask() {
+    this.dialog.open(TaskCreateComponent, {
+      width: 800,
+      data: {
+        parentTask: this.task,
+      },
+    });
+  }
+}
diff --git a/libs/mix-share/src/modules/task-manage/project.json b/libs/mix-share/src/modules/task-manage/project.json
index 6eab71ba..e62c15a5 100644
--- a/libs/mix-share/src/modules/task-manage/project.json
+++ b/libs/mix-share/src/modules/task-manage/project.json
@@ -1,16 +1,16 @@
 {
-  "name": "@mixcore/share/stores",
+  "name": "@mixcore/share/task",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
-  "sourceRoot": "libs/mix-share/src/stores",
+  "sourceRoot": "libs/mix-share/src/task-manage",
   "targets": {
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": [
-          "libs/mix-share/src/stores/**/*.ts",
-          "libs/mix-share/src/stores/**/*.html"
+          "libs/mix-share/src/task-manage/**/*.ts",
+          "libs/mix-share/src/task-manage/**/*.html"
         ]
       }
     }
diff --git a/libs/mix-share/src/modules/task-manage/store/task.store.ts b/libs/mix-share/src/modules/task-manage/store/task.store.ts
index f9be8311..1ed46ac5 100644
--- a/libs/mix-share/src/modules/task-manage/store/task.store.ts
+++ b/libs/mix-share/src/modules/task-manage/store/task.store.ts
@@ -21,11 +21,23 @@ export class TaskStore extends BaseCRUDStore<MixTaskNew> {
     Description: 'description',
   };
 
-  public getTaskByStatus = (status: TaskStatus) => {
+  public getTaskByStatus = (status: TaskStatus, parentTaskId: number) => {
     return this.select((s) => s).pipe(
       map((s) => {
         return s.data
-          .filter((x) => x.taskStatus === status)
+          .filter(
+            (x) => x.taskStatus === status && x.parentTaskId === parentTaskId
+          )
+          .sort((a, b) => a.priority - b.priority);
+      })
+    );
+  };
+
+  public getParentTasks = () => {
+    return this.select((s) => s).pipe(
+      map((s) => {
+        return s.data
+          .filter((x) => !x.parentTaskId)
           .sort((a, b) => a.priority - b.priority);
       })
     );
diff --git a/libs/mix-share/src/modules/task-manage/task-manage.component.html b/libs/mix-share/src/modules/task-manage/task-manage.component.html
index 8924706b..ce1e6134 100644
--- a/libs/mix-share/src/modules/task-manage/task-manage.component.html
+++ b/libs/mix-share/src/modules/task-manage/task-manage.component.html
@@ -1,24 +1,41 @@
-<div *ngIf="loadingState() as loading"
-     class="data-table-page">
+<div *ngIf="loadingState() as loading" class="data-table-page task-manage">
   <div class="data-table-page__main-container">
-    <mix-sub-toolbar [description]="'listing'"
-                     [title]="'Kanban Board' | transloco">
+    <mix-sub-toolbar
+      [description]="'listing'"
+      [title]="'Kanban Board' | transloco"
+    >
       <div class="toolbar-separator"></div>
-      <mix-button (click)="addTask()"
-                  size="s"><span class="material-symbols-outlined"> add </span>&nbsp;
-        {{ 'Create item' | transloco }}</mix-button>
+      <mix-button (click)="addTask()" size="s"
+        ><span class="material-symbols-outlined"> add </span>&nbsp;
+        {{ 'New' | transloco }}</mix-button
+      >
     </mix-sub-toolbar>
 
     <mix-task-filter></mix-task-filter>
 
-    <div *ngIf="store.vm$ | async as vm"
-         class="task-manage__main-view"
-         cdkDropListGroup>
-      <mix-task-dnd-list *ngFor="let status of taskStatuses"
-                         class="task-dnd-list"
-                         [listTasks]="store.getTaskByStatus(status)"
-                         [status]="status">
-      </mix-task-dnd-list>
+    <div class="task-manage__header">
+      <div
+        class="title text-uppercase text-truncate"
+        *ngFor="let status of taskStatuses"
+        [style.--color]="TaskStatusColors[status]"
+      >
+        {{ TaskStatusDisplay[status] }}
+      </div>
+    </div>
+
+    <div
+      *ngIf="store.vm$ | async as vm"
+      class="task-manage__main-view"
+      cdkDropListGroup
+    >
+      <ng-container *ngIf="store.getParentTasks() | async as tasks">
+        <mix-task-group-list
+          *ngFor="let task of tasks; trackByProp: 'id'"
+          [parentTask]="task"
+          [taskStatuses]="taskStatuses"
+        >
+        </mix-task-group-list>
+      </ng-container>
     </div>
   </div>
 </div>
diff --git a/libs/mix-share/src/modules/task-manage/task-manage.component.scss b/libs/mix-share/src/modules/task-manage/task-manage.component.scss
index e0d06187..7b65d394 100644
--- a/libs/mix-share/src/modules/task-manage/task-manage.component.scss
+++ b/libs/mix-share/src/modules/task-manage/task-manage.component.scss
@@ -1,10 +1,35 @@
 .task-manage {
+  --task-min-col-w: 200px;
+  --task-col-w: 320px;
+  --task-list-bg: rgb(244 245 247);
+  --task-col-padding: 8px 16px;
+
+  &__header {
+    display: flex;
+    width: 100%;
+    gap: 12px;
+    padding: 0px 16px;
+    margin-top: 16px;
+
+    .title {
+      --color: #fff;
+
+      padding: var(--task-col-padding);
+      min-width: var(--task-min-col-w);
+      width: var(--task-col-w);
+      background-color: var(--task-list-bg);
+      border-left: 6px solid var(--color);
+      border-radius: 0.125rem;
+    }
+  }
+
   &__main-view {
     width: 100%;
     height: 100%;
-    padding: 16px;
+    padding: 0px 16px;
     display: flex;
-    gap: 12px;
+    flex-direction: column;
+    overflow: auto;
   }
 
   &__filter {
@@ -16,20 +41,3 @@
     }
   }
 }
-
-.ad-task-container {
-  width: 800px;
-  padding: 12px 12px 18px 12px;
-  height: 900px;
-  display: flex;
-  flex-direction: column;
-}
-
-.task-dnd-list {
-  display: block;
-  min-height: 400px;
-  min-width: 200px;
-  width: 320px;
-  background-color: rgb(244 245 247);
-  border-radius: 0.125rem;
-}
diff --git a/libs/mix-share/src/modules/task-manage/task-manage.component.ts b/libs/mix-share/src/modules/task-manage/task-manage.component.ts
index 11bb3e53..65c7acbc 100644
--- a/libs/mix-share/src/modules/task-manage/task-manage.component.ts
+++ b/libs/mix-share/src/modules/task-manage/task-manage.component.ts
@@ -8,11 +8,16 @@ import {
   inject,
 } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { TaskStatus } from '@mixcore/lib/model';
+import {
+  TaskStatus,
+  TaskStatusColors,
+  TaskStatusDisplay,
+} from '@mixcore/lib/model';
 import { MixApiFacadeService } from '@mixcore/share/api';
 import { BaseComponent } from '@mixcore/share/base';
 import { MixSubToolbarComponent } from '@mixcore/share/components';
 import { MixFormErrorComponent } from '@mixcore/share/form';
+import { TrackByProp } from '@mixcore/share/pipe';
 import { MixButtonComponent } from '@mixcore/ui/button';
 import { MixEditorComponent } from '@mixcore/ui/editor';
 import { MixInputComponent } from '@mixcore/ui/input';
@@ -25,6 +30,7 @@ import { TuiPaginationModule } from '@taiga-ui/kit';
 import { TaskCreateComponent } from './components/task-create/task-create.component';
 import { TaskDndListComponent } from './components/task-dnd-list/task-dnd-list.component';
 import { TaskFilterComponent } from './components/task-filter/task-filter.component';
+import { TaskGroupListComponent } from './components/task-group-list/task-group-list.component';
 import { TaskStore } from './store/task.store';
 
 @Component({
@@ -33,19 +39,21 @@ import { TaskStore } from './store/task.store';
   imports: [
     CommonModule,
     TranslocoModule,
+    ReactiveFormsModule,
+    ReactiveFormsModule,
+    SkeletonLoadingComponent,
+    TuiPaginationModule,
+    DragDropModule,
     MixSubToolbarComponent,
     MixButtonComponent,
-    ReactiveFormsModule,
     MixInputComponent,
     MixTextAreaComponent,
-    ReactiveFormsModule,
     MixFormErrorComponent,
     MixEditorComponent,
-    SkeletonLoadingComponent,
-    TuiPaginationModule,
     TaskDndListComponent,
     TaskFilterComponent,
-    DragDropModule,
+    TaskGroupListComponent,
+    TrackByProp,
   ],
   templateUrl: './task-manage.component.html',
   styleUrls: ['./task-manage.component.scss'],
@@ -59,6 +67,8 @@ export class TaskManageComponent extends BaseComponent {
   public dialog = inject(DialogService);
   public store = inject(TaskStore);
 
+  public TaskStatusDisplay = TaskStatusDisplay;
+  public TaskStatusColors = TaskStatusColors;
   public taskStatuses: TaskStatus[] = [
     TaskStatus.BACKLOG,
     TaskStatus.SELECTED,
diff --git a/tsconfig.base.json b/tsconfig.base.json
index ae86c14c..67972503 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -18,6 +18,9 @@
       "@mixcore/lib/auth": ["libs/mix-lib/src/auth/index.ts"],
       "@mixcore/lib/model": ["libs/mix-lib/src/model/index.ts"],
       "@mixcore/lib/swagger": ["libs/mix-lib/src/swagger/index.ts"],
+      "@mixcore/module/task": [
+        "libs/mix-share/src/modules/task-manage/index.ts"
+      ],
       "@mixcore/share/animation": ["libs/mix-share/src/animations/index.ts"],
       "@mixcore/share/api": ["libs/mix-share/src/api-service/index.ts"],
       "@mixcore/share/auth": ["libs/mix-share/src/auth/index.ts"],
@@ -32,9 +35,6 @@
       "@mixcore/share/signalR": ["libs/mix-share/src/signalR/index.ts"],
       "@mixcore/share/stores": ["libs/mix-share/src/stores/index.ts"],
       "@mixcore/share/utils": ["libs/mix-share/src/utils/index.ts"],
-      "@mixcore/module/task": [
-        "libs/mix-share/src/modules/task-manage/index.ts"
-      ],
       "@mixcore/ui/array-media": ["libs/mix-ui/src/array-media/index.ts"],
       "@mixcore/ui/array-radio": ["libs/mix-ui/src/array-radio/index.ts"],
       "@mixcore/ui/base-control": ["libs/mix-ui/src/base/index.ts"],