medical insurance

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

@@ -1,4 +1,9 @@
-<div class="medical-insurance" fxLayout="row" fxLayoutAlign="start center">
+<div
+  class="medical-insurance ptr"
+  fxLayout="row"
+  fxLayoutAlign="start center"
+  (click)="onGetMedicalInsurance()"
+>
   <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="20">
     <div class="card-body">test</div>
   </div>

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

@@ -1,10 +1,17 @@
 import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-medical-insurance',
   templateUrl: './medical-insurance.component.html',
-  styleUrls: ['./medical-insurance.component.scss']
+  styleUrls: ['./medical-insurance.component.scss'],
 })
 export class MedicalInsuranceComponent {
-
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
+  onGetMedicalInsurance(): void {
+    this.router.navigate(['../../medical'], { relativeTo: this.route });
+  }
 }

src/app/modules/medical-insurance/components/medical-form/medical-form.component.html

@@ -0,0 +1,30 @@
+<form>
+  <p>Register for medical insurance</p>
+  <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
+    <label for="company_name">
+      <span>Medical Company Name <span class="red">*</span></span>
+    </label>
+    <input
+      type="text"
+      placeholder="Enter your Company Name"
+      id="company_name"
+    />
+  </div>
+  <div class="form-input mt-2" fxLayout="column" fxLayoutAlign="start stretch">
+    <label for="employee_name">
+      <span>Employee Name <span class="red">*</span></span>
+    </label>
+    <input type="text" placeholder="Employee Name" id="employee_name" />
+  </div>
+  <div class="form-input mt-2" fxLayout="column" fxLayoutAlign="start stretch">
+    <label for="employee_national_id">
+      <span>Employee National ID <span class="red">*</span></span>
+    </label>
+    <input
+      type="text"
+      placeholder="Enter your Employee National ID"
+      id="employee_national_id"
+    />
+  </div>
+  <button class="ptr" type="submit" mat-dialog-close>Send</button>
+</form>

src/app/modules/medical-insurance/components/medical-form/medical-form.component.scss

@@ -0,0 +1,19 @@
+form {
+  padding: 20px 40px;
+  p {
+    text-align: center;
+  }
+
+  button {
+    background: #28abe3 0% 0% no-repeat padding-box;
+    border-radius: 10px;
+    margin: 0 auto;
+    border: none;
+    padding: 13px 40px;
+    margin-top: 20px;
+    font-size: 15px;
+    font-weight: 700;
+    color: #fff;
+    display: block;
+  }
+}

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

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

src/app/modules/medical-insurance/components/medical-form/medical-form.component.ts

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

src/app/modules/medical-insurance/components/medical-item/medical-item.component.html

@@ -0,0 +1,3 @@
+<div class="item ptr">
+  <p>test</p>
+</div>

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

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

src/app/modules/medical-insurance/components/medical-item/medical-item.component.ts

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

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MedicalInsuranceComponent } from './medical-insurance.component';
+import { MedicalListComponent } from './medical-list/medical-list.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MedicalInsuranceComponent,
+    children: [{ path: '', component: MedicalListComponent }],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MedicalInsuranceRoutingModule {}

src/app/modules/medical-insurance/medical-insurance.component.html

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

src/app/modules/medical-insurance/medical-insurance.component.scss

@@ -0,0 +1,64 @@
+@mixin medical-theme() {
+  app-medical-insurance {
+    .medical-list {
+      background-color: $off-white;
+      border-radius: 25px;
+      padding: 20px;
+      margin: 20px 0;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      main {
+        h1 {
+          font-size: 20px;
+          color: $main-color;
+        }
+      }
+
+      &__search {
+        padding: 30px 0;
+        width: 40%;
+        @media (max-width: 767px) {
+          width: 100%;
+        }
+
+        input {
+          width: 100%;
+          background: #ffffff 0% 0% no-repeat padding-box;
+          box-shadow: 0px 4px 12px #0000001a;
+          border-radius: 19px;
+          outline: none;
+          padding: 10px 20px;
+          border: none;
+        }
+      }
+    }
+
+    .item {
+      margin-bottom: 10px;
+      background-color: $main-color;
+      color: $white-color;
+      text-align: center;
+      padding: 20px;
+      border-radius: 5px;
+    }
+
+    .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;
+      }
+    }
+  }
+}

src/app/modules/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/medical-insurance/medical-insurance.component.ts

@@ -0,0 +1,8 @@
+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/medical-insurance/medical-insurance.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MedicalInsuranceRoutingModule } from './medical-insurance-routing.module';
+import { MedicalInsuranceComponent } from './medical-insurance.component';
+import { MedicalListComponent } from './medical-list/medical-list.component';
+import { SharedModule } from '@shared/shared.module';
+import { MedicalItemComponent } from './components/medical-item/medical-item.component';
+import { MedicalFormComponent } from './components/medical-form/medical-form.component';
+
+@NgModule({
+  declarations: [
+    MedicalInsuranceComponent,
+    MedicalListComponent,
+    MedicalItemComponent,
+    MedicalFormComponent,
+  ],
+  imports: [CommonModule, MedicalInsuranceRoutingModule, SharedModule],
+})
+export class MedicalInsuranceModule {}

src/app/modules/medical-insurance/medical-list/medical-list.component.html

@@ -0,0 +1,30 @@
+<section class="medical-list">
+  <main>
+    <h1 fxLayout="row" fxLayoutAlign="start center" class="gap-10 bold">
+      <img src="../../../../assets/images/arrow.svg" alt="" title="" />
+      <span>Register for medical insurance</span>
+    </h1>
+  </main>
+  <div class="medical-list__search">
+    <input type="search" placeholder="Search..." />
+  </div>
+
+  <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-20">
+    <app-medical-item
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="15"
+      (click)="openCreate()"
+    ></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+    <app-medical-item fxFlex.lt-md="100" fxFlex.gt-sm="15"></app-medical-item>
+  </div>
+</section>

src/app/modules/medical-insurance/medical-list/medical-list.component.spec.ts

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

src/app/modules/medical-insurance/medical-list/medical-list.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MedicalFormComponent } from '../components/medical-form/medical-form.component';
+
+@Component({
+  selector: 'app-medical-list',
+  templateUrl: './medical-list.component.html',
+  styleUrls: ['./medical-list.component.scss'],
+})
+export class MedicalListComponent {
+  constructor(public dialog: MatDialog) {}
+  openCreate(): void {
+    const dialogRef = this.dialog.open(MedicalFormComponent, {
+      data: {},
+      width: '60%',
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log('The dialog was closed');
+    });
+  }
+}

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

@@ -54,6 +54,13 @@ const routes: Routes = [
           ),
       },
       {
+        path: 'medical',
+        loadChildren: () =>
+          import('./medical-insurance/medical-insurance.module').then(
+            (m) => m.MedicalInsuranceModule
+          ),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

src/assets/scss/variables.scss

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