contractor

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

@@ -32,12 +32,12 @@ export class SideNavComponent {
       img: '',
       link: '/modules/meetings',
     },
-    // {
-    //   index: 4,
-    //   name: 'Contracts',
-    //   img: '../../../../assets/images/dashboard.svg',
-    //   link: '/contracts',
-    // },
+    {
+      index: 4,
+      name: 'Contracts',
+      img: '../../../../assets/images/contracts.svg',
+      link: '/modules/contracts',
+    },
     // {
     //   index: 5,
     //   name: 'Analytics',
@@ -47,7 +47,7 @@ export class SideNavComponent {
     {
       index: 6,
       name: 'Task Management',
-      img: '../../../../assets/images/task-manager.svg',
+      img: '../../../../assets/images/',
       link: '/modules/task-management',
     },
     // {

src/app/modules/contracts/contract-type/contract-type.component.html

@@ -0,0 +1,42 @@
+<section class="contract-type" fxLayout="column" fxLayoutAlign="center center">
+  <main>
+    <h2 class="bold">Create Contract</h2>
+    <p class="bold">
+      Start creating your agreement by selecting the type of worker
+    </p>
+  </main>
+  <div class="gap-10 mt-3" fxLayout="row wrap" fxLayoutAlign="center center">
+    <div class="contractor" fxFlex.lt-md="100" fxFlex.gt-sm="30">
+      <img
+        class="logo"
+        src="../../../../assets/images/contractor.svg"
+        alt=""
+        title=""
+      />
+      <div fxLayout="row" fxLayoutAlign="start center" class="info">
+        <img src="../../../../assets/images/info.svg" alt="" title="" />
+        <span
+          >A person who is self employed and provides services for an
+          organization under a written contract of services</span
+        >
+      </div>
+    </div>
+    <div class="employee" fxFlex.lt-md="100" fxFlex.gt-sm="30">
+      <img
+        class="logo"
+        src="../../../../assets/images/employee_cont.svg"
+        alt=""
+        title=""
+      />
+      <div fxLayout="row" fxLayoutAlign="start center" class="info">
+        <img src="../../../../assets/images/info.svg" alt="" title="" />
+        <span
+          >A person who is employed by an organization for a wage or
+          salary</span
+        >
+      </div>
+    </div>
+  </div>
+
+  <button class="next">Next</button>
+</section>

src/app/modules/contracts/contract-type/contract-type.component.spec.ts

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

src/app/modules/contracts/contract-type/contract-type.component.ts

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

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ContractsComponent } from './contracts.component';
+import { ContractTypeComponent } from './contract-type/contract-type.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContractsComponent,
+    children: [{ path: '', component: ContractTypeComponent }],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ContractsRoutingModule {}

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

@@ -0,0 +1,86 @@
+@mixin contracts-theme() {
+  app-contracts {
+    .contracts {
+      background-color: $off-white;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      padding: 40px 20px;
+      margin: 20px 0;
+      border-radius: 18px;
+      main {
+        h1 {
+          font-size: 16px;
+          span {
+            color: $main-color;
+          }
+        }
+      }
+
+      .contract-type {
+        main {
+          text-align: center;
+          margin-top: 5%;
+          h2 {
+            color: $main-color;
+          }
+          p {
+            color: $main-color;
+            font-size: 15px;
+            margin-top: 10px;
+          }
+        }
+        .contractor,
+        .employee {
+          background-color: $white-color;
+          border-radius: 10px;
+          padding: 10px;
+          height: 220px;
+          cursor: pointer;
+          transition: all 0.5s;
+          border: 4px solid $white-color;
+
+          &:hover {
+            border: 4px solid $light-blue;
+          }
+          @media (max-width: 767px) {
+            height: initial;
+          }
+          .logo {
+            width: 100px;
+            height: 80px;
+            object-fit: cover;
+            margin: 0 auto;
+            display: block;
+          }
+
+          .info {
+            margin-top: 1.5rem;
+          }
+          div {
+            box-sizing: border-box;
+            span {
+              color: $main-color;
+              font-size: 15px;
+              text-align: initial;
+              padding: 0 10px;
+            }
+          }
+        }
+
+        .next {
+          margin-top: 1.5rem;
+          background-color: $light-blue;
+          color: $white-color;
+          padding: 12px 40px;
+          border: none;
+          border-radius: 10px;
+          cursor: pointer;
+          transition: all 0.5s;
+          font-size: 15px;
+          &:hover {
+            background-color: $main-color;
+          }
+        }
+      }
+    }
+  }
+}

src/app/modules/contracts/contracts.component.html

@@ -0,0 +1,10 @@
+<div class="contracts">
+  <main>
+    <h1 fxLayout="row" fxLayoutAlign="start center" class="gap-10 bold">
+      <img src="../../../assets/images/contracts.svg" alt="" title="" />
+      <span>Contracts</span>
+    </h1>
+  </main>
+
+  <router-outlet></router-outlet>
+</div>

src/app/modules/contracts/contracts.component.spec.ts

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

src/app/modules/contracts/contracts.component.ts

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

src/app/modules/contracts/contracts.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContractsRoutingModule } from './contracts-routing.module';
+import { ContractsComponent } from './contracts.component';
+import { ContractTypeComponent } from './contract-type/contract-type.component';
+import { SharedModule } from '@shared/shared.module';
+
+@NgModule({
+  declarations: [ContractsComponent, ContractTypeComponent],
+  imports: [CommonModule, ContractsRoutingModule, SharedModule],
+})
+export class ContractsModule {}

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

@@ -73,6 +73,11 @@ const routes: Routes = [
           import('./chat/chat.module').then((m) => m.ChatModule),
       },
       {
+        path: 'contracts',
+        loadChildren: () =>
+          import('./contracts/contracts.module').then((m) => m.ContractsModule),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

src/assets/scss/variables.scss

@@ -89,6 +89,7 @@ $span-color: #707070;
 @import "../../app/modules/medical-insurance/medical-insurance.component.scss";
 @import "../../app/modules/search-employee/search-employee.component.scss";
 @import "../../app/modules/chat/chat.component.scss";
+@import "../../app/modules/contracts/contracts-theme.scss";
 
 @import "./spineer.scss";
 
@@ -111,6 +112,7 @@ $span-color: #707070;
   @include medical-theme();
   @include search-employee-theme();
   @include chat-theme();
+  @include contracts-theme();
 }
 
 @include component-theme();