home page

src/app/modules/dashboard/dashboard-theme.scss

@@ -3,6 +3,7 @@
     .dashboard {
       height: 100%;
       padding: 20px 0;
+
       .div {
         height: 100%;
       }
@@ -11,7 +12,7 @@
         background: $card-color;
         box-shadow: -2px 6px 9px #2f2c8333;
         border-radius: 20px;
-        height: 382px;
+        height: 333px;
         @media (max-width: 767px) {
           height: inherit;
         }
@@ -175,5 +176,97 @@
         }
       }
     }
+
+    .today-tasks {
+      width: 100%;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      &__main {
+        background-color: $main-color;
+        padding: 20px;
+        border-radius: 20px 20px 0 0;
+        color: $white-color;
+        h1 {
+          font-size: 16px;
+        }
+      }
+
+      ul {
+        list-style: none;
+        li {
+          border-bottom: 3px solid #ccc;
+          &:last-child {
+            border-bottom: 0;
+          }
+          .description {
+            padding: 20px;
+            p {
+              font-size: 15px;
+              color: $span-color;
+              margin-bottom: 5px;
+            }
+          }
+        }
+
+        .avatar-count {
+          box-shadow: 0px 2px 5px #00000029;
+        }
+      }
+
+      .actions {
+        padding: 20px;
+        .to-do {
+          background-color: #ff6600;
+          border: 1px solid #ff6600;
+          padding: 6px 10px;
+          border-radius: 20px;
+          color: #fff;
+        }
+
+        .in-progress {
+          background-color: #009fe3;
+          border: 1px solid #009fe3;
+          padding: 6px 10px;
+          border-radius: 20px;
+          color: #fff;
+        }
+
+        .need-review {
+          background-color: #ffed00;
+          border: 1px solid #ffed00;
+          padding: 6px 10px;
+          border-radius: 20px;
+        }
+
+        .done {
+          background-color: #0fbb37;
+          border: 1px solid #0fbb37;
+          padding: 6px 10px;
+          border-radius: 20px;
+          color: $white-color;
+        }
+
+        ul {
+          list-style: none;
+          margin-top: 10px;
+          li {
+            background-color: $white-color;
+            padding: 5px;
+            border-radius: 10px;
+            border-bottom: 0;
+            margin-top: 0;
+            &:last-child {
+              background-color: transparent !important;
+            }
+          }
+
+          .avatar-count {
+            padding: 7px;
+            border-radius: 50%;
+            font-size: 10px;
+          }
+        }
+      }
+    }
   }
 }

src/app/modules/dashboard/dashboard.component.html

@@ -8,9 +8,7 @@
       ></app-today-meetings>
       <app-calender fxFlex.lt-md="100" fxFlex.gt-sm="25"></app-calender>
     </div>
+    <app-today-tasks></app-today-tasks>
   </div>
-  <!-- <div fxFlex.lt-md="100" fxFlex.gt-sm="30" class="plr-30">
-    <app-to-do></app-to-do>
-  </div> -->
 </section>
 <router-outlet></router-outlet>

src/app/modules/dashboard/today-meetings/today-meetings.component.html

@@ -89,61 +89,6 @@
           />
         </div>
       </li>
-      <li fxLayout="row" fxLayoutAlign="space-between center">
-        <div>
-          <span class="time">9:30 AM</span>
-          <p>
-            <img
-              src="../../../../assets/images/meet_icon.svg"
-              alt=""
-              title=""
-            />
-            <span class="meet_title">Meeting with CEO</span>
-          </p>
-        </div>
-        <div class="gap-5" fxLayout="row" fxLayoutAlign="center center">
-          <img
-            src="../../../../assets/images/zoom-logo-in-blue-colors-meetings-app-logotype-illustration-free-png.png"
-            alt=""
-            title=""
-            class="ptr"
-          />
-          <img
-            src="../../../../assets/images/options.svg"
-            alt=""
-            title=""
-            class="ptr"
-          />
-        </div>
-      </li>
-
-      <li fxLayout="row" fxLayoutAlign="space-between center" class="pt-2">
-        <div>
-          <span class="time">11:30 AM - 15:30 PM</span>
-          <p>
-            <img
-              src="../../../../assets/images/meet_icon.svg"
-              alt=""
-              title=""
-            />
-            <span class="meet_title">Meeting with Project Manager</span>
-          </p>
-        </div>
-        <div class="gap-5" fxLayout="row" fxLayoutAlign="center center">
-          <img
-            src="../../../../assets/images/zoom-logo-in-blue-colors-meetings-app-logotype-illustration-free-png.png"
-            alt=""
-            title=""
-            class="ptr"
-          />
-          <img
-            src="../../../../assets/images/options.svg"
-            alt=""
-            title=""
-            class="ptr"
-          />
-        </div>
-      </li>
     </ul>
     <div class="overview">
       <p>- Overview for the Project</p>

src/app/modules/dashboard/today-tasks/today-tasks.component.html

@@ -1 +1,237 @@
-<p>today-tasks works!</p>
+<section class="today-tasks">
+  <main class="today-tasks__main">
+    <h1 fxLayout="row" fxLayoutAlign="space-between center">
+      Today's Tasks <span class="today-tasks__counter">View all</span>
+    </h1>
+  </main>
+  <ul>
+    <li fxLayout="row" fxLayoutAlign="start center">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="60"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+        class="description"
+      >
+        <p>Home Page Design</p>
+        <p>
+          Designing a home page containing meetings, messages, tasks and
+          calendar
+        </p>
+        <div fxLayout="row" fxLayoutAlign="start center">
+          <mat-slider
+            class="example-margin"
+            [showTickMarks]="false"
+            fxFlex="90"
+          >
+            <input matSliderThumb value="10" #slider />
+          </mat-slider>
+          <div class="example-label-container">
+            <label class="example-value-label">{{ slider.value }} %</label>
+          </div>
+        </div>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="60"
+        fxLayout="column"
+        fxLayoutAlign="center end"
+        class="actions"
+      >
+        <select class="to-do">
+          <option>To Do</option>
+          <option>In Progress</option>
+          <option>Need Review</option>
+          <option>Done</option>
+        </select>
+        <ul fxLayout="row" fxLayoutAlign="center center" class="gap-10">
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+            <img src="../../../../assets/images/chat.png" alt="" title="" />
+            <span>22</span>
+          </li>
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+            <img src="../../../../assets/images/file.svg" alt="" title="" />
+            <span>2</span>
+          </li>
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-0">
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <span class="avatar-count">22</span>
+          </li>
+        </ul>
+      </div>
+    </li>
+    <li fxLayout="row" fxLayoutAlign="start center">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="60"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+        class="description"
+      >
+        <p>Home Page Design</p>
+        <p>
+          Designing a home page containing meetings, messages, tasks and
+          calendar
+        </p>
+        <div fxLayout="row" fxLayoutAlign="start center">
+          <mat-slider
+            class="example-margin"
+            [showTickMarks]="false"
+            fxFlex="90"
+          >
+            <input matSliderThumb value="10" #slider />
+          </mat-slider>
+          <div class="example-label-container">
+            <label class="example-value-label">{{ slider.value }} %</label>
+          </div>
+        </div>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="60"
+        fxLayout="column"
+        fxLayoutAlign="center end"
+        class="actions"
+      >
+        <select class="in-progress">
+          <option>In Progress</option>
+          <option>To Do</option>
+          <option>Need Review</option>
+          <option>Done</option>
+        </select>
+        <ul fxLayout="row" fxLayoutAlign="center center" class="gap-10">
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+            <img src="../../../../assets/images/chat.png" alt="" title="" />
+            <span>22</span>
+          </li>
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+            <img src="../../../../assets/images/file.svg" alt="" title="" />
+            <span>2</span>
+          </li>
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-0">
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <span class="avatar-count">22</span>
+          </li>
+        </ul>
+      </div>
+    </li>
+    <li fxLayout="row" fxLayoutAlign="start center">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="60"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+        class="description"
+      >
+        <p>Home Page Design</p>
+        <p>
+          Designing a home page containing meetings, messages, tasks and
+          calendar
+        </p>
+        <div fxLayout="row" fxLayoutAlign="start center">
+          <mat-slider
+            class="example-margin"
+            [showTickMarks]="false"
+            fxFlex="90"
+          >
+            <input matSliderThumb value="10" #slider />
+          </mat-slider>
+          <div class="example-label-container">
+            <label class="example-value-label">{{ slider.value }} %</label>
+          </div>
+        </div>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="60"
+        fxLayout="column"
+        fxLayoutAlign="center end"
+        class="actions"
+      >
+        <select class="need-review">
+          <option>Need Review</option>
+          <option>To Do</option>
+          <option>In Progress</option>
+          <option>Done</option>
+        </select>
+        <ul fxLayout="row" fxLayoutAlign="center center" class="gap-10">
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+            <img src="../../../../assets/images/chat.png" alt="" title="" />
+            <span>22</span>
+          </li>
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+            <img src="../../../../assets/images/file.svg" alt="" title="" />
+            <span>2</span>
+          </li>
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-0">
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <span class="avatar-count">22</span>
+          </li>
+        </ul>
+      </div>
+    </li>
+    <li fxLayout="row" fxLayoutAlign="start center">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="60"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+        class="description"
+      >
+        <p>Home Page Design</p>
+        <p>
+          Designing a home page containing meetings, messages, tasks and
+          calendar
+        </p>
+        <div fxLayout="row" fxLayoutAlign="start center">
+          <mat-slider
+            class="example-margin"
+            [showTickMarks]="false"
+            fxFlex="90"
+          >
+            <input matSliderThumb value="10" #slider />
+          </mat-slider>
+          <div class="example-label-container">
+            <label class="example-value-label">{{ slider.value }} %</label>
+          </div>
+        </div>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="60"
+        fxLayout="column"
+        fxLayoutAlign="center end"
+        class="actions"
+      >
+        <select class="done">
+          <option>To Do</option>
+          <option>In Progress</option>
+          <option>Need Review</option>
+          <option>Done</option>
+        </select>
+        <ul fxLayout="row" fxLayoutAlign="center center" class="gap-10">
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+            <img src="../../../../assets/images/chat.png" alt="" title="" />
+            <span>22</span>
+          </li>
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+            <img src="../../../../assets/images/file.svg" alt="" title="" />
+            <span>2</span>
+          </li>
+          <li fxLayout="row" fxLayoutAlign="center center" class="gap-0">
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <img src="../../../../assets/images/avatar.png" alt="" title="" />
+            <span class="avatar-count">22</span>
+          </li>
+        </ul>
+      </div>
+    </li>
+  </ul>
+</section>

src/app/shared/shared.module.ts

@@ -20,6 +20,7 @@ import { NativeDateAdapter } from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -38,6 +39,7 @@ const MATERIAL_MODULES = [
   MatDatepickerModule,
   MatNativeDateModule,
   MatSelectModule,
+  MatSliderModule,
 ];
 
 const COMPONENTS = [WarningComponent, FileUploadComponent];

src/assets/images/file.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.143" height="17.112" viewBox="0 0 17.143 17.112">
+  <g id="_92dc6d3c93352d613150948052aeb2ac" data-name="92dc6d3c93352d613150948052aeb2ac" transform="translate(-40.959 33.419) rotate(-45)">
+    <path id="Path_1152" data-name="Path 1152" d="M211.482,601.184a1.783,1.783,0,0,1-1.248-3.031.588.588,0,0,1,.832.832.588.588,0,1,0,.832.832.588.588,0,1,1,.832.832A1.818,1.818,0,0,1,211.482,601.184Z" transform="translate(-160.382 -579.622)" fill="#707070"/>
+    <path id="Path_1153" data-name="Path 1153" d="M593.1,202.829a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832,1.723,1.723,0,0,0,0-2.495,1.831,1.831,0,0,0-2.495,0,.588.588,0,0,1-.832-.832,2.7,2.7,0,0,1,2.08-.892,2.872,2.872,0,0,1,2.08.832,3.052,3.052,0,0,1,0,4.219A.646.646,0,0,1,593.1,202.829Z" transform="translate(-534.45 -184.952)" fill="#707070"/>
+    <path id="Path_1154" data-name="Path 1154" d="M231.07,249.715a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832l5.051-5.051a.588.588,0,0,1,.832.832l-5.051,5.051A.465.465,0,0,1,231.07,249.715Z" transform="translate(-180.861 -230.173)" fill="#707070"/>
+    <path id="Path_1155" data-name="Path 1155" d="M97.1,819" transform="translate(-49.386 -797.498)" fill="#707070"/>
+    <path id="Path_1156" data-name="Path 1156" d="M468.77,487.414a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832l5.051-5.051a.588.588,0,1,1,.832.832l-5.051,5.051A.541.541,0,0,1,468.77,487.414Z" transform="translate(-415.174 -464.486)" fill="#707070"/>
+    <path id="Path_1157" data-name="Path 1157" d="M351.97,366.515a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832l5.051-5.051a.588.588,0,0,1,.832.832l-5.051,5.051A.442.442,0,0,1,351.97,366.515Z" transform="translate(-300.038 -345.309)" fill="#707070"/>
+    <path id="Path_1158" data-name="Path 1158" d="M213.8,935.8" transform="translate(-164.423 -912.634)" fill="#707070"/>
+    <path id="Path_1159" data-name="Path 1159" d="M114.27,17.877a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832l6.715-6.714a.588.588,0,0,1,.832.832L114.686,17.7A.536.536,0,0,1,114.27,17.877Z" transform="translate(-65.725)" fill="#707070"/>
+    <path id="Path_1160" data-name="Path 1160" d="M51.1,492.664a4.117,4.117,0,0,1-2.912-7.01.588.588,0,1,1,.832.832,3.027,3.027,0,0,0-.892,2.08,2.791,2.791,0,0,0,.892,2.08,3.052,3.052,0,0,0,4.219,0,.588.588,0,0,1,.832.832A4.233,4.233,0,0,1,51.1,492.664Z" transform="translate(0 -468.725)" fill="#707070"/>
+  </g>
+</svg>

src/styles.scss

@@ -196,3 +196,7 @@ input.mat-input-element {
 .fz-16 {
   font-size: 16px !important;
 }
+
+.gap-0 {
+  gap: 0;
+}