human resource

src/app/modules/components/side-nav/side-nav.component.ts

@@ -62,12 +62,12 @@ export class SideNavComponent {
     //   img: '../../../../assets/images/search-for-staff-svgrepo-com.svg',
     //   link: 'search',
     // },
-    // {
-    //   index: 9,
-    //   name: 'Human recourse',
-    //   img: '../../../../assets/images/human-resource.svg',
-    //   link: 'human-resource',
-    // },
+    {
+      index: 9,
+      name: 'Human recourse',
+      img: '../../../../assets/images/human-resource.svg',
+      link: 'human-resource',
+    },
     {
       index: 10,
       name: 'Attendance',

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

@@ -0,0 +1,81 @@
+<section class="human-list">
+  <main>
+    <h1 class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+      <img
+        src="../../../../assets/images/attendance-icon.svg"
+        alt=""
+        title=""
+      />
+      <span class="bold">Human Resourse</span>
+    </h1>
+  </main>
+
+  <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>
+
+    <button>+ Add new employee</button>
+  </header>
+
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <!--- Note that these columns can be defined in any order.
+        The actual rendered columns are set as a property on the row definition" -->
+
+    <ng-container matColumnDef="user">
+      <th mat-header-cell *matHeaderCellDef>User</th>
+      <td mat-cell *matCellDef="let element">
+        <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 gray d-block">{{ element.user.position }}</span>
+            <span class="span gray d-block">{{ element.user.email }}</span>
+          </div>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="contract_type">
+      <th mat-header-cell *matHeaderCellDef>Contract Type</th>
+      <td mat-cell *matCellDef="let element">{{ element.contract_type }}</td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="salary">
+      <th mat-header-cell *matHeaderCellDef>Salary</th>
+      <td mat-cell *matCellDef="let element">{{ element.salary }}</td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="vacation_days">
+      <th mat-header-cell *matHeaderCellDef>Vacation Days</th>
+      <td mat-cell *matCellDef="let element">
+        <span class="vacation-days">{{ element.vacation_days }}</span>
+      </td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="invoice_date">
+      <th mat-header-cell *matHeaderCellDef>Invoice Date</th>
+      <td mat-cell *matCellDef="let element">{{ element.invoice_date }}</td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="teams">
+      <th mat-header-cell *matHeaderCellDef>Teams</th>
+      <td mat-cell *matCellDef="let element">
+        {{ element.teams }}
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+  <app-pagenation></app-pagenation>
+</section>

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

@@ -0,0 +1,28 @@
+.mat-mdc-table {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.mat-mdc-header-row {
+  color: #2e368f;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.mat-mdc-row {
+  color: #28abe3;
+}
+
+.mat-mdc-cell {
+  border-bottom: 1px solid #fff;
+}
+
+.vacation-days {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #e5c9d3;
+  border-radius: 10px;
+  width: 40px;
+  height: 40px;
+}

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

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

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

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+
+export interface PeriodicElement {
+  user: any;
+  contract_type: string;
+  salary: string;
+  invoice_date: string;
+  vacation_days: string;
+  teams: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    contract_type: 'Full Time',
+    salary: '2500$',
+    invoice_date: '1 ST',
+    vacation_days: '5',
+    teams: 'Development',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    contract_type: 'Full Time',
+    salary: '2500$',
+    invoice_date: '1 ST',
+    vacation_days: '1',
+    teams: 'Development',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    contract_type: 'Part Time',
+    salary: '2500$',
+    invoice_date: '1 ST',
+    vacation_days: '6',
+    teams: 'Development',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    contract_type: 'Part Time',
+    salary: '2500$',
+    invoice_date: '1 ST',
+    vacation_days: '10',
+    teams: 'Development',
+  },
+];
+
+@Component({
+  selector: 'app-human-list',
+  templateUrl: './human-list.component.html',
+  styleUrls: ['./human-list.component.scss'],
+})
+export class HumanListComponent {
+  displayedColumns: string[] = [
+    'user',
+    'contract_type',
+    'salary',
+    'invoice_date',
+    'vacation_days',
+  ];
+  dataSource = ELEMENT_DATA;
+}

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

@@ -0,0 +1,23 @@
+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';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HumanResourceComponent,
+    children: [
+      {
+        path: '',
+        component: HumanListComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HumanResourceRoutingModule {}

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

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

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

@@ -0,0 +1,57 @@
+@mixin human-resourcce-theme() {
+  app-human-resource {
+    .human-list {
+      background-color: $off-white;
+      border-radius: 25px;
+      padding: 20px;
+      margin: 20px 0;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      main {
+        h1 {
+          span {
+            color: $main-color;
+            font-size: 20px;
+          }
+        }
+      }
+
+      header {
+        button {
+          border-radius: 10px;
+          background-color: $main-color;
+          color: $white-color;
+          border: 1px solid $main-color;
+          padding: 10px 40px;
+          font-size: 16px;
+          cursor: pointer;
+          transition: all 0.5s;
+          &:hover {
+            background-color: $main-blue;
+            border: 1px solid $main-blue;
+          }
+        }
+      }
+
+      &__search {
+        width: 40%;
+        margin: 40px 0;
+        position: relative;
+        img {
+          position: absolute;
+          top: 10px;
+        }
+        input {
+          width: 100%;
+          padding: 10px 15px;
+          border: 1px solid $white-color;
+          background-color: $white-color;
+          box-shadow: 0px 4px 12px #0000001a;
+          border-radius: 19px;
+          background-color: $white-color;
+          outline: none;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+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';
+
+@NgModule({
+  declarations: [HumanResourceComponent, HumanListComponent],
+  imports: [CommonModule, HumanResourceRoutingModule, SharedModule],
+})
+export class HumanResourceModule {}

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

@@ -47,6 +47,13 @@ const routes: Routes = [
           ),
       },
       {
+        path: 'human-resource',
+        loadChildren: () =>
+          import('./human-resource/human-resource.module').then(
+            (m) => m.HumanResourceModule
+          ),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

src/app/modules/orders/order-list/order-list.component.scss

@@ -31,3 +31,22 @@
   align-items: center;
   justify-content: flex-end;
 }
+
+.mat-mdc-table {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.mat-mdc-header-row {
+  color: #2e368f;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.mat-mdc-row {
+  color: #28abe3;
+}
+
+.mat-mdc-cell {
+  border-bottom: 1px solid #fff;
+}

src/assets/scss/variables.scss

@@ -85,6 +85,7 @@ $span-color: #707070;
 @import "../../app/modules/meetings/meetings-theme.scss";
 @import "../../app/modules/orders/orders.component.scss";
 @import "../../app/modules/attendance/attendance.component.scss";
+@import "../../app/modules/human-resource/human-resource.component.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -102,6 +103,7 @@ $span-color: #707070;
   @include meetings-theme();
   @include order-list();
   @include attendance-theme();
+  @include human-resourcce-theme();
 }
 
 @include component-theme();