profile and home

src/app/authentication/auth-sign-up/signup-employee/signup-employee.component.html

@@ -32,7 +32,7 @@
             />
             <span>Birth Date<span class="red">*</span></span>
           </label>
-          <input type="text" id="birth_date" placeholder="Select Date" />
+          <input type="date" id="birth_date" placeholder="Select Date" />
         </div>
         <div
           class="form-input"

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

@@ -11,7 +11,7 @@
         background: $card-color;
         box-shadow: -2px 6px 9px #2f2c8333;
         border-radius: 20px;
-        height: 255px;
+        height: 382px;
         @media (max-width: 767px) {
           height: inherit;
         }

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

@@ -1,17 +1,16 @@
 <section class="dashboard" fxLayout="row" fxLayoutAlign="start start">
-  <div class="div" fxFlex.lt-md="100" fxFlex.gt-sm="70">
-    <div class="gap-20" 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>
+  <div class="div" fxFlex.lt-md="100" fxFlex.gt-sm="100">
+    <div class="gap-10" fxLayout="row wrap" fxLayoutAlign="start start">
+      <app-payslip fxFlex.lt-md="100" fxFlex.gt-sm="25"></app-payslip>
       <app-today-meetings
         fxFlex.lt-md="100"
-        fxFlex.gt-sm="31.3333"
+        fxFlex.gt-sm="48"
       ></app-today-meetings>
+      <app-calender fxFlex.lt-md="100" fxFlex.gt-sm="25"></app-calender>
     </div>
   </div>
-  <div fxFlex.lt-md="100" fxFlex.gt-sm="30" class="plr-30">
-    <app-calender></app-calender>
+  <!-- <div fxFlex.lt-md="100" fxFlex.gt-sm="30" class="plr-30">
     <app-to-do></app-to-do>
-  </div>
+  </div> -->
 </section>
 <router-outlet></router-outlet>

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

@@ -35,6 +35,88 @@
           />
         </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">
+        <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">
+        <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>

src/app/modules/profile/address/address.component.html

@@ -1 +1,120 @@
-<p>address works!</p>
+<section
+  class="basic-info gap-20"
+  fxLayout="row wrap"
+  fxLayoutAlign="start start"
+  *ngIf="!showForm; else basicInfoForm"
+>
+  <button class="edit" (click)="onEdit()">Edit</button>
+
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Country</h1>
+    <p>Egypt</p>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">City</h1>
+    <p>Alexandria</p>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Postal Code</h1>
+    <p>01234567</p>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Address</h1>
+    <p>204 Alamal Plaza Hail Street PO Box 6659 Jeddah 21452 Saudi Arabia</p>
+  </div>
+</section>
+
+<ng-template #basicInfoForm>
+  <form class="basic-info" fxLayout="row" fxLayoutAlign="start start">
+    <div class="gap-20" fxFlex.lt-md="100" fxFlex.gt-sm="80">
+      <div fxLayout="row" fxLayoutAlign="start start" class="gap-20">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="100"
+          fxFlex.gt-sm="50"
+        >
+          <label for="qualification">
+            <img
+              src="assets/images/academic-cap-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Country <span class="red">*</span></span>
+          </label>
+          <input type="text" id="country" placeholder="Enter your country" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="100"
+          fxFlex.gt-sm="50"
+        >
+          <label for="city">
+            <img
+              src="assets/images/academic-cap-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>City <span class="red">*</span></span>
+          </label>
+          <input type="text" id="city" placeholder="Enter your city" />
+        </div>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="start start" class="gap-20 mt-2">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="100"
+          fxFlex.gt-sm="50"
+        >
+          <label for="qualification">
+            <img
+              src="assets/images/academic-cap-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Postal Code <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            id="postal_code"
+            placeholder="Enter your postal code"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="100"
+          fxFlex.gt-sm="50"
+        >
+          <label for="city">
+            <img
+              src="assets/images/academic-cap-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Address <span class="red">*</span></span>
+          </label>
+          <input type="text" id="city" placeholder="Enter your address" />
+        </div>
+      </div>
+    </div>
+    <div
+      fxLayout="column"
+      fxLayoutAlign="start end"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="20"
+      class="gap-20"
+    >
+      <button type="submit" class="save-changes btn">Save Changes</button>
+      <button type="button" class="cancel btn" (click)="showForm = false">
+        Cancel
+      </button>
+    </div>
+  </form>
+</ng-template>

src/app/modules/profile/address/address.component.ts

@@ -3,8 +3,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-address',
   templateUrl: './address.component.html',
-  styleUrls: ['./address.component.scss']
+  styleUrls: ['./address.component.scss'],
 })
 export class AddressComponent {
+  showForm: boolean = false;
 
+  onEdit(): void {
+    this.showForm = true;
+  }
 }

src/app/modules/profile/attachements/attachements.component.html

@@ -1 +1,48 @@
-<p>attachements works!</p>
+<section
+  class="basic-info gap-20"
+  fxLayout="row wrap"
+  fxLayoutAlign="start start"
+>
+  <button class="edit">Edit</button>
+
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">C.V</h1>
+    <p class="pt-5 main-color bold fz-16">Mohamed-cv.doc</p>
+    <p class="pt-5 main-color fz-16">1.8 BM</p>
+    <p class="pt-5 main-color fz-16">17-5-2022</p>
+    <p class="pt-5 main-color fz-16">12:15 PM</p>
+    <button class="changeBtn">Change</button>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Passport</h1>
+    <p class="pt-5 main-color bold fz-16">Mohamed-cv.doc</p>
+    <p class="pt-5 main-color fz-16">1.8 BM</p>
+    <p class="pt-5 main-color fz-16">17-5-2022</p>
+    <p class="pt-5 main-color fz-16">12:15 PM</p>
+    <button class="changeBtn">Change</button>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Educational Certification</h1>
+    <p class="pt-5 main-color bold fz-16">Mohamed-cv.doc</p>
+    <p class="pt-5 main-color fz-16">1.8 BM</p>
+    <p class="pt-5 main-color fz-16">17-5-2022</p>
+    <p class="pt-5 main-color fz-16">12:15 PM</p>
+    <button class="changeBtn">Change</button>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Experience Certification</h1>
+    <p class="pt-5 main-color bold fz-16">Mohamed-cv.doc</p>
+    <p class="pt-5 main-color fz-16">1.8 BM</p>
+    <p class="pt-5 main-color fz-16">17-5-2022</p>
+    <p class="pt-5 main-color fz-16">12:15 PM</p>
+    <button class="changeBtn">Change</button>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Professional Certification</h1>
+    <p class="pt-5 main-color bold fz-16">Mohamed-cv.doc</p>
+    <p class="pt-5 main-color fz-16">1.8 BM</p>
+    <p class="pt-5 main-color fz-16">17-5-2022</p>
+    <p class="pt-5 main-color fz-16">12:15 PM</p>
+    <button class="changeBtn">Change</button>
+  </div>
+</section>

src/app/modules/profile/attachements/attachements.component.scss

@@ -0,0 +1,11 @@
+.changeBtn {
+  background-color: #28abe3;
+  width: 100%;
+  padding: 10px 0;
+  text-align: center;
+  border: 0;
+  color: #fff;
+  border-radius: 0 0 20px 20px;
+  font-size: 17px;
+  margin-top: 10px;
+}

src/app/modules/profile/attachements/attachements.component.ts

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-attachements',
   templateUrl: './attachements.component.html',
-  styleUrls: ['./attachements.component.scss']
+  styleUrls: ['./attachements.component.scss'],
 })
-export class AttachementsComponent {
-
-}
+export class AttachementsComponent {}

src/app/modules/profile/basic-information/basic-information.component.html

@@ -37,118 +37,118 @@
     <div class="gap-20" fxFlex.lt-md="100" fxFlex.gt-sm="80">
       <div fxLayout="row" fxLayoutAlign="start start" class="gap-20">
         <div
+          class="form-input"
           fxLayout="column"
           fxLayoutAlign="start stretch"
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <mat-label>Choose a date</mat-label>
-          <mat-form-field appearance="outline">
-            <input matInput [matDatepicker]="picker" />
-            <mat-datepicker-toggle
-              matIconSuffix
-              [for]="picker"
-            ></mat-datepicker-toggle>
-            <mat-datepicker #picker></mat-datepicker>
-          </mat-form-field>
+          <label for="birth_date" class="plr-30">
+            <img
+              src="assets/images/birthday-cake-candle-pie-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Birth Date<span class="red">*</span></span>
+          </label>
+          <input type="date" id="birth_date" placeholder="Select Date" />
         </div>
 
         <div
+          class="form-input"
           fxLayout="column"
           fxLayoutAlign="start stretch"
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <mat-label>ID Number</mat-label>
-
-          <mat-form-field
-            appearance="outline"
-            fxFlex.lt-md="100"
-            fxFlex.gt-sm="50"
-          >
-            <input matInput />
-          </mat-form-field>
+          <label for="tax_no" class="plr-30">
+            <img src="assets/images/id-card-svgrepo-com.svg" alt="" title="" />
+            <span>ID Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="tax_no" placeholder="ID Number" />
         </div>
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="start start" class="gap-20">
+      <div fxLayout="row" fxLayoutAlign="start start" class="gap-20 mt-2">
         <div
+          class="form-input"
           fxLayout="column"
           fxLayoutAlign="start stretch"
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <mat-label>Email</mat-label>
-
-          <mat-form-field
-            appearance="outline"
-            fxFlex.lt-md="100"
-            fxFlex.gt-sm="50"
-          >
-            <input type="email" matInput placeholder="Ex. pat@example.com" />
-          </mat-form-field>
+          <label for="email">
+            <img src="assets/images/email-9-svgrepo-com" alt="" title="" />
+            <span>Email<span class="red">*</span></span>
+          </label>
+          <input type="email" id="email" placeholder="Enter your email" />
         </div>
         <div
+          class="form-input"
           fxLayout="column"
           fxLayoutAlign="start stretch"
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <mat-label>Passport Number</mat-label>
-
-          <mat-form-field
-            appearance="outline"
-            fxFlex.lt-md="100"
-            fxFlex.gt-sm="50"
-          >
-            <input matInput />
-          </mat-form-field>
+          <label for="passprt">
+            <img
+              src="../../../../assets/images/passport-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Passport Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="postal" placeholder="Passport Number" />
         </div>
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="start start" class="gap-20">
+      <div fxLayout="row" fxLayoutAlign="start start" class="gap-20 mt-2">
         <div
+          class="form-input"
           fxLayout="column"
           fxLayoutAlign="start stretch"
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <mat-label>Mobile Number</mat-label>
-          <mat-form-field
-            appearance="outline"
-            fxFlex.lt-md="100"
-            fxFlex.gt-sm="50"
-          >
-            <input matInput />
-          </mat-form-field>
+          <label for="mobile_number">
+            <img
+              src="assets/images/mobile-horizontal-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Mobile Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="mobile_number" placeholder="Mobile Number" />
         </div>
         <div
+          class="form-input"
           fxLayout="column"
           fxLayoutAlign="start stretch"
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <mat-label>tax declaration</mat-label>
-
-          <div class="gap-20" fxLayout="row" fxLayoutAlign="center center">
-            <mat-form-field
-              appearance="outline"
-              fxFlex.lt-md="100"
-              fxFlex.gt-sm="50"
-            >
-              <mat-label>tax declaration number</mat-label>
-              <input matInput />
-            </mat-form-field>
-
-            <mat-form-field
-              appearance="outline"
-              fxFlex.lt-md="100"
-              fxFlex.gt-sm="50"
-            >
-              <mat-label>Income tax value</mat-label>
-              <input matInput />
-            </mat-form-field>
-            <button class="save-changes btn calc">0.0</button>
+          <label for="tax_decoration">
+            <img
+              src="../../../../assets/images/tax-fee-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Tax Decoration <span class="red">*</span></span>
+          </label>
+          <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-10">
+            <input
+              type="text"
+              id="tax_decoration_number"
+              placeholder="number"
+              class="decoration"
+            />
+            <input
+              type="text"
+              id="tax_decoration_value"
+              placeholder="value"
+              class="decoration"
+            />
+            <input type="text" class="calc" placeholder="0.0" />
           </div>
         </div>
       </div>

src/app/modules/profile/basic-information/basic-information.component.scss

@@ -1,3 +1,18 @@
+.decoration {
+  width: 20%;
+}
+
 .calc {
-  margin-top: -20px;
+  width: 15%;
+  background-color: #28abe3;
+  color: #fff;
+  border: none;
+}
+
+.checkbox {
+  color: #252525;
+  a {
+    text-decoration: none;
+    color: #28abe3;
+  }
 }

src/app/modules/profile/education-qualification/education-qualification.component.html

@@ -21,36 +21,44 @@
     <div class="gap-20" fxFlex.lt-md="100" fxFlex.gt-sm="80">
       <div fxLayout="row" fxLayoutAlign="start start" class="gap-20">
         <div
+          class="form-input"
           fxLayout="column"
           fxLayoutAlign="start stretch"
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <mat-label>Univeristy</mat-label>
-
-          <mat-form-field
-            appearance="outline"
-            fxFlex.lt-md="100"
-            fxFlex.gt-sm="50"
-          >
-            <mat-label>Favorite food</mat-label>
-            <mat-select> </mat-select>
-          </mat-form-field>
+          <label for="qualification">
+            <img
+              src="assets/images/academic-cap-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Qualification <span class="red">*</span></span>
+          </label>
+          <select id="qualification">
+            <option></option>
+          </select>
         </div>
         <div
+          class="form-input"
           fxLayout="column"
           fxLayoutAlign="start stretch"
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <mat-label>Univeristy</mat-label>
-          <mat-form-field
-            appearance="outline"
-            fxFlex.lt-md="100"
-            fxFlex.gt-sm="50"
-          >
-            <input matInput />
-          </mat-form-field>
+          <label for="university">
+            <img
+              src="assets/images/academic-cap-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>University <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            id="university"
+            placeholder="Enter your university name"
+          />
         </div>
       </div>
     </div>

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

@@ -102,6 +102,26 @@
         }
       }
     }
+
+    .form-input {
+      width: 100%;
+      label {
+        margin-bottom: 5px;
+        font-size: 13px;
+        span {
+          margin: 0 5px;
+        }
+      }
+      input,
+      select {
+        padding: 15px 20px;
+        border-radius: 10px;
+        box-shadow: 0px 5px 6px #2f2c8324;
+        border: 0.5px solid $main-color;
+        border-radius: 10px;
+        outline: none;
+      }
+    }
   }
 
   .edit {

src/styles.scss

@@ -182,3 +182,17 @@ input.mat-input-element {
 .mat-form-field-wrapper .mat-form-field-flex input {
   border: none !important;
 }
+
+.pt-5 {
+  padding-top: 5px !important;
+  padding-bottom: 0 !important;
+}
+
+.main-color {
+  color: $main-color;
+  font-size: 16px;
+}
+
+.fz-16 {
+  font-size: 16px !important;
+}