aeropuerto-front-v1

.prettierignore

+# Ignore all HTML files:
+*.ts
+*.html
\ No newline at end of file

.prettierrc.json

+{
+    "semi": false,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+            "tabWidth": 4
+        }
+      },
+      {
+        "files": "*.ts",
+        "options": {
+          "tabWidth": 2
+        }
+      }
+    ]
+  }
\ No newline at end of file

angular.json

@@ -25,9 +25,41 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css",
+              "src/css/bootstrap.min.css",
+              "src/css/plugins/toastr/toastr.min.css",
+              "src/css/animate.css",
+              "src/css/style.css",
+              "src/js/plugins/gritter/jquery.gritter.css",
+              "src/font-awesome/css/font-awesome.css",
+              "src/css/plugins/iCheck/custom.css",
+              "src/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
             ],
-            "scripts": []
+            "scripts": [
+              "src/scripts/javaScript.js",
+              "src/js/jquery-3.1.1.min.js",
+              "src/js/popper.min.js",
+              "src/js/bootstrap.js",
+              "src/js/plugins/metisMenu/jquery.metisMenu.js",
+              "src/js/plugins/slimscroll/jquery.slimscroll.min.js",
+              "src/js/plugins/flot/jquery.flot.js",
+              "src/js/plugins/flot/jquery.flot.tooltip.min.js",
+              "src/js/plugins/flot/jquery.flot.spline.js",
+              "src/js/plugins/flot/jquery.flot.resize.js",
+              "src/js/plugins/flot/jquery.flot.pie.js",
+              "src/js/plugins/peity/jquery.peity.min.js",
+              "src/js/demo/peity-demo.js",
+              "src/js/inspinia.js",
+              "src/js/plugins/pace/pace.min.js",
+              "src/js/plugins/jquery-ui/jquery-ui.min.js",
+              "src/js/plugins/gritter/jquery.gritter.min.js",
+              "src/js/plugins/sparkline/jquery.sparkline.min.js",
+              "src/js/demo/sparkline-demo.js",
+              "src/js/plugins/chartJs/Chart.min.js",
+              "src/js/plugins/toastr/toastr.min.js",
+              "src/js/plugins/iCheck/icheck.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -87,6 +119,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -11,14 +11,19 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.0.0",
+    "@angular/cdk": "^15.1.0",
     "@angular/common": "^15.0.0",
     "@angular/compiler": "^15.0.0",
     "@angular/core": "^15.0.0",
     "@angular/forms": "^15.0.0",
+    "@angular/material": "^15.1.0",
+    "@angular/material-moment-adapter": "^15.1.1",
     "@angular/platform-browser": "^15.0.0",
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
+    "moment": "^2.29.4",
     "rxjs": "~7.5.0",
+    "sweetalert2": "^11.7.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
   },

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

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule, Router } from '@angular/router';
+import { ListarComponent } from './pages/listar/listar.component';
+import { AgregarComponent } from './pages/agregar/agregar.component';
+import { DetallesComponent } from './pages/detalles/detalles.component';
+import { HomeComponent } from '../home/home.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    children: [
+      { path: 'listado', component: ListarComponent },
+      { path: 'agregar', component: AgregarComponent },
+      { path: 'editar/:id', component: AgregarComponent },
+      { path: 'detalles/:id', component: DetallesComponent },
+      { path: '**', redirectTo: 'listado' }
+      //{ path: ':id', component: AgregarComponent }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AeropuertosRoutingModule { }

src/app/aeropuertos/aeropuertos.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ListarComponent } from './pages/listar/listar.component';
+import { AgregarComponent } from './pages/agregar/agregar.component';
+import { DetallesComponent } from './pages/detalles/detalles.component';
+import { AeropuertosRoutingModule } from './aeropuertos-routing.module';
+import { PaginatePipe } from '../shared/pipes/paginate.pipe';
+import { MaterialModule } from '../material/material.module';
+import { HeaderComponent } from './components/header/header.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    ListarComponent,
+    AgregarComponent,
+    DetallesComponent,
+    HeaderComponent,
+    // PaginatePipe
+  ],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    AeropuertosRoutingModule,
+    ReactiveFormsModule,
+    FormsModule
+  ]
+})
+export class AeropuertosModule { }

src/app/aeropuertos/components/header/header.component.html

+<div class="header header-component">
+    <div>
+        <div class="sub-header-component">
+            <i class="fa fa-plane fa-lg"></i>
+        </div>
+        <h3 style="display: inline">Gestor de Aeropuertos</h3>
+    </div>
+    <span>Registrar un nuevo aeropuerto</span>
+</div>

src/app/aeropuertos/components/header/header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'aeropuertos-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent {
+
+}

src/app/aeropuertos/interfaces/aeropuertos.interfaces.ts

+export interface Aeropuerto{
+  codigo: string,
+  nombre: string,
+  detalles: string,
+  localizacion: string
+}
\ No newline at end of file

src/app/aeropuertos/pages/agregar/agregar.component.html

+<div class="row">
+    <div class="col-12">
+        <aeropuertos-header></aeropuertos-header>
+        <div class="content" id="backgroundStyle" >
+            <form 
+              autocomplete="off"
+              [formGroup]="aeropuertoForm"
+              (ngSubmit)="guardar()"
+            >
+                <div class="row">
+                    <div class="col-6">
+                      <mat-form-field appearance="fill">
+                        <mat-label>Codigo</mat-label>
+                        <input matInput formControlName="codigo" required />
+                        <mat-error
+                            *ngIf="aeropuertoForm.controls['codigo'].invalid"
+                            >{{ getErrorCodigo() }}</mat-error
+                        >
+                    </mat-form-field>
+                    </div>
+                    <div class="col-6">
+                      <mat-form-field appearance="fill">
+                        <mat-label>Nombre</mat-label>
+                        <input matInput formControlName="nombre" required />
+                        <mat-error
+                            *ngIf="aeropuertoForm.controls['nombre'].invalid"
+                            >{{ getErrorNombre() }}</mat-error
+                        >
+                    </mat-form-field>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6">
+                      <mat-form-field appearance="fill">
+                        <mat-label>Localizacion</mat-label>
+                        <input matInput formControlName="localizacion" required />
+                        <mat-error
+                            *ngIf="aeropuertoForm.controls['localizacion'].invalid"
+                            >{{ getErrorLocalizacion() }}</mat-error
+                        >
+                    </mat-form-field>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                      <mat-form-field appearance="fill">
+                        <mat-label>Detalles</mat-label>
+                        <input matInput formControlName="detalles" required />
+                        <mat-error
+                            *ngIf="aeropuertoForm.controls['detalles'].invalid"
+                            >{{ getErrorDetalles() }}</mat-error
+                        >
+                    </mat-form-field>
+                    </div>
+                </div>
+                <div id="backgroundStyle">
+                  <div class="d-flex justify-content-end">
+                      <button type="submit" class="btn btn-primary">
+                          {{ tipoBoton }}
+                      </button>
+                  </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/app/aeropuertos/pages/agregar/agregar.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AeropuertosService } from '../../services/aeropuertos.service';
+import Swal from 'sweetalert2';
+
+@Component({
+  selector: 'app-agregar',
+  templateUrl: './agregar.component.html',
+  styleUrls: ['./agregar.component.css']
+})
+export class AgregarComponent implements OnInit{
+
+  id: number = 0;
+  tipoBoton: string = 'Agregar';
+
+  aeropuertoForm: FormGroup = this.formBuilder.group({
+    codigo: [ '' , [ Validators.required] ],
+    nombre: [ '' , [ Validators.required] ],
+    localizacion:[ '' , [ Validators.required    ] ],
+    detalles:[ '' , [ Validators.required    ] ]
+  })
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private aeropuertosService: AeropuertosService,
+    private activateRoute: ActivatedRoute,
+    private router: Router
+  ){}  
+
+  ngOnInit(): void {
+    if (this.router.url.includes('editar')) {
+      this.id = this.activateRoute.snapshot.params['id'];
+      this.tipoBoton="Actualizar";
+      this.llenarFormulario();
+    }
+  }
+
+  guardar(){
+    if (this.aeropuertoForm.invalid)  {
+      this.aeropuertoForm.markAllAsTouched();
+      return;
+    }
+
+    if (!this.id) {
+      this.crearAeropuerto();
+      this.aeropuertoForm.reset();
+    } else {                          
+      this.actualizarAeropuerto();
+    }
+
+  }
+
+  private crearAeropuerto(){
+    this.aeropuertosService.addAeropuerto(this.aeropuertoForm.value).subscribe(
+      res => {
+        this.irAlListado();
+        
+        const Toast = Swal.mixin({
+          toast: true,
+          position: 'top-end',
+          showConfirmButton: false,
+          timer: 2000,
+          timerProgressBar: true,
+          didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+          }
+        })
+        Toast.fire({
+          icon: 'success',
+          title: 'Se agrego correctamente'
+        })
+      }, err =>{
+
+      }
+    )
+  }
+
+  private actualizarAeropuerto(){
+    this.aeropuertosService.updateAeropuerto(this.id,this.aeropuertoForm.value).subscribe(
+      res => {
+        this.irAlListado();
+        const Toast = Swal.mixin({
+          toast: true,
+          position: 'top-end',
+          showConfirmButton: false,
+          timer: 2000,
+          timerProgressBar: true,
+          didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+          }
+        })
+        Toast.fire({
+          icon: 'success',
+          title: 'Se actualizo correctamente'
+        })
+      }, err =>{
+
+      }
+    )
+  }
+
+  private irAlListado(){
+    this.router.navigate(['/aeropuertos/listado']);
+  }
+
+  private llenarFormulario(){
+    this.aeropuertosService.getAeropuerto(this.id).subscribe(
+      res => {
+        this.aeropuertoForm.patchValue(res);
+      },err => {
+
+      }
+    )
+  }
+
+  getErrorNombre() {
+    if (this.aeropuertoForm.controls['nombre'].hasError('required')) {
+      return 'Desbes ingresar un nombre';
+    }
+
+    return this.aeropuertoForm.controls['nombre'].hasError('email') ? 'Not a valid email' : '';
+  }
+  getErrorCodigo() {
+    if (this.aeropuertoForm.controls['codigo'].hasError('required')) {
+      return 'Desbes ingresar un nombre';
+    }
+
+    return this.aeropuertoForm.controls['codigo'].hasError('email') ? 'Not a valid email' : '';
+  }
+
+  getErrorLocalizacion() {
+    if (this.aeropuertoForm.controls['localizacion'].hasError('required')) {
+      return 'Desbes ingresar un nombre';
+    }
+
+    return this.aeropuertoForm.controls['localizacion'].hasError('email') ? 'Not a valid email' : '';
+  }
+
+  getErrorDetalles() {
+    if (this.aeropuertoForm.controls['detalles'].hasError('required')) {
+      return 'Desbes ingresar un nombre';
+    }
+
+    return this.aeropuertoForm.controls['detalles'].hasError('email') ? 'Not a valid email' : '';
+  }
+
+
+
+}

src/app/aeropuertos/pages/detalles/detalles.component.html

+<div class="row">
+    <div class="col-12">
+        <aeropuertos-header></aeropuertos-header>
+
+        <div
+            class="content"
+            id="backgroundStyle"
+        >
+        <form 
+        autocomplete="off"
+        [formGroup]="aeropuertoForm">
+          <div class="row">
+              <div class="col-6">
+                <mat-form-field appearance="fill">
+                  <mat-label>Codigo</mat-label>
+                  <input matInput formControlName="codigo" readonly/>
+              </mat-form-field>
+              </div>
+              <div class="col-6">
+                <mat-form-field appearance="fill">
+                  <mat-label>Nombre</mat-label>
+                  <input matInput formControlName="nombre" readonly />
+              </mat-form-field>
+              </div>
+          </div>
+          <div class="row">
+              <div class="col-6">
+                <mat-form-field appearance="fill">
+                  <mat-label>Localizacion</mat-label>
+                  <input matInput formControlName="localizacion" readonly />
+              </mat-form-field>
+              </div>
+          </div>
+          <div class="row">
+              <div class="col-12">
+                <mat-form-field appearance="fill">
+                  <mat-label>Detalles</mat-label>
+                  <input matInput formControlName="detalles" readonly />
+              </mat-form-field>
+              </div>
+          </div>
+      </form>
+        </div>
+    </div>
+</div>

src/app/aeropuertos/pages/detalles/detalles.component.ts

+import { Component } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { PasajerosService } from '../../../pasajeros/services/pasajeros.service';
+import { AeropuertosService } from '../../services/aeropuertos.service';
+
+@Component({
+  selector: 'app-detalles',
+  templateUrl: './detalles.component.html',
+  styleUrls: ['./detalles.component.css']
+})
+export class DetallesComponent {
+
+  id: number = 0;
+
+  aeropuertoForm: FormGroup = this.formBuilder.group({
+    codigo: [ '' ],
+    nombre: [ ''],
+    localizacion:[ ''],
+    detalles:[ '']
+
+  })
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private activateRoute: ActivatedRoute,
+    private aeropuertoService: AeropuertosService
+  ){}
+
+    ngOnInit(): void {
+      this.id = this.activateRoute.snapshot.params['id'];
+      this.llenarFormulario();
+    }
+
+    private llenarFormulario(){
+      this.aeropuertoService.getAeropuerto(this.id).subscribe(
+        res => {
+          this.aeropuertoForm.patchValue(res);
+        },err => {
+  
+        }
+      )
+    }
+
+}

src/app/aeropuertos/pages/listar/listar.component.css

+.circulo-div {
+  height: 35px;
+  width: 35px;
+  background-color: #bbb;
+  border-radius: 50%;
+
+  display: flex;        
+  justify-content: center;
+  align-items: center;
+  border: 1.5px solid black;
+  background-color: white;
+}
+
+/* .tr-hover:hover{
+  cursor: pointer;
+} */
+
+.table-hover tr{
+  cursor: pointer;
+}
\ No newline at end of file

src/app/aeropuertos/pages/listar/listar.component.html

+<div class="row">
+    <div class="col-12">
+        <aeropuertos-header></aeropuertos-header>
+        <div class="content">
+            <div class="filtros" style="margin-bottom: 10px">
+                <div>
+                    <div class="input-group m-b">
+                        <div class="input-group-prepend">
+                            <span class="input-group-addon" id="filtroSpan"
+                                >Filtros</span
+                            >
+                        </div>
+                        <input class="form-control" type="text"[(ngModel)]="filtroInput" #input>
+
+                        <button class="btn-primary" id="botonFiltro" (click)="aplicarFiltro($event)">
+                            <i class="fa fa-search"></i>
+                        </button>
+                        <button id="botonEliminarFiltros" (click)="eliminarFiltros()">
+                            <i class="fa fa-times-circle"></i>
+                        </button>
+                        <button
+                            routerLink="/aeropuertos/agregar"
+                            id="botonAgregar"
+                        >
+                            <div class="circulo-div">
+                                <i
+                                    class="fa fa-file-o"
+                                    style="margin: auto"
+                                ></i>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div style="padding-top: 15px">
+           
+              <div class="mat-elevation-z8">
+                <table class="table table-striped table-hover" mat-table [dataSource]="dataSource" matSort>
+              
+                  <!-- Progress Column -->
+                  <ng-container matColumnDef="codigo">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Codigo </th>
+                    <td mat-cell *matCellDef="let row"> {{row.codigo}} </td>
+                  </ng-container>
+              
+                  <!-- Name Column -->
+                  <ng-container matColumnDef="nombre">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Nombre </th>
+                    <td mat-cell *matCellDef="let row"> {{row.nombre}} </td>
+                  </ng-container>
+              
+                  <ng-container matColumnDef="opciones">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+                    <td mat-cell *matCellDef="let row"> 
+
+                      <button
+                                    routerLink="/aeropuertos/editar/{{
+                                        row.id
+                                    }}"
+                                    class="btn btn-light btn-sm"
+                                >
+                                    <i class="fa fa-edit"></i>
+
+                                    Editar
+                      </button>
+
+                      <button
+                                    class="btn btn-light btn-sm"
+                                    (click)="eliminar($event, row.id)"
+                                >
+                                    <i class="fa fa-trash"></i>
+                                    Eliminar
+                      </button>
+                    </td>
+                  </ng-container>
+              
+                  <tr  mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="detalles(row.id)"></tr>
+
+                  <!-- <mat-row  *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></mat-row> -->
+
+              
+                  <!-- Row shown when there is no matching data. -->
+                  <!-- <tr class="mat-row" *matNoDataRow>
+                    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+                  </tr> -->
+                </table>
+              
+                <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+              </div>
+
+            </div>
+        </div>
+    </div>
+</div>

src/app/aeropuertos/pages/listar/listar.component.ts

+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Aeropuerto } from '../../interfaces/aeropuertos.interfaces';
+import { Router } from '@angular/router';
+import Swal from 'sweetalert2';
+import { AeropuertosService } from '../../services/aeropuertos.service';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table'
+
+@Component({
+  selector: 'app-listar',
+  templateUrl: './listar.component.html',
+  styleUrls: ['./listar.component.css']
+})
+export class ListarComponent implements OnInit{
+
+  displayedColumns: string[] = ['codigo', 'nombre','opciones'];
+  dataSource!: MatTableDataSource<any>;
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild('input') entradaFiltro: ElementRef | undefined;
+  public filtroInput: string = '';  
+  public aeropuertos: Aeropuerto[] = [];
+
+  constructor(
+    private router: Router,
+    private aeropuertosService: AeropuertosService
+  ){}
+
+  ngOnInit(): void {
+      setTimeout(() => {
+        this.listaAeropuertos();
+      }, 200);
+  }
+
+  listaAeropuertos(){
+    this.aeropuertosService.getAeropuertos().subscribe(
+      res =>{
+        this.aeropuertos = res;
+        this.dataSource = new MatTableDataSource(this.aeropuertos);
+        this.dataSource.paginator = this.paginator;  
+        this.dataSource.sort = this.sort;
+      },err => {
+
+      }
+    )
+  }
+
+
+  eliminar(event:any, id: number){
+    event.stopPropagation();
+
+    Swal.fire({
+      title: 'Estas seguro?' + ' Aeropuerto ID: ' + id,
+      text: "No se podran revertir los cambios!",
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText: 'Si, eliminar!',
+      cancelButtonText: 'Cancelar'
+    }).then((result) => {
+      if (result.isConfirmed) {
+
+        this.eliminarAeropuerto(id);
+
+        const Toast = Swal.mixin({
+          toast: true,
+          position: 'top-end',
+          showConfirmButton: false,
+          timer: 2000,
+          timerProgressBar: true,
+          didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+          }
+        })
+        
+        Toast.fire({
+          icon: 'success',
+          title: 'Se elimino correctamente'
+        })
+      }
+    })
+  }
+
+  detalles(id:number){
+    this.router.navigate(['/aeropuertos/detalles/',id ]);
+  }
+  actualizar(id: number){
+    this.router.navigate(['/aeropuertos/editar/',id ]);
+  }
+  
+  eliminarAeropuerto(id: number){
+    this.aeropuertosService.deleteAeropuerto(id).subscribe(
+      res =>{
+        this.listaAeropuertos();
+      },err => {
+
+      }
+    )
+  }
+  
+  aplicarFiltro(event: Event) {
+    const filterValue = this.filtroInput;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  eliminarFiltros(){
+    this.filtroInput = '';
+    this.dataSource.filter = '';
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+}

src/app/aeropuertos/pipes/pagintate.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'paginate2'
+})
+export class PaginatePipe implements PipeTransform {
+
+  transform(array: any[], page_size: number | string, page_number: number): any[] {
+    
+    if(!array.length) return []
+    if(page_size === 'all'){
+      return array
+    }
+    page_size = page_size || 5
+    page_number = page_number || 1
+    --page_number
+
+    return array.slice(page_number * (+(page_size)), (page_number + 1) * (+(page_size)))
+}
+
+}

src/app/aeropuertos/services/aeropuertos.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Aeropuerto } from '../interfaces/aeropuertos.interfaces';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AeropuertosService {
+
+  private baseUrl: string = "http://localhost:8080/aeropuertos";
+
+  constructor(private httpClient: HttpClient) { }
+  
+  getAeropuertos(): Observable<Aeropuerto[]>{
+    return this.httpClient.get<Aeropuerto[]>(`${ this.baseUrl }/listar`);
+  }
+
+  getAeropuerto(id: number): Observable<Aeropuerto>{
+    return this.httpClient.get<Aeropuerto>(`${ this.baseUrl }/byId/${ id }`);
+  }
+
+  addAeropuerto(aeropuerto: Aeropuerto): Observable<Object>{
+    return this.httpClient.post(this.baseUrl+"/agregar",aeropuerto);
+  }
+
+  updateAeropuerto(id: number,aeropuerto:Aeropuerto):Observable<Object>{
+    return this.httpClient.put(`${this.baseUrl+ "/actualizar"}/${id}`,aeropuerto);
+  }
+
+  deleteAeropuerto(id: number):Observable<Object>{
+    return this.httpClient.delete(`${this.baseUrl+ "/eliminar"}/${id}`);
+  }
+
+}

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

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule, Router } from '@angular/router';
+import { ListarComponent } from './pages/listar/listar.component';
+import { AgregarComponent } from './pages/agregar/agregar.component';
+import { DetallesComponent } from './pages/detalles/detalles.component';
+import { HomeComponent } from '../home/home.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    children: [
+      { path: 'listado', component: ListarComponent },
+      { path: 'agregar', component: AgregarComponent },
+      { path: 'editar/:id', component: AgregarComponent },
+      { path: 'detalles/:id', component: DetallesComponent },
+      { path: '**', redirectTo: 'listado' }
+      //{ path: ':id', component: AgregarComponent }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AgentesRoutingModule { }

src/app/agentes/agentes.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ListarComponent } from './pages/listar/listar.component';
+import { AgregarComponent } from './pages/agregar/agregar.component';
+import { DetallesComponent } from './pages/detalles/detalles.component';
+import { AgentesRoutingModule } from './agentes-routing.module';
+import { MaterialModule } from '../material/material.module';
+import { HeaderComponent } from './components/header/header.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    ListarComponent,
+    AgregarComponent,
+    DetallesComponent,
+    HeaderComponent
+  ],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    AgentesRoutingModule,
+    ReactiveFormsModule,
+    FormsModule
+  ]
+})
+export class AgentesModule { }

src/app/agentes/components/header/header.component.html

+<div class="header header-component">
+    <div>
+        <div class="sub-header-component">
+            <i class="fa fa-user-circle fa-lg"></i>
+        </div>
+        <h3 style="display: inline">Gestor de Agentes</h3>
+    </div>
+    <span>Registrar un nuevo agente</span>
+
+    <!-- <div class="icono" style="padding-top: 5px; padding-right: 5px">
+                  <i class="fa fa-user"></i>
+                  
+              </div> -->
+</div>

src/app/agentes/components/header/header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent {
+
+}

src/app/agentes/interfaces/agentes.interfaces.ts

+export interface Agente{
+  id: number,
+  nombre: string,
+  detalles: string
+}
\ No newline at end of file

src/app/agentes/pages/agregar/agregar.component.html

+<div class="row">
+    <div class="col-12">
+        <app-header></app-header>
+
+        <div
+            class="content"
+            id="backgroundStyle"
+        >
+            <form autocomplete="off"
+            [formGroup]="agenteForm"
+            (ngSubmit)="guardar()" >
+                <div class="row">
+                    <div class="col-6">
+                      <mat-form-field appearance="fill">
+                        <mat-label>Nombre</mat-label>
+                        <input matInput formControlName="nombre" required />
+                        <mat-error
+                            *ngIf="agenteForm.controls['nombre'].invalid"
+                            >{{ getErrorNombre() }}</mat-error
+                        >
+                      </mat-form-field>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                      <mat-form-field appearance="fill">
+                        <mat-label>Detalles</mat-label>
+                        <input matInput formControlName="detalles" required />
+                        <mat-error
+                            *ngIf="agenteForm.controls['detalles'].invalid"
+                            >{{ getErrorDetalles() }}</mat-error
+                        >
+                    </mat-form-field>
+                    </div>
+                </div>
+                <div
+                id="backgroundStyle"
+            >
+                <div class="d-flex justify-content-end">
+                    <button type="submit" class="btn btn-primary">
+                        {{ tipoBoton }}
+                    </button>
+                </div>
+            </div>
+            </form>
+        </div>
+       
+    </div>
+</div>

src/app/agentes/pages/agregar/agregar.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { AgentesService } from '../../services/agentes.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import Swal from 'sweetalert2';
+import { AuthService } from '../../../auth/services/auth.service';
+import { query } from '@angular/animations';
+
+@Component({
+  selector: 'app-agregar',
+  templateUrl: './agregar.component.html',
+  styleUrls: ['./agregar.component.css']
+})
+export class AgregarComponent implements OnInit{
+
+  id: number = 0;
+  tipoBoton: string = 'Agregar';
+
+  agenteForm: FormGroup = this.formBuilder.group({
+    nombre: [ '' , [ Validators.required] ],
+    detalles:[ '' , [ Validators.required    ] ]
+  })
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private agentesService: AgentesService,
+    private activateRoute: ActivatedRoute,
+    private router: Router,
+    private authService: AuthService
+  ){}
+
+  ngOnInit(): void {
+    if(this.router.url.includes('editar') ) {
+      this.id = this.activateRoute.snapshot.params['id'];
+      this.tipoBoton="Actualizar";
+      this.llenarFormulario();
+    }
+    
+  }
+
+  getErrorNombre() {
+    if (this.agenteForm.controls['nombre'].hasError('required')) {
+      return 'Desbes ingresar un nombre';
+    }
+    return this.agenteForm.controls['nombre'].hasError('email') ? 'Not a valid email' : '';
+  }
+
+  getErrorDetalles() {
+    if (this.agenteForm.controls['detalles'].hasError('required')) {
+      return 'Desbes ingresar un nombre';
+    }
+    return this.agenteForm.controls['detalles'].hasError('email') ? 'Not a valid email' : '';
+  }
+
+  guardar(){
+    if (this.agenteForm.invalid) {
+      this.agenteForm.markAllAsTouched();
+      return;
+    }
+    if (!this.id) {
+      this.agregarAuthPasajero();
+    } else {
+      this.actualizarAgente()
+    }
+  }
+
+
+  private crearAgente(idAgenteUser: number){
+    let query = {
+      nombre: this.agenteForm.value.nombre,
+      detalles: this.agenteForm.value.detalles,
+      agenteAuth: {
+        id: idAgenteUser
+      }
+    }
+    this.agentesService.addAgente(query).subscribe(
+      res => {
+        this.irAlListado();
+        const Toast = Swal.mixin({
+          toast: true,
+          position: 'top-end',
+          showConfirmButton: false,
+          timer: 2000,
+          timerProgressBar: true,
+          didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+          }
+        })
+        Toast.fire({
+          icon: 'success',
+          title: 'Se agrego correctamente'
+        })
+      }, err =>{
+
+      }
+    )
+  }
+
+  private actualizarAgente(){
+    this.agentesService.updateAgente(this.id,this.agenteForm.value).subscribe(
+      res => {
+        this.irAlListado();
+        const Toast = Swal.mixin({
+          toast: true,
+          position: 'top-end',
+          showConfirmButton: false,
+          timer: 2000,
+          timerProgressBar: true,
+          didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+          }
+        })
+        Toast.fire({
+          icon: 'success',
+          title: 'Se actualizo correctamente'
+        })
+      }, err =>{
+
+      }
+    )
+  }
+
+  private irAlListado(){
+    this.router.navigate(['/agentes/listado']);
+  }
+
+  private llenarFormulario(){
+    this.agentesService.getAgente(this.id).subscribe(
+      res => {
+        this.agenteForm.patchValue(res);
+      },err => {
+      }
+    )
+  }
+
+  agregarAuthPasajero(){
+    let query = {
+        usuario: this.agenteForm.value.nombre,
+        password: "1234",
+        rol: "agente",
+    }
+    this.authService.addAgenteAuth(query).subscribe(
+      res =>{
+        this.crearAgente(res.id);  
+      }
+    )
+  }  
+
+
+}

src/app/agentes/pages/detalles/detalles.component.html

+<div class="row">
+    <div class="col-12">
+        <app-header></app-header>
+
+        <div
+            class="content"
+            id="backgroundStyle"
+        >
+        <form autocomplete="off"
+        [formGroup]="agenteForm">
+            <div class="row">
+                <div class="col-6">
+                  <mat-form-field appearance="fill">
+                    <mat-label>Nombre</mat-label>
+                    <input matInput formControlName="nombre" readonly />
+                 
+                </mat-form-field>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12">
+                  <mat-form-field appearance="fill">
+                    <mat-label>Detalles</mat-label>
+                    <input matInput formControlName="detalles" readonly />
+
+                </mat-form-field>
+                </div>
+            </div>
+
+        </form>
+        </div>
+    </div>
+</div>

src/app/agentes/pages/detalles/detalles.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { AgentesService } from '../../services/agentes.service';
+
+@Component({
+  selector: 'app-detalles',
+  templateUrl: './detalles.component.html',
+  styleUrls: ['./detalles.component.css']
+})
+export class DetallesComponent implements OnInit{
+
+  id: number = 0;
+  agenteForm: FormGroup = this.formBuilder.group({
+    nombre: [ '' ],
+    detalles:  [ '' ]
+  })
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private activateRoute: ActivatedRoute,
+    private agenteService: AgentesService
+  ){}
+
+  ngOnInit(): void {
+    this.id = this.activateRoute.snapshot.params['id'];
+    this.llenarFormulario();
+  }
+
+  private llenarFormulario(){
+    this.agenteService.getAgente(this.id).subscribe(
+      res => {
+        this.agenteForm.patchValue(res);
+      },err => {
+      }
+    )
+  }
+}

src/app/agentes/pages/listar/listar.component.css

+.circulo-div {
+  height: 35px;
+  width: 35px;
+  background-color: #bbb;
+  border-radius: 50%;
+
+  display: flex;        
+  justify-content: center;
+  align-items: center;
+  border: 1.5px solid black;
+  background-color: white;
+}
+
+/* .tr-hover:hover{
+  cursor: pointer;
+} */
+
+.table-hover tr{
+  cursor: pointer;
+}
\ No newline at end of file

src/app/agentes/pages/listar/listar.component.html

+<div class="row">
+    <div class="col-12">
+        <app-header></app-header>
+        <div class="content">
+            <div class="filtros" style="margin-bottom: 10px">
+                <div>
+                    <div class="input-group m-b">
+                        <div class="input-group-prepend">
+                            <span class="input-group-addon" id="filtroSpan"
+                                >Filtros</span
+                            >
+                        </div>
+                        <input class="form-control" type="text"[(ngModel)]="filtroInput" #input>
+
+                        <button class="btn-primary" id="botonFiltro" (click)="aplicarFiltro($event)">
+                            <i class="fa fa-search"></i>
+                        </button>
+                        <button id="botonEliminarFiltros" (click)="eliminarFiltros()">
+                            <i class="fa fa-times-circle"></i>
+                        </button>
+                        <button routerLink="/agentes/agregar" id="botonAgregar">
+                            <div class="circulo-div">
+                                <i
+                                    class="fa fa-file-o"
+                                    style="margin: auto"
+                                ></i>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div style="padding-top: 15px">
+              <div class="mat-elevation-z8">
+                <table class="table table-striped table-hover" mat-table [dataSource]="dataSource" matSort>
+              
+                  <!-- Progress Column -->
+                  <ng-container matColumnDef="id">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
+                    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
+                  </ng-container>
+              
+                  <!-- Name Column -->
+                  <ng-container matColumnDef="nombre">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Nombre </th>
+                    <td mat-cell *matCellDef="let row"> {{row.nombre}} </td>
+                  </ng-container>
+              
+                  <ng-container matColumnDef="opciones">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+                    <td mat-cell *matCellDef="let row"> 
+
+                      <button
+                                    routerLink="/agentes/editar/{{
+                                        row.id
+                                    }}"
+                                    class="btn btn-light btn-sm"
+                                >
+                                    <i class="fa fa-edit"></i>
+
+                                    Editar
+                      </button>
+
+                      <button
+                                    class="btn btn-light btn-sm"
+                                    (click)="eliminar($event, row.id)"
+                                >
+                                    <i class="fa fa-trash"></i>
+                                    Eliminar
+                      </button>
+                    </td>
+                  </ng-container>
+              
+                  <tr  mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="detalles(row.id)"></tr>
+
+                  <!-- <mat-row  *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></mat-row> -->
+
+              
+                  <!-- Row shown when there is no matching data. -->
+                  <!-- <tr class="mat-row" *matNoDataRow>
+                    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+                  </tr> -->
+                </table>
+              
+                <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+              </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/agentes/pages/listar/listar.component.ts

+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Agente } from '../../interfaces/agentes.interfaces';
+import { Router } from '@angular/router';
+import Swal from 'sweetalert2';
+import { PageEvent } from '@angular/material/paginator';
+import { AgentesService } from '../../services/agentes.service';
+
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table'
+@Component({
+  selector: 'app-listar',
+  templateUrl: './listar.component.html',
+  styleUrls: ['./listar.component.css']
+})
+export class ListarComponent implements OnInit {
+
+  displayedColumns: string[] = ['id', 'nombre','opciones'];
+  dataSource!: MatTableDataSource<any>;
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild('input') entradaFiltro: ElementRef | undefined;
+  public filtroInput: string = '';
+
+  public agentes: Agente[] = [];
+
+  constructor(
+    private router: Router,
+    private agentesService: AgentesService
+  ){}
+
+  ngOnInit(): void {
+    setTimeout(() => {
+      this.listarAgentes();
+    }, 200);
+  }
+
+  eliminar(event:any, id: number){
+    event.stopPropagation();
+    Swal.fire({
+      title: 'Estas seguro?' + ' Agente ID: ' + id,
+      text: "No se podran revertir los cambios!",
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText: 'Si, eliminar!',
+      cancelButtonText: 'Cancelar'
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.eliminarAgente(id);
+
+        const Toast = Swal.mixin({
+          toast: true,
+          position: 'top-end',
+          showConfirmButton: false,
+          timer: 2000,
+          timerProgressBar: true,
+          didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+          }
+        })
+        Toast.fire({
+          icon: 'success',
+          title: 'Se elimino correctamente'
+        })
+      }
+    })
+  }
+
+  detalles(id:number){
+    this.router.navigate(['/agentes/detalles/',id ]);
+  }
+  actualizar(id: number){
+    this.router.navigate(['/agentes/agregar/',id ]);
+  }
+
+  listarAgentes(){
+    this.agentesService.getAgentes().subscribe(
+      res =>{
+        this.agentes = res;
+        this.dataSource = new MatTableDataSource(this.agentes);
+        this.dataSource.paginator = this.paginator;  
+        this.dataSource.sort = this.sort;
+      },err => {
+
+      }
+    )
+  }
+
+  aplicarFiltro(event: Event) {
+    const filterValue = this.filtroInput;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  eliminarFiltros(){
+    this.filtroInput = '';
+    this.dataSource.filter = '';
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  eliminarAgente(id: number){
+    this.agentesService.deleteAgente(id).subscribe(
+      res =>{
+        this.listarAgentes();
+      },err => {
+
+      }
+    )
+  }
+
+}

src/app/agentes/services/agentes.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Agente } from '../interfaces/agentes.interfaces';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AgentesService {
+
+  private baseUrl: string = "http://localhost:8080/agentes";
+
+  constructor(private httpClient: HttpClient) { }
+  
+  getAgentes(): Observable<Agente[]>{
+    return this.httpClient.get<Agente[]>(`${ this.baseUrl }/listar`);
+  }
+
+  getAgente(id: number): Observable<Agente>{
+    return this.httpClient.get<Agente>(`${ this.baseUrl }/byId/${ id }`);
+  }
+
+  addAgente(agente: any): Observable<Object>{
+    return this.httpClient.post(this.baseUrl+"/agregar",agente);
+  }
+
+  updateAgente(id:number,agente:Agente):Observable<Object>{
+    return this.httpClient.put(`${this.baseUrl+ "/actualizar"}/${id}`,agente);
+  }
+
+  deleteAgente(id:number):Observable<Object>{
+    return this.httpClient.delete(`${this.baseUrl+ "/eliminar"}/${id}`);
+  }
+}

src/app/app-router.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes, CanLoad } from '@angular/router';
+import { ErrorPageComponent } from './shared/error-page/error-page.component';
+import { AgenteReservaGuard } from './auth/guards/agente-reserva.guard';
+import { SupervisorGuard } from './auth/guards/supervisor.guard';
+import { PasajeroGuard } from './auth/guards/pasajero.guard';
+
+const routes: Routes = [
+  {
+    path: 'auth',
+    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
+  },
+  {
+    path: 'pasajeros',
+    loadChildren: () => import('./pasajeros/pasajeros.module').then(m => m.PasajerosModule),
+    canLoad: [AgenteReservaGuard],
+    canActivate: [AgenteReservaGuard]
+  },
+  {
+    path: 'aeropuertos',
+    loadChildren: () => import('./aeropuertos/aeropuertos.module').then(m => m.AeropuertosModule),
+    canLoad: [SupervisorGuard],
+    canActivate: [SupervisorGuard]
+  },
+  {
+    path: 'agentes',
+    loadChildren: () => import('./agentes/agentes.module').then(m => m.AgentesModule),
+    canLoad: [SupervisorGuard],
+    canActivate: [SupervisorGuard]
+  },
+  {
+    path: 'vuelos',
+    loadChildren: () => import('./vuelos/vuelos.module').then(m => m.VuelosModule),
+    canLoad: [SupervisorGuard],
+    canActivate: [SupervisorGuard]
+  },
+  {
+    path: 'pagos',
+    loadChildren: () => import('./pagos/pagos.module').then(m => m.PagosModule),
+    canLoad: [AgenteReservaGuard],
+    canActivate: [AgenteReservaGuard]
+  },
+  {
+    path: 'pago-reserva',
+    loadChildren: () => import('./pago-reserva/pago-reserva.module').then(m => m.PagoReservaModule),
+    canLoad: [PasajeroGuard],
+    canActivate: [PasajeroGuard]
+  },
+  {
+    path: 'reservas',
+    loadChildren: () => import('./reservas/reservas.module').then(m => m.ReservasModule),
+    canLoad: [AgenteReservaGuard],
+    canActivate: [AgenteReservaGuard]
+  },
+  {
+    path: '404',
+    component: ErrorPageComponent
+  },
+  {
+    path: '**', 
+    redirectTo: '/auth/login'
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRouterModule { }

src/app/app.component.ts

 import { Component } from '@angular/core';
 
+// declare function greet(): void;
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'base';
+
+  constructor() {
+  }
 }

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { SharedModule } from './shared/shared.module';
+import { AppRouterModule } from './app-router.module';
 
 import { AppComponent } from './app.component';
+import { FormulariosModule } from './formularios/formularios.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { PasajerosModule } from './pasajeros/pasajeros.module';
+import { MaterialModule } from './material/material.module';
+import { PaginatePipe } from './shared/pipes/paginate.pipe';
+import { HomeComponent } from './home/home.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    SharedModule,
+    AppRouterModule,
+    FormulariosModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    
+    MaterialModule
+  ],
+  exports:[
   ],
   providers: [],
   bootstrap: [AppComponent]

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

+import { NgModule, Component } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { LoginComponent } from './pages/login/login.component';
+import { LoginPasajeroComponent } from './pages/login-pasajero/login-pasajero.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'login',
+        component: LoginComponent
+      },
+      {
+        path: 'login-pasajero',
+        component: LoginPasajeroComponent
+      },
+      {
+        path: '**',
+        redirectTo: 'login'
+      }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AuthRoutingModule { }

src/app/auth/auth.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoginComponent } from './pages/login/login.component';
+import { RegistroComponent } from './pages/registro/registro.component';
+import { AuthRoutingModule } from './auth-routing.module';
+
+import { FormsModule } from '@angular/forms';
+import { LoginPasajeroComponent } from './pages/login-pasajero/login-pasajero.component';
+
+
+@NgModule({
+  declarations: [
+    LoginComponent,
+    RegistroComponent,
+    LoginPasajeroComponent
+  ],
+  imports: [
+    CommonModule,
+    AuthRoutingModule,
+    FormsModule
+  ]
+})
+export class AuthModule { }

src/app/auth/guards/agente-reserva.guard.ts

+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, RouterStateSnapshot, UrlSegment, UrlTree, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AgenteReservaGuard implements CanActivate, CanLoad {
+  constructor(private authService: AuthService,private router: Router){}
+  
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      if (this.authService.verificarAuth() && this.authService.getUserRole() == 'agente') {
+        return true;
+      }
+      this.router.navigate(['auth/login']);
+      return false;
+  }
+  canLoad(
+    route: Route,
+    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
+      if (this.authService.verificarAuth() && this.authService.getUserRole() == 'agente') {
+        return true;
+      }
+      this.router.navigate(['auth/login']);
+      return false;
+  }
+}

src/app/auth/guards/auth.guard.ts

+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements  CanLoad, CanActivate {
+  constructor(private authService: AuthService){}
+  
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    return true;
+  }
+
+
+  canLoad(
+    route: Route,
+    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
+      return true;
+  }
+}

src/app/auth/guards/pasajero.guard.ts

+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, RouterStateSnapshot, UrlSegment, UrlTree, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthPasajerosService } from '../services/auth-pasajeros.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PasajeroGuard implements CanActivate, CanLoad {
+  constructor(private authPasajeroService: AuthPasajerosService,private router: Router){}
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      if (this.authPasajeroService.verificarAuth() && this.authPasajeroService.getPasajeroRole() == 'pasajero') {
+        return true;
+      }
+      this.router.navigate(['auth/login']);
+      return false;
+  }
+  canLoad(
+    route: Route,
+    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      if (this.authPasajeroService.verificarAuth() && this.authPasajeroService.getPasajeroRole() == 'pasajero') {
+        return true;
+      }
+      this.router.navigate(['auth/login']);
+      return false;
+  }
+}

src/app/auth/guards/supervisor.guard.ts

+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, RouterStateSnapshot, UrlSegment, UrlTree, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SupervisorGuard implements CanActivate, CanLoad {
+  constructor(private authService: AuthService,private router: Router){}
+  
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      if(this.authService.verificarAuth() && this.authService.getUserRole() == 'supervisor'){
+        return true;
+      }
+      this.router.navigate(['auth/login']);
+      return false;
+  }
+  canLoad(
+    route: Route,
+    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      if(this.authService.verificarAuth() && this.authService.getUserRole() == 'supervisor'){
+        return true;
+      }
+      this.router.navigate(['auth/login']);
+      return false;
+  }
+}

src/app/auth/interfaces/agente.interface.ts

+import { Agente } from '../../agentes/interfaces/agentes.interfaces';
+
+
+export interface AgenteAuth {
+  id:      number;
+  usuario:   string;
+  password: string;
+  rol: string;
+  agenteReservas: Agente[]
+}
\ No newline at end of file

src/app/auth/interfaces/pasajero.interface.ts

+import { Pasajero } from '../../pasajeros/interfaces/pasajeros.inteface';
+export interface PasajeroAuth {
+  id:      number;
+  correo:   string;
+  codigo: string;
+  rol: string;
+  pasajeros: Pasajero[]
+}
+

src/app/auth/pages/login-pasajero/login-pasajero.component.html

+<body class="gray-bg" style="padding-top: 200px">
+    <div class="middle-box text-center loginscreen animated fadeInDown">
+        <div>
+            <div>
+                <i class="fa fa-plane fa-5x"></i>
+            </div>
+            <h3>Bienvenido Pasajero</h3>
+
+            <p>Ingresa al sistema.</p>
+            <form class="m-t" role="form">
+                <div class="form-group">
+                    <input
+                        type="email"
+                        class="form-control"
+                        placeholder="Correo"
+                        required=""
+                        name="correo"
+                        [(ngModel)]="correo"
+                    />
+                </div>
+                <div class="form-group">
+                    <input
+                        type="password"
+                        class="form-control"
+                        name="codigo"
+                        placeholder="codigo"
+                        required=""
+                        [(ngModel)]="codigo"
+                    />
+                </div>
+                <button
+                    type="submit"
+                    class="btn btn-primary block full-width m-b"
+                    (click)="login()"
+                >
+                    Login
+                </button>
+            </form>
+        </div>
+    </div>
+</body>

src/app/auth/pages/login-pasajero/login-pasajero.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+import { AuthPasajerosService } from '../../services/auth-pasajeros.service';
+import Swal from 'sweetalert2';
+
+@Component({
+  selector: 'app-login-pasajero',
+  templateUrl: './login-pasajero.component.html',
+  styleUrls: ['./login-pasajero.component.css']
+})
+export class LoginPasajeroComponent {
+  correo: string = '';
+  codigo: string = '';
+
+  constructor(
+    private router: Router,
+    private authPasajeroService: AuthPasajerosService
+  ){}
+
+  login(){
+    if (this.authPasajeroService.login(this.correo,this.codigo)) {
+      const Toast = Swal.mixin({
+        toast: true,
+        position: 'top-right',
+        iconColor: 'white',
+        customClass: {
+          popup: 'colored-toast'
+        },
+        showConfirmButton: false,
+        timer: 1500,
+        timerProgressBar: true
+      })
+      Toast.fire({
+        icon: 'success',
+        title: 'Inicio correcto'
+      })
+
+      if (this.authPasajeroService.getPasajeroRole()=='pasajero') {
+        this.router.navigate(['./pago-reserva']);
+      }
+    }else{
+      const Toast = Swal.mixin({
+        toast: true,
+        position: 'top-right',
+        iconColor: 'white',
+        customClass: {
+          popup: 'colored-toast'
+        },
+        showConfirmButton: false,
+        timer: 1500,
+        timerProgressBar: true
+      })
+      Toast.fire({
+        icon: 'error',
+        title: 'Correo o codigo incorrectos!'
+      })
+    }
+  }
+}

src/app/auth/pages/login/login.component.html

+<body class="gray-bg" style="padding-top: 200px">
+    <div class="middle-box text-center loginscreen animated fadeInDown">
+        <div>
+            <div>
+                <i class="fa fa-user fa-5x"></i>
+            </div>
+            <h3>Bienvenido</h3>
+
+            <p>Ingresa al sistema.</p>
+            <form class="m-t" role="form">
+                <div class="form-group">
+                    <input
+                        type="email"
+                        class="form-control"
+                        placeholder="Usuario"
+                        required=""
+                        name="usuario"
+                        [(ngModel)]="usuario"
+                    />
+                </div>
+                <div class="form-group">
+                    <input
+                        type="password"
+                        class="form-control"
+                        name="password"
+                        placeholder="Password"
+                        required=""
+                        [(ngModel)]="password"
+                    />
+                </div>
+                <button
+                    type="submit"
+                    class="btn btn-primary block full-width m-b"
+                    (click)="login()"
+                >
+                    Login
+                </button>
+            </form>
+        </div>
+    </div>
+</body>

src/app/auth/pages/login/login.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+import Swal from 'sweetalert2';
+// import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent {
+  
+  usuario: string = '';
+  password: string = '';
+
+  constructor(
+    private router: Router,
+    private authService: AuthService
+  ){}
+  login(){
+    if (this.authService.login(this.usuario,this.password)) {
+      const Toast = Swal.mixin({
+        toast: true,
+        position: 'top-right',
+        iconColor: 'white',
+        customClass: {
+          popup: 'colored-toast'
+        },
+        showConfirmButton: false,
+        timer: 1500,
+        timerProgressBar: true
+      })
+      Toast.fire({
+        icon: 'success',
+        title: 'Inicio correcto'
+      })
+      if (this.authService.getUserRole()=='agente') {
+        this.router.navigate(['./pasajeros']);
+      } else if(this.authService.getUserRole()=='supervisor') {
+        this.router.navigate(['./aeropuertos']);
+      }
+    } else {
+      const Toast = Swal.mixin({
+        toast: true,
+        position: 'top-right',
+        iconColor: 'white',
+        customClass: {
+          popup: 'colored-toast'
+        },
+        showConfirmButton: false,
+        timer: 1500,
+        timerProgressBar: true
+      })
+      Toast.fire({
+        icon: 'error',
+        title: 'Usuario o password incorrectos!'
+      })
+    }
+  }
+}

src/app/auth/pages/registro/registro.component.html

+<p>registro works!</p>

src/app/auth/pages/registro/registro.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-registro',
+  templateUrl: './registro.component.html',
+  styleUrls: ['./registro.component.css']
+})
+export class RegistroComponent {
+
+}

src/app/auth/services/auth-pasajeros.service.ts

+import { Injectable } from '@angular/core';
+import { PasajeroAuth } from '../interfaces/pasajero.interface';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthPasajerosService {
+
+  private baseUrl: string = "http://localhost:8080/pasajeros-auth";
+
+  private correo: string='';
+  private codigo: string='';
+  private _pasajeroAuth: PasajeroAuth | undefined;
+  pasajerosAuth: PasajeroAuth[] = [];
+
+  constructor(private http: HttpClient) { 
+    this.getPasajerosAuth().subscribe(
+      res => {
+        this.pasajerosAuth = res;
+      }
+    )
+  }
+
+  get auth(): PasajeroAuth {
+    return {...this._pasajeroAuth!}
+  }
+
+  verificarAuth(): Observable<boolean> | boolean{
+    if(!localStorage.getItem('correo')){
+      return false;
+    }
+    return true;
+  }
+
+  login(correo: string, codigo: string): PasajeroAuth{
+    this.pasajerosAuth.filter(data =>{
+      if (data.correo==correo && data.codigo==codigo) {
+        this.correo=data.correo;
+        this.codigo=data.codigo;
+        this._pasajeroAuth = data;
+        localStorage.setItem('correo', data.correo);
+        localStorage.setItem('rol', data.rol);
+        localStorage.setItem('id', data.pasajeros[0].id.toPrecision());
+      }
+    });
+    return this._pasajeroAuth!;
+  }
+
+  logout(){
+    localStorage.removeItem('correo');
+    localStorage.removeItem('rol');
+    localStorage.removeItem('id');
+    this._pasajeroAuth = undefined;
+  }
+
+  public getPasajeroRole(){
+    return localStorage.getItem('rol');
+  }
+
+  getPasajerosAuth(): Observable<any[]>{
+    return this.http.get<any[]>(`${ this.baseUrl }/listar`);
+  }
+
+  addPasajeroAuth(query:any): Observable<any> {
+    return this.http.post(this.baseUrl+"/agregar",query);
+  }
+}

src/app/auth/services/auth.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AgenteAuth } from '../interfaces/agente.interface';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  private baseUrl: string = "http://localhost:8080/agentes-auth";
+
+  private _agenteAuth: AgenteAuth | undefined;
+  private usuario: string='';
+  private passsword: string='';
+  agentesAuth: AgenteAuth[] = []
+
+  constructor(private http: HttpClient) { 
+    this.getAgentesAuth().subscribe(
+      res => {
+        console.log(res);
+        this.agentesAuth = res;
+      }
+    )
+  }
+  
+  get auth(): AgenteAuth {
+    return {...this._agenteAuth!}
+  }
+
+  verificarAuth(): Observable<boolean> | boolean{
+    if(!localStorage.getItem('usuario')){
+      return false;
+    }
+    return true;
+  }
+
+  login(usuario: string, password: string): AgenteAuth{
+    this.getAgentesAuth().subscribe(
+      res => {
+        this.agentesAuth = res;
+      }
+    )
+    this.agentesAuth.filter(data =>{
+      if(data.usuario==usuario && data.password==password){
+        this.usuario=data.usuario;
+        this.passsword=data.password;
+        this._agenteAuth = data;
+        localStorage.setItem('usuario', data.usuario);
+        localStorage.setItem('rol', data.rol);
+        if(data.rol!="supervisor"){
+          localStorage.setItem('id', data.agenteReservas[0].id.toPrecision());
+        }
+      }
+    });
+    return this._agenteAuth!;
+  }
+
+  logout(){
+    localStorage.removeItem('usuario');   
+    localStorage.removeItem('rol');
+    localStorage.removeItem('id');
+    this._agenteAuth = undefined;
+  }
+
+  public getUserRole(){
+    return localStorage.getItem('rol');
+  }
+
+  getAgentesAuth(): Observable<any[]>{
+    return this.http.get<any[]>(`${ this.baseUrl }/listar`);
+  }
+
+  addAgenteAuth(query:any): Observable<any> {
+    return this.http.post(this.baseUrl+"/agregar",query);
+  }
+
+}

src/app/formularios/formularios.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormularioComponent } from './pages/formulario/formulario.component';
+
+@NgModule({
+  declarations: [
+    FormularioComponent
+  ],exports:[
+    FormularioComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class FormulariosModule { }

src/app/formularios/pages/formulario/formulario.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-formulario',
+  templateUrl: './formulario.component.html',
+  styleUrls: ['./formulario.component.css']
+})
+export class FormularioComponent {
+
+}

src/app/home/home.component.html

+<div id="wrapper">
+    <app-sidebar></app-sidebar>
+
+    <div id="page-wrapper" class="gray-bg">
+        <app-header></app-header>
+        <app-navegation></app-navegation>
+        <!-- <app-formulario></app-formulario> -->
+
+        <!-- class="content-page"
+            style="padding-top: 10px; padding-bottom: 50px" -->
+        <div
+            class="content-page"
+            style="padding-top: 10px; padding-bottom: 50px"
+        >
+            <div
+                class="wrapper wrapper-content"
+                style="padding: 5px 5px 40px 5px"
+            >
+                <router-outlet></router-outlet>
+            </div>
+        </div>
+
+        <app-footer></app-footer>
+    </div>
+</div>

src/app/home/home.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent {
+
+}
+  
\ No newline at end of file

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

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { BienvenidaComponent } from './pages/bienvenida/bienvenida.component';
+
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BienvenidaComponent
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class InicioRoutingModule { }

src/app/inicio/inicio.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BienvenidaComponent } from './pages/bienvenida/bienvenida.component';
+import { InicioRoutingModule } from './inicio-routing.module';
+
+
+
+@NgModule({
+  declarations: [
+    BienvenidaComponent
+  ],
+  imports: [
+    CommonModule,
+    InicioRoutingModule
+  ]
+})
+export class InicioModule { }

src/app/inicio/pages/bienvenida/bienvenida.component.html

+<p>HOME</p>

src/app/inicio/pages/bienvenida/bienvenida.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-bienvenida',
+  templateUrl: './bienvenida.component.html',
+  styleUrls: ['./bienvenida.component.css']
+})
+export class BienvenidaComponent {
+
+}

src/app/material/material.module.ts

+import { NgModule } from "@angular/core";
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import { PaginatePipe } from '../shared/pipes/paginate.pipe';
+
+import {MatTableModule} from '@angular/material/table';
+
+
+@NgModule({
+  declarations:[
+   PaginatePipe
+  ],
+  exports:[
+    MatFormFieldModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatCardModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatInputModule,
+    MatListModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSnackBarModule,
+    MatToolbarModule,
+    MatPaginatorModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    PaginatePipe,
+    MatTableModule  
+    
+      
+  ]
+})
+export class MaterialModule{}
\ No newline at end of file

src/app/pago-reserva/components/header/header.component.html

+<div class="header header-component">
+    <div>
+        <div class="sub-header-component">
+            <i class="fa fa-dollar fa-lg"></i>
+        </div>
+        <h3 style="display: inline">Gestor de Pagos</h3>
+    </div>
+    <span>Pagar tus pagos pendientes</span>
+</div>

src/app/pago-reserva/components/header/header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent {
+
+}

src/app/pago-reserva/interfaces/pago-reservas.interfaces.ts

+export interface PagoPost{
+  id: number,
+  pago: number
+}
\ No newline at end of file

src/app/pago-reserva/pages/detalles/detalles.component.html

+<div class="row">
+  <div class="col-12">
+      <app-header></app-header>
+
+      <div
+          class="content"
+          id="backgroundStyle"
+      >
+          <form 
+            autocomplete="off"
+            [formGroup]="reservaForm"
+            >
+              <div class="row">
+                  <div class="col-6">
+                    <mat-form-field appearance="fill">
+                      <mat-label>Dia Reservacion</mat-label>
+                      <input matInput formControlName="diaReservacion" readonly />
+                    </mat-form-field>
+                  </div>
+                  <div class="col-6">
+                    <mat-form-field appearance="fill">
+                      <mat-label>Estado</mat-label>
+                      <input matInput formControlName="estado" readonly />
+                    </mat-form-field>
+                  </div>
+              </div>
+
+
+              <div class="row" style="margin-top: 50px; margin-bottom: 15px">
+                  <div class="col-10">
+                      <label for="exampleFormControlInput1" class="form-label"
+                          >Escalas del vuelo</label
+                      >
+                  </div>
+
+              </div>
+              <!--TABLA VUELO-->
+              <div class="row">
+                  <div class="col-12">
+                      <table class="table table-striped table-hover">
+                          <thead>
+                              <tr>
+                                  <th scope="col">ID</th>
+                                  <th scope="col">
+                                      Codigo Aeropuerto Origen
+                                  </th>
+                                  <th scope="col">
+                                      Codigo Aeropuerto Destino
+                                  </th>
+                                  <th scope="col">Hora salida</th>
+                                  <th scope="col">Hora llegada</th>
+
+                              </tr>
+                          </thead>
+                          <tbody>
+                              <tr
+                                  *ngFor="let escala of escalasVuelo"
+                                  class="tr-hover"
+                              >
+                                  <td>{{ escala.id }}</td>
+                                  <td>{{ escala.aeropuertoOrigen }}</td>
+                                  <td>{{ escala.aeropuertoDestino }}</td>
+                                  <td>{{ escala.fechaSalida  | date: 'M/d/yy, h:mm a'	}}</td>
+                                  <td>{{ escala.fechaLlegada  | date: 'M/d/yy, h:mm a'	}}</td>
+
+                              </tr>
+                          </tbody>
+                      </table>
+                  </div>
+              </div>
+
+          </form>
+      </div>
+      
+  </div>
+</div>

src/app/pago-reserva/pages/detalles/detalles.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Pasajero } from '../../../pasajeros/interfaces/pasajeros.inteface';
+import { PageEvent } from '@angular/material/paginator';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PasajerosService } from '../../../pasajeros/services/pasajeros.service';
+import { VuelosService } from '../../../vuelos/services/vuelos.service';
+import { EscalasService } from '../../../vuelos/services/escalas.service';
+import { ReservasService } from '../../../reservas/services/reservas.service';
+
+@Component({
+  selector: 'app-detalles',
+  templateUrl: './detalles.component.html',
+  styleUrls: ['./detalles.component.css']
+})
+export class DetallesComponent implements OnInit{
+
+  id: number = 0;
+  idVuelo: any;
+  pasajero: Pasajero | undefined;
+  vuelosModal: any[] = [];
+  escalasVuelo: any[] = [];
+
+  reservaForm: FormGroup = this.formBuilder.group({
+    diaReservacion: [ '' ],
+    estado: [ ''],
+    pasajeroId: [ '' ],
+    idVuelo: [ '' ],
+  })
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private activateRoute: ActivatedRoute,
+    private reservasService: ReservasService,
+    private pasajeroService: PasajerosService,
+  ){}  
+
+  ngOnInit(): void {
+    this.id = this.activateRoute.snapshot.params['id'];
+    this.llenarFormulario();  
+    this.getPasajero();
+  }
+
+  private llenarFormulario(){
+    this.reservasService.getReserva(this.id).subscribe(
+      res => {
+        this.getEscalasVuelo();
+        this.reservaForm.patchValue(res);
+      },err => {
+      }
+    )
+  }
+
+  getPasajero(){
+    this.pasajeroService.getPasajero(this.id).subscribe(
+      res => {
+        this.pasajero = res;
+      }
+    )
+  }
+
+  getEscalasVuelo(){
+    this.reservasService.getReserva(this.id).subscribe(
+      res => {
+        this.escalasVuelo = res.escalas;
+      }
+    )
+  }
+
+}

src/app/pago-reserva/pago-reserva-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule, Router } from '@angular/router';
+import { ListarComponent } from './pages/listar/listar.component';
+import { DetallesComponent } from './pages/detalles/detalles.component';
+import { PagarComponent } from './pages/pagar/pagar.component';
+import { HomeComponent } from '../home/home.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    children: [
+      { path: 'listado', component: ListarComponent },
+      { path: 'pagar/:id', component: PagarComponent },
+      { path: 'detalles/:id', component: DetallesComponent },
+      { path: '**', redirectTo: 'listado' }
+      //{ path: ':id', component: AgregarComponent }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class PagoReservaRoutingModule { }

src/app/pago-reserva/pago-reserva.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PagarComponent } from './pages/pagar/pagar.component';
+import { DetallesComponent } from './pages/detalles/detalles.component';
+import { MaterialModule } from '../material/material.module';
+import { PagoReservaRoutingModule } from './pago-reserva-routing.module';
+import { ListarComponent } from './pages/listar/listar.component';
+import { HeaderComponent } from './components/header/header.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    PagarComponent,
+    DetallesComponent,
+    ListarComponent,
+    HeaderComponent,
+    
+  ],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    PagoReservaRoutingModule,
+    ReactiveFormsModule,
+    FormsModule
+  ]
+})
+export class PagoReservaModule { }

src/app/pagos/components/header/header.component.html

+<div class="header header-component">
+    <div>
+        <div class="sub-header-component">
+            <i class="fa fa-folder fa-lg"></i>
+        </div>
+        <h3 style="display: inline">Visualizar pagos</h3>
+    </div>
+    <span>Visualizar los estados de los pagos</span>
+</div>

src/app/pagos/components/header/header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent {
+
+}