human resources

src/app/modules/human-resource/components/contract/contract.component.html

@@ -0,0 +1,5 @@
+<div class="contract">
+  <p>Start Date : <span>20/10/2020</span></p>
+  <p>Expected Finish Date : <span>20/10/2020</span></p>
+  <p>Contract Type : <span>Full Time</span></p>
+</div>

src/app/modules/human-resource/components/contract/contract.component.spec.ts

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

src/app/modules/human-resource/components/contract/contract.component.ts

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

src/app/modules/human-resource/components/invoice-date/invoice-date.component.html

@@ -0,0 +1,56 @@
+<table>
+  <thead>
+    <tr>
+      <th>Invoice ID</th>
+      <th>Invoice Date</th>
+      <th>Amount</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>#+95959844</td>
+      <td>15/1/2022</td>
+      <td>500 $</td>
+      <td>
+        <span class="pending">Pendding</span>
+      </td>
+    </tr>
+    <tr>
+      <td>#+95959844</td>
+      <td>15/1/2022</td>
+      <td>500 $</td>
+      <td><span class="paid">Paid</span></td>
+    </tr>
+    <tr>
+      <td>#+95959844</td>
+      <td>15/1/2022</td>
+      <td>500 $</td>
+      <td><span class="pending">Pendding</span></td>
+    </tr>
+    <tr>
+      <td>#+95959844</td>
+      <td>15/1/2022</td>
+      <td>500 $</td>
+      <td><span class="paid">Paid</span></td>
+    </tr>
+    <tr>
+      <td>#+95959844</td>
+      <td>15/1/2022</td>
+      <td>500 $</td>
+      <td><span class="pending">Pendding</span></td>
+    </tr>
+    <tr>
+      <td>#+95959844</td>
+      <td>15/1/2022</td>
+      <td>500 $</td>
+      <td><span class="paid">Paid</span></td>
+    </tr>
+    <tr>
+      <td>#+95959844</td>
+      <td>15/1/2022</td>
+      <td>500 $</td>
+      <td><span class="pending">Pendding</span></td>
+    </tr>
+  </tbody>
+</table>

src/app/modules/human-resource/components/invoice-date/invoice-date.component.scss

@@ -0,0 +1,40 @@
+table {
+  width: 100%;
+  thead {
+    tr {
+      text-align: start;
+      color: #2e368f;
+      font-weight: bold;
+      th {
+        text-align: start;
+        padding: 10px 10px;
+        width: auto;
+      }
+    }
+  }
+  tbody {
+    tr {
+      text-align: center;
+      color: #28abe3;
+      td {
+        text-align: start;
+        padding: 15px 10px;
+        width: auto;
+      }
+    }
+  }
+}
+
+.pending {
+  color: #e73232;
+  background-color: #e5c9d3;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.paid {
+  color: #0fbb37;
+  background-color: #0fbb3726;
+  padding: 10px;
+  border-radius: 5px;
+}

src/app/modules/human-resource/components/invoice-date/invoice-date.component.spec.ts

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

src/app/modules/human-resource/components/invoice-date/invoice-date.component.ts

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

src/app/modules/human-resource/components/medical-insurance/medical-insurance.component.html

@@ -0,0 +1,5 @@
+<div class="medical-insurance" fxLayout="row" fxLayoutAlign="start center">
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="20">
+    <div class="card-body">test</div>
+  </div>
+</div>

src/app/modules/human-resource/components/medical-insurance/medical-insurance.component.spec.ts

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

src/app/modules/human-resource/components/medical-insurance/medical-insurance.component.ts

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

src/app/modules/human-resource/components/salary/salary.component.html

@@ -0,0 +1,37 @@
+<div class="salary">
+  <p>Salary Type <span>Fixed</span></p>
+  <p>Invoice Date : <span>15 form every month</span></p>
+  <p>Total Amount : <span>500 USD</span></p>
+
+  <h3>History of salary</h3>
+  <table>
+    <thead>
+      <tr>
+        <th>Salary</th>
+        <th>Salary</th>
+        <th>Deduction</th>
+        <th>Deduction Reason</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>15/1/2022</td>
+        <td>500 $</td>
+        <td>0</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>15/1/2022</td>
+        <td>500 $</td>
+        <td>0</td>
+        <td>Late for work 2 days (15/5/2020 - 20/5/2020)</td>
+      </tr>
+      <tr>
+        <td>15/1/2022</td>
+        <td>500 $</td>
+        <td>0</td>
+        <td>Late for work 2 days (15/5/2020 - 20/5/2020)</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

src/app/modules/human-resource/components/salary/salary.component.scss

@@ -0,0 +1,25 @@
+table {
+  thead {
+    tr {
+      text-align: start;
+      color: #2e368f;
+      font-weight: bold;
+      th {
+        text-align: start;
+        padding: 10px 10px;
+        width: auto;
+      }
+    }
+  }
+  tbody {
+    tr {
+      text-align: start;
+      color: #28abe3;
+      td {
+        text-align: start;
+        padding: 10px 10px;
+        width: auto;
+      }
+    }
+  }
+}

src/app/modules/human-resource/components/salary/salary.component.spec.ts

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

src/app/modules/human-resource/components/salary/salary.component.ts

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

src/app/modules/human-resource/components/teams/teams.component.html

@@ -0,0 +1,12 @@
+<div class="teams" fxLayout="row" fxLayoutAlign="start center">
+  <div
+    fxFlex.lt-md="100"
+    fxFlex.gt-sm="25"
+    fxLayout="column"
+    fxLayoutAlign="center center"
+    class="teams__team"
+  >
+    <img src="assets/images/attendance-avatar.png" alt="" title="" />
+    <p class="bold">Marketing Team</p>
+  </div>
+</div>

src/app/modules/human-resource/components/teams/teams.component.spec.ts

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

src/app/modules/human-resource/components/teams/teams.component.ts

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

src/app/modules/human-resource/components/vacation-days/vacation-days.component.html

@@ -0,0 +1,33 @@
+<div class="vacation-days">
+  <p fxLayout="row" fxLayoutAlign="space-between center">
+    Spent <span class="spent">5</span>
+  </p>
+  <p fxLayout="row" fxLayoutAlign="space-between center">
+    Remaining <span class="remaining">16</span>
+  </p>
+
+  <h3>History for spent days</h3>
+
+  <ul>
+    <li fxLayout="row" fxLayoutAlign="space-between center">
+      <span>15/1/2022</span>
+      <span>Saturday</span>
+    </li>
+    <li fxLayout="row" fxLayoutAlign="space-between center">
+      <span>15/1/2022</span>
+      <span>Saturday</span>
+    </li>
+    <li fxLayout="row" fxLayoutAlign="space-between center">
+      <span>15/1/2022</span>
+      <span>Saturday</span>
+    </li>
+    <li fxLayout="row" fxLayoutAlign="space-between center">
+      <span>15/1/2022</span>
+      <span>Saturday</span>
+    </li>
+    <li fxLayout="row" fxLayoutAlign="space-between center">
+      <span>15/1/2022</span>
+      <span>Saturday</span>
+    </li>
+  </ul>
+</div>

src/app/modules/human-resource/components/vacation-days/vacation-days.component.spec.ts

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

src/app/modules/human-resource/components/vacation-days/vacation-days.component.ts

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

src/app/modules/human-resource/human-list/human-list.component.html

@@ -12,11 +12,6 @@
 
   <header fxLayout="row" fxLayoutAlign="space-between center">
     <div class="human-list__search">
-      <!-- <img
-      src="../../../../assets/images/avatar.png"
-      alt=""
-      title=""
-    /> -->
       <input type="search" placeholder="Search..." />
     </div>
 
@@ -33,7 +28,9 @@
         <div fxLayout="row" fxLayoutAlign="start center" class="gap-10 ptb-10">
           <img [src]="element.user.img" alt="" title="" />
           <div>
-            <span class="span bold d-block">{{ element.user.name }}</span>
+            <span class="span bold d-block ptr" (click)="onOpenDetails()">{{
+              element.user.name
+            }}</span>
             <span class="span gray d-block">{{ element.user.position }}</span>
             <span class="span gray d-block">{{ element.user.email }}</span>
           </div>

src/app/modules/human-resource/human-list/human-list.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 export interface PeriodicElement {
   user: any;
@@ -78,4 +79,13 @@ export class HumanListComponent {
     'vacation_days',
   ];
   dataSource = ELEMENT_DATA;
+
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
+
+  onOpenDetails(): void {
+    this.router.navigate(['./details'], { relativeTo: this.route });
+  }
 }

src/app/modules/human-resource/human-resource-details/human-resource-details.component.html

@@ -0,0 +1,38 @@
+<section class="human-details" fxLayout="column" fxLayoutAlign="start stretch">
+  <main>
+    <h1 fxLayout="row" fxLayoutAlign="start center" class="gap-10">
+      <img src="../../../../assets/images/arrow.svg" alt="" title="" />
+      <span>Details</span>
+    </h1>
+  </main>
+
+  <div
+    class="human-details__avatar"
+    fxLayout="row"
+    fxLayoutAlign="space-between center"
+  >
+    <div fxLayout="row" fxLayoutAlign="start center" class="gap-10">
+      <img src="../../../../assets/images/avatar.png" alt="" title="" />
+      <div>
+        <p>Mai Ghoneim</p>
+        <span>Senior UI/UX Designer</span>
+        <span>User@gmail.comx</span>
+      </div>
+    </div>
+    <button>Message</button>
+  </div>
+  <mat-tab-group>
+    <mat-tab label="Contract"> <app-contract></app-contract> </mat-tab>
+    <mat-tab label="Salary"> <app-salary></app-salary> </mat-tab>
+    <mat-tab label="Invoice Date">
+      <app-invoice-date></app-invoice-date>
+    </mat-tab>
+    <mat-tab label="Teams"> <app-teams></app-teams> </mat-tab>
+    <mat-tab label="Vacation Days">
+      <app-vacation-days></app-vacation-days>
+    </mat-tab>
+    <mat-tab label="Medical Insurance">
+      <app-medical-insurance></app-medical-insurance>
+    </mat-tab>
+  </mat-tab-group>
+</section>

src/app/modules/human-resource/human-resource-details/human-resource-details.component.scss

@@ -0,0 +1 @@
+

src/app/modules/human-resource/human-resource-details/human-resource-details.component.spec.ts

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

src/app/modules/human-resource/human-resource-details/human-resource-details.component.ts

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

src/app/modules/human-resource/human-resource-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HumanResourceComponent } from './human-resource.component';
 import { HumanListComponent } from './human-list/human-list.component';
+import { HumanResourceDetailsComponent } from './human-resource-details/human-resource-details.component';
 
 const routes: Routes = [
   {
@@ -12,6 +13,10 @@ const routes: Routes = [
         path: '',
         component: HumanListComponent,
       },
+      {
+        path: 'details',
+        component: HumanResourceDetailsComponent,
+      },
     ],
   },
 ];

src/app/modules/human-resource/human-resource.component.scss

@@ -53,5 +53,140 @@
         }
       }
     }
+
+    .human-details {
+      background-color: $off-white;
+      border-radius: 25px;
+      padding: 20px;
+      margin: 20px 0;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      main {
+        h1 {
+          span {
+            font-size: 25px;
+            color: $main-color;
+          }
+        }
+      }
+      &__avatar {
+        width: 40%;
+        padding: 20px 0;
+        @media (max-width: 767px) {
+          width: 1005;
+        }
+        div {
+          img {
+            width: 50px;
+          }
+          p {
+            color: $light-blue;
+            font-size: 20px;
+            font-size: 18px;
+            margin-bottom: 5px;
+          }
+          span {
+            color: #7b8793;
+            font-size: 15px;
+            display: block;
+            margin-bottom: 5px;
+          }
+        }
+        button {
+          background-color: $light-blue;
+          color: $white-color;
+          border: 1px solid $light-blue;
+          padding: 10px 20px;
+          border-radius: 5px;
+          font-size: 16px;
+          cursor: pointer;
+          transition: all 0.5s;
+          &:hover {
+            background-color: $main-blue;
+          }
+        }
+      }
+
+      .contract,
+      .salary {
+        padding: 20px 0;
+        p {
+          color: $main-color;
+          margin-bottom: 10px;
+          font-size: 15px;
+        }
+        h3 {
+          color: #707070;
+          font-size: 17px;
+          text-decoration: underline;
+        }
+      }
+
+      .teams {
+        padding: 40px 0;
+        &__team {
+          background-color: $white-color;
+          border-radius: 18px;
+          padding: 40px 0;
+          p {
+            color: $main-color;
+            padding-top: 20px;
+          }
+        }
+      }
+
+      .vacation-days {
+        padding: 40px 0;
+        p {
+          color: $main-color;
+          width: 20%;
+          margin-bottom: 10px;
+        }
+        .spent {
+          background-color: #e5c9d3;
+          color: #e73232;
+          padding: 10px 20px;
+          border-radius: 5px;
+        }
+
+        .remaining {
+          background-color: #0fbb3726;
+          color: #0fbb37;
+          padding: 10px 20px;
+          border-radius: 5px;
+        }
+
+        h3 {
+          color: #707070;
+          margin: 10px 0;
+          font-size: 18px;
+          text-decoration: underline;
+        }
+
+        ul {
+          list-style: none;
+          li {
+            color: $light-blue;
+            width: 20%;
+            margin-bottom: 10px;
+          }
+        }
+      }
+
+      .medical-insurance {
+        padding: 40px 0;
+        .card {
+          background-color: #c4daed;
+          padding: 20px;
+          border-radius: 10px;
+          .card-body {
+            background-color: #0079c8;
+            border-radius: 10px;
+            color: $white-color;
+            text-align: center;
+            padding: 20px;
+          }
+        }
+      }
+    }
   }
 }

src/app/modules/human-resource/human-resource.module.ts

@@ -5,9 +5,16 @@ import { HumanResourceRoutingModule } from './human-resource-routing.module';
 import { HumanResourceComponent } from './human-resource.component';
 import { HumanListComponent } from './human-list/human-list.component';
 import { SharedModule } from '@shared/shared.module';
+import { HumanResourceDetailsComponent } from './human-resource-details/human-resource-details.component';
+import { ContractComponent } from './components/contract/contract.component';
+import { SalaryComponent } from './components/salary/salary.component';
+import { TeamsComponent } from './components/teams/teams.component';
+import { VacationDaysComponent } from './components/vacation-days/vacation-days.component';
+import { MedicalInsuranceComponent } from './components/medical-insurance/medical-insurance.component';
+import { InvoiceDateComponent } from './components/invoice-date/invoice-date.component';
 
 @NgModule({
-  declarations: [HumanResourceComponent, HumanListComponent],
+  declarations: [HumanResourceComponent, HumanListComponent, HumanResourceDetailsComponent, ContractComponent, SalaryComponent, TeamsComponent, VacationDaysComponent, MedicalInsuranceComponent, InvoiceDateComponent],
   imports: [CommonModule, HumanResourceRoutingModule, SharedModule],
 })
 export class HumanResourceModule {}

src/styles.scss

@@ -310,3 +310,9 @@ input.mat-input-element {
     outline: none;
   }
 }
+
+.human-details {
+  .mat-mdc-tab-list {
+    border-bottom: 1px solid #ccc !important;
+  }
+}