src/app/modules/contracts/components/fixed-rate-forms/contract-compiliance/contract-compiliance.component.html

@@ -0,0 +1 @@
+<p>contract-compiliance works!</p>

src/app/modules/contracts/components/fixed-rate-forms/contract-compiliance/contract-compiliance.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/contract-compiliance/contract-compiliance.component.ts

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

src/app/modules/contracts/components/fixed-rate-forms/other-information/other-information.component.html

@@ -0,0 +1 @@
+<p>other-information works!</p>

src/app/modules/contracts/components/fixed-rate-forms/other-information/other-information.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/other-information/other-information.component.ts

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

src/app/modules/contracts/components/fixed-rate-forms/payment-date/payment-date.component.html

@@ -0,0 +1 @@
+<p>payment-date works!</p>

src/app/modules/contracts/components/fixed-rate-forms/payment-date/payment-date.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/payment-date/payment-date.component.ts

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

src/app/modules/contracts/components/fixed-rate-forms/payment-rate/payment-rate.component.html

@@ -0,0 +1 @@
+<p>payment-rate works!</p>

src/app/modules/contracts/components/fixed-rate-forms/payment-rate/payment-rate.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/payment-rate/payment-rate.component.ts

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

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.html

@@ -0,0 +1,142 @@
+<h2
+  mat-dialog-title
+  fxLayout="row"
+  fxLayoutAlign="center center"
+  class="personal-info-title"
+>
+  <!-- <img src="../../../../../../assets/images/arrow.svg" alt="" title="" /> -->
+  <div class="text-center">
+    <span>Create contractor contract</span>
+    <p class="bold">"Personal Information"</p>
+  </div>
+</h2>
+<mat-dialog-content class="mat-typography">
+  <form>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="entity">
+          <span>Entity <span class="red">*</span></span>
+        </label>
+        <input type="text" id="entity" placeholder="Enter entity name" />
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="contractor_name">
+          <span>Contractor name <span class="red">*</span></span>
+        </label>
+        <input
+          type="text"
+          id="contractor_name"
+          placeholder="Enter contractor name"
+        />
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="email">
+          <span
+            >Contractor personal email address <span class="red">*</span></span
+          >
+        </label>
+        <input type="email" id="email" placeholder="Enter email address" />
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="tax">
+          <span>Contractor's tax residence <span class="red">*</span></span>
+        </label>
+        <input
+          type="text"
+          id="tax"
+          placeholder="Enter Contractor's tax residence"
+        />
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="role">
+          <span>Role<span class="red">*</span></span>
+        </label>
+        <input type="text" id="role" placeholder="Enter role" />
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="security_level">
+          <span>Security level <span class="red">*</span></span>
+        </label>
+        <input
+          type="text"
+          id="security_level"
+          placeholder="Enter security level"
+        />
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="98"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="role">
+          <span>Scope of work<span class="red">*</span></span>
+        </label>
+        <textarea cols="6" rows="6"></textarea>
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="date">
+          <span>Contractor’s start date<span class="red">*</span></span>
+        </label>
+        <input type="date" id="date" placeholder="select date" />
+      </div>
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Back</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial class="next">
+    Next
+  </button>
+</mat-dialog-actions>

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.scss

@@ -0,0 +1,30 @@
+.personal-info-title {
+  div {
+    padding: 10px 0;
+    span {
+      font-size: 18px;
+      color: #2f2c83;
+    }
+    p {
+      font-size: 15px;
+      color: #009fe3;
+    }
+  }
+}
+
+.mdc-dialog__title::before {
+  display: none;
+}
+
+.next {
+  background-color: #009fe3;
+  color: #fff !important;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.5s;
+  font-size: 15px;
+  &:hover {
+    background-color: #2f2c83;
+  }
+}

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.ts

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

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

@@ -6,7 +6,13 @@
     </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">
+    <div
+      class="contractor"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      (click)="onChooseType(0)"
+      [ngClass]="{ active: contractType === 0 }"
+    >
       <img
         class="logo"
         src="../../../../assets/images/contractor.svg"
@@ -21,7 +27,13 @@
         >
       </div>
     </div>
-    <div class="employee" fxFlex.lt-md="100" fxFlex.gt-sm="30">
+    <div
+      class="employee"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      (click)="onChooseType(1)"
+      [ngClass]="{ active: contractType === 1 }"
+    >
       <img
         class="logo"
         src="../../../../assets/images/employee_cont.svg"
@@ -38,5 +50,5 @@
     </div>
   </div>
 
-  <button class="next">Next</button>
+  <button class="next" (click)="onClickNext()">Next</button>
 </section>

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

@@ -0,0 +1 @@
+

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

@@ -1,10 +1,24 @@
 import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-contract-type',
   templateUrl: './contract-type.component.html',
-  styleUrls: ['./contract-type.component.scss']
+  styleUrls: ['./contract-type.component.scss'],
 })
 export class ContractTypeComponent {
+  contractType!: number;
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
+  onChooseType(type: number): void {
+    this.contractType = type;
+  }
 
+  onClickNext(): void {
+    if (this.contractType === 0) {
+      this.router.navigate(['contractor-type'], { relativeTo: this.route });
+    }
+  }
 }

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

@@ -0,0 +1,78 @@
+<section
+  class="contractor-type"
+  fxLayout="column"
+  fxLayoutAlign="center center"
+>
+  <main>
+    <h1 class="bold">Create Contract</h1>
+    <p>What type of contractor's contract are you adding?</p>
+  </main>
+
+  <div fxLayout="row" fxLayoutAlign="center center" class="gap-20 mt-3">
+    <div
+      class="card-type"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      fxLayout="column"
+      fxLayoutAlign="space-around center"
+      (click)="onActiveType(0)"
+      [ngClass]="{ active: activeType === 0 }"
+    >
+      <div class="text-center">
+        <img src="../../../../assets/images/fixedRate.svg" alt="" title="" />
+        <p class="bold">Fixed Rate</p>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="center center" class="info gap-10">
+        <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
+      class="card-type"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      fxLayout="column"
+      fxLayoutAlign="space-around center"
+      (click)="onActiveType(1)"
+      [ngClass]="{ active: activeType === 1 }"
+    >
+      <div class="text-center">
+        <img src="../../../../assets/images/payAsYouGo.svg" alt="" title="" />
+        <p class="bold">Pay as you go</p>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="center center" class="info gap-10">
+        <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
+      class="card-type"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      fxLayout="column"
+      fxLayoutAlign="space-around center"
+      (click)="onActiveType(2)"
+      [ngClass]="{ active: activeType === 2 }"
+    >
+      <div class="text-center">
+        <img src="../../../../assets/images/millestone.svg" alt="" title="" />
+        <p class="bold">Milestone</p>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="center center" class="info gap-10">
+        <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" (click)="onClickNext()">Next</button>
+</section>

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

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

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

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PersonalInformationComponent } from '../components/fixed-rate-forms/personal-information/personal-information.component';
+
+@Component({
+  selector: 'app-contractor-contract-type',
+  templateUrl: './contractor-contract-type.component.html',
+  styleUrls: ['./contractor-contract-type.component.scss'],
+})
+export class ContractorContractTypeComponent {
+  activeType!: number;
+
+  constructor(public readonly dialog: MatDialog) {}
+
+  onActiveType(type: number): void {
+    this.activeType = type;
+  }
+
+  onClickNext(): void {
+    let dialogRef;
+    if (this.activeType === 0) {
+      dialogRef = this.dialog.open(PersonalInformationComponent, {
+        width: '70%',
+      });
+
+      dialogRef.afterClosed().subscribe((result) => {
+        console.log(`Dialog result: ${result}`);
+      });
+    }
+  }
+}

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

@@ -2,12 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ContractsComponent } from './contracts.component';
 import { ContractTypeComponent } from './contract-type/contract-type.component';
+import { ContractorContractTypeComponent } from './contractor-contract-type/contractor-contract-type.component';
 
 const routes: Routes = [
   {
     path: '',
     component: ContractsComponent,
-    children: [{ path: '', component: ContractTypeComponent }],
+    children: [
+      { path: '', component: ContractTypeComponent },
+      { path: 'contractor-type', component: ContractorContractTypeComponent },
+    ],
   },
 ];
 

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

@@ -14,7 +14,6 @@
           }
         }
       }
-
       .contract-type {
         main {
           text-align: center;
@@ -80,7 +79,71 @@
             background-color: $main-color;
           }
         }
+        .active {
+          border: 4px solid $light-blue;
+        }
       }
     }
+    .contractor-type {
+      main {
+        text-align: center;
+        h1 {
+          font-size: 25px;
+          color: $main-color;
+        }
+        p {
+          color: $main-color;
+          margin-top: 10px;
+        }
+      }
+      .card-type {
+        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;
+        }
+        div {
+          p {
+            color: $main-color;
+            margin-top: 5px;
+          }
+        }
+        @media (max-width: 767px) {
+          height: initial;
+        }
+        .info {
+          span {
+            font-size: 15px;
+            color: $main-color;
+          }
+        }
+      }
+      .active {
+        border: 4px solid $light-blue;
+      }
+    }
+
+    .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;
+      }
+    }
+    .active {
+      border: 4px solid $light-blue;
+    }
   }
 }

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

@@ -5,9 +5,15 @@ 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';
+import { ContractorContractTypeComponent } from './contractor-contract-type/contractor-contract-type.component';
+import { PersonalInformationComponent } from './components/fixed-rate-forms/personal-information/personal-information.component';
+import { PaymentRateComponent } from './components/fixed-rate-forms/payment-rate/payment-rate.component';
+import { PaymentDateComponent } from './components/fixed-rate-forms/payment-date/payment-date.component';
+import { OtherInformationComponent } from './components/fixed-rate-forms/other-information/other-information.component';
+import { ContractCompilianceComponent } from './components/fixed-rate-forms/contract-compiliance/contract-compiliance.component';
 
 @NgModule({
-  declarations: [ContractsComponent, ContractTypeComponent],
+  declarations: [ContractsComponent, ContractTypeComponent, ContractorContractTypeComponent, PersonalInformationComponent, PaymentRateComponent, PaymentDateComponent, OtherInformationComponent, ContractCompilianceComponent],
   imports: [CommonModule, ContractsRoutingModule, SharedModule],
 })
 export class ContractsModule {}

src/styles.scss

@@ -264,6 +264,10 @@ input.mat-input-element {
   padding: 10px 0;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 // .owl-prev {
 //   position: absolute;
 //   left: 2px;