home

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

@@ -0,0 +1,5 @@
+<div class="calender">
+  <mat-card class="demo-inline-calendar-card">
+    <mat-calendar [selected]="selected"></mat-calendar>
+  </mat-card>
+</div>

src/app/modules/dashboard/calender/calender.component.scss

@@ -0,0 +1,3 @@
+.calender {
+  width: 100%;
+}

src/app/modules/dashboard/calender/calender.component.spec.ts

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

src/app/modules/dashboard/calender/calender.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-calender',
+  templateUrl: './calender.component.html',
+  styleUrls: ['./calender.component.scss'],
+})
+export class CalenderComponent {
+  selected!: Date | null;
+}

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

@@ -0,0 +1,124 @@
+@mixin dashboard-theme() {
+  app-dashboard {
+    .dashboard {
+      height: 100%;
+      padding: 20px 0;
+      div {
+        height: 100%;
+      }
+
+      .card {
+        background: $card-color;
+        box-shadow: -2px 6px 9px #2f2c8333;
+        border-radius: 20px;
+        &__title {
+          background-color: $main-color;
+          padding: 10px 20px;
+          color: $white-color;
+          border-radius: 20px 20px 0 0;
+          font-size: 20px;
+          a {
+            text-decoration: underline;
+            font-size: 18px;
+          }
+          img {
+            cursor: pointer;
+          }
+        }
+        &__body {
+          padding: 20px;
+          h1 {
+            color: #0fbb37;
+            padding: 10px 0;
+            font-size: 18px;
+          }
+          p {
+            font-size: 25px;
+            color: $main-blue;
+          }
+          ul {
+            list-style: none;
+            li {
+              border-bottom: 3px solid #2f2c8333;
+              padding-left: 10px;
+              padding-right: 10px;
+              &:last-child {
+                border-bottom: 0;
+              }
+              div {
+                .time {
+                  color: $span-color;
+                  font-size: 15px;
+                }
+                .meet_title {
+                  font-size: 15px;
+                  margin: 0 5px;
+                  color: $black-color;
+                }
+              }
+            }
+          }
+          &__message {
+            img {
+              width: 30px;
+              height: 30px;
+              object-fit: cover;
+              border-radius: 50%;
+            }
+            &__user {
+              p {
+                font-size: 15px;
+                color: #707070;
+              }
+            }
+          }
+
+          &__details {
+            &__count {
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              background-color: #0fbb37;
+              color: $white-color;
+              font-size: 13px;
+              display: block;
+              text-align: center;
+              line-height: 1.3rem;
+              margin: 5px auto;
+            }
+
+            &__time {
+              color: #0fbb37;
+              font-size: 13px;
+              display: block;
+              text-align: center;
+            }
+          }
+
+          .overview {
+            padding: 0 10px;
+            p {
+              color: $span-color;
+              font-size: 13px;
+              margin-top: 3px;
+            }
+          }
+        }
+      }
+
+      .mat-calendar-header {
+        background-color: $main-color;
+        color: $white-color;
+        border-radius: 25px 25px 0 0;
+      }
+
+      .mat-mdc-card {
+        border-radius: 25px;
+      }
+
+      .mat-mdc-button:not(:disabled) {
+        color: $white-color !important;
+      }
+    }
+  }
+}

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

@@ -1,2 +1,16 @@
-<p>dashboard works!</p>
+<section class="dashboard" fxLayout="row" fxLayoutAlign="start start">
+  <div fxFlex.lt-md="100" fxFlex.gt-sm="70">
+    <div class="gap-30" fxLayout="row wrap" fxLayoutAlign="start start">
+      <app-payslip fxFlex.lt-md="100" fxFlex.gt-sm="31.3333"></app-payslip>
+      <app-message fxFlex.lt-md="100" fxFlex.gt-sm="31.3333"></app-message>
+      <app-today-meetings
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="31.3333"
+      ></app-today-meetings>
+    </div>
+  </div>
+  <div fxFlex.lt-md="100" fxFlex.gt-sm="30" class="plr-30">
+    <app-calender></app-calender>
+  </div>
+</section>
 <router-outlet></router-outlet>

src/app/modules/dashboard/dashboard.module.ts

@@ -3,15 +3,24 @@ import { CommonModule } from '@angular/common';
 
 import { DashboardRoutingModule } from './dashboard-routing.module';
 import { DashboardComponent } from './dashboard.component';
-
+import { SharedModule } from '@shared/shared.module';
+import { PayslipComponent } from './payslip/payslip.component';
+import { MessageComponent } from './message/message.component';
+import { TodayMeetingsComponent } from './today-meetings/today-meetings.component';
+import { TodayTasksComponent } from './today-tasks/today-tasks.component';
+import { ToDoComponent } from './to-do/to-do.component';
+import { CalenderComponent } from './calender/calender.component';
 
 @NgModule({
   declarations: [
-    DashboardComponent
+    DashboardComponent,
+    PayslipComponent,
+    MessageComponent,
+    TodayMeetingsComponent,
+    TodayTasksComponent,
+    ToDoComponent,
+    CalenderComponent,
   ],
-  imports: [
-    CommonModule,
-    DashboardRoutingModule
-  ]
+  imports: [CommonModule, DashboardRoutingModule, SharedModule],
 })
-export class DashboardModule { }
+export class DashboardModule {}

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

@@ -0,0 +1,70 @@
+<section class="card">
+  <p class="card__title">Messages</p>
+  <div class="card__body plr-0 pb-0 pt-0">
+    <ul fxLayout="column" fxLayoutAlign="space-between stretch">
+      <li fxLayout="row" fxLayoutAlign="space-between center">
+        <div
+          class="card__body__message gap-10"
+          fxLayout="row"
+          fxLayoutAlign="start start"
+        >
+          <img src="../../../../assets/images/Ellipse 22.png" alt="" title="" />
+          <div class="card__body__message__user">
+            <p class="mb-0_5 bold">Cris Morich</p>
+            <p>Hi Angelina! How are You?</p>
+          </div>
+        </div>
+        <div
+          class="card__body__details"
+          fxLayout="column"
+          fxLayoutAlign="center end"
+        >
+          <span class="card__body__details__count">3</span>
+          <span class="card__body__details__time">10:05 AM</span>
+        </div>
+      </li>
+      <li fxLayout="row" fxLayoutAlign="space-between center">
+        <div
+          class="card__body__message gap-10"
+          fxLayout="row"
+          fxLayoutAlign="start start"
+        >
+          <img src="../../../../assets/images/Ellipse 22.png" alt="" title="" />
+          <div class="card__body__message__user">
+            <p class="mb-0_5 bold">Cris Morich</p>
+            <p>Hi Angelina! How are You?</p>
+          </div>
+        </div>
+        <div
+          class="card__body__details"
+          fxLayout="column"
+          fxLayoutAlign="center end"
+        >
+          <span class="card__body__details__count">3</span>
+          <span class="card__body__details__time">10:05 AM</span>
+        </div>
+      </li>
+      <li fxLayout="row" fxLayoutAlign="space-between center">
+        <div
+          class="card__body__message gap-10"
+          fxLayout="row"
+          fxLayoutAlign="start start"
+        >
+          <img src="../../../../assets/images/Ellipse 22.png" alt="" title="" />
+          <div class="card__body__message__user">
+            <p class="mb-0_5 bold">Cris Morich</p>
+            <p>Hi Angelina! How are You?</p>
+          </div>
+        </div>
+        <div
+          class="card__body__details"
+          fxLayout="column"
+          fxLayoutAlign="center end"
+        >
+          <span class="card__body__details__count">3</span>
+          <span class="card__body__details__time">10:05 AM</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</section>

src/app/modules/dashboard/message/message.component.spec.ts

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

src/app/modules/dashboard/message/message.component.ts

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

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

@@ -0,0 +1,8 @@
+<section class="card">
+  <p class="card__title">Payslip</p>
+  <div class="card__body">
+    <img src="../../../../assets/images/payslip.svg" alt="" title="" />
+    <h1>Your Salary is available now</h1>
+    <p class="bold">5001.45 SAR</p>
+  </div>
+</section>

src/app/modules/dashboard/payslip/payslip.component.spec.ts

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

src/app/modules/dashboard/payslip/payslip.component.ts

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

src/app/modules/dashboard/to-do/to-do.component.html

@@ -0,0 +1 @@
+<p>to-do works!</p>

src/app/modules/dashboard/to-do/to-do.component.spec.ts

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

src/app/modules/dashboard/to-do/to-do.component.ts

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

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

@@ -0,0 +1,71 @@
+<section class="card">
+  <p class="card__title" fxLayout="row" fxLayoutAlign="space-between center">
+    <span>Today's Meetings</span>
+    <span class="gap-10" fxLayout="row" fxLayoutAlign="center center"
+      ><a>View all</a>
+      <img src="../../../../assets/images/plus.svg" alt="" title="Add" />
+    </span>
+  </p>
+  <div class="card__body plr-0 pb-0 pt-0">
+    <ul fxLayout="column" fxLayoutAlign="space-between stretch">
+      <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>
+      <p>- Document Draft Creation</p>
+    </div>
+  </div>
+</section>

src/app/modules/dashboard/today-meetings/today-meetings.component.spec.ts

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

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

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

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

@@ -0,0 +1 @@
+<p>today-tasks works!</p>

src/app/modules/dashboard/today-tasks/today-tasks.component.spec.ts

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

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

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

src/app/shared/shared.module.ts

@@ -14,6 +14,10 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatCardModule } from '@angular/material/card';
+import { NativeDateAdapter } from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -27,6 +31,9 @@ const MATERIAL_MODULES = [
   MatMenuModule,
   // ErrorStateMatcher,
   MatChipsModule,
+  MatCardModule,
+  MatDatepickerModule,
+  MatNativeDateModule,
 ];
 
 const COMPONENTS = [WarningComponent, FileUploadComponent];
@@ -44,5 +51,6 @@ const COMPONENTS = [WarningComponent, FileUploadComponent];
     ...MATERIAL_MODULES,
     ...COMPONENTS,
   ],
+  providers: [NativeDateAdapter],
 })
 export class SharedModule {}

src/assets/images/options.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="4.47" height="22.35" viewBox="0 0 4.47 22.35">
+  <g id="_0fa1950b0a3cdd40fe6ff3052dc421cc" data-name="0fa1950b0a3cdd40fe6ff3052dc421cc" transform="translate(406.47 -10) rotate(90)">
+    <path id="Path_1147" data-name="Path 1147" d="M10,404.235a2.235,2.235,0,1,1,2.235,2.235A2.236,2.236,0,0,1,10,404.235Zm8.94,0a2.235,2.235,0,1,1,2.235,2.235A2.236,2.236,0,0,1,18.94,404.235Zm8.94,0a2.235,2.235,0,1,1,2.235,2.235A2.236,2.236,0,0,1,27.88,404.235Z" transform="translate(0)" fill="#2f2c83"/>
+  </g>
+</svg>

src/assets/images/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.6" height="27.6" viewBox="0 0 14.6 27.6">
+  <text id="_" data-name="+" transform="translate(0.3 22.3)" fill="#fff" stroke="#fff" stroke-width="0.3" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">+</tspan></text>
+</svg>

src/assets/scss/variables.scss

@@ -18,6 +18,8 @@ $dark-red: #c74c4d;
 $move-color: #7024c4;
 $black-color: #252525;
 $warning-color: #e732321c;
+$card-color: #f4f4f9;
+$span-color: #707070;
 //PRIMARY THEME
 // $mat-primary: (
 //   main: $main-color,
@@ -76,6 +78,7 @@ $warning-color: #e732321c;
 @import "../../app/shared/components/warning/warning.component.scss";
 @import "../../app/modules/components/side-nav/side-nav.component.scss";
 @import "../../app//modules/components/header/header.component.scss";
+@import "../../app/modules/dashboard//dashboard-theme.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -86,6 +89,7 @@ $warning-color: #e732321c;
   @include warning-theme();
   @include sid-nav-theme();
   @include main-header();
+  @include dashboard-theme();
 }
 
 @include component-theme();

src/styles.scss

@@ -46,6 +46,11 @@ body {
   padding-right: 1rem;
 }
 
+.plr-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
 .d-block {
   display: block;
 }
@@ -80,6 +85,10 @@ body {
   padding-top: 20px;
 }
 
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
 .ptr {
   cursor: pointer;
 }
@@ -141,3 +150,23 @@ input.mat-input-element {
 .mb-1 {
   margin-bottom: 1rem;
 }
+
+.mb-0_5 {
+  margin-bottom: 0.5rem;
+}
+
+.pt-0 {
+  padding-top: 5px !important;
+}
+
+.gap-30 {
+  gap: 30px;
+}
+
+.pt-2 {
+  padding-top: 2px;
+}
+
+.plr-30 {
+  padding: 0 30px;
+}