First commit

2026-01-13 21:02:23 -06:00
commit 054f45b5bd
403 changed files with 44137 additions and 0 deletions
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard } from './guard/auth.guard';
+import { AuthoriginGuard } from './guard/authorigin.guard';
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'landing',
+    pathMatch: 'full'
+  },
+  { path: 'landing', loadChildren: './pages/landing/landing.module#LandingPageModule' },
+  { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
+  { path: 'register', loadChildren: './pages/auth/register/register.module#RegisterPageModule' },
+  { path: 'forgot', loadChildren: './pages/auth/forgot/forgot.module#ForgotPageModule' },
+
+  { path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule', canActivate: [AuthGuard] },
+  { path: 'home', loadChildren: './home/home.module#HomePageModule', canActivate: [AuthGuard] },
+  { path: 'verify', loadChildren: './verify/verify.module#verifyPageModule', canActivate: [AuthoriginGuard]},
+  { path: 'category/:category', loadChildren: './pages/category/category.module#CategoryPageModule', canActivate: [AuthGuard] },
+  { path: 'addcard', loadChildren: './pages/card/addcard/addcard.module#AddcardPageModule', canActivate: [AuthGuard] },
+  { path: 'cards', loadChildren: './pages/card/cards/cards.module#CardsPageModule', canActivate: [AuthGuard] },
+  { path: 'postulations', loadChildren: './pages/postulations/postulations.module#PostulationsPageModule', canActivate: [AuthGuard] },
+  { path: 'contracts', loadChildren: './pages/contracts/contracts.module#ContractsPageModule', canActivate: [AuthGuard] },
+  { path: 'viewsuppliers/:postulation_id', loadChildren: './pages/contracts/viewsuppliers/viewsuppliers.module#ViewsuppliersPageModule', canActivate: [AuthGuard] },
+  { path: 'hire', loadChildren: './pages/contracts/hire/hire.module#HirePageModule', canActivate: [AuthGuard] },
+  { path: 'start', loadChildren: './pages/contracts/start/start.module#StartPageModule', canActivate: [AuthGuard]},
+  { path: 'review/:contract_id', loadChildren: './pages/contracts/review/review.module#ReviewPageModule', canActivate: [AuthGuard] },
+  { path: 'report/:contract_id', loadChildren: './pages/contracts/report/report.module#ReportPageModule', canActivate: [AuthGuard] },
+  { path: 'reports', loadChildren: './pages/reports/reports.module#ReportsPageModule', canActivate: [AuthGuard]},
+  { path: 'nohome/:contract_id', loadChildren: './pages/contracts/nohome/nohome.module#NohomePageModule', canActivate: [AuthGuard] },
+  { path: 'extra', loadChildren: './pages/contracts/extra/extra.module#ExtraPageModule', canActivate: [AuthGuard] },
+  { path: 'ended', loadChildren: './pages/postulations/ended/ended.module#EndedPageModule', canActivate: [AuthGuard]  },
+  { path: 'hero', loadChildren: './pages/hero/hero.module#HeroPageModule', canActivate: [AuthGuard] },
+  { path: 'comments', loadChildren: './pages/contracts/viewsuppliers/comments/comments.module#CommentsPageModule', canActivate: [AuthGuard]  },
+  { path: 'faq', loadChildren: './pages/faq/faq.module#FaqPageModule',  canActivate: [AuthGuard]  },
+];
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -0,0 +1,30 @@
+<ion-app>
+  <ion-split-pane>
+    <ion-menu>
+      <ion-header>
+        <ion-toolbar color="primary">
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
+            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
+              <ion-icon slot="start" [name]="p.icon"></ion-icon>
+              <ion-label>
+                {{p.title}}
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+          <ion-item (click)="logout()">
+            <ion-icon slot="start" name="log-out"></ion-icon>
+            <ion-label>
+              {{'menu.logout' | translate}}
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+    <ion-router-outlet main></ion-router-outlet>
+  </ion-split-pane>
+</ion-app>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,6 @@
+// App Styles
+// ----------------------------------------------------------------------------
+// Put style rules here that you want to apply to the entire application. These
+// styles are for the entire app and not just one component. Additionally, this
+// file can hold Sass mixins, functions, and placeholder classes to be imported
+// and used throughout the application.
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,67 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed, async } from '@angular/core/testing';
+
+import { Platform } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+
+  let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
+
+  beforeEach(async(() => {
+    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
+    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
+    platformReadySpy = Promise.resolve();
+    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
+
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        { provide: StatusBar, useValue: statusBarSpy },
+        { provide: SplashScreen, useValue: splashScreenSpy },
+        { provide: Platform, useValue: platformSpy },
+      ],
+      imports: [ RouterTestingModule.withRoutes([])],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should initialize the app', async () => {
+    TestBed.createComponent(AppComponent);
+    expect(platformSpy.ready).toHaveBeenCalled();
+    await platformReadySpy;
+    expect(statusBarSpy.styleDefault).toHaveBeenCalled();
+    expect(splashScreenSpy.hide).toHaveBeenCalled();
+  });
+
+  it('should have menu labels', async () => {
+    const fixture = await TestBed.createComponent(AppComponent);
+    await fixture.detectChanges();
+    const app = fixture.nativeElement;
+    const menuItems = app.querySelectorAll('ion-label');
+    expect(menuItems.length).toEqual(2);
+    expect(menuItems[0].textContent).toContain('Home');
+    expect(menuItems[1].textContent).toContain('List');
+  });
+
+  it('should have urls', async () => {
+    const fixture = await TestBed.createComponent(AppComponent);
+    await fixture.detectChanges();
+    const app = fixture.nativeElement;
+    const menuItems = app.querySelectorAll('ion-item');
+    expect(menuItems.length).toEqual(2);
+    expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual('/home');
+    expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual('/list');
+  });
+
+});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -0,0 +1,175 @@
+import { Component } from '@angular/core';
+import { Platform, NavController, LoadingController, AlertController, Events } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { AuthService } from './services/auth.service';
+import { LanguageService } from './services/language.service';
+import { AlertService } from './services/alert.service';
+import { TranslateService } from '@ngx-translate/core';
+import { User } from 'src/app/models/user';
+import { OneSignal, OSNotificationPayload } from '@ionic-native/onesignal/ngx';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+
+  private loading;
+
+  public appPages = [];
+
+  constructor(
+    private platform: Platform,
+    private splashScreen: SplashScreen,
+    private statusBar: StatusBar,
+    private authService: AuthService,
+    private languageService: LanguageService,
+    private translateService: TranslateService,
+    private navCtrl: NavController,
+    private events: Events,
+    private alertService: AlertService,
+    private oneSignal: OneSignal,
+    private iab: InAppBrowser,
+    private loadingCtrl: LoadingController,
+  ) {
+    this.initializeApp();
+    this.events.subscribe('set_role', role => {
+      if (role >= 2){
+        this.appPages = [
+          {
+            title: this.translateService.instant('menu.home'),
+            url: '/dashboard',
+            icon: 'home'
+          },
+          {
+            title: this.translateService.instant('menu.cards'),
+            url: '/cards',
+            icon: 'card'
+          },
+          {
+            title: this.translateService.instant('menu.postulations'),
+            url: '/postulations',
+            icon: 'hammer'
+          },
+          {
+            title: this.translateService.instant('menu.contracts'),
+            url: '/contracts',
+            icon: 'filing'
+          },
+          {
+            title: this.translateService.instant('menu.faq'),
+            url: '/faq',
+            icon: 'information-circle'
+          },
+          {
+            title: this.translateService.instant('menu.start'),
+            url: '/start',
+            icon: 'send'
+          }
+        ];
+      } else {
+        this.appPages = [
+          {
+            title: this.translateService.instant('menu.home'),
+            url: '/dashboard',
+            icon: 'home'
+          },
+          {
+            title: this.translateService.instant('menu.cards'),
+            url: '/cards',
+            icon: 'card'
+          },
+          {
+            title: this.translateService.instant('menu.contracts'),
+            url: '/contracts',
+            icon: 'filing'
+          },
+          {
+            title: this.translateService.instant('menu.faq'),
+            url: '/faq',
+            icon: 'information-circle'
+          },
+          {
+            title: this.translateService.instant('menu.hero'),
+            url: '/hero',
+            icon: 'ribbon'
+          }
+        ];
+      }
+    });
+  }
+  initializeApp() {
+    this.platform.ready().then(() => {
+      this.statusBar.styleLightContent();
+      this.statusBar.overlaysWebView(false);
+      // set status bar to white
+      this.statusBar.backgroundColorByHexString('#0080ff');
+      // Commenting splashScreen Hide, so it won't hide splashScreen before auth check
+      //this.splashScreen.hide();
+      this.languageService.getDefaultLanguage();
+      this.authService.getToken();
+      this.handlerNotifications();
+
+    });
+  }
+
+  // When Logout Button is pressed
+  logout() {
+    this.loadingCtrl.create().then((overlay) => {
+      this.loading = overlay;
+      this.loading.present();
+    });
+    this.authService.logout().subscribe(
+      data => {
+        this.alertService.presentToast(this.translateService.instant('alerts.logout'));
+        this.oneSignal.sendTag("iChamba_ID", null);
+      },
+      error => {
+        this.loading.dismiss();
+        console.log(error);
+      },
+      () => {
+        this.loading.dismiss();
+        this.navCtrl.navigateRoot('/landing');
+      }
+    );
+  }
+
+  openUrl(url) {
+    this.iab.create(url, '_system')
+  }
+
+  private handlerNotifications(){
+    this.oneSignal.startInit('00d23dae-1209-42cc-bea7-e1f17cee27fa', '679874302148');
+      this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.Notification);
+      this.oneSignal.handleNotificationReceived().subscribe(data => this.onPushReceived(data.payload));
+      this.oneSignal.handleNotificationOpened().subscribe(data => this.onPushOpened(data.notification.payload));
+      this.oneSignal.endInit();
+  }
+
+  private onPushReceived(payload: OSNotificationPayload) {
+  	this.alertService.presentAlert(payload.title, payload.body, ['OK']);
+    if (payload.title == 'Proveedor: hay nueva postulación' || payload.title == 'Hero: there is a new postulation') {
+      this.navCtrl.navigateRoot('/postulations');
+      this.events.publish('refreshpostulations', 'data');
+    } else if (payload.title == 'Búsqueda Finalizada' || payload.title == 'Search finished') {
+      this.navCtrl.navigateRoot('/contracts');
+    } else if (payload.title == 'Usuario: el proveedor ha iniciado el servicio' || payload.title == 'User: the Hero has started the service') {
+      this.navCtrl.navigateRoot('/contracts');
+    }
+
+  }
+
+  private onPushOpened(payload: OSNotificationPayload) {
+    if (payload.title == 'Proveedor: hay nueva postulación' || payload.title == 'Hero: there is a new postulation') {
+      this.navCtrl.navigateRoot('/postulations');
+      this.events.publish('refreshpostulations', 'data');
+    } else if (payload.title == 'Búsqueda Finalizada' || payload.title == 'Search finished') {
+      this.navCtrl.navigateRoot('/contracts');
+    } else if (payload.title == 'Usuario: el proveedor ha iniciado el servicio' || payload.title == 'User: the Hero has started the service') {
+      this.navCtrl.navigateRoot('/contracts');
+    }
+  }
+}
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -0,0 +1,76 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { Camera } from '@ionic-native/Camera/ngx';
+import { File } from '@ionic-native/File/ngx';
+import { WebView } from '@ionic-native/ionic-webview/ngx';
+import { FilePath } from '@ionic-native/file-path/ngx';
+import { NativeStorage } from '@ionic-native/native-storage/ngx';
+import { Facebook, FacebookLoginResponse  } from '@ionic-native/facebook/ngx';
+import { GooglePlus } from '@ionic-native/google-plus/ngx';
+import { OneSignal } from '@ionic-native/onesignal/ngx';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
+import { GoogleMaps, Geocoder } from '@ionic-native/google-maps';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+
+import { BrMaskerModule } from 'br-mask';
+import { IonicRatingModule } from 'ionic4-rating';
+import { TagInputModule } from 'ngx-chips';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
+}
+
+@NgModule({
+  declarations: [AppComponent],
+  entryComponents: [],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    }),
+    BrMaskerModule,
+    IonicRatingModule,
+    TagInputModule,
+    BrowserAnimationsModule
+  ],
+  providers: [
+    StatusBar,
+    SplashScreen,
+    Facebook,
+    OneSignal,
+    GooglePlus,
+    Geolocation,
+    LocationAccuracy,
+    GoogleMaps,
+    Geocoder,
+    InAppBrowser,
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    Camera,
+    File,
+    WebView,
+    FilePath,
+    NativeStorage
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
--- a/src/app/components/accordion/accordion.component.html
+++ b/src/app/components/accordion/accordion.component.html
@@ -0,0 +1,4 @@
+<ion-card>
+    <ion-card-header style="font-weight: bold; font-size:1.25em;" color="{{ activeColor }}" (click)="toogleAction()">{{ title }}<ion-icon style="float: right" name="{{ icon }}"></ion-icon></ion-card-header>
+    <ion-card-content *ngIf="accordionExpanded" #cc style="padding-top: 1em"><ng-content></ng-content></ion-card-content>
+</ion-card>
--- a/src/app/components/accordion/accordion.component.scss
+++ b/src/app/components/accordion/accordion.component.scss
--- a/src/app/components/accordion/accordion.component.spec.ts
+++ b/src/app/components/accordion/accordion.component.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+  let component: AccordionComponent;
+  let fixture: ComponentFixture<AccordionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccordionComponent ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/components/accordion/accordion.component.ts
+++ b/src/app/components/accordion/accordion.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-accordion',
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.scss'],
+})
+export class AccordionComponent implements OnInit {
+
+  @Input("title") title: string;
+  accordionExpanded: boolean = false;
+  activeColor: string = "ligth";
+  icon: string = "add";
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  toogleAction() {
+    if (this.accordionExpanded) {
+      this.activeColor = "ligth";
+      this.icon = "add";
+    } else {
+      this.activeColor = "primary";
+      this.icon = "remove";
+    }
+    this.accordionExpanded = !this.accordionExpanded;
+  }
+}
--- a/src/app/components/shared-components.module.ts
+++ b/src/app/components/shared-components.module.ts
@@ -0,0 +1,18 @@
+import { AccordionComponent } from './accordion/accordion.component'
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+
+
+@NgModule({
+  declarations: [AccordionComponent],
+  imports: [
+    CommonModule,
+    IonicModule
+  ],
+  exports: [
+    AccordionComponent
+  ]
+})
+export class SharedComponentsModule { }
--- a/src/app/guard/auth.guard.spec.ts
+++ b/src/app/guard/auth.guard.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthGuard]
+    });
+  });
+
+  it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});
--- a/src/app/guard/auth.guard.ts
+++ b/src/app/guard/auth.guard.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { User } from 'src/app/models/user';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+  user: User;
+
+  constructor(
+    private router: Router,
+    private authService: AuthService
+  ) {}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+
+      const currentUser = this.authService.isLoggedIn;
+      const userVerified = this.authService.isVerified;
+      const userReported = this.authService.isReported;
+
+      //if (userVerified == false) {
+        //this.router.navigate(['/verify']);
+      //  return false;
+      //} else if (userReported == true) {
+      if (userReported == true) {
+        this.router.navigate(['/landing']);
+        return false;
+      } else {
+        if (currentUser) {
+          // authorised so return true
+          return true;
+        }
+      }
+      // not logged in so redirect to login page with the return url
+      this.router.navigate(['/landing']);
+      return false;
+  }
+}
--- a/src/app/guard/authorigin.guard.spec.ts
+++ b/src/app/guard/authorigin.guard.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthoriginGuard } from './authorigin.guard';
+
+describe('AuthoriginGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthoriginGuard]
+    });
+  });
+
+  it('should ...', inject([AuthoriginGuard], (guard: AuthoriginGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});
--- a/src/app/guard/authorigin.guard.ts
+++ b/src/app/guard/authorigin.guard.ts
@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { User } from 'src/app/models/user';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthoriginGuard implements CanActivate {
+
+  user: User;
+
+  constructor(
+    private router: Router,
+    private authService: AuthService
+  ) {}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+
+
+      const currentUser = this.authService.isLoggedIn;
+      const userVerified = this.authService.isVerified;
+
+        if (currentUser) {
+          // authorised so return true
+          return true
+          if (userVerified == true) {
+            this.router.navigate(['/dashboard']);
+          }
+        }
+      // not logged in so redirect to login page with the return url
+      this.router.navigate(['/landing']);
+      return false;
+  }
+}
--- a/src/app/home/home.module.ts
+++ b/src/app/home/home.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { RouterModule } from '@angular/router';
+
+import { HomePage } from './home.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: HomePage
+      }
+    ])
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule {}
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -0,0 +1,44 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>
+      Home
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+    <ion-card class="welcome-card">
+      <img src="/assets/shapes.svg" alt="" />
+      <ion-card-header>
+        <ion-card-subtitle>Get Started</ion-card-subtitle>
+        <ion-card-title>Welcome to Ionic</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
+      </ion-card-content>
+    </ion-card>
+    <ion-list lines="none">
+      <ion-list-header>
+        <ion-label>Resources</ion-label>
+      </ion-list-header>
+      <ion-item href="https://ionicframework.com/docs/">
+        <ion-icon slot="start" color="medium" name="book"></ion-icon>
+        <ion-label>Ionic Documentation</ion-label>
+      </ion-item>
+      <ion-item href="https://ionicframework.com/docs/building/scaffolding">
+        <ion-icon slot="start" color="medium" name="build"></ion-icon>
+        <ion-label>Scaffold Out Your App</ion-label>
+      </ion-item>
+      <ion-item href="https://ionicframework.com/docs/layout/structure">
+        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
+        <ion-label>Change Your App Layout</ion-label>
+      </ion-item>
+      <ion-item href="https://ionicframework.com/docs/theming/basics">
+        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
+        <ion-label>Theme Your App</ion-label>
+      </ion-item>
+    </ion-list>
+</ion-content>
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -0,0 +1,4 @@
+.welcome-card img {
+  max-height: 35vh;
+  overflow: hidden;
+}
--- a/src/app/home/home.page.spec.ts
+++ b/src/app/home/home.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+
+  constructor() {}
+
+}
--- a/src/app/models/user.ts
+++ b/src/app/models/user.ts
@@ -0,0 +1,8 @@
+export class User {
+    id: number;
+    name: string;
+    email: string;
+    phone: string;
+    phone_verified_at: string;
+    reported: boolean;
+}
--- a/src/app/pages.zip
+++ b/src/app/pages.zip
--- a/src/app/pages/auth/forgot/forgot.module.ts
+++ b/src/app/pages/auth/forgot/forgot.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ForgotPage } from './forgot.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ForgotPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [ForgotPage]
+})
+export class ForgotPageModule {}
--- a/src/app/pages/auth/forgot/forgot.page.html
+++ b/src/app/pages/auth/forgot/forgot.page.html
@@ -0,0 +1,21 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-button color="light" (click)="dismissForgot()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{'auth.forgot' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <p text-wrap>{{'auth.forgot_instructions' | translate}}</p><br>
+  <form #form="ngForm" (ngSubmit)="forgot(form)" method="post">
+    <ion-item>
+      <ion-label position="floating">{{'auth.email' | translate}}</ion-label>
+      <ion-input ngModel type="email" name="email"></ion-input>
+    </ion-item>
+    <br>
+    <ion-button type="submit" expand="full" color="primary">{{'auth.reset' | translate}}</ion-button>
+  </form>
+</ion-content>
--- a/src/app/pages/auth/forgot/forgot.page.scss
+++ b/src/app/pages/auth/forgot/forgot.page.scss
--- a/src/app/pages/auth/forgot/forgot.page.spec.ts
+++ b/src/app/pages/auth/forgot/forgot.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPage } from './forgot.page';
+
+describe('ForgotPage', () => {
+  let component: ForgotPage;
+  let fixture: ComponentFixture<ForgotPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ForgotPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ForgotPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/auth/forgot/forgot.page.ts
+++ b/src/app/pages/auth/forgot/forgot.page.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController, LoadingController } from '@ionic/angular';
+import { NgForm } from '@angular/forms';
+import { AuthService } from 'src/app/services/auth.service';
+import { AlertService } from 'src/app/services/alert.service';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-forgot',
+  templateUrl: './forgot.page.html',
+  styleUrls: ['./forgot.page.scss'],
+})
+export class ForgotPage implements OnInit {
+
+  private loading;
+
+  constructor(
+    private authService: AuthService,
+    private navCtrl: NavController,
+    private alertService: AlertService,
+    private translateService: TranslateService,
+    private loadingCtrl: LoadingController
+  ) { }
+  ngOnInit() {
+  }
+  // Dismiss Forgot Modal
+  dismissForgot() {
+    this.navCtrl.back();
+  }
+  // On Register button tap, dismiss login modal and open register modal
+
+  forgot(form: NgForm) {
+    this.loadingCtrl.create().then((overlay) => {
+      this.loading = overlay;
+      this.loading.present();
+    });
+    this.authService.forgot(form.value.email).subscribe(
+      data => {
+        this.loading.dismiss();
+        this.alertService.presentToast(this.translateService.instant('alerts.reset_pass'));
+      },
+      error => {
+          this.loading.dismiss();
+          this.alertService.presentToast(this.translateService.instant('alerts.error') + error['message']);
+          console.log(error);
+      },
+      () => {
+        this.dismissForgot();
+      }
+    );
+  }
+}
--- a/src/app/pages/auth/login/login.module.ts
+++ b/src/app/pages/auth/login/login.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LoginPage } from './login.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [LoginPage]
+})
+export class LoginPageModule {}
--- a/src/app/pages/auth/login/login.page.html
+++ b/src/app/pages/auth/login/login.page.html
@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-button color="light" (click)="dismissLogin()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{'auth.login' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <form #form="ngForm" (ngSubmit)="login(form)" method="post">
+    <ion-item>
+      <ion-label position="floating">{{'auth.email' | translate}}</ion-label>
+      <ion-input ngModel type="email" name="email"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">{{'auth.password' | translate}}</ion-label>
+      <ion-input ngModel type="password" name="password"></ion-input>
+    </ion-item>
+    <br>
+    <ion-button type="submit" expand="full" color="primary">{{'auth.login' | translate}}</ion-button>
+  </form>
+  <ion-text><p text-center (click)="forgotModal()"><u>{{'auth.forgot' | translate}}</u></p></ion-text>
+  <br><br>
+  <ion-button expand="full" color="facebook" (click)="loginFacebook()">{{'auth.fb_login' | translate}}</ion-button>
+  <ion-button expand="full" color="danger" (click)="loginGoogle()">{{'auth.google_login' | translate}}</ion-button>
+  <p text-center>{{'auth.signup_ad' | translate}}</p>
+  <ion-button expand="full" color="secondary" (click)="registerModal()">{{'auth.signup' | translate}}</ion-button>
+  <ion-text><p text-center>{{'auth.terms_1' | translate}}<u (click)="openTerms()">{{'auth.terms_2' | translate}}</u>{{'auth.terms_3' | translate}}</p></ion-text>
+</ion-content>
--- a/src/app/pages/auth/login/login.page.scss
+++ b/src/app/pages/auth/login/login.page.scss
--- a/src/app/pages/auth/login/login.page.spec.ts
+++ b/src/app/pages/auth/login/login.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginPage } from './login.page';
+
+describe('LoginPage', () => {
+  let component: LoginPage;
+  let fixture: ComponentFixture<LoginPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/auth/login/login.page.ts
+++ b/src/app/pages/auth/login/login.page.ts
@@ -0,0 +1,168 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, NavController, LoadingController } from '@ionic/angular';
+import { NgForm } from '@angular/forms';
+import { AuthService } from 'src/app/services/auth.service';
+import { AlertService } from 'src/app/services/alert.service';
+import { TranslateService } from '@ngx-translate/core';
+import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';
+import { GooglePlus } from '@ionic-native/google-plus/ngx';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss']
+})
+export class LoginPage implements OnInit {
+
+  private loading;
+
+  constructor(
+    private modalController: ModalController,
+    private authService: AuthService,
+    private navCtrl: NavController,
+    private alertService: AlertService,
+    private translateService: TranslateService,
+    private fb: Facebook,
+    private googlePlus: GooglePlus,
+    private iab: InAppBrowser,
+    private loadingCtrl: LoadingController
+  ) { }
+  ngOnInit() {
+  }
+  // Dismiss Login Modal
+  dismissLogin() {
+    this.navCtrl.navigateRoot('/landing');
+  }
+  // On Register button tap, dismiss login modal and open register modal
+  registerModal() {
+    this.navCtrl.navigateForward('/register');
+  }
+
+  // On Forgot text tap, dismiss login modal and open forgot modal
+  forgotModal() {
+    this.navCtrl.navigateForward('/forgot');
+  }
+
+  login(form: NgForm) {
+    this.loadingCtrl.create().then((overlay) => {
+      this.loading = overlay;
+      this.loading.present();
+    });
+    this.authService.login(form.value.email, form.value.password).subscribe(
+      data => {
+        this.loading.dismiss();
+      },
+      error => {
+        if (JSON.stringify(error['status']) == '401') {
+          this.loading.dismiss();
+          this.alertService.presentToast(this.translateService.instant('alerts.login_error'));
+        }
+        else {
+          this.loading.dismiss();
+          this.alertService.presentToast(this.translateService.instant('alerts.error') + error['message']);
+          console.log(error);
+        }
+      },
+      () => {
+        this.dismissLogin();
+        this.navCtrl.navigateRoot('/dashboard');
+        this.alertService.presentToast(this.translateService.instant('alerts.login'));
+      }
+    );
+  }
+
+  loginFacebook() {
+      this.loadingCtrl.create().then((overlay) => {
+        this.loading = overlay;
+        this.loading.present();
+      });
+      // Login with permissions
+      this.fb.login(['public_profile', 'email'])
+      .then( (res: FacebookLoginResponse) => {
+
+          // The connection was successful
+          if(res.status == "connected") {
+
+              // Get user ID and Token
+              var fb_id = res.authResponse.userID;
+              var fb_token = res.authResponse.accessToken;
+
+              console.log("ID: " + fb_id);
+              console.log("Token: " + fb_token);
+
+              this.authService.login_register_fb(fb_token, fb_id).subscribe(
+                data => {
+                },
+                error => {
+                  this.loading.dismiss();
+                  this.alertService.presentToast(this.translateService.instant('alerts.error') + error);
+                  console.log(error);
+                },
+                () => {
+                  this.loading.dismiss();
+                  this.dismissLogin();
+                  this.navCtrl.navigateRoot('/dashboard');
+                  this.alertService.presentToast(this.translateService.instant('alerts.login'));
+                }
+              );
+
+          }
+          // An error occurred while loging-in
+          else {
+              this.loading.dismiss();
+              this.alertService.presentToast(this.translateService.instant('alerts.timeout_error'));
+          }
+
+      })
+      .catch((e) => {
+          this.loading.dismiss();
+          this.alertService.presentToast(this.translateService.instant('alerts.error') + e);
+      });
+  }
+
+  loginGoogle() {
+    this.loadingCtrl.create().then((overlay) => {
+      this.loading = overlay;
+      this.loading.present();
+    });
+    // Login with permissions
+      this.googlePlus.login({})
+      .then(res => {
+        console.log(res);
+
+        var google_id = res.userId;
+        var google_token = res.accessToken;
+
+        console.log("ID: " + google_id);
+        console.log("Token: " + google_token);
+
+        this.authService.login_register_googlePlus(google_token, google_id).subscribe(
+          data => {
+          },
+          error => {
+            this.loading.dismiss();
+            this.alertService.presentToast(this.translateService.instant('alerts.error') + error);
+            console.log(error);
+          },
+          () => {
+            this.loading.dismiss();
+            this.dismissLogin();
+            this.navCtrl.navigateRoot('/dashboard');
+            this.alertService.presentToast(this.translateService.instant('alerts.login'));
+          }
+        );
+
+      })
+      .catch(err => {
+        this.loading.dismiss();
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + err);
+        console.log(err);
+      });
+  }
+
+  openTerms() {
+    this.iab.create('https://jobheroapp.com/terminos-y-condiciones', '_system')
+  }
+}
--- a/src/app/pages/auth/register/register.module.ts
+++ b/src/app/pages/auth/register/register.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { RegisterPage } from './register.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RegisterPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [RegisterPage]
+})
+export class RegisterPageModule {}
--- a/src/app/pages/auth/register/register.page.html
+++ b/src/app/pages/auth/register/register.page.html
@@ -0,0 +1,53 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-button color="light" (click)="dismissRegister()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{'auth.signup' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <form #form="ngForm" (ngSubmit)="register(form)" method="post">
+    <ion-item>
+        <ion-label position="floating">{{'auth.name' | translate}}</ion-label>
+        <ion-input ngModel name="name"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">{{'auth.email' | translate}}</ion-label>
+      <ion-input type="email" ngModel name="email"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">{{'auth.phone' | translate}}</ion-label>
+      <ion-input type="tel" ngModel name="phone"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">{{'auth.password' | translate}}</ion-label>
+      <ion-input type="password" ngModel name="password"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">{{'auth.confirm_pass' | translate}}</ion-label>
+      <ion-input type="password" ngModel name="password1"></ion-input>
+    </ion-item>
+    <br><br>
+    <ion-row>
+      <ion-col size="9.5">
+        <p text-center style="margin-bottom:0;margin-top:0.25em;color:#4d4d4d">{{'auth.terms_1' | translate}}<u (click)="openTerms()">{{'auth.terms_2' | translate}}</u>{{'auth.terms_3' | translate}}</p>
+      </ion-col>
+      <ion-col size="2.5">
+        <ion-item lines="none">
+          <ion-checkbox (ionChange)="updateChecked()" name="terms" checked="{{ terms }}"></ion-checkbox>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+    <br>
+    <ion-button type="submit" expand="full" color="secondary">{{'auth.signup' | translate}}</ion-button>
+  </form>
+  <br><p text-center>{{'auth.login_ad' | translate}}</p>
+  <ion-button expand="full" color="primary" (click)="loginModal()">{{'auth.login' | translate}}</ion-button>
+</ion-content>
--- a/src/app/pages/auth/register/register.page.scss
+++ b/src/app/pages/auth/register/register.page.scss
--- a/src/app/pages/auth/register/register.page.spec.ts
+++ b/src/app/pages/auth/register/register.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterPage } from './register.page';
+
+describe('RegisterPage', () => {
+  let component: RegisterPage;
+  let fixture: ComponentFixture<RegisterPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisterPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/auth/register/register.page.ts
+++ b/src/app/pages/auth/register/register.page.ts
@@ -0,0 +1,93 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, NavController, LoadingController } from '@ionic/angular';
+import { AuthService } from 'src/app/services/auth.service';
+import { NgForm } from '@angular/forms';
+import { AlertService } from 'src/app/services/alert.service';
+import { TranslateService } from '@ngx-translate/core';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.page.html',
+  styleUrls: ['./register.page.scss'],
+})
+export class RegisterPage implements OnInit {
+
+  loading = null;
+  terms = false;
+
+  constructor(
+    private modalController: ModalController,
+    private authService: AuthService,
+    private translateService: TranslateService,
+    private navCtrl: NavController,
+    private loadingCtrl: LoadingController,
+    private iab: InAppBrowser,
+    private alertService: AlertService
+  ) { }
+  ngOnInit() {
+  }
+  // Dismiss Register Modal
+  dismissRegister() {
+    this.navCtrl.navigateRoot('/landing');
+  }
+  // On Login button tap, dismiss Register modal and open login Modal
+  loginModal() {
+    this.navCtrl.navigateForward('/login');
+  }
+
+  updateChecked () {
+    if (this.terms == true) {
+      this.terms = false;
+      console.log(this.terms);
+    } else {
+        this.terms = true;
+        console.log(this.terms);
+    }
+  }
+
+  register(form: NgForm) {
+
+    if (this.terms == true) {
+      if (form.value.name && form.value.email && form.value.phone && form.value.password && form.value.password1) {
+        if (form.value.password == form.value.password1) {
+          this.loadingCtrl.create().then((overlay) => {
+            this.loading = overlay;
+            this.loading.present();
+          });
+          this.authService.register(form.value.name, form.value.email, form.value.phone, form.value.password).subscribe(
+            data => {
+                  this.loading.dismiss();
+                  this.alertService.presentToast(this.translateService.instant('alerts.signup'));
+            },
+            error => {
+              if (JSON.stringify(error['status']) == '422') {
+                this.loading.dismiss();
+                this.alertService.presentToast(this.translateService.instant('alerts.signup_error'));
+              }
+              else {
+                this.loading.dismiss();
+                console.log(error);
+                this.alertService.presentToast(this.translateService.instant('alerts.error') + error['message']);
+              }
+            },
+            () => {
+
+            }
+          );
+        } else {
+          this.alertService.presentToast(this.translateService.instant('alerts.signup_error_1'));
+        }
+      } else {
+        this.alertService.presentToast(this.translateService.instant('alerts.signup_error_2'));
+      }
+    } else {
+      this.alertService.presentToast(this.translateService.instant('alerts.signup_error_3'));
+    }
+
+  }
+
+  openTerms() {
+    this.iab.create('https://jobheroapp.com/terminos-y-condiciones', '_system')
+  }
+}
--- a/src/app/pages/card/addcard/addcard.module.ts
+++ b/src/app/pages/card/addcard/addcard.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BrMaskerModule } from 'br-mask';
+
+import { AddcardPage } from './addcard.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AddcardPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BrMaskerModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [AddcardPage]
+})
+export class AddcardPageModule {}
--- a/src/app/pages/card/addcard/addcard.page.html
+++ b/src/app/pages/card/addcard/addcard.page.html
@@ -0,0 +1,95 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{'cards.add' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <form #form="ngForm" id="card_form" (ngSubmit)="addcard(form)" method="post">
+
+    <ion-item [class.ng-invalid]="!holder_check">
+      <ion-label position="floating">{{'cards.holder_name' | translate}}</ion-label>
+      <ion-input ngModel name="holder_name" (ionChange)="holder_checker($event)" [class.ng-invalid]="!holder_check"></ion-input>
+    </ion-item>
+    <ion-item [class.ng-invalid]="!card_check">
+      <ion-label position="floating">{{'cards.card' | translate}}</ion-label>
+      <ion-input type="number" ngModel name="card_number" (ionChange)="card_checker($event)" [class.ng-invalid]="!card_check" size="16" placeholder="{{'cards.card_placeholder' | translate}}"></ion-input>
+    </ion-item>
+    <ion-row>
+      <ion-col size="4">
+        <ion-item [class.ng-invalid]="!date_check">
+          <ion-label position="floating">{{'cards.month' | translate}}</ion-label>
+          <ion-input type="number" ngModel name="expiration_month" (ionChange)="month_checker($event)" [class.ng-invalid]="!date_check" size="2" maxlength="2"></ion-input>
+        </ion-item>
+      </ion-col>
+      <ion-col size="4">
+        <ion-item [class.ng-invalid]="!date_check">
+          <ion-label position="floating">{{'cards.year' | translate}}</ion-label>
+          <ion-input type="number" ngModel name="expiration_year" (ionChange)="year_checker($event)" [class.ng-invalid]="!date_check" size="2" maxlength="2"></ion-input>
+        </ion-item>
+      </ion-col>
+      <ion-col size="4">
+        <ion-item [class.ng-invalid]="!cvv_check">
+          <ion-label position="floating">CVV</ion-label>
+          <ion-input type="password" ngModel name="cvv2" (ionChange)="cvv_checker($event)" [class.ng-invalid]="!cvv_check" size="3" maxlength="4"></ion-input>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+
+    <br>
+    <ion-button type="submit" expand="full" color="primary">{{'cards.add_2' | translate}}</ion-button>
+  </form>
+  <br>
+  <ion-row class="ion-align-items-center">
+    <ion-col size="4">
+      <img src="/assets/openpay/openpay_color.png" style="padding:0.25em 0.5em"/>
+    </ion-col>
+    <ion-col size=8>
+      <p>{{'cards.openpay_1' | translate}}</p>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col size="6">
+      <p text-center>{{'cards.openpay_2' | translate}}<p>
+    </ion-col>
+    <ion-col size="6" style="border-left: 1px solid #d0d0d0">
+      <p text-center>{{'cards.openpay_3' | translate}}<p>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col size="3">
+      <img src="/assets/openpay/visa.png" style="padding:0.1em 1.0em"/>
+    </ion-col>
+    <ion-col size="3">
+      <img src="/assets/openpay/masterCard.png" style="padding:0.25em 1.5em;"/>
+    </ion-col>
+    <ion-col size="2" style="border-left: 1px solid #d0d0d0">
+      <img src="/assets/openpay/citibanamex.png"/>
+    </ion-col>
+    <ion-col size=2>
+      <img src="/assets/openpay/bancoAzteca.png"/>
+    </ion-col>
+    <ion-col size=2>
+      <img src="/assets/openpay/scotiabank.png"/>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col size="3">
+      <img src="/assets/openpay/americanExpress.png" style="padding:0.5em 1.5em"/>
+    </ion-col>
+    <ion-col size="3">
+      <img src="/assets/openpay/carnet.png"/>
+    </ion-col>
+    <ion-col size="2" style="border-left: 1px solid #d0d0d0">
+      <img src="/assets/openpay/inbursa.png"/>
+    </ion-col>
+    <ion-col size=2>
+      <img src="/assets/openpay/santander.png"/>
+    </ion-col>
+    <ion-col size=2>
+      <img src="/assets/openpay/bbva.png"/>
+    </ion-col>
+  </ion-row>
+</ion-content>
--- a/src/app/pages/card/addcard/addcard.page.scss
+++ b/src/app/pages/card/addcard/addcard.page.scss
@@ -0,0 +1,3 @@
+.invalid {
+     border-bottom: 3px solid #ea6153 !important;
+}
--- a/src/app/pages/card/addcard/addcard.page.spec.ts
+++ b/src/app/pages/card/addcard/addcard.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddcardPage } from './addcard.page';
+
+describe('AddcardPage', () => {
+  let component: AddcardPage;
+  let fixture: ComponentFixture<AddcardPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddcardPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddcardPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/card/addcard/addcard.page.ts
+++ b/src/app/pages/card/addcard/addcard.page.ts
@@ -0,0 +1,180 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, MenuController, NavController, Events, LoadingController } from '@ionic/angular';
+import { NgForm } from '@angular/forms';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { AlertService } from 'src/app/services/alert.service';
+import { TranslateService } from '@ngx-translate/core';
+
+declare var OpenPay: any;
+
+@Component({
+  selector: 'app-addcard',
+  templateUrl: './addcard.page.html',
+  styleUrls: ['./addcard.page.scss'],
+})
+export class AddcardPage implements OnInit {
+
+  private loading;
+  card_check = true;
+  date_check = true;
+  cvv_check = true;
+  holder_check = null;
+  line1_check = null;
+  line2_check = null;
+  line3_check = null;
+  postal_code_check = null;
+  city_check = null;
+  state_check = null;
+  month_number = null;
+  year_number = null;
+
+  constructor(
+    private modalController: ModalController,
+    private menu: MenuController,
+    private authService: AuthService,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private translateService: TranslateService,
+    private navCtrl: NavController,
+    private loadingCtrl: LoadingController,
+    private events: Events,
+    private env: EnvService,
+  ) { }
+
+  ngOnInit() {
+    OpenPay.setId(this.env.MERCHANT_ID);
+    OpenPay.setApiKey(this.env.PUBLIC_API_KEY);
+    //OpenPay.setSandboxMode(true);
+    console.log(OpenPay.getSandboxMode());
+    var deviceDataId = OpenPay.deviceData.setup("card_form");
+  }
+
+  card_checker(ev: any) {
+    if (ev.target.value.length > 16) {
+      console.log(ev.target.value.length);
+      ev.target.value = ev.target.value.slice(0, 16);
+    }
+    this.card_check = OpenPay.card.validateCardNumber(ev.target.value);
+    console.log(this.card_check);
+  }
+
+  month_checker(ev: any) {
+    if (ev.target.value.length > 2) {
+      console.log(ev.target.value.length);
+      ev.target.value = ev.target.value.slice(0, 2);
+    }
+    this.month_number = ev.target.value;
+    this.date_check = OpenPay.card.validateExpiry(this.month_number, this.year_number);
+    console.log(this.month_number);
+  }
+
+  year_checker(ev: any) {
+    if (ev.target.value.length > 2) {
+      console.log(ev.target.value.length);
+      ev.target.value = ev.target.value.slice(0, 2);
+    }
+    this.year_number = ev.target.value;
+    this.date_check = OpenPay.card.validateExpiry(this.month_number, this.year_number);
+    console.log(this.card_check);
+  }
+
+  cvv_checker(ev: any) {
+    if (ev.target.value.length > 4){
+      console.log(ev.target.value.length);
+      ev.target.value = ev.target.value.slice(0, 4);
+    }
+    this.cvv_check = OpenPay.card.validateCVC(ev.target.value);
+    console.log(this.cvv_check);
+  }
+
+  holder_checker(ev: any) {
+    this.holder_check = (ev.target.value == '' ? false : true);
+    console.log(this.holder_check);
+  }
+
+  line1_checker(ev: any) {
+    this.line1_check = (ev.target.value == '' ? false : true);
+    console.log(this.line1_check);
+  }
+
+  line2_checker(ev: any) {
+    this.line2_check = (ev.target.value == '' ? false : true);
+    console.log(this.line2_check);
+  }
+
+  line3_checker(ev: any) {
+    this.line3_check = (ev.target.value == '' ? false : true);
+    console.log(this.line3_check);
+  }
+
+  postal_code_checker(ev: any) {
+    this.postal_code_check = (ev.target.value == '' ? false : true);
+    console.log(this.postal_code_check);
+  }
+
+  city_checker(ev: any) {
+    this.city_check = (ev.target.value == '' ? false : true);
+    console.log(this.city_check);
+  }
+
+  state_checker(ev: any) {
+    this.state_check = (ev.target.value == '' ? false : true);
+    console.log(this.state_check);
+  }
+
+  addcard(form: NgForm) {
+    if (this.holder_check && this.card_check && this.date_check && this.cvv_check /*&& this.line1_check && this.line2_check && this.line3_check && this.postal_code_check && this.city_check && this.state_check*/) {
+        this.loadingCtrl.create().then((overlay) => {
+          this.loading = overlay;
+          this.loading.present();
+        });
+        OpenPay.token.create({
+          "card_number": form.value.card_number,
+          "holder_name": form.value.holder_name,
+          "expiration_year": form.value.expiration_year,
+          "expiration_month": form.value.expiration_month,
+          "cvv2": form.value.cvv2,
+          /*"address":{
+             "city": form.value.city,
+             "line3": form.value.line3,
+             "postal_code": form.value.postal_code,
+             "line1": form.value.line1,
+             "line2": form.value.line2,
+             "state": form.value.state,
+             "country_code":"MX"
+          }*/
+        },
+        onSuccess => {
+          let token = onSuccess.data.id;
+          let device_id = (<HTMLInputElement>document.getElementById('deviceDataId')).value;
+          this.ichambaService.addCard(token, device_id).subscribe(
+            data => {
+              if (data['type'] == "error") {
+                this.loading.dismiss();
+                this.alertService.presentToast(data['message']);
+              } else {
+                this.events.publish('refreshcards', 'data');
+                this.loading.dismiss();
+                this.dismissAddcard();
+                this.alertService.presentToast(this.translateService.instant('alerts.added_card'));
+              }
+            }, error => {
+              this.loading.dismiss();
+              this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+            });
+          //console.log(onSuccess.data.id);
+          //console.log(document.getElementById('deviceDataId').value);
+        }, onError => {
+            this.loading.dismiss();
+            this.alertService.presentToast(this.translateService.instant('alerts.geo_error') + onError['status']);
+        });
+    }
+  }
+
+  dismissAddcard() {
+    this.navCtrl.back();
+  }
+
+}
--- a/src/app/pages/card/cards/cards.module.ts
+++ b/src/app/pages/card/cards/cards.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+import { BrMaskerModule } from 'br-mask';
+
+import { CardsPage } from './cards.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CardsPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BrMaskerModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [CardsPage],
+})
+export class CardsPageModule {}
--- a/src/app/pages/card/cards/cards.page.html
+++ b/src/app/pages/card/cards/cards.page.html
@@ -0,0 +1,22 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>{{'cards.header' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <ion-card *ngFor="let card of cards">
+    <ion-item>
+      <ion-label>
+        <h2 text-capitalize>{{ card.brand }}</h2>
+        <p>{{card.card_number}}</p>
+      </ion-label>
+      <ion-button color="danger" (click)="deletecard(card.id)">
+        <ion-icon name="trash"></ion-icon>
+      </ion-button>
+    </ion-item>
+  </ion-card>
+  <ion-button type="submit" expand="full" color="primary" (click)="newcard()">{{'cards.add' | translate}}</ion-button>
+</ion-content>
--- a/src/app/pages/card/cards/cards.page.scss
+++ b/src/app/pages/card/cards/cards.page.scss
--- a/src/app/pages/card/cards/cards.page.spec.ts
+++ b/src/app/pages/card/cards/cards.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardsPage } from './cards.page';
+
+describe('CardsPage', () => {
+  let component: CardsPage;
+  let fixture: ComponentFixture<CardsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/card/cards/cards.page.ts
+++ b/src/app/pages/card/cards/cards.page.ts
@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { TranslateService } from '@ngx-translate/core';
+import { AlertService } from 'src/app/services/alert.service';
+
+
+@Component({
+  selector: 'app-cards',
+  templateUrl: './cards.page.html',
+  styleUrls: ['./cards.page.scss'],
+})
+export class CardsPage implements OnInit {
+
+  cards = [];
+
+  constructor(
+      private modalController: ModalController,
+      private menu: MenuController,
+      private navCtrl: NavController,
+      private events: Events,
+      private authService: AuthService,
+      private alertService: AlertService,
+      private ichambaService: IchambaService,
+      private translateService: TranslateService,
+      private env: EnvService,
+  ) {
+    this.events.subscribe('refreshcards', (data) => {
+      this.getcards();
+    });
+  }
+
+  ngOnInit() {
+    this.getcards();
+  }
+
+  newcard() {
+    this.navCtrl.navigateForward('/addcard');
+  }
+
+
+  getcards() {
+    this.ichambaService.getCard().subscribe(
+      data => {
+        this.cards = data;
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+      });
+  }
+
+  deletecard(id: String) {
+    this.ichambaService.deleteCard(id).subscribe(
+      data => {
+        this.getcards();
+        this.alertService.presentToast(this.translateService.instant('alerts.deleted_card'));
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+      });
+  }
+
+}
--- a/src/app/pages/category/category.module.ts
+++ b/src/app/pages/category/category.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CategoryPage } from './category.page';
+import { TranslateModule } from '@ngx-translate/core'
+import { BrMaskerModule } from 'br-mask';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CategoryPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BrMaskerModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [CategoryPage]
+})
+export class CategoryPageModule {}
--- a/src/app/pages/category/category.page.html
+++ b/src/app/pages/category/category.page.html
@@ -0,0 +1,64 @@
+<style>
+  ion-list {
+  	position: absolute;
+    width: 100%;
+    max-height: 50%;
+  	z-index: 999;
+  }
+  ion-item.place:active:after {
+  	cursor: pointer;
+  	background-color: #ff7d00 !important;
+  }
+</style>
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{'categories.header' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-item>
+    <ion-label position="fixed">{{'categories.category' | translate}}</ion-label>
+    <ion-input value="{{ category }}" disabled></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label position="fixed">{{'categories.address' | translate}}</ion-label>
+    <ion-input [(ngModel)]="addressAutocomplete" (ionChange)="autocomplete($event)" value="{{ myAddress }}" (ionFocus)="showlist()"></ion-input>
+  </ion-item>
+  <ion-list *ngIf="showif">
+    <ion-item button=true (click)="geoloc(places.place_id, places.description, places.terms[1].value)" *ngFor="let places of placesSearch" class="place">
+      {{ places.description }}
+    </ion-item>
+  </ion-list>
+  <ion-item hidden>
+    <ion-label position="fixed">{{'categories.int_number' | translate}}</ion-label>
+    <ion-input value="{{ myIntnumber }}" disabled></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label position="fixed">{{'categories.references' | translate}}</ion-label>
+    <ion-textarea [(ngModel)]="references" placeholder="{{'categories.references_placeholder' | translate}}"></ion-textarea>
+  </ion-item>
+  <ion-item hidden>
+    <ion-label position="fixed">Latitud</ion-label>
+    <ion-input value="{{ myPosition.latitude }}" disabled></ion-input>
+  </ion-item>
+  <ion-item hidden>
+    <ion-label position="fixed">Longitud</ion-label>
+    <ion-input value="{{ myPosition.longitude }}" disabled></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label position="fixed">{{'categories.date' | translate}}</ion-label>
+    <ion-datetime displayFormat="DD MM YYYY" [(ngModel)]="setDate" (ionChange)="changedate($event)" placeholder="{{'categories.date_placeholder' | translate}}" [min]="minyear" [max]="maxyear"></ion-datetime>
+  </ion-item>
+  <ion-item>
+    <ion-label position="fixed">{{'categories.time' | translate}}</ion-label>
+    <ion-datetime displayFormat="hh mm a" [(ngModel)]="setHour" (ionChange)="changehour($event)" placeholder="{{'categories.time_placeholder' | translate}}"></ion-datetime>
+  </ion-item>
+  <ion-item>
+    <ion-label position="fixed">{{'categories.commentaries' | translate}}</ion-label>
+    <ion-textarea [(ngModel)]="details"></ion-textarea>
+  </ion-item>
+  <ion-button type="submit" expand="full" color="primary" (click)="addpostulation()">{{'categories.add_postulation' | translate}}</ion-button>
+</ion-content>
--- a/src/app/pages/category/category.page.scss
+++ b/src/app/pages/category/category.page.scss
@@ -0,0 +1 @@
+
--- a/src/app/pages/category/category.page.spec.ts
+++ b/src/app/pages/category/category.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CategoryPage } from './category.page';
+
+describe('CategoryPage', () => {
+  let component: CategoryPage;
+  let fixture: ComponentFixture<CategoryPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CategoryPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CategoryPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/category/category.page.ts
+++ b/src/app/pages/category/category.page.ts
@@ -0,0 +1,207 @@
+import { Component, OnInit, NgZone } from '@angular/core';
+import { NavController, LoadingController } from '@ionic/angular';
+import { ActivatedRoute } from '@angular/router';
+import { NgForm } from '@angular/forms';
+import { AuthService } from 'src/app/services/auth.service';
+import { AlertService } from 'src/app/services/alert.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
+import { TranslateService } from '@ngx-translate/core';
+import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Geocoder, GeocoderRequest, GeocoderResult } from '@ionic-native/google-maps';
+
+declare var google: any;
+
+@Component({
+  selector: 'app-category',
+  templateUrl: './category.page.html',
+  styleUrls: ['./category.page.scss'],
+})
+export class CategoryPage implements OnInit {
+
+  private loading;
+  category = null;
+  //money: number = null;
+  //amount: number = null;
+  //amount_check = true;
+  minyear: string = (new Date().getFullYear() + '-' +  ((new Date().getMonth() + 1) < 10 ? '0' : '') + (new Date().getMonth() + 1) + '-' + (new Date().getDate() < 10 ? '0' : '') + new Date().getDate()).toString();
+  maxyear: string = null;
+  mintime: number;
+  maxtime: number;
+  setHour: any;
+  setDate: any;
+  references: string;
+  details: string;
+  differenceDate: number;
+  differenceHour: number;
+  myPosition: any = {};
+  myAddress: string = null;
+  myIntnumber: string = null;
+  addressAutocomplete: string = '';
+  placesSearch: string = '';
+  showif = true;
+
+  constructor(
+    private authService: AuthService,
+    private navCtrl: NavController,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private activatedRoute: ActivatedRoute,
+    private geolocation: Geolocation,
+    private translateService: TranslateService,
+    private googleMaps: GoogleMaps,
+    private geocoder: Geocoder,
+    private locaccuracy: LocationAccuracy,
+    private ngZone: NgZone,
+    private loadingCtrl: LoadingController
+  ) {
+    console.log(google);
+  }
+
+  ngOnInit() {
+    this.category = this.activatedRoute.snapshot.paramMap.get('category');
+    this.ichambaService.getParameters()
+      .subscribe( data => {
+        this.mintime = data['min_time'];
+        this.maxtime = data['max_time'];
+      });
+    this.getCurrentLocation();
+    console.log(this.minyear);
+    if (new Date().getMonth() == 11) {
+        this.maxyear = ((new Date().getFullYear()+1) + '-' + '01' + '-' + (new Date().getDate() < 10 ? '0' : '') + new Date().getDate()).toString();
+    } else {
+      this.maxyear = (new Date().getFullYear() + '-' + ((new Date().getMonth() + 2) < 10 ? '0' : '') + (new Date().getMonth() + 2) +'-' + (new Date().getDate() < 10 ? '0' : '') + new Date().getDate()).toString();
+    }
+    console.log(this.maxyear);
+  }
+
+  getCurrentLocation() {
+        this.locaccuracy.request(this.locaccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(() => {
+          this.geolocation.getCurrentPosition({ maximumAge: 20000, timeout: 30000, enableHighAccuracy: true }).then((resp) => {
+            console.log(resp);
+            this.myPosition = {
+              latitude: resp.coords.latitude,
+              longitude: resp.coords.longitude
+            }
+            this.doGeocode();
+          }).catch((error) => {
+            console.log(this.translateService.instant('alerts.geo_error') + error);
+          });
+        }, (error) => {
+          console.log(error);
+        });
+  }
+
+  doGeocode() {
+   let request: GeocoderRequest = {
+     position: new LatLng(this.myPosition.latitude, this.myPosition.longitude),
+   };
+   this.geocoder.geocode(request)
+   .then((results: GeocoderResult[]) => {
+     let address = [
+       (results[0].thoroughfare || "") + " " + (results[0].subThoroughfare || ""),
+       results[0].locality
+     ].join(", ");
+     console.log("data_: ", address);
+     this.myAddress = address;
+   });
+  }
+
+  /* check (ev: any) {
+    this.amount = parseFloat(ev.target.value.replace(",", ""));
+    console.log(this.amount);
+    if (this.amount < 150) {
+      this.amount_check = false;
+    } else {
+      this.amount_check = true;
+    }
+  }*/
+
+  changehour (ev: any) {
+    console.log(this.setHour);
+  }
+
+  changedate (ev: any) {
+    console.log(ev.target.value);
+    let current_date = (new Date().toISOString().slice(0, 10)).toString();
+    let selected_date = (new Date(this.setDate).toISOString().slice(0, 10)).toString();
+    this.differenceDate = (Number(new Date(selected_date)) - Number(new Date(current_date)));
+    console.log(this.differenceDate);
+  }
+
+  autocomplete(ev: any) {
+    if (!this.addressAutocomplete.trim().length) {
+      this.placesSearch = null;
+    }
+    console.log(this.addressAutocomplete)
+    new google.maps.places.AutocompleteService().getPredictions({ input: this.addressAutocomplete }, predictions => {
+      this.ngZone.run(() => {
+        this.placesSearch = predictions;
+        console.log(predictions);
+      });
+    });
+  }
+
+  geoloc(place_id: string, place_description: string, place_intnumber: string) {
+    this.myAddress = place_description;
+    this.myIntnumber = place_intnumber;
+    console.log(place_id);
+    this.hidelist();
+    new google.maps.Geocoder().geocode({ placeId: place_id }, coordinates  => {
+      this.ngZone.run(() => {
+        console.log(coordinates[0].geometry.location.lat() + ", " + coordinates[0].geometry.location.lng());
+        this.myPosition = {
+          latitude: coordinates[0].geometry.location.lat(),
+          longitude: coordinates[0].geometry.location.lng()
+        }
+      });
+    });
+  }
+
+  addpostulation() {
+    this.differenceHour = (new Date(this.setHour).getTime() - new Date().getTime());
+    console.log(this.differenceHour);
+    console.log("mintime:" + this.mintime * 3600000);
+    console.log("maxtime:" + this.maxtime * 3600000)
+    if (this.differenceDate < 86400000 && this.differenceHour < (this.mintime * 3600000)) {
+      this.alertService.presentToast(this.translateService.instant('alerts.categories_mintime'));
+    } else if (this.differenceDate <= (this.maxtime * 3600000)) {
+        if (this.myAddress && this.myPosition.latitude && this.myPosition.longitude) {
+            this.loadingCtrl.create().then((overlay) => {
+              this.loading = overlay;
+              this.loading.present();
+            });
+
+            if (!Number.isInteger(parseInt(this.myIntnumber))) {
+              this.myIntnumber = null;
+            }
+            this.ichambaService.addPostulation(this.category, this.myAddress, this.myIntnumber, this.references, this.myPosition.latitude, this.myPosition.longitude, this.setDate, this.setHour, this.details).subscribe(
+              data => {
+                this.loading.dismiss();
+                if (data['message'] == 'No providers') {
+                  this.alertService.presentToast(this.translateService.instant('alerts.no_provider'));
+                } else {
+                  this.navCtrl.navigateRoot('/dashboard');
+                  this.alertService.presentToast(this.translateService.instant('alerts.categories_success'));
+                }
+              }, error => {
+                this.loading.dismiss();
+                this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+              });
+        } else {
+          this.alertService.presentToast(this.translateService.instant('alerts.valid_address'));
+        }
+    } else {
+      this.alertService.presentToast(this.translateService.instant('alerts.categories_maxtime'));
+    }
+  }
+
+  showlist() {
+    this.showif = true;
+  }
+
+  hidelist() {
+    this.showif = false;
+  }
+
+}
--- a/src/app/pages/contracts/contracted/contracted.module.ts
+++ b/src/app/pages/contracts/contracted/contracted.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ContractedPage } from './contracted.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContractedPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [ContractedPage]
+})
+export class ContractedPageModule {}
--- a/src/app/pages/contracts/contracted/contracted.page.html
+++ b/src/app/pages/contracts/contracted/contracted.page.html
@@ -0,0 +1,32 @@
+<ion-header>
+<ion-toolbar color="primary">
+  <ion-buttons slot="start">
+    <ion-menu-button></ion-menu-button>
+  </ion-buttons>
+  <ion-title>{{'contracts.header' | translate}}</ion-title>
+</ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <h2 text-capitalize style="padding-bottom: 0.5em">{{'contracts.header_2' | translate}}</h2>
+  <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+    <ng-container *ngFor="let ccontract of ccontracts; let i = index">
+      <ion-card *ngIf="ccontract.status==1">
+        <ion-item style="--border-color: #fff">
+          <ion-label>
+            <h2 *ngIf="lang===true"text-capitalize>{{ ccontract.category }}</h2>
+            <h2 *ngIf="lang===false"text-capitalize>{{ ccontract.en_category }}</h2>
+            <p text-wrap>{{ ccontract.address }}</p>
+            <p text-wrap text-capitalize>{{ ccontracts_dates[i] }}</p>
+            <p text-wrap text-capitalize>{{'contracts.supplier' | translate}}: {{ ccontract.supplier }}</p>
+            <p text-wrap>{{'contracts.phone' | translate}}: <a href="tel:{{ ccontract.phone }}">{{ ccontract.phone }}</a></p>
+            <p text-wrap text-capitalize>{{'contracts.amount' | translate}}: ${{ ccontract.amount }}</p>
+            <h2 text-wrap>{{'contracts.start_pin' | translate}}<b>{{ ccontract.code }}</b></h2>
+            <p text-wrap>{{'contracts.info_pin' | translate}}</p>
+          </ion-label>
+          </ion-item>
+          <ion-button *ngIf="ccontract.past_due < 0" style="height: 4.0em; padding-right: 1.0em; padding-bottom:1.0em; float: right" color="danger" (click)="cancelContract(ccontract.id, ccontract.date)">{{'contracts.cancel_1.1' | translate}}<br>{{'contracts.cancel_1.2' | translate}}</ion-button>
+      </ion-card>
+    </ng-container>
+</ion-content>
--- a/src/app/pages/contracts/contracted/contracted.page.scss
+++ b/src/app/pages/contracts/contracted/contracted.page.scss
--- a/src/app/pages/contracts/contracted/contracted.page.spec.ts
+++ b/src/app/pages/contracts/contracted/contracted.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContractedPage } from './contracted.page';
+
+describe('ContractedPage', () => {
+  let component: ContractedPage;
+  let fixture: ComponentFixture<ContractedPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContractedPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContractedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/contracted/contracted.page.ts
+++ b/src/app/pages/contracts/contracted/contracted.page.ts
@@ -0,0 +1,128 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from 'src/app/services/language.service';
+import { AlertService } from 'src/app/services/alert.service';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-contracted',
+  templateUrl: './contracted.page.html',
+  styleUrls: ['./contracted.page.scss'],
+})
+export class ContractedPage implements OnInit {
+
+  ccontracts = [];
+  ccontracts_dates = [];
+  lang: boolean;
+
+  constructor(
+    private modalController: ModalController,
+    private menu: MenuController,
+    private navCtrl: NavController,
+    private events: Events,
+    private alertController: AlertController,
+    private authService: AuthService,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private translateService: TranslateService,
+    private languageService: LanguageService,
+    private env: EnvService,
+  ) {
+    this.events.subscribe('refreshccontracts', (data) => {
+      this.getccontracts();
+    });
+  }
+
+  ngOnInit() {
+    this.getccontracts();
+    if (this.languageService.getDefaultLanguage() == 'es') {
+      this.lang = true;
+    } else {
+      this.lang = false
+    }
+  }
+
+  refresh(event) {
+    this.ichambaService.getCurrentcontracts().subscribe(
+      data => {
+        this.ccontracts = data;
+        for (var i of this.ccontracts) {
+          if (this.languageService.getDefaultLanguage() == 'es') {
+            this.ccontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('es-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          } else {
+            this.ccontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          }
+        }
+        event.target.complete();
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+        event.target.complete();
+      });
+  }
+
+  getccontracts() {
+    this.ichambaService.getCurrentcontracts().subscribe(
+      data => {
+        this.ccontracts = data;
+        for (var i of this.ccontracts) {
+          if (this.languageService.getDefaultLanguage() == 'es') {
+            this.ccontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('es-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          } else {
+            this.ccontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          }
+        }
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+      });
+  }
+
+  cancelContract(id: String, date: string) {
+    let current_date = new Date().toISOString();
+    let selected_date = new Date(date).toISOString();
+    let differenceDate = (Number(new Date(selected_date)) - Number(new Date(current_date)));
+
+    /* if (differenceDate < 86400000) {
+      this.presentAlert(id)
+    } else { */
+    this.ichambaService.cancelContract(id).subscribe(
+      data => {
+        this.getccontracts();
+        this.alertService.presentToast(data['message']);
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+      });
+    //}
+  }
+
+  async presentAlert(id: String) {
+    const alert = await this.alertController.create({
+      header: 'Atención',
+      message: 'Si cancela un servicio sin 24 horas de anticipación, no se devolverá el monto total. ¿Está seguro de que desea cancelar?',
+      cssClass: 'light',
+      buttons: [
+        {
+          text: 'Cancelar',
+          role: 'cancel',
+          cssClass: 'secondary',
+        },
+        {
+          text: 'Confirmar',
+          handler: () => {
+            this.ichambaService.cancelContract(id).subscribe(
+              data => {
+                this.getccontracts();
+                this.alertService.presentToast(data['message']);
+              }, error => {
+                this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+              });
+          }
+      }]
+  });
+    await alert.present();
+  }
+
+}
--- a/src/app/pages/contracts/contracts.module.ts
+++ b/src/app/pages/contracts/contracts.module.ts
@@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ContractsPage } from './contracts.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+        path: '',
+        redirectTo: '/contracts/pending',
+        pathMatch: 'full'
+  },
+  {
+    path: '',
+    component: ContractsPage,
+    children: [
+      {
+        path: 'pending',
+        loadChildren: './pending/pending.module#PendingPageModule'
+      },
+      {
+        path: 'redated',
+        loadChildren: './redated/redated.module#RedatedPageModule'
+      },
+      {
+        path: 'contracted',
+        loadChildren: './contracted/contracted.module#ContractedPageModule'
+      },
+      {
+        path: 'finished',
+        loadChildren: './finished/finished.module#FinishedPageModule'
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [ContractsPage]
+})
+export class ContractsPageModule {}
--- a/src/app/pages/contracts/contracts.page.html
+++ b/src/app/pages/contracts/contracts.page.html
@@ -0,0 +1,28 @@
+<ion-header>
+<ion-toolbar color="primary">
+  <ion-buttons slot="start">
+    <ion-menu-button></ion-menu-button>
+  </ion-buttons>
+  <ion-title>{{'contracts.header' | translate}}</ion-title>
+</ion-toolbar>
+</ion-header>
+<ion-tabs>
+  <ion-tab-bar slot="bottom">
+
+    <ion-tab-button tab="pending">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>{{'contracts.header_1' | translate}}</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="contracted">
+      <ion-icon name="checkmark-circle"></ion-icon>
+      <ion-label>{{'contracts.header_2' | translate}}</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="finished">
+      <ion-icon name="archive"></ion-icon>
+      <ion-label>{{'contracts.header_3' | translate}}</ion-label>
+    </ion-tab-button>
+
+  </ion-tab-bar>
+</ion-tabs>
--- a/src/app/pages/contracts/contracts.page.scss
+++ b/src/app/pages/contracts/contracts.page.scss
--- a/src/app/pages/contracts/contracts.page.spec.ts
+++ b/src/app/pages/contracts/contracts.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContractsPage } from './contracts.page';
+
+describe('ContractsPage', () => {
+  let component: ContractsPage;
+  let fixture: ComponentFixture<ContractsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContractsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContractsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/contracts.page.ts
+++ b/src/app/pages/contracts/contracts.page.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { AlertService } from 'src/app/services/alert.service';
+
+@Component({
+  selector: 'app-contracts',
+  templateUrl: './contracts.page.html',
+  styleUrls: ['./contracts.page.scss'],
+})
+export class ContractsPage implements OnInit {
+
+  constructor(
+    private modalController: ModalController,
+    private menu: MenuController,
+    private navCtrl: NavController,
+    private events: Events,
+    private authService: AuthService,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private env: EnvService,
+  ) { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/pages/contracts/extra/extra.module.ts
+++ b/src/app/pages/contracts/extra/extra.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ExtraPage } from './extra.page';
+
+import { BrMaskerModule } from 'br-mask';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ExtraPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BrMaskerModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ExtraPage]
+})
+export class ExtraPageModule {}
--- a/src/app/pages/contracts/extra/extra.page.html
+++ b/src/app/pages/contracts/extra/extra.page.html
@@ -0,0 +1,31 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Añadir Fondos</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <p text-wrap>Está por añadir un fondo extra al servicio realizado por  <b>{{ supplier }}</b>.
+    Para continuar, seleccione la tarjeta con la que desee pagar el servicio e ingrese el código
+    de seguridad de la tarjeta.</p><br>
+          <ion-item [class.ng-invalid]="!amount_check">
+            <ion-label position="fixed">Monto</ion-label>
+            <ion-input ngModel type="tel" name="money" (ionChange)="check($event)" [brmasker]="{money: true, thousand: ',',  decimalCaracter: '.', decimal: '2'}" [class.ng-invalid]="!amount_check" placeholder="Minimo $150.00"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label>Tarjeta</ion-label>
+              <ion-select style="max-width:90%" interface="action-sheet" [(ngModel)]="cards_menu" (ionChange)="selected_card($event)">
+                <ion-select-option>Agregar tarjeta</ion-select-option>
+                <ion-select-option *ngFor="let card of cards" [value]="card.id">{{card.brand}} - {{card.card_number}}</ion-select-option>
+              </ion-select>
+            </ion-item>
+    <form #form="ngForm" id="card_form" (ngSubmit)="addExtra(form)" method="post">
+          <ion-item [class.ng-invalid]="!code_check">
+            <ion-label position="floating">CVV</ion-label>
+            <ion-input type="password" ngModel name="code" (ionChange)="code_checker($event)" [class.ng-invalid]="!code_check" size="3"></ion-input>
+          </ion-item><br><br>
+      <ion-button type="submit" expand="full" color="secondary">Añadir Extra</ion-button>
+    </form>
+</ion-content>
--- a/src/app/pages/contracts/extra/extra.page.scss
+++ b/src/app/pages/contracts/extra/extra.page.scss
--- a/src/app/pages/contracts/extra/extra.page.spec.ts
+++ b/src/app/pages/contracts/extra/extra.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExtraPage } from './extra.page';
+
+describe('ExtraPage', () => {
+  let component: ExtraPage;
+  let fixture: ComponentFixture<ExtraPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExtraPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExtraPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/extra/extra.page.ts
+++ b/src/app/pages/contracts/extra/extra.page.ts
@@ -0,0 +1,126 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, MenuController, NavController, Events, LoadingController } from '@ionic/angular';
+import { AddcardPage } from 'src/app/pages/card/addcard/addcard.page';
+import { ActivatedRoute } from '@angular/router';
+import { NgForm } from '@angular/forms';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { AlertService } from 'src/app/services/alert.service';
+
+declare var OpenPay: any;
+
+@Component({
+  selector: 'app-extra',
+  templateUrl: './extra.page.html',
+  styleUrls: ['./extra.page.scss'],
+})
+export class ExtraPage implements OnInit {
+
+  private loading;
+  amount: number = null;
+  amount_check = true;
+  code_check = true;
+  cards = [];
+  card_id = null;
+  supplier = null;
+  cards_menu = null;
+  contract_id: number = null;
+
+  constructor(
+    private modalController: ModalController,
+    private menu: MenuController,
+    private authService: AuthService,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private activatedRoute: ActivatedRoute,
+    private navCtrl: NavController,
+    private loadingCtrl: LoadingController,
+    private events: Events,
+    private env: EnvService,
+  ) {
+    this.events.subscribe('refreshcards', (data) => {
+      this.card_id = null;
+      this.getcards();
+    });
+    this.supplier = this.activatedRoute.snapshot.paramMap.get('supplier');
+    this.contract_id = Number(this.activatedRoute.snapshot.paramMap.get('contract_id'));
+   }
+
+  ngOnInit() {
+    OpenPay.setId(this.env.MERCHANT_ID);
+    OpenPay.setApiKey(this.env.PUBLIC_API_KEY);
+    OpenPay.setSandboxMode(false);
+    console.log(OpenPay.getSandboxMode());
+    var deviceDataId = OpenPay.deviceData.setup("card_form");
+    this.getcards();
+  }
+
+  newcard() {
+    this.navCtrl.navigateForward('/addcard');
+  }
+
+  getcards() {
+    this.ichambaService.getCard().subscribe(
+      data => {
+        this.cards = data;
+      }, error => {
+        this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
+      });
+  }
+
+  check (ev: any) {
+    this.amount = parseFloat(ev.target.value.replace(",", ""));
+    console.log(this.amount);
+    if (this.amount < 150) {
+      this.amount_check = false;
+    } else {
+      this.amount_check = true;
+    }
+  }
+
+  code_checker(ev: any) {
+    this.code_check = OpenPay.card.validateCVC(ev.target.value);
+    console.log(this.code_check);
+  }
+
+  selected_card(ev: any) {
+    this.card_id = ev.target.value;
+    console.log(this.card_id);
+    if (this.card_id == "Agregar tarjeta") {
+      console.log(this.card_id);
+      this.newcard();
+    }
+  }
+
+  addExtra(form: NgForm) {
+    if (this.card_id != "Agregar tarjeta") {
+      if (this.code_check) {
+            let code = form.value.code;
+            let device_id = (<HTMLInputElement>document.getElementById('deviceDataId')).value;
+            console.log(device_id);
+            this.loadingCtrl.create().then((overlay) => {
+              this.loading = overlay;
+              this.loading.present();
+            });
+            this.ichambaService.addExtra(this.contract_id, this.amount, this.card_id, code, device_id).subscribe(
+              data => {
+                this.loading.dismiss();
+                if (data['message'] = 'extra_added') {
+                  this.alertService.presentToast("Fondo extra añadido con éxito");
+                }
+                this.events.publish('refreshpcontracts', 'data');
+                this.navCtrl.navigateRoot('/contracts/contracted');
+              }, error => {
+                this.loading.dismiss();
+                this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
+              });
+            //console.log(onSuccess.data.id);
+            //console.log(document.getElementById('deviceDataId').value);
+      }
+    } else {
+      this.alertService.presentToast("Por favor seleccione una tarjeta");
+    }
+  }
+
+}
--- a/src/app/pages/contracts/finished/finished.module.ts
+++ b/src/app/pages/contracts/finished/finished.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FinishedPage } from './finished.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FinishedPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [FinishedPage]
+})
+export class FinishedPageModule {}
--- a/src/app/pages/contracts/finished/finished.page.html
+++ b/src/app/pages/contracts/finished/finished.page.html
@@ -0,0 +1,38 @@
+<ion-header>
+<ion-toolbar color="primary">
+  <ion-buttons slot="start">
+    <ion-menu-button></ion-menu-button>
+  </ion-buttons>
+  <ion-title>{{'contract.header' | translate}}</ion-title>
+</ion-toolbar>
+</ion-header>
+<ion-content padding>
+<h2 text-capitalize style="padding-bottom: 0.5em">{{'contracts.header_3' | translate}}</h2>
+<ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
+  <ion-refresher-content></ion-refresher-content>
+</ion-refresher>
+  <ng-container *ngFor="let fcontract of fcontracts; let i = index">
+    <ion-card>
+      <ion-item style="--border-color: #fff">
+        <ion-label>
+          <h2 text-capitalize *ngIf="lang===true">{{ fcontract.category }}</h2>
+          <h2 text-capitalize *ngIf="lang===false">{{ fcontract.en_category }}</h2>
+          <h2 text-capitalize *ngIf="fcontract.parent">{{'contracts.parent' | translate}}</h2>
+          <p text-wrap>{{ fcontract.address }}</p>
+          <p text-wrap text-capitalize>{{ fcontracts_dates[i] }}</p>
+          <p text-wrap text-capitalize>{{'contracts.supplier' | translate}}: {{ fcontract.supplier }}</p>
+          <p text-wrap text-capitalize>{{'contracts.amount' | translate}}: ${{ fcontract.amount }}</p>
+          <p>{{'contracts.status' | translate}}: {{ fcontract.status }}</p>
+        </ion-label>
+        </ion-item>
+        <ion-row *ngIf="!fcontract.parent && fcontract.date_difference < 7 && fcontract.status !== 'cancelado'">
+          <ion-col size="4">
+            <ion-button *ngIf="!fcontract.scored && fcontract.status !== 'reportado'" expand="full" class="ion-text-wrap" color="secondary" (click)="reviewContract(fcontract.id)">{{'contracts.rate' | translate}}</ion-button>
+          </ion-col>
+          <ion-col size="4">
+            <ion-button *ngIf="!fcontract.scored && fcontract.status !== 'reportado'" expand="full" class="ion-text-wrap" color="danger" (click)="reportContract(fcontract.id)">{{'contracts.report' | translate}}</ion-button>
+          </ion-col>
+        </ion-row>
+    </ion-card>
+  </ng-container>
+</ion-content>
--- a/src/app/pages/contracts/finished/finished.page.scss
+++ b/src/app/pages/contracts/finished/finished.page.scss
--- a/src/app/pages/contracts/finished/finished.page.spec.ts
+++ b/src/app/pages/contracts/finished/finished.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FinishedPage } from './finished.page';
+
+describe('FinishedPage', () => {
+  let component: FinishedPage;
+  let fixture: ComponentFixture<FinishedPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FinishedPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FinishedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/finished/finished.page.ts
+++ b/src/app/pages/contracts/finished/finished.page.ts
@@ -0,0 +1,99 @@
+import { Component, OnInit } from '@angular/core';
+import { ReviewPage } from '../review/review.page';
+import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { ActivatedRoute, Router } from '@angular/router';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from 'src/app/services/language.service';
+import { AlertService } from 'src/app/services/alert.service';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-finished',
+  templateUrl: './finished.page.html',
+  styleUrls: ['./finished.page.scss'],
+})
+export class FinishedPage implements OnInit {
+
+  fcontracts = [];
+  fcontracts_dates = [];
+  lang: boolean;
+
+  constructor(
+    private modalController: ModalController,
+    private menu: MenuController,
+    private navCtrl: NavController,
+    private events: Events,
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private alertController: AlertController,
+    private authService: AuthService,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private translateService: TranslateService,
+    private languageService: LanguageService,
+    private env: EnvService,
+  ) {
+    this.events.subscribe('refreshccontracts', (data) => {
+      this.getfcontracts();
+    });
+  }
+
+  ngOnInit() {
+    this.getfcontracts();
+    if (this.languageService.getDefaultLanguage() == 'es') {
+      this.lang = true;
+    } else {
+      this.lang = false
+    }
+  }
+
+  refresh(event) {
+    this.ichambaService.getFinishedcontracts().subscribe(
+      data => {
+        this.fcontracts = data;
+        for (var i of this.fcontracts) {
+          if (this.languageService.getDefaultLanguage() == 'es') {
+            this.fcontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('es-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          } else {
+            this.fcontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          }
+        }
+        event.target.complete();
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+        event.target.complete();
+      });
+  }
+
+  getfcontracts() {
+    this.ichambaService.getFinishedcontracts().subscribe(
+      data => {
+        this.fcontracts = data;
+        for (var i of this.fcontracts) {
+          if (this.languageService.getDefaultLanguage() == 'es') {
+            this.fcontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('es-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          } else {
+            this.fcontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          }
+        }
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+      });
+  }
+
+  reviewContract(contract_id: String) {
+    this.navCtrl.navigateForward(['/review/', contract_id]);
+  }
+
+  addExtra(contract_id: String, supplier: String) {
+    this.navCtrl.navigateForward(['/extra/', { contract_id: contract_id, supplier: supplier }]);
+  }
+
+  reportContract(contract_id: String) {
+    this.router.navigate(['/report/', contract_id]);
+  }
+
+}
--- a/src/app/pages/contracts/hire/hire.module.ts
+++ b/src/app/pages/contracts/hire/hire.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { HirePage } from './hire.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HirePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [HirePage],
+})
+export class HirePageModule {}
--- a/src/app/pages/contracts/hire/hire.page.html
+++ b/src/app/pages/contracts/hire/hire.page.html
@@ -0,0 +1,109 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{'contracts.hire' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <p text-wrap>{{'contracts.hire_info_1' | translate}} <b>{{ supplier }}</b> {{'contracts.hire_info_2' | translate}}<br>
+    {{'contracts.hire_pay' | translate}}</p><br>
+    <ion-row>
+      <ion-col size="9">
+        <p text-left style="margin:0">{{'contracts.fee_amount' | translate}}:</p>
+      </ion-col>
+      <ion-col size="3">
+        <p text-right style="margin:0">${{ fee | number: '1.2-2'}}</p>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="9">
+        <p text-left style="margin:0">{{'contracts.discount_amount' | translate}}:</p>
+      </ion-col>
+      <ion-col size="3">
+        <p text-right style="margin:0">${{ discount | number: '1.2-2'}}</p>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="9">
+        <p text-left style="margin:0"><b>{{'contracts.final_amount' | translate}}:</b></p>
+      </ion-col>
+      <ion-col size="3">
+        <p text-right style="margin:0"><b>${{ final_amount | number: '1.2-2'}}</b></p>
+      </ion-col>
+    </ion-row>
+    <br>
+    <ion-list>
+      <ion-item>
+          <ion-label position="fixed" >{{'contracts.coupon' | translate}}:</ion-label>
+          <ion-input [(ngModel)]="coupon" (ngModelChange)="coupon = $event.toLocaleUpperCase()"></ion-input>
+          <ion-button style="height: 3em" item-end (click)="checkCoupon()" expand="full" color="primary">{{'contracts.validate' | translate}}</ion-button>
+      </ion-item>
+    </ion-list>
+        <ion-item>
+          <ion-label>{{'cards.card' | translate}}</ion-label>
+            <ion-select style="max-width:90%" interface="action-sheet" [(ngModel)]="cards_menu" (ionChange)="selected_card($event)">
+              <ion-select-option>Agregar tarjeta</ion-select-option>
+              <ion-select-option *ngFor="let card of cards" [value]="card.id">{{card.brand}} - {{card.card_number}}</ion-select-option>
+            </ion-select>
+          </ion-item>
+    <form #form="ngForm" id="card_form" (ngSubmit)="createContract(form)" method="post">
+      <ion-item [class.ng-invalid]="!code_check">
+        <ion-label position="floating">CVV</ion-label>
+        <ion-input type="password" ngModel name="code" (ionChange)="code_checker($event)" [class.ng-invalid]="!code_check" size="3" maxlength="4"></ion-input>
+      </ion-item><br><br>
+      <ion-button type="submit" expand="full" color="secondary">{{'contracts.hire_confirm' | translate}}</ion-button>
+    </form>
+  <br>
+    <ion-row class="ion-align-items-center">
+      <ion-col size="4">
+        <img src="/assets/openpay/openpay_color.png" style="padding:0.25em 0.5em"/>
+      </ion-col>
+      <ion-col size=8>
+        <p>{{'cards.openpay_1' | translate}}</p>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="6">
+        <p text-center>{{'cards.openpay_2' | translate}}<p>
+      </ion-col>
+      <ion-col size="6" style="border-left: 1px solid #d0d0d0">
+        <p text-center>{{'cards.openpay_3' | translate}}<p>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="3">
+        <img src="/assets/openpay/visa.png" style="padding:0.1em 1.0em"/>
+      </ion-col>
+      <ion-col size="3">
+        <img src="/assets/openpay/masterCard.png" style="padding:0.25em 1.5em;"/>
+      </ion-col>
+      <ion-col size="2" style="border-left: 1px solid #d0d0d0">
+        <img src="/assets/openpay/citibanamex.png"/>
+      </ion-col>
+      <ion-col size=2>
+        <img src="/assets/openpay/bancoAzteca.png"/>
+      </ion-col>
+      <ion-col size=2>
+        <img src="/assets/openpay/scotiabank.png"/>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="3">
+        <img src="/assets/openpay/americanExpress.png" style="padding:0.5em 1.5em"/>
+      </ion-col>
+      <ion-col size="3">
+        <img src="/assets/openpay/carnet.png"/>
+      </ion-col>
+      <ion-col size="2" style="border-left: 1px solid #d0d0d0">
+        <img src="/assets/openpay/inbursa.png"/>
+      </ion-col>
+      <ion-col size=2>
+        <img src="/assets/openpay/santander.png"/>
+      </ion-col>
+      <ion-col size=2>
+        <img src="/assets/openpay/bbva.png"/>
+      </ion-col>
+    </ion-row>
+</ion-content>
--- a/src/app/pages/contracts/hire/hire.page.scss
+++ b/src/app/pages/contracts/hire/hire.page.scss
@@ -0,0 +1 @@
+
--- a/src/app/pages/contracts/hire/hire.page.spec.ts
+++ b/src/app/pages/contracts/hire/hire.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HirePage } from './hire.page';
+
+describe('HirePage', () => {
+  let component: HirePage;
+  let fixture: ComponentFixture<HirePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HirePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HirePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/hire/hire.page.ts
+++ b/src/app/pages/contracts/hire/hire.page.ts
@@ -0,0 +1,182 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, MenuController, NavController, Events, LoadingController } from '@ionic/angular';
+import { AddcardPage } from 'src/app/pages/card/addcard/addcard.page';
+import { ActivatedRoute } from '@angular/router';
+import { NgForm } from '@angular/forms';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { TranslateService } from '@ngx-translate/core';
+import { AlertService } from 'src/app/services/alert.service';
+
+declare var OpenPay: any;
+
+@Component({
+  selector: 'app-hire',
+  templateUrl: './hire.page.html',
+  styleUrls: ['./hire.page.scss'],
+})
+export class HirePage implements OnInit {
+
+  private loading;
+  code_check = true;
+  cards = [];
+  code= null;
+  device_id = null;
+  card_id = null;
+  supplier = null;
+  supplier_id = null;
+  postulation_id = null;
+  fee = null;
+  discount = 0;
+  final_amount = null;
+  coupon = null;
+  cards_menu = null;
+
+  constructor(
+    private modalController: ModalController,
+    private menu: MenuController,
+    private authService: AuthService,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private translateService: TranslateService,
+    private activatedRoute: ActivatedRoute,
+    private navCtrl: NavController,
+    private loadingCtrl: LoadingController,
+    private events: Events,
+    private env: EnvService,
+  ) {
+    this.events.subscribe('refreshcards', (data) => {
+      this.card_id = null;
+      this.getcards();
+    });
+    this.supplier = this.activatedRoute.snapshot.paramMap.get('supplier');
+    this.supplier_id = this.activatedRoute.snapshot.paramMap.get('supplier_id');
+    this.postulation_id = this.activatedRoute.snapshot.paramMap.get('postulation_id');
+    this.fee = this.activatedRoute.snapshot.paramMap.get('fee');
+    this.final_amount = this.fee;
+   }
+
+  ngOnInit() {
+    OpenPay.setId(this.env.MERCHANT_ID);
+    OpenPay.setApiKey(this.env.PUBLIC_API_KEY);
+    console.log(OpenPay.getSandboxMode());
+    var deviceDataId = OpenPay.deviceData.setup("card_form");
+    this.getcards();
+  }
+
+  newcard() {
+    this.navCtrl.navigateForward('/addcard');
+  }
+
+  getcards() {
+    this.ichambaService.getCard().subscribe(
+      data => {
+        this.cards = data;
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+      });
+  }
+
+  code_checker(ev: any) {
+    if (ev.target.value.length > 4){
+      console.log(ev.target.value.length);
+      ev.target.value = ev.target.value.slice(0, 4);
+    }
+    this.code_check = OpenPay.card.validateCVC(ev.target.value);
+    console.log(this.code_check);
+  }
+
+  selected_card(ev: any) {
+    this.card_id = ev.target.value;
+    console.log(this.card_id);
+    if (this.card_id == "Agregar tarjeta") {
+      console.log(this.card_id);
+      ev.target.value = null;
+      this.newcard();
+    }
+  }
+
+  checkCoupon() {
+    if (this.coupon) {
+      this.loadingCtrl.create().then((overlay) => {
+        this.loading = overlay;
+        this.loading.present();
+      });
+      this.ichambaService.checkCoupon(this.postulation_id, this.supplier_id, this.coupon).subscribe(
+        data => {
+          if (data) {
+            if (data['name'] == "used") {
+              this.loading.dismiss();
+              this.alertService.presentToast(this.translateService.instant('alerts.coupon_used'));
+            } else if (data['name'] == "expired") {
+              this.loading.dismiss();
+              this.alertService.presentToast(this.translateService.instant('alerts.coupon_expired'));
+            } else if (data['name'] == this.coupon) {
+              this.loading.dismiss();
+              this.discount = (data['amount'] + (this.fee * (data['percentage']/100)));
+              console.log(this.discount);
+              if (this.discount > this.fee){
+                this.discount = this.fee
+              }
+              this.final_amount = (this.fee - this.discount);
+              console.log(this.final_amount);
+              this.alertService.presentToast(this.translateService.instant('alerts.coupon_valid'));
+            } else if (data['name'] == "success") {
+              this.loading.dismiss();
+              this.events.publish('refreshpcontracts', 'data');
+              this.navCtrl.navigateRoot('/contracts/contracted');
+              this.alertService.presentToast(this.translateService.instant('alerts.hire'));
+            }
+          } else {
+            this.loading.dismiss();
+            this.alertService.presentToast(this.translateService.instant('alerts.nocoupon'));
+          }
+        }, error => {
+          this.loading.dismiss();
+          this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+        });
+    }
+  }
+
+  createContract(form: NgForm) {
+    if (this.card_id != "Agregar tarjeta") {
+      if (this.code_check) {
+            let code = form.value.code;
+            let device_id = (<HTMLInputElement>document.getElementById('deviceDataId')).value;
+            console.log(device_id);
+
+            this.loadingCtrl.create().then((overlay) => {
+              this.loading = overlay;
+              this.loading.present();
+            });
+            this.ichambaService.createContract(this.postulation_id, this.supplier_id, this.card_id, this.coupon, code, device_id).subscribe(
+              data => {
+                if (data['type'] == "error") {
+                  this.loading.dismiss();
+                  this.alertService.presentToast(data['message']);
+                } else if (data['name'] == "used") {
+                  this.loading.dismiss();
+                  this.alertService.presentToast(this.translateService.instant('contracts.coupon_used'));
+                } else if (data['name'] == "expired") {
+                  this.loading.dismiss();
+                  this.alertService.presentToast(this.translateService.instant('contracts.coupon_expired'));
+                } else {
+                  this.loading.dismiss();
+                  this.events.publish('refreshpcontracts', 'data');
+                  this.navCtrl.navigateRoot('/contracts/contracted');
+                  this.alertService.presentToast(this.translateService.instant('alerts.hire'));
+                }
+              }, error => {
+                this.loading.dismiss();
+                this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+              });
+            //console.log(onSuccess.data.id);
+            //console.log(document.getElementById('deviceDataId').value);
+      }
+    } else {
+      this.alertService.presentToast(this.translateService.instant('alerts.select_card'));
+    }
+  }
+
+}
--- a/src/app/pages/contracts/nohome/nohome.module.ts
+++ b/src/app/pages/contracts/nohome/nohome.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { NohomePage } from './nohome.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NohomePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [NohomePage]
+})
+export class NohomePageModule {}
--- a/src/app/pages/contracts/nohome/nohome.page.html
+++ b/src/app/pages/contracts/nohome/nohome.page.html
@@ -0,0 +1,25 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{'contracts.no_home' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-item>
+    <ion-label position="fixed">{{'contracts.description' | translate}}</ion-label>
+    <ion-textarea style="height:1.5em" [(ngModel)]="description" placeholder="{{'contracts.description_placeholder' | translate}}"></ion-textarea>
+  </ion-item>
+  <ion-item hidden>
+    <ion-label position="fixed">Latitud</ion-label>
+    <ion-input value="{{ myPosition.latitude }}" disabled></ion-input>
+  </ion-item>
+  <ion-item hidden>
+    <ion-label position="fixed">Longitud</ion-label>
+    <ion-input value="{{ myPosition.longitude }}" disabled></ion-input>
+  </ion-item>
+  <br><br>
+  <ion-button (click)="send()" type="submit" expand="full" color="primary">{{'contracts.send' | translate}}</ion-button>
+</ion-content>
--- a/src/app/pages/contracts/nohome/nohome.page.scss
+++ b/src/app/pages/contracts/nohome/nohome.page.scss
--- a/src/app/pages/contracts/nohome/nohome.page.spec.ts
+++ b/src/app/pages/contracts/nohome/nohome.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NohomePage } from './nohome.page';
+
+describe('NohomePage', () => {
+  let component: NohomePage;
+  let fixture: ComponentFixture<NohomePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NohomePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NohomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/nohome/nohome.page.ts
+++ b/src/app/pages/contracts/nohome/nohome.page.ts
@@ -0,0 +1,124 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController, LoadingController } from '@ionic/angular';
+import { ActivatedRoute } from '@angular/router';
+import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { Camera, CameraOptions, PictureSourceType } from '@ionic-native/Camera/ngx';
+import { File, FileEntry } from '@ionic-native/File/ngx';
+import { WebView } from '@ionic-native/ionic-webview/ngx';
+import { FilePath } from '@ionic-native/file-path/ngx';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { AlertService } from 'src/app/services/alert.service';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-nohome',
+  templateUrl: './nohome.page.html',
+  styleUrls: ['./nohome.page.scss'],
+})
+export class NohomePage implements OnInit {
+
+  private loading;
+
+  storedPhoto;
+  resolvedImage = null;
+  safeImage = null;
+  contract_id = null;
+  description: string;
+  myPosition: any = {};
+
+  constructor(
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private navCtrl: NavController,
+    private loadingCtrl: LoadingController,
+    private activatedRoute: ActivatedRoute,
+    private locaccuracy: LocationAccuracy,
+    private geolocation: Geolocation,
+    private camera: Camera,
+    private file: File,
+    private webview: WebView,
+    private filePath: FilePath,
+    private sanitizer: DomSanitizer
+  ) { }
+
+  ngOnInit() {
+    this.contract_id = this.activatedRoute.snapshot.paramMap.get('contract_id');
+    this.getCurrentLocation();
+  }
+
+  getCurrentLocation() {
+        this.locaccuracy.request(this.locaccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(() => {
+          this.geolocation.getCurrentPosition({ maximumAge: 20000, timeout: 30000, enableHighAccuracy: true }).then((resp) => {
+            console.log(resp);
+            this.myPosition = {
+              latitude: resp.coords.latitude,
+              longitude: resp.coords.longitude
+            }
+          }).catch((error) => {
+            console.log('Error al obtener localización: ' + error);
+          });
+        }, (error) => {
+          console.log(error);
+        });
+  }
+
+  openCamera(){
+    const options: CameraOptions = {
+    quality: 100,
+    destinationType: this.camera.DestinationType.FILE_URI,
+    encodingType: this.camera.EncodingType.JPEG,
+   }
+
+    this.camera.getPicture(options).then((tempImage) => {
+      const tempFilename = tempImage.substr(tempImage.lastIndexOf('/') + 1);
+      const tempBaseFilesystemPath = tempImage.substr(0, tempImage.lastIndexOf('/') + 1);
+      const newBaseFilesystemPath = this.file.dataDirectory;
+
+      this.file.copyFile(tempBaseFilesystemPath, tempFilename, newBaseFilesystemPath, tempFilename);
+
+      this.storedPhoto = newBaseFilesystemPath + tempFilename;
+      //this.resolvedImage = (this.webview.convertFileSrc(this.storedPhoto)).replace('http://localhost/_app_file_', '');
+      this.resolvedImage = this.webview.convertFileSrc(this.storedPhoto);
+      this.safeImage = this.sanitizer.bypassSecurityTrustUrl(this.resolvedImage);
+      this.alertService.presentToast(this.resolvedImage);
+    }, (err) => {
+       // Handle error
+       this.alertService.presentToast("error: " + err)
+    });
+  }
+
+  send() {
+    this.ichambaService.noHomeConfirm(this.contract_id, this.myPosition.latitude, this.myPosition.longitude, this.description).subscribe(
+      data => {
+        this.alertService.presentToast(data['message']);
+        this.navCtrl.navigateRoot('/dashboard');
+      }, error => {
+        this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
+      });
+  }
+
+  startUpload() {
+    this.file.resolveLocalFilesystemUrl(this.storedPhoto)
+        .then(entry => {
+            ( < FileEntry > entry).file(file => this.readFile(file))
+        })
+        .catch(err => {
+            this.alertService.presentToast("error: " + err)
+        });
+  }
+
+  readFile(file: any) {
+      const reader = new FileReader();
+      reader.onload = () => {
+          const formData = new FormData();
+          const imgBlob = new Blob([reader.result], {
+              type: file.type
+          });
+          formData.append('file', imgBlob, file.name);
+          //this.uploadImageData(formData);
+      };
+      reader.readAsArrayBuffer(file);
+      this.alertService.presentToast("Todo bien hasta ahora");
+  }
+}
--- a/src/app/pages/contracts/pending/pending.module.ts
+++ b/src/app/pages/contracts/pending/pending.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PendingPage } from './pending.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PendingPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [PendingPage]
+})
+export class PendingPageModule {}
--- a/src/app/pages/contracts/pending/pending.page.html
+++ b/src/app/pages/contracts/pending/pending.page.html
@@ -0,0 +1,25 @@
+<ion-header>
+<ion-toolbar color="primary">
+  <ion-buttons slot="start">
+    <ion-menu-button></ion-menu-button>
+  </ion-buttons>
+  <ion-title>{{'contracts.header' | translate}}</ion-title>
+</ion-toolbar>
+</ion-header>
+<ion-content padding>
+<h2 text-capitalize style="padding-bottom: 0.5em">{{'contracts.header_1' | translate}}</h2>
+<ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
+  <ion-refresher-content></ion-refresher-content>
+</ion-refresher>
+  <ion-card *ngFor="let pcontract of pcontracts; let i = index">
+    <ion-item>
+      <ion-label>
+        <h2 *ngIf="lang===true" text-capitalize>{{ pcontract.category }}</h2>
+        <h2 *ngIf="lang===false" text-capitalize>{{ pcontract.en_category }}</h2>
+        <p text-wrap>{{pcontract.address}}</p>
+        <p text-wrap text-capitalize>{{pcontracts_dates[i]}}</p>
+      </ion-label>
+      <ion-button style="height: 3em; padding-left: 0.5em;" color="secondary" (click)="viewsuppliers(pcontract.id)">{{'contracts.viewsuppliers_1.1' | translate}}<br>{{'contracts.viewsuppliers_1.2' | translate}}</ion-button>
+    </ion-item>
+  </ion-card>
+</ion-content>
--- a/src/app/pages/contracts/pending/pending.page.scss
+++ b/src/app/pages/contracts/pending/pending.page.scss
--- a/src/app/pages/contracts/pending/pending.page.spec.ts
+++ b/src/app/pages/contracts/pending/pending.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PendingPage } from './pending.page';
+
+describe('PendingPage', () => {
+  let component: PendingPage;
+  let fixture: ComponentFixture<PendingPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PendingPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PendingPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/pending/pending.page.ts
+++ b/src/app/pages/contracts/pending/pending.page.ts
@@ -0,0 +1,85 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from 'src/app/services/language.service';
+import { AlertService } from 'src/app/services/alert.service';
+
+@Component({
+  selector: 'app-pending',
+  templateUrl: './pending.page.html',
+  styleUrls: ['./pending.page.scss'],
+})
+export class PendingPage implements OnInit {
+
+  pcontracts = [];
+  pcontracts_dates = [];
+  lang: boolean;
+
+  constructor(
+    private modalController: ModalController,
+    private menu: MenuController,
+    private navCtrl: NavController,
+    private events: Events,
+    private authService: AuthService,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private translateService: TranslateService,
+    private languageService: LanguageService,
+    private env: EnvService,
+  ) {
+    this.events.subscribe('refreshpcontracts', (data) => {
+      this.getpcontracts();
+    });
+  }
+
+  ngOnInit() {
+    this.getpcontracts();
+    if (this.languageService.getDefaultLanguage() == 'es') {
+      this.lang = true;
+    } else {
+      this.lang = false
+    }
+  }
+
+  refresh (event) {
+    this.ichambaService.getPendingcontracts().subscribe(
+      data => {
+        this.pcontracts = data;
+        for (var i of this.pcontracts) {
+          if (this.languageService.getDefaultLanguage() == 'es') {
+            this.pcontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('es-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          } else {
+            this.pcontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          }
+        }
+        event.target.complete();
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+        event.target.complete();
+      });
+  }
+
+  getpcontracts() {
+    this.ichambaService.getPendingcontracts().subscribe(
+      data => {
+        this.pcontracts = data;
+        for (var i of this.pcontracts) {
+          if (this.languageService.getDefaultLanguage() == 'es') {
+            this.pcontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('es-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          } else {
+            this.pcontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+          }
+        }
+      }, error => {
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+      });
+  }
+
+  viewsuppliers(postulation_id: String) {
+    this.navCtrl.navigateForward(['/viewsuppliers/', postulation_id]);
+  }
+
+}
--- a/src/app/pages/contracts/redated/redated.module.ts
+++ b/src/app/pages/contracts/redated/redated.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { RedatedPage } from './redated.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RedatedPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [RedatedPage]
+})
+export class RedatedPageModule {}
--- a/src/app/pages/contracts/redated/redated.page.html
+++ b/src/app/pages/contracts/redated/redated.page.html
@@ -0,0 +1,27 @@
+<ion-header>
+<ion-toolbar color="primary">
+  <ion-buttons slot="start">
+    <ion-menu-button></ion-menu-button>
+  </ion-buttons>
+  <ion-title>Contratos</ion-title>
+</ion-toolbar>
+</ion-header>
+<ion-content padding>
+<h2 text-capitalize style="padding-bottom: 0.5em">Reagendados</h2>
+  <ng-container *ngFor="let ccontract of ccontracts; let i = index">
+    <ion-card *ngIf="ccontract.status==2">
+      <ion-item>
+        <ion-label>
+          <h2 text-capitalize>{{ ccontract.category }}</h2>
+          <p text-wrap>{{ ccontract.address }}</p>
+          <p text-wrap text-capitalize>{{ ccontracts_dates[i] }}</p>
+          <p text-wrap text-capitalize>Proveedor: {{ ccontract.supplier }}</p>
+          <p>Monto: ${{ ccontract.amount }}</p>
+          <p *ngIf="ccontract.time_limit < 10" text-wrap>Código de inicio de servicio: ${{ ccontract.code }} (Por favor, dar este código
+            al proveedor para iniciar el servicio)</p>
+        </ion-label>
+        <ion-button style="height: 3em; padding-left: 0.5em;" color="danger">Cancelar<br>contrato</ion-button>
+      </ion-item>
+    </ion-card>
+  </ng-container>
+</ion-content>
--- a/src/app/pages/contracts/redated/redated.page.scss
+++ b/src/app/pages/contracts/redated/redated.page.scss
--- a/src/app/pages/contracts/redated/redated.page.spec.ts
+++ b/src/app/pages/contracts/redated/redated.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RedatedPage } from './redated.page';
+
+describe('RedatedPage', () => {
+  let component: RedatedPage;
+  let fixture: ComponentFixture<RedatedPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RedatedPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RedatedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/redated/redated.page.ts
+++ b/src/app/pages/contracts/redated/redated.page.ts
@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { AlertService } from 'src/app/services/alert.service';
+
+@Component({
+  selector: 'app-redated',
+  templateUrl: './redated.page.html',
+  styleUrls: ['./redated.page.scss'],
+})
+export class RedatedPage implements OnInit {
+
+  ccontracts = [];
+  ccontracts_dates = [];
+
+  constructor(
+    private modalController: ModalController,
+    private menu: MenuController,
+    private navCtrl: NavController,
+    private events: Events,
+    private authService: AuthService,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private env: EnvService,
+  ) {
+    this.events.subscribe('refreshccontracts', (data) => {
+      this.getccontracts();
+    });
+  }
+
+  ngOnInit() {
+    this.getccontracts();
+  }
+
+  getccontracts() {
+    this.ichambaService.getCurrentcontracts().subscribe(
+      data => {
+        this.ccontracts = data;
+        for (var i of this.ccontracts) {
+          this.ccontracts_dates.push(new Date((new Date(i.date).toLocaleString('en-US') + ' UTC').replace("," ,"")).toLocaleDateString('es-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute:'numeric', timeZoneName: 'long'}));
+        }
+      }, error => {
+        this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
+      });
+  }
+
+}
--- a/src/app/pages/contracts/report/report.module.ts
+++ b/src/app/pages/contracts/report/report.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ReportPage } from './report.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ReportPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [ReportPage]
+})
+export class ReportPageModule {}
--- a/src/app/pages/contracts/report/report.page.html
+++ b/src/app/pages/contracts/report/report.page.html
@@ -0,0 +1,16 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{'contracts.report_header' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+    <h2 text-center>{{'contracts.report_description' | translate}}</h2>
+    <ion-item>
+      <ion-textarea [(ngModel)]="comment">{{'contracts.report_commentaries' | translate}}</ion-textarea>
+    </ion-item>
+  <br>
+  <ion-button type="submit" expand="full" color="danger" (click)="reportservice()">{{'contracts.report_send' | translate}}</ion-button>
+</ion-content>
--- a/src/app/pages/contracts/report/report.page.scss
+++ b/src/app/pages/contracts/report/report.page.scss
--- a/src/app/pages/contracts/report/report.page.spec.ts
+++ b/src/app/pages/contracts/report/report.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportPage } from './report.page';
+
+describe('ReportPage', () => {
+  let component: ReportPage;
+  let fixture: ComponentFixture<ReportPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReportPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pages/contracts/report/report.page.ts
+++ b/src/app/pages/contracts/report/report.page.ts
@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController, LoadingController } from '@ionic/angular';
+import { ActivatedRoute } from '@angular/router';
+import { EnvService } from 'src/app/services/env.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { IchambaService } from 'src/app/services/ichamba.service';
+import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from 'src/app/services/language.service';
+import { AlertService } from 'src/app/services/alert.service';
+
+@Component({
+  selector: 'app-report',
+  templateUrl: './report.page.html',
+  styleUrls: ['./report.page.scss'],
+})
+export class ReportPage implements OnInit {
+
+  private loading;
+  contract_id: number = null;
+  comment: any;
+
+  constructor(
+    private authService: AuthService,
+    private navCtrl: NavController,
+    private alertService: AlertService,
+    private ichambaService: IchambaService,
+    private translateService: TranslateService,
+    private languageService: LanguageService,
+    private activatedRoute: ActivatedRoute,
+    private loadingCtrl: LoadingController,
+  ) { }
+
+  ngOnInit() {
+      this.contract_id = Number(this.activatedRoute.snapshot.paramMap.get('contract_id'));
+  }
+
+  reportservice() {
+      if (this.comment) {
+        this.loadingCtrl.create().then((overlay) => {
+          this.loading = overlay;
+          this.loading.present();
+        });
+        this.ichambaService.reportContract(this.contract_id, this.comment).subscribe(
+          data => {
+            this.loading.dismiss();
+            this.alertService.presentToast(this.translateService.instant('alerts.report_send'));
+            this.navCtrl.navigateRoot('/dashboard');
+          }, error => {
+            this.loading.dismiss();
+            this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
+          });
+      } else {
+        this.alertService.presentToast(this.translateService.instant('alerts.report_nocomment'));
+      }
+  }
+
+}
--- a/src/app/pages/contracts/review/review.module.ts
+++ b/src/app/pages/contracts/review/review.module.ts
@@ -0,0 +1,31 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+import { IonicRatingModule } from "ionic4-rating";
+
+import { IonicModule } from '@ionic/angular';
+
+import { ReviewPage } from './review.page';
+import { TranslateModule } from '@ngx-translate/core'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ReviewPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    IonicRatingModule,
+    RouterModule.forChild(routes),
+    TranslateModule
+  ],
+  declarations: [ReviewPage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ReviewPageModule {}
--- a/src/app/pages/contracts/review/review.page.html
+++ b/src/app/pages/contracts/review/review.page.html
@@ -0,0 +1,24 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{'contracts.review_header' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+    <h2 text-center>{{'contracts.review_description' | translate}}</h2>
+    <div class="rate_div">
+    <rating [(ngModel)]="rate"
+        readonly="false"
+        size="large"
+        (ngModelChange)="onRateChange($event)">
+    </rating>
+    </div>
+    <h6>{{'contracts.review_commentaries' | translate}}</h6>
+    <ion-item>
+      <ion-textarea [(ngModel)]="comment"></ion-textarea>
+    </ion-item>
+  <br>
+  <ion-button type="submit" expand="full" color="primary" (click)="reviewservice()">{{'contracts.review_send' | translate}}</ion-button>
+</ion-content>
--- a/src/app/pages/contracts/review/review.page.scss
+++ b/src/app/pages/contracts/review/review.page.scss
--- a/Show More
+++ b/Show More