From 494dfeee912570432420958d201d2d5b2f9e7fd6 Mon Sep 17 00:00:00 2001
From: eithan <ne.castillo1607@gmail.com>
Date: Sun, 10 Jan 2021 16:52:51 -0600
Subject: [PATCH] componentes alumno y responsable/nuevo

---
 components/alumno/info.vue                    |  66 +++
 components/alumno/mensajes.vue                |  60 ++
 components/alumno/pre-registro-validado.vue   | 153 +++++
 components/alumno/preTermino.vue              | 183 ++++++
 components/alumno/steps.vue                   |  91 +++
 components/responsable/formServicioSocial.vue | 505 ++++++++++++++++
 components/responsable/nuevoTexto.vue         |  28 +
 pages/alumno/cuestionario/index.vue           | 105 ++--
 pages/alumno/index.vue                        | 447 +-------------
 pages/responsable/nuevo/index.vue             | 555 +-----------------
 10 files changed, 1180 insertions(+), 1013 deletions(-)
 create mode 100644 components/alumno/info.vue
 create mode 100644 components/alumno/mensajes.vue
 create mode 100644 components/alumno/pre-registro-validado.vue
 create mode 100644 components/alumno/preTermino.vue
 create mode 100644 components/alumno/steps.vue
 create mode 100644 components/responsable/formServicioSocial.vue
 create mode 100644 components/responsable/nuevoTexto.vue

diff --git a/components/alumno/info.vue b/components/alumno/info.vue
new file mode 100644
index 0000000..42fc5f4
--- /dev/null
+++ b/components/alumno/info.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="info">
+    <div class="info-programa">
+      <h3 class="title is-3">Información del programa</h3>
+      <p><strong> Programa: </strong> {{ programa.programa }}</p>
+      <p><strong> Institución: </strong> {{ programa.institucion }}</p>
+      <p><strong> Dependencia: </strong> {{ programa.dependencia }}</p>
+      <p><strong> Clave del programa: </strong> {{ programa.clave }}</p>
+      <div v-if="programa.acatlan == true">
+        <p>
+          <strong> Programa Interno: </strong>
+          {{ programa.programaInterno }}
+        </p>
+        <p><strong> Profesor: </strong> {{ programa.profesor }}</p>
+      </div>
+    </div>
+    <div class="info-alumno mt-6">
+      <h3 class="title is-3">Información del alumno</h3>
+      <p><strong> Nombre: </strong> {{ alumno.nombre }}</p>
+      <p><strong> Número de cuenta: </strong> {{ alumno.cuenta }}</p>
+      <p><strong> Carrera: </strong> {{ alumno.carrera }}</p>
+      <p>
+        <strong> Créditos: </strong>{{ alumno.creditos
+        }}<span v-if="alumno.creditos">%</span>
+      </p>
+      <p><strong> Correo del alumno: </strong> {{ alumno.correo }}</p>
+      <p><strong> Fecha de inicio: </strong> {{ fecha(alumno.inicio) }}</p>
+      <p><strong> Fecha de finalización: </strong> {{ fecha(alumno.fin) }}</p>
+      <p><strong> Fecha de registro: </strong> {{ fecha(alumno.registro) }}</p>
+
+      <div class="mt-4 info-extra" v-if="status >= 3">
+        <p><strong> Direccion: </strong> {{ alumno.direccion }}</p>
+        <p><strong> Telefono: </strong> {{ alumno.telefono }}</p>
+        <p>
+          <strong> Fecha de nacimiento: </strong>
+          {{ fecha(alumno.nacimiento) }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.info-alumno p {
+  margin-bottom: 0.8rem;
+}
+.info-programa p {
+  margin-bottom: 0.8rem;
+}
+</style>
+
+<script>
+import moment from "moment";
+export default {
+  data() {
+    return {};
+  },
+  props: ["status", "alumno", "programa"],
+  methods: {
+    fecha(date) {
+      const fecha = moment(date);
+      return `${fecha.year()}/${fecha.month() + 1}/${fecha.date()}`;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/components/alumno/mensajes.vue b/components/alumno/mensajes.vue
new file mode 100644
index 0000000..19e7582
--- /dev/null
+++ b/components/alumno/mensajes.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div class="mensajeDiv" v-for="mensaje in Mensajes" :key="mensaje.status">
+        <div v-if="mensaje.mensaje != '' && mensaje.status == status">
+          <p class="mensaje has-text-justified">
+            <span class="block is-size-5">Estimado alumno(a): </span
+            ><br /><br />
+            {{ mensaje.mensaje }}
+          </p>
+        </div>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.mensaje {
+  margin: 3.5rem 0;
+}
+</style>
+
+<script>
+export default {
+    data(){
+        return{
+        Mensajes: [
+        { status: 1, mensaje: "" },
+        { status: 2, mensaje: "" },
+        {
+          status: 3,
+          mensaje:
+            "Te informamos que el Área de Registro y Control de Servicio Social ha validado tu solicitud de registro de servicio social por lo que el siguiente trámite lo realizarás hasta que concluyas 480 horas en un periodo de mínimo 6 meses y obtengas tu carta de término por parte de la institución, quien se encargará de subir dicho archivo a este sistema, además de responder un cuestionario sobre tu desempeño. A su vez, deberás responder el siguiente cuestionario de evaluación del programa de servicio social en donde participaste y enviar el informe global de actividades elaborado por ti, con firma y sello de visto bueno de tu jefe inmediato. En cuanto el Área de Registro y Control de Servicio Social valide tu solicitud, podrás revisar las indicaciones del siguiente paso en el panel llamado “Liberación” Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 14:00 hrs. y de 16:00 a 20:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@acatlan.unam.mx",
+        },
+        { status: 4, mensaje: "" },
+        {
+          status: 5,
+          mensaje:
+            "Espera a que tus documentos sean validados por el Departamento de Servicio Social y Bolsa de Trabajo",
+        },
+        {
+          status: 6,
+          mensaje:
+            "Te confirmamos que has concluido con los trámites necesarios para la liberación de tu servicio social por lo que ahora sólo queda esperar a que en máximo 15 días hábiles se te notifique por correo electrónico a partir de cuándo puedes recoger la copia de tu carta de liberación en las ventanillas del Área de Registro y Control de Servicio Social. Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 13:00 hrs. y de 16:00 a 19:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@apolo.acatlan.unam.mx",
+        },
+        { status: 7, mensaje: "carta de aceptacion rechazada" },
+        { status: 8, mensaje: "carta de termino rechazada" },
+        {
+          status: 9,
+          mensaje:
+            "Informe global de actividades rechazado. Por favor reenvia el informe correctamente",
+        },
+        {
+          status: 10,
+          mensaje: "servicio cancelado",
+        },
+      ],
+        }
+    },
+    props:[ 'status']
+}
+</script>
\ No newline at end of file
diff --git a/components/alumno/pre-registro-validado.vue b/components/alumno/pre-registro-validado.vue
new file mode 100644
index 0000000..2805080
--- /dev/null
+++ b/components/alumno/pre-registro-validado.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <h3 class="title is-3 my-5">Formulario Pre-registro</h3>
+    <form>
+      <b-field label="Fecha de nacimiento">
+        <b-datepicker
+          placeholder="Fecha de nacimiento"
+          icon="calendar-today"
+          v-model="nacimiento"
+          :min-date="minDate"
+          :max-date="maxDate"
+        >
+        </b-datepicker>
+      </b-field>
+
+      <b-field label="Telefono">
+        <b-input
+          placeholder="Telefono"
+          maxlength="10"
+          v-model="telefono"
+          type="tel"
+        >
+        </b-input>
+      </b-field>
+
+      <b-field label="Direccion">
+        <b-input
+          maxlength="200 "
+          placeholder="Direccion"
+          type="textarea"
+          v-model="direccion"
+        ></b-input>
+      </b-field>
+    </form>
+    <div class="my-4 mb-6">
+      <b-field>
+        <button
+          :disabled="nacimiento == '' || telefono == '' || direccion == ''"
+          class="button is-success is-medium"
+          @click="enviarRegistro()"
+        >
+          Enviar
+        </button>
+      </b-field>
+    </div>
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+import axios from "axios";
+export default {
+  data() {
+    return {
+      token: {
+        headers: {
+          token: window.localStorage.getItem("token"),
+        },
+      },
+      nacimiento: [],
+      minDate: new Date(),
+      maxDate: new Date(),
+      telefono: "",
+      direccion: "",
+      isLoading: false,
+    };
+  },
+  props: ["idServicio"],
+  methods: {
+    reset() {
+      this.nacimiento = [];
+      this.telefono = "";
+      this.direccion = "";
+    },
+    error(msj) {
+      let salir = false;
+      switch (msj) {
+        case "invalid signature":
+          msj = "Tu token no es valido, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt expired":
+          msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt malformed":
+          msj = "No se encontro tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "No hay token":
+          msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+      }
+
+      this.$buefy.dialog.alert({
+        title: "Error",
+        message: msj,
+        type: "is-danger",
+        hasIcon: true,
+        icon: "alert-circle",
+        iconPack: "mdi",
+        ariaRole: "alertdialog",
+        ariaModal: true,
+      });
+      if (salir == true) {
+        localStorage.clear();
+        this.$router.push(`/`);
+      }
+    },
+    enviarRegistro() {
+      this.isLoading = true;
+      const data = {
+        idServicio: this.idServicio,
+        direccion: this.direccion,
+        telefono: this.telefono,
+        fechaNacimiento: moment(this.nacimiento),
+      };
+
+      axios
+        .put(`${process.env.api}/servicio/registro_validado`, data, this.token)
+        .then((res) => {
+          this.$buefy.dialog.alert({
+            title: "Success",
+            message: "Se enviaron los datos correctamente",
+            type: "is-success",
+            hasIcon: true,
+            icon: "checkbox-marked-circle",
+            iconPack: "mdi",
+            ariaRole: "alertdialog",
+            ariaModal: true,
+          });
+
+          this.reset();
+          this.$parent.getData();
+        })
+        .catch((error) => {
+          this.error(error.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+  },
+  created() {
+    let i = new Date().getFullYear() - 80; // hoy - 80 años fecha minima
+    let j = new Date().getFullYear() - 10; //hoy - 10 años
+    this.minDate.setFullYear(i);
+    this.maxDate.setFullYear(j);
+  },
+};
+</script>
\ No newline at end of file
diff --git a/components/alumno/preTermino.vue b/components/alumno/preTermino.vue
new file mode 100644
index 0000000..aabb497
--- /dev/null
+++ b/components/alumno/preTermino.vue
@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <h3 class="title is-4 mt-6">
+      Cuestionario de evaluación del programa de servicio social
+    </h3>
+    <div class="my-6" v-if="idCuestionario == null">
+      <b-button
+        tag="router-link"
+        to="/alumno/cuestionario"
+        type="is-info is-light "
+        icon-left="book-open"
+        class="border-info"
+        size="is-medium"
+      >
+        cuestionario
+      </b-button>
+    </div>
+    <div class="is-flex" v-else>
+      <p class="block is-size-5">Cuestionario contestado</p>
+      <b-icon icon="check-bold" size="is-small" type="is-success"> </b-icon>
+    </div>
+
+    <h3 class="title is-4 mt-6">
+      Informe global de actividades (en formato .PDF. No se aceptan fotos).
+    </h3>
+    <div v-if="informeGlobal == null">
+      <b-field type="black">
+        <b-upload
+          v-model="file"
+          type="black"
+          drag-drop
+          expanded
+          accept="application/pdf"
+        >
+          <section class="section">
+            <div class="content has-text-centered">
+              <p>
+                <b-icon icon="upload" size="is-large"></b-icon>
+              </p>
+              <p>
+                {{
+                  file.name || "Arrastra aquí tu archivo o da click para buscar"
+                }}
+              </p>
+              <p>Tamaño máximo 20MB</p>
+            </div>
+          </section>
+        </b-upload>
+      </b-field>
+      <b-field class="derecha">
+        <button
+          :disabled="file == ''"
+          class="button is-success is-medium mb-4"
+          @click="enviarInforme()"
+        >
+          Enviar
+        </button>
+      </b-field>
+    </div>
+    <div class="is-flex" v-else>
+      <p class="block is-size-5">Informe Global enviado.</p>
+      <b-icon icon="check-bold" size="is-small" type="is-success"> </b-icon>
+    </div>
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
+  </div>
+</template>
+
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      token: {
+        headers: {
+          token: window.localStorage.getItem("token"),
+        },
+      },
+      isLoading: false,
+      file: [],
+    };
+  },
+  props: ["idCuestionario", "informeGlobal", "idServicio"],
+  watch: {
+    file() {
+     
+      if (this.file.size >= 20000000) {
+        this.$buefy.dialog.alert({
+          title: "Error",
+          message: "El tamaño del archivo exede los 20MB",
+          type: "is-danger",
+          hasIcon: true,
+          icon: "alert-circle",
+          iconPack: "mdi",
+          ariaRole: "alertdialog",
+          ariaModal: true,
+        });
+        this.file = [];
+      }
+    },
+  },
+  methods: {
+    reset() {
+      this.file = [];
+    },
+    error(msj) {
+      let salir = false;
+      switch (msj) {
+        case "invalid signature":
+          msj = "Tu token no es valido, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt expired":
+          msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt malformed":
+          msj = "No se encontro tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "No hay token":
+          msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+      }
+
+      this.$buefy.dialog.alert({
+        title: "Error",
+        message: msj,
+        type: "is-danger",
+        hasIcon: true,
+        icon: "alert-circle",
+        iconPack: "mdi",
+        ariaRole: "alertdialog",
+        ariaModal: true,
+      });
+      if (salir == true) {
+        localStorage.clear();
+        this.$router.push(`/`);
+      }
+    },
+    enviarInforme() {
+      this.isLoading = true;
+      const data = {
+        idServicio: this.idServicio,
+      };
+      const formData = new FormData();
+     
+      formData.append("data", JSON.stringify(data));
+      formData.append("informeGlobal", this.file);
+
+      axios
+        .put(`${process.env.api}/servicio/informe_global`, formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            token: this.token.headers.token,
+          },
+        })
+        .then((res) => {
+          this.$buefy.dialog.alert({
+            title: "Success",
+            message: "Se enviaron los datos correctamente",
+            type: "is-success",
+            hasIcon: true,
+            icon: "checkbox-marked-circle",
+            iconPack: "mdi",
+            ariaRole: "alertdialog",
+            ariaModal: true,
+          });
+
+          this.reset();
+          this.$parent.getData();
+        })
+        .catch((error) => {
+          this.error(error.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/components/alumno/steps.vue b/components/alumno/steps.vue
new file mode 100644
index 0000000..343aae1
--- /dev/null
+++ b/components/alumno/steps.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="progressBar my-6">
+        <b-steps
+          type="is-success"
+          size="is-large"
+          :has-navigation="false"
+          v-model="activeStep"
+        >
+          <b-step-item
+            :visible="activeStep < 6"
+            :clickable="false"
+            label="Pre Registro"
+            icon="account-plus"
+          ></b-step-item>
+          <b-step-item
+            :visible="activeStep < 6"
+            :clickable="false"
+            label="Pre Registro Validado"
+            icon="account-clock"
+          ></b-step-item>
+          <b-step-item
+            :visible="activeStep < 6"
+            :clickable="false"
+            label="Registro"
+            icon="account"
+          ></b-step-item>
+          <b-step-item
+            :visible="activeStep < 6"
+            :clickable="false"
+            label="Pre Termino"
+            icon="account-details"
+          ></b-step-item>
+          <b-step-item
+            :visible="activeStep < 6"
+            :clickable="false"
+            label="Termino"
+            icon="account-clock"
+          ></b-step-item>
+          <b-step-item
+            :visible="activeStep < 6"
+            :clickable="false"
+            label="Liberacion"
+            icon="account-check"
+          ></b-step-item>
+
+          <b-step-item
+            :clickable="false"
+            :visible="activeStep == 6"
+            label="Carta Aceptación Rechazada"
+            class="bad"
+            icon="file"
+            type="is-danger"
+          ></b-step-item>
+          <b-step-item
+            :clickable="false"
+            :visible="activeStep == 7"
+            label="Carta Termino Rechazada"
+            icon="file"
+            class="bad"
+            type="is-danger "
+          ></b-step-item>
+          <b-step-item
+            :clickable="false"
+            :visible="activeStep == 8"
+            label="Informe Global Rechazado"
+            icon="file"
+            class="bad"
+            type="is-danger"
+          ></b-step-item>
+          <b-step-item
+            :clickable="false"
+            :visible="activeStep == 9"
+            label="Cancelado"
+            icon="account-cancel"
+            class="bad"
+            type="is-danger bad"
+          ></b-step-item>
+        </b-steps>
+      </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    },
+    props:['activeStep']
+}
+</script>
\ No newline at end of file
diff --git a/components/responsable/formServicioSocial.vue b/components/responsable/formServicioSocial.vue
new file mode 100644
index 0000000..c32048a
--- /dev/null
+++ b/components/responsable/formServicioSocial.vue
@@ -0,0 +1,505 @@
+<template>
+      <section>
+          <h1 class="title is-1  titleAnadir">
+            Añadir Servicio Social
+          </h1>
+          <div
+            class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0"
+          >
+            <div class="column  pl-0">
+              <form>
+                <b-field class="column p-0 my-5 is-full">
+                  <input
+                    class="input column "
+                    v-model="noCuenta"
+                    message="Solo numeros"
+                    required="required"
+                    maxlength="9"
+                    type="number"
+                    placeholder="Cuenta"
+                    min="0"
+                  />
+
+                  <p class="control">
+                    <b-button class="button is-info" @click="buscarAlumno()"
+                      >Buscar</b-button
+                    >
+                  </p>
+                </b-field>
+
+                <b-field label="Nombre">
+                  <div class="input">{{ alumno.nombre }}</div>
+                </b-field>
+
+                <b-field label="Carrera">
+                  <div class="input">{{ alumno.carrera }}</div>
+                </b-field>
+
+                <b-field label="Créditos">
+                  <div class="input">
+                    {{ alumno.creditos }}<span v-if="alumno.creditos">%</span>
+                  </div>
+                </b-field>
+
+                <b-field label="Seleccione programa">
+                  <b-select
+                    placeholder="Seleccionar"
+                    expanded
+                    v-model="programaSelectedID"
+                  >
+                    <option value="">Seleccionar</option>
+                    <option
+                      v-for="programa in programas"
+                      v-bind:key="programa.idPrograma"
+                      :value="programa.idPrograma"
+                      >{{ programa.programa }}</option
+                    >
+                  </b-select>
+                </b-field>
+
+                <b-field label="Institución">
+                  <div class="input">{{ programaSelected.institucion }}</div>
+                </b-field>
+
+                <b-field label="Dependencia">
+                  <div class="input">{{ programaSelected.dependencia }}</div>
+                </b-field>
+
+                <b-field label="Clave del programa">
+                  <div class="input">{{ programaSelected.clavePrograma }}</div>
+                </b-field>
+
+                <div v-if="programaSelected.acatlan == true">
+                  <b-field label="Programa interno">
+                    <b-input
+                      v-model="programaSelected.programaInterno"
+                      placeholder="Programa interno"
+                    ></b-input>
+                  </b-field>
+
+                  <b-field label="Profesor">
+                    <b-input
+                      v-model="programaSelected.profesor"
+                      placeholder="Profesor"
+                    ></b-input>
+                  </b-field>
+                </div>
+
+                <b-field label="Fecha de inicio">
+                  <b-datepicker
+                    placeholder="Inicio"
+                    icon="calendar-today"
+                    v-model="alumno.inicio"
+                    :min-date="minDate"
+                  >
+                  </b-datepicker>
+                </b-field>
+
+                <b-field label="Fecha de fin" v-if="alumno.inicio">
+                  <b-datepicker
+                    placeholder="Fin"
+                    v-model="alumno.fin"
+                    :min-date="minDate2"
+                    icon="calendar-today"
+                  >
+                  </b-datepicker>
+                </b-field>
+
+                <b-field label="Correo">
+                  <b-input
+                    placeholder="Email"
+                    type="email"
+                    v-model="alumno.correo"
+                  ></b-input>
+                </b-field>
+
+                <h3 class="title is-4 mt-6">
+                  Carta de aceptación (en formato .PDF. No se aceptan fotos).
+                </h3>
+
+                <b-field>
+                  <b-upload
+                    v-model="file"
+                    drag-drop
+                    type="is-black"
+                    expanded
+                    accept="application/pdf"
+                  >
+                    <section class="section">
+                      <div class="content has-text-centered">
+                        <p>
+                          <b-icon icon="upload" size="is-large"></b-icon>
+                        </p>
+                        <p>
+                          {{
+                            file.name ||
+                              "Arrastra aquí tu archivo o da click para buscar"
+                          }}
+                        </p>
+                        <p>Tamaño máximo 20MB</p>
+                      </div>
+                    </section>
+                  </b-upload>
+                </b-field>
+              </form>
+
+              <div class="my-6">
+                <b-button
+                  tag="router-link"
+                  to="/responsable"
+                  type="is-info is-light "
+                  icon-left="arrow-left-box"
+                  class="border-info"
+                  style="float: left;"
+                  size="is-mediumm"
+                >
+                  regresar
+                </b-button>
+                    <!-- <BotonRegresar  :path="'/responsable'" /> -->
+
+                <b-field class="derecha">
+                  <button
+                    :disabled="disabled()"
+                    class="button enviar is-success is-mediumm"
+                    @click="Enviar()"
+                  >
+                    Enviar
+                  </button>
+                </b-field>
+              </div>
+            </div>
+          </div>
+        <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
+        </section>
+</template>
+<script>
+import "buefy/dist/buefy.css";
+import validator from "validator";
+import axios from "axios";
+import moment from "moment";
+
+export default {
+  data() {
+    return {
+      token: {
+        headers:{
+          token: window.localStorage.getItem('token')
+        }
+      },
+      isLoading:false,
+      noCuenta: "",
+      sizeOk: "",
+      searched: false,
+      minDate: new Date("2020-12-20"),
+      programaSelectedID: "",
+      file: [],
+      programas: [],
+      programaSelected: {
+        idPrograma: null,
+        institucion: "",
+        dependencia: "",
+        programa: "",
+        clavePrograma: "",
+        acatlan: "",
+        activo: "",
+        idUsuario: "",
+        programaInterno: "",
+        profesor: "",
+      },
+      alumno: {
+        cuenta: "",
+        nombre: "",
+        carrera: "",
+        creditos: "",
+        idAlumno: "",
+        idCarrera: "",
+        inicio: [],
+        fin: [],
+        correo: "",
+      },
+    };
+  },
+  methods: {
+    reset() {
+      this.programaSelected.idPrograma = "";
+      this.programaSelected.institucion = "";
+      this.programaSelected.dependencia = "";
+      this.programaSelected.programa = "";
+      this.programaSelected.clavePrograma = "";
+      this.programaSelected.acatlan = "";
+      this.programaSelected.activo = "";
+      this.programaSelected.idUsuario = "";
+      this.programaSelected.programaInterno = "";
+      this.programaSelected.profesor = "";
+
+      this.alumno.cuenta = "";
+      this.alumno.nombre = "";
+      this.alumno.creditos = "";
+      this.alumno.carrera = "";
+      this.alumno.idAlumno = "";
+      this.alumno.idCarrera = "";
+      this.alumno.correo = "";
+      this.alumno.inicio = [];
+      this.alumno.fin = [];
+
+      this.noCuenta = "";
+      this.file = [];
+      this.programaSelectedID = "";
+    },
+    disabled() {
+      if (this.programaSelected.acatlan == false) {
+        if (
+          this.file != "" &&
+          this.noCuenta != "" &&
+          this.alumno.correo != "" &&
+          this.alumno.inicio != "" &&
+          this.alumno.fin != "" &&
+          this.programaSelectedID != ""
+        )
+          return false;
+        else return true;
+      } else {
+        if (
+          this.file != "" &&
+          this.noCuenta != "" &&
+          this.alumno.correo != "" &&
+          this.alumno.inicio != "" &&
+          this.alumno.fin != "" &&
+          this.programaSelectedID != "" &&
+          this.programaSelected.programaInterno != "" &&
+          this.programaSelected.profesor != ""
+        )
+          return false;
+        else return true;
+      }
+    },
+    esNumero(numero) {
+      const ultimaLetra = numero.length - 1;
+
+      if (numero && !validator.isNumeric(numero[ultimaLetra])) {
+        return numero.substr(0, ultimaLetra);
+      }
+      return numero;
+    },
+    maxLength(str, max) {
+      if (str.length > max) return str.substr(0, max);
+      return str;
+    },
+    correoValidado() {
+      if (validator.isEmail(this.alumno.correo)) {
+       
+        return "";
+      }
+    },
+    error(msj){
+      let salir =false;
+        switch(msj){
+          case 'invalid signature': 
+          msj= "Tu token no es valido, inicia sesión de nuevo."
+          salir=true
+          break; 
+          case 'jwt expired': 
+          msj= "Tu sesión ha expirado, inicia sesión de nuevo."
+          salir=true
+          break; 
+           case 'jwt malformed': 
+          msj= "No se encontro tu token, inicia sesión de nuevo."
+          salir=true
+          break; 
+          case 'No hay token': 
+          msj= "Ocurrio un error al enviar tu token, inicia sesión de nuevo."
+          salir=true
+          break; 
+        }
+
+      this.$buefy.dialog.alert({
+        title: "Error",
+        message: msj,
+        type: "is-danger",
+        hasIcon: true,
+        icon: "alert-circle",
+        iconPack: "mdi",
+        ariaRole: "alertdialog",
+        ariaModal: true,
+          });
+        if (salir == true) {
+          localStorage.clear()
+                  this.$router.push(`/`)
+        }
+
+    },
+    buscarAlumno() {
+      this.isLoading=true
+      axios
+        .get(`${process.env.api}/usuario/escolares?numeroCuenta=${this.noCuenta}`,this.token)
+        .then((resp) => {
+        
+          this.alumno.cuenta = this.noCuenta;
+          this.alumno.nombre = resp.data.nombre;
+          this.alumno.carrera = resp.data.carrera;
+          this.alumno.creditos = parseInt(resp.data.creditos, 10);
+          this.alumno.idCarrera = resp.data.idCarrera;
+          this.alumno.idAlumno = resp.data.idUsuario;
+          this.searched = true;
+        })
+        .catch((error) => {
+          this.error(error.response.data.message)
+        })
+        .finally(()=>{
+          this.isLoading = false
+        });
+    },
+    Enviar() {
+      this.isLoading=true
+      const data = {
+        idUsuario: this.alumno.idAlumno,
+        idPrograma: this.programaSelected.idPrograma,
+        idCarrera: this.alumno.idCarrera,
+        numeroCuenta: this.alumno.cuenta,
+        creditos: this.alumno.creditos.toString(),
+        correo: this.alumno.correo,
+        programaInterno: this.programaSelected.programaInterno,
+        profesor: this.programaSelected.profesor,
+        fechaInicio: moment(this.alumno.inicio),
+        fechaFin: moment(this.alumno.fin),
+       };
+        const formData = new FormData();
+     
+        formData.append("alumno", JSON.stringify(data));
+        formData.append("cartaAceptacion", this.file);
+
+      axios
+        .post(`${process.env.api}/servicio/nuevo`, formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            token:this.token.headers.token
+          },
+        })
+        .then((res) => {
+          this.$buefy.dialog.alert({
+            title: "Success",
+            message: "Se enviaron los datos correctamente",
+            type: "is-success",
+            hasIcon: true,
+            icon: "checkbox-marked-circle",
+            iconPack: "mdi",
+            ariaRole: "alertdialog",
+            ariaModal: true,
+          });
+          this.reset();
+        })
+        .catch((error) => {
+         this.error(error.response.data.message)
+        })
+        .finally(()=>{
+          this.isLoading = false
+        });
+    },
+  },
+  watch: {
+    noCuenta() {
+      if (this.searched === false) {
+        this.noCuenta = Number(this.noCuenta) < 0 ? "" : this.noCuenta;
+        this.noCuenta = this.esNumero(this.noCuenta);
+        this.noCuenta = this.maxLength(this.noCuenta, 9);
+      } else {
+        this.noCuenta = "";
+        this.searched = false;
+        this.reset();
+      }
+    },
+    programaSelectedID() {
+      if (this.programaSelectedID) {
+        for (let i = 0; i < this.programas.length; i++) {
+          if (this.programas[i].idPrograma === this.programaSelectedID) {
+            this.programaSelected.idPrograma = this.programas[i].idPrograma;
+            this.programaSelected.programa = this.programas[i].programa;
+            this.programaSelected.institucion = this.programas[i].institucion;
+            this.programaSelected.dependencia = this.programas[i].dependencia;
+            this.programaSelected.clavePrograma = this.programas[
+              i
+            ].clavePrograma;
+            this.programaSelected.acatlan = this.programas[i].acatlan;
+            this.programaSelected.activo = this.programas[i].activo;
+          }
+        }
+      }
+      else{
+     
+         this.programaSelected.institucion = "";
+      this.programaSelected.dependencia = "";
+      this.programaSelected.programa = "";
+      this.programaSelected.clavePrograma = "";
+      this.programaSelected.acatlan = "";
+      this.programaSelected.activo = "";
+      //this.programaSelected.idUsuario = "";
+      this.programaSelected.programaInterno = "";
+      this.programaSelected.profesor = "";
+      
+   
+      }
+    },
+    file() {
+   
+      if (this.file.size >= 20000000) {
+        this.$buefy.dialog.alert({
+          title: "Error",
+          message: "El tamaño del archivo exede los 20MB",
+          type: "is-danger",
+          hasIcon: true,
+          icon: "alert-circle",
+          iconPack: "mdi",
+          ariaRole: "alertdialog",
+          ariaModal: true,
+        });
+        this.file = [];
+      }
+    },
+    "alumno.inicio"() {
+      this.alumno.fin = [];
+    },
+  },
+  mounted() {
+   
+    axios
+      .get(`${process.env.api}/programa?idUsuario=${localStorage.getItem("idUsuario")}`, this.token)
+      .then((resp) => { 
+        this.programas = resp.data;   
+      })
+      .catch((error) => {
+        this.error(error.response.data.message)
+      });
+  },
+  computed: {
+    minDate2() {
+      const min = new Date(this.alumno.inicio);
+      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
+    },
+  },
+};
+</script>
+<style scoped>
+.titleAnadir,
+pre {
+  margin: 4rem 0 0rem 0;
+}
+.derecha {
+  text-align: center;
+}
+.file-cta {
+  background-color: #167df0 !important;
+}
+.disabled {
+  cursor: help !important;
+  pointer-events: all !important;
+}
+.columns {
+  margin: 0;
+}
+
+@media (min-width: 600px) {
+  .derecha {
+    padding-right: 120px;
+  }
+}
+</style>
diff --git a/components/responsable/nuevoTexto.vue b/components/responsable/nuevoTexto.vue
new file mode 100644
index 0000000..48f62ea
--- /dev/null
+++ b/components/responsable/nuevoTexto.vue
@@ -0,0 +1,28 @@
+<template>
+     <section class="mensaje has-text-justified is-size-6 ">
+          <p class="block is-size-5">
+            Estimado(a) responsable de programa de servicio social:
+          </p>
+
+          <p class="block ">
+            Te solicitamos llenar cuidadosamente los campos solicitados a
+            continuación para iniciar el trámite de registro de servicio social
+            de nuestro alumno(a), quien a su vez completará posteriormente el
+            proceso en este mismo sistema con otros datos.
+          </p>
+          <p class="block ">
+            Es muy importante escribir correctamente el correo del alumno para
+            que el sistema pueda enviarle la notificación correspondiente de que
+            ya puede ingresar a completar su registro. También debes tomar en
+            cuenta que la fecha de inicio NO se podrá modificar, sólo la fecha
+            de término en caso de que el alumno no cumpla las 480 horas en el
+            periodo mínimo de 6 meses. Al siguiente día de la fecha de término
+            programada, se activará la opción de cargar la carta de término y
+            llenar el cuestionario de desempeño del alumno. En caso de que
+            exista algún error en los datos o cartas emitidas se les notificará
+            en este panel en cuanto el Departamento de Servicio Social y Bolsa
+            de Trabajo revise su solicitud, para que realicen la corrección
+            correspondiente.
+          </p>
+        </section>
+</template>
diff --git a/pages/alumno/cuestionario/index.vue b/pages/alumno/cuestionario/index.vue
index 6d4b27d..ba90051 100644
--- a/pages/alumno/cuestionario/index.vue
+++ b/pages/alumno/cuestionario/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="container my-5 px-3 ">
+  <section class="container my-5 px-3">
     <div v-if="idCuestionario === 'null'">
       <b-button
         tag="router-link"
@@ -539,9 +539,9 @@
                       placeholder="Seleccionar"
                       v-model="answers.p22[index]"
                     >
-                      <option v-for="i in 10" :key="i" :value="i">{{
-                        i
-                      }}</option>
+                      <option v-for="i in 10" :key="i" :value="i">
+                        {{ i }}
+                      </option>
                     </b-select>
                   </b-field>
                 </td>
@@ -567,9 +567,9 @@
                       placeholder="Seleccionar"
                       v-model="answers.p23[index]"
                     >
-                      <option v-for="i in 10" :key="i" :value="i">{{
-                        i
-                      }}</option>
+                      <option v-for="i in 10" :key="i" :value="i">
+                        {{ i }}
+                      </option>
                     </b-select>
                   </b-field>
                 </td>
@@ -595,9 +595,9 @@
                       placeholder="Seleccionar"
                       v-model="answers.p24[index]"
                     >
-                      <option v-for="i in 10" :key="i" :value="i">{{
-                        i
-                      }}</option>
+                      <option v-for="i in 10" :key="i" :value="i">
+                        {{ i }}
+                      </option>
                     </b-select>
                   </b-field>
                 </td>
@@ -655,8 +655,9 @@
                         v-for="(adj, i) in adjetivos"
                         :key="adj"
                         :value="i"
-                        >{{ adj }}</option
                       >
+                        {{ adj }}
+                      </option>
                     </b-select>
                   </b-field>
                 </td>
@@ -683,8 +684,9 @@
                         v-for="(adj, i) in adjetivos"
                         :key="adj"
                         :value="i"
-                        >{{ adj }}</option
                       >
+                        {{ adj }}
+                      </option>
                     </b-select>
                   </b-field>
                 </td>
@@ -712,7 +714,7 @@
         </div>
       </div>
 
-      <div class="buttons px-auto  is-justify-content-center">
+      <div class="buttons px-auto is-justify-content-center">
         <button
           class="navPages button is-info"
           :class="{ active: current == 1 }"
@@ -762,15 +764,15 @@
         </button>
       </div>
     </div>
-    <div v-else class="vh ">
+    <div v-else class="vh">
       <h1>Ya has contestado tu cuestionario :)</h1>
     </div>
-       <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
   </section>
 </template>
 
 <script>
-import Buefy from 'buefy';
+import Buefy from "buefy";
 import "buefy/dist/buefy.css";
 import moment from "moment";
 import axios from "axios";
@@ -779,9 +781,9 @@ export default {
   data() {
     return {
       token: {
-        headers:{
-          token: window.localStorage.getItem('token')
-        }
+        headers: {
+          token: window.localStorage.getItem("token"),
+        },
       },
       maxCheckbox: 0,
       isLoading: false,
@@ -1022,26 +1024,26 @@ export default {
       // activar boton
       else return true;
     },
-   error(msj){
-      let salir =false;
-        switch(msj){
-          case 'invalid signature': 
-          msj= "Tu token no es valido, inicia sesión de nuevo."
-          salir=true
-          break; 
-          case 'jwt expired': 
-          msj= "Tu sesión ha expirado, inicia sesión de nuevo."
-          salir=true
-          break; 
-           case 'jwt malformed': 
-          msj= "No se encontro tu token, inicia sesión de nuevo."
-          salir=true
-          break; 
-          case 'No hay token': 
-          msj= "Ocurrio un error al enviar tu token, inicia sesión de nuevo."
-          salir=true
-          break; 
-        }
+    error(msj) {
+      let salir = false;
+      switch (msj) {
+        case "invalid signature":
+          msj = "Tu token no es valido, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt expired":
+          msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt malformed":
+          msj = "No se encontro tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "No hay token":
+          msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+      }
 
       this.$buefy.dialog.alert({
         title: "Error",
@@ -1052,19 +1054,17 @@ export default {
         iconPack: "mdi",
         ariaRole: "alertdialog",
         ariaModal: true,
-          });
-        if (salir == true) {
-          localStorage.clear()
-                  this.$router.push(`/`)
-        }
-
+      });
+      if (salir == true) {
+        localStorage.clear();
+        this.$router.push(`/`);
+      }
     },
 
     enviarCuestionario() {
-      this.isLoading=true
+      this.isLoading = true;
 
       if (this.answers.p3Otro != "" && this.maxCheckbox < 3) {
-        console.log("agregarotro");
         this.answers.p3.push(this.answers.p3Otro);
       }
 
@@ -1105,12 +1105,10 @@ export default {
         p29: this.answers.p29,
         p30: this.answers.p30,
       };
-      console.log(data);
 
       axios
         .post(`${process.env.api}/cuestionario_alumno`, data, this.token)
         .then((res) => {
-          
           this.$buefy.dialog.alert({
             title: "Success",
             message: "Se enviaron los datos correctamente",
@@ -1127,16 +1125,15 @@ export default {
           this.$router.push("/alumno");
         })
         .catch((error) => {
-          this.error(error.response.data.message)
-        })
-        .finally(()=>{
-          this.isLoading=false
+          this.error(error.response.data.message);
         })
+        .finally(() => {
+          this.isLoading = false;
+        });
     },
   },
   mounted() {
     this.idCuestionario = localStorage.getItem("idCuestionarioAlumno");
-    console.log("este es el id del cuestionario:" + this.idCuestionario);
   },
   watch: {
     "answers.servicioMedicoAux"() {
diff --git a/pages/alumno/index.vue b/pages/alumno/index.vue
index 898feaf..28859ba 100644
--- a/pages/alumno/index.vue
+++ b/pages/alumno/index.vue
@@ -1,268 +1,35 @@
 <template>
   <section>
-    <div class="container px-3">
-      <div class="progressBar my-6">
-        <b-steps
-          type="is-success"
-          size="is-large"
-          :has-navigation="false"
-          v-model="activeStep"
-        >
-          <b-step-item
-            :visible="activeStep < 6"
-            :clickable="false"
-            label="Pre Registro"
-            icon="account-plus"
-          ></b-step-item>
-          <b-step-item
-            :visible="activeStep < 6"
-            :clickable="false"
-            label="Pre Registro Validado"
-            icon="account-clock"
-          ></b-step-item>
-          <b-step-item
-            :visible="activeStep < 6"
-            :clickable="false"
-            label="Registro"
-            icon="account"
-          ></b-step-item>
-          <b-step-item
-            :visible="activeStep < 6"
-            :clickable="false"
-            label="Pre Termino"
-            icon="account-details"
-          ></b-step-item>
-          <b-step-item
-            :visible="activeStep < 6"
-            :clickable="false"
-            label="Termino"
-            icon="account-clock"
-          ></b-step-item>
-          <b-step-item
-            :visible="activeStep < 6"
-            :clickable="false"
-            label="Liberacion"
-            icon="account-check"
-          ></b-step-item>
-
-          <b-step-item
-            :clickable="false"
-            :visible="activeStep == 6"
-            label="Carta Aceptación Rechazada"
-            class="bad"
-            icon="file"
-            type="is-danger"
-          ></b-step-item>
-          <b-step-item
-            :clickable="false"
-            :visible="activeStep == 7"
-            label="Carta Termino Rechazada"
-            icon="file"
-            class="bad"
-            type="is-danger "
-          ></b-step-item>
-          <b-step-item
-            :clickable="false"
-            :visible="activeStep == 8"
-            label="Informe Global Rechazado"
-            icon="file"
-            class="bad"
-            type="is-danger"
-          ></b-step-item>
-          <b-step-item
-            :clickable="false"
-            :visible="activeStep == 9"
-            label="Cancelado"
-            icon="account-cancel"
-            class="bad"
-            type="is-danger bad"
-          ></b-step-item>
-        </b-steps>
-      </div>
-
-      <div class="mensajeDiv" v-for="mensaje in mensajes" :key="mensaje.status">
-        <div v-if="mensaje.mensaje != '' && mensaje.status == status">
-          <p class="mensaje has-text-justified">
-            <span class="block is-size-5">Estimado alumno(a): </span
-            ><br /><br />
-            {{ mensaje.mensaje }}
-          </p>
-        </div>
-      </div>
-
-      <div class="info">
-        <div class="info-programa">
-          <h3 class="title is-3">Información del programa</h3>
-          <p><strong> Programa: </strong> {{ programa.programa }}</p>
-          <p><strong> Institución: </strong> {{ programa.institucion }}</p>
-          <p><strong> Dependencia: </strong> {{ programa.dependencia }}</p>
-          <p><strong> Clave del programa: </strong> {{ programa.clave }}</p>
-          <div v-if="programa.acatlan == true">
-            <p>
-              <strong> Programa Interno: </strong>
-              {{ programa.programaInterno }}
-            </p>
-            <p><strong> Profesor: </strong> {{ programa.profesor }}</p>
-          </div>
-        </div>
-        <div class="info-alumno mt-6">
-          <h3 class="title is-3">Información del alumno</h3>
-          <p><strong> Nombre: </strong> {{ alumno.nombre }}</p>
-          <p><strong> Número de cuenta: </strong> {{ alumno.cuenta }}</p>
-          <p><strong> Carrera: </strong> {{ alumno.carrera }}</p>
-          <p>
-            <strong> Créditos: </strong>{{ alumno.creditos
-            }}<span v-if="alumno.creditos">%</span>
-          </p>
-          <p><strong> Correo del alumno: </strong> {{ alumno.correo }}</p>
-          <p><strong> Fecha de inicio: </strong> {{ fecha(alumno.inicio) }}</p>
-          <p>
-            <strong> Fecha de finalización: </strong> {{ fecha(alumno.fin) }}
-          </p>
-          <p>
-            <strong> Fecha de registro: </strong> {{ fecha(alumno.registro) }}
-          </p>
-
-          <div class="mt-4 info-extra" v-if="status >= 3">
-            <p><strong> Direccion: </strong> {{ alumno.direccion }}</p>
-            <p><strong> Telefono: </strong> {{ alumno.telefono }}</p>
-            <p>
-              <strong> Fecha de nacimiento: </strong>
-              {{ fecha(alumno.nacimiento) }}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div class="pre-registro-validado" v-if="status == 2">
-        <h3 class="title is-3 my-5">Formulario Pre-registro</h3>
-        <form>
-          <b-field label="Fecha de nacimiento">
-            <b-datepicker
-              placeholder="Fecha de nacimiento"
-              icon="calendar-today"
-              v-model="nacimiento"
-              :min-date="minDate"
-              :max-date="maxDate"
-            >
-            </b-datepicker>
-          </b-field>
-
-          <b-field label="Telefono">
-            <b-input
-              placeholder="Telefono"
-              maxlength="10"
-              v-model="telefono"
-              type="tel"
-            >
-            </b-input>
-          </b-field>
-
-          <b-field label="Direccion">
-            <b-input
-              maxlength="200 "
-              placeholder="Direccion"
-              type="textarea"
-              v-model="direccion"
-            ></b-input>
-          </b-field>
-        </form>
-        <div class="my-4 mb-6">
-          <b-field>
-            <button
-              :disabled="nacimiento == '' || telefono == '' || direccion == ''"
-              class="button is-success is-medium"
-              @click="enviarRegistro()"
-            >
-              Enviar
-            </button>
-          </b-field>
-        </div>
-      </div>
-
-      <div class="registro" v-if="status == 3"></div>
-
-      <div class="pre-termino" v-if="status == 4 || status == 9">
-        <h3 class="title is-4 mt-6">
-          Cuestionario de evaluación del programa de servicio social
-        </h3>
-        <div class="my-6" v-if="alumno.idCuestionario == null">
-          <b-button
-            tag="router-link"
-            to="/alumno/cuestionario"
-            type="is-info is-light "
-            icon-left="book-open"
-            class="border-info"
-            size="is-medium"
-          >
-            cuestionario
-          </b-button>
-        </div>
-        <div class="is-flex" v-else>
-          <p class="block is-size-5">Cuestionario contestado</p>
-          <b-icon icon="check-bold" size="is-small" type="is-success"> </b-icon>
-        </div>
-
-        <h3 class="title is-4 mt-6">
-          Informe global de actividades (en formato .PDF. No se aceptan fotos).
-        </h3>
-        <div v-if="alumno.informeGlobal == null">
-          <b-field type="black">
-            <b-upload
-              v-model="file"
-              type="black"
-              drag-drop
-              expanded
-              accept="application/pdf"
-            >
-              <section class="section">
-                <div class="content has-text-centered">
-                  <p>
-                    <b-icon icon="upload" size="is-large"></b-icon>
-                  </p>
-                  <p>
-                    {{
-                      file.name ||
-                        "Arrastra aquí tu archivo o da click para buscar"
-                    }}
-                  </p>
-                  <p>Tamaño máximo 20MB</p>
-                </div>
-              </section>
-            </b-upload>
-          </b-field>
-          <b-field class="derecha">
-            <button
-              :disabled="file == ''"
-              class="button is-success is-medium mb-4"
-              @click="enviarInforme()"
-            >
-              Enviar
-            </button>
-          </b-field>
-        </div>
-        <div class="is-flex" v-else>
-          <p class="block is-size-5">Informe Global enviado.</p>
-          <b-icon icon="check-bold" size="is-small" type="is-success"> </b-icon>
-        </div>
-      </div>
-
-      <div class="termino" v-if="status == 5"></div>
-
-      <div class="Liberacion" v-if="status == 6"></div>
+    <div class="container">
+      <Steps :activeStep="activeStep" />
+      <Mensajes :status="status" />
+      <Info :status="status" :alumno="alumno" :programa="programa" />
+      <PreRegistroValidado :idServicio="alumno.idServicio" v-if="status == 2" />
+      <PreTermino
+        :idServicio="alumno.idServicio"
+        :idCuestionario="alumno.idCuestionario"
+        :informeGlobal="alumno.informeGlobal"
+        v-if="status == 4 || status == 9"
+      />
     </div>
-
-    <div class="container px-3"></div>
-    <!-- <pre>{{ $data }}</pre> -->
-    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
   </section>
 </template>
 
+<style scoped>
+.container{
+  padding: 0.75rem;
+}
+</style>
+
 <script>
 import "buefy/dist/buefy.css";
 import moment from "moment";
 import axios from "axios";
-
+import Steps from "../../components/alumno/steps";
+import Info from "../../components/alumno/info";
+import Mensajes from "../../components/alumno/mensajes";
+import PreRegistroValidado from "../../components/alumno/pre-registro-validado";
+import PreTermino from "../../components/alumno/preTermino";
 export default {
   data() {
     return {
@@ -307,46 +74,16 @@ export default {
         programaInterno: "",
         profesor: "",
       },
-      mensajes: [
-        { status: 1, mensaje: "" },
-        { status: 2, mensaje: "" },
-        {
-          status: 3,
-          mensaje:
-            "Te informamos que el Área de Registro y Control de Servicio Social ha validado tu solicitud de registro de servicio social por lo que el siguiente trámite lo realizarás hasta que concluyas 480 horas en un periodo de mínimo 6 meses y obtengas tu carta de término por parte de la institución, quien se encargará de subir dicho archivo a este sistema, además de responder un cuestionario sobre tu desempeño. A su vez, deberás responder el siguiente cuestionario de evaluación del programa de servicio social en donde participaste y enviar el informe global de actividades elaborado por ti, con firma y sello de visto bueno de tu jefe inmediato. En cuanto el Área de Registro y Control de Servicio Social valide tu solicitud, podrás revisar las indicaciones del siguiente paso en el panel llamado “Liberación” Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 14:00 hrs. y de 16:00 a 20:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@acatlan.unam.mx",
-        },
-        { status: 4, mensaje: "" },
-        {
-          status: 5,
-          mensaje:
-            "Espera a que tus documentos sean validados por el Departamento de Servicio Social y Bolsa de Trabajo",
-        },
-        {
-          status: 6,
-          mensaje:
-            "Te confirmamos que has concluido con los trámites necesarios para la liberación de tu servicio social por lo que ahora sólo queda esperar a que en máximo 15 días hábiles se te notifique por correo electrónico a partir de cuándo puedes recoger la copia de tu carta de liberación en las ventanillas del Área de Registro y Control de Servicio Social. Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 13:00 hrs. y de 16:00 a 19:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@apolo.acatlan.unam.mx",
-        },
-        { status: 7, mensaje: "carta de aceptacion rechazada" },
-        { status: 8, mensaje: "carta de termino rechazada" },
-        {
-          status: 9,
-          mensaje:
-            "Informe global de actividades rechazado. Por favor reenvia el informe correctamente",
-        },
-        {
-          status: 10,
-          mensaje: "servicio cancelado",
-        },
-      ],
     };
   },
+  components: {
+    Steps,
+    Mensajes,
+    Info,
+    PreRegistroValidado,
+    PreTermino,
+  },
   methods: {
-    reset() {
-      this.file = [];
-      this.nacimiento = [];
-      this.telefono = "";
-      this.direccion = "";
-    },
     error(msj) {
       let salir = false;
       switch (msj) {
@@ -392,7 +129,7 @@ export default {
           this.token
         )
         .then((resp) => {
-          console.log(resp.data);
+         
           this.activeStep = resp.data.Status.idStatus - 1;
           this.status = resp.data.Status.idStatus;
 
@@ -430,134 +167,10 @@ export default {
           this.error(error.response.data.message);
         });
     },
-    enviarRegistro() {
-      this.isLoading = true;
-      const data = {
-        idServicio: this.alumno.idServicio,
-        direccion: this.direccion,
-        telefono: this.telefono,
-        fechaNacimiento: moment(this.nacimiento),
-      };
-
-      axios
-        .put(`${process.env.api}/servicio/registro_validado`, data, this.token)
-        .then((res) => {
-          this.$buefy.dialog.alert({
-            title: "Success",
-            message: "Se enviaron los datos correctamente",
-            type: "is-success",
-            hasIcon: true,
-            icon: "checkbox-marked-circle",
-            iconPack: "mdi",
-            ariaRole: "alertdialog",
-            ariaModal: true,
-          });
-
-          this.reset();
-          this.getData();
-        })
-        .catch((error) => {
-          this.error(error.response.data.message);
-        })
-        .finally(() => {
-          this.isLoading = false;
-        });
-    },
-    enviarInforme() {
-      this.isLoading = true;
-      const data = {
-        idServicio: this.alumno.idServicio,
-      };
-      const formData = new FormData();
-      console.log(data);
-      formData.append("data", JSON.stringify(data));
-      formData.append("informeGlobal", this.file);
-
-      axios
-        .put(`${process.env.api}/servicio/informe_global`, formData, {
-          headers: {
-            "Content-Type": "multipart/form-data",
-            token: this.token.headers.token,
-          },
-        })
-        .then((res) => {
-          this.$buefy.dialog.alert({
-            title: "Success",
-            message: "Se enviaron los datos correctamente",
-            type: "is-success",
-            hasIcon: true,
-            icon: "checkbox-marked-circle",
-            iconPack: "mdi",
-            ariaRole: "alertdialog",
-            ariaModal: true,
-          });
-
-          this.reset();
-          this.getData();
-        })
-        .catch((error) => {
-          this.error(error.response.data.message);
-        })
-        .finally(() => {
-          this.isLoading = false;
-        });
-    },
-    fecha(date) {
-      const fecha = moment(date);
-      return `${fecha.year()}/${fecha.month() + 1}/${fecha.date()}`;
-    },
-  },
-  computed: {
-    steps() {
-      const steps = [...this.baseSteps];
-      return steps;
-    },
   },
   created() {
     this.getData();
   },
-  watch: {
-    file() {
-      console.log(this.file.size);
-      if (this.file.size >= 20000000) {
-        this.$buefy.dialog.alert({
-          title: "Error",
-          message: "El tamaño del archivo exede los 20MB",
-          type: "is-danger",
-          hasIcon: true,
-          icon: "alert-circle",
-          iconPack: "mdi",
-          ariaRole: "alertdialog",
-          ariaModal: true,
-        });
-        this.file = [];
-      }
-    },
-  },
-  mounted() {
-    let i = new Date().getFullYear() - 80; // hoy - 80 años fecha minima
-    let j = new Date().getFullYear() - 10; //hoy - 10 años
-    this.minDate.setFullYear(i);
-    this.maxDate.setFullYear(j);
-  },
 };
 </script>
 
-<style scoped>
-.border-info {
-  border: 1px solid #167df0;
-}
-.info-alumno p {
-  margin-bottom: 0.8rem;
-}
-.info-programa p {
-  margin-bottom: 0.8rem;
-}
-.mensaje {
-  margin: 3.5rem 0;
-}
-.else {
-  display: flex;
-  align-content: center !important;
-}
-</style>
diff --git a/pages/responsable/nuevo/index.vue b/pages/responsable/nuevo/index.vue
index bcc7136..d15d867 100644
--- a/pages/responsable/nuevo/index.vue
+++ b/pages/responsable/nuevo/index.vue
@@ -1,555 +1,26 @@
 <template>
   <div class="container">
-    <div class="columns is-mobile">
-      <div class="column ">
-        <b-button
-          tag="router-link"
-          to="/responsable"
-          type="is-info is-light "
-          icon-left="arrow-left-box"
-          class="border-info my-5"
-          size="is-medium"
-        >
-          regresar
-        </b-button>
-
-        <section class="mensaje has-text-justified is-size-6 ">
-          <p class="block is-size-5">
-            Estimado(a) responsable de programa de servicio social:
-          </p>
-
-          <p class="block ">
-            Te solicitamos llenar cuidadosamente los campos solicitados a
-            continuación para iniciar el trámite de registro de servicio social
-            de nuestro alumno(a), quien a su vez completará posteriormente el
-            proceso en este mismo sistema con otros datos.
-          </p>
-          <p class="block ">
-            Es muy importante escribir correctamente el correo del alumno para
-            que el sistema pueda enviarle la notificación correspondiente de que
-            ya puede ingresar a completar su registro. También debes tomar en
-            cuenta que la fecha de inicio NO se podrá modificar, sólo la fecha
-            de término en caso de que el alumno no cumpla las 480 horas en el
-            periodo mínimo de 6 meses. Al siguiente día de la fecha de término
-            programada, se activará la opción de cargar la carta de término y
-            llenar el cuestionario de desempeño del alumno. En caso de que
-            exista algún error en los datos o cartas emitidas se les notificará
-            en este panel en cuanto el Departamento de Servicio Social y Bolsa
-            de Trabajo revise su solicitud, para que realicen la corrección
-            correspondiente.
-          </p>
-        </section>
-
-        <section>
-          <h1 class="title is-1  titleAnadir">
-            Añadir Servicio Social
-          </h1>
-
-          <div
-            class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0"
-          >
-            <div class="column  pl-0">
-              <form>
-                <b-field class="column p-0 my-5 is-full">
-                  <input
-                    class="input column "
-                    v-model="noCuenta"
-                    message="Solo numeros"
-                    required="required"
-                    maxlength="9"
-                    type="number"
-                    placeholder="Cuenta"
-                    min="0"
-                  />
-
-                  <p class="control">
-                    <b-button class="button is-info" @click="buscarAlumno()"
-                      >Buscar</b-button
-                    >
-                  </p>
-                </b-field>
-
-                <b-field label="Nombre">
-                  <div class="input">{{ alumno.nombre }}</div>
-                </b-field>
-
-                <b-field label="Carrera">
-                  <div class="input">{{ alumno.carrera }}</div>
-                </b-field>
-
-                <b-field label="Créditos">
-                  <div class="input">
-                    {{ alumno.creditos }}<span v-if="alumno.creditos">%</span>
-                  </div>
-                </b-field>
-
-                <b-field label="Seleccione programa">
-                  <b-select
-                    placeholder="Seleccionar"
-                    expanded
-                    v-model="programaSelectedID"
-                  >
-                    <option value="">Seleccionar</option>
-                    <option
-                      v-for="programa in programas"
-                      v-bind:key="programa.idPrograma"
-                      :value="programa.idPrograma"
-                      >{{ programa.programa }}</option
-                    >
-                  </b-select>
-                </b-field>
-
-                <b-field label="Institución">
-                  <div class="input">{{ programaSelected.institucion }}</div>
-                </b-field>
-
-                <b-field label="Dependencia">
-                  <div class="input">{{ programaSelected.dependencia }}</div>
-                </b-field>
-
-                <b-field label="Clave del programa">
-                  <div class="input">{{ programaSelected.clavePrograma }}</div>
-                </b-field>
-
-                <div v-if="programaSelected.acatlan == true">
-                  <b-field label="Programa interno">
-                    <b-input
-                      v-model="programaSelected.programaInterno"
-                      placeholder="Programa interno"
-                    ></b-input>
-                  </b-field>
-
-                  <b-field label="Profesor">
-                    <b-input
-                      v-model="programaSelected.profesor"
-                      placeholder="Profesor"
-                    ></b-input>
-                  </b-field>
-                </div>
-
-                <b-field label="Fecha de inicio">
-                  <b-datepicker
-                    placeholder="Inicio"
-                    icon="calendar-today"
-                    v-model="alumno.inicio"
-                    :min-date="minDate"
-                  >
-                  </b-datepicker>
-                </b-field>
-
-                <b-field label="Fecha de fin" v-if="alumno.inicio">
-                  <b-datepicker
-                    placeholder="Fin"
-                    v-model="alumno.fin"
-                    :min-date="minDate2"
-                    icon="calendar-today"
-                  >
-                  </b-datepicker>
-                </b-field>
-
-                <b-field label="Correo">
-                  <b-input
-                    placeholder="Email"
-                    type="email"
-                    v-model="alumno.correo"
-                  ></b-input>
-                </b-field>
-
-                <h3 class="title is-4 mt-6">
-                  Carta de aceptación (en formato .PDF. No se aceptan fotos).
-                </h3>
-
-                <b-field>
-                  <b-upload
-                    v-model="file"
-                    drag-drop
-                    type="is-black"
-                    expanded
-                    accept="application/pdf"
-                  >
-                    <section class="section">
-                      <div class="content has-text-centered">
-                        <p>
-                          <b-icon icon="upload" size="is-large"></b-icon>
-                        </p>
-                        <p>
-                          {{
-                            file.name ||
-                              "Arrastra aquí tu archivo o da click para buscar"
-                          }}
-                        </p>
-                        <p>Tamaño máximo 20MB</p>
-                      </div>
-                    </section>
-                  </b-upload>
-                </b-field>
-              </form>
-
-              <div class="my-6">
-                <b-button
-                  tag="router-link"
-                  to="/responsable"
-                  type="is-info is-light "
-                  icon-left="arrow-left-box"
-                  class="border-info"
-                  style="float: left;"
-                  size="is-medium"
-                >
-                  regresar
-                </b-button>
-
-                <b-field class="derecha">
-                  <button
-                    :disabled="disabled()"
-                    class="button enviar is-success is-medium"
-                    @click="Enviar()"
-                  >
-                    Enviar
-                  </button>
-                </b-field>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-   <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
+    <BotonRegresar  :path="'/responsable'" />
+    <Texto />
+    <FormServicioSocial />
   </div>
 </template>
 
 <script>
-import "buefy/dist/buefy.css";
-import validator from "validator";
-import axios from "axios";
-import moment from "moment";
+import Texto from "../../../components/responsable/nuevoTexto"
+import BotonRegresar from "../../../components/botonRegresar";
+import FormSerivicioSocial from "../../../components/responsable/formServicioSocial"
 
 export default {
-  data() {
-    return {
-      token: {
-        headers:{
-          token: window.localStorage.getItem('token')
-        }
-      },
-      isLoading:false,
-      noCuenta: "",
-      sizeOk: "",
-      searched: false,
-      minDate: new Date("2020-12-20"),
-      programaSelectedID: "",
-      file: [],
-      programas: [],
-      programaSelected: {
-        idPrograma: null,
-        institucion: "",
-        dependencia: "",
-        programa: "",
-        clavePrograma: "",
-        acatlan: "",
-        activo: "",
-        idUsuario: "",
-        programaInterno: "",
-        profesor: "",
-      },
-      alumno: {
-        cuenta: "",
-        nombre: "",
-        carrera: "",
-        creditos: "",
-        idAlumno: "",
-        idCarrera: "",
-        inicio: [],
-        fin: [],
-        correo: "",
-      },
-    };
-  },
-  methods: {
-    reset() {
-      this.programaSelected.idPrograma = "";
-      this.programaSelected.institucion = "";
-      this.programaSelected.dependencia = "";
-      this.programaSelected.programa = "";
-      this.programaSelected.clavePrograma = "";
-      this.programaSelected.acatlan = "";
-      this.programaSelected.activo = "";
-      this.programaSelected.idUsuario = "";
-      this.programaSelected.programaInterno = "";
-      this.programaSelected.profesor = "";
-
-      this.alumno.cuenta = "";
-      this.alumno.nombre = "";
-      this.alumno.creditos = "";
-      this.alumno.carrera = "";
-      this.alumno.idAlumno = "";
-      this.alumno.idCarrera = "";
-      this.alumno.correo = "";
-      this.alumno.inicio = [];
-      this.alumno.fin = [];
-
-      this.noCuenta = "";
-      this.file = [];
-      this.programaSelectedID = "";
-    },
-    disabled() {
-      if (this.programaSelected.acatlan == false) {
-        if (
-          this.file != "" &&
-          this.noCuenta != "" &&
-          this.alumno.correo != "" &&
-          this.alumno.inicio != "" &&
-          this.alumno.fin != "" &&
-          this.programaSelectedID != ""
-        )
-          return false;
-        else return true;
-      } else {
-        if (
-          this.file != "" &&
-          this.noCuenta != "" &&
-          this.alumno.correo != "" &&
-          this.alumno.inicio != "" &&
-          this.alumno.fin != "" &&
-          this.programaSelectedID != "" &&
-          this.programaSelected.programaInterno != "" &&
-          this.programaSelected.profesor != ""
-        )
-          return false;
-        else return true;
-      }
-    },
-    esNumero(numero) {
-      const ultimaLetra = numero.length - 1;
-
-      if (numero && !validator.isNumeric(numero[ultimaLetra])) {
-        return numero.substr(0, ultimaLetra);
-      }
-      return numero;
-    },
-    maxLength(str, max) {
-      if (str.length > max) return str.substr(0, max);
-      return str;
-    },
-    correoValidado() {
-      if (validator.isEmail(this.alumno.correo)) {
-        console.log("es correo");
-        return "";
-      }
-    },
-    error(msj){
-      let salir =false;
-        switch(msj){
-          case 'invalid signature': 
-          msj= "Tu token no es valido, inicia sesión de nuevo."
-          salir=true
-          break; 
-          case 'jwt expired': 
-          msj= "Tu sesión ha expirado, inicia sesión de nuevo."
-          salir=true
-          break; 
-           case 'jwt malformed': 
-          msj= "No se encontro tu token, inicia sesión de nuevo."
-          salir=true
-          break; 
-          case 'No hay token': 
-          msj= "Ocurrio un error al enviar tu token, inicia sesión de nuevo."
-          salir=true
-          break; 
-        }
-
-      this.$buefy.dialog.alert({
-        title: "Error",
-        message: msj,
-        type: "is-danger",
-        hasIcon: true,
-        icon: "alert-circle",
-        iconPack: "mdi",
-        ariaRole: "alertdialog",
-        ariaModal: true,
-          });
-        if (salir == true) {
-          localStorage.clear()
-                  this.$router.push(`/`)
-        }
-
-    },
-    buscarAlumno() {
-      this.isLoading=true
-      axios
-        .get(`${process.env.api}/usuario/escolares?numeroCuenta=${this.noCuenta}`,this.token)
-        .then((resp) => {
-          console.log(resp.data);
-          this.alumno.cuenta = this.noCuenta;
-          this.alumno.nombre = resp.data.nombre;
-          this.alumno.carrera = resp.data.carrera;
-          this.alumno.creditos = parseInt(resp.data.creditos, 10);
-          this.alumno.idCarrera = resp.data.idCarrera;
-          this.alumno.idAlumno = resp.data.idUsuario;
-          this.searched = true;
-        })
-        .catch((error) => {
-          this.error(error.response.data.message)
-        })
-        .finally(()=>{
-          this.isLoading = false
-        });
-    },
-    Enviar() {
-      this.isLoading=true
-      const data = {
-        idUsuario: this.alumno.idAlumno,
-        idPrograma: this.programaSelected.idPrograma,
-        idCarrera: this.alumno.idCarrera,
-        numeroCuenta: this.alumno.cuenta,
-        creditos: this.alumno.creditos.toString(),
-        correo: this.alumno.correo,
-        programaInterno: this.programaSelected.programaInterno,
-        profesor: this.programaSelected.profesor,
-        fechaInicio: moment(this.alumno.inicio),
-        fechaFin: moment(this.alumno.fin),
-       };
-        const formData = new FormData();
-        console.log(data);
-        formData.append("alumno", JSON.stringify(data));
-        formData.append("cartaAceptacion", this.file);
-
-      axios
-        .post(`${process.env.api}/servicio/nuevo`, formData, {
-          headers: {
-            "Content-Type": "multipart/form-data",
-            token:this.token.headers.token
-          },
-        })
-        .then((res) => {
-          this.$buefy.dialog.alert({
-            title: "Success",
-            message: "Se enviaron los datos correctamente",
-            type: "is-success",
-            hasIcon: true,
-            icon: "checkbox-marked-circle",
-            iconPack: "mdi",
-            ariaRole: "alertdialog",
-            ariaModal: true,
-          });
-          this.reset();
-        })
-        .catch((error) => {
-         this.error(error.response.data.message)
-        })
-        .finally(()=>{
-          this.isLoading = false
-        });
-    },
-  },
-  watch: {
-    noCuenta() {
-      if (this.searched === false) {
-        this.noCuenta = Number(this.noCuenta) < 0 ? "" : this.noCuenta;
-        this.noCuenta = this.esNumero(this.noCuenta);
-        this.noCuenta = this.maxLength(this.noCuenta, 9);
-      } else {
-        this.noCuenta = "";
-        this.searched = false;
-        this.reset();
-      }
-    },
-    programaSelectedID() {
-      if (this.programaSelectedID) {
-        for (let i = 0; i < this.programas.length; i++) {
-          if (this.programas[i].idPrograma === this.programaSelectedID) {
-            this.programaSelected.idPrograma = this.programas[i].idPrograma;
-            this.programaSelected.programa = this.programas[i].programa;
-            this.programaSelected.institucion = this.programas[i].institucion;
-            this.programaSelected.dependencia = this.programas[i].dependencia;
-            this.programaSelected.clavePrograma = this.programas[
-              i
-            ].clavePrograma;
-            this.programaSelected.acatlan = this.programas[i].acatlan;
-            this.programaSelected.activo = this.programas[i].activo;
-          }
-        }
-      }
-      else{
-     
-         this.programaSelected.institucion = "";
-      this.programaSelected.dependencia = "";
-      this.programaSelected.programa = "";
-      this.programaSelected.clavePrograma = "";
-      this.programaSelected.acatlan = "";
-      this.programaSelected.activo = "";
-      //this.programaSelected.idUsuario = "";
-      this.programaSelected.programaInterno = "";
-      this.programaSelected.profesor = "";
-      
-   
-      }
-    },
-    file() {
-      console.log(this.file.size);
-      if (this.file.size >= 20000000) {
-        this.$buefy.dialog.alert({
-          title: "Error",
-          message: "El tamaño del archivo exede los 20MB",
-          type: "is-danger",
-          hasIcon: true,
-          icon: "alert-circle",
-          iconPack: "mdi",
-          ariaRole: "alertdialog",
-          ariaModal: true,
-        });
-        this.file = [];
-      }
-    },
-    "alumno.inicio"() {
-      this.alumno.fin = [];
-    },
-  },
-  mounted() {
-    console.log(localStorage.getItem("idUsuario"));
-    axios
-      .get(`${process.env.api}/programa?idUsuario=${localStorage.getItem("idUsuario")}`, this.token)
-      .then((resp) => {
-        console.log(resp.data);
-        this.programas = resp.data;
-        console.log(this.programas);
-      })
-      .catch((error) => {
-        this.error(error.response.data.message)
-      });
-  },
-  computed: {
-    minDate2() {
-      const min = new Date(this.alumno.inicio);
-      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
-    },
-  },
-};
+  components:{
+    Texto,
+    BotonRegresar,FormSerivicioSocial
+  }
+}
 </script>
 
 <style scoped>
-.titleAnadir,
-pre {
-  margin: 4rem 0 0rem 0;
-}
-.derecha {
-  text-align: center;
-}
-.file-cta {
-  background-color: #167df0 !important;
-}
-.disabled {
-  cursor: help !important;
-  pointer-events: all !important;
-}
-.columns {
-  margin: 0;
-}
-.border-info {
-  border: 1px solid #167df0;
-}
-@media (min-width: 600px) {
-  .derecha {
-    padding-right: 120px;
-  }
+.container{
+  padding: 0.75rem;
 }
 </style>