backend y frontend añadido

backend/.gitignore

+HELP.md
+target/
+!.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### VS Code ###
+.vscode/

backend/.mvn/wrapper/maven-wrapper.properties

+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.8.7/apache-maven-3.8.7-bin.zip
+wrapperUrl=https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.1.1/maven-wrapper-3.1.1.jar

backend/Dockerfile

+FROM eclipse-temurin:17
+
+LABEL mentainer="w7moises@gmail.com"
+
+WORKDIR /app
+
+COPY target/backend-0.0.1-SNAPSHOT.jar /app/byte.jar
+
+ENTRYPOINT ["java", "-jar", "byte.jar"]
\ No newline at end of file

backend/README.md

+# Practica
+
+Este proyecto fue creado en Spring boot 3.0.0
+
+## Iniciar en local
+Para correr el proyecto en local se debe primero insertar manualmente el query de data.sql en la base de datos para tener datos de prueba.
+
+## Iniciar en docker
+
+Para correr el proyecto se debe generar el contenedor docker.
+Seguir estos pasos:
+Nota: la base de datos se rellena automaticamente con los datos de data.sql
+
+1. Modificar el docker-compose.yml de acuerdo a sus requisitos
+2. Generar jar con el comando `mvn clean package` o `mvn clean install`
+3. Ejecutar el comando `docker-compose up -d`
+4. Insertar los querys de data.sql en la base de datos para tener datos de prueba
\ No newline at end of file

backend/docker-compose.yml

+version:  "3.8"
+
+services:
+  mysqldb:
+    container_name: mysqldb
+    image: mysql:latest
+    environment:
+        MYSQL_ROOT_PASSWORD: admin
+        MYSQL_DATABASE: bytedb
+        MYSQL_USER: admin
+        MYSQL_PASSWORD: admin
+    ports:
+        - 3333:3306
+    volumes:
+      - ./src/main/resources/:/docker-entrypoint-initdb.d
+    networks:
+        - springboot-mysql-net
+
+  app:
+    container_name: app
+    image: app
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+        - 8080:8080
+    depends_on:
+        - mysqldb
+    environment:
+        MYSQL_HOST: mysqldb
+        MYSQL_PORT: 3306
+        MYSQL_USER: admin
+        MYSQL_PASSWORD: admin
+    networks:
+        - springboot-mysql-net
+    restart: on-failure
+
+networks:
+  springboot-mysql-net:

backend/mvnw

+#!/bin/sh
+# ----------------------------------------------------------------------------
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#    https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+# ----------------------------------------------------------------------------
+
+# ----------------------------------------------------------------------------
+# Maven Start Up Batch script
+#
+# Required ENV vars:
+# ------------------
+#   JAVA_HOME - location of a JDK home dir
+#
+# Optional ENV vars
+# -----------------
+#   M2_HOME - location of maven2's installed home dir
+#   MAVEN_OPTS - parameters passed to the Java VM when running Maven
+#     e.g. to debug Maven itself, use
+#       set MAVEN_OPTS=-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=y,address=8000
+#   MAVEN_SKIP_RC - flag to disable loading of mavenrc files
+# ----------------------------------------------------------------------------
+
+if [ -z "$MAVEN_SKIP_RC" ] ; then
+
+  if [ -f /usr/local/etc/mavenrc ] ; then
+    . /usr/local/etc/mavenrc
+  fi
+
+  if [ -f /etc/mavenrc ] ; then
+    . /etc/mavenrc
+  fi
+
+  if [ -f "$HOME/.mavenrc" ] ; then
+    . "$HOME/.mavenrc"
+  fi
+
+fi
+
+# OS specific support.  $var _must_ be set to either true or false.
+cygwin=false;
+darwin=false;
+mingw=false
+case "`uname`" in
+  CYGWIN*) cygwin=true ;;
+  MINGW*) mingw=true;;
+  Darwin*) darwin=true
+    # Use /usr/libexec/java_home if available, otherwise fall back to /Library/Java/Home
+    # See https://developer.apple.com/library/mac/qa/qa1170/_index.html
+    if [ -z "$JAVA_HOME" ]; then
+      if [ -x "/usr/libexec/java_home" ]; then
+        export JAVA_HOME="`/usr/libexec/java_home`"
+      else
+        export JAVA_HOME="/Library/Java/Home"
+      fi
+    fi
+    ;;
+esac
+
+if [ -z "$JAVA_HOME" ] ; then
+  if [ -r /etc/gentoo-release ] ; then
+    JAVA_HOME=`java-config --jre-home`
+  fi
+fi
+
+if [ -z "$M2_HOME" ] ; then
+  ## resolve links - $0 may be a link to maven's home
+  PRG="$0"
+
+  # need this for relative symlinks
+  while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+      PRG="$link"
+    else
+      PRG="`dirname "$PRG"`/$link"
+    fi
+  done
+
+  saveddir=`pwd`
+
+  M2_HOME=`dirname "$PRG"`/..
+
+  # make it fully qualified
+  M2_HOME=`cd "$M2_HOME" && pwd`
+
+  cd "$saveddir"
+  # echo Using m2 at $M2_HOME
+fi
+
+# For Cygwin, ensure paths are in UNIX format before anything is touched
+if $cygwin ; then
+  [ -n "$M2_HOME" ] &&
+    M2_HOME=`cygpath --unix "$M2_HOME"`
+  [ -n "$JAVA_HOME" ] &&
+    JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
+  [ -n "$CLASSPATH" ] &&
+    CLASSPATH=`cygpath --path --unix "$CLASSPATH"`
+fi
+
+# For Mingw, ensure paths are in UNIX format before anything is touched
+if $mingw ; then
+  [ -n "$M2_HOME" ] &&
+    M2_HOME="`(cd "$M2_HOME"; pwd)`"
+  [ -n "$JAVA_HOME" ] &&
+    JAVA_HOME="`(cd "$JAVA_HOME"; pwd)`"
+fi
+
+if [ -z "$JAVA_HOME" ]; then
+  javaExecutable="`which javac`"
+  if [ -n "$javaExecutable" ] && ! [ "`expr \"$javaExecutable\" : '\([^ ]*\)'`" = "no" ]; then
+    # readlink(1) is not available as standard on Solaris 10.
+    readLink=`which readlink`
+    if [ ! `expr "$readLink" : '\([^ ]*\)'` = "no" ]; then
+      if $darwin ; then
+        javaHome="`dirname \"$javaExecutable\"`"
+        javaExecutable="`cd \"$javaHome\" && pwd -P`/javac"
+      else
+        javaExecutable="`readlink -f \"$javaExecutable\"`"
+      fi
+      javaHome="`dirname \"$javaExecutable\"`"
+      javaHome=`expr "$javaHome" : '\(.*\)/bin'`
+      JAVA_HOME="$javaHome"
+      export JAVA_HOME
+    fi
+  fi
+fi
+
+if [ -z "$JAVACMD" ] ; then
+  if [ -n "$JAVA_HOME"  ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+      # IBM's JDK on AIX uses strange locations for the executables
+      JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+      JAVACMD="$JAVA_HOME/bin/java"
+    fi
+  else
+    JAVACMD="`\\unset -f command; \\command -v java`"
+  fi
+fi
+
+if [ ! -x "$JAVACMD" ] ; then
+  echo "Error: JAVA_HOME is not defined correctly." >&2
+  echo "  We cannot execute $JAVACMD" >&2
+  exit 1
+fi
+
+if [ -z "$JAVA_HOME" ] ; then
+  echo "Warning: JAVA_HOME environment variable is not set."
+fi
+
+CLASSWORLDS_LAUNCHER=org.codehaus.plexus.classworlds.launcher.Launcher
+
+# traverses directory structure from process work directory to filesystem root
+# first directory with .mvn subdirectory is considered project base directory
+find_maven_basedir() {
+
+  if [ -z "$1" ]
+  then
+    echo "Path not specified to find_maven_basedir"
+    return 1
+  fi
+
+  basedir="$1"
+  wdir="$1"
+  while [ "$wdir" != '/' ] ; do
+    if [ -d "$wdir"/.mvn ] ; then
+      basedir=$wdir
+      break
+    fi
+    # workaround for JBEAP-8937 (on Solaris 10/Sparc)
+    if [ -d "${wdir}" ]; then
+      wdir=`cd "$wdir/.."; pwd`
+    fi
+    # end of workaround
+  done
+  echo "${basedir}"
+}
+
+# concatenates all lines of a file
+concat_lines() {
+  if [ -f "$1" ]; then
+    echo "$(tr -s '\n' ' ' < "$1")"
+  fi
+}
+
+BASE_DIR=`find_maven_basedir "$(pwd)"`
+if [ -z "$BASE_DIR" ]; then
+  exit 1;
+fi
+
+##########################################################################################
+# Extension to allow automatically downloading the maven-wrapper.jar from Maven-central
+# This allows using the maven wrapper in projects that prohibit checking in binary data.
+##########################################################################################
+if [ -r "$BASE_DIR/.mvn/wrapper/maven-wrapper.jar" ]; then
+    if [ "$MVNW_VERBOSE" = true ]; then
+      echo "Found .mvn/wrapper/maven-wrapper.jar"
+    fi
+else
+    if [ "$MVNW_VERBOSE" = true ]; then
+      echo "Couldn't find .mvn/wrapper/maven-wrapper.jar, downloading it ..."
+    fi
+    if [ -n "$MVNW_REPOURL" ]; then
+      jarUrl="$MVNW_REPOURL/org/apache/maven/wrapper/maven-wrapper/3.1.0/maven-wrapper-3.1.0.jar"
+    else
+      jarUrl="https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.1.0/maven-wrapper-3.1.0.jar"
+    fi
+    while IFS="=" read key value; do
+      case "$key" in (wrapperUrl) jarUrl="$value"; break ;;
+      esac
+    done < "$BASE_DIR/.mvn/wrapper/maven-wrapper.properties"
+    if [ "$MVNW_VERBOSE" = true ]; then
+      echo "Downloading from: $jarUrl"
+    fi
+    wrapperJarPath="$BASE_DIR/.mvn/wrapper/maven-wrapper.jar"
+    if $cygwin; then
+      wrapperJarPath=`cygpath --path --windows "$wrapperJarPath"`
+    fi
+
+    if command -v wget > /dev/null; then
+        if [ "$MVNW_VERBOSE" = true ]; then
+          echo "Found wget ... using wget"
+        fi
+        if [ -z "$MVNW_USERNAME" ] || [ -z "$MVNW_PASSWORD" ]; then
+            wget "$jarUrl" -O "$wrapperJarPath" || rm -f "$wrapperJarPath"
+        else
+            wget --http-user=$MVNW_USERNAME --http-password=$MVNW_PASSWORD "$jarUrl" -O "$wrapperJarPath" || rm -f "$wrapperJarPath"
+        fi
+    elif command -v curl > /dev/null; then
+        if [ "$MVNW_VERBOSE" = true ]; then
+          echo "Found curl ... using curl"
+        fi
+        if [ -z "$MVNW_USERNAME" ] || [ -z "$MVNW_PASSWORD" ]; then
+            curl -o "$wrapperJarPath" "$jarUrl" -f
+        else
+            curl --user $MVNW_USERNAME:$MVNW_PASSWORD -o "$wrapperJarPath" "$jarUrl" -f
+        fi
+
+    else
+        if [ "$MVNW_VERBOSE" = true ]; then
+          echo "Falling back to using Java to download"
+        fi
+        javaClass="$BASE_DIR/.mvn/wrapper/MavenWrapperDownloader.java"
+        # For Cygwin, switch paths to Windows format before running javac
+        if $cygwin; then
+          javaClass=`cygpath --path --windows "$javaClass"`
+        fi
+        if [ -e "$javaClass" ]; then
+            if [ ! -e "$BASE_DIR/.mvn/wrapper/MavenWrapperDownloader.class" ]; then
+                if [ "$MVNW_VERBOSE" = true ]; then
+                  echo " - Compiling MavenWrapperDownloader.java ..."
+                fi
+                # Compiling the Java class
+                ("$JAVA_HOME/bin/javac" "$javaClass")
+            fi
+            if [ -e "$BASE_DIR/.mvn/wrapper/MavenWrapperDownloader.class" ]; then
+                # Running the downloader
+                if [ "$MVNW_VERBOSE" = true ]; then
+                  echo " - Running MavenWrapperDownloader.java ..."
+                fi
+                ("$JAVA_HOME/bin/java" -cp .mvn/wrapper MavenWrapperDownloader "$MAVEN_PROJECTBASEDIR")
+            fi
+        fi
+    fi
+fi
+##########################################################################################
+# End of extension
+##########################################################################################
+
+export MAVEN_PROJECTBASEDIR=${MAVEN_BASEDIR:-"$BASE_DIR"}
+if [ "$MVNW_VERBOSE" = true ]; then
+  echo $MAVEN_PROJECTBASEDIR
+fi
+MAVEN_OPTS="$(concat_lines "$MAVEN_PROJECTBASEDIR/.mvn/jvm.config") $MAVEN_OPTS"
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin; then
+  [ -n "$M2_HOME" ] &&
+    M2_HOME=`cygpath --path --windows "$M2_HOME"`
+  [ -n "$JAVA_HOME" ] &&
+    JAVA_HOME=`cygpath --path --windows "$JAVA_HOME"`
+  [ -n "$CLASSPATH" ] &&
+    CLASSPATH=`cygpath --path --windows "$CLASSPATH"`
+  [ -n "$MAVEN_PROJECTBASEDIR" ] &&
+    MAVEN_PROJECTBASEDIR=`cygpath --path --windows "$MAVEN_PROJECTBASEDIR"`
+fi
+
+# Provide a "standardized" way to retrieve the CLI args that will
+# work with both Windows and non-Windows executions.
+MAVEN_CMD_LINE_ARGS="$MAVEN_CONFIG $@"
+export MAVEN_CMD_LINE_ARGS
+
+WRAPPER_LAUNCHER=org.apache.maven.wrapper.MavenWrapperMain
+
+exec "$JAVACMD" \
+  $MAVEN_OPTS \
+  $MAVEN_DEBUG_OPTS \
+  -classpath "$MAVEN_PROJECTBASEDIR/.mvn/wrapper/maven-wrapper.jar" \
+  "-Dmaven.home=${M2_HOME}" \
+  "-Dmaven.multiModuleProjectDirectory=${MAVEN_PROJECTBASEDIR}" \
+  ${WRAPPER_LAUNCHER} $MAVEN_CONFIG "$@"

backend/mvnw.cmd

+@REM ----------------------------------------------------------------------------
+@REM Licensed to the Apache Software Foundation (ASF) under one
+@REM or more contributor license agreements.  See the NOTICE file
+@REM distributed with this work for additional information
+@REM regarding copyright ownership.  The ASF licenses this file
+@REM to you under the Apache License, Version 2.0 (the
+@REM "License"); you may not use this file except in compliance
+@REM with the License.  You may obtain a copy of the License at
+@REM
+@REM    https://www.apache.org/licenses/LICENSE-2.0
+@REM
+@REM Unless required by applicable law or agreed to in writing,
+@REM software distributed under the License is distributed on an
+@REM "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+@REM KIND, either express or implied.  See the License for the
+@REM specific language governing permissions and limitations
+@REM under the License.
+@REM ----------------------------------------------------------------------------
+
+@REM ----------------------------------------------------------------------------
+@REM Maven Start Up Batch script
+@REM
+@REM Required ENV vars:
+@REM JAVA_HOME - location of a JDK home dir
+@REM
+@REM Optional ENV vars
+@REM M2_HOME - location of maven2's installed home dir
+@REM MAVEN_BATCH_ECHO - set to 'on' to enable the echoing of the batch commands
+@REM MAVEN_BATCH_PAUSE - set to 'on' to wait for a keystroke before ending
+@REM MAVEN_OPTS - parameters passed to the Java VM when running Maven
+@REM     e.g. to debug Maven itself, use
+@REM set MAVEN_OPTS=-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=y,address=8000
+@REM MAVEN_SKIP_RC - flag to disable loading of mavenrc files
+@REM ----------------------------------------------------------------------------
+
+@REM Begin all REM lines with '@' in case MAVEN_BATCH_ECHO is 'on'
+@echo off
+@REM set title of command window
+title %0
+@REM enable echoing by setting MAVEN_BATCH_ECHO to 'on'
+@if "%MAVEN_BATCH_ECHO%" == "on"  echo %MAVEN_BATCH_ECHO%
+
+@REM set %HOME% to equivalent of $HOME
+if "%HOME%" == "" (set "HOME=%HOMEDRIVE%%HOMEPATH%")
+
+@REM Execute a user defined script before this one
+if not "%MAVEN_SKIP_RC%" == "" goto skipRcPre
+@REM check for pre script, once with legacy .bat ending and once with .cmd ending
+if exist "%USERPROFILE%\mavenrc_pre.bat" call "%USERPROFILE%\mavenrc_pre.bat" %*
+if exist "%USERPROFILE%\mavenrc_pre.cmd" call "%USERPROFILE%\mavenrc_pre.cmd" %*
+:skipRcPre
+
+@setlocal
+
+set ERROR_CODE=0
+
+@REM To isolate internal variables from possible post scripts, we use another setlocal
+@setlocal
+
+@REM ==== START VALIDATION ====
+if not "%JAVA_HOME%" == "" goto OkJHome
+
+echo.
+echo Error: JAVA_HOME not found in your environment. >&2
+echo Please set the JAVA_HOME variable in your environment to match the >&2
+echo location of your Java installation. >&2
+echo.
+goto error
+
+:OkJHome
+if exist "%JAVA_HOME%\bin\java.exe" goto init
+
+echo.
+echo Error: JAVA_HOME is set to an invalid directory. >&2
+echo JAVA_HOME = "%JAVA_HOME%" >&2
+echo Please set the JAVA_HOME variable in your environment to match the >&2
+echo location of your Java installation. >&2
+echo.
+goto error
+
+@REM ==== END VALIDATION ====
+
+:init
+
+@REM Find the project base dir, i.e. the directory that contains the folder ".mvn".
+@REM Fallback to current working directory if not found.
+
+set MAVEN_PROJECTBASEDIR=%MAVEN_BASEDIR%
+IF NOT "%MAVEN_PROJECTBASEDIR%"=="" goto endDetectBaseDir
+
+set EXEC_DIR=%CD%
+set WDIR=%EXEC_DIR%
+:findBaseDir
+IF EXIST "%WDIR%"\.mvn goto baseDirFound
+cd ..
+IF "%WDIR%"=="%CD%" goto baseDirNotFound
+set WDIR=%CD%
+goto findBaseDir
+
+:baseDirFound
+set MAVEN_PROJECTBASEDIR=%WDIR%
+cd "%EXEC_DIR%"
+goto endDetectBaseDir
+
+:baseDirNotFound
+set MAVEN_PROJECTBASEDIR=%EXEC_DIR%
+cd "%EXEC_DIR%"
+
+:endDetectBaseDir
+
+IF NOT EXIST "%MAVEN_PROJECTBASEDIR%\.mvn\jvm.config" goto endReadAdditionalConfig
+
+@setlocal EnableExtensions EnableDelayedExpansion
+for /F "usebackq delims=" %%a in ("%MAVEN_PROJECTBASEDIR%\.mvn\jvm.config") do set JVM_CONFIG_MAVEN_PROPS=!JVM_CONFIG_MAVEN_PROPS! %%a
+@endlocal & set JVM_CONFIG_MAVEN_PROPS=%JVM_CONFIG_MAVEN_PROPS%
+
+:endReadAdditionalConfig
+
+SET MAVEN_JAVA_EXE="%JAVA_HOME%\bin\java.exe"
+set WRAPPER_JAR="%MAVEN_PROJECTBASEDIR%\.mvn\wrapper\maven-wrapper.jar"
+set WRAPPER_LAUNCHER=org.apache.maven.wrapper.MavenWrapperMain
+
+set DOWNLOAD_URL="https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.1.0/maven-wrapper-3.1.0.jar"
+
+FOR /F "usebackq tokens=1,2 delims==" %%A IN ("%MAVEN_PROJECTBASEDIR%\.mvn\wrapper\maven-wrapper.properties") DO (
+    IF "%%A"=="wrapperUrl" SET DOWNLOAD_URL=%%B
+)
+
+@REM Extension to allow automatically downloading the maven-wrapper.jar from Maven-central
+@REM This allows using the maven wrapper in projects that prohibit checking in binary data.
+if exist %WRAPPER_JAR% (
+    if "%MVNW_VERBOSE%" == "true" (
+        echo Found %WRAPPER_JAR%
+    )
+) else (
+    if not "%MVNW_REPOURL%" == "" (
+        SET DOWNLOAD_URL="%MVNW_REPOURL%/org/apache/maven/wrapper/maven-wrapper/3.1.0/maven-wrapper-3.1.0.jar"
+    )
+    if "%MVNW_VERBOSE%" == "true" (
+        echo Couldn't find %WRAPPER_JAR%, downloading it ...
+        echo Downloading from: %DOWNLOAD_URL%
+    )
+
+    powershell -Command "&{"^
+		"$webclient = new-object System.Net.WebClient;"^
+		"if (-not ([string]::IsNullOrEmpty('%MVNW_USERNAME%') -and [string]::IsNullOrEmpty('%MVNW_PASSWORD%'))) {"^
+		"$webclient.Credentials = new-object System.Net.NetworkCredential('%MVNW_USERNAME%', '%MVNW_PASSWORD%');"^
+		"}"^
+		"[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12; $webclient.DownloadFile('%DOWNLOAD_URL%', '%WRAPPER_JAR%')"^
+		"}"
+    if "%MVNW_VERBOSE%" == "true" (
+        echo Finished downloading %WRAPPER_JAR%
+    )
+)
+@REM End of extension
+
+@REM Provide a "standardized" way to retrieve the CLI args that will
+@REM work with both Windows and non-Windows executions.
+set MAVEN_CMD_LINE_ARGS=%*
+
+%MAVEN_JAVA_EXE% ^
+  %JVM_CONFIG_MAVEN_PROPS% ^
+  %MAVEN_OPTS% ^
+  %MAVEN_DEBUG_OPTS% ^
+  -classpath %WRAPPER_JAR% ^
+  "-Dmaven.multiModuleProjectDirectory=%MAVEN_PROJECTBASEDIR%" ^
+  %WRAPPER_LAUNCHER% %MAVEN_CONFIG% %*
+if ERRORLEVEL 1 goto error
+goto end
+
+:error
+set ERROR_CODE=1
+
+:end
+@endlocal & set ERROR_CODE=%ERROR_CODE%
+
+if not "%MAVEN_SKIP_RC%"=="" goto skipRcPost
+@REM check for post script, once with legacy .bat ending and once with .cmd ending
+if exist "%USERPROFILE%\mavenrc_post.bat" call "%USERPROFILE%\mavenrc_post.bat"
+if exist "%USERPROFILE%\mavenrc_post.cmd" call "%USERPROFILE%\mavenrc_post.cmd"
+:skipRcPost
+
+@REM pause the script if MAVEN_BATCH_PAUSE is set to 'on'
+if "%MAVEN_BATCH_PAUSE%"=="on" pause
+
+if "%MAVEN_TERMINATE_CMD%"=="on" exit %ERROR_CODE%
+
+cmd /C exit /B %ERROR_CODE%

backend/pom.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>3.0.6</version>
+        <relativePath/> <!-- lookup parent from repository -->
+    </parent>
+    <groupId>com.app.backend</groupId>
+    <artifactId>backend</artifactId>
+    <version>0.0.1-SNAPSHOT</version>
+    <name>backend</name>
+    <description>backend</description>
+    <properties>
+        <java.version>17</java.version>
+    </properties>
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-jpa</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-mail</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.mysql</groupId>
+            <artifactId>mysql-connector-j</artifactId>
+            <scope>runtime</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.projectlombok</groupId>
+            <artifactId>lombok</artifactId>
+            <optional>true</optional>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.modelmapper</groupId>
+            <artifactId>modelmapper</artifactId>
+            <version>3.0.0</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-validation</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-actuator</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-security</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>io.jsonwebtoken</groupId>
+            <artifactId>jjwt-api</artifactId>
+            <version>0.11.5</version>
+        </dependency>
+        <dependency>
+            <groupId>io.jsonwebtoken</groupId>
+            <artifactId>jjwt-impl</artifactId>
+            <version>0.11.5</version>
+        </dependency>
+        <dependency>
+            <groupId>io.jsonwebtoken</groupId>
+            <artifactId>jjwt-jackson</artifactId>
+            <version>0.11.5</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.security</groupId>
+            <artifactId>spring-security-test</artifactId>
+            <version>6.0.0</version>
+            <scope>test</scope>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <configuration>
+                    <excludes>
+                        <exclude>
+                            <groupId>org.projectlombok</groupId>
+                            <artifactId>lombok</artifactId>
+                        </exclude>
+                    </excludes>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>

backend/src/main/java/com/app/backend/BackendApplication.java

+package com.app.backend;
+
+import org.modelmapper.ModelMapper;
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.context.annotation.Bean;
+
+@SpringBootApplication
+public class BackendApplication {
+
+    @Bean
+    public ModelMapper modelMapper() {
+        return new ModelMapper();
+    }
+
+    public static void main(String[] args) {
+        SpringApplication.run(BackendApplication.class, args);
+    }
+}

backend/src/main/java/com/app/backend/config/ApplicationConfig.java

+package com.app.backend.config;
+
+import com.app.backend.repository.UserRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.authentication.AuthenticationProvider;
+import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
+import org.springframework.security.config.annotation.authentication.configuration.AuthenticationConfiguration;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+import org.springframework.security.crypto.password.PasswordEncoder;
+
+@Configuration
+@RequiredArgsConstructor
+public class ApplicationConfig {
+
+  private final UserRepository repository;
+
+  @Bean
+  public UserDetailsService userDetailsService() {
+    return username -> repository.findByEmail(username)
+        .orElseThrow(() -> new UsernameNotFoundException("User not found"));
+  }
+
+  @Bean
+  public AuthenticationProvider authenticationProvider() {
+    DaoAuthenticationProvider authProvider = new DaoAuthenticationProvider();
+    authProvider.setUserDetailsService(userDetailsService());
+    authProvider.setPasswordEncoder(passwordEncoder());
+    return authProvider;
+  }
+
+  @Bean
+  public AuthenticationManager authenticationManager(AuthenticationConfiguration config) throws Exception {
+    return config.getAuthenticationManager();
+  }
+
+  @Bean
+  public PasswordEncoder passwordEncoder() {
+    return new BCryptPasswordEncoder();
+  }
+
+}

backend/src/main/java/com/app/backend/config/JwtAuthenticationFilter.java

+package com.app.backend.config;
+
+import com.app.backend.repository.TokenRepository;
+import jakarta.servlet.FilterChain;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.RequiredArgsConstructor;
+import org.springframework.lang.NonNull;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.security.web.authentication.WebAuthenticationDetailsSource;
+import org.springframework.stereotype.Component;
+import org.springframework.web.filter.OncePerRequestFilter;
+
+import java.io.IOException;
+
+@Component
+@RequiredArgsConstructor
+public class JwtAuthenticationFilter extends OncePerRequestFilter {
+
+  private final JwtService jwtService;
+  private final UserDetailsService userDetailsService;
+  private final TokenRepository tokenRepository;
+
+  @Override
+  protected void doFilterInternal(
+      @NonNull HttpServletRequest request,
+      @NonNull HttpServletResponse response,
+      @NonNull FilterChain filterChain
+  ) throws ServletException, IOException {
+    final String authHeader = request.getHeader("Authorization");
+    final String jwt;
+    final String userEmail;
+    if (authHeader == null ||!authHeader.startsWith("Bearer ")) {
+      filterChain.doFilter(request, response);
+      return;
+    }
+    jwt = authHeader.substring(7);
+    userEmail = jwtService.extractUsername(jwt);
+    if (userEmail != null && SecurityContextHolder.getContext().getAuthentication() == null) {
+      UserDetails userDetails = this.userDetailsService.loadUserByUsername(userEmail);
+      var isTokenValid = tokenRepository.findByToken(jwt)
+          .map(t -> !t.isExpired() && !t.isRevoked())
+          .orElse(false);
+      if (jwtService.isTokenValid(jwt, userDetails) && isTokenValid) {
+        UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(
+            userDetails,
+            null,
+            userDetails.getAuthorities()
+        );
+        authToken.setDetails(
+            new WebAuthenticationDetailsSource().buildDetails(request)
+        );
+        SecurityContextHolder.getContext().setAuthentication(authToken);
+      }
+    }
+    filterChain.doFilter(request, response);
+  }
+}

backend/src/main/java/com/app/backend/config/JwtService.java

+package com.app.backend.config;
+
+import io.jsonwebtoken.Claims;
+import io.jsonwebtoken.Jwts;
+import io.jsonwebtoken.SignatureAlgorithm;
+import io.jsonwebtoken.io.Decoders;
+import io.jsonwebtoken.security.Keys;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.stereotype.Service;
+
+import java.security.Key;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.function.Function;
+
+@Service
+public class JwtService {
+
+  private static final String SECRET_KEY = "b65e96650acf0508cae56b79a796140b6ac1b80874f7c2d635b131e2ad82a55d";
+
+  public String extractUsername(String token) {
+    return extractClaim(token, Claims::getSubject);
+  }
+
+  public <T> T extractClaim(String token, Function<Claims, T> claimsResolver) {
+    final Claims claims = extractAllClaims(token);
+    return claimsResolver.apply(claims);
+  }
+
+  public String generateToken(UserDetails userDetails) {
+    return generateToken(new HashMap<>(), userDetails);
+  }
+
+  public String generateToken(
+      Map<String, Object> extraClaims,
+      UserDetails userDetails
+  ) {
+    return Jwts
+        .builder()
+        .setClaims(extraClaims)
+        .setSubject(userDetails.getUsername())
+        .setIssuedAt(new Date(System.currentTimeMillis()))
+        .setExpiration(new Date(System.currentTimeMillis() + 10000 * 60 * 24))
+        .signWith(getSignInKey(), SignatureAlgorithm.HS256)
+        .compact();
+  }
+
+  public boolean isTokenValid(String token, UserDetails userDetails) {
+    final String username = extractUsername(token);
+    return (username.equals(userDetails.getUsername())) && !isTokenExpired(token);
+  }
+
+  private boolean isTokenExpired(String token) {
+    return extractExpiration(token).before(new Date());
+  }
+
+  private Date extractExpiration(String token) {
+    return extractClaim(token, Claims::getExpiration);
+  }
+
+  private Claims extractAllClaims(String token) {
+    return Jwts
+        .parserBuilder()
+        .setSigningKey(getSignInKey())
+        .build()
+        .parseClaimsJws(token)
+        .getBody();
+  }
+
+  private Key getSignInKey() {
+    byte[] keyBytes = Decoders.BASE64.decode(SECRET_KEY);
+    return Keys.hmacShaKeyFor(keyBytes);
+  }
+}

backend/src/main/java/com/app/backend/config/LogoutService.java

+package com.app.backend.config;
+
+import com.app.backend.repository.TokenRepository;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.web.authentication.logout.LogoutHandler;
+import org.springframework.stereotype.Service;
+
+@Service
+@RequiredArgsConstructor
+public class LogoutService implements LogoutHandler {
+
+  private final TokenRepository tokenRepository;
+
+  @Override
+  public void logout(
+      HttpServletRequest request,
+      HttpServletResponse response,
+      Authentication authentication
+  ) {
+    final String authHeader = request.getHeader("Authorization");
+    final String jwt;
+    if (authHeader == null ||!authHeader.startsWith("Bearer ")) {
+      return;
+    }
+    jwt = authHeader.substring(7);
+    var storedToken = tokenRepository.findByToken(jwt)
+        .orElse(null);
+    if (storedToken != null) {
+      storedToken.setExpired(true);
+      storedToken.setRevoked(true);
+      tokenRepository.save(storedToken);
+      SecurityContextHolder.clearContext();
+    }
+  }
+}

backend/src/main/java/com/app/backend/config/SecurityConfig.java

+package com.app.backend.config;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.security.authentication.AuthenticationProvider;
+import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.http.SessionCreationPolicy;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
+import org.springframework.security.web.authentication.logout.LogoutHandler;
+
+@Configuration
+@EnableWebSecurity
+@EnableMethodSecurity
+@RequiredArgsConstructor
+public class SecurityConfig {
+
+    private final JwtAuthenticationFilter jwtAuthFilter;
+    private final AuthenticationProvider authenticationProvider;
+    private final LogoutHandler logoutHandler;
+
+    @Bean
+    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
+        http
+                .csrf()
+                .disable()
+                .authorizeHttpRequests()
+                .requestMatchers("/api/v1/auth/**")
+                .permitAll()
+                .requestMatchers("/actuator/**")
+                .permitAll()
+                .requestMatchers("/api/v1/**")
+                .permitAll()
+                .anyRequest()
+                .authenticated()
+                .and()
+                .sessionManagement()
+                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
+                .and()
+                .authenticationProvider(authenticationProvider)
+                .addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class)
+                .logout()
+                .logoutUrl("/auth/logout")
+                .addLogoutHandler(logoutHandler)
+                .logoutSuccessHandler((request, response, authentication) -> SecurityContextHolder.clearContext())
+        ;
+
+        return http.build();
+    }
+}

backend/src/main/java/com/app/backend/controller/AereopuertoController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.AereopuertoDto;
+import com.app.backend.service.AereopuertoService;
+import jakarta.validation.Valid;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1/aereopuertos")
+public class AereopuertoController {
+
+    private final AereopuertoService aereopuertoService;
+
+    public AereopuertoController(AereopuertoService aereopuertoService) {
+        this.aereopuertoService = aereopuertoService;
+    }
+
+    @GetMapping("/page")
+    public ResponseEntity<Page<AereopuertoDto>> getAllAereopuertos(Pageable pageable) {
+        Page<AereopuertoDto> aereopuertoList = aereopuertoService.getAereopuertos(pageable);
+        return new ResponseEntity<>(aereopuertoList, HttpStatus.OK);
+    }
+
+    @GetMapping("/{id}")
+    public ResponseEntity<AereopuertoDto> getAereopuertoById(@PathVariable Long id) {
+        AereopuertoDto aereopuerto = aereopuertoService.getAereopuertoById(id);
+        return new ResponseEntity<>(aereopuerto, HttpStatus.OK);
+    }
+
+    @GetMapping
+    public ResponseEntity<List<AereopuertoDto>> getAereopuertos() {
+        List<AereopuertoDto> aereopuertos = aereopuertoService.getAereopuertos();
+        return new ResponseEntity<>(aereopuertos, HttpStatus.OK);
+    }
+
+    @PostMapping
+    public ResponseEntity<AereopuertoDto> createAereopuerto(@RequestBody @Valid AereopuertoDto aereopuertoDto) {
+        AereopuertoDto aereopuerto = aereopuertoService.createAereopuerto(aereopuertoDto);
+        return new ResponseEntity<>(aereopuerto, HttpStatus.CREATED);
+    }
+
+    @PutMapping("/{id}")
+    public ResponseEntity<AereopuertoDto> updateAereopuerto(@PathVariable Long id, @RequestBody @Valid AereopuertoDto aereopuertoDto) {
+        AereopuertoDto aereopuerto = aereopuertoService.updateAereopuerto(id, aereopuertoDto);
+        return new ResponseEntity<>(aereopuerto, HttpStatus.OK);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<AereopuertoDto> deleteAereopuerto(@PathVariable Long id) {
+        AereopuertoDto aereopuerto = aereopuertoService.deleteAereopuerto(id);
+        return new ResponseEntity<>(aereopuerto, HttpStatus.OK);
+    }
+}

backend/src/main/java/com/app/backend/controller/AgenteController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.AgenteDto;
+import com.app.backend.service.AgenteService;
+import jakarta.validation.Valid;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1/agentes")
+public class AgenteController {
+
+    private final AgenteService agenteService;
+
+    public AgenteController(AgenteService agenteService) {
+        this.agenteService = agenteService;
+    }
+
+    @GetMapping("/page")
+    public ResponseEntity<Page<AgenteDto>> getAllAgentes(Pageable pageable) {
+        Page<AgenteDto> agenteList = agenteService.getAllAgentes(pageable);
+        return new ResponseEntity<>(agenteList, HttpStatus.OK);
+    }
+
+    @GetMapping("/{id}")
+    public ResponseEntity<AgenteDto> getAgenteById(@PathVariable Long id) {
+        AgenteDto agente = agenteService.getAgenteById(id);
+        return new ResponseEntity<>(agente, HttpStatus.OK);
+    }
+
+    @PostMapping
+    public ResponseEntity<AgenteDto> createAgente(@RequestBody @Valid AgenteDto agenteDto) {
+        AgenteDto agente = agenteService.createAgente(agenteDto);
+        return new ResponseEntity<>(agente, HttpStatus.CREATED);
+    }
+
+    @PutMapping("/{id}")
+    public ResponseEntity<AgenteDto> updateAgente(@PathVariable Long id, @RequestBody @Valid AgenteDto agenteDto) {
+        AgenteDto agente = agenteService.updateAgente(id, agenteDto);
+        return new ResponseEntity<>(agente, HttpStatus.OK);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<AgenteDto> deleteAgente(@PathVariable Long id) {
+        AgenteDto agente = agenteService.deleteAgente(id);
+        return new ResponseEntity<>(agente, HttpStatus.OK);
+    }
+}

backend/src/main/java/com/app/backend/controller/AuthenticationController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.UserDto;
+import com.app.backend.model.Role;
+import com.app.backend.model.auth.AuthenticationRequest;
+import com.app.backend.model.auth.AuthenticationResponse;
+import com.app.backend.service.impl.AuthenticationServiceImpl;
+import jakarta.validation.Valid;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1/auth")
+public class AuthenticationController {
+
+  private final AuthenticationServiceImpl service;
+
+  public AuthenticationController(AuthenticationServiceImpl service) {
+    this.service = service;
+  }
+
+  @PostMapping("/register")
+  public ResponseEntity<AuthenticationResponse> register(@RequestBody @Valid UserDto request) {
+    return ResponseEntity.ok(service.register(request, Role.ROLE_SUPERVISOR));
+  }
+
+  @PostMapping("/authenticate")
+  public ResponseEntity<AuthenticationResponse> authenticate(@RequestBody @Valid AuthenticationRequest request) {
+    return ResponseEntity.ok(service.authenticate(request));
+  }
+
+}

backend/src/main/java/com/app/backend/controller/CostoController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.CostoDto;
+import com.app.backend.dto.create.CreateCostoDto;
+import com.app.backend.service.CostoService;
+import jakarta.validation.Valid;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1/costos")
+public class CostoController {
+
+    private final CostoService costoService;
+
+    public CostoController(CostoService costoService) {
+        this.costoService = costoService;
+    }
+
+    @GetMapping("/page")
+    public ResponseEntity<List<CostoDto>> getAllCostos() {
+        List<CostoDto> costoList = costoService.getAllCostos();
+        return new ResponseEntity<>(costoList, HttpStatus.OK);
+    }
+
+    @GetMapping("/vuelo/{id}")
+    public ResponseEntity<List<CostoDto>> getAllCostos(@PathVariable Long id) {
+        List<CostoDto> costoList = costoService.getAllCostosByVueloId(id);
+        return new ResponseEntity<>(costoList, HttpStatus.OK);
+    }
+
+    @GetMapping("/{id}")
+    public ResponseEntity<CostoDto> getCostoById(@PathVariable Long id) {
+        CostoDto costo = costoService.getCostoById(id);
+        return new ResponseEntity<>(costo, HttpStatus.OK);
+    }
+
+    @PostMapping
+    public ResponseEntity<CostoDto> createCosto(@RequestBody @Valid CreateCostoDto costoDto) {
+        CostoDto costo = costoService.createCosto(costoDto);
+        return new ResponseEntity<>(costo, HttpStatus.CREATED);
+    }
+
+    @PutMapping("/{id}")
+    public ResponseEntity<CostoDto> updateCosto(@PathVariable Long id, @RequestBody @Valid CreateCostoDto costoDto) {
+        CostoDto costo = costoService.updateCosto(id, costoDto);
+        return new ResponseEntity<>(costo, HttpStatus.OK);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<CostoDto> deleteCosto(@PathVariable Long id) {
+        CostoDto costo = costoService.deleteCosto(id);
+        return new ResponseEntity<>(costo, HttpStatus.OK);
+    }
+}

backend/src/main/java/com/app/backend/controller/EscalaController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.EscalaDto;
+import com.app.backend.dto.create.CreateEscalaDto;
+import com.app.backend.service.EscalaService;
+import jakarta.validation.Valid;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1/escalas")
+public class EscalaController {
+
+    private final EscalaService escalaService;
+
+    public EscalaController(EscalaService service) {
+        this.escalaService = service;
+    }
+
+    @GetMapping
+    public ResponseEntity<List<EscalaDto>> getAllEscalas() {
+        List<EscalaDto> escalaList = escalaService.getAllEscalas();
+        return new ResponseEntity<>(escalaList, HttpStatus.OK);
+    }
+
+    @GetMapping("vuelo/{id}")
+    public ResponseEntity<List<EscalaDto>> getAllEscalasByVueloId(@PathVariable Long id) {
+        List<EscalaDto> escalaList =escalaService.getEscalasByVueloId(id);
+        return new ResponseEntity<>(escalaList, HttpStatus.OK);
+    }
+
+    @GetMapping("/{id}")
+    public ResponseEntity<EscalaDto> getEscalaById(@PathVariable Long id) {
+        EscalaDto escala = escalaService.getEscalaById(id);
+        return new ResponseEntity<>(escala, HttpStatus.OK);
+    }
+
+    @PostMapping
+    public ResponseEntity<EscalaDto> createEscala(@RequestBody @Valid CreateEscalaDto escalaDto) {
+        EscalaDto escala = escalaService.createEscala(escalaDto);
+        return new ResponseEntity<>(escala, HttpStatus.CREATED);
+    }
+
+    @PutMapping("/{id}")
+    public ResponseEntity<EscalaDto> updateEscala(@PathVariable Long id, @RequestBody @Valid CreateEscalaDto escalaDto) {
+        EscalaDto escala = escalaService.updateEscala(id, escalaDto);
+        return new ResponseEntity<>(escala, HttpStatus.OK);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<EscalaDto> deleteEscala(@PathVariable Long id) {
+        EscalaDto escala = escalaService.deleteEscala(id);
+        return new ResponseEntity<>(escala, HttpStatus.OK);
+    }
+}

backend/src/main/java/com/app/backend/controller/PagoController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.PagoDto;
+import com.app.backend.dto.create.CreatePagoDto;
+import com.app.backend.service.PagoService;
+import jakarta.validation.Valid;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1/pagos")
+public class PagoController {
+
+    private final PagoService pagoService;
+
+    public PagoController(PagoService pagoService) {
+        this.pagoService = pagoService;
+    }
+
+    @GetMapping
+    public ResponseEntity<List<PagoDto>> getAllPagos() {
+        List<PagoDto> pagoList = pagoService.getAllPagos();
+        return new ResponseEntity<>(pagoList, HttpStatus.OK);
+    }
+
+    @PostMapping
+    public ResponseEntity<PagoDto> createPago(@RequestBody @Valid CreatePagoDto pagoDto) {
+        PagoDto pago = pagoService.createPago(pagoDto);
+        return new ResponseEntity<>(pago, HttpStatus.CREATED);
+    }
+}

backend/src/main/java/com/app/backend/controller/PasajeroController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.PasajeroDto;
+import com.app.backend.service.PasajeroService;
+import jakarta.validation.Valid;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1/pasajeros")
+public class PasajeroController {
+
+    private final PasajeroService pasajeroService;
+
+    public PasajeroController(PasajeroService pasajeroService) {
+        this.pasajeroService = pasajeroService;
+    }
+
+    @GetMapping("/page")
+    public ResponseEntity<Page<PasajeroDto>> getAllPasajeros(Pageable pageable) {
+        Page<PasajeroDto> pasajeroList = pasajeroService.getAllPasajeros(pageable);
+        return new ResponseEntity<>(pasajeroList, HttpStatus.OK);
+    }
+
+    @GetMapping
+    public ResponseEntity<List<PasajeroDto>> getAllPasajeros() {
+        List<PasajeroDto> pasajeroList = pasajeroService.getAllPasajeros();
+        return new ResponseEntity<>(pasajeroList, HttpStatus.OK);
+    }
+
+    @GetMapping("/{id}")
+    public ResponseEntity<PasajeroDto> getPasajeroById(@PathVariable Long id) {
+        PasajeroDto pasajero = pasajeroService.getPasajeroById(id);
+        return new ResponseEntity<>(pasajero, HttpStatus.OK);
+    }
+
+    @PostMapping
+    public ResponseEntity<PasajeroDto> createPasajero(@RequestBody @Valid PasajeroDto pasajeroDto) {
+        PasajeroDto pasajero = pasajeroService.createPasajero(pasajeroDto);
+        return new ResponseEntity<>(pasajero, HttpStatus.CREATED);
+    }
+
+    @PutMapping("/{id}")
+    public ResponseEntity<PasajeroDto> updatePasajero(@PathVariable Long id, @RequestBody @Valid PasajeroDto pasajeroDto) {
+        PasajeroDto pasajero = pasajeroService.updatePasajero(id, pasajeroDto);
+        return new ResponseEntity<>(pasajero, HttpStatus.OK);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<PasajeroDto> deletePasajero(@PathVariable Long id) {
+        PasajeroDto pasajero = pasajeroService.deletePasajero(id);
+        return new ResponseEntity<>(pasajero, HttpStatus.OK);
+    }
+}

backend/src/main/java/com/app/backend/controller/ReservaController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.ReservaDto;
+import com.app.backend.dto.create.CreateReservaDto;
+import com.app.backend.service.ReservaService;
+import jakarta.validation.Valid;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1/reservas")
+public class ReservaController {
+
+    private final ReservaService reservaService;
+
+    public ReservaController(ReservaService reservaService) {
+        this.reservaService = reservaService;
+    }
+
+    @GetMapping("/page")
+    public ResponseEntity<Page<ReservaDto>> getAllReservas(Pageable pageable) {
+        Page<ReservaDto> reservaList = reservaService.getAllReservas(pageable);
+        return new ResponseEntity<>(reservaList, HttpStatus.OK);
+    }
+
+    @GetMapping("/email/{email}")
+    public ResponseEntity<List<ReservaDto>> getAllReservas(@PathVariable String email) {
+        List<ReservaDto> reservaList = reservaService.getAllReservasByEmail(email);
+        return new ResponseEntity<>(reservaList, HttpStatus.OK);
+    }
+
+    @GetMapping("/{id}")
+    public ResponseEntity<ReservaDto> getReservaById(@PathVariable Long id) {
+        ReservaDto reserva = reservaService.getReservaById(id);
+        return new ResponseEntity<>(reserva, HttpStatus.OK);
+    }
+
+    @PostMapping
+    public ResponseEntity<ReservaDto> createReserva(@RequestBody @Valid CreateReservaDto reservaDto) {
+        ReservaDto reserva = reservaService.createReserva(reservaDto);
+        return new ResponseEntity<>(reserva, HttpStatus.CREATED);
+    }
+
+    @PutMapping("/{id}")
+    public ResponseEntity<ReservaDto> updateReserva(@PathVariable Long id, @RequestBody @Valid CreateReservaDto reservaDto) {
+        ReservaDto reserva = reservaService.updateReserva(id, reservaDto);
+        return new ResponseEntity<>(reserva, HttpStatus.OK);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<ReservaDto> deleteReserva(@PathVariable Long id) {
+        ReservaDto reserva = reservaService.deleteReserva(id);
+        return new ResponseEntity<>(reserva, HttpStatus.OK);
+    }
+}

backend/src/main/java/com/app/backend/controller/VueloController.java

+package com.app.backend.controller;
+
+import com.app.backend.dto.VueloDto;
+import com.app.backend.dto.create.CreateVueloDto;
+import com.app.backend.model.Aereolinea;
+import com.app.backend.model.Avion;
+import com.app.backend.service.VueloService;
+import jakarta.validation.Valid;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+@RequestMapping("api/v1")
+public class VueloController {
+
+    private final VueloService vueloService;
+
+    public VueloController(VueloService vueloService) {
+        this.vueloService = vueloService;
+    }
+
+    @GetMapping("/vuelos/page")
+    public ResponseEntity<Page<VueloDto>> getAllVuelos(Pageable pageable) {
+        Page<VueloDto> vueloList = vueloService.getVuelos(pageable);
+        return new ResponseEntity<>(vueloList, HttpStatus.OK);
+    }
+
+    @GetMapping("/vuelos/{id}")
+    public ResponseEntity<VueloDto> getVueloById(@PathVariable Long id) {
+        VueloDto vuelo = vueloService.getVueloById(id);
+        return new ResponseEntity<>(vuelo, HttpStatus.OK);
+    }
+
+    @PostMapping("/vuelos")
+    public ResponseEntity<VueloDto> createVuelo(@RequestBody @Valid CreateVueloDto createVueloDto) {
+        VueloDto vuelo = vueloService.createVuelo(createVueloDto);
+        return new ResponseEntity<>(vuelo, HttpStatus.CREATED);
+    }
+
+    @PutMapping("/vuelos/{id}")
+    public ResponseEntity<VueloDto> updateVuelo(@PathVariable Long id, @RequestBody @Valid CreateVueloDto createVueloDto) {
+        VueloDto vuelo = vueloService.updateVuelo(id, createVueloDto);
+        return new ResponseEntity<>(vuelo, HttpStatus.OK);
+    }
+
+    @DeleteMapping("/vuelos/{id}")
+    public ResponseEntity<VueloDto> deleteVuelo(@PathVariable Long id) {
+        VueloDto vuelo = vueloService.deleteVuelo(id);
+        return new ResponseEntity<>(vuelo, HttpStatus.OK);
+    }
+
+    @GetMapping("/aviones")
+    public ResponseEntity<List<Avion>> getAllAviones() {
+        List<Avion> avionList = vueloService.getAviones();
+        return new ResponseEntity<>(avionList, HttpStatus.OK);
+    }
+
+    @GetMapping("/aereolineas")
+    public ResponseEntity<List<Aereolinea>> getAllAereolineas() {
+        List<Aereolinea> aereolineaList = vueloService.getAereolineas();
+        return new ResponseEntity<>(aereolineaList, HttpStatus.OK);
+    }
+}

backend/src/main/java/com/app/backend/dto/AereopuertoDto.java

+package com.app.backend.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class AereopuertoDto {
+
+    private Long airportId;
+
+    @NotBlank(message = "El nombre del aeropuerto es requerido")
+    private String airportName;
+
+    @NotBlank(message = "La ubicación del aeropuerto es requerida")
+    private String airportLocation;
+
+    @NotBlank(message = "Los detalles del aeropuerto son requeridos")
+    private String otherDetails;
+}

backend/src/main/java/com/app/backend/dto/AgenteDto.java

+package com.app.backend.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Pattern;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class AgenteDto {
+
+    private Long agentId;
+
+    @NotBlank(message = "Agent name is required")
+    @Pattern(regexp = "^[a-zA-Z ]*$", message = "Agent name must be alphabetic")
+    private String agentName;
+
+    @NotBlank(message = "Agent details are required")
+    private String agentDetails;
+}

backend/src/main/java/com/app/backend/dto/CostoDto.java

+package com.app.backend.dto;
+
+import com.app.backend.model.Aereolinea;
+import com.app.backend.model.Vuelo;
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.math.BigDecimal;
+import java.util.Date;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class CostoDto {
+
+    private Long costId;
+
+    private Vuelo flight;
+
+    private Aereolinea airline;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date validFromDate;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date validToDate;
+
+    private BigDecimal flightCost;
+}

backend/src/main/java/com/app/backend/dto/EscalaDto.java

+package com.app.backend.dto;
+
+import com.app.backend.model.Aereopuerto;
+import com.app.backend.model.Vuelo;
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.validation.constraints.NotBlank;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.util.Date;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class EscalaDto {
+
+    private Long legId;
+
+    private Vuelo flight;
+
+    private Aereopuerto origin_airport;
+
+    private Aereopuerto destination_airport;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date actualDepartureDate;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date actualArrivalDate;
+
+    @NotBlank(message = "departure_time is required")
+    private String actualDepartureTime;
+
+    @NotBlank(message = "arrival_time is required")
+    private String actualArrivalTime;
+}

backend/src/main/java/com/app/backend/dto/PagoDto.java

+package com.app.backend.dto;
+
+import com.app.backend.model.Reserva;
+import com.app.backend.model.Status;
+import com.fasterxml.jackson.annotation.JsonFormat;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.math.BigDecimal;
+import java.util.Date;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class PagoDto {
+
+    private Long paymentId;
+
+    private Reserva reservation;
+
+    private Status status;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date paymentDate;
+
+    private BigDecimal paymentAmount;
+}

backend/src/main/java/com/app/backend/dto/PasajeroDto.java

+package com.app.backend.dto;
+
+import jakarta.validation.constraints.Email;
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Pattern;
+import jakarta.validation.constraints.Size;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class PasajeroDto {
+
+    private Long passengerId;
+
+    @NotBlank(message = "First name is required")
+    @Pattern(regexp = "^[a-zA-Z ]*$", message = "First name must be alphabetic")
+    private String firstName;
+
+    @NotBlank(message = "Second name is required")
+    @Pattern(regexp = "^[a-zA-Z ]*$", message = "Second name must be alphabetic")
+    private String secondName;
+
+    @NotBlank(message = "Last name is required")
+    @Pattern(regexp = "^[a-zA-Z ]*$", message = "Last name must be alphabetic")
+    private String lastName;
+
+    @NotBlank(message = "Phone number is required")
+    @Size(min = 9, max = 9, message = "Phone number must be 9 digits")
+    @Pattern(regexp = "^\\d*$", message = "Phone number must be numeric")
+    private String phoneNumber;
+
+    @NotBlank(message = "Email address is required")
+    @Email
+    private String emailAddress;
+
+    @NotBlank(message = "Address is required")
+    @Pattern(regexp = "^[a-zA-Z ]*$", message = "Address must be alphabetic")
+    private String city;
+
+    @NotBlank(message = "Country is required")
+    @Pattern(regexp = "^[a-zA-Z ]*$", message = "Country must be alphabetic")
+    private String country;
+
+    @NotBlank(message = "Other details are required")
+    private String otherDetails;
+}

backend/src/main/java/com/app/backend/dto/ReservaDto.java

+package com.app.backend.dto;
+
+import com.app.backend.model.*;
+import com.fasterxml.jackson.annotation.JsonFormat;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.util.Date;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class ReservaDto {
+
+    private Long reservationId;
+
+    private Agente agent;
+
+    private Pasajero passenger;
+
+    private Status reservationStatusCode;
+
+    private String ticketCode;
+
+    private Type travelTypeClass;
+
+    private Long numberInParty;
+
+    private Escala leg;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date reservationDate;
+}

backend/src/main/java/com/app/backend/dto/UserDto.java

+package com.app.backend.dto;
+
+import jakarta.validation.constraints.Email;
+import jakarta.validation.constraints.NotEmpty;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class UserDto {
+    private Long id;
+    @NotEmpty(message = "firstname is required")
+    private String firstName;
+    @NotEmpty(message = "lastname is required")
+    private String lastName;
+    @NotEmpty(message = "email is required")
+    @Email
+    private String email;
+    @NotEmpty(message = "password is required")
+    private String password;
+}

backend/src/main/java/com/app/backend/dto/VueloDto.java

+package com.app.backend.dto;
+
+import com.app.backend.model.Aereolinea;
+import com.app.backend.model.Aereopuerto;
+import com.app.backend.model.Avion;
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.validation.constraints.NotBlank;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.util.Date;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class VueloDto {
+
+    private Long flightId;
+
+    private Aereolinea airline;
+
+    private Avion airplane;
+
+    private Aereopuerto origin_airport;
+
+    private Aereopuerto destination_airport;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date departureDate;
+
+    @NotBlank(message = "departure_time is required")
+    private String departureTime;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date arrivalDate;
+
+    @NotBlank(message = "arrival_time is required")
+    private String arrivalTime;
+}

backend/src/main/java/com/app/backend/dto/create/CreateCostoDto.java

+package com.app.backend.dto.create;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.math.BigDecimal;
+import java.util.Date;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class CreateCostoDto {
+
+    private Long flightId;
+
+    private Long airlineId;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date validFromDate;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date validToDate;
+
+    private BigDecimal flightCost;
+}

backend/src/main/java/com/app/backend/dto/create/CreateEscalaDto.java

+package com.app.backend.dto.create;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.validation.constraints.NotBlank;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.util.Date;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class CreateEscalaDto {
+
+    private Long flightId;
+
+    private Long originAirportId;
+
+    private Long destinationAirportId;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date actualDepartureDate;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date actualArrivalDate;
+
+    @NotBlank(message = "departure_time is required")
+    private String actualDepartureTime;
+
+    @NotBlank(message = "arrival_time is required")
+    private String actualArrivalTime;
+}

backend/src/main/java/com/app/backend/dto/create/CreatePagoDto.java

+package com.app.backend.dto.create;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.math.BigDecimal;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class CreatePagoDto {
+
+    private Long reservationId;
+
+    private BigDecimal paymentAmount;
+}

backend/src/main/java/com/app/backend/dto/create/CreateReservaDto.java

+package com.app.backend.dto.create;
+
+import com.app.backend.model.Status;
+import com.app.backend.model.Type;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class CreateReservaDto {
+
+    private Long agentId;
+
+    private Long passengerId;
+
+    private Type travelTypeClass;
+
+    private Long numberInParty;
+
+    private Long legId;
+}

backend/src/main/java/com/app/backend/dto/create/CreateVueloDto.java

+package com.app.backend.dto.create;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.validation.constraints.NotBlank;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.util.Date;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class CreateVueloDto {
+
+    private Long airlineId;
+
+    private Long airplaneId;
+
+    private Long originAirportId;
+
+    private Long destinationAirportId;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date departureDate;
+
+    @NotBlank(message = "departure_time is required")
+    private String departureTime;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date arrivalDate;
+
+    @NotBlank(message = "arrival_time is required")
+    private String arrivalTime;
+}

backend/src/main/java/com/app/backend/exception/EmailExistsException.java

+package com.app.backend.exception;
+
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.ResponseStatus;
+
+@ResponseStatus(value = HttpStatus.BAD_REQUEST)
+public class EmailExistsException extends RuntimeException{
+    private String message;
+
+    public EmailExistsException(String message) {
+       super(message);
+    }
+}

backend/src/main/java/com/app/backend/exception/ErrorDetails.java

+package com.app.backend.exception;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.time.LocalDateTime;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class ErrorDetails {
+    private LocalDateTime timestamp;
+    private String message;
+    private String path;
+    private String errorCode;
+}
\ No newline at end of file

backend/src/main/java/com/app/backend/exception/GlobalExceptionHandler.java

+package com.app.backend.exception;
+
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.HttpStatusCode;
+import org.springframework.http.ResponseEntity;
+import org.springframework.validation.FieldError;
+import org.springframework.validation.ObjectError;
+import org.springframework.web.bind.MethodArgumentNotValidException;
+import org.springframework.web.bind.annotation.ControllerAdvice;
+import org.springframework.web.bind.annotation.ExceptionHandler;
+import org.springframework.web.context.request.WebRequest;
+import org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExceptionHandler;
+
+import java.time.LocalDateTime;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@ControllerAdvice
+public class GlobalExceptionHandler extends ResponseEntityExceptionHandler {
+
+    @ExceptionHandler(ResourceNotFoundException.class)
+    public ResponseEntity<ErrorDetails> handleResourceNotFoundException(ResourceNotFoundException ex, WebRequest request){
+        ErrorDetails errorDetails = new ErrorDetails(LocalDateTime.now(),ex.getMessage(), request.getDescription(false),"ENTITY_NOT_FOUND");
+        return new ResponseEntity<>(errorDetails, HttpStatus.NOT_FOUND);
+    }
+
+    @ExceptionHandler(EmailExistsException.class)
+    public ResponseEntity<ErrorDetails> handleEmailExistsException(EmailExistsException ex, WebRequest request){
+        ErrorDetails errorDetails = new ErrorDetails(LocalDateTime.now(),ex.getMessage(), request.getDescription(false),"EMAIL_ALREADY_EXISTS");
+        return new ResponseEntity<>(errorDetails, HttpStatus.BAD_REQUEST);
+    }
+    @ExceptionHandler(Exception.class)
+    public ResponseEntity<ErrorDetails> handleGlobalException(Exception ex, WebRequest request){
+        ErrorDetails errorDetails = new ErrorDetails(LocalDateTime.now(),ex.getMessage(), request.getDescription(false),"INTERNAL_SERVER_ERROR");
+        return new ResponseEntity<>(errorDetails, HttpStatus.INTERNAL_SERVER_ERROR);
+    }
+
+    @Override
+    protected ResponseEntity<Object> handleMethodArgumentNotValid(MethodArgumentNotValidException ex, HttpHeaders headers, HttpStatusCode status, WebRequest request) {
+        Map<String,String> errors = new HashMap<>();
+        List<ObjectError> errorList = ex.getBindingResult().getAllErrors();
+        errorList.forEach((error)->{
+            String fieldName = ((FieldError) error).getField();
+            String errorMessage = error.getDefaultMessage();
+            errors.put(fieldName,errorMessage);
+        });
+
+        return new ResponseEntity<>(errors, HttpStatus.BAD_REQUEST);
+    }
+}
\ No newline at end of file

backend/src/main/java/com/app/backend/exception/ResourceNotFoundException.java

+package com.app.backend.exception;
+
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.ResponseStatus;
+
+@ResponseStatus(value = HttpStatus.NOT_FOUND)
+public class ResourceNotFoundException extends RuntimeException {
+    private final String resourceName;
+    private final String fieldName;
+    private final Object fieldValue;
+
+    public ResourceNotFoundException(String resourceName, String fieldName, Object fieldValue) {
+        super(String.format("%s not found with %s : '%s'", resourceName, fieldName, fieldValue));
+        this.resourceName = resourceName;
+        this.fieldName = fieldName;
+        this.fieldValue = fieldValue;
+    }
+}
\ No newline at end of file

backend/src/main/java/com/app/backend/model/Aereolinea.java

+package com.app.backend.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@Entity
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "aereolineas")
+public class Aereolinea {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long airline_id;
+
+    @Column(name = "airline_name", nullable = false)
+    private String airlineName;
+
+    @Column(name = "airline_code", nullable = false)
+    private String airlineCode;
+}

backend/src/main/java/com/app/backend/model/Aereopuerto.java

+package com.app.backend.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@AllArgsConstructor
+@Entity
+@Table(name = "aereopuertos")
+public class Aereopuerto {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "airport_id", nullable = false)
+    private Long airportId;
+
+    @Column(name = "airport_name", nullable = false)
+    private String airportName;
+
+    @Column(name = "airport_location", nullable = false)
+    private String airportLocation;
+
+    @Column(name = "other_details", nullable = false)
+    private String otherDetails;
+}

backend/src/main/java/com/app/backend/model/Agente.java

+package com.app.backend.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@Entity
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "agentes")
+public class Agente {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "agent_id", nullable = false)
+    private Long agentId;
+
+    @Column(name = "agent_name", nullable = false, length = 50)
+    private String agentName;
+
+    @Column(name = "agent_details", nullable = false)
+    private String agentDetails;
+}

backend/src/main/java/com/app/backend/model/Avion.java

+package com.app.backend.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@Entity
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "aviones")
+public class Avion {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long aircraft_id;
+
+    @Column(nullable = false)
+    private String model;
+
+    @Column(nullable = false)
+    private String maker;
+
+    @Column(nullable = false)
+    private Long capacity;
+}

backend/src/main/java/com/app/backend/model/Costo.java

+package com.app.backend.model;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.math.BigDecimal;
+import java.util.Date;
+
+@Getter
+@Setter
+@Entity
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "costos")
+public class Costo {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "cost_id", nullable = false)
+    private Long costId;
+
+    @ManyToOne
+    private Vuelo flight;
+
+    @ManyToOne
+    private Aereolinea airline;
+
+    @Column(name = "valid_from_date", nullable = false)
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date validFromDate;
+
+    @Column(name = "valid_to_date", nullable = false)
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date validToDate;
+
+    @Column(name = "flight_cost", nullable = false)
+    private BigDecimal flightCost;
+}

backend/src/main/java/com/app/backend/model/Escala.java

+package com.app.backend.model;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.util.Date;
+
+@Getter
+@Setter
+@Entity
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "escalas")
+public class Escala {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "leg_id", nullable = false)
+    private Long legId;
+
+    @ManyToOne
+    private Vuelo flight;
+
+    @OneToOne
+    private Aereopuerto origin_airport;
+
+    @OneToOne
+    private Aereopuerto destination_airport;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date actualDepartureDate;
+
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date actualArrivalDate;
+
+    @Column(name = "actual_departure_time", nullable = false)
+    private String actualDepartureTime;
+
+    @Column(name = "actual_arrival_time", nullable = false)
+    private String actualArrivalTime;
+}

backend/src/main/java/com/app/backend/model/Pago.java

+package com.app.backend.model;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+
+import java.math.BigDecimal;
+import java.util.Date;
+
+@Getter
+@Setter
+@Entity
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "pagos")
+public class Pago {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "payment_id")
+    private Long paymentId;
+
+    @OneToOne
+    private Reserva reservation;
+
+    @Enumerated(EnumType.STRING)
+    private Status status;
+
+    @Column(name = "payment_date", nullable = false)
+    @CreationTimestamp
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date paymentDate;
+
+    @Column(name = "payment_amount", nullable = false)
+    private BigDecimal paymentAmount;
+}

backend/src/main/java/com/app/backend/model/Pasajero.java

+package com.app.backend.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@AllArgsConstructor
+@Entity
+@Table(name = "pasajeros")
+public class Pasajero {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "passenger_id", nullable = false)
+    private Long passengerId;
+
+    @Column(name = "first_name", nullable = false)
+    private String firstName;
+
+    @Column(name = "second_name", nullable = false)
+    private String secondName;
+
+    @Column(name = "last_name", nullable = false)
+    private String lastName;
+
+    @Column(name = "phone_number", nullable = false)
+    private String phoneNumber;
+
+    @Column(name = "email_address", nullable = false)
+    private String emailAddress;
+
+    @Column(nullable = false)
+    private String city;
+
+    @Column(nullable = false)
+    private String country;
+
+    @Column(name = "other_details", nullable = false)
+    private String otherDetails;
+}

backend/src/main/java/com/app/backend/model/Reserva.java

+package com.app.backend.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+
+import java.util.Date;
+
+@Getter
+@Setter
+@Entity
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "reservas")
+public class Reserva {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "reservation_id", nullable = false)
+    private Long reservationId;
+
+    @ManyToOne
+    private Agente agent;
+
+    @ManyToOne
+    private Pasajero passenger;
+
+    @Enumerated(EnumType.STRING)
+    @Column(name = "reservation_status_code", nullable = false)
+    private Status reservationStatusCode;
+
+    @Column(name = "ticket_code", nullable = false, length = 6)
+    private String ticketCode;
+
+    @Enumerated(EnumType.STRING)
+    @Column(name = "travel_type_class", nullable = false)
+    private Type travelTypeClass;
+
+    @Column(name = "reservation_date", nullable = false)
+    @CreationTimestamp
+    private Date reservationDate;
+
+    @Column(name = "number_in_party", nullable = false)
+    private Long numberInParty;
+
+    @OneToOne
+    private Escala leg;
+}

backend/src/main/java/com/app/backend/model/Role.java

+package com.app.backend.model;
+
+public enum Role {
+  ROLE_AGENT,
+  ROLE_SUPERVISOR,
+  ROLE_PASSENGER
+}

backend/src/main/java/com/app/backend/model/Status.java

+package com.app.backend.model;
+
+public enum Status {
+    EN_PROCESO,
+    TERMINADO,
+    CANCELADO
+}

backend/src/main/java/com/app/backend/model/Type.java

+package com.app.backend.model;
+
+public enum Type {
+    SEGUNDA_CLASE,
+    EJECUTIVO,
+    PRIMERA_CLASE
+}

backend/src/main/java/com/app/backend/model/User.java

+package com.app.backend.model;
+
+import com.app.backend.model.auth.Token;
+import jakarta.persistence.*;
+import lombok.*;
+import org.springframework.security.core.GrantedAuthority;
+import org.springframework.security.core.authority.SimpleGrantedAuthority;
+import org.springframework.security.core.userdetails.UserDetails;
+
+import java.util.Collection;
+import java.util.List;
+
+@Data
+@Builder
+@Getter
+@Setter
+@NoArgsConstructor
+@AllArgsConstructor
+@Entity
+@Table(name = "users")
+public class User implements UserDetails {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Integer id;
+    @Column(name = "first_name",nullable = false)
+    private String firstname;
+    @Column(name = "last_name",nullable = false)
+    private String lastname;
+    @Column(nullable = false,unique = true)
+    private String email;
+    private String password;
+    @Enumerated(EnumType.STRING)
+    private Role role;
+
+    @OneToMany(mappedBy = "user")
+    private List<Token> tokens;
+    @Override
+    public Collection<? extends GrantedAuthority> getAuthorities() {
+        return List.of(new SimpleGrantedAuthority(role.name()));
+    }
+
+    @Override
+    public String getPassword() {
+        return password;
+    }
+
+    @Override
+    public String getUsername() {
+        return email;
+    }
+
+    @Override
+    public boolean isAccountNonExpired() {
+        return true;
+    }
+
+    @Override
+    public boolean isAccountNonLocked() {
+        return true;
+    }
+
+    @Override
+    public boolean isCredentialsNonExpired() {
+        return true;
+    }
+
+    @Override
+    public boolean isEnabled() {
+        return true;
+    }
+
+}
+

backend/src/main/java/com/app/backend/model/Vuelo.java

+package com.app.backend.model;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import org.springframework.format.annotation.DateTimeFormat;
+
+import java.util.Date;
+
+@Getter
+@Setter
+@Entity
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "vuelos")
+public class Vuelo {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "flight_id", nullable = false)
+    private Long flightId;
+
+    @OneToOne
+    private Aereolinea airline;
+
+    @ManyToOne
+    private Avion airplane;
+
+    @ManyToOne
+    private Aereopuerto origin_airport;
+
+    @ManyToOne
+    private Aereopuerto destination_airport;
+
+    @Column(name = "departure_date", nullable = false)
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date departureDate;
+
+    @Column(name = "departure_time", nullable = false)
+    private String departureTime;
+
+    @Column(name = "arrival_date", nullable = false)
+    @JsonFormat(pattern = "dd-MM-yyyy")
+    private Date arrivalDate;
+
+    @Column(name = "arrival_time", nullable = false)
+    private String arrivalTime;
+}

backend/src/main/java/com/app/backend/model/auth/AuthenticationRequest.java

+package com.app.backend.model.auth;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@Builder
+@AllArgsConstructor
+@NoArgsConstructor
+public class AuthenticationRequest {
+
+  private String email;
+
+  private String password;
+}

backend/src/main/java/com/app/backend/model/auth/AuthenticationResponse.java

+package com.app.backend.model.auth;
+
+import com.app.backend.model.Role;
+import jakarta.persistence.EnumType;
+import jakarta.persistence.Enumerated;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@Builder
+@AllArgsConstructor
+@NoArgsConstructor
+public class AuthenticationResponse {
+
+  private String token;
+
+  @Enumerated(EnumType.STRING)
+  private Role role;
+}

backend/src/main/java/com/app/backend/model/auth/Token.java

+package com.app.backend.model.auth;
+
+import com.app.backend.model.User;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+@Entity
+@Table(name = "tokens")
+public class Token {
+
+  @Id
+  @GeneratedValue
+  public Integer id;
+
+  @Column(unique = true)
+  public String token;
+
+  @Enumerated(EnumType.STRING)
+  public TokenType tokenType = TokenType.BEARER;
+
+  public boolean revoked;
+
+  public boolean expired;
+
+  @ManyToOne
+  @JoinColumn(name = "user_id")
+  public User user;
+}

backend/src/main/java/com/app/backend/model/auth/TokenType.java

+package com.app.backend.model.auth;
+
+public enum TokenType {
+
+  BEARER
+}

backend/src/main/java/com/app/backend/repository/AereolineaRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Aereolinea;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface AereolineaRepository extends JpaRepository<Aereolinea, Long> {
+}

backend/src/main/java/com/app/backend/repository/AereopuertoRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Aereopuerto;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.repository.PagingAndSortingRepository;
+
+public interface AereopuertoRepository extends JpaRepository<Aereopuerto, Long>, PagingAndSortingRepository<Aereopuerto, Long> {
+}

backend/src/main/java/com/app/backend/repository/AgenteRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Agente;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.repository.PagingAndSortingRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface AgenteRepository extends JpaRepository<Agente, Long>, PagingAndSortingRepository<Agente, Long> {
+}

backend/src/main/java/com/app/backend/repository/AvionRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Avion;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface AvionRepository extends JpaRepository<Avion, Long> {
+}

backend/src/main/java/com/app/backend/repository/CostoRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Costo;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public interface CostoRepository extends JpaRepository<Costo, Long> {
+    List<Costo> findAllByFlight_FlightId(Long vueloId);
+}

backend/src/main/java/com/app/backend/repository/EscalaRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.dto.EscalaDto;
+import com.app.backend.model.Escala;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public interface EscalaRepository extends JpaRepository<Escala, Long> {
+    List<Escala> findAllByFlight_FlightId(Long flightId);
+}

backend/src/main/java/com/app/backend/repository/PagoRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Pago;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.repository.PagingAndSortingRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface PagoRepository extends JpaRepository<Pago, Long>, PagingAndSortingRepository<Pago, Long> {
+}

backend/src/main/java/com/app/backend/repository/PasajeroRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Pasajero;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.repository.PagingAndSortingRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface PasajeroRepository extends JpaRepository<Pasajero, Long>, PagingAndSortingRepository<Pasajero, Long> {
+}

backend/src/main/java/com/app/backend/repository/ReservaRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Reserva;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.repository.PagingAndSortingRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public interface ReservaRepository extends JpaRepository<Reserva, Long>, PagingAndSortingRepository<Reserva, Long> {
+    List<Reserva> findByPassenger_EmailAddress(String email_address);
+}

backend/src/main/java/com/app/backend/repository/TokenRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.auth.Token;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Optional;
+
+@Repository
+public interface TokenRepository extends JpaRepository<Token, Integer> {
+
+    @Query(value = """
+      select t from Token t inner join User u
+      on t.user.id = u.id
+      where u.id = :id and (t.expired = false or t.revoked = false)
+      """)
+    List<Token> findAllValidTokenByUser(Integer id);
+
+    Optional<Token> findByToken(String token);
+}

backend/src/main/java/com/app/backend/repository/UserRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.User;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.Optional;
+
+@Repository
+public interface UserRepository extends JpaRepository<User, Long> {
+    Optional<User> findByEmail(String email);
+}
\ No newline at end of file

backend/src/main/java/com/app/backend/repository/VueloRepository.java

+package com.app.backend.repository;
+
+import com.app.backend.model.Vuelo;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.repository.PagingAndSortingRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface VueloRepository extends JpaRepository<Vuelo, Long>, PagingAndSortingRepository<Vuelo, Long> {
+}

backend/src/main/java/com/app/backend/service/AereopuertoService.java

+package com.app.backend.service;
+
+import com.app.backend.dto.AereopuertoDto;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+
+import java.util.List;
+
+public interface AereopuertoService {
+
+    Page<AereopuertoDto> getAereopuertos(Pageable pageable);
+
+    List<AereopuertoDto> getAereopuertos();
+
+    AereopuertoDto getAereopuertoById(Long aereopuertoId);
+
+    AereopuertoDto createAereopuerto(AereopuertoDto aereopuertoDto);
+
+    AereopuertoDto updateAereopuerto(Long aereopuertoId, AereopuertoDto aereopuertoDto);
+
+    AereopuertoDto deleteAereopuerto(Long aereopuertoId);
+}

backend/src/main/java/com/app/backend/service/AgenteService.java

+package com.app.backend.service;
+
+import com.app.backend.dto.AgenteDto;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+
+public interface AgenteService {
+
+    Page<AgenteDto> getAllAgentes(Pageable pageable);
+
+    AgenteDto getAgenteById(Long agenteId);
+
+    AgenteDto createAgente(AgenteDto agenteDto);
+
+    AgenteDto updateAgente(Long agenteId, AgenteDto agenteDto);
+
+    AgenteDto deleteAgente(Long agenteId);
+}

backend/src/main/java/com/app/backend/service/CostoService.java

+package com.app.backend.service;
+
+import com.app.backend.dto.CostoDto;
+import com.app.backend.dto.create.CreateCostoDto;
+
+import java.util.List;
+
+public interface CostoService {
+
+    List<CostoDto> getAllCostos();
+
+    List<CostoDto> getAllCostosByVueloId(Long vueloId);
+
+    CostoDto getCostoById(Long costoId);
+
+    CostoDto createCosto(CreateCostoDto createCostoDto);
+
+    CostoDto updateCosto(Long costoId, CreateCostoDto createCostoDto);
+
+    CostoDto deleteCosto(Long costoId);
+}

backend/src/main/java/com/app/backend/service/EscalaService.java

+package com.app.backend.service;
+
+import com.app.backend.dto.EscalaDto;
+import com.app.backend.dto.create.CreateEscalaDto;
+
+import java.util.List;
+
+public interface EscalaService {
+
+    List<EscalaDto> getAllEscalas();
+
+    List<EscalaDto> getEscalasByVueloId(Long vueloId);
+
+    EscalaDto getEscalaById(Long escalaId);
+
+    EscalaDto createEscala(CreateEscalaDto escalaDto);
+
+    EscalaDto updateEscala(Long escalaId, CreateEscalaDto escalaDto);
+
+    EscalaDto deleteEscala(Long escalaId);
+}

backend/src/main/java/com/app/backend/service/PagoService.java

+package com.app.backend.service;
+
+import com.app.backend.dto.PagoDto;
+import com.app.backend.dto.create.CreatePagoDto;
+
+import java.util.List;
+
+public interface PagoService {
+
+    List<PagoDto> getAllPagos();
+
+    PagoDto createPago(CreatePagoDto createPagoDto);
+}

backend/src/main/java/com/app/backend/service/PasajeroService.java

+package com.app.backend.service;
+
+import com.app.backend.dto.PasajeroDto;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+
+import java.util.List;
+
+public interface PasajeroService {
+
+    Page<PasajeroDto> getAllPasajeros(Pageable pageable);
+
+    List<PasajeroDto> getAllPasajeros();
+
+    PasajeroDto getPasajeroById(Long pasajeroId);
+
+    PasajeroDto createPasajero(PasajeroDto pasajeroDto);
+
+    PasajeroDto updatePasajero(Long pasajeroId, PasajeroDto pasajeroDto);
+
+    PasajeroDto deletePasajero(Long pasajeroId);
+}

backend/src/main/java/com/app/backend/service/ReservaService.java

+package com.app.backend.service;
+
+import com.app.backend.dto.ReservaDto;
+import com.app.backend.dto.create.CreateReservaDto;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+
+import java.util.List;
+
+public interface ReservaService {
+
+    Page<ReservaDto> getAllReservas(Pageable pageable);
+
+    List<ReservaDto> getAllReservasByEmail(String email_address);
+
+    ReservaDto getReservaById(Long reservaId);
+
+    ReservaDto createReserva(CreateReservaDto reservaDto);
+
+    ReservaDto updateReserva(Long reservaId, CreateReservaDto reservaDto);
+
+    ReservaDto deleteReserva(Long reservaId);
+}

backend/src/main/java/com/app/backend/service/VueloService.java

+package com.app.backend.service;
+
+import com.app.backend.dto.VueloDto;
+import com.app.backend.dto.create.CreateVueloDto;
+import com.app.backend.model.Aereolinea;
+import com.app.backend.model.Avion;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+
+import java.util.List;
+
+public interface VueloService {
+
+    Page<VueloDto> getVuelos(Pageable pageable);
+
+    VueloDto getVueloById(Long vueloId);
+
+    List<Aereolinea> getAereolineas();
+
+    List<Avion> getAviones();
+
+    VueloDto createVuelo(CreateVueloDto createVueloDto);
+
+    VueloDto updateVuelo(Long vueloId, CreateVueloDto createVueloDto);
+
+    VueloDto deleteVuelo(Long vueloId);
+}

backend/src/main/java/com/app/backend/service/impl/AereopuertoServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.dto.AereopuertoDto;
+import com.app.backend.exception.ResourceNotFoundException;
+import com.app.backend.model.Aereopuerto;
+import com.app.backend.repository.AereopuertoRepository;
+import com.app.backend.service.AereopuertoService;
+import org.modelmapper.ModelMapper;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class AereopuertoServiceImpl implements AereopuertoService {
+
+    private final AereopuertoRepository aereopuertoRepository;
+
+    private final ModelMapper modelMapper;
+
+    public AereopuertoServiceImpl(AereopuertoRepository aereopuertoRepository, ModelMapper modelMapper) {
+        this.aereopuertoRepository = aereopuertoRepository;
+        this.modelMapper = modelMapper;
+    }
+
+    @Override
+    public Page<AereopuertoDto> getAereopuertos(Pageable pageable) {
+        return aereopuertoRepository.findAll(pageable).map(aereopuerto -> modelMapper.map(aereopuerto, AereopuertoDto.class));
+    }
+
+    @Override
+    public List<AereopuertoDto> getAereopuertos() {
+        return aereopuertoRepository.findAll().stream().map(aereopuerto -> modelMapper.map(aereopuerto, AereopuertoDto.class)).toList();
+    }
+
+    @Override
+    public AereopuertoDto getAereopuertoById(Long aereopuertoId) {
+        Aereopuerto optionalAereopuerto = aereopuertoRepository.findById(aereopuertoId).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", aereopuertoId)
+        );
+        return modelMapper.map(optionalAereopuerto, AereopuertoDto.class);
+    }
+
+    @Override
+    public AereopuertoDto createAereopuerto(AereopuertoDto aereopuertoDto) {
+        Aereopuerto aereopuerto = aereopuertoRepository.save(modelMapper.map(aereopuertoDto, Aereopuerto.class));
+        return modelMapper.map(aereopuerto, AereopuertoDto.class);
+    }
+
+    @Override
+    public AereopuertoDto updateAereopuerto(Long aereopuertoId, AereopuertoDto aereopuertoDto) {
+        Aereopuerto optionalAereopuerto = aereopuertoRepository.findById(aereopuertoId).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", aereopuertoId)
+        );
+        optionalAereopuerto.setAirportName(aereopuertoDto.getAirportName());
+        optionalAereopuerto.setAirportLocation(aereopuertoDto.getAirportLocation());
+        optionalAereopuerto.setOtherDetails(aereopuertoDto.getOtherDetails());
+        return modelMapper.map(aereopuertoRepository.save(optionalAereopuerto), AereopuertoDto.class);
+    }
+
+    @Override
+    public AereopuertoDto deleteAereopuerto(Long aereopuertoId) {
+        Aereopuerto optionalAereopuerto = aereopuertoRepository.findById(aereopuertoId).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", aereopuertoId)
+        );
+        aereopuertoRepository.delete(optionalAereopuerto);
+        return modelMapper.map(optionalAereopuerto, AereopuertoDto.class);
+    }
+}

backend/src/main/java/com/app/backend/service/impl/AgenteServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.dto.AgenteDto;
+import com.app.backend.exception.ResourceNotFoundException;
+import com.app.backend.model.Agente;
+import com.app.backend.repository.AgenteRepository;
+import com.app.backend.service.AgenteService;
+import org.modelmapper.ModelMapper;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+
+@Service
+public class AgenteServiceImpl implements AgenteService {
+
+    private final AgenteRepository agenteRepository;
+
+    private final ModelMapper modelMapper;
+
+    public AgenteServiceImpl(AgenteRepository agenteRepository, ModelMapper modelMapper) {
+        this.agenteRepository = agenteRepository;
+        this.modelMapper = modelMapper;
+    }
+
+    @Override
+    public Page<AgenteDto> getAllAgentes(Pageable pageable) {
+        return agenteRepository.findAll(pageable).map(agente -> modelMapper.map(agente, AgenteDto.class));
+    }
+
+    @Override
+    public AgenteDto getAgenteById(Long agenteId) {
+        Agente optionalAgente = agenteRepository.findById(agenteId).orElseThrow(
+                () -> new ResourceNotFoundException("Agente", "id", agenteId)
+        );
+        return modelMapper.map(optionalAgente, AgenteDto.class);
+    }
+
+    @Override
+    public AgenteDto createAgente(AgenteDto agenteDto) {
+        Agente agente = agenteRepository.save(modelMapper.map(agenteDto, Agente.class));
+        return modelMapper.map(agente, AgenteDto.class);
+    }
+
+    @Override
+    public AgenteDto updateAgente(Long agenteId, AgenteDto agenteDto) {
+        Agente optionalAgente = agenteRepository.findById(agenteId).orElseThrow(
+                () -> new ResourceNotFoundException("Agente", "id", agenteId)
+        );
+        optionalAgente.setAgentName(agenteDto.getAgentName());
+        optionalAgente.setAgentDetails(agenteDto.getAgentDetails());
+        return modelMapper.map(agenteRepository.save(optionalAgente), AgenteDto.class);
+    }
+
+    @Override
+    public AgenteDto deleteAgente(Long agenteId) {
+        Agente optionalAgente = agenteRepository.findById(agenteId).orElseThrow(
+                () -> new ResourceNotFoundException("Agente", "id", agenteId)
+        );
+        agenteRepository.delete(optionalAgente);
+        return modelMapper.map(optionalAgente, AgenteDto.class);
+    }
+}

backend/src/main/java/com/app/backend/service/impl/AuthenticationServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.config.JwtService;
+import com.app.backend.dto.UserDto;
+import com.app.backend.exception.EmailExistsException;
+import com.app.backend.model.Role;
+import com.app.backend.model.User;
+import com.app.backend.model.auth.AuthenticationRequest;
+import com.app.backend.model.auth.AuthenticationResponse;
+import com.app.backend.model.auth.Token;
+import com.app.backend.model.auth.TokenType;
+import com.app.backend.repository.TokenRepository;
+import com.app.backend.repository.UserRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.stereotype.Service;
+
+@Service
+@RequiredArgsConstructor
+public class AuthenticationServiceImpl {
+    private final UserRepository repository;
+    private final TokenRepository tokenRepository;
+    private final PasswordEncoder passwordEncoder;
+    private final JwtService jwtService;
+    private final AuthenticationManager authenticationManager;
+
+    public AuthenticationResponse register(UserDto request, Role role) {
+        var user = User.builder()
+                .firstname(request.getFirstName())
+                .lastname(request.getLastName())
+                .email(request.getEmail())
+                .password(passwordEncoder.encode(request.getPassword()))
+                .role(role)
+                .build();
+        var optionalUser = repository.findByEmail(request.getEmail());
+        if(optionalUser.isPresent()){
+            throw new EmailExistsException("Email Already Exists for User");
+        }
+        var savedUser = repository.save(user);
+        var jwtToken = jwtService.generateToken(user);
+        saveUserToken(savedUser, jwtToken);
+        return AuthenticationResponse.builder()
+                .token(jwtToken)
+                .role(role)
+                .build();
+    }
+
+    public AuthenticationResponse authenticate(AuthenticationRequest request) {
+        authenticationManager.authenticate(
+                new UsernamePasswordAuthenticationToken(
+                        request.getEmail(),
+                        request.getPassword()
+                )
+        );
+        var user = repository.findByEmail(request.getEmail())
+                .orElseThrow();
+        var jwtToken = jwtService.generateToken(user);
+        revokeAllUserTokens(user);
+        saveUserToken(user, jwtToken);
+        return AuthenticationResponse.builder()
+                .token(jwtToken)
+                .role(user.getRole())
+                .build();
+    }
+
+    private void saveUserToken(User user, String jwtToken) {
+        var token = Token.builder()
+                .user(user)
+                .token(jwtToken)
+                .tokenType(TokenType.BEARER)
+                .expired(false)
+                .revoked(false)
+                .build();
+        tokenRepository.save(token);
+    }
+
+    private void revokeAllUserTokens(User user) {
+        var validUserTokens = tokenRepository.findAllValidTokenByUser(user.getId());
+        if (validUserTokens.isEmpty())
+            return;
+        validUserTokens.forEach(token -> {
+            token.setExpired(true);
+            token.setRevoked(true);
+        });
+        tokenRepository.saveAll(validUserTokens);
+    }
+}
\ No newline at end of file

backend/src/main/java/com/app/backend/service/impl/CostoServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.dto.CostoDto;
+import com.app.backend.dto.create.CreateCostoDto;
+import com.app.backend.exception.ResourceNotFoundException;
+import com.app.backend.model.Aereolinea;
+import com.app.backend.model.Costo;
+import com.app.backend.model.Vuelo;
+import com.app.backend.repository.AereolineaRepository;
+import com.app.backend.repository.CostoRepository;
+import com.app.backend.repository.VueloRepository;
+import com.app.backend.service.CostoService;
+import org.modelmapper.ModelMapper;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class CostoServiceImpl implements CostoService {
+
+    private final CostoRepository costoRepository;
+
+    private final VueloRepository vueloRepository;
+
+    private final AereolineaRepository aereolineaRepository;
+
+    private final ModelMapper modelMapper;
+
+    public CostoServiceImpl(CostoRepository costoRepository, VueloRepository vueloRepository, AereolineaRepository aereolineaRepository, ModelMapper modelMapper) {
+        this.costoRepository = costoRepository;
+        this.vueloRepository = vueloRepository;
+        this.aereolineaRepository = aereolineaRepository;
+        this.modelMapper = modelMapper;
+    }
+
+    @Override
+    public List<CostoDto> getAllCostos() {
+        return costoRepository.findAll().stream().map(costo -> modelMapper.map(costo, CostoDto.class)).toList();
+    }
+
+    @Override
+    public List<CostoDto> getAllCostosByVueloId(Long vueloId) {
+        return costoRepository.findAllByFlight_FlightId(vueloId).stream().map(costo -> modelMapper.map(costo, CostoDto.class)).toList();
+    }
+
+    @Override
+    public CostoDto getCostoById(Long costoId) {
+        Costo costo = costoRepository.findById(costoId).orElseThrow(
+                () -> new ResourceNotFoundException("Costo", "id", costoId)
+        );
+        return modelMapper.map(costo, CostoDto.class);
+    }
+
+    @Override
+    public CostoDto createCosto(CreateCostoDto createCostoDto) {
+        Vuelo vuelo = vueloRepository.findById(createCostoDto.getFlightId()).orElseThrow(
+                () -> new ResourceNotFoundException("Vuelo", "id", createCostoDto.getFlightId())
+        );
+        Aereolinea aereolinea = aereolineaRepository.findById(createCostoDto.getAirlineId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereolinea", "id", createCostoDto.getAirlineId())
+        );
+        Costo costo = new Costo();
+        costo.setAirline(aereolinea);
+        costo.setFlight(vuelo);
+        costo.setValidFromDate(createCostoDto.getValidFromDate());
+        costo.setValidToDate(createCostoDto.getValidToDate());
+        costo.setFlightCost(createCostoDto.getFlightCost());
+        return modelMapper.map(costoRepository.save(costo), CostoDto.class);
+    }
+
+    @Override
+    public CostoDto updateCosto(Long costoId, CreateCostoDto createCostoDto) {
+        Costo costo = costoRepository.findById(costoId).orElseThrow(
+                () -> new ResourceNotFoundException("Costo", "id", costoId)
+        );
+        Vuelo vuelo = vueloRepository.findById(createCostoDto.getFlightId()).orElseThrow(
+                () -> new ResourceNotFoundException("Vuelo", "id", createCostoDto.getFlightId())
+        );
+        Aereolinea aereolinea = aereolineaRepository.findById(createCostoDto.getAirlineId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereolinea", "id", createCostoDto.getAirlineId())
+        );
+        costo.setAirline(aereolinea);
+        costo.setFlight(vuelo);
+        costo.setValidFromDate(createCostoDto.getValidFromDate());
+        costo.setValidToDate(createCostoDto.getValidToDate());
+        costo.setFlightCost(createCostoDto.getFlightCost());
+        return modelMapper.map(costoRepository.save(costo), CostoDto.class);
+    }
+
+    @Override
+    public CostoDto deleteCosto(Long costoId) {
+        Costo costo = costoRepository.findById(costoId).orElseThrow(
+                () -> new ResourceNotFoundException("Costo", "id", costoId)
+        );
+        costoRepository.deleteById(costoId);
+        return modelMapper.map(costo, CostoDto.class);
+    }
+}

backend/src/main/java/com/app/backend/service/impl/EscalaServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.dto.EscalaDto;
+import com.app.backend.dto.create.CreateEscalaDto;
+import com.app.backend.exception.ResourceNotFoundException;
+import com.app.backend.model.Aereopuerto;
+import com.app.backend.model.Escala;
+import com.app.backend.model.Vuelo;
+import com.app.backend.repository.AereopuertoRepository;
+import com.app.backend.repository.EscalaRepository;
+import com.app.backend.repository.VueloRepository;
+import com.app.backend.service.EscalaService;
+import org.modelmapper.ModelMapper;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class EscalaServiceImpl implements EscalaService {
+
+    private final EscalaRepository escalaRepository;
+
+    private final AereopuertoRepository aereopuertoRepository;
+
+    private final VueloRepository vueloRepository;
+
+    private final ModelMapper modelMapper;
+
+    public EscalaServiceImpl(EscalaRepository escalaRepository, AereopuertoRepository aereopuertoRepository, VueloRepository vueloRepository, ModelMapper modelMapper) {
+        this.escalaRepository = escalaRepository;
+        this.aereopuertoRepository = aereopuertoRepository;
+        this.vueloRepository = vueloRepository;
+        this.modelMapper = modelMapper;
+    }
+
+    @Override
+    public List<EscalaDto> getAllEscalas() {
+        return escalaRepository.findAll().stream().map(escala -> modelMapper.map(escala, EscalaDto.class)).toList();
+    }
+
+    @Override
+    public List<EscalaDto> getEscalasByVueloId(Long vueloId) {
+        return escalaRepository.findAllByFlight_FlightId(vueloId).stream().map(escala -> modelMapper.map(escala, EscalaDto.class)).toList();
+    }
+
+    @Override
+    public EscalaDto getEscalaById(Long escalaId) {
+        Escala escala = escalaRepository.findById(escalaId).orElseThrow(
+                () -> new ResourceNotFoundException("Escala", "id", escalaId)
+        );
+        return modelMapper.map(escala, EscalaDto.class);
+    }
+
+    @Override
+    public EscalaDto createEscala(CreateEscalaDto escalaDto) {
+        Aereopuerto optionalAereopuertoOrigen = aereopuertoRepository.findById(escalaDto.getOriginAirportId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", escalaDto.getOriginAirportId())
+        );
+        Aereopuerto optionalDAereopuertoDestino = aereopuertoRepository.findById(escalaDto.getDestinationAirportId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", escalaDto.getDestinationAirportId())
+        );
+        Vuelo optionalVuelo = vueloRepository.findById(escalaDto.getFlightId()).orElseThrow(
+                () -> new ResourceNotFoundException("Vuelo", "id", escalaDto.getFlightId())
+        );
+        Escala escala = new Escala();
+        escala.setFlight(optionalVuelo);
+        escala.setOrigin_airport(optionalAereopuertoOrigen);
+        escala.setDestination_airport(optionalDAereopuertoDestino);
+        escala.setActualArrivalDate(escalaDto.getActualArrivalDate());
+        escala.setActualArrivalTime(escalaDto.getActualArrivalTime());
+        escala.setActualDepartureDate(escalaDto.getActualDepartureDate());
+        escala.setActualDepartureTime(escalaDto.getActualDepartureTime());
+        return modelMapper.map(escalaRepository.save(escala), EscalaDto.class);
+    }
+
+    @Override
+    public EscalaDto updateEscala(Long escalaId, CreateEscalaDto escalaDto) {
+        Escala optionalEscala = escalaRepository.findById(escalaId).orElseThrow(
+                () -> new ResourceNotFoundException("Escala", "id", escalaId)
+        );
+        Aereopuerto optionalAereopuertoOrigen = aereopuertoRepository.findById(escalaDto.getOriginAirportId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", escalaDto.getOriginAirportId())
+        );
+        Aereopuerto optionalDAereopuertoDestino = aereopuertoRepository.findById(escalaDto.getDestinationAirportId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", escalaDto.getDestinationAirportId())
+        );
+        Vuelo optionalVuelo = vueloRepository.findById(escalaDto.getFlightId()).orElseThrow(
+                () -> new ResourceNotFoundException("Vuelo", "id", escalaDto.getFlightId())
+        );
+        optionalEscala.setFlight(optionalVuelo);
+        optionalEscala.setOrigin_airport(optionalAereopuertoOrigen);
+        optionalEscala.setDestination_airport(optionalDAereopuertoDestino);
+        optionalEscala.setActualArrivalDate(escalaDto.getActualArrivalDate());
+        optionalEscala.setActualArrivalTime(escalaDto.getActualArrivalTime());
+        optionalEscala.setActualDepartureDate(escalaDto.getActualDepartureDate());
+        optionalEscala.setActualDepartureTime(escalaDto.getActualDepartureTime());
+        return modelMapper.map(escalaRepository.save(optionalEscala), EscalaDto.class);
+    }
+
+    @Override
+    public EscalaDto deleteEscala(Long escalaId) {
+        Escala optionalEscala = escalaRepository.findById(escalaId).orElseThrow(
+                () -> new ResourceNotFoundException("Escala", "id", escalaId)
+        );
+        escalaRepository.deleteById(escalaId);
+        return modelMapper.map(optionalEscala, EscalaDto.class);
+    }
+}

backend/src/main/java/com/app/backend/service/impl/PagoServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.dto.PagoDto;
+import com.app.backend.dto.create.CreatePagoDto;
+import com.app.backend.exception.ResourceNotFoundException;
+import com.app.backend.model.Pago;
+import com.app.backend.model.Reserva;
+import com.app.backend.model.Status;
+import com.app.backend.repository.PagoRepository;
+import com.app.backend.repository.ReservaRepository;
+import com.app.backend.service.PagoService;
+import org.modelmapper.ModelMapper;
+import org.springframework.mail.SimpleMailMessage;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class PagoServiceImpl implements PagoService {
+
+    private final PagoRepository pagoRepository;
+
+    private final JavaMailSender mailSender;
+
+    private final ReservaRepository reservaRepository;
+
+    private final ModelMapper modelMapper;
+
+    public PagoServiceImpl(PagoRepository pagoRepository, JavaMailSender mailSender, ReservaRepository reservaRepository, ModelMapper modelMapper) {
+        this.pagoRepository = pagoRepository;
+        this.mailSender = mailSender;
+        this.reservaRepository = reservaRepository;
+        this.modelMapper = modelMapper;
+    }
+
+    @Override
+    public List<PagoDto> getAllPagos() {
+        return pagoRepository.findAll().stream().map(data -> modelMapper.map(data, PagoDto.class)).toList();
+    }
+
+    @Override
+    public PagoDto createPago(CreatePagoDto createPagoDto) {
+        SimpleMailMessage message = new SimpleMailMessage();
+        message.setFrom("fromemail@gmail.com");
+        message.setTo("w7moises@gmail.com");
+        message.setText(createPagoDto.getReservationId() + "#fa345s1d1gsa12591" + createPagoDto.getPaymentAmount());
+        message.setSubject("token");
+        mailSender.send(message);
+        Reserva reserva = reservaRepository.findById(createPagoDto.getReservationId()).orElseThrow(
+                () -> new ResourceNotFoundException("Reserva", "id", createPagoDto.getReservationId())
+        );
+        reserva.setReservationStatusCode(Status.TERMINADO);
+        Pago pago = new Pago();
+        pago.setReservation(reserva);
+        pago.setStatus(Status.TERMINADO);
+        pago.setPaymentAmount(createPagoDto.getPaymentAmount());
+        reservaRepository.save(reserva);
+        return modelMapper.map(pagoRepository.save(pago), PagoDto.class);
+    }
+}

backend/src/main/java/com/app/backend/service/impl/PasajeroServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.dto.PasajeroDto;
+import com.app.backend.dto.UserDto;
+import com.app.backend.exception.ResourceNotFoundException;
+import com.app.backend.model.Pasajero;
+import com.app.backend.model.Role;
+import com.app.backend.repository.PasajeroRepository;
+import com.app.backend.service.PasajeroService;
+import org.modelmapper.ModelMapper;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class PasajeroServiceImpl implements PasajeroService {
+
+    private final PasajeroRepository pasajeroRepository;
+
+    private final AuthenticationServiceImpl authenticationServiceImpl;
+    private final ModelMapper modelMapper;
+
+    public PasajeroServiceImpl(PasajeroRepository pasajeroRepository, AuthenticationServiceImpl authenticationServiceImpl, ModelMapper modelMapper) {
+        this.pasajeroRepository = pasajeroRepository;
+        this.authenticationServiceImpl = authenticationServiceImpl;
+        this.modelMapper = modelMapper;
+    }
+
+    @Override
+    public Page<PasajeroDto> getAllPasajeros(Pageable pageable) {
+        return pasajeroRepository.findAll(pageable).map(pasajero -> modelMapper.map(pasajero, PasajeroDto.class));
+    }
+
+    @Override
+    public List<PasajeroDto> getAllPasajeros() {
+        return pasajeroRepository.findAll().stream().map(pasajero -> modelMapper.map(pasajero, PasajeroDto.class)).toList();
+    }
+
+    @Override
+    public PasajeroDto getPasajeroById(Long pasajeroId) {
+        Pasajero optionalPasajero = pasajeroRepository.findById(pasajeroId).orElseThrow(
+                () -> new ResourceNotFoundException("Pasajero", "id", pasajeroId)
+        );
+        return modelMapper.map(optionalPasajero, PasajeroDto.class);
+    }
+
+    @Override
+    public PasajeroDto createPasajero(PasajeroDto pasajeroDto) {
+        Pasajero pasajero = pasajeroRepository.save(modelMapper.map(pasajeroDto, Pasajero.class));
+        UserDto userDto = new UserDto();
+        userDto.setEmail(pasajero.getEmailAddress());
+        userDto.setFirstName(pasajero.getFirstName());
+        userDto.setLastName(pasajero.getLastName());
+        userDto.setPassword(pasajero.getEmailAddress());
+        authenticationServiceImpl.register(userDto, Role.ROLE_PASSENGER);
+        return modelMapper.map(pasajero, PasajeroDto.class);
+    }
+
+    @Override
+    public PasajeroDto updatePasajero(Long pasajeroId, PasajeroDto pasajeroDto) {
+        Pasajero optionalPasajero = pasajeroRepository.findById(pasajeroId).orElseThrow(
+                () -> new ResourceNotFoundException("Pasajero", "id", pasajeroId)
+        );
+        optionalPasajero.setFirstName(pasajeroDto.getFirstName());
+        optionalPasajero.setSecondName(pasajeroDto.getSecondName());
+        optionalPasajero.setLastName(pasajeroDto.getLastName());
+        optionalPasajero.setPhoneNumber(pasajeroDto.getPhoneNumber());
+        optionalPasajero.setEmailAddress(pasajeroDto.getEmailAddress());
+        optionalPasajero.setCity(pasajeroDto.getCity());
+        optionalPasajero.setCountry(pasajeroDto.getCountry());
+        optionalPasajero.setOtherDetails(pasajeroDto.getOtherDetails());
+        return modelMapper.map(pasajeroRepository.save(optionalPasajero), PasajeroDto.class);
+    }
+
+    @Override
+    public PasajeroDto deletePasajero(Long pasajeroId) {
+        Pasajero optionalPasajero = pasajeroRepository.findById(pasajeroId).orElseThrow(
+                () -> new ResourceNotFoundException("Pasajero", "id", pasajeroId)
+        );
+        pasajeroRepository.deleteById(pasajeroId);
+        return modelMapper.map(optionalPasajero, PasajeroDto.class);
+    }
+}

backend/src/main/java/com/app/backend/service/impl/ReservaServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.dto.ReservaDto;
+import com.app.backend.dto.create.CreateReservaDto;
+import com.app.backend.exception.ResourceNotFoundException;
+import com.app.backend.model.*;
+import com.app.backend.repository.AgenteRepository;
+import com.app.backend.repository.EscalaRepository;
+import com.app.backend.repository.PasajeroRepository;
+import com.app.backend.repository.ReservaRepository;
+import com.app.backend.service.ReservaService;
+import org.modelmapper.ModelMapper;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class ReservaServiceImpl implements ReservaService {
+
+    private final ReservaRepository reservaRepository;
+
+    private final AgenteRepository agenteRepository;
+
+    private final PasajeroRepository pasajeroRepository;
+
+    private final EscalaRepository escalaRepository;
+
+    private final ModelMapper modelMapper;
+
+    public ReservaServiceImpl(ReservaRepository reservaRepository, AgenteRepository agenteRepository, PasajeroRepository pasajeroRepository, EscalaRepository escalaRepository, ModelMapper modelMapper) {
+        this.reservaRepository = reservaRepository;
+        this.agenteRepository = agenteRepository;
+        this.pasajeroRepository = pasajeroRepository;
+        this.escalaRepository = escalaRepository;
+        this.modelMapper = modelMapper;
+    }
+
+    @Override
+    public Page<ReservaDto> getAllReservas(Pageable pageable) {
+        return reservaRepository.findAll(pageable).map(reserva -> modelMapper.map(reserva, ReservaDto.class));
+    }
+
+    @Override
+    public List<ReservaDto> getAllReservasByEmail(String email_address) {
+        return reservaRepository.findByPassenger_EmailAddress(email_address).stream().map(reserva -> modelMapper.map(reserva, ReservaDto.class)).toList();
+    }
+
+    @Override
+    public ReservaDto getReservaById(Long reservaId) {
+        Reserva reserva = reservaRepository.findById(reservaId).orElseThrow(
+                () -> new ResourceNotFoundException("Reserva", "id", reservaId)
+        );
+        return modelMapper.map(reserva, ReservaDto.class);
+    }
+
+    @Override
+    public ReservaDto createReserva(CreateReservaDto reservaDto) {
+        Agente agente = agenteRepository.findById(reservaDto.getAgentId()).orElseThrow(
+                () -> new ResourceNotFoundException("Agente", "id", reservaDto.getAgentId())
+        );
+        Pasajero pasajero = pasajeroRepository.findById(reservaDto.getPassengerId()).orElseThrow(
+                () -> new ResourceNotFoundException("Pasajero", "id", reservaDto.getPassengerId())
+        );
+        Escala escala = escalaRepository.findById(reservaDto.getLegId()).orElseThrow(
+                () -> new ResourceNotFoundException("Escala", "id", reservaDto.getLegId())
+        );
+        Reserva reserva = new Reserva();
+        reserva.setAgent(agente);
+        reserva.setPassenger(pasajero);
+        reserva.setReservationStatusCode(Status.EN_PROCESO);
+        reserva.setTravelTypeClass(reservaDto.getTravelTypeClass());
+        reserva.setNumberInParty(reservaDto.getNumberInParty());
+        reserva.setLeg(escala);
+        reserva.setTicketCode("RV00" + escala.getLegId().toString());
+        return modelMapper.map(reservaRepository.save(reserva), ReservaDto.class);
+    }
+
+    @Override
+    public ReservaDto updateReserva(Long reservaId, CreateReservaDto reservaDto) {
+        Reserva reserva = reservaRepository.findById(reservaId).orElseThrow(
+                () -> new ResourceNotFoundException("Reserva", "id", reservaId)
+        );
+        Agente agente = agenteRepository.findById(reservaDto.getAgentId()).orElseThrow(
+                () -> new ResourceNotFoundException("Agente", "id", reservaDto.getAgentId())
+        );
+        Pasajero pasajero = pasajeroRepository.findById(reservaDto.getPassengerId()).orElseThrow(
+                () -> new ResourceNotFoundException("Pasajero", "id", reservaDto.getPassengerId())
+        );
+        Escala escala = escalaRepository.findById(reservaDto.getLegId()).orElseThrow(
+                () -> new ResourceNotFoundException("Escala", "id", reservaDto.getLegId())
+        );
+        reserva.setAgent(agente);
+        reserva.setPassenger(pasajero);
+        reserva.setReservationStatusCode(Status.EN_PROCESO);
+        reserva.setTravelTypeClass(reservaDto.getTravelTypeClass());
+        reserva.setNumberInParty(reservaDto.getNumberInParty());
+        reserva.setLeg(escala);
+        reserva.setTicketCode("RV00" + escala.getLegId().toString());
+        return modelMapper.map(reservaRepository.save(reserva), ReservaDto.class);
+    }
+
+    @Override
+    public ReservaDto deleteReserva(Long reservaId) {
+        Reserva reserva = reservaRepository.findById(reservaId).orElseThrow(
+                () -> new ResourceNotFoundException("Reserva", "id", reservaId)
+        );
+        reserva.setReservationStatusCode(Status.CANCELADO);
+        return modelMapper.map(reservaRepository.save(reserva),ReservaDto.class);
+    }
+}

backend/src/main/java/com/app/backend/service/impl/VueloServiceImpl.java

+package com.app.backend.service.impl;
+
+import com.app.backend.dto.VueloDto;
+import com.app.backend.dto.create.CreateVueloDto;
+import com.app.backend.exception.ResourceNotFoundException;
+import com.app.backend.model.Aereolinea;
+import com.app.backend.model.Aereopuerto;
+import com.app.backend.model.Avion;
+import com.app.backend.model.Vuelo;
+import com.app.backend.repository.AereolineaRepository;
+import com.app.backend.repository.AereopuertoRepository;
+import com.app.backend.repository.AvionRepository;
+import com.app.backend.repository.VueloRepository;
+import com.app.backend.service.VueloService;
+import org.modelmapper.ModelMapper;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class VueloServiceImpl implements VueloService {
+
+    private final VueloRepository vueloRepository;
+
+    private final AvionRepository avionRepository;
+
+    private final AereopuertoRepository aereopuertoRepository;
+
+    private final AereolineaRepository aereolineaRepository;
+
+    private final ModelMapper modelMapper;
+
+    public VueloServiceImpl(VueloRepository vueloRepository, AvionRepository avionRepository, AereopuertoRepository aereopuertoRepository, AereolineaRepository aereolineaRepository, ModelMapper modelMapper) {
+        this.vueloRepository = vueloRepository;
+        this.avionRepository = avionRepository;
+        this.aereopuertoRepository = aereopuertoRepository;
+        this.aereolineaRepository = aereolineaRepository;
+        this.modelMapper = modelMapper;
+    }
+
+    @Override
+    public Page<VueloDto> getVuelos(Pageable pageable) {
+        return vueloRepository.findAll(pageable).map(vuelo -> modelMapper.map(vuelo, VueloDto.class));
+    }
+
+    @Override
+    public VueloDto getVueloById(Long vueloId) {
+        Vuelo optionalVuelo = vueloRepository.findById(vueloId).orElseThrow(
+                () -> new ResourceNotFoundException("Vuelo", "id", vueloId)
+        );
+        return modelMapper.map(optionalVuelo, VueloDto.class);
+    }
+
+    @Override
+    public List<Aereolinea> getAereolineas() {
+        return aereolineaRepository.findAll();
+    }
+
+    @Override
+    public List<Avion> getAviones() {
+        return avionRepository.findAll();
+    }
+
+    @Override
+    public VueloDto createVuelo(CreateVueloDto createVueloDto) {
+        Avion optionalAvion = avionRepository.findById(createVueloDto.getAirplaneId()).orElseThrow(
+                () -> new ResourceNotFoundException("Avion", "id", createVueloDto.getAirplaneId())
+        );
+        Aereolinea optionalAereolinea = aereolineaRepository.findById(createVueloDto.getAirlineId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereolinea", "id", createVueloDto.getAirlineId())
+        );
+        Aereopuerto optionalAereopuertoOrigen = aereopuertoRepository.findById(createVueloDto.getOriginAirportId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", createVueloDto.getOriginAirportId())
+        );
+        Aereopuerto optionalDAereopuertoDestino = aereopuertoRepository.findById(createVueloDto.getDestinationAirportId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", createVueloDto.getDestinationAirportId())
+        );
+        Vuelo optionalVuelo = new Vuelo();
+        optionalVuelo.setAirline(optionalAereolinea);
+        optionalVuelo.setAirplane(optionalAvion);
+        optionalVuelo.setOrigin_airport(optionalAereopuertoOrigen);
+        optionalVuelo.setDestination_airport(optionalDAereopuertoDestino);
+        optionalVuelo.setArrivalDate(createVueloDto.getArrivalDate());
+        optionalVuelo.setArrivalTime(createVueloDto.getArrivalTime());
+        optionalVuelo.setDepartureDate(createVueloDto.getDepartureDate());
+        optionalVuelo.setDepartureTime(createVueloDto.getDepartureTime());
+        return modelMapper.map(vueloRepository.save(optionalVuelo), VueloDto.class);
+    }
+
+    @Override
+    public VueloDto updateVuelo(Long vueloId, CreateVueloDto createVueloDto) {
+        Vuelo optionalVuelo = vueloRepository.findById(vueloId).orElseThrow(
+                () -> new ResourceNotFoundException("Vuelo", "id", vueloId)
+        );
+        Avion optionalAvion = avionRepository.findById(createVueloDto.getAirplaneId()).orElseThrow(
+                () -> new ResourceNotFoundException("Avion", "id", createVueloDto.getAirplaneId())
+        );
+        Aereolinea optionalAereolinea = aereolineaRepository.findById(createVueloDto.getAirlineId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereolinea", "id", createVueloDto.getAirlineId())
+        );
+        Aereopuerto optionalAereopuertoOrigen = aereopuertoRepository.findById(createVueloDto.getOriginAirportId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", createVueloDto.getOriginAirportId())
+        );
+        Aereopuerto optionalDAereopuertoDestino = aereopuertoRepository.findById(createVueloDto.getDestinationAirportId()).orElseThrow(
+                () -> new ResourceNotFoundException("Aereopuerto", "id", createVueloDto.getDestinationAirportId())
+        );
+        optionalVuelo.setAirline(optionalAereolinea);
+        optionalVuelo.setAirplane(optionalAvion);
+        optionalVuelo.setOrigin_airport(optionalAereopuertoOrigen);
+        optionalVuelo.setDestination_airport(optionalDAereopuertoDestino);
+        optionalVuelo.setArrivalDate(createVueloDto.getArrivalDate());
+        optionalVuelo.setArrivalTime(createVueloDto.getArrivalTime());
+        optionalVuelo.setDepartureDate(createVueloDto.getDepartureDate());
+        optionalVuelo.setDepartureTime(createVueloDto.getDepartureTime());
+        return modelMapper.map(vueloRepository.save(optionalVuelo), VueloDto.class);
+    }
+
+    @Override
+    public VueloDto deleteVuelo(Long vueloId) {
+        Vuelo optionalVuelo = vueloRepository.findById(vueloId).orElseThrow(
+                () -> new ResourceNotFoundException("Vuelo", "id", vueloId)
+        );
+        vueloRepository.deleteById(vueloId);
+        return modelMapper.map(optionalVuelo, VueloDto.class);
+    }
+}

backend/src/main/resources/application.properties

+#Connection and configuration to MySql Database
+spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:${MYSQL_PORT:3306}/bytedb
+spring.datasource.username=${MYSQL_USER:root}
+spring.datasource.password=${MYSQL_PASSWORD:#Devilmaycry5}
+spring.jpa.open-in-view=true
+spring.jpa.show-sql=true
+# Dialect for Hibernate
+spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
+# Hibernate ddl auto (create, create-drop, validate, update)
+spring.jpa.hibernate.ddl-auto=update
+# Actuator
+management.endpoints.web.exposure.include=*
+management.info.env.enabled=true
+management.endpoint.health.show-details=always
+info.app.name=Spring Boot Rest API
+info.app.description=For management of the users
+info.app.version=1.0.0
+# Email
+spring.mail.host=smtp.gmail.com
+spring.mail.port=587
+spring.mail.username=w7moises@gmail.com
+spring.mail.password=jnwhtmsqqslshohh
+spring.mail.properties.mail.smtp.auth=true
+spring.mail.properties.mail.smtp.starttls.enable=true
\ No newline at end of file

backend/src/main/resources/data.sql

+-- bytedb.aereolineas definition
+
+CREATE TABLE `aereolineas`
+(
+    `airline_id`   bigint(20)   NOT NULL AUTO_INCREMENT,
+    `airline_code` varchar(255) NOT NULL,
+    `airline_name` varchar(255) NOT NULL,
+    PRIMARY KEY (`airline_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.aereopuertos definition
+
+CREATE TABLE `aereopuertos`
+(
+    `airport_id`       bigint(20)   NOT NULL AUTO_INCREMENT,
+    `airport_location` varchar(255) NOT NULL,
+    `airport_name`     varchar(255) NOT NULL,
+    `other_details`    varchar(255) NOT NULL,
+    PRIMARY KEY (`airport_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.agentes definition
+
+CREATE TABLE `agentes`
+(
+    `agent_id`      bigint(20)   NOT NULL AUTO_INCREMENT,
+    `agent_details` varchar(255) NOT NULL,
+    `agent_name`    varchar(50)  NOT NULL,
+    PRIMARY KEY (`agent_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.aviones definition
+
+CREATE TABLE `aviones`
+(
+    `aircraft_id` bigint(20)   NOT NULL AUTO_INCREMENT,
+    `capacity`    bigint(20)   NOT NULL,
+    `maker`       varchar(255) NOT NULL,
+    `model`       varchar(255) NOT NULL,
+    PRIMARY KEY (`aircraft_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.costos definition
+
+CREATE TABLE `costos`
+(
+    `cost_id`            bigint(20)     NOT NULL AUTO_INCREMENT,
+    `flight_cost`        decimal(38, 2) NOT NULL,
+    `valid_from_date`    datetime       NOT NULL,
+    `valid_to_date`      datetime       NOT NULL,
+    `airline_airline_id` bigint(20) DEFAULT NULL,
+    `flight_flight_id`   bigint(20) DEFAULT NULL,
+    PRIMARY KEY (`cost_id`),
+    KEY `FK8ue1cusii1r2rd270h3f5qsjq` (`airline_airline_id`),
+    KEY `FK26g8xpurptkc1j17e3ttp3gnq` (`flight_flight_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.escalas definition
+
+CREATE TABLE `escalas`
+(
+    `leg_id`                         bigint(20)   NOT NULL AUTO_INCREMENT,
+    `actual_arrival_date`            datetime   DEFAULT NULL,
+    `actual_arrival_time`            varchar(255) NOT NULL,
+    `actual_departure_date`          datetime   DEFAULT NULL,
+    `actual_departure_time`          varchar(255) NOT NULL,
+    `destination_airport_airport_id` bigint(20) DEFAULT NULL,
+    `flight_flight_id`               bigint(20) DEFAULT NULL,
+    `origin_airport_airport_id`      bigint(20) DEFAULT NULL,
+    PRIMARY KEY (`leg_id`),
+    KEY `FKol2omv64mfnjifjx8bxqiy436` (`destination_airport_airport_id`),
+    KEY `FK865l312v1lj0cxfeiimooask` (`flight_flight_id`),
+    KEY `FK7uwchy43gnb48piopgp3lx7yo` (`origin_airport_airport_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.pagos definition
+
+CREATE TABLE `pagos`
+(
+    `payment_id`                 bigint(20)     NOT NULL AUTO_INCREMENT,
+    `payment_amount`             decimal(38, 2) NOT NULL,
+    `payment_date`               datetime       NOT NULL,
+    `status`                     varchar(255) DEFAULT NULL,
+    `reservation_reservation_id` bigint(20)   DEFAULT NULL,
+    PRIMARY KEY (`payment_id`),
+    KEY `FK71lbbpmk8mt3whedim1cj37kc` (`reservation_reservation_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.pasajeros definition
+
+CREATE TABLE `pasajeros`
+(
+    `passenger_id`  bigint(20)   NOT NULL AUTO_INCREMENT,
+    `city`          varchar(255) NOT NULL,
+    `country`       varchar(255) NOT NULL,
+    `email_address` varchar(255) NOT NULL,
+    `first_name`    varchar(255) NOT NULL,
+    `last_name`     varchar(255) NOT NULL,
+    `other_details` varchar(255) NOT NULL,
+    `phone_number`  varchar(255) NOT NULL,
+    `second_name`   varchar(255) NOT NULL,
+    PRIMARY KEY (`passenger_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.reservas definition
+
+CREATE TABLE `reservas`
+(
+    `reservation_id`          bigint(20)   NOT NULL AUTO_INCREMENT,
+    `number_in_party`         bigint(20)   NOT NULL,
+    `reservation_date`        datetime     NOT NULL,
+    `reservation_status_code` varchar(255) NOT NULL,
+    `ticket_code`             varchar(6)   NOT NULL,
+    `travel_type_class`       varchar(255) NOT NULL,
+    `agent_agent_id`          bigint(20) DEFAULT NULL,
+    `leg_leg_id`              bigint(20) DEFAULT NULL,
+    `passenger_passenger_id`  bigint(20) DEFAULT NULL,
+    PRIMARY KEY (`reservation_id`),
+    KEY `FKkt5qvbevrfu51egqt2912q7km` (`agent_agent_id`),
+    KEY `FK36dopqe7f9q2gy2c213cned22` (`leg_leg_id`),
+    KEY `FKs18jlx7gs08qivogd3q3hbkf3` (`passenger_passenger_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.tokens definition
+
+CREATE TABLE `tokens`
+(
+    `id`         int(11) NOT NULL,
+    `expired`    bit(1)  NOT NULL,
+    `revoked`    bit(1)  NOT NULL,
+    `token`      varchar(255) DEFAULT NULL,
+    `token_type` varchar(255) DEFAULT NULL,
+    `user_id`    int(11)      DEFAULT NULL,
+    PRIMARY KEY (`id`),
+    UNIQUE KEY `UK_na3v9f8s7ucnj16tylrs822qj` (`token`),
+    KEY `FK2dylsfo39lgjyqml2tbe0b0ss` (`user_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.tokens_seq definition
+
+CREATE TABLE `tokens_seq`
+(
+    `next_val` bigint(20) DEFAULT NULL
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.users definition
+
+CREATE TABLE `users`
+(
+    `id`         int(11)      NOT NULL AUTO_INCREMENT,
+    `email`      varchar(255) NOT NULL,
+    `first_name` varchar(255) NOT NULL,
+    `last_name`  varchar(255) NOT NULL,
+    `password`   varchar(255) DEFAULT NULL,
+    `role`       varchar(255) DEFAULT NULL,
+    PRIMARY KEY (`id`),
+    UNIQUE KEY `UK_6dotkott2kjsp8vw4d0m25fb7` (`email`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+
+
+-- bytedb.vuelos definition
+
+CREATE TABLE `vuelos`
+(
+    `flight_id`                      bigint(20)   NOT NULL AUTO_INCREMENT,
+    `arrival_date`                   datetime     NOT NULL,
+    `arrival_time`                   varchar(255) NOT NULL,
+    `departure_date`                 datetime     NOT NULL,
+    `departure_time`                 varchar(255) NOT NULL,
+    `airline_airline_id`             bigint(20) DEFAULT NULL,
+    `airplane_aircraft_id`           bigint(20) DEFAULT NULL,
+    `destination_airport_airport_id` bigint(20) DEFAULT NULL,
+    `origin_airport_airport_id`      bigint(20) DEFAULT NULL,
+    PRIMARY KEY (`flight_id`),
+    KEY `FKnr9mvf5h2ec1gnk7d1j0evrxi` (`airline_airline_id`),
+    KEY `FKqqinor956veaqfa4iave2f2th` (`airplane_aircraft_id`),
+    KEY `FKicvbatmsi447q27uxlmhd9bqo` (`destination_airport_airport_id`),
+    KEY `FK4m5shxkt3wr8cnbds1615pvns` (`origin_airport_airport_id`)
+) ENGINE = MyISAM
+  DEFAULT CHARSET = latin1;
+#Token
+insert into bytedb.tokens_seq (next_val)
+VALUES (0);
+
+#Aviones
+insert into bytedb.aviones(model, maker, capacity)
+values ('Boeing 747', 'EEUU Refiner', 500);
+insert into bytedb.aviones(model, maker, capacity)
+values ('Boeing 777', 'EEUU Refiner', 400);
+insert into bytedb.aviones(model, maker, capacity)
+values ('Boeing 787', 'EEUU Refiner', 300);
+insert into bytedb.aviones(model, maker, capacity)
+values ('Airbus A380', 'Airbus', 500);
+insert into bytedb.aviones(model, maker, capacity)
+values ('Airbus A350', 'Airbus', 400);
+insert into bytedb.aviones(model, maker, capacity)
+values ('Airbus A330', 'Airbus', 300);
+#Aereolineas
+insert into bytedb.aereolineas(airline_name, airline_code)
+values ('American Airlines', 'AA');
+insert into bytedb.aereolineas(airline_name, airline_code)
+values ('Delta Airlines', 'DL');
+insert into bytedb.aereolineas(airline_name, airline_code)
+values ('United Airlines', 'UA');
+insert into bytedb.aereolineas(airline_name, airline_code)
+values ('Air France', 'AF');
+insert into bytedb.aereolineas(airline_name, airline_code)
+values ('British Airways', 'BA');
+#Aereopuertos
+insert into bytedb.aereopuertos(airport_name, airport_location, other_details)
+values ('Jorge Chavez 1', 'Av. Elmer Faucett s/n, Callao 07031', 'El más grande del Perú');
+insert into bytedb.aereopuertos(airport_name, airport_location, other_details)
+values ('Jorge Chavez 2', 'Av. Elmer Faucett s/n, Callao 07031', 'El más grande del Perú');
+insert into bytedb.aereopuertos(airport_name, airport_location, other_details)
+values ('Jorge Chavez 3', 'Av. Elmer Faucett s/n, Callao 07031', 'El más grande del Perú');
+insert into bytedb.aereopuertos(airport_name, airport_location, other_details)
+values ('Jorge Chavez 4', 'Av. Elmer Faucett s/n, Callao 07031', 'El más grande del Perú');
+#Usuarios
+INSERT INTO bytedb.users (email, first_name, last_name, password, `role`)
+VALUES ('agente@gmail.com', 'Walter', 'Molina', '$2a$10$0Q0zupWFx1m4j80fbrCoTuRsgWPWQBUiy0g3vTn.sNCGpNMBUxXjC',
+        'ROLE_AGENT'),
+       ('supervisor@gmail.com', 'Walter', 'Molina', '$2a$10$qjlWAs8aNr3zQwHgi0aSh.b/teAcAC.E5zw2khDqWJ0L0Zmph7bdy',
+        'ROLE_SUPERVISOR'),
+       ('w7moises@gmail.com', 'Walter', 'Molina Paucar', '$2a$10$u0A2f296DXTemCKIN9pS4ey4/A/KZof949xYuu0XGOaE/iTPozAWq',
+        'ROLE_PASSENGER');
+#Tokens
+INSERT INTO bytedb.tokens (id, expired, revoked, token, token_type, user_id)
+VALUES (1, 1, 1,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZ2VudGVAZ21haWwuY29tIiwiaWF0IjoxNjg0NTI1NDkzLCJleHAiOjE2ODQ1Mzk4OTN9.g3cPSKnIxvvSDmKp7QYxLSOmEoL5v0qDTtXDSS0GkoA',
+        'BEARER', 2),
+       (2, 1, 1,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzdXBlcnZpc29yQGdtYWlsLmNvbSIsImlhdCI6MTY4NDUyNTUyMywiZXhwIjoxNjg0NTM5OTIzfQ.0hKJ8bGv98eUMa_yzq3b05Mr3ePYKM5l5XecJYuc92o',
+        'BEARER', 3),
+       (3, 1, 1,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZ2VudGVAZ21haWwuY29tIiwiaWF0IjoxNjg0NTI1NTQ2LCJleHAiOjE2ODQ1Mzk5NDZ9.uGwq4d30TVmLhuk_KPj6yLunMP-PXuULIJMeYtjDbdc',
+        'BEARER', 2),
+       (4, 1, 1,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ3N21vaXNlc0BnbWFpbC5jb20iLCJpYXQiOjE2ODQ1MjU3MTIsImV4cCI6MTY4NDU0MDExMn0.aSGeyXF3UZXYt7Fm4HT15H6FJLaKiIRt7MdnTXxqNWg',
+        'BEARER', 4),
+       (5, 1, 1,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzdXBlcnZpc29yQGdtYWlsLmNvbSIsImlhdCI6MTY4NDUyNTczNywiZXhwIjoxNjg0NTQwMTM3fQ.FvSjUiFt_4uBs_e5p5kW2OMTR_jcOEwxL84Wvei0UF4',
+        'BEARER', 3),
+       (6, 0, 0,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzdXBlcnZpc29yQGdtYWlsLmNvbSIsImlhdCI6MTY4NDUyNTgyOCwiZXhwIjoxNjg0NTQwMjI4fQ.BX-RzQ6mrQGb0ROG-icFnyyymoIvGTQj4guv2PYjEoo',
+        'BEARER', 3),
+       (7, 1, 1,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ3N21vaXNlc0BnbWFpbC5jb20iLCJpYXQiOjE2ODQ1MjU5NDQsImV4cCI6MTY4NDU0MDM0NH0.gwjrmLEEsKSxb1gsHLJ9JXTBibAQ6cMjdqlrqwMh9VE',
+        'BEARER', 4),
+       (8, 0, 0,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZ2VudGVAZ21haWwuY29tIiwiaWF0IjoxNjg0NTI1OTUzLCJleHAiOjE2ODQ1NDAzNTN9.9di4EAqCkKa432kMLrrMjLC5ClDP_SzQ85M3cm-sASg',
+        'BEARER', 2),
+       (9, 0, 0,
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ3N21vaXNlc0BnbWFpbC5jb20iLCJpYXQiOjE2ODQ1MjU5ODUsImV4cCI6MTY4NDU0MDM4NX0.K1S2-K0DwpDI4pejQ4agaqzxTatzv7J7ncuiLEFWCTQ',
+        'BEARER', 4);
+#Pasajeros
+INSERT INTO bytedb.pasajeros (city, country, email_address, first_name, last_name, other_details, phone_number,
+                              second_name)
+VALUES ('San Miguel', 'Peru', 'w7moises@gmail.com', 'Walter', 'Molina Paucar', 'Le gusta viajar a europa', '972250768',
+        'Moises');
+#Agentes
+INSERT INTO bytedb.agentes (agent_details, agent_name)
+VALUES ('El mejor del mundo', 'Jhon Trivago');
+#Vuelos
+INSERT INTO bytedb.vuelos (arrival_date, arrival_time, departure_date, departure_time, airline_airline_id,
+                           airplane_aircraft_id, destination_airport_airport_id, origin_airport_airport_id)
+VALUES ('2023-05-19 19:00:00', '14:55', '2023-05-18 19:00:00', '14:52', 2, 2, 4, 1);
+#Escalas
+INSERT INTO bytedb.escalas (actual_arrival_date, actual_arrival_time, actual_departure_date, actual_departure_time,
+                            destination_airport_airport_id, flight_flight_id, origin_airport_airport_id)
+VALUES ('2023-05-19 19:00:00', '14:54', '2023-05-18 19:00:00', '14:55', 3, 1, 1);
+#Costos
+INSERT INTO bytedb.costos (flight_cost, valid_from_date, valid_to_date, airline_airline_id, flight_flight_id)
+VALUES (300.00, '2023-05-18 19:00:00', '2023-05-19 19:00:00', 2, 1);
+#Reservas
+INSERT INTO bytedb.reservas (number_in_party, reservation_date, reservation_status_code, ticket_code, travel_type_class,
+                             agent_agent_id, leg_leg_id, passenger_passenger_id)
+VALUES (400, '2023-05-19 14:53:00', 'EN_PROCESO', 'RV001', 'EJECUTIVO', 1, 1, 1);
\ No newline at end of file

backend/src/test/java/com/app/backend/BackendApplicationTests.java

+package com.app.backend;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+class BackendApplicationTests {
+
+    @Test
+    void contextLoads() {
+    }
+
+}

frontend/.editorconfig

+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

frontend/.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

frontend/.vscode/extensions.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

frontend/.vscode/launch.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

frontend/.vscode/tasks.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/Dockerfile

+From node:18-alpine as build-step
+WORKDIR /app
+COPY . .
+RUN npm install
+RUN npm run build --prod
+
+FROM nginx:latest
+COPY --from=build-step /app/dist/practica /usr/share/nginx/html
+
+EXPOSE 80
\ No newline at end of file

frontend/README.md

+
+## Iniciar la aplicación en local
+Correr `npm install` para instalar paquetes de node.
+
+Correr `ng serve` para inicializar el servidor y luego ir a la ruta `http://localhost:4200/`.
+
+## Iniciar la aplicación en docker
+Usar los siguientes comandos:
+
+`docker build -t frontend .`
+
+`docker run --name frontend -p 4200:80 frontend`
+
+y luego ir a la ruta `http://localhost:4200/`
\ No newline at end of file

frontend/angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "practica": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/practica",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/@popperjs/core/dist/umd/popper.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "5mb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "practica:build:production"
+            },
+            "development": {
+              "browserTarget": "practica:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "practica:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/purple-green.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

frontend/package.json

+{
+  "name": "practica",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^15.2.0",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.0",
+    "@angular/compiler": "^15.2.0",
+    "@angular/core": "^15.2.0",
+    "@angular/forms": "^15.2.0",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.0",
+    "@angular/platform-browser-dynamic": "^15.2.0",
+    "@angular/router": "^15.2.0",
+    "@popperjs/core": "^2.11.7",
+    "bootstrap": "^5.2.3",
+    "jquery": "^3.6.4",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.12.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.2.4",
+    "@angular/cli": "~15.2.4",
+    "@angular/compiler-cli": "^15.2.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.9.4"
+  }
+}

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

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LoginComponent } from './views/login/login.component';
+import { DashboardPasajeroComponent } from './views/dashboard.pasajero/dashboard.pasajero.component';
+import { PasarelaComponent } from './components/pasarela/pasarela.component';
+import { DashboardReservasComponent } from './views/dashboard.agente/dashboard.reservas/dashboard.reservas.component';
+import { DashboardPasajerosComponent } from './views/dashboard.agente/dashboard.pasajeros/dashboard.pasajeros.component';
+import { DashboardAgentesComponent } from './views/dashboard.supervisor/dashboard.agentes/dashboard.agentes.component';
+import { DashboardAereopuertosComponent } from './views/dashboard.supervisor/dashboard.aereopuertos/dashboard.aereopuertos.component';
+import { DashboardVuelosComponent } from './views/dashboard.supervisor/dashboard.vuelos/dashboard.vuelos.component';
+import { CreateAereopuertoComponent } from './views/register/create.aereopuerto/create.aereopuerto.component';
+import { CreateAgenteComponent } from './views/register/create.agente/create.agente.component';
+import { CreatePasajeroComponent } from './views/register/create.pasajero/create.pasajero.component';
+import { CreateReservaComponent } from './views/register/create.reserva/create.reserva.component';
+import { CreateVueloComponent } from './views/register/create.vuelo/create.vuelo.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'login', component: LoginComponent },
+  { path: 'dashboard/pasajero', component: DashboardPasajeroComponent },
+  { path: 'dashboard/pasajero/create', component: PasarelaComponent },
+  { path: 'dashboard/agente', component: DashboardReservasComponent },
+  { path: 'dashboard/agente/create', component: CreateReservaComponent },
+  { path: 'dashboard/agente/pasajero', component: DashboardPasajerosComponent },
+  { path: 'dashboard/agente/pasajero/create', component: CreatePasajeroComponent },
+  { path: 'dashboard/supervisor', component: DashboardAgentesComponent },
+  { path: 'dashboard/supervisor/create', component: CreateAgenteComponent },
+  { path: 'dashboard/supervisor/vuelos', component: DashboardVuelosComponent },
+  { path: 'dashboard/supervisor/vuelos/create', component: CreateVueloComponent },
+  { path: 'dashboard/supervisor/aereopuertos', component: DashboardAereopuertosComponent },
+  { path: 'dashboard/supervisor/aereopuertos/create', component: CreateAereopuertoComponent },
+
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

frontend/src/app/app.component.html

+<router-outlet></router-outlet>

frontend/src/app/app.component.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'practica'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('practica');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('practica app is running!');
+  });
+});

frontend/src/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'practica';
+}

frontend/src/app/app.helpers.ts

+/*
+ * Inspinia js helpers:
+ *
+ * correctHeight() - fix the height of main wrapper
+ * detectBody() - detect windows size
+ * smoothlyMenu() - add smooth fade in/out on navigation show/ide
+ *
+ */
+
+declare var jQuery:any;
+
+export function correctHeight() {
+
+  var pageWrapper = jQuery('#page-wrapper');
+  var navbarHeight = jQuery('nav.navbar-default').height();
+  var wrapperHeight = pageWrapper.height();
+
+  if (navbarHeight > wrapperHeight) {
+    pageWrapper.css("min-height", navbarHeight + "px");
+  }
+
+  if (navbarHeight <= wrapperHeight) {
+    if (navbarHeight < jQuery(window).height()) {
+      pageWrapper.css("min-height", jQuery(window).height() + "px");
+    } else {
+      pageWrapper.css("min-height", navbarHeight + "px");
+    }
+  }
+
+  if (jQuery('body').hasClass('fixed-nav')) {
+    if (navbarHeight > wrapperHeight) {
+      pageWrapper.css("min-height", navbarHeight + "px");
+    } else {
+      pageWrapper.css("min-height", jQuery(window).height() - 60 + "px");
+    }
+  }
+}
+
+export function detectBody() {
+  if (jQuery(document).width() < 769) {
+    jQuery('body').addClass('body-small')
+  } else {
+    jQuery('body').removeClass('body-small')
+  }
+}
+
+export function smoothlyMenu() {
+  if (!jQuery('body').hasClass('mini-navbar') || jQuery('body').hasClass('body-small')) {
+    // Hide menu in order to smoothly turn on when maximize menu
+    jQuery('#side-menu').hide();
+    // For smoothly turn on menu
+    setTimeout(
+      function () {
+        jQuery('#side-menu').fadeIn(400);
+      }, 200);
+  } else if (jQuery('body').hasClass('fixed-sidebar')) {
+    jQuery('#side-menu').hide();
+    setTimeout(
+      function () {
+        jQuery('#side-menu').fadeIn(400);
+      }, 100);
+  } else {
+    // Remove all inline style from jquery fadeIn function to reset menu state
+    jQuery('#side-menu').removeAttr('style');
+  }
+}
\ No newline at end of file

frontend/src/app/app.module.ts

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { LoginComponent } from './views/login/login.component';
+import { TableComponent } from './components/table/table.component';
+import { TopnavbarComponent } from './components/topnavbar/topnavbar.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DashboardPasajeroComponent } from './views/dashboard.pasajero/dashboard.pasajero.component';
+import { AngularMaterialModule } from './modules/material.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { PasarelaComponent } from './components/pasarela/pasarela.component';
+import { TarjetaComponent } from './components/tarjeta/tarjeta.component';
+import { ModalDeleteComponent } from './components/modal.delete/modal.delete.component';
+import { DashboardReservasComponent } from './views/dashboard.agente/dashboard.reservas/dashboard.reservas.component';
+import { DashboardPasajerosComponent } from './views/dashboard.agente/dashboard.pasajeros/dashboard.pasajeros.component';
+import { DashboardVuelosComponent } from './views/dashboard.supervisor/dashboard.vuelos/dashboard.vuelos.component';
+import { DashboardAereopuertosComponent } from './views/dashboard.supervisor/dashboard.aereopuertos/dashboard.aereopuertos.component';
+import { DashboardAgentesComponent } from './views/dashboard.supervisor/dashboard.agentes/dashboard.agentes.component';
+import { CreateAereopuertoComponent } from './views/register/create.aereopuerto/create.aereopuerto.component';
+import { CreateAgenteComponent } from './views/register/create.agente/create.agente.component';
+import { CreatePasajeroComponent } from './views/register/create.pasajero/create.pasajero.component';
+import { CreateReservaComponent } from './views/register/create.reserva/create.reserva.component';
+import { CreateVueloComponent } from './views/register/create.vuelo/create.vuelo.component';
+import { HttpClientModule } from '@angular/common/http';
+import { FilterPipePasajero } from './pipe/filter.pasajero.pipe';
+import { FilterPipeAereopuerto } from './pipe/filter.aereopuerto.pipe';
+import { FilterPipeAgente } from './pipe/filter.agente';
+import { FilterPipeReserva } from './pipe/filter.reserva';
+import { FilterPipeVuelo } from './pipe/filter.vuelo.pipe';
+import { DatePipe } from '@angular/common';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    LoginComponent,
+    TopnavbarComponent,
+    DashboardPasajeroComponent,
+    PasarelaComponent,
+    TarjetaComponent,
+    ModalDeleteComponent,
+    TableComponent,
+    DashboardReservasComponent,
+    DashboardPasajerosComponent,
+    DashboardVuelosComponent,
+    DashboardAereopuertosComponent,
+    DashboardAgentesComponent,
+    CreateAereopuertoComponent,
+    CreateAgenteComponent,
+    CreatePasajeroComponent,
+    CreateReservaComponent,
+    CreateVueloComponent,
+    FilterPipePasajero,
+    FilterPipeAereopuerto,
+    FilterPipeAgente,
+    FilterPipeReserva,
+    FilterPipeVuelo,
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    AngularMaterialModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    DatePipe
+  ],
+  providers: [DatePipe],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

frontend/src/app/components/modal.delete/modal.delete.component.html

+<div mat-dialog-content>
+    <p>¿Desea eliminar el elemento seleccionado?</p>
+</div>
+<div mat-dialog-actions class="justify-content-center">
+    <button type="button" (click)="onNoClick()" class="subscribe btn btn-primary btn-block shadow-sm bg-danger">
+        Cancelar</button>
+    <button type="button" (click)="onClick()" class="subscribe btn btn-primary btn-block shadow-sm mx-2">
+        Confirmar</button>
+    <br>
+</div>
\ No newline at end of file

frontend/src/app/components/modal.delete/modal.delete.component.scss

+::ng-deep .cdk-global-scrollblock {
+    position: static !important;
+    overflow-y: hidden;
+}
\ No newline at end of file

frontend/src/app/components/modal.delete/modal.delete.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalDeleteComponent } from './modal.delete.component';
+
+describe('ModalDeleteComponent', () => {
+  let component: ModalDeleteComponent;
+  let fixture: ComponentFixture<ModalDeleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModalDeleteComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ModalDeleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/modal.delete/modal.delete.component.ts

+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Pasajero } from 'src/app/models/pasajero';
+import { PasajeroService } from '../../services/pasajero.service';
+import { AgenteService } from 'src/app/services/agente.service';
+import { AereopuertoService } from 'src/app/services/aereopuerto.service';
+import { ReservaService } from 'src/app/services/reserva.service';
+import { VueloService } from 'src/app/services/vuelo.service';
+import { EscalaService } from 'src/app/services/escala.service';
+import { CostoService } from 'src/app/services/costo.service';
+
+@Component({
+  selector: 'app-modal.delete',
+  templateUrl: './modal.delete.component.html',
+  styleUrls: ['./modal.delete.component.scss']
+})
+export class ModalDeleteComponent {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<ModalDeleteComponent>,
+    private pasajeroService: PasajeroService, private agenteService: AgenteService, private aereopuertoService: AereopuertoService,
+    private reservationService: ReservaService, private vueloService: VueloService, private escalaService: EscalaService,
+    private costoService: CostoService) { }
+
+  onClick(): void {
+    if (this.data.hasOwnProperty('passengerId')) {
+      this.pasajeroService.deletePassenger(this.data.passengerId).subscribe((data: any) => { this.dialogRef.close() });
+    }
+    if (this.data.hasOwnProperty('agentId')) {
+      this.agenteService.deleteAgent(this.data.agentId).subscribe((data: any) => { this.dialogRef.close() });
+    }
+    if (this.data.hasOwnProperty('airportId')) {
+      this.aereopuertoService.deleteAirport(this.data.airportId).subscribe((data: any) => { this.dialogRef.close() });
+    }
+    if (this.data.hasOwnProperty('reservationId')) {
+      this.reservationService.deleteReservation(this.data.reservationId).subscribe((data: any) => { this.dialogRef.close() });
+    }
+    if (this.data.hasOwnProperty('flightId')) {
+      this.vueloService.deleteFlight(this.data.flightId).subscribe((data: any) => { this.dialogRef.close() });
+    }
+    if (this.data.hasOwnProperty('legId')) {
+      this.escalaService.deleteLeg(this.data.legId).subscribe((data: any) => { this.dialogRef.close() });
+    }
+    if (this.data.hasOwnProperty('costId')) {
+      this.costoService.deleteCost(this.data.costId).subscribe((data: any) => { this.dialogRef.close() });
+    }
+    this.dialogRef.close();
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

frontend/src/app/components/pasarela/pasarela.component.html

+<div class="wrapper-sidebar">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul>
+            <li (click)="return()"><a><i class="fas fa-home"></i>Pagos</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <app-tarjeta [id]="id"></app-tarjeta>
+    </div>
+</div>

frontend/src/app/components/pasarela/pasarela.component.scss

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body {
+  background-color: #2F4050;
+}
+
+.wrapper-sidebar {
+  display: flex;
+  position: relative;
+}
+
+.wrapper-sidebar .sidebar {
+  width: 200px;
+  height: 100%;
+  background: #4b4276;
+  padding: 30px 0px;
+  position: fixed;
+}
+
+.wrapper-sidebar .sidebar h2 {
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.wrapper-sidebar .sidebar ul li {
+  padding: 15px;
+  border-bottom: 1px solid #bdb8d7;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wrapper-sidebar .sidebar ul li a {
+  color: #bdb8d7;
+  display: block;
+}
+
+.wrapper-sidebar .sidebar ul li a .fas {
+  width: 25px;
+}
+
+.wrapper-sidebar .sidebar ul li:hover {
+  background-color: #323e49;
+}
+
+.wrapper-sidebar .sidebar ul li:hover a {
+  color: #fff;
+}
+
+.wrapper-sidebar .sidebar .social_media {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.wrapper-sidebar .sidebar .social_media a {
+  display: block;
+  width: 40px;
+  background: #2F4050;
+  height: 40px;
+  line-height: 45px;
+  text-align: center;
+  margin: 0 5px;
+  color: #bdb8d7;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.wrapper-sidebar .main_content {
+  width: 100%;
+  margin-left: 215px;
+}
+
+.wrapper-sidebar .main_content .header {
+  padding: 20px;
+  background: #fff;
+  color: #717171;
+  border-bottom: 1px solid #e0e4e8;
+}
+
+.wrapper-sidebar .main_content .info {
+  margin: 20px;
+  color: #717171;
+  line-height: 25px;
+}
+
+.wrapper-sidebar .main_content .info div {
+  margin-bottom: 20px;
+}
\ No newline at end of file

frontend/src/app/components/pasarela/pasarela.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasarelaComponent } from './pasarela.component';
+
+describe('PasarelaComponent', () => {
+  let component: PasarelaComponent;
+  let fixture: ComponentFixture<PasarelaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PasarelaComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PasarelaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/pasarela/pasarela.component.ts

+import { Component, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-pasarela',
+  templateUrl: './pasarela.component.html',
+  styleUrls: ['./pasarela.component.scss']
+})
+export class PasarelaComponent {
+  @Input() paths: string[] = [];
+  @Input() title: string = '';
+  id: number = 0;
+
+  constructor(private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.id = Number(this.route.snapshot.paramMap.get('id'));
+  }
+
+  public return() {
+    this.router.navigate(['dashboard/pasajero']);
+  }
+}

frontend/src/app/components/table/table.component.html

+<div class="row wrapper border-bottom white-bg page-heading ml-1">
+  <div class="col-lg-12">
+    <h2 class="mt-4">Concepto de {{title}}</h2>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item" *ngFor="let path of paths">
+        <a>{{path}}</a>
+      </li>
+    </ol>
+  </div>
+  <div class="col-lg-2">
+
+  </div>
+</div>
+<div class="wrapper wrapper-content animated fadeInRight">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="ibox ">
+        <div class="ibox-title">
+          <h2>Lista de {{title}}</h2>
+          <h5>Información detallada de todos los {{title}}</h5>
+          <br>
+        </div>
+        <div class="ibox-content">
+          <div class="row">
+            <div class="col-11 form-group">
+              <input type="text" name="filterPost" [(ngModel)]="filterPost" class="form-control form-control-sm m-b-xs"
+                id="filter" placeholder="Search in table">
+            </div>
+            <div class="col d-flex justify-content-center">
+              <button mat-mini-fab class="bg-secondary" (click)="create()" *ngIf="state">
+                <mat-icon>save</mat-icon>
+              </button>
+            </div>
+          </div>
+          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
+            data-filter="#filter" *ngIf="pasajeroFlag">
+            <thead>
+              <tr>
+                <th class="footable-visible footable-sortable footable-first-column">Id<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Primer nombre<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Segundo nombre<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Apellido<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Teléfono<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Email<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Ciudad<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">País<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Detalles<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
+                    class="footable-sort-indicator"></span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="gradeX footable-even" *ngFor="let pasajero of pasajeroPage | filterPasajero:filterPost">
+                <td class="footable-visible">
+                  {{pasajero.passengerId}}
+                </td>
+                <td class="footable-visible">
+                  {{pasajero.firstName}}
+                </td>
+                <td class="footable-visible">
+                  {{pasajero.secondName}}
+                </td>
+                <td class="footable-visible">
+                  {{pasajero.lastName}}
+                </td>
+                <td class="footable-visible">
+                  {{pasajero.phoneNumber}}
+                </td>
+                <td class="footable-visible">
+                  {{pasajero.emailAddress}}
+                </td>
+                <td class="footable-visible">
+                  {{pasajero.city}}
+                </td>
+                <td class="footable-visible">
+                  {{pasajero.country}}
+                </td>
+                <td class="footable-visible">
+                  {{pasajero.otherDetails}}
+                </td>
+                <td><button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
+                    (click)="edit(pasajero)">
+                    &nbsp;Editar&nbsp;&nbsp;&nbsp;</button>
+                  <button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
+                    (click)="delete(pasajero)">
+                    Eliminar</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
+            data-filter="#filter" *ngIf="agenteFlag">
+            <thead>
+              <tr>
+                <th class="footable-visible footable-sortable footable-first-column">Id<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Nombre del agente<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Detalles<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
+                    class="footable-sort-indicator"></span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="gradeX footable-even" *ngFor="let agente of agentePage | filterAgente:filterPost">
+                <td class="footable-visible">
+                  {{agente.agentId}}
+                </td>
+                <td class="footable-visible">
+                  {{agente.agentName}}
+                </td>
+                <td class="footable-visible">
+                  {{agente.agentDetails}}
+                </td>
+                <td><button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
+                    (click)="edit(agente)">
+                    &nbsp;Editar&nbsp;&nbsp;&nbsp;</button>
+                  <button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
+                    (click)="delete(agente)">
+                    Eliminar</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
+            data-filter="#filter" *ngIf="reservaFlag">
+            <thead>
+              <tr>
+                <th class="footable-visible footable-sortable footable-first-column">Id<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Agente<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Pasajero<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Estatus<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Ticket<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Tipos de asiento<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Número de asientos<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
+                    class="footable-sort-indicator"></span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="gradeX footable-even" *ngFor="let reserva of reservaPage | filterReserva:filterPost">
+                <td class="footable-visible">
+                  {{reserva.reservationId}}
+                </td>
+                <td class="footable-visible">
+                  {{reserva.agent.agentName}}
+                </td>
+                <td class="footable-visible">
+                  {{reserva.passenger.firstName | titlecase}} {{reserva.passenger.lastName | titlecase}}
+                </td>
+                <td class="footable-visible">
+                  {{reserva.reservationStatusCode | titlecase}}
+                </td>
+                <td class="footable-visible">
+                  {{reserva.ticketCode}}
+                </td>
+                <td class="footable-visible">
+                  {{reserva.travelTypeClass | titlecase}}
+                </td>
+                <td class="footable-visible">
+                  {{reserva.numberInParty}}
+                </td>
+                <td><button type="button"
+                    [disabled]="reserva.reservationStatusCode=='CANCELADO' || reserva.reservationStatusCode=='TERMINADO'"
+                    class="subscribe btn btn-primary btn-block rounded-pill shadow-sm" (click)="edit(reserva)">
+                    &nbsp;{{button}}&nbsp;&nbsp;&nbsp;</button>
+                  <button type="button"
+                    [disabled]="reserva.reservationStatusCode=='CANCELADO' || reserva.reservationStatusCode=='TERMINADO'"
+                    class="subscribe btn btn-primary btn-block rounded-pill shadow-sm" (click)="delete(reserva)">
+                    Eliminar</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
+            data-filter="#filter" *ngIf="vueloFlag">
+            <thead>
+              <tr>
+                <th class="footable-visible footable-sortable footable-first-column">Id<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Aereolinea<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Avion<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Aereopuerto Origen<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Aereopuerto Destino<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Fecha de salida<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Fecha de llegada<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
+                    class="footable-sort-indicator"></span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="gradeX footable-even" *ngFor="let vuelo of vueloPage | filterVuelo:filterPost">
+                <td class="footable-visible">
+                  {{vuelo.flightId}}
+                </td>
+                <td class="footable-visible">
+                  {{vuelo.airline.airlineName}}
+                </td>
+                <td class="footable-visible">
+                  {{vuelo.airplane.model}}
+                </td>
+                <td class="footable-visible">
+                  {{vuelo.origin_airport.airportName}}
+                </td>
+                <td class="footable-visible">
+                  {{vuelo.destination_airport.airportName}}
+                </td>
+                <td class="footable-visible">
+                  {{vuelo.departureDate}} : {{vuelo.departureTime}}
+                </td>
+                <td class="footable-visible">
+                  {{vuelo.arrivalDate}} : {{vuelo.arrivalTime}}
+                </td>
+                <td><button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
+                    (click)="edit(vuelo)">
+                    &nbsp;Editar&nbsp;&nbsp;&nbsp;</button>
+                  <button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
+                    (click)="delete(vuelo)">
+                    Eliminar</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <table class="footable table table-stripped footable-loaded default mt-3" data-page-size="8"
+            data-filter="#filter" *ngIf="aereopuertoFlag">
+            <thead>
+              <tr>
+                <th class="footable-visible footable-sortable footable-first-column">Id<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Nombre del aereopuerto<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Ubicación<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Detalles<span
+                    class="footable-sort-indicator"></span></th>
+                <th class="footable-visible footable-sortable footable-first-column">Acciones<span
+                    class="footable-sort-indicator"></span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="gradeX footable-even"
+                *ngFor="let aereopuerto of aereopuertoPage | filterAereopuerto:filterPost">
+                <td class="footable-visible">
+                  {{aereopuerto.airportId}}
+                </td>
+                <td class="footable-visible">
+                  {{aereopuerto.airportName}}
+                </td>
+                <td class="footable-visible">
+                  {{aereopuerto.airportLocation}}
+                </td>
+                <td class="footable-visible">
+                  {{aereopuerto.otherDetails}}
+                </td>
+                <td><button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
+                    (click)="edit(aereopuerto)">
+                    &nbsp;Editar&nbsp;&nbsp;&nbsp;</button>
+                  <button type="button" class="subscribe btn btn-primary btn-block rounded-pill shadow-sm"
+                    (click)="delete(aereopuerto)">
+                    Eliminar</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <mat-paginator [length]="totalRegisters" [pageSize]="totalPage" [pageIndex]="actualPage"
+            [pageSizeOptions]="pageSizeOptions" (page)="paging($event)" showFirstLastButtons class="mx-2">
+          </mat-paginator>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

frontend/src/app/components/table/table.component.scss

+::ng-deep .mdc-notched-outline>* {
+    border-color: black !important;
+}
+
+::ng-deep .mdc-text-field--focused .mdc-notched-outline>* {
+    border-color: #1ab394 !important;
+    color: black !important;
+}
+
+::ng-deep .mdc-list-item--selected .mdc-list-item__primary-text, .mdc-list-item--activated .mdc-list-item__primary-text {
+    color: #1ab394 !important;
+}
\ No newline at end of file

frontend/src/app/components/table/table.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/table/table.component.ts

+import { Component, Input, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { Router } from '@angular/router';
+import { ModalDeleteComponent } from '../modal.delete/modal.delete.component';
+import { PasajeroService } from 'src/app/services/pasajero.service';
+import { Pasajero } from 'src/app/models/pasajero';
+import { Agente } from 'src/app/models/agente';
+import { AgenteService } from 'src/app/services/agente.service';
+import { Aereopuerto } from 'src/app/models/aereopuerto';
+import { AereopuertoService } from 'src/app/services/aereopuerto.service';
+import { Reserva } from 'src/app/models/reserva';
+import { ReservaService } from '../../services/reserva.service';
+import { Vuelo } from 'src/app/models/vuelo';
+import { VueloService } from 'src/app/services/vuelo.service';
+import { LoginService } from '../../services/login.service';
+
+@Component({
+  selector: 'app-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss']
+})
+export class TableComponent {
+  @Input() paths: string[] = [];
+  @Input() title: string = '';
+  @Input() data: string = '';
+  @Input() state: boolean = true;
+  @Input() body: string[] = [];
+  filterPost = '';
+  pasajeroPage: Pasajero[] = [];
+  pasajeroFlag: boolean = false;
+  agentePage: Agente[] = [];
+  agenteFlag: boolean = false;
+  button: string = 'Editar';
+  aereopuertoPage: Aereopuerto[] = [];
+  aereopuertoFlag: boolean = false;
+  vueloPage: Vuelo[] = [];
+  vueloFlag: boolean = false;
+  reservaPage: Reserva[] = [];
+  reservaFlag: boolean = false;
+  totalRegisters: number = 0;
+  flag: boolean = false;
+  actualPage: number = 0;
+  totalPage: number = 5;
+  pageSizeOptions: number[] = [5, 10, 25, 100];
+  email: string = '';
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+  constructor(private router: Router, private dialog: MatDialog, private pasajeroService: PasajeroService,
+    private agenteService: AgenteService, private aereopuertoService: AereopuertoService, private reservaService: ReservaService,
+    private vueloService: VueloService, private loginService: LoginService) { }
+
+  ngOnInit(): void {
+    this.email = this.loginService.getEmail()!;
+    this.calculateRange();
+    if (this.data == 'agente/pasajero') {
+      this.pasajeroFlag = true;
+    }
+    if (this.data == 'supervisor') {
+      this.agenteFlag = true;
+    }
+    if (this.data == 'supervisor/vuelos') {
+      this.vueloFlag = true;
+    }
+    if (this.data == 'supervisor/aereopuertos') {
+      this.aereopuertoFlag = true;
+    }
+    if (this.data == 'agente') {
+      this.reservaFlag = true;
+    }
+    if (this.data == 'pasajero') {
+      this.button = 'Pagar';
+      this.reservaFlag = true;
+    }
+  }
+
+  paging(event: PageEvent): void {
+    this.actualPage = event.pageIndex;
+    this.totalPage = event.pageSize;
+    this.calculateRange();
+  }
+
+  private calculateRange() {
+    if (this.data == 'agente/pasajero') {
+      this.pasajeroService.getPassengers(this.actualPage.toString(), this.totalPage.toString()).subscribe((data: any) => {
+        this.totalRegisters = data.totalElements as number;
+        this.pasajeroPage = data.content as Pasajero[];
+      });
+    }
+    if (this.data == 'agente') {
+      this.reservaService.getReservations(this.actualPage.toString(), this.totalPage.toString()).subscribe((data: any) => {
+        this.totalRegisters = data.totalElements as number;
+        this.reservaPage = data.content as Reserva[];
+      });
+    }
+    if (this.data == 'pasajero') {
+      this.reservaService.getReservationsByEmail(this.email).subscribe((data: any) => {
+        this.totalRegisters = data.totalElements as number;
+        this.reservaPage = data as Reserva[];
+      });
+    }
+    if (this.data == 'supervisor') {
+      this.agenteService.getAgents(this.actualPage.toString(), this.totalPage.toString()).subscribe((data: any) => {
+        this.totalRegisters = data.totalElements as number;
+        this.agentePage = data.content as Agente[];
+      });
+    }
+    if (this.data == 'supervisor/vuelos') {
+      this.vueloService.getFlights(this.actualPage.toString(), this.totalPage.toString()).subscribe((data: any) => {
+        this.totalRegisters = data.totalElements as number;
+        this.vueloPage = data.content as Vuelo[];
+      });
+    }
+    if (this.data == 'supervisor/aereopuertos') {
+      this.aereopuertoService.getAirports(this.actualPage.toString(), this.totalPage.toString()).subscribe((data: any) => {
+        this.totalRegisters = data.totalElements as number;
+        this.aereopuertoPage = data.content as Aereopuerto[];
+      });
+    }
+  }
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+
+  public create() {
+    this.router.navigate(['dashboard/' + this.data + '/create', { id: 0 }]);
+  }
+
+  public edit(body: any) {
+    if (this.data == 'agente/pasajero') {
+      this.router.navigate(['dashboard/' + this.data + '/create', { id: body.passengerId }]);
+    }
+    if (this.data == 'agente') {
+      this.router.navigate(['dashboard/' + this.data + '/create', { id: body.reservationId }]);
+    }
+    if (this.data == 'pasajero') {
+      this.router.navigate(['dashboard/' + this.data + '/create', { id: body.reservationId }]);
+    }
+    if (this.data == 'supervisor') {
+      this.router.navigate(['dashboard/' + this.data + '/create', { id: body.agentId }]);
+    }
+    if (this.data == 'supervisor/vuelos') {
+      this.router.navigate(['dashboard/' + this.data + '/create', { id: body.flightId }]);
+    }
+    if (this.data == 'supervisor/aereopuertos') {
+      this.router.navigate(['dashboard/' + this.data + '/create', { id: body.airportId }]);
+    }
+  }
+
+  public delete(data: any) {
+    const dialogRef = this.dialog.open(ModalDeleteComponent, {
+      data: data,
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.calculateRange();
+    });
+  }
+}

frontend/src/app/components/tarjeta/tarjeta.component.html

+<div class="row wrapper border-bottom white-bg page-heading ml-1">
+    <div class="col-lg-12">
+        <h2 class="mt-4">Concepto de Pago</h2>
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a>Dashboard</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a>Concepto de Pago</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a>Pagar</a>
+            </li>
+        </ol>
+    </div>
+    <div class="col-lg-2">
+
+    </div>
+</div>
+<div class="wrapper wrapper-content animated fadeInRight">
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="ibox ">
+                <div class="ibox-title">
+                    <h2>Escoge métodos de pago</h2>
+                    <h5>Información detallada de nuestra tarjeta</h5>
+                    <br>
+                </div>
+                <div class="ibox-content">
+                    <div class="container py-5">
+                        <div class="row">
+                            <div class="col-lg-7 mx-auto">
+                                <div class="bg-light rounded-lg shadow-sm p-5">
+                                    <ul role="tablist" class="nav bg-light nav-pills rounded-pill nav-fill mb-3">
+                                        <li class="nav-item">
+                                            <a data-toggle="pill" (click)="changeOption(0)"
+                                                class="nav-link rounded-pill" [ngClass]="{active:options==0}">
+                                                <i class="fa fa-credit-card"></i>
+                                                Tarjeta
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a data-toggle="pill" (click)="changeOption(1)"
+                                                class="nav-link rounded-pill" [ngClass]="{active:options==1}">
+                                                <i class="fa fa-paypal"></i>
+                                                Paypal
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a data-toggle="pill" (click)="changeOption(2)"
+                                                class="nav-link rounded-pill" [ngClass]="{active:options==2}">
+                                                <i class="fa fa-university"></i>
+                                                Transferencia bancaria
+                                            </a>
+                                        </li>
+                                    </ul>
+                                    <div class="tab-content">
+                                        <div id="nav-tab-card" class="tab-pane fade show active" *ngIf="options==0">
+                                            <p class="alert alert-success">Advertencia</p>
+                                            <form role="form" [formGroup]="paymentForm">
+                                                <div class="form-group">
+                                                    <label for="username">Nombre del titular</label>
+                                                    <input type="text" name="name" placeholder="Ingresar nombre"
+                                                        formControlName="name" required class="form-control">
+                                                </div>
+                                                <div class="form-group mt-3">
+                                                    <label for="cardNumber">Número de tarjeta</label>
+                                                    <div class="input-group">
+                                                        <input type="text" name="cardNumber" formControlName="number"
+                                                            placeholder="Ingresar tarjeta" class="form-control"
+                                                            required>
+                                                    </div>
+                                                </div>
+                                                <div class="row">
+                                                    <div class="col-sm-8">
+                                                        <div class="form-group mt-3">
+                                                            <label><span class="hidden-xs">Fecha de
+                                                                    expiración</span></label>
+                                                            <div class="input-group">
+                                                                <input type="number" placeholder="MM"
+                                                                    formControlName="month" class="form-control"
+                                                                    required>
+                                                                <input type="number" placeholder="YY"
+                                                                    formControlName="year" class="form-control"
+                                                                    required>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-sm-4 mt-3">
+                                                        <div class="form-group mb-4">
+                                                            <label
+                                                                title="Three-digits code on the back of your card">CVV
+                                                                <i class="fa fa-question-circle"></i>
+                                                            </label>
+                                                            <input type="text" maxlength="3" required
+                                                                formControlName="cvv" class="form-control">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="form-group" style="text-align: center;">
+                                                    <button type="submit"
+                                                        class="subscribe btn btn-primary btn-block rounded-pill shadow-sm mt-3"
+                                                        (click)="pay()">
+                                                        Confirmar </button>
+                                                </div>
+                                            </form>
+                                        </div>
+                                        <div id="nav-tab-paypal" class="tab-pane fade show active" *ngIf="options==1">
+                                            <p class="mt-5">Paypal, la mejor manera de pagar online</p>
+                                            <p>
+                                                <button type="button" class="btn btn-primary rounded-pill"><i
+                                                        class="fa fa-paypal mr-2"></i>
+                                                    Iniciar sesión en paypal</button>
+                                            </p>
+                                            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing
+                                                elit,
+                                                sed do eiusmod
+                                                tempor incididunt ut labore et dolore magna aliqua.
+                                            </p>
+                                        </div>
+                                        <div id="nav-tab-bank" class="tab-pane fade show active" *ngIf="options==2">
+                                            <h6 class="mt-5">Detalle de la cuenta a transferir</h6>
+                                            <dl>
+                                                <dt>Banco</dt>
+                                                <dd>Interbank</dd>
+                                            </dl>
+                                            <dl>
+                                                <dt>Número de cuenta</dt>
+                                                <dd>7775877975</dd>
+                                            </dl>
+                                            <dl>
+                                                <dt>Número de cuenta interbancaria</dt>
+                                                <dd>CZ7775877975656</dd>
+                                            </dl>
+                                            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing
+                                                elit,
+                                                sed do eiusmod
+                                                tempor incididunt ut labore et dolore magna aliqua.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

frontend/src/app/components/tarjeta/tarjeta.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TarjetaComponent } from './tarjeta.component';
+
+describe('TarjetaComponent', () => {
+  let component: TarjetaComponent;
+  let fixture: ComponentFixture<TarjetaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TarjetaComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TarjetaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/tarjeta/tarjeta.component.ts

+import { Component, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PagoService } from '../../services/pago.service';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Pago } from 'src/app/models/pago';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-tarjeta',
+  templateUrl: './tarjeta.component.html',
+  styleUrls: ['./tarjeta.component.scss']
+})
+export class TarjetaComponent {
+  options: number = 0;
+  paymentForm!: FormGroup;
+  url!: string;
+  @Input() id: number = 0;
+
+  constructor(private router: Router, private route: ActivatedRoute, private pagoService: PagoService, private snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.paymentForm = new FormGroup({
+      name: new FormControl('', Validators.required),
+      number: new FormControl('', Validators.required),
+      cvv: new FormControl('', Validators.required),
+      month: new FormControl('', Validators.required),
+      year: new FormControl('', Validators.required),
+    });
+  }
+
+  public changeOption(option: number) {
+    this.options = option;
+  }
+
+  pay() {
+    if (this.paymentForm.valid) {
+      var body = new Pago();
+      body.reservationId = this.id;
+      body.paymentAmount = 100;
+      this.pagoService.createPayment(body).subscribe((data: any) => {
+        if (data.length != 0) {
+          this.snackBar.open(
+            'Esperando confirmación de pago',
+            '',
+            {
+              duration: 3000,
+              panelClass: ['red-snackbar'],
+            }
+          );
+        }
+        this.router.navigate(['/dashboard/pasajero']);
+      });
+    }
+  }
+}

frontend/src/app/components/topnavbar/topnavbar.component.html

+<div class="row border-bottom mx-2">
+    <nav class="navbar navbar-static-top gray-bg" role="navigation" style="margin-bottom: 0">
+        <div class="navbar-header">
+            <a class="minimalize-styl-2 btn btn-primary" style="height: 30px;width: 40px;">═<i class="fa fa-bars"></i> </a>
+            <form role="search" class="navbar-form-custom" method="post" action="#">
+                <div class="form-group">
+                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
+                </div>
+            </form>
+        </div>
+        <ul class="nav navbar-top-links navbar-right">
+            <li>
+                <a href="#">
+                    <i class="fa fa-sign-out"></i> Log out
+                </a>
+            </li>
+        </ul>
+
+    </nav>
+</div>
\ No newline at end of file

frontend/src/app/components/topnavbar/topnavbar.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopnavbarComponent } from './topnavbar.component';
+
+describe('TopnavbarComponent', () => {
+  let component: TopnavbarComponent;
+  let fixture: ComponentFixture<TopnavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TopnavbarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TopnavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/topnavbar/topnavbar.component.ts

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

frontend/src/app/models/aereolinea.ts

+export class Aereolinea {
+    airline_id!: number;
+    airlineName!: string;
+    airlineCode!: string;
+}
\ No newline at end of file

frontend/src/app/models/aereopuerto.ts

+export class Aereopuerto {
+    airportId!: number;
+    airportName!: string;
+    airportLocation!: string;
+    otherDetails!: string;
+}
\ No newline at end of file

frontend/src/app/models/agente.ts

+export class Agente {
+    agentId!: number;
+    agentName!: string;
+    agentDetails!: string;
+}
\ No newline at end of file

frontend/src/app/models/avion.ts

+export class Avion {
+    aircraft_id!: number;
+    model!: string;
+    maker!: string;
+    capacity!: number;
+}
\ No newline at end of file

frontend/src/app/models/costo.ts

+import { Aereolinea } from "./aereolinea";
+import { Vuelo } from "./vuelo";
+
+export class Costo {
+    costId!: number;
+    flight!: Vuelo;
+    airline!: Aereolinea;
+    validFromDate!: Date;
+    validToDate!: Date;
+    flightCost!: number;
+}
\ No newline at end of file

frontend/src/app/models/costos.ts

+import { Aereolinea } from "./aereolinea";
+import { Vuelo } from "./vuelo";
+
+export class Costos {
+    costId!: number;
+    flight!: Vuelo;
+    airline!: Aereolinea;
+    validFromDate!: string;
+    validToDate!: string;
+    flightCost!: number;
+}
\ No newline at end of file

frontend/src/app/models/create/createCosto.ts

+export class CreateCosto {
+    flightId!: number;
+    airlineId!: number;
+    validFromDate!: string;
+    validToDate!: string;
+    flightCost!: number;
+}
\ No newline at end of file

frontend/src/app/models/create/createEscala.ts

+export class CreateEscala {
+    flightId!: number;
+    originAirportId!: number;
+    destinationAirportId!: number;
+    actualDepartureTime!: string;
+    actualArrivalTime!: string;
+    actualDepartureDate!: string;
+    actualArrivalDate!: string;
+}
\ No newline at end of file

frontend/src/app/models/create/createReserva.ts

+export class CreateReserva {
+    agentId!: number;
+    passengerId!: number;
+    travelTypeClass!: string;
+    numberInParty!: number;
+    legId!: number;
+}
\ No newline at end of file

frontend/src/app/models/create/createVuelo.ts

+export class CreateVuelo {
+    airlineId!: number;
+    airplaneId!: number;
+    originAirportId!: number;
+    destinationAirportId!: number;
+    departureDate!: string;
+    arrivalDate!: string;
+    departureTime!: string;
+    arrivalTime!: string;
+}
\ No newline at end of file

frontend/src/app/models/escala.ts

+import { Aereopuerto } from "./aereopuerto";
+import { Vuelo } from "./vuelo";
+
+export class Escala {
+    legId!: number;
+    flight!: Vuelo;
+    origin_airport!: Aereopuerto;
+    destination_airport!: Aereopuerto;
+    actualDepartureDate!: string;
+    actualArrivalDate!: string;
+    actualDepartureTime!: string;
+    actualArrivalTime!: string;
+}
\ No newline at end of file

frontend/src/app/models/pago.ts

+export class Pago {
+    reservationId!: number;
+    paymentAmount!: number;
+}
\ No newline at end of file

frontend/src/app/models/pasajero.ts

+export class Pasajero {
+    passengerId!: number;
+    firstName!: string;
+    secondName!: string;
+    lastName!: string;
+    phoneNumber!: string;
+    emailAddress!: string;
+    city!: string;
+    country!: string;
+    otherDetails!: string;
+}
\ No newline at end of file

frontend/src/app/models/reserva.ts

+import { Agente } from "./agente";
+import { Pasajero } from "./pasajero";
+
+export class Reserva {
+    reservationId!: number;
+    agent!: Agente;
+    passenger!: Pasajero;
+    reservationStatusCode!: string;
+    ticketCode!: string;
+    travelTypeClass!: string;
+    reservationDate!: Date;
+    numberInParty!: number;
+}
\ No newline at end of file

frontend/src/app/models/vuelo.ts

+import { Aereolinea } from "./aereolinea";
+import { Aereopuerto } from "./aereopuerto";
+import { Avion } from "./avion";
+
+export class Vuelo {
+    flightId!: number;
+    airline: Aereolinea = new Aereolinea();
+    airplane: Avion = new Avion();
+    originAirport!: Aereopuerto;
+    destinationAirport!: Aereopuerto;
+    departureDate!: string;
+    arrivalDate!: string;
+    departureTime!: string;
+    arrivalTime!: string;
+}
\ No newline at end of file

frontend/src/app/modules/material.module.ts

+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatRippleModule } from '@angular/material/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatStepperModule } from '@angular/material/stepper';
+
+@NgModule({
+  imports: [],
+  exports: [
+    MatIconModule,
+    MatToolbarModule,
+    MatGridListModule,
+    MatFormFieldModule,
+    MatSidenavModule,
+    MatTableModule,
+    MatRippleModule,
+    MatButtonModule,
+    MatCardModule,
+    MatSnackBarModule,
+    MatListModule,
+    MatInputModule,
+    MatSelectModule,
+    MatTooltipModule,
+    MatDividerModule,
+    MatProgressSpinnerModule,
+    MatPaginatorModule,
+    MatRadioModule,
+    MatMenuModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatStepperModule,
+  ],
+})
+export class AngularMaterialModule { }
\ No newline at end of file

frontend/src/app/pipe/filter.aereopuerto.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filterAereopuerto'
+})
+export class FilterPipeAereopuerto implements PipeTransform {
+    transform(value: any, arg: any): any {
+        if (arg === '' || arg.length < 3) return value;
+        const resultPosts = [];
+        for (const post of value) {
+            if (post.airportName.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
+                resultPosts.push(post);
+            };
+        };
+        return resultPosts;
+    }
+}
\ No newline at end of file

frontend/src/app/pipe/filter.agente.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filterAgente'
+})
+export class FilterPipeAgente implements PipeTransform {
+    transform(value: any, arg: any): any {
+        if (arg === '' || arg.length < 3) return value;
+        const resultPosts = [];
+        for (const post of value) {
+            if (post.agent_name.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
+                resultPosts.push(post);
+            }
+        };
+        return resultPosts;
+    }
+}
\ No newline at end of file

frontend/src/app/pipe/filter.pasajero.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filterPasajero'
+})
+export class FilterPipePasajero implements PipeTransform {
+    transform(value: any, arg: any): any {
+        if (arg === '' || arg.length < 3) return value;
+        const resultPosts = [];
+        for (const post of value) {
+            if (post.lastName.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
+                resultPosts.push(post);
+            }
+        };
+        return resultPosts;
+    }
+}
\ No newline at end of file

frontend/src/app/pipe/filter.reserva.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filterReserva'
+})
+export class FilterPipeReserva implements PipeTransform {
+    transform(value: any, arg: any): any {
+        if (arg === '' || arg.length < 3) return value;
+        const resultPosts = [];
+        for (const post of value) {
+            if (post.reservationStatusCode.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
+                resultPosts.push(post);
+            }
+        };
+        return resultPosts;
+    }
+}
\ No newline at end of file

frontend/src/app/pipe/filter.vuelo.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filterVuelo'
+})
+export class FilterPipeVuelo implements PipeTransform {
+    transform(value: any, arg: any): any {
+        if (arg === '' || arg.length < 3) return value;
+        const resultPosts = [];
+        for (const post of value) {
+            if (post.airline.airlineName.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
+                resultPosts.push(post);
+            };
+        };
+        return resultPosts;
+    }
+}
\ No newline at end of file

frontend/src/app/services/aereopuerto.service.ts

+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Aereopuerto } from '../models/aereopuerto';
+import { Observable } from 'rxjs';
+import { LoginService } from './login.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AereopuertoService {
+  private baseEndPoint = 'http://localhost:8080/api/v1'
+  token: string = '';
+
+  constructor(private http: HttpClient, private loginService: LoginService) {
+    if (this.loginService.getToken() != null) {
+      this.token = 'Bearer ' + loginService.getToken();
+    }
+  }
+
+  public getAirports(page: string, size: string): Observable<any> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    const params = new HttpParams().set('page', page).set('size', size);
+    return this.http.get(`${this.baseEndPoint}/aereopuertos/page`, { params: params, headers: corsHeaders });
+  }
+
+  public getAirportsList(): Observable<Aereopuerto[]> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Aereopuerto[]>(`${this.baseEndPoint}/aereopuertos`, { headers: corsHeaders });
+  }
+
+  public getAirportById(id: number): Observable<Aereopuerto> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Aereopuerto>(`${this.baseEndPoint}/aereopuertos/${id}`, { headers: corsHeaders });
+  }
+
+  public createAirport(aereopuerto: Aereopuerto): Observable<Aereopuerto> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.post<Aereopuerto>(`${this.baseEndPoint}/aereopuertos`, aereopuerto, { headers: corsHeaders });
+  }
+
+  public updateAirport(id: number, aereopuerto: Aereopuerto): Observable<Aereopuerto> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.put<Aereopuerto>(`${this.baseEndPoint}/aereopuertos/${id}`, aereopuerto, { headers: corsHeaders });
+  }
+
+  public deleteAirport(id: number): Observable<Aereopuerto> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.delete<Aereopuerto>(`${this.baseEndPoint}/aereopuertos/${id}`, { headers: corsHeaders });
+  }
+
+}

frontend/src/app/services/agente.service.ts

+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Agente } from '../models/agente';
+import { Observable } from 'rxjs';
+import { LoginService } from './login.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AgenteService {
+  private baseEndPoint = 'http://localhost:8080/api/v1'
+  token: string = '';
+
+  constructor(private http: HttpClient, private loginService: LoginService) {
+    if (this.loginService.getToken() != null) {
+      this.token = 'Bearer ' + loginService.getToken();
+    }
+  }
+
+  public getAgents(page: string, size: string): Observable<any> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    const params = new HttpParams().set('page', page).set('size', size);
+    return this.http.get<any>(`${this.baseEndPoint}/agentes/page`, { params: params, headers: corsHeaders });
+  }
+
+  public getAgentById(id: number): Observable<Agente> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Agente>(`${this.baseEndPoint}/agentes/${id}`, { headers: corsHeaders });
+  }
+
+  public createAgent(agente: Agente): Observable<Agente> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.post<Agente>(`${this.baseEndPoint}/agentes`, agente, { headers: corsHeaders });
+  }
+
+  public updateAgent(id: number, agente: Agente): Observable<Agente> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.put<Agente>(`${this.baseEndPoint}/agentes/${id}`, agente, { headers: corsHeaders });
+  }
+
+  public deleteAgent(id: number): Observable<Agente> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.delete<Agente>(`${this.baseEndPoint}/agentes/${id}`, { headers: corsHeaders });
+  }
+}

frontend/src/app/services/costo.service.ts

+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CreateCosto } from '../models/create/createCosto';
+import { Costo } from '../models/costo';
+import { LoginService } from './login.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CostoService {
+  private baseEndPoint = 'http://localhost:8080/api/v1';
+  token: string = '';
+
+
+  constructor(private http: HttpClient, private loginService: LoginService) {
+    if (this.loginService.getToken() != null) {
+      this.token = 'Bearer ' + loginService.getToken();
+    }
+  }
+
+  public getCostsByFlightId(id: number): Observable<Costo[]> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Costo[]>(`${this.baseEndPoint}/costos/vuelo/${id}`, { headers: corsHeaders });
+  }
+
+
+  public getCostsById(id: number): Observable<Costo> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Costo>(`${this.baseEndPoint}/costos/${id}`, { headers: corsHeaders });
+  }
+
+  public createCost(costo: CreateCosto): Observable<Costo> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.post<Costo>(`${this.baseEndPoint}/costos`, costo, { headers: corsHeaders });
+  }
+
+  public updateCost(id: number, Costo: CreateCosto): Observable<Costo> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.put<Costo>(`${this.baseEndPoint}/costos/${id}`, Costo, { headers: corsHeaders });
+  }
+
+  public deleteCost(id: number): Observable<Costo> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.delete<Costo>(`${this.baseEndPoint}/costos/${id}`, { headers: corsHeaders });
+  }
+}

frontend/src/app/services/escala.service.ts

+import { Injectable } from '@angular/core';
+import { Escala } from '../models/escala';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { LoginService } from './login.service';
+import { CreateEscala } from '../models/create/createEscala';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EscalaService {
+  private baseEndPoint = 'http://localhost:8080/api/v1'
+  token: string = '';
+
+  constructor(private http: HttpClient, private loginService: LoginService) {
+    if (this.loginService.getToken() != null) {
+      this.token = 'Bearer ' + loginService.getToken();
+    }
+  }
+
+  public getLegs(): Observable<Escala[]> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Escala[]>(`${this.baseEndPoint}/escalas`, { headers: corsHeaders });
+  }
+
+  public getLegById(id: number): Observable<Escala> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Escala>(`${this.baseEndPoint}/escalas/${id}`, { headers: corsHeaders });
+  }
+
+  public getLegByFlightId(id: number): Observable<Escala[]> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Escala[]>(`${this.baseEndPoint}/escalas/vuelo/${id}`, { headers: corsHeaders });
+  }
+
+  public createLeg(escala: CreateEscala): Observable<Escala> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.post<Escala>(`${this.baseEndPoint}/escalas`, escala, { headers: corsHeaders });
+  }
+
+  public updateLeg(id: number, escala: CreateEscala): Observable<Escala> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.put<Escala>(`${this.baseEndPoint}/escalas/${id}`, escala, { headers: corsHeaders });
+  }
+
+  public deleteLeg(id: number): Observable<Escala> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.delete<Escala>(`${this.baseEndPoint}/escalas/${id}`, { headers: corsHeaders });
+  }
+}

frontend/src/app/services/login.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+  isAuth = false;
+  private baseEndPoint = 'http://localhost:8080/api/v1/auth/authenticate'
+  constructor(private http: HttpClient, private router: Router) { }
+  authenticate(body: any) {
+    return this.http.post(this.baseEndPoint, body);
+  }
+  isAuthenticated() {
+    if (localStorage.getItem('token')!.length > 0) this.isAuth = true;
+    else this.isAuth = false;
+    return this.isAuth;
+  }
+  handleToken(token: string, role: string, email: string) {
+    localStorage.setItem('token', token);
+    localStorage.setItem('role', role);
+    localStorage.setItem('email', email);
+    this.isAuth = true;
+    if (role == 'ROLE_SUPERVISOR') {
+      this.router.navigate(['/dashboard/supervisor']);
+    } else if (role == 'ROLE_PASSENGER') {
+      this.router.navigate(['/dashboard/pasajero']);
+    } else {
+      this.router.navigate(['/dashboard/agente']);
+    }
+  }
+  getEmail() {
+    return localStorage.getItem('email');
+  }
+
+  getRole() {
+    return localStorage.getItem('role');
+  }
+
+  getToken() {
+    return localStorage.getItem('token');
+  }
+
+  logOut() {
+    localStorage.setItem('token', '');
+    localStorage.setItem('role', '');
+    this.isAuth = false;
+    this.router.navigate(['/login']);
+  }
+}

frontend/src/app/services/pago.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Pago } from '../models/pago';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PagoService {
+  private baseEndPoint = 'http://localhost:8080/api/v1'
+
+  constructor(private http: HttpClient) { }
+
+  public getPayments() {
+    return this.http.get(`${this.baseEndPoint}/pagos`);
+  }
+
+  public getPayment(id: number) {
+    return this.http.get(`${this.baseEndPoint}/pagos/${id}`);
+  }
+
+  public createPayment(pago: Pago) {
+    return this.http.post(`${this.baseEndPoint}/pagos`, pago);
+  }
+
+  public updatePayment(id: number, pago: Pago) {
+    return this.http.put(`${this.baseEndPoint}/pagos/${id}`, pago);
+  }
+
+  public deletePayment(id: number) {
+    return this.http.delete(`${this.baseEndPoint}/pagos/${id}`);
+  }
+}

frontend/src/app/services/pasajero.service.ts

+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Pasajero } from '../models/pasajero';
+import { Observable } from 'rxjs';
+import { LoginService } from './login.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PasajeroService {
+  private baseEndPoint = 'http://localhost:8080/api/v1';
+  token: string = '';
+
+  constructor(private http: HttpClient, private loginService: LoginService) {
+    if (this.loginService.getToken() != null) {
+      this.token = 'Bearer ' + loginService.getToken();
+    }
+  }
+
+  public getPassengers(page: string, size: string): Observable<any> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    const params = new HttpParams().set('page', page).set('size', size);
+    return this.http.get<any>(`${this.baseEndPoint}/pasajeros/page`, { params: params, headers: corsHeaders });
+  }
+  public getPassengersList(): Observable<Pasajero[]> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Pasajero[]>(`${this.baseEndPoint}/pasajeros`, { headers: corsHeaders });
+  }
+  public getPassengerById(id: number): Observable<Pasajero> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Pasajero>(`${this.baseEndPoint}/pasajeros/${id}`, { headers: corsHeaders });
+  }
+
+  public createPassenger(pasajero: Pasajero): Observable<Pasajero> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.post<Pasajero>(`${this.baseEndPoint}/pasajeros`, pasajero, { headers: corsHeaders });
+  }
+
+  public updatePassenger(id: number, pasajero: Pasajero): Observable<Pasajero> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.put<Pasajero>(`${this.baseEndPoint}/pasajeros/${id}`, pasajero, { headers: corsHeaders });
+  }
+
+  public deletePassenger(id: number): Observable<Pasajero> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.delete<Pasajero>(`${this.baseEndPoint}/pasajeros/${id}`, { headers: corsHeaders });
+  }
+}

frontend/src/app/services/reserva.service.ts

+import { Injectable } from '@angular/core';
+import { Reserva } from '../models/reserva';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { LoginService } from './login.service';
+import { Observable } from 'rxjs';
+import { CreateReserva } from '../models/create/createReserva';
+import { Aereolinea } from '../models/aereolinea';
+import { Avion } from '../models/avion';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReservaService {
+  private baseEndPoint = 'http://localhost:8080/api/v1';
+  token: string = '';
+
+
+  constructor(private http: HttpClient, private loginService: LoginService) {
+    if (this.loginService.getToken() != null) {
+      this.token = 'Bearer ' + loginService.getToken();
+    }
+  }
+
+  public getReservations(page: string, size: string): Observable<any> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    const params = new HttpParams().set('page', page).set('size', size);
+    return this.http.get<any>(`${this.baseEndPoint}/reservas/page`, { params: params, headers: corsHeaders });
+  }
+
+  public getAirlines(): Observable<Aereolinea[]> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Aereolinea[]>(`${this.baseEndPoint}/aereolineas`, { headers: corsHeaders });
+  }
+
+  public getAircraft(): Observable<Avion[]> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Avion[]>(`${this.baseEndPoint}/aviones`, { headers: corsHeaders });
+  }
+
+  public getReservationById(id: number): Observable<Reserva> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Reserva>(`${this.baseEndPoint}/reservas/${id}`, { headers: corsHeaders });
+  }
+
+  public getReservationsByEmail(email: string): Observable<any> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<any>(`${this.baseEndPoint}/reservas/email/${email}`, { headers: corsHeaders });
+  }
+
+  public createReservation(reserva: CreateReserva): Observable<Reserva> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.post<Reserva>(`${this.baseEndPoint}/reservas`, reserva, { headers: corsHeaders });
+  }
+
+  public updateReservation(id: number, reserva: CreateReserva): Observable<Reserva> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.put<Reserva>(`${this.baseEndPoint}/reservas/${id}`, reserva, { headers: corsHeaders });
+  }
+
+  public deleteReservation(id: number): Observable<Reserva> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.delete<Reserva>(`${this.baseEndPoint}/reservas/${id}`, { headers: corsHeaders });
+  }
+}

frontend/src/app/services/vuelo.service.ts

+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CreateVuelo } from '../models/create/createVuelo';
+import { LoginService } from './login.service';
+import { Vuelo } from '../models/vuelo';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VueloService {
+  private baseEndPoint = 'http://localhost:8080/api/v1';
+  token: string = '';
+
+
+  constructor(private http: HttpClient, private loginService: LoginService) {
+    if (this.loginService.getToken() != null) {
+      this.token = 'Bearer ' + loginService.getToken();
+    }
+  }
+
+  public getFlights(page: string, size: string): Observable<any> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    const params = new HttpParams().set('page', page).set('size', size);
+    return this.http.get<any>(`${this.baseEndPoint}/vuelos/page`, { params: params, headers: corsHeaders });
+  }
+
+  public getFlightById(id: number): Observable<Vuelo> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.get<Vuelo>(`${this.baseEndPoint}/vuelos/${id}`, { headers: corsHeaders });
+  }
+
+  public createFlight(Vuelo: CreateVuelo): Observable<Vuelo> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.post<Vuelo>(`${this.baseEndPoint}/vuelos`, Vuelo, { headers: corsHeaders });
+  }
+
+  public updateFlight(id: number, Vuelo: CreateVuelo): Observable<Vuelo> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.put<Vuelo>(`${this.baseEndPoint}/vuelos/${id}`, Vuelo, { headers: corsHeaders });
+  }
+
+  public deleteFlight(id: number): Observable<Vuelo> {
+    let corsHeaders = new HttpHeaders({
+      Authorization: this.token,
+    });
+    return this.http.delete<Vuelo>(`${this.baseEndPoint}/vuelos/${id}`, { headers: corsHeaders });
+  }
+}

frontend/src/app/views/dashboard.agente/dashboard.pasajeros/dashboard.pasajeros.component.html

+<div class="wrapper">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul>
+            <li (click)="redirectTo('dashboard/agente')"><a><i class="fas fa-home"></i>Reservas</a></li>
+            <li (click)="redirectTo('dashboard/agente/pasajero')"><a><i class="fas fa-home"></i>Pasajeros</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <app-table [paths]="paths" [title]="title" [data]="data"></app-table>
+    </div>
+</div>
\ No newline at end of file

frontend/src/app/views/dashboard.agente/dashboard.pasajeros/dashboard.pasajeros.component.scss

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body {
+  background-color: #2F4050;
+}
+
+.wrapper {
+  display: flex;
+  position: relative;
+}
+
+.wrapper .sidebar {
+  width: 200px;
+  height: 100%;
+  background: #4b4276;
+  padding: 30px 0px;
+  position: fixed;
+}
+
+.wrapper .sidebar h2 {
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.wrapper .sidebar ul li {
+  padding: 15px;
+  border-bottom: 1px solid #bdb8d7;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wrapper .sidebar ul li a {
+  color: #bdb8d7;
+  display: block;
+}
+
+.wrapper .sidebar ul li a .fas {
+  width: 25px;
+}
+
+.wrapper .sidebar ul li:hover {
+  background-color: #323e49;
+}
+
+.wrapper .sidebar ul li:hover a {
+  color: #fff;
+}
+
+.wrapper .sidebar .social_media {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.wrapper .sidebar .social_media a {
+  display: block;
+  width: 40px;
+  background: #2F4050;
+  height: 40px;
+  line-height: 45px;
+  text-align: center;
+  margin: 0 5px;
+  color: #bdb8d7;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.wrapper .main_content {
+  width: 100%;
+  margin-left: 215px;
+}
+
+.wrapper .main_content .header {
+  padding: 20px;
+  background: #fff;
+  color: #717171;
+  border-bottom: 1px solid #e0e4e8;
+}
+
+.wrapper .main_content .info {
+  margin: 20px;
+  color: #717171;
+  line-height: 25px;
+}
+
+.wrapper .main_content .info div {
+  margin-bottom: 20px;
+}
\ No newline at end of file

frontend/src/app/views/dashboard.agente/dashboard.pasajeros/dashboard.pasajeros.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardPasajerosComponent } from './dashboard.pasajeros.component';
+
+describe('DashboardPasajerosComponent', () => {
+  let component: DashboardPasajerosComponent;
+  let fixture: ComponentFixture<DashboardPasajerosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardPasajerosComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardPasajerosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/dashboard.agente/dashboard.pasajeros/dashboard.pasajeros.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { Pasajero } from 'src/app/models/pasajero';
+
+@Component({
+  selector: 'app-dashboard.pasajeros',
+  templateUrl: './dashboard.pasajeros.component.html',
+  styleUrls: ['./dashboard.pasajeros.component.scss']
+})
+export class DashboardPasajerosComponent {
+  role: string = '';
+  title: string = 'pasajeros';
+  paths: string[] = ['Dashboard', 'Concepto de Pasajeros'];
+  data: string = 'agente/pasajero';
+
+  constructor(private router: Router) {}
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+  
+}

frontend/src/app/views/dashboard.agente/dashboard.reservas/dashboard.reservas.component.html

+<div class="wrapper">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul>
+            <li (click)="redirectTo('dashboard/agente')"><a><i class="fas fa-home"></i>Reservas</a></li>
+            <li (click)="redirectTo('dashboard/agente/pasajero')"><a><i class="fas fa-home"></i>Pasajeros</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <app-table [paths]="paths" [title]="title" [data]="data"></app-table>
+    </div>
+</div>

frontend/src/app/views/dashboard.agente/dashboard.reservas/dashboard.reservas.component.scss

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body {
+  background-color: #2F4050;
+}
+
+.wrapper {
+  display: flex;
+  position: relative;
+}
+
+.wrapper .sidebar {
+  width: 200px;
+  height: 100%;
+  background: #4b4276;
+  padding: 30px 0px;
+  position: fixed;
+}
+
+.wrapper .sidebar h2 {
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.wrapper .sidebar ul li {
+  padding: 15px;
+  border-bottom: 1px solid #bdb8d7;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wrapper .sidebar ul li a {
+  color: #bdb8d7;
+  display: block;
+}
+
+.wrapper .sidebar ul li a .fas {
+  width: 25px;
+}
+
+.wrapper .sidebar ul li:hover {
+  background-color: #323e49;
+}
+
+.wrapper .sidebar ul li:hover a {
+  color: #fff;
+}
+
+.wrapper .sidebar .social_media {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.wrapper .sidebar .social_media a {
+  display: block;
+  width: 40px;
+  background: #2F4050;
+  height: 40px;
+  line-height: 45px;
+  text-align: center;
+  margin: 0 5px;
+  color: #bdb8d7;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.wrapper .main_content {
+  width: 100%;
+  margin-left: 215px;
+}
+
+.wrapper .main_content .header {
+  padding: 20px;
+  background: #fff;
+  color: #717171;
+  border-bottom: 1px solid #e0e4e8;
+}
+
+.wrapper .main_content .info {
+  margin: 20px;
+  color: #717171;
+  line-height: 25px;
+}
+
+.wrapper .main_content .info div {
+  margin-bottom: 20px;
+}
\ No newline at end of file

frontend/src/app/views/dashboard.agente/dashboard.reservas/dashboard.reservas.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardReservasComponent } from './dashboard.reservas.component';
+
+describe('DashboardReservasComponent', () => {
+  let component: DashboardReservasComponent;
+  let fixture: ComponentFixture<DashboardReservasComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardReservasComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardReservasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/dashboard.agente/dashboard.reservas/dashboard.reservas.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard.reservas',
+  templateUrl: './dashboard.reservas.component.html',
+  styleUrls: ['./dashboard.reservas.component.scss']
+})
+export class DashboardReservasComponent {
+  role: string = '';
+  title: string = 'reservas';
+  paths: string[] = ['Dashboard', 'Concepto de reservas'];
+  data: string = 'agente';
+
+  constructor(private router: Router) {}
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+  
+}

frontend/src/app/views/dashboard.pasajero/dashboard.pasajero.component.html

+<div class="wrapper">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul>
+            <li><a><i class="fas fa-home"></i>Pagos</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <app-table [paths]="paths" [title]="title" [data]="data" [state]="state"></app-table>
+    </div>
+</div>

frontend/src/app/views/dashboard.pasajero/dashboard.pasajero.component.scss

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body {
+  background-color: #2F4050;
+}
+
+.wrapper {
+  display: flex;
+  position: relative;
+}
+
+.wrapper .sidebar {
+  width: 200px;
+  height: 100%;
+  background: #4b4276;
+  padding: 30px 0px;
+  position: fixed;
+}
+
+.wrapper .sidebar h2 {
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.wrapper .sidebar ul li {
+  padding: 15px;
+  border-bottom: 1px solid #bdb8d7;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wrapper .sidebar ul li a {
+  color: #bdb8d7;
+  display: block;
+}
+
+.wrapper .sidebar ul li a .fas {
+  width: 25px;
+}
+
+.wrapper .sidebar ul li:hover {
+  background-color: #323e49;
+}
+
+.wrapper .sidebar ul li:hover a {
+  color: #fff;
+}
+
+.wrapper .sidebar .social_media {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.wrapper .sidebar .social_media a {
+  display: block;
+  width: 40px;
+  background: #2F4050;
+  height: 40px;
+  line-height: 45px;
+  text-align: center;
+  margin: 0 5px;
+  color: #bdb8d7;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.wrapper .main_content {
+  width: 100%;
+  margin-left: 215px;
+}
+
+.wrapper .main_content .header {
+  padding: 20px;
+  background: #fff;
+  color: #717171;
+  border-bottom: 1px solid #e0e4e8;
+}
+
+.wrapper .main_content .info {
+  margin: 20px;
+  color: #717171;
+  line-height: 25px;
+}
+
+.wrapper .main_content .info div {
+  margin-bottom: 20px;
+}
\ No newline at end of file

frontend/src/app/views/dashboard.pasajero/dashboard.pasajero.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardPasajeroComponent } from './dashboard.pasajero.component';
+
+describe('DashboardPasajeroComponent', () => {
+  let component: DashboardPasajeroComponent;
+  let fixture: ComponentFixture<DashboardPasajeroComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardPasajeroComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardPasajeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/dashboard.pasajero/dashboard.pasajero.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard.pasajero',
+  templateUrl: './dashboard.pasajero.component.html',
+  styleUrls: ['./dashboard.pasajero.component.scss']
+})
+export class DashboardPasajeroComponent {
+  title: string = 'pagos';
+  paths: string[] = ['Dashboard', 'Concepto de Pagos'];
+  data: string = 'pasajero';
+  state: boolean = false;
+  
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+
+  }
+
+}

frontend/src/app/views/dashboard.supervisor/dashboard.aereopuertos/dashboard.aereopuertos.component.html

+<div class="wrapper">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul>
+            <li (click)="redirectTo('dashboard/supervisor')"><a><i class="fas fa-home"></i>Agentes</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/aereopuertos')"><a><i class="fas fa-home"></i>Aereopuertos</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/vuelos')"><a><i class="fas fa-home"></i>Vuelos</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <app-table [paths]="paths" [title]="title" [data]="data"></app-table>
+    </div>
+</div>
\ No newline at end of file

frontend/src/app/views/dashboard.supervisor/dashboard.aereopuertos/dashboard.aereopuertos.component.scss

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body {
+  background-color: #2F4050;
+}
+
+.wrapper {
+  display: flex;
+  position: relative;
+}
+
+.wrapper .sidebar {
+  width: 200px;
+  height: 100%;
+  background: #4b4276;
+  padding: 30px 0px;
+  position: fixed;
+}
+
+.wrapper .sidebar h2 {
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.wrapper .sidebar ul li {
+  padding: 15px;
+  border-bottom: 1px solid #bdb8d7;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wrapper .sidebar ul li a {
+  color: #bdb8d7;
+  display: block;
+}
+
+.wrapper .sidebar ul li a .fas {
+  width: 25px;
+}
+
+.wrapper .sidebar ul li:hover {
+  background-color: #323e49;
+}
+
+.wrapper .sidebar ul li:hover a {
+  color: #fff;
+}
+
+.wrapper .sidebar .social_media {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.wrapper .sidebar .social_media a {
+  display: block;
+  width: 40px;
+  background: #2F4050;
+  height: 40px;
+  line-height: 45px;
+  text-align: center;
+  margin: 0 5px;
+  color: #bdb8d7;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.wrapper .main_content {
+  width: 100%;
+  margin-left: 215px;
+}
+
+.wrapper .main_content .header {
+  padding: 20px;
+  background: #fff;
+  color: #717171;
+  border-bottom: 1px solid #e0e4e8;
+}
+
+.wrapper .main_content .info {
+  margin: 20px;
+  color: #717171;
+  line-height: 25px;
+}
+
+.wrapper .main_content .info div {
+  margin-bottom: 20px;
+}
\ No newline at end of file

frontend/src/app/views/dashboard.supervisor/dashboard.aereopuertos/dashboard.aereopuertos.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardAereopuertosComponent } from './dashboard.aereopuertos.component';
+
+describe('DashboardAereopuertosComponent', () => {
+  let component: DashboardAereopuertosComponent;
+  let fixture: ComponentFixture<DashboardAereopuertosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardAereopuertosComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardAereopuertosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/dashboard.supervisor/dashboard.aereopuertos/dashboard.aereopuertos.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard.aereopuertos',
+  templateUrl: './dashboard.aereopuertos.component.html',
+  styleUrls: ['./dashboard.aereopuertos.component.scss']
+})
+export class DashboardAereopuertosComponent {
+  role: string = '';
+  title: string = 'aereopuertos';
+  paths: string[] = ['Dashboard', 'Concepto de Aereopuertos'];
+  data: string = 'supervisor/aereopuertos';
+
+  constructor(private router: Router) {}
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+}

frontend/src/app/views/dashboard.supervisor/dashboard.agentes/dashboard.agentes.component.html

+<div class="wrapper">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul>
+            <li (click)="redirectTo('dashboard/supervisor')"><a><i class="fas fa-home"></i>Agentes</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/aereopuertos')"><a><i class="fas fa-home"></i>Aereopuertos</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/vuelos')"><a><i class="fas fa-home"></i>Vuelos</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <app-table [paths]="paths" [title]="title" [data]="data"></app-table>
+    </div>
+</div>
\ No newline at end of file

frontend/src/app/views/dashboard.supervisor/dashboard.agentes/dashboard.agentes.component.scss

+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+    text-decoration: none;
+    font-family: 'Josefin Sans', sans-serif;
+  }
+
+  body {
+    background-color: #2F4050;
+  }
+
+  .wrapper {
+    display: flex;
+    position: relative;
+  }
+
+  .wrapper .sidebar {
+    width: 200px;
+    height: 100%;
+    background: #4b4276;
+    padding: 30px 0px;
+    position: fixed;
+  }
+
+  .wrapper .sidebar h2 {
+    color: #fff;
+    text-transform: uppercase;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  .wrapper .sidebar ul li {
+    padding: 15px;
+    border-bottom: 1px solid #bdb8d7;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .wrapper .sidebar ul li a {
+    color: #bdb8d7;
+    display: block;
+  }
+
+  .wrapper .sidebar ul li a .fas {
+    width: 25px;
+  }
+
+  .wrapper .sidebar ul li:hover {
+    background-color: #323e49;
+  }
+
+  .wrapper .sidebar ul li:hover a {
+    color: #fff;
+  }
+
+  .wrapper .sidebar .social_media {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+  }
+
+  .wrapper .sidebar .social_media a {
+    display: block;
+    width: 40px;
+    background: #2F4050;
+    height: 40px;
+    line-height: 45px;
+    text-align: center;
+    margin: 0 5px;
+    color: #bdb8d7;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+
+  .wrapper .main_content {
+    width: 100%;
+    margin-left: 215px;
+  }
+
+  .wrapper .main_content .header {
+    padding: 20px;
+    background: #fff;
+    color: #717171;
+    border-bottom: 1px solid #e0e4e8;
+  }
+
+  .wrapper .main_content .info {
+    margin: 20px;
+    color: #717171;
+    line-height: 25px;
+  }
+
+  .wrapper .main_content .info div {
+    margin-bottom: 20px;
+  }
\ No newline at end of file

frontend/src/app/views/dashboard.supervisor/dashboard.agentes/dashboard.agentes.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardAgentesComponent } from './dashboard.agentes.component';
+
+describe('DashboardAgentesComponent', () => {
+  let component: DashboardAgentesComponent;
+  let fixture: ComponentFixture<DashboardAgentesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardAgentesComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardAgentesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/dashboard.supervisor/dashboard.agentes/dashboard.agentes.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard.agentes',
+  templateUrl: './dashboard.agentes.component.html',
+  styleUrls: ['./dashboard.agentes.component.scss']
+})
+export class DashboardAgentesComponent {
+  role: string = '';
+  title: string = 'agentes';
+  paths: string[] = ['Dashboard', 'Concepto de Agentes'];
+  data: string = 'supervisor';
+
+  constructor(private router: Router) {}
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+}

frontend/src/app/views/dashboard.supervisor/dashboard.vuelos/dashboard.vuelos.component.html

+<div class="wrapper">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul>
+            <li (click)="redirectTo('dashboard/supervisor')"><a><i class="fas fa-home"></i>Agentes</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/aereopuertos')"><a><i class="fas fa-home"></i>Aereopuertos</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/vuelos')"><a><i class="fas fa-home"></i>Vuelos</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <app-table [paths]="paths" [title]="title" [data]="data"></app-table>
+    </div>
+</div>
\ No newline at end of file

frontend/src/app/views/dashboard.supervisor/dashboard.vuelos/dashboard.vuelos.component.scss

+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+    text-decoration: none;
+    font-family: 'Josefin Sans', sans-serif;
+  }
+  
+  body{
+     background-color: #2F4050;
+  }
+  
+  .wrapper{
+    display: flex;
+    position: relative;
+  }
+  
+  .wrapper .sidebar{
+    width: 200px;
+    height: 100%;
+    background: #4b4276;
+    padding: 30px 0px;
+    position: fixed;
+  }
+  
+  .wrapper .sidebar h2{
+    color: #fff;
+    text-transform: uppercase;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  
+  .wrapper .sidebar ul li{
+    padding: 15px;
+    border-bottom: 1px solid #bdb8d7;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    border-top: 1px solid rgba(255,255,255,0.05);
+  }    
+  
+  .wrapper .sidebar ul li a{
+    color: #bdb8d7;
+    display: block;
+  }
+  
+  .wrapper .sidebar ul li a .fas{
+    width: 25px;
+  }
+  
+  .wrapper .sidebar ul li:hover{
+    background-color: #323e49;
+  }
+      
+  .wrapper .sidebar ul li:hover a{
+    color: #fff;
+  }
+   
+  .wrapper .sidebar .social_media{
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+  }
+  
+  .wrapper .sidebar .social_media a{
+    display: block;
+    width: 40px;
+    background: #2F4050;
+    height: 40px;
+    line-height: 45px;
+    text-align: center;
+    margin: 0 5px;
+    color: #bdb8d7;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  
+  .wrapper .main_content{
+    width: 100%;
+    margin-left: 215px;
+  }
+  
+  .wrapper .main_content .header{
+    padding: 20px;
+    background: #fff;
+    color: #717171;
+    border-bottom: 1px solid #e0e4e8;
+  }
+  
+  .wrapper .main_content .info{
+    margin: 20px;
+    color: #717171;
+    line-height: 25px;
+  }
+  
+  .wrapper .main_content .info div{
+    margin-bottom: 20px;
+  }
\ No newline at end of file

frontend/src/app/views/dashboard.supervisor/dashboard.vuelos/dashboard.vuelos.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardVuelosComponent } from './dashboard.vuelos.component';
+
+describe('DashboardVuelosComponent', () => {
+  let component: DashboardVuelosComponent;
+  let fixture: ComponentFixture<DashboardVuelosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardVuelosComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardVuelosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/dashboard.supervisor/dashboard.vuelos/dashboard.vuelos.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard.vuelos',
+  templateUrl: './dashboard.vuelos.component.html',
+  styleUrls: ['./dashboard.vuelos.component.scss']
+})
+export class DashboardVuelosComponent {
+  role: string = '';
+  title: string = 'vuelos';
+  paths: string[] = ['Dashboard', 'Concepto de Vuelos'];
+  data: string = 'supervisor/vuelos';
+
+  constructor(private router: Router) {}
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+}

frontend/src/app/views/login/login.component.html

+<div class="middle-box text-center loginscreen  animated fadeInDown">
+    <div>
+        <div>
+            <h1 class="logo-name">WM</h1>
+        </div>
+        <h3>Bienvenido</h3>
+        <p>Aplicación de aereolíneas.
+        </p>
+        <p>Inicia sesión para ver más funcionalidades</p>
+        <form class="m-t" role="form" [formGroup]="loginForm">
+            <div class="form-group">
+                <input type="email" class="form-control" formControlName="email" placeholder="Username" required="">
+            </div>
+            <p style="color: red" class="error" *ngIf="
+              loginForm.get('email')?.errors &&
+              (loginForm.get('email')?.touched || loginForm.get('email')?.dirty)
+            ">
+                Por favor, escriba su usuario
+            </p>
+            <div class="form-group m-t">
+                <input type="password" class="form-control" formControlName="password" placeholder="Password"
+                    required="">
+            </div>
+            <p style="color: red" class="error" *ngIf="
+              loginForm.get('password')?.errors &&
+              (loginForm.get('password')?.touched || loginForm.get('password')?.dirty)
+            ">
+                Por favor, escriba su password
+            </p>
+            <button type="submit" class="btn btn-primary block full-width m-b m-t" (click)="login()">Login</button>
+        </form>
+    </div>
+</div>
\ No newline at end of file

frontend/src/app/views/login/login.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/login/login.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { LoginService } from '../../services/login.service';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent {
+  loginForm = new FormGroup({
+    email: new FormControl('', Validators.required),
+    password: new FormControl('', Validators.required),
+  });
+
+  constructor(private router: Router, private loginService: LoginService, private snackBar: MatSnackBar) { }
+
+  login() {
+    if (this.loginForm.valid) {
+      let user = {
+        email: this.loginForm.get('email')?.value,
+        password: this.loginForm.get('password')?.value,
+      };
+      this.loginService.authenticate(user).subscribe((data: any) => {
+        this.loginService.handleToken(data.token, data.role, user.email!);
+      });
+    } else {
+      this.snackBar.open(
+        'Rellenar todos los campos',
+        '',
+        {
+          duration: 3000,
+          panelClass: ['red-snackbar'],
+        }
+      );
+    }
+    return;
+  }
+}

frontend/src/app/views/register/create.aereopuerto/create.aereopuerto.component.html

+<div class="wrapper-sidebar">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul style="padding: 0;">
+            <li (click)="redirectTo('dashboard/supervisor')"><a><i class="fas fa-home"></i>Agentes</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/aereopuertos')"><a><i class="fas fa-home"></i>Aereopuertos</a>
+            </li>
+            <li (click)="redirectTo('dashboard/supervisor/vuelos')"><a><i class="fas fa-home"></i>Vuelos</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <div class="row wrapper border-bottom white-bg page-heading">
+            <div class="col-lg-12">
+                <h2 class="mt-4">Concepto de Aereopuerto</h2>
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <a>Dashboard</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>Concepto de Aereopuerto</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>{{title}} aereopuerto</a>
+                    </li>
+                </ol>
+            </div>
+            <div class="col-lg-2">
+
+            </div>
+        </div>
+        <div class="wrapper wrapper-content animated fadeInRight">
+            <div class="row">
+                <div class="col-lg-7">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>{{title}} nuevo aereopuerto
+                            </h5>
+                            <div ibox-tools></div>
+                        </div>
+                        <div class="ibox-content">
+                            <div class="row">
+                                <div class="col-sm-6">
+                                    <form role="form" [formGroup]="airportForm">
+                                        <div class="form-group"><label>Nombre del aereopuerto</label> <input
+                                                type="email" formControlName="airport_name"
+                                                placeholder="Ingresar nombre del aereopuerto" class="form-control">
+                                        </div>
+                                        <p style="color: red" class="error" *ngIf="
+                                            airportForm.get('airport_name')?.errors &&
+                                            (airportForm.get('airport_name')?.touched || airportForm.get('airport_name')?.dirty)
+                                          ">
+                                            Por favor, escriba el nombre del aereopuerto
+                                        </p>
+                                        <div class="form-group mt-3"><label>Localización</label> <input type="text"
+                                                formControlName="airport_location" placeholder="Ingresar dirección"
+                                                class="form-control"></div>
+                                        <p style="color: red" class="error" *ngIf="
+                                            airportForm.get('airport_location')?.errors &&
+                                            (airportForm.get('airport_location')?.touched || airportForm.get('airport_location')?.dirty)
+                                          ">
+                                            Por favor, escriba la locación del aereopuerto
+                                        </p>
+                                        <div class="form-group mt-3"><label>Detalles</label> <input type="text"
+                                                formControlName="other_details" placeholder="Ingresar descripción"
+                                                class="form-control"></div>
+                                        <p style="color: red" class="error" *ngIf="
+                                            airportForm.get('other_details')?.errors &&
+                                            (airportForm.get('other_details')?.touched || airportForm.get('other_details')?.dirty)
+                                          ">
+                                            Por favor, escriba alguna descripción
+                                        </p>
+                                    </form>
+                                </div>
+                                <div class="mt-3">
+                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" style="float: right;"
+                                        type="submit" (click)="createAirport()"><strong>Guardar</strong></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
\ No newline at end of file

frontend/src/app/views/register/create.aereopuerto/create.aereopuerto.component.scss

+* {
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body {
+  background-color: #2F4050;
+}
+
+.wrapper-sidebar {
+  display: flex;
+  position: relative;
+}
+
+.wrapper-sidebar .sidebar {
+  width: 200px;
+  height: 100%;
+  background: #4b4276;
+  padding: 30px 0px;
+  position: fixed;
+}
+
+.wrapper-sidebar .sidebar h2 {
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.wrapper-sidebar .sidebar ul li {
+  padding: 15px;
+  border-bottom: 1px solid #bdb8d7;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wrapper-sidebar .sidebar ul li a {
+  color: #bdb8d7;
+  display: block;
+}
+
+.wrapper-sidebar .sidebar ul li a .fas {
+  width: 25px;
+}
+
+.wrapper-sidebar .sidebar ul li:hover {
+  background-color: #323e49;
+}
+
+.wrapper-sidebar .sidebar ul li:hover a {
+  color: #fff;
+}
+
+.wrapper-sidebar .sidebar .social_media {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.wrapper-sidebar .sidebar .social_media a {
+  display: block;
+  width: 40px;
+  background: #2F4050;
+  height: 40px;
+  line-height: 45px;
+  text-align: center;
+  margin: 0 5px;
+  color: #bdb8d7;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.wrapper-sidebar .main_content {
+  width: 100%;
+  margin-left: 215px;
+}
+
+.wrapper-sidebar .main_content .header {
+  padding: 20px;
+  background: #fff;
+  color: #717171;
+  border-bottom: 1px solid #e0e4e8;
+}
+
+.wrapper-sidebar .main_content .info {
+  margin: 20px;
+  color: #717171;
+  line-height: 25px;
+}
+
+.wrapper-sidebar .main_content .info div {
+  margin-bottom: 20px;
+}
\ No newline at end of file

frontend/src/app/views/register/create.aereopuerto/create.aereopuerto.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateAereopuertoComponent } from './create.aereopuerto.component';
+
+describe('CreateAereopuertoComponent', () => {
+  let component: CreateAereopuertoComponent;
+  let fixture: ComponentFixture<CreateAereopuertoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreateAereopuertoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateAereopuertoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/register/create.aereopuerto/create.aereopuerto.component.ts

+import { Component } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Aereopuerto } from 'src/app/models/aereopuerto';
+import { AereopuertoService } from 'src/app/services/aereopuerto.service';
+
+@Component({
+  selector: 'app-create.aereopuerto',
+  templateUrl: './create.aereopuerto.component.html',
+  styleUrls: ['./create.aereopuerto.component.scss']
+})
+export class CreateAereopuertoComponent {
+  title: string = 'Registrar';
+  id: number = 0;
+  airportForm!: FormGroup;
+
+  constructor(private router: Router, private route: ActivatedRoute, private aerepuertoService: AereopuertoService, private snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.id = Number(this.route.snapshot.paramMap.get('id'));
+    this.airportForm = new FormGroup({
+      airport_name: new FormControl('', Validators.required),
+      airport_location: new FormControl('', Validators.required),
+      other_details: new FormControl('', Validators.required)
+    });
+    if (this.id != 0) {
+      this.title = 'Editar';
+      this.aerepuertoService.getAirportById(this.id).subscribe((data: any) => {
+        this.airportForm.get('airport_name')?.setValue(data.airportName);
+        this.airportForm.get('airport_location')?.setValue(data.airportLocation);
+        this.airportForm.get('other_details')?.setValue(data.otherDetails);
+      });
+    }
+  }
+
+  public createAirport() {
+    if (this.airportForm.valid) {
+      var body = new Aereopuerto();
+      var updateBody = new Aereopuerto();
+      body.airportName = this.airportForm.get('airport_name')?.value;
+      body.airportLocation = this.airportForm.get('airport_location')?.value;
+      body.otherDetails = this.airportForm.get('other_details')?.value;
+      if (this.id != 0) {
+        updateBody.airportName = this.airportForm.get('airport_name')?.value;
+        updateBody.airportLocation = this.airportForm.get('airport_location')?.value;
+        updateBody.otherDetails = this.airportForm.get('other_details')?.value;
+        this.aerepuertoService.updateAirport(this.id, updateBody).subscribe((data: any) => { this.redirectTo('dashboard/supervisor/aereopuertos'); });
+      } else {
+        this.aerepuertoService.createAirport(body).subscribe((data: any) => { this.redirectTo('dashboard/supervisor/aereopuertos'); });
+      }
+    } else {
+      this.snackBar.open(
+        'Rellenar todos los campos',
+        '',
+        {
+          duration: 3000,
+          panelClass: ['red-snackbar'],
+        }
+      );
+    }
+  }
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+}

frontend/src/app/views/register/create.agente/create.agente.component.html

+<div class="wrapper-sidebar">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul style="padding: 0;">
+            <li (click)="redirectTo('dashboard/supervisor')"><a><i class="fas fa-home"></i>Agentes</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/aereopuertos')"><a><i class="fas fa-home"></i>Aereopuertos</a>
+            </li>
+            <li (click)="redirectTo('dashboard/supervisor/vuelos')"><a><i class="fas fa-home"></i>Vuelos</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <div class="row wrapper border-bottom white-bg page-heading">
+            <div class="col-lg-12">
+                <h2 class="mt-4">Concepto de Agente</h2>
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <a>Dashboard</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>Concepto de Agente</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>{{title}} agente</a>
+                    </li>
+                </ol>
+            </div>
+            <div class="col-lg-2">
+
+            </div>
+        </div>
+        <div class="wrapper wrapper-content animated fadeInRight">
+            <div class="row">
+                <div class="col-lg-7">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>{{title}} nuevo agente
+                            </h5>
+                            <div ibox-tools></div>
+                        </div>
+                        <div class="ibox-content">
+                            <div class="row">
+                                <div class="col-sm-6">
+                                    <form role="form" [formGroup]="agentForm">
+                                        <div class="form-group"><label>Nombre del agente</label> <input type="email"
+                                                placeholder="Ingresar nombre del agente" formControlName="agent_name"
+                                                class="form-control"></div>
+                                        <p style="color: red" class="error" *ngIf="
+                                            agentForm.get('agent_name')?.errors &&
+                                            (agentForm.get('agent_name')?.touched || agentForm.get('agent_name')?.dirty)
+                                          ">
+                                            Por favor, escriba el nombre del agente
+                                        </p>
+                                        <div class="form-group mt-3"><label>Detalles del agente</label> <input
+                                                type="text" placeholder="Ingresar detalles del agente"
+                                                formControlName="agent_details" class="form-control"></div>
+                                        <p style="color: red" class="error" *ngIf="
+                                            agentForm.get('agent_details')?.errors &&
+                                            (agentForm.get('agent_details')?.touched || agentForm.get('agent_details')?.dirty)
+                                          ">
+                                            Por favor, escriba detalles del agente
+                                        </p>
+                                    </form>
+                                </div>
+                                <div class="mt-3">
+                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" style="float: right;"
+                                        type="submit" (click)="createAgent()"><strong>Guardar</strong></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
\ No newline at end of file

frontend/src/app/views/register/create.agente/create.agente.component.scss

+* {
+    box-sizing: border-box;
+    list-style: none;
+    text-decoration: none;
+    font-family: 'Josefin Sans', sans-serif;
+  }
+  
+  body {
+    background-color: #2F4050;
+  }
+  
+  .wrapper-sidebar {
+    display: flex;
+    position: relative;
+  }
+  
+  .wrapper-sidebar .sidebar {
+    width: 200px;
+    height: 100%;
+    background: #4b4276;
+    padding: 30px 0px;
+    position: fixed;
+  }
+  
+  .wrapper-sidebar .sidebar h2 {
+    color: #fff;
+    text-transform: uppercase;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  
+  .wrapper-sidebar .sidebar ul li {
+    padding: 15px;
+    border-bottom: 1px solid #bdb8d7;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+  }
+  
+  .wrapper-sidebar .sidebar ul li a {
+    color: #bdb8d7;
+    display: block;
+  }
+  
+  .wrapper-sidebar .sidebar ul li a .fas {
+    width: 25px;
+  }
+  
+  .wrapper-sidebar .sidebar ul li:hover {
+    background-color: #323e49;
+  }
+  
+  .wrapper-sidebar .sidebar ul li:hover a {
+    color: #fff;
+  }
+  
+  .wrapper-sidebar .sidebar .social_media {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+  }
+  
+  .wrapper-sidebar .sidebar .social_media a {
+    display: block;
+    width: 40px;
+    background: #2F4050;
+    height: 40px;
+    line-height: 45px;
+    text-align: center;
+    margin: 0 5px;
+    color: #bdb8d7;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  
+  .wrapper-sidebar .main_content {
+    width: 100%;
+    margin-left: 215px;
+  }
+  
+  .wrapper-sidebar .main_content .header {
+    padding: 20px;
+    background: #fff;
+    color: #717171;
+    border-bottom: 1px solid #e0e4e8;
+  }
+  
+  .wrapper-sidebar .main_content .info {
+    margin: 20px;
+    color: #717171;
+    line-height: 25px;
+  }
+  
+  .wrapper-sidebar .main_content .info div {
+    margin-bottom: 20px;
+  }
\ No newline at end of file

frontend/src/app/views/register/create.agente/create.agente.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateAgenteComponent } from './create.agente.component';
+
+describe('CreateAgenteComponent', () => {
+  let component: CreateAgenteComponent;
+  let fixture: ComponentFixture<CreateAgenteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreateAgenteComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateAgenteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/register/create.agente/create.agente.component.ts

+import { Component } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Agente } from 'src/app/models/agente';
+import { AgenteService } from 'src/app/services/agente.service';
+
+@Component({
+  selector: 'app-create.agente',
+  templateUrl: './create.agente.component.html',
+  styleUrls: ['./create.agente.component.scss']
+})
+export class CreateAgenteComponent {
+  title: string = 'Registrar';
+  id: number = 0;
+  agentForm!: FormGroup;
+
+  constructor(private router: Router, private route: ActivatedRoute, private service: AgenteService, private snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.id = Number(this.route.snapshot.paramMap.get('id'));
+    this.agentForm = new FormGroup({
+      agent_name: new FormControl('', Validators.required),
+      agent_details: new FormControl('', Validators.required),
+    });
+    if (this.id != 0) {
+      this.title = 'Editar';
+      this.service.getAgentById(this.id).subscribe((data: any) => {
+        this.agentForm.get('agent_name')?.setValue(data.agentName);
+        this.agentForm.get('agent_details')?.setValue(data.agentDetails);
+      });
+    }
+  }
+
+  public createAgent() {
+    if (this.agentForm.valid) {
+      var body = new Agente();
+      var updateBody = new Agente();
+      body.agentName = this.agentForm.get('agent_name')?.value;
+      body.agentDetails = this.agentForm.get('agent_details')?.value;
+      if (this.id != 0) {
+        updateBody.agentName = this.agentForm.get('agent_name')?.value;
+        updateBody.agentDetails = this.agentForm.get('agent_details')?.value;
+        this.service.updateAgent(this.id, updateBody).subscribe((data: any) => { this.redirectTo('dashboard/supervisor'); });
+      } else {
+        this.service.createAgent(body).subscribe((data: any) => {
+          this.redirectTo('dashboard/supervisor');
+        });
+      }
+    } else {
+      this.snackBar.open(
+        'Rellenar todos los campos',
+        '',
+        {
+          duration: 3000,
+          panelClass: ['red-snackbar'],
+        }
+      );
+    }
+  }
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+}

frontend/src/app/views/register/create.pasajero/create.pasajero.component.html

+<div class="wrapper-sidebar">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul style="padding: 0;">
+            <li (click)="redirectTo('dashboard/agente')"><a><i class="fas fa-home"></i>Reservas</a></li>
+            <li (click)="redirectTo('dashboard/agente/pasajero')"><a><i class="fas fa-home"></i>Pasajeros</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <div class="row wrapper border-bottom white-bg page-heading">
+            <div class="col-lg-12">
+                <h2 class="mt-4">Concepto de Pasajeros</h2>
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <a>Dashboard</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>Concepto de Pasajero</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>{{title}} pasajero</a>
+                    </li>
+                </ol>
+            </div>
+            <div class="col-lg-2">
+
+            </div>
+        </div>
+        <div class="wrapper wrapper-content animated fadeInRight">
+            <div class="row">
+                <div class="col-lg-7">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>{{title}} nuevo pasajero
+                            </h5>
+                            <div ibox-tools></div>
+                        </div>
+                        <div class="ibox-content">
+                            <div class="row">
+                                <div class="col-sm-6">
+                                    <form role="form" [formGroup]="passengerForm">
+                                        <div class="form-group"><label>Primer nombre del pasajero</label>
+                                            <input type="text" placeholder="Ingresar primer nombre"
+                                                formControlName="first_name" class="form-control">
+                                        </div>
+                                        <p style="color: red" class="error" *ngIf="passengerForm.get('first_name')?.errors &&
+                                        (passengerForm.get('first_name')?.touched || passengerForm.get('first_name')?.dirty)
+                                            ">
+                                            Por favor, escriba su primer nombre
+                                        </p>
+                                        <div class="form-group mt-3"><label>Segundo nombre del pasajero</label>
+                                            <input type="text" placeholder="Ingresar segundo nombre"
+                                                formControlName="second_name" class="form-control">
+                                        </div>
+                                        <p style="color: red" class="error" *ngIf="passengerForm.get('second_name')?.errors &&
+                                        (passengerForm.get('second_name')?.touched || passengerForm.get('second_name')?.dirty)
+                                            ">
+                                            Por favor, escriba su segundo nombre
+                                        </p>
+                                        <div class="form-group mt-3"><label>Apellidos del pasajero</label>
+                                            <input type="text" placeholder="Ingresar los apellidos"
+                                                formControlName="last_name" class="form-control">
+                                        </div>
+                                        <p style="color: red" class="error" *ngIf="passengerForm.get('last_name')?.errors &&
+                                        (passengerForm.get('last_name')?.touched || passengerForm.get('last_name')?.dirty)
+                                            ">
+                                            Por favor, escriba sus apellidos
+                                        </p>
+                                        <div class="form-group mt-3"><label>Número de teléfono</label>
+                                            <input type="text" placeholder="Ingresar número de teléfono"
+                                                formControlName="phone_number" class="form-control">
+                                        </div>
+                                        <p style="color: red" class="error" *ngIf="passengerForm.get('phone_number')?.errors &&
+                                        (passengerForm.get('phone_number')?.touched || passengerForm.get('phone_number')?.dirty)
+                                            ">
+                                            Por favor, escriba su número de telefono
+                                        </p>
+                                        <div class="form-group mt-3"><label>Correo eléctronico</label>
+                                            <input type="email" placeholder="Ingresar email"
+                                                formControlName="email_address" class="form-control">
+                                        </div>
+                                        <p style="color: red" class="error" *ngIf="passengerForm.get('email_address')?.errors &&
+                                        (passengerForm.get('email_address')?.touched || passengerForm.get('email_address')?.dirty)
+                                            ">
+                                            Por favor, escriba su correo electrónico
+                                        </p>
+                                        <div class="form-group mt-3"><label>Ciudad</label>
+                                            <input type="text" placeholder="Ingresar ciudad" formControlName="city"
+                                                class="form-control">
+                                        </div>
+                                        <p style="color: red" class="error" *ngIf="passengerForm.get('city')?.errors &&
+                                        (passengerForm.get('city')?.touched || passengerForm.get('city')?.dirty)
+                                            ">
+                                            Por favor, escriba su ciudad
+                                        </p>
+                                        <div class="form-group mt-3"><label>País</label>
+                                            <input type="text" placeholder="Ingresar el país" formControlName="country"
+                                                class="form-control">
+                                        </div>
+                                        <p style="color: red" class="error" *ngIf="passengerForm.get('country')?.errors &&
+                                        (passengerForm.get('country')?.touched || passengerForm.get('country')?.dirty)
+                                            ">
+                                            Por favor, escriba su pais
+                                        </p>
+                                        <div class="form-group mt-3"><label>Detalles</label>
+                                            <input type="text" placeholder="Ingresar una descripción"
+                                                formControlName="other_details" class="form-control">
+                                            <p style="color: red" class="error" *ngIf="passengerForm.get('other_details')?.errors &&
+                                        (passengerForm.get('other_details')?.touched || passengerForm.get('other_details')?.dirty)
+                                            ">
+                                                Por favor, escriba algun detalle del pasajero
+                                            </p>
+                                        </div>
+                                    </form>
+                                </div>
+                                <div class="mt-3">
+                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" style="float: right;"
+                                        type="submit" (click)="createPassenger()"><strong>Guardar</strong></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
\ No newline at end of file

frontend/src/app/views/register/create.pasajero/create.pasajero.component.scss

+* {
+    box-sizing: border-box;
+    list-style: none;
+    text-decoration: none;
+    font-family: 'Josefin Sans', sans-serif;
+  }
+  
+  body {
+    background-color: #2F4050;
+  }
+  
+  .wrapper-sidebar {
+    display: flex;
+    position: relative;
+  }
+  
+  .wrapper-sidebar .sidebar {
+    width: 200px;
+    height: 100%;
+    background: #4b4276;
+    padding: 30px 0px;
+    position: fixed;
+  }
+  
+  .wrapper-sidebar .sidebar h2 {
+    color: #fff;
+    text-transform: uppercase;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  
+  .wrapper-sidebar .sidebar ul li {
+    padding: 15px;
+    border-bottom: 1px solid #bdb8d7;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+  }
+  
+  .wrapper-sidebar .sidebar ul li a {
+    color: #bdb8d7;
+    display: block;
+  }
+  
+  .wrapper-sidebar .sidebar ul li a .fas {
+    width: 25px;
+  }
+  
+  .wrapper-sidebar .sidebar ul li:hover {
+    background-color: #323e49;
+  }
+  
+  .wrapper-sidebar .sidebar ul li:hover a {
+    color: #fff;
+  }
+  
+  .wrapper-sidebar .sidebar .social_media {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+  }
+  
+  .wrapper-sidebar .sidebar .social_media a {
+    display: block;
+    width: 40px;
+    background: #2F4050;
+    height: 40px;
+    line-height: 45px;
+    text-align: center;
+    margin: 0 5px;
+    color: #bdb8d7;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  
+  .wrapper-sidebar .main_content {
+    width: 100%;
+    margin-left: 215px;
+  }
+  
+  .wrapper-sidebar .main_content .header {
+    padding: 20px;
+    background: #fff;
+    color: #717171;
+    border-bottom: 1px solid #e0e4e8;
+  }
+  
+  .wrapper-sidebar .main_content .info {
+    margin: 20px;
+    color: #717171;
+    line-height: 25px;
+  }
+  
+  .wrapper-sidebar .main_content .info div {
+    margin-bottom: 20px;
+  }
+  
\ No newline at end of file

frontend/src/app/views/register/create.pasajero/create.pasajero.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreatePasajeroComponent } from './create.pasajero.component';
+
+describe('CreatePasajeroComponent', () => {
+  let component: CreatePasajeroComponent;
+  let fixture: ComponentFixture<CreatePasajeroComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreatePasajeroComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreatePasajeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/register/create.pasajero/create.pasajero.component.ts

+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { PasajeroService } from 'src/app/services/pasajero.service';
+import { Pasajero } from 'src/app/models/pasajero';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-create.pasajero',
+  templateUrl: './create.pasajero.component.html',
+  styleUrls: ['./create.pasajero.component.scss']
+})
+export class CreatePasajeroComponent {
+  title: string = 'Registrar';
+  id: number = 0;
+  passengerForm!: FormGroup;
+
+  constructor(private router: Router, private route: ActivatedRoute, private service: PasajeroService, private snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.id = Number(this.route.snapshot.paramMap.get('id'));
+    this.passengerForm = new FormGroup({
+      first_name: new FormControl('', Validators.required),
+      second_name: new FormControl('', Validators.required),
+      last_name: new FormControl('', Validators.required),
+      phone_number: new FormControl('', Validators.required),
+      email_address: new FormControl('', Validators.required),
+      city: new FormControl('', Validators.required),
+      country: new FormControl('', Validators.required),
+      other_details: new FormControl('', Validators.required),
+    });
+
+    if (this.id != 0) {
+      this.title = 'Editar';
+      this.service.getPassengerById(this.id).subscribe((data: any) => {
+        this.passengerForm.get('first_name')?.setValue(data.firstName);
+        this.passengerForm.get('second_name')?.setValue(data.secondName);
+        this.passengerForm.get('last_name')?.setValue(data.lastName);
+        this.passengerForm.get('phone_number')?.setValue(data.phoneNumber);
+        this.passengerForm.get('email_address')?.setValue(data.emailAddress);
+        this.passengerForm.get('city')?.setValue(data.city);
+        this.passengerForm.get('country')?.setValue(data.country);
+        this.passengerForm.get('other_details')?.setValue(data.otherDetails);
+      });
+    }
+  }
+
+  public createPassenger() {
+    if (this.passengerForm.valid) {
+      var body = new Pasajero();
+      var updateBody = new Pasajero();
+      body.firstName = this.passengerForm.get('first_name')?.value;
+      body.secondName = this.passengerForm.get('second_name')?.value;
+      body.lastName = this.passengerForm.get('last_name')?.value;
+      body.phoneNumber = this.passengerForm.get('phone_number')?.value;
+      body.emailAddress = this.passengerForm.get('email_address')?.value;
+      body.city = this.passengerForm.get('city')?.value;
+      body.country = this.passengerForm.get('country')?.value;
+      body.otherDetails = this.passengerForm.get('other_details')?.value;
+
+      if (this.id != 0) {
+        updateBody.firstName = this.passengerForm.get('first_name')?.value;
+        updateBody.secondName = this.passengerForm.get('second_name')?.value;
+        updateBody.lastName = this.passengerForm.get('last_name')?.value;
+        updateBody.phoneNumber = this.passengerForm.get('phone_number')?.value;
+        updateBody.emailAddress = this.passengerForm.get('email_address')?.value;
+        updateBody.city = this.passengerForm.get('city')?.value;
+        updateBody.country = this.passengerForm.get('country')?.value;
+        updateBody.otherDetails = this.passengerForm.get('other_details')?.value;
+        this.service.updatePassenger(this.id, updateBody).subscribe((data: any) => { this.redirectTo('dashboard/agente/pasajero'); });
+      } else {
+        this.service.createPassenger(body).subscribe((data: any) => { this.redirectTo('dashboard/agente/pasajero'); });
+      }
+    } else {
+      this.snackBar.open(
+        'Rellenar todos los campos',
+        '',
+        {
+          duration: 3000,
+          panelClass: ['red-snackbar'],
+        }
+      );
+    }
+  }
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+}

frontend/src/app/views/register/create.reserva/create.reserva.component.html

+<div class="wrapper-sidebar">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul style="padding: 0;">
+            <li (click)="redirectTo('dashboard/agente')"><a><i class="fas fa-home"></i>Reservas</a></li>
+            <li (click)="redirectTo('dashboard/agente/pasajero')"><a><i class="fas fa-home"></i>Pasajeros</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <div class="row wrapper border-bottom white-bg page-heading">
+            <div class="col-lg-12">
+                <h2 class="mt-4">Concepto de Reserva</h2>
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <a>Dashboard</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>Concepto de Reserva</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>{{title}} reserva</a>
+                    </li>
+                </ol>
+            </div>
+            <div class="col-lg-2">
+
+            </div>
+        </div>
+        <div class="wrapper wrapper-content animated fadeInRight">
+            <div class="row">
+                <div class="col-lg-7">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>{{title}} nueva reserva
+                            </h5>
+                            <div ibox-tools></div>
+                        </div>
+                        <div class="ibox-content">
+                            <div class="row">
+                                <div class="col-sm-6">
+                                    <form role="form" [formGroup]="bookingForm">
+                                        <div class="form-group">
+                                            <mat-form-field class="d-flex w-100">
+                                                <mat-label>Nombre del pasajero</mat-label>
+                                                <mat-select formControlName="passenger_id">
+                                                    <mat-option *ngFor="let pasajero of passengers"
+                                                        [value]="pasajero.passengerId">
+                                                        {{pasajero.firstName | titlecase}} {{pasajero.lastName | titlecase}}
+                                                    </mat-option>
+                                                </mat-select>
+                                            </mat-form-field>
+                                        </div>
+                                        <div class="form-group mt-3">
+                                            <mat-form-field class="d-flex w-100">
+                                                <mat-label>Tipo de asiento</mat-label>
+                                                <mat-select formControlName="travel_type_class">
+                                                    <mat-option *ngFor="let type of types" [value]="type.role">
+                                                        {{type.role | titlecase}}
+                                                    </mat-option>
+                                                </mat-select>
+                                            </mat-form-field>
+                                        </div>
+                                        <div class="form-group mt-3">
+                                            <mat-form-field class="d-flex w-100">
+                                                <mat-label>Vuelo - Escalas</mat-label>
+                                                <mat-select formControlName="leg_id">
+                                                    <mat-option *ngFor="let leg of legs" [value]="leg.legId">
+                                                        <div style="border-bottom: 1px solid #aaa;">
+                                                            <p>{{leg.origin_airport.airportName}}-{{leg.actualDepartureDate}}:{{leg.actualDepartureTime}}
+                                                            </p>
+                                                            <p>{{leg.destination_airport.airportName}}-{{leg.actualArrivalDate}}:{{leg.actualArrivalTime}}
+                                                            </p>
+                                                        </div>
+                                                    </mat-option>
+                                                </mat-select>
+                                            </mat-form-field>
+                                        </div>
+                                        <div class="form-group mt-3">
+                                            <label>Número de asientos</label>
+                                            <input type="number" placeholder="Ingresar cantidad de asientos"
+                                                class="form-control" formControlName="number_in_party">
+                                        </div>
+                                    </form>
+                                </div>
+                                <div class="mt-3">
+                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" style="float: right;"
+                                        type="submit" (click)="createReservation()"><strong>Guardar</strong></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
\ No newline at end of file

frontend/src/app/views/register/create.reserva/create.reserva.component.scss

+* {
+    box-sizing: border-box;
+    list-style: none;
+    text-decoration: none;
+    font-family: 'Josefin Sans', sans-serif;
+  }
+  
+  body {
+    background-color: #2F4050;
+  }
+  
+  .wrapper-sidebar {
+    display: flex;
+    position: relative;
+  }
+  
+  .wrapper-sidebar .sidebar {
+    width: 200px;
+    height: 100%;
+    background: #4b4276;
+    padding: 30px 0px;
+    position: fixed;
+  }
+  
+  .wrapper-sidebar .sidebar h2 {
+    color: #fff;
+    text-transform: uppercase;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  
+  .wrapper-sidebar .sidebar ul li {
+    padding: 15px;
+    border-bottom: 1px solid #bdb8d7;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+  }
+  
+  .wrapper-sidebar .sidebar ul li a {
+    color: #bdb8d7;
+    display: block;
+  }
+  
+  .wrapper-sidebar .sidebar ul li a .fas {
+    width: 25px;
+  }
+  
+  .wrapper-sidebar .sidebar ul li:hover {
+    background-color: #323e49;
+  }
+  
+  .wrapper-sidebar .sidebar ul li:hover a {
+    color: #fff;
+  }
+  
+  .wrapper-sidebar .sidebar .social_media {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+  }
+  
+  .wrapper-sidebar .sidebar .social_media a {
+    display: block;
+    width: 40px;
+    background: #2F4050;
+    height: 40px;
+    line-height: 45px;
+    text-align: center;
+    margin: 0 5px;
+    color: #bdb8d7;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  
+  .wrapper-sidebar .main_content {
+    width: 100%;
+    margin-left: 215px;
+  }
+  
+  .wrapper-sidebar .main_content .header {
+    padding: 20px;
+    background: #fff;
+    color: #717171;
+    border-bottom: 1px solid #e0e4e8;
+  }
+  
+  .wrapper-sidebar .main_content .info {
+    margin: 20px;
+    color: #717171;
+    line-height: 25px;
+  }
+  
+  .wrapper-sidebar .main_content .info div {
+    margin-bottom: 20px;
+  }
\ No newline at end of file

frontend/src/app/views/register/create.reserva/create.reserva.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateReservaComponent } from './create.reserva.component';
+
+describe('CreateReservaComponent', () => {
+  let component: CreateReservaComponent;
+  let fixture: ComponentFixture<CreateReservaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreateReservaComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateReservaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/register/create.reserva/create.reserva.component.ts

+import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CreateReserva } from 'src/app/models/create/createReserva';
+import { Escala } from 'src/app/models/escala';
+import { Pasajero } from 'src/app/models/pasajero';
+import { EscalaService } from 'src/app/services/escala.service';
+import { PasajeroService } from 'src/app/services/pasajero.service';
+import { ReservaService } from 'src/app/services/reserva.service';
+
+@Component({
+  selector: 'app-create.reserva',
+  templateUrl: './create.reserva.component.html',
+  styleUrls: ['./create.reserva.component.scss']
+})
+export class CreateReservaComponent {
+  title: string = 'Registrar';
+  id: number = 0;
+  bookingForm!: FormGroup;
+  passengers!: Pasajero[];
+  legs!: Escala[];
+  types = [
+    { "role": "SEGUNDA_CLASE" },
+    { "role": "EJECUTIVO" },
+    { "role": "PRIMERA_CLASE" },
+  ]
+
+  constructor(private router: Router, private route: ActivatedRoute, private reservaService: ReservaService, private pasajeroService: PasajeroService,
+    private escalaService: EscalaService) { }
+
+  ngOnInit(): void {
+    this.id = Number(this.route.snapshot.paramMap.get('id'));
+    this.pasajeroService.getPassengersList().subscribe(data => {
+      this.passengers = data;
+    });
+    this.escalaService.getLegs().subscribe(data => {
+      this.legs = data;
+    });
+    this.bookingForm = new FormGroup({
+      passenger_id: new FormControl('', Validators.required),
+      travel_type_class: new FormControl('', Validators.required),
+      number_in_party: new FormControl('', Validators.required),
+      leg_id: new FormControl('', Validators.required)
+    });
+    if (this.id != 0) {
+      this.title = 'Editar';
+      this.reservaService.getReservationById(this.id).subscribe((data: any) => {
+        this.bookingForm.get('passenger_id')?.setValue(data.passenger.passengerId);
+        this.bookingForm.get('travel_type_class')?.setValue(data.travelTypeClass);
+        this.bookingForm.get('number_in_party')?.setValue(data.numberInParty);
+        this.bookingForm.get('leg_id')?.setValue(data.leg.legId);
+      });
+    }
+  }
+
+  public createReservation() {
+    if (this.bookingForm.valid) {
+      var body = new CreateReserva();
+      var updateBody = new CreateReserva();
+      body.agentId = 1;
+      body.passengerId = this.bookingForm.get('passenger_id')?.value;
+      body.travelTypeClass = this.bookingForm.get('travel_type_class')?.value;
+      body.numberInParty = this.bookingForm.get('number_in_party')?.value;
+      body.legId = this.bookingForm.get('leg_id')?.value;
+      if (this.id != 0) {
+        updateBody.agentId = 1;
+        updateBody.passengerId = this.bookingForm.get('passenger_id')?.value;
+        updateBody.travelTypeClass = this.bookingForm.get('travel_type_class')?.value;
+        updateBody.numberInParty = this.bookingForm.get('number_in_party')?.value;
+        updateBody.legId = this.bookingForm.get('leg_id')?.value;
+        this.reservaService.updateReservation(this.id, updateBody).subscribe((data: any) => {
+          this.redirectTo('dashboard/agente');
+        });
+      } else {
+        this.reservaService.createReservation(body).subscribe((data: any) => {
+          this.redirectTo('dashboard/agente');
+        });
+      }
+    }
+  }
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+}

frontend/src/app/views/register/create.vuelo/create.vuelo.component.html

+<div class="wrapper-sidebar">
+    <div class="sidebar" style="background-color: #2F4050;">
+        <h2>Sidebar</h2>
+        <ul style="padding: 0;">
+            <li (click)="redirectTo('dashboard/supervisor')"><a><i class="fas fa-home"></i>Agentes</a></li>
+            <li (click)="redirectTo('dashboard/supervisor/aereopuertos')"><a><i class="fas fa-home"></i>Aereopuertos</a>
+            </li>
+            <li (click)="redirectTo('dashboard/supervisor/vuelos')"><a><i class="fas fa-home"></i>Vuelos</a></li>
+        </ul>
+    </div>
+    <div class="main_content">
+        <app-topnavbar></app-topnavbar>
+        <div class="row wrapper border-bottom white-bg page-heading">
+            <div class="col-lg-12">
+                <h2 class="mt-4">Concepto de vuelos</h2>
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <a>Dashboard</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>Concepto de Vuelos</a>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <a>{{title}} vuelos</a>
+                    </li>
+                </ol>
+            </div>
+            <div class="col-lg-2">
+
+            </div>
+        </div>
+        <div class="wrapper wrapper-content animated fadeInRight">
+            <div class="row">
+                <div class="col-lg-12">
+                    <mat-stepper [linear]="true" #stepper>
+                        <mat-step [completed]="isEditable">
+                            <ng-template matStepLabel>Vuelo</ng-template>
+                            <div class="ibox float-e-margins mt-3">
+                                <div class="ibox-title">
+                                    <h5>{{title}} Nuevo vuelo
+                                    </h5>
+                                    <div ibox-tools></div>
+                                </div>
+                                <div class="ibox-content">
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <form role="form" [formGroup]="flightForm">
+                                                <div class="form-group w-75">
+                                                    <mat-form-field class="d-flex w-100">
+                                                        <mat-label>Aereolinea</mat-label>
+                                                        <mat-select formControlName="airline_id">
+                                                            <mat-option *ngFor="let aereolinea of airlines"
+                                                                [value]="aereolinea.airline_id">
+                                                                {{aereolinea.airlineName}}
+                                                            </mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group mt-3 w-75">
+                                                    <mat-form-field class="d-flex w-100">
+                                                        <mat-label>Avion</mat-label>
+                                                        <mat-select formControlName="aircraft_id">
+                                                            <mat-option *ngFor="let avion of aircrafts"
+                                                                [value]="avion.aircraft_id">
+                                                                {{avion.model}}
+                                                            </mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group mt-3 w-75">
+                                                    <mat-form-field class="d-flex w-100">
+                                                        <mat-label>Aereopuerto Origen</mat-label>
+                                                        <mat-select formControlName="origin_airport_id">
+                                                            <mat-option *ngFor="let aereopuerto of airports"
+                                                                [value]="aereopuerto.airportId">
+                                                                {{aereopuerto.airportName}}
+                                                            </mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group mt-3 w-75">
+                                                    <mat-form-field class="d-flex w-100">
+                                                        <mat-label>Aereopuerto Llegada</mat-label>
+                                                        <mat-select formControlName="destination_airport_id">
+                                                            <mat-option *ngFor="let aereopuerto of airports"
+                                                                [value]="aereopuerto.airportId">
+                                                                {{aereopuerto.airportName}}
+                                                            </mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group mt-3">
+                                                    <label>Fecha inicial</label>
+                                                    <mat-form-field appearance="fill" class="d-flex w-75">
+                                                        <mat-label>Ingresar fecha inicial</mat-label>
+                                                        <input matInput [matDatepicker]="picker1"
+                                                            [formControl]="departure_date">
+                                                        <mat-datepicker-toggle matIconSuffix
+                                                            [for]="picker1"></mat-datepicker-toggle>
+                                                        <mat-datepicker #picker1></mat-datepicker>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group w-75"><label>Hora inicial</label>
+                                                    <input type="time" class="form-control" value="00:00 AM"
+                                                        formControlName="departure_time" />
+                                                </div>
+                                                <div class="form-group mt-3">
+                                                    <label>Fecha inicial</label>
+                                                    <mat-form-field appearance="fill" class="d-flex w-75">
+                                                        <mat-label>Ingresar fecha final</mat-label>
+                                                        <input matInput [matDatepicker]="picker2"
+                                                            [formControl]="arrival_date">
+                                                        <mat-datepicker-toggle matIconSuffix
+                                                            [for]="picker2"></mat-datepicker-toggle>
+                                                        <mat-datepicker #picker2></mat-datepicker>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group w-75"><label>Hora Final</label>
+                                                    <input type="time" class="form-control" value="00:00 AM"
+                                                        formControlName="arrival_time" />
+                                                </div>
+                                            </form>
+                                        </div>
+                                        <div class=" mt-3">
+                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
+                                                style="float: right;"
+                                                (click)="updateFlight(stepper)"><strong>Siguiente</strong></button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </mat-step>
+                        <mat-step>
+                            <ng-template matStepLabel>Escalas</ng-template>
+                            <div class="ibox float-e-margins mt-3">
+                                <div class="ibox-title">
+                                    <h5>{{title}} nuevas escalas
+                                    </h5>
+                                    <div ibox-tools></div>
+                                </div>
+                                <div class="ibox-content">
+                                    <div class="row">
+                                        <div class="col-sm-5">
+                                            <form role="form" [formGroup]="legForm">
+                                                <div class="form-group mt-3 w-75">
+                                                    <mat-form-field class="d-flex w-100">
+                                                        <mat-label>Aereopuerto Origen</mat-label>
+                                                        <mat-select formControlName="origin_airport_id">
+                                                            <mat-option *ngFor="let aereopuerto of airports"
+                                                                [value]="aereopuerto.airportId">
+                                                                {{aereopuerto.airportName}}
+                                                            </mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group mt-3 w-75">
+                                                    <mat-form-field class="d-flex w-100">
+                                                        <mat-label>Aereopuerto Llegada</mat-label>
+                                                        <mat-select formControlName="destination_airport_id">
+                                                            <mat-option *ngFor="let aereopuerto of airports"
+                                                                [value]="aereopuerto.airportId">
+                                                                {{aereopuerto.airportName}}
+                                                            </mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group mt-3">
+                                                    <label>Fecha inicial</label>
+                                                    <br>
+                                                    <mat-form-field appearance="fill" class="d-flex w-75">
+                                                        <mat-label>Ingresar fecha inicial</mat-label>
+                                                        <input matInput [matDatepicker]="pickerIn2"
+                                                            [formControl]="actual_departure_date">
+                                                        <mat-datepicker-toggle matIconSuffix
+                                                            [for]="pickerIn2"></mat-datepicker-toggle>
+                                                        <mat-datepicker #pickerIn2></mat-datepicker>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group w-75"><label>Hora inicial</label>
+                                                    <input type="time" class="form-control" value="00:00 AM"
+                                                        formControlName="actual_departure_time" />
+                                                </div>
+                                                <div class="form-group mt-3">
+                                                    <label>Fecha final</label>
+                                                    <br>
+                                                    <mat-form-field appearance="fill" class="d-flex w-75">
+                                                        <mat-label>Ingresar fecha final</mat-label>
+                                                        <input matInput [matDatepicker]="pickerOut2"
+                                                            [formControl]="actual_arrival_date">
+                                                        <mat-datepicker-toggle matIconSuffix
+                                                            [for]="pickerOut2"></mat-datepicker-toggle>
+                                                        <mat-datepicker #pickerOut2></mat-datepicker>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div class="form-group w-75"><label>Hora Final</label>
+                                                    <input type="time" class="form-control" value="00:00 AM"
+                                                        formControlName="actual_arrival_time" />
+                                                </div>
+                                            </form>
+                                            <div class="mt-3">
+                                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
+                                                    style="margin-left: 28%;"
+                                                    (click)="updateLeg()"><strong>Guardar</strong></button>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6 mt-4">
+                                            <table
+                                                class="footable table table-stripped toggle-arrow-tiny footable-loaded tablet breakpoint">
+                                                <thead>
+                                                    <tr>
+                                                        <th data-toggle="true"
+                                                            class="footable-visible footable-sortable footable-v-column">
+                                                            Id<span class="footable-sort-indicator"></span></th>
+                                                        <th data-toggle="true"
+                                                            class="footable-visible footable-sortable footable-v-column">
+                                                            Aereopuerto Origen<span
+                                                                class="footable-sort-indicator"></span></th>
+                                                        <th class="footable-visible footable-sortable">Aereopuerto
+                                                            Destino<span class="footable-sort-indicator"></span></th>
+                                                        <th data-type="numeric"
+                                                            class="footable-visible footable-sortable">Fecha
+                                                            inicial<span class="footable-sort-indicator"></span></th>
+                                                        <th data-type="numeric"
+                                                            class="footable-visible footable-sortable">Fecha
+                                                            final<span class="footable-sort-indicator"></span></th>
+                                                        <th
+                                                            class="footable-visible footable-sortable footable-last-column">
+                                                            Action<span class="footable-sort-indicator"></span></th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr class="footable-even" *ngFor="let escala of legs">
+                                                        <td class="footable-visible">{{escala.legId}}</td>
+                                                        <td class="footable-visible">
+                                                            {{escala.origin_airport.airportName}}</td>
+                                                        <td class="footable-visible">
+                                                            {{escala.destination_airport.airportName}}</td>
+                                                        <td class="footable-visible">{{escala.actualDepartureDate}} :
+                                                            {{escala.actualDepartureTime}}</td>
+                                                        <td class="footable-visible">{{escala.actualArrivalDate}} :
+                                                            {{escala.actualArrivalTime}}</td>
+                                                        <td class="footable-visible footable-last-column">
+                                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
+                                                                (click)="editLeg(escala.legId)"><strong>Elegir</strong></button>
+                                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
+                                                                style="margin-left:8px;"
+                                                                (click)="deleteLeg(escala)"><strong>Eliminar</strong></button>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                        <div class="mt-3">
+                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
+                                                style="float: right;" matStepperNext><strong>Siguiente</strong></button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </mat-step>
+                        <mat-step>
+                            <ng-template matStepLabel>Costos</ng-template>
+                            <div class="ibox float-e-margins mt-3">
+                                <div class="ibox-title">
+                                    <h5>{{title}} nuevos costos
+                                    </h5>
+                                    <div ibox-tools></div>
+                                </div>
+                                <div class="ibox-content">
+                                    <div class="row">
+                                        <div class="col-sm-4">
+                                            <form role="form" [formGroup]="costForm">
+                                                <div class="form-group"><label>Fecha inicial</label>
+                                                </div>
+                                                <mat-form-field appearance="fill" class="d-flex w-75">
+                                                    <mat-label>Ingresar fecha inicial</mat-label>
+                                                    <input matInput [matDatepicker]="picker3"
+                                                        [formControl]="valid_from_date">
+                                                    <mat-datepicker-toggle matIconSuffix
+                                                        [for]="picker3"></mat-datepicker-toggle>
+                                                    <mat-datepicker #picker3></mat-datepicker>
+                                                </mat-form-field>
+                                                <div class="form-group mt-3"><label>Fecha final</label></div>
+                                                <mat-form-field appearance="fill" class="d-flex w-75">
+                                                    <mat-label>Ingresar fecha final</mat-label>
+                                                    <input matInput [matDatepicker]="picker4"
+                                                        [formControl]="valid_to_date">
+                                                    <mat-datepicker-toggle matIconSuffix
+                                                        [for]="picker4"></mat-datepicker-toggle>
+                                                    <mat-datepicker #picker4></mat-datepicker>
+                                                </mat-form-field>
+                                                <div class="form-group w-75 mt-3"><label>Monto</label> <input
+                                                        type="number" formControlName="flight_cost"
+                                                        placeholder="Ingresar el monto total de los costos"
+                                                        class="form-control"></div>
+                                                <p style="color: red" class="error" *ngIf="
+                                                        costForm.get('flight_cost')?.errors &&
+                                                        (costForm.get('flight_cost')?.touched || costForm.get('flight_cost')?.dirty)
+                                                      ">
+                                                    Por favor, escriba algun monto
+                                                </p>
+                                            </form>
+                                            <div class="mt-3">
+                                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs mt-4"
+                                                    style="margin-left: 25%;"
+                                                    (click)="updateCost()"><strong>Guardar</strong></button>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6 mt-4">
+                                            <table
+                                                class="footable table table-stripped toggle-arrow-tiny footable-loaded tablet breakpoint">
+                                                <thead>
+                                                    <tr>
+                                                        <th data-toggle="true"
+                                                            class="footable-visible footable-sortable footable-first-column">
+                                                            Id<span class="footable-sort-indicator"></span></th>
+                                                        <th data-toggle="true"
+                                                            class="footable-visible footable-sortable footable-first-column">
+                                                            Monto<span class="footable-sort-indicator"></span></th>
+                                                        <th data-toggle="true"
+                                                            class="footable-visible footable-sortable footable-first-column">
+                                                            Aereolinea<span class="footable-sort-indicator"></span></th>
+                                                        <th data-type="numeric"
+                                                            class="footable-visible footable-sortable">Fecha
+                                                            inicial<span class="footable-sort-indicator"></span></th>
+                                                        <th data-hide="all" class="footable-sortable">Fecha final<span
+                                                                class="footable-sort-indicator"></span></th>
+                                                        <th
+                                                            class="footable-visible footable-sortable footable-last-column">
+                                                            Action<span class="footable-sort-indicator"></span></th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr class="footable-even" *ngFor="let costo of costs">
+                                                        <td class="footable-visible">{{costo.costId}}</td>
+                                                        <td class="footable-visible">{{costo.flightCost}}</td>
+                                                        <td class="footable-visible">{{costo.airline.airlineName}}</td>
+                                                        <td class="footable-visible">{{costo.validFromDate}}</td>
+                                                        <td class="footable-visible">{{costo.validToDate}}</td>
+                                                        <td class="footable-visible footable-last-column">
+                                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
+                                                                (click)="editCost(costo.costId)"><strong>Elegir</strong></button>
+                                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
+                                                                style="margin-left:8px;"
+                                                                (click)="deleteCost(costo)"><strong>Eliminar</strong></button>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                        <div class="mt-3">
+                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
+                                                style="float: right;" matStepperNext><strong>Siguiente</strong></button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </mat-step>
+                        <mat-step>
+                            <ng-template matStepLabel>Done</ng-template>
+                            <div class="col-lg-4 mt-3">
+                                <div class="ibox ">
+                                    <div class="ibox-title">
+                                        <h5>Vuelo</h5>
+                                    </div>
+                                    <div class="ibox-content">
+                                        <div class="row">
+                                            <div class="col-4">
+                                                <small class="stats-label">Aereolinea</small>
+                                                <h4>{{flight.airline.airlineName}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Avion</small>
+                                                <h4>{{flight.airplane.model}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Fecha incial</small>
+                                                <h4>{{flight.departureDate}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Fecha final</small>
+                                                <h4>{{flight.arrivalDate}}</h4>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4 mt-3">
+                                <div class="ibox ">
+                                    <div class="ibox-title">
+                                        <h5>Escalas</h5>
+                                    </div>
+                                    <div class="ibox-content">
+                                        <div class="row" *ngFor="let escala of legs">
+                                            <div class="col-4">
+                                                <small class="stats-label">Id</small>
+                                                <h4>{{escala.legId}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Aereopuerto Origen</small>
+                                                <h4>{{escala.origin_airport.airportName}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Aereopuerto Destino</small>
+                                                <h4>{{escala.destination_airport.airportName}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Fecha de salida</small>
+                                                <h4>{{escala.actualDepartureDate}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Fecha de llegada</small>
+                                                <h4>{{escala.actualArrivalDate}}</h4>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4 mt-3">
+                                <div class="ibox ">
+                                    <div class="ibox-title">
+                                        <h5>Costos</h5>
+                                    </div>
+                                    <div class="ibox-content">
+                                        <div class="row" *ngFor="let costo of costs">
+                                            <div class="col-4">
+                                                <small class="stats-label">Id</small>
+                                                <h4>{{costo.costId}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Avion</small>
+                                                <h4>{{costo.flight.airplane.model}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Fecha inicial</small>
+                                                <h4>{{costo.validFromDate}}</h4>
+                                            </div>
+                                            <div class="col-4">
+                                                <small class="stats-label">Fecha final</small>
+                                                <h4>{{costo.validToDate}}</h4>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="mt-3">
+                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" style="float: right;"
+                                    type="submit"
+                                    (click)="save('dashboard/supervisor/vuelos')"><strong>Guardar</strong></button>
+                            </div>
+                        </mat-step>
+                    </mat-stepper>
+
+                </div>
+            </div>
+        </div>
+    </div>
\ No newline at end of file

frontend/src/app/views/register/create.vuelo/create.vuelo.component.scss

+* {
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body {
+  background-color: #2F4050;
+}
+
+.wrapper-sidebar {
+  display: flex;
+  position: relative;
+}
+
+.wrapper-sidebar .sidebar {
+  width: 200px;
+  height: 100%;
+  background: #4b4276;
+  padding: 30px 0px;
+  position: fixed;
+}
+
+.wrapper-sidebar .sidebar h2 {
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.wrapper-sidebar .sidebar ul li {
+  padding: 15px;
+  border-bottom: 1px solid #bdb8d7;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wrapper-sidebar .sidebar ul li a {
+  color: #bdb8d7;
+  display: block;
+}
+
+.wrapper-sidebar .sidebar ul li a .fas {
+  width: 25px;
+}
+
+.wrapper-sidebar .sidebar ul li:hover {
+  background-color: #323e49;
+}
+
+.wrapper-sidebar .sidebar ul li:hover a {
+  color: #fff;
+}
+
+.wrapper-sidebar .sidebar .social_media {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.wrapper-sidebar .sidebar .social_media a {
+  display: block;
+  width: 40px;
+  background: #2F4050;
+  height: 40px;
+  line-height: 45px;
+  text-align: center;
+  margin: 0 5px;
+  color: #bdb8d7;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.wrapper-sidebar .main_content {
+  width: 100%;
+  margin-left: 215px;
+}
+
+.wrapper-sidebar .main_content .header {
+  padding: 20px;
+  background: #fff;
+  color: #717171;
+  border-bottom: 1px solid #e0e4e8;
+}
+
+.wrapper-sidebar .main_content .info {
+  margin: 20px;
+  color: #717171;
+  line-height: 25px;
+}
+
+.wrapper-sidebar .main_content .info div {
+  margin-bottom: 20px;
+}
\ No newline at end of file

frontend/src/app/views/register/create.vuelo/create.vuelo.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateVueloComponent } from './create.vuelo.component';
+
+describe('CreateVueloComponent', () => {
+  let component: CreateVueloComponent;
+  let fixture: ComponentFixture<CreateVueloComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreateVueloComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateVueloComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/views/register/create.vuelo/create.vuelo.component.ts

+import { DatePipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { Form, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Aereolinea } from 'src/app/models/aereolinea';
+import { Aereopuerto } from 'src/app/models/aereopuerto';
+import { Avion } from 'src/app/models/avion';
+import { AereopuertoService } from 'src/app/services/aereopuerto.service';
+import { ReservaService } from 'src/app/services/reserva.service';
+import { VueloService } from 'src/app/services/vuelo.service';
+import { EscalaService } from '../../../services/escala.service';
+import { Escala } from 'src/app/models/escala';
+import { MatDialog } from '@angular/material/dialog';
+import { ModalDeleteComponent } from 'src/app/components/modal.delete/modal.delete.component';
+import { CreateEscala } from '../../../models/create/createEscala';
+import { Costo } from 'src/app/models/costo';
+import { CostoService } from '../../../services/costo.service';
+import { CreateCosto } from 'src/app/models/create/createCosto';
+import { CreateVuelo } from 'src/app/models/create/createVuelo';
+import { Vuelo } from 'src/app/models/vuelo';
+import { MatStepper } from '@angular/material/stepper';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-create.vuelo',
+  templateUrl: './create.vuelo.component.html',
+  styleUrls: ['./create.vuelo.component.scss']
+})
+export class CreateVueloComponent {
+  title: string = 'Registrar';
+  id: number = 0;
+  leg_id: number = 0;
+  cost_id: number = 0;
+  temp_id: number = 0;
+  airline_id: number = 0;
+  flightForm!: FormGroup;
+  legForm!: FormGroup;
+  costForm!: FormGroup;
+  airlines!: Aereolinea[];
+  aircrafts!: Avion[];
+  airports!: Aereopuerto[];
+  legs!: Escala[];
+  costs!: Costo[];
+  flight: Vuelo = new Vuelo();
+  departure_date = new FormControl;
+  arrival_date = new FormControl;
+  actual_departure_date = new FormControl;
+  actual_arrival_date = new FormControl;
+  valid_from_date = new FormControl;
+  valid_to_date = new FormControl;
+  isEditable = false;
+  isEscalaDone = false;
+  isCostoDone = false;
+
+  constructor(private router: Router, private route: ActivatedRoute, private reservaService: ReservaService,
+    private aereopuertoService: AereopuertoService, private datePipe: DatePipe, private vueloService: VueloService,
+    private dialog: MatDialog, private escalaService: EscalaService, private costoService: CostoService, private snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.id = Number(this.route.snapshot.paramMap.get('id'));
+    this.reservaService.getAirlines().subscribe(data => {
+      this.airlines = data;
+    });
+    this.reservaService.getAircraft().subscribe(data => {
+      this.aircrafts = data;
+    });
+    this.aereopuertoService.getAirportsList().subscribe(data => {
+      this.airports = data;
+    });
+    this.escalaService.getLegByFlightId(this.id).subscribe(data => {
+      this.legs = data;
+      if (data.length != 0) {
+        this.isEditable = true;
+        this.isEscalaDone = true;
+      }
+    });
+    this.costoService.getCostsByFlightId(this.id).subscribe(data => {
+      this.costs = data;
+      if (data.length != 0) {
+        this.isEditable = true;
+        this.isCostoDone = true;
+      }
+    });
+    this.flightForm = new FormGroup({
+      airline_id: new FormControl('', Validators.required),
+      aircraft_id: new FormControl('', Validators.required),
+      origin_airport_id: new FormControl('', Validators.required),
+      destination_airport_id: new FormControl('', Validators.required),
+      departure_time: new FormControl('', Validators.required),
+      arrival_time: new FormControl('', Validators.required),
+    });
+    this.legForm = new FormGroup({
+      flight_id: new FormControl('', Validators.required),
+      origin_airport_id: new FormControl('', Validators.required),
+      destination_airport_id: new FormControl('', Validators.required),
+      actual_departure_time: new FormControl('', Validators.required),
+      actual_arrival_time: new FormControl('', Validators.required),
+    });
+    this.costForm = new FormGroup({
+      airline_id: new FormControl('', Validators.required),
+      flight_id: new FormControl('', Validators.required),
+      flight_cost: new FormControl('', Validators.required),
+    });
+    if (this.id != 0) {
+      this.title = 'Editar';
+      this.isEditable = true;
+      this.vueloService.getFlightById(this.id).subscribe((data: any) => {
+        var dateDepartureString = data.departureDate;
+        var dateDepartureParts = dateDepartureString.split("-");
+        var dateArrivalString = data.arrivalDate;
+        var dateArrivalParts = dateArrivalString.split("-");
+        this.flight = data;
+        this.flightForm.get('airline_id')?.setValue(data.airline.airline_id);
+        this.flightForm.get('aircraft_id')?.setValue(data.airplane.aircraft_id);
+        this.departure_date.setValue(new Date(+dateDepartureParts[2], dateDepartureParts[1] - 1, +dateDepartureParts[0]));
+        this.arrival_date.setValue(new Date(+dateArrivalParts[2], dateArrivalParts[1] - 1, +dateArrivalParts[0]));
+        this.flightForm.get('origin_airport_id')?.setValue(data.origin_airport.airportId);
+        this.flightForm.get('destination_airport_id')?.setValue(data.destination_airport.airportId);
+        this.flightForm.get('departure_time')?.setValue(data.departureTime);
+        this.flightForm.get('arrival_time')?.setValue(data.arrivalTime);
+      });
+    }
+  }
+
+  public redirectTo(uri: string) {
+    this.router.navigate([uri]);
+  }
+
+  public save(uri: string) {
+    if (this.isEscalaDone == true && this.isCostoDone == true) {
+      this.router.navigate([uri]);
+    } else {
+      this.snackBar.open(
+        'Falta guardar datos en Escala y Costo',
+        '',
+        {
+          duration: 3000,
+          panelClass: ['red-snackbar'],
+        }
+      );
+    }
+  }
+
+  editLeg(id: number) {
+    this.escalaService.getLegById(id).subscribe((data: any) => {
+      var dateDepartureString = data.actualDepartureDate;
+      var dateDepartureParts = dateDepartureString.split("-");
+      var dateArrivalString = data.actualArrivalDate;
+      var dateArrivalParts = dateArrivalString.split("-");
+      this.leg_id = data.legId;
+      this.legForm.get('flight_id')?.setValue(data.flight.flightId);
+      this.actual_departure_date.setValue(new Date(+dateDepartureParts[2], dateDepartureParts[1] - 1, +dateDepartureParts[0]));
+      this.actual_arrival_date.setValue(new Date(+dateArrivalParts[2], dateArrivalParts[1] - 1, +dateArrivalParts[0]));
+      this.legForm.get('origin_airport_id')?.setValue(data.origin_airport.airportId);
+      this.legForm.get('destination_airport_id')?.setValue(data.destination_airport.airportId);
+      this.legForm.get('actual_departure_time')?.setValue(data.actualDepartureTime);
+      this.legForm.get('actual_arrival_time')?.setValue(data.actualArrivalTime);
+    });
+  }
+
+  editCost(id: number) {
+    this.costoService.getCostsById(id).subscribe((data: any) => {
+      var dateDepartureString = data.validFromDate;
+      var dateDepartureParts = dateDepartureString.split("-");
+      var dateArrivalString = data.validToDate;
+      var dateArrivalParts = dateArrivalString.split("-");
+      this.cost_id = data.costId;
+      this.valid_from_date.setValue(new Date(+dateDepartureParts[2], dateDepartureParts[1] - 1, +dateDepartureParts[0]));
+      this.valid_to_date.setValue(new Date(+dateArrivalParts[2], dateArrivalParts[1] - 1, +dateArrivalParts[0]));
+      this.costForm.get('airline_id')?.setValue(data.airline.airline_id);
+      this.costForm.get('flight_id')?.setValue(data.flight.flightId);
+      this.costForm.get('flight_cost')?.setValue(data.flightCost);
+    });
+  }
+
+  public deleteLeg(data: any) {
+    const dialogRef = this.dialog.open(ModalDeleteComponent, {
+      data: data,
+    });
+
+    if (this.id) {
+      dialogRef.afterClosed().subscribe(result => {
+        this.escalaService.getLegByFlightId(this.id).subscribe(data => {
+          this.legs = data;
+        });
+      });
+    } else {
+      dialogRef.afterClosed().subscribe(result => {
+        this.escalaService.getLegByFlightId(this.temp_id).subscribe(data => {
+          this.legs = data;
+        });
+      });
+    }
+  }
+
+  public deleteCost(data: any) {
+    const dialogRef = this.dialog.open(ModalDeleteComponent, {
+      data: data,
+    });
+
+    if (this.id) {
+      dialogRef.afterClosed().subscribe(result => {
+        this.costoService.getCostsByFlightId(this.id).subscribe(data => {
+          this.costs = data;
+        });
+      });
+    } else {
+      dialogRef.afterClosed().subscribe(result => {
+        this.costoService.getCostsByFlightId(this.temp_id).subscribe(data => {
+          this.costs = data;
+        });
+      });
+    }
+  }
+
+  public updateFlight(stepper: MatStepper) {
+    if (this.flightForm.valid) {
+      var body = new CreateVuelo();
+      body.airlineId = this.flightForm.get('airline_id')?.value;
+      body.airplaneId = this.flightForm.get('aircraft_id')?.value;
+      body.departureDate = this.datePipe.transform(this.departure_date.value, 'dd-MM-yyyy')!;
+      body.arrivalDate = this.datePipe.transform(this.arrival_date.value, 'dd-MM-yyyy')!;
+      body.originAirportId = this.flightForm.get('origin_airport_id')?.value;
+      body.destinationAirportId = this.flightForm.get('destination_airport_id')?.value;
+      body.departureTime = this.flightForm.get('departure_time')?.value;
+      body.arrivalTime = this.flightForm.get('arrival_time')?.value;
+      if (this.id != 0) {
+        var updateBody = new CreateVuelo();
+        updateBody.airlineId = this.flightForm.get('airline_id')?.value;
+        updateBody.airplaneId = this.flightForm.get('aircraft_id')?.value;
+        updateBody.departureDate = this.datePipe.transform(this.departure_date.value, 'dd-MM-yyyy')!;
+        updateBody.arrivalDate = this.datePipe.transform(this.arrival_date.value, 'dd-MM-yyyy')!;
+        updateBody.originAirportId = this.flightForm.get('origin_airport_id')?.value;
+        updateBody.destinationAirportId = this.flightForm.get('destination_airport_id')?.value;
+        updateBody.departureTime = this.flightForm.get('departure_time')?.value;
+        updateBody.arrivalTime = this.flightForm.get('arrival_time')?.value;
+        this.vueloService.updateFlight(this.id, updateBody).subscribe(
+          (data: any) => {
+            if (this.isEditable) {
+              setTimeout(() => {
+                stepper.next();
+              }, 100);
+            }
+          }
+        );
+      } else {
+        this.vueloService.createFlight(body).subscribe((data: any) => {
+          this.temp_id = data.flightId;
+          this.airline_id = data.airline.airline_id;
+          this.isEditable = true;
+          if (this.isEditable) {
+            setTimeout(() => {
+              stepper.next();
+            }, 100);
+          }
+        });;
+      }
+    } else {
+      this.snackBar.open(
+        'Rellene todos los campos obligatorios',
+        '',
+        {
+          duration: 3000,
+          panelClass: ['red-snackbar'],
+        }
+      );
+    }
+  }
+
+  public updateLeg() {
+    this.legForm.get('flight_id')?.setValue(this.temp_id);
+    if (this.legForm.valid) {
+      var body = new CreateEscala();
+      body.originAirportId = this.legForm.get('origin_airport_id')?.value;
+      body.destinationAirportId = this.legForm.get('destination_airport_id')?.value;
+      body.actualDepartureDate = this.datePipe.transform(this.actual_departure_date.value, 'dd-MM-yyyy')!;
+      body.actualArrivalDate = this.datePipe.transform(this.actual_arrival_date.value, 'dd-MM-yyyy')!;
+      body.actualArrivalTime = this.legForm.get('actual_arrival_time')?.value;
+      body.actualDepartureTime = this.legForm.get('actual_departure_time')?.value;
+      body.flightId = this.temp_id;;
+      if (this.id != 0) {
+        var updateBody = new CreateEscala();
+        updateBody.originAirportId = this.legForm.get('origin_airport_id')?.value;
+        updateBody.destinationAirportId = this.legForm.get('destination_airport_id')?.value;
+        updateBody.actualDepartureDate = this.datePipe.transform(this.actual_departure_date.value, 'dd-MM-yyyy')!;
+        updateBody.actualArrivalDate = this.datePipe.transform(this.actual_arrival_date.value, 'dd-MM-yyyy')!;
+        updateBody.actualArrivalTime = this.legForm.get('actual_arrival_time')?.value;
+        updateBody.actualDepartureTime = this.legForm.get('actual_departure_time')?.value;
+        updateBody.flightId = this.id;
+        this.escalaService.updateLeg(this.leg_id, updateBody).subscribe(data => {
+          this.escalaService.getLegByFlightId(this.id).subscribe(data => {
+            this.legs = data;
+            if (data.length != 0) {
+              this.isEscalaDone = true;
+            }
+          });
+        });
+      } else {
+        this.escalaService.createLeg(body).subscribe(data => {
+          this.escalaService.getLegByFlightId(this.temp_id).subscribe(data => {
+            this.legs = data;
+            if (data.length != 0) {
+              this.isEscalaDone = true;
+            }
+          });
+        });
+      }
+    }
+  }
+
+  public updateCost() {
+    this.costForm.get('flight_id')?.setValue(this.temp_id);
+    this.costForm.get('airline_id')?.setValue(this.airline_id);
+    if (this.costForm.valid) {
+      var body = new CreateCosto();
+      body.airlineId = this.costForm.get('airline_id')?.value;
+      body.flightId = this.temp_id;
+      body.flightCost = this.costForm.get('flight_cost')?.value;
+      body.validFromDate = this.datePipe.transform(this.valid_from_date.value, 'dd-MM-yyyy')!;
+      body.validToDate = this.datePipe.transform(this.valid_to_date.value, 'dd-MM-yyyy')!;
+      if (this.id != 0) {
+        var body = new CreateCosto();
+        body.airlineId = this.costForm.get('airline_id')?.value;
+        body.flightId = this.temp_id;
+        body.flightCost = this.costForm.get('flight_cost')?.value;
+        body.validFromDate = this.datePipe.transform(this.valid_from_date.value, 'dd-MM-yyyy')!;
+        body.validToDate = this.datePipe.transform(this.valid_to_date.value, 'dd-MM-yyyy')!;
+        this.costoService.updateCost(this.cost_id, body).subscribe(data => {
+          this.costoService.getCostsByFlightId(this.id).subscribe(data => {
+            this.costs = data;
+            if (data.length != 0) {
+              this.isCostoDone = true;
+            }
+          });
+        });
+      } else {
+        this.costoService.createCost(body).subscribe(data => {
+          this.costoService.getCostsByFlightId(this.temp_id).subscribe(data => {
+            this.costs = data;
+            if (data.length != 0) {
+              this.isCostoDone = true;
+            }
+          });
+        });
+      }
+    }
+  }
+}