task d etail

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

@@ -17,18 +17,6 @@
         calendar</span
       >
     </div>
-    <!-- <div
-      class="task-managament__dashboard"
-      fxFlex.lt-md="100"
-      fxFlex.gt-sm="50"
-    >
-      <p>Dashboard Project</p>
-      <app-progess
-        [color]="'white'"
-        [showSpan]="true"
-        [value]="10"
-      ></app-progess>
-    </div> -->
   </main>
   <mat-tab-group
     animationDuration="300ms"
@@ -46,4 +34,27 @@
       <app-attachements></app-attachements>
     </mat-tab>
   </mat-tab-group>
+
+  <div class="task-details__details">
+    <p fxLayout="row" fxLayoutAlign="start center" class="gap-20">
+      <span>Status</span>
+      <select class="to-do-select">
+        <option value="toDo" selected>To Do</option>
+      </select>
+    </p>
+    <p fxLayout="row" fxLayoutAlign="start center" class="gap-20 mt-2">
+      <Span>Periority</Span>
+      <span class="hight-periority">High</span>
+    </p>
+    <p fxLayout="row" fxLayoutAlign="start center" class="gap-20 mt-2">
+      <Span>Assignee</Span>
+      <span class="userName">Franky Schmidt</span>
+    </p>
+    <p fxLayout="row" fxLayoutAlign="start center" class="gap-20 mt-2">
+      <Span>Due Date</Span>
+      <span class="due-date bold">20/5/2023</span>
+    </p>
+  </div>
+
+  <div class="tabs"></div>
 </section>

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

@@ -237,6 +237,59 @@
           }
         }
       }
+
+      &__details {
+        padding: 20px 0;
+        p {
+          font-size: 15px;
+          color: #252525;
+          span {
+            width: 100px;
+          }
+        }
+        .to-do-select,
+        .inprogress-span,
+        .review-span,
+        .done-span {
+          padding: 10px 40px;
+          background-color: #ff66003f;
+          color: $white-color;
+          display: inline-block;
+          border: none;
+          outline: none;
+          border-radius: 10px;
+          color: #ff6600;
+          font-weight: bold;
+        }
+        .inprogress-span {
+          background-color: #009fe3;
+        }
+
+        .review-span {
+          background-color: #ffed00;
+        }
+
+        .done-span {
+          background-color: #0fbb37;
+        }
+        .hight-periority {
+          background-color: #e732325c;
+          color: #e73232;
+          border-radius: 10px;
+          padding: 10px 20px;
+          text-align: center;
+        }
+
+        .userName {
+          width: inherit;
+          font-size: 15px;
+          color: #4b5155;
+        }
+
+        .due-date {
+          color: $main-color;
+        }
+      }
     }
 
     .comments {