ajuste boxes en caso especial/nuevo/page.tsx y cambio en como obtener las fechas en el componente caso-especial-form.tsx

src/app/casoEspecial/nuevo/page.tsx

@@ -1,44 +1,42 @@
-'use client';
+"use client";
 import BotonRegresar from "@/components/boton-regresar";
 import CasoEspecialForm from "@/components/casoEspecial/caso-especial-form";
 import { useState } from "react";
 
 export default function Nuevo() {
-    const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
-    const imprimirError = (error: unknown) => {
+  const imprimirError = (error: unknown) => {
-        alert(`Error: ${JSON.stringify(error)}`)
+    alert(`Error: ${JSON.stringify(error)}`);
+  };
+
+  const imprimirMensaje = (message: string) => {
+    alert(`${message}`);
+  };
+
+  const imprimirWarning = (message: string, onConfirm: () => void) => {
+    if (confirm(`${message}\n¿Desea continuar?`)) {
+      onConfirm();
     }
+  };
 
-    const imprimirMensaje = (message: string) => {
+  const updateIsLoading = (value: boolean) => {
-        alert(`${message}`);
+    setIsLoading(value);
-    }
+  };
 
-    const imprimirWarning = (message: string, onConfirm: () => void) => {
+  return (
-        if (confirm(`${message}\n¿Desea continuar?`)) {
+    <div>
-            onConfirm();
+      <BotonRegresar />
-        }
-    }
 
-    const updateIsLoading = (value: boolean) => {
+      <h2 style={{ marginLeft: "19rem" }}>Agregar un Servicio Social</h2>
-        setIsLoading(value);
-    }
 
-    return (
+      <CasoEspecialForm
-        <div>
+        imprimirError={imprimirError}
-            <BotonRegresar />
+        imprimirMensaje={imprimirMensaje}
-
+        imprimirWarning={imprimirWarning}
-            <h2>Agregar un Servicio Social</h2>
+        updateIsLoading={updateIsLoading}
-
+      />
-            <CasoEspecialForm 
+      {/* <CasoEspecialForm /> */}
-                imprimirError={imprimirError} 
+    </div>
-                imprimirMensaje={imprimirMensaje} 
+  );
-                imprimirWarning={imprimirWarning} 
+}
-                updateIsLoading={updateIsLoading}
-            />
-{/* <CasoEspecialForm /> */}
-            
-
-        </div>
-    )
-}

src/app/casoEspecial/page.tsx

@@ -4,58 +4,90 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import LiberarCasoEspecial from "@/components/casoEspecial/liberacion-caso-especial";
 
-type LocalResponsable = { idUsuario?: number; idTipoUsuario?: number; tipoUsuario?: string | null; token?: string };
+type LocalResponsable = {
+  idUsuario?: number;
+  idTipoUsuario?: number;
+  tipoUsuario?: string | null;
+  token?: string;
+};
 
 export default function Page() {
-    const router = useRouter();
+  const router = useRouter();
-    const [responsable, setResponsable] = useState<LocalResponsable>({});
+  const [responsable, setResponsable] = useState<LocalResponsable>({});
 
-    const getMessageFromUnknown = (err: unknown) => {
+  const getMessageFromUnknown = (err: unknown) => {
-        if (typeof err === 'string') return err;
+    if (typeof err === "string") return err;
-        if (err instanceof Error) return err.message;
+    if (err instanceof Error) return err.message;
-        try { return JSON.stringify(err); } catch (_) { return String(err); }
+    try {
-    };
+      return JSON.stringify(err);
+    } catch (_) {
+      return String(err);
+    }
+  };
 
-    const imprimirError = (err: unknown = {}, title = '¡Hubo un error!', onConfirm: () => void = () => {}) => {
+  const imprimirError = (
-        const msg = getMessageFromUnknown(err);
+    err: unknown = {},
-        // eslint-disable-next-line no-alert
+    title = "¡Hubo un error!",
-        alert(`${title}\n\n${msg}`);
+    onConfirm: () => void = () => {}
-        onConfirm();
+  ) => {
-        if (typeof err === 'object' && err !== null && (err as { err?: unknown }).err === 'token error') {
+    const msg = getMessageFromUnknown(err);
-        try { localStorage.clear(); } catch (_) {}
+    // eslint-disable-next-line no-alert
-        router.push('/');
+    alert(`${title}\n\n${msg}`);
-        }
+    onConfirm();
-    };
+    if (
+      typeof err === "object" &&
+      err !== null &&
+      (err as { err?: unknown }).err === "token error"
+    ) {
+      try {
+        localStorage.clear();
+      } catch (_) {}
+      router.push("/");
+    }
+  };
 
-    const getLocalhostInfo = () => {
+  const getLocalhostInfo = () => {
-        const idUsuario = Number(localStorage.getItem('idUsuario'));
+    const idUsuario = Number(localStorage.getItem("idUsuario"));
-        const idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'));
+    const idTipoUsuario = Number(localStorage.getItem("idTipoUsuario"));
-        const tipoUsuario = localStorage.getItem('tipoUsuario');
+    const tipoUsuario = localStorage.getItem("tipoUsuario");
-        const token = localStorage.getItem('token') || undefined;
+    const token = localStorage.getItem("token") || undefined;
-    setResponsable({ idUsuario: Number.isNaN(idUsuario) ? undefined : idUsuario, idTipoUsuario: Number.isNaN(idTipoUsuario) ? undefined : idTipoUsuario, tipoUsuario, token: token ?? undefined });
+    setResponsable({
-    };
+      idUsuario: Number.isNaN(idUsuario) ? undefined : idUsuario,
+      idTipoUsuario: Number.isNaN(idTipoUsuario) ? undefined : idTipoUsuario,
+      tipoUsuario,
+      token: token ?? undefined,
+    });
+  };
 
-    useEffect(() => {
+  useEffect(() => {
-        getLocalhostInfo();
+    getLocalhostInfo();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  }, []);
 
-    useEffect(() => {
+  useEffect(() => {
-        if (responsable.idTipoUsuario === 1) router.push('/admin');
+    if (responsable.idTipoUsuario === 1) router.push("/admin");
-        if (responsable.idTipoUsuario === 2) router.push('/responsable');
+    if (responsable.idTipoUsuario === 2) router.push("/responsable");
-        if (responsable.idTipoUsuario === 3) router.push('/alumno');
+    if (responsable.idTipoUsuario === 3) router.push("/alumno");
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [responsable]);
+  }, [responsable]);
 
-    return (
+  return (
-        <section className="container px-2 pb-6">
+    <section className="container px-2 pb-6">
-        <div className="pb-5 pt-6 mt-5 mb-4 border-b border-gray-200">
+      <div className="pb-5 pt-6 mt-5 mb-4 border-b border-gray-200">
-            <button onClick={() => router.push('/casoEspecial/nuevo')}>Nuevo Caso Especial</button>
+        <button onClick={() => router.push("/casoEspecial/nuevo")}>
-        </div>
+          Nuevo Caso Especial
+        </button>
+      </div>
 
-        {responsable.idTipoUsuario !== undefined && responsable.token ? (
+      {responsable.idTipoUsuario !== undefined && responsable.token ? (
-            <LiberarCasoEspecial responsable={{ idTipoUsuario: responsable.idTipoUsuario!, token: responsable.token! }} imprimirError={(msg: string) => imprimirError(msg)} />
+        <LiberarCasoEspecial
-        ) : null}
+          responsable={{
-        </section>
+            idTipoUsuario: responsable.idTipoUsuario!,
-    );
+            token: responsable.token!,
+          }}
+          imprimirError={(msg: string) => imprimirError(msg)}
+        />
+      ) : null}
+    </section>
+  );
 }

src/app/page.tsx

@@ -1,85 +1,109 @@
-'use client'
+"use client";
 import { axiosInstance } from "@/api/config";
 import { useRouter } from "next/navigation";
 import React from "react";
 
 export default function Home() {
-    const router = useRouter();
+  const router = useRouter();
 
-    const handleOnSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleOnSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
+    e.preventDefault();
-        const formData = new FormData(e.currentTarget);
+    const formData = new FormData(e.currentTarget);
-        const object = Object.fromEntries(formData);
+    const object = Object.fromEntries(formData);
 
-        try {
+    try {
-            const res = await axiosInstance.post('/usuario/login', object);
+      const res = await axiosInstance.post("/usuario/login", object);
 
-            // Extraer datos del backend
+      // Extraer datos del backend
-            const token = res?.data?.token ?? '';
+      const token = res?.data?.token ?? "";
-            const usuarioObj = res?.data?.Usuario ?? res?.data ?? {};
+      const usuarioObj = res?.data?.Usuario ?? res?.data ?? {};
-            const idUsuario = usuarioObj.idUsuario ?? '';
+      const idUsuario = usuarioObj.idUsuario ?? "";
-            const usuario = usuarioObj.usuario ?? '';
+      const usuario = usuarioObj.usuario ?? "";
-            const nombre = usuarioObj.nombre ?? '';
+      const nombre = usuarioObj.nombre ?? "";
-            const idTipoUsuario = Number(usuarioObj.TipoUsuario?.idTipoUsuario ?? 0);
+      const idTipoUsuario = Number(usuarioObj.TipoUsuario?.idTipoUsuario ?? 0);
-            //const idTipoUsuario = Number((usuarioObj as any).TipoUsuario?.idTipoUsuario ?? 0);
+      //const idTipoUsuario = Number((usuarioObj as any).TipoUsuario?.idTipoUsuario ?? 0);
 
+      // Guardar en localStorage
+      localStorage.setItem("token", String(token));
+      localStorage.setItem("idUsuario", String(idUsuario));
+      localStorage.setItem("usuario", String(usuario));
+      localStorage.setItem("nombre", String(nombre));
+      localStorage.setItem("idTipoUsuario", String(idTipoUsuario));
 
-            // Guardar en localStorage
+      // Validar y redirigir según el idTipoUsuario
-            localStorage.setItem('token', String(token));
+      if (token && idUsuario && idTipoUsuario) {
-            localStorage.setItem('idUsuario', String(idUsuario));
+        switch (idTipoUsuario) {
-            localStorage.setItem('usuario', String(usuario));
+          case 1:
-            localStorage.setItem('nombre', String(nombre));
+            router.push("/administrador");
-            localStorage.setItem('idTipoUsuario', String(idTipoUsuario));
+            break;
-
+          case 2:
-            // Validar y redirigir según el idTipoUsuario
+            router.push("/responsable");
-            if (token && idUsuario && idTipoUsuario) {
+            break;
-                switch (idTipoUsuario) {
+          case 3:
-                    case 1:
+            router.push("/alumno");
-                        router.push('/administrador');
+            break;
-                        break;
+          case 4:
-                    case 2:
+            router.push("/casoEspecial");
-                        router.push('/responsable');
+            break;
-                        break;
+          default:
-                    case 3:
+            console.warn(`Tipo de usuario desconocido: ${idTipoUsuario}`);
-                        router.push('/alumno');
-                        break;
-                    case 4:
-                        router.push('/casoEspecial');
-                        break;
-                    default:
-                        console.warn(`Tipo de usuario desconocido: ${idTipoUsuario}`);
-                        localStorage.clear();
-                        break;
-                }
-            } else {
-                localStorage.clear();
-                console.error('Error: datos de usuario incompletos');
-            }
-        } catch (error) {
-            console.error('Error en el inicio de sesión:', error);
             localStorage.clear();
+            break;
         }
-    };
+      } else {
+        localStorage.clear();
+        console.error("Error: datos de usuario incompletos");
+      }
+    } catch (error) {
+      console.error("Error en el inicio de sesión:", error);
+      localStorage.clear();
+    }
+  };
 
-    return (
+  return (
-        <div className="d-flex justify-content-center align-items-center bg-light" style={{ minHeight: 'calc(100vh - 200px)' }}>
+    <div
-            <form className="p-4 shadow rounded bg-white w-100" style={{ maxWidth: '400px' }} onSubmit={handleOnSubmit}>
+      className="d-flex justify-content-center align-items-center bg-light"
-                <h2 className="text-center mb-4 fw-bold">IRIS</h2>
+      style={{ minHeight: "calc(100vh - 200px)" }}
+    >
+      <form
+        className="p-4 shadow rounded bg-white w-100"
+        style={{ maxWidth: "400px" }}
+        onSubmit={handleOnSubmit}
+      >
+        <h2 className="text-center mb-4 fw-bold">IRIS</h2>
 
-                <div className="mb-3">
+        <div className="mb-3">
-                    <label htmlFor="usuario" className="form-label">Usuario</label>
+          <label htmlFor="usuario" className="form-label">
-                    <input type="text" name="usuario" id="usuario" className="form-control" required />
+            Usuario
-                </div>
+          </label>
-
+          <input
-                <div className="mb-4">
+            type="text"
-                    <label htmlFor="password" className="form-label">Contraseña</label>
+            name="usuario"
-                    <input type="password" name="password" id="password" className="form-control" required />
+            id="usuario"
-                </div>
+            className="form-control"
-
+            required
-                <div className="d-grid">
+          />
-                    <button type="submit" className="btn btn-primary btn-lg">Iniciar Sesión</button>
-                </div>
-            </form>
         </div>
-    );
+
+        <div className="mb-4">
+          <label htmlFor="password" className="form-label">
+            Contraseña
+          </label>
+          <input
+            type="password"
+            name="password"
+            id="password"
+            className="form-control"
+            required
+          />
+        </div>
+
+        <div className="d-grid">
+          <button type="submit" className="btn btn-primary btn-lg">
+            Iniciar Sesión
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 }

src/components/administrador/tabla-servicio-social.tsx

@@ -99,6 +99,12 @@ export default function TablaServicioSocial({ admin, imprimirError }: Props) {
     };
 
 
+<<<<<<< HEAD
+export default function TablaServicioSocial() {
+    
+
+=======
+>>>>>>> origin/develop
     return (
         <section>
             <div className="columns">

src/components/boton-regresar.tsx

@@ -1,22 +1,23 @@
-"use client"
+"use client";
 
 import { useRouter } from "next/navigation";
-import React from "react"
+import React from "react";
 
 const BotonRegresar: React.FC = () => {
-    const router = useRouter();
+  const router = useRouter();
 
-        const handleGoBack = () => {
+  const handleGoBack = () => {
-            //window.history.back();
+    //window.history.back();
-            router.back();
+    router.back();
-        };
+  };
-    
 
-    return (
+  return (
-        <div className="pb-5 pt-3">
+    <div style={{ marginLeft: "19rem" }} className="pb-5 pt-3">
-            <button onClick={handleGoBack} className="btn-outline-primary">Regresar</button>
+      <button onClick={handleGoBack} className="btn-outline-primary">
-        </div>
+        Regresar
-    )
+      </button>
-}
+    </div>
+  );
+};
 
-export default BotonRegresar
+export default BotonRegresar;

src/components/casoEspecial/caso-especial-form.tsx

@@ -1,460 +1,491 @@
-'use client';
+"use client";
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import { axiosInstance } from '@/api/config';
+import { axiosInstance } from "@/api/config";
-import moment from 'moment';
+import moment from "moment";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
-import { Col, FormGroup, FormLabel, InputGroup } from 'react-bootstrap';
+import { Col, FormGroup, FormLabel, InputGroup } from "react-bootstrap";
-import { FaRegCalendarAlt, FaUpload } from 'react-icons/fa';
+import { FaRegCalendarAlt, FaUpload } from "react-icons/fa";
-import DatePicker from 'react-datepicker';
+import DatePicker from "react-datepicker";
-import BotonRegresar from '../boton-regresar';
+import BotonRegresar from "../boton-regresar";
 
 // 🔹 Tipos estrictos
 interface Alumno {
-    idUsuario?: number;
+  idUsuario?: number;
-    idCarrera?: number;
+  idCarrera?: number;
-    nombre?: string;
+  nombre?: string;
-    carrera?: string;
+  carrera?: string;
-    creditos?: string;
+  creditos?: string;
 }
 
 interface Responsable {
-    //token: { headers: Record<string, string> };
+  //token: { headers: Record<string, string> };
-    tokenArchivo: { headers: Record<string, string> };
+  tokenArchivo: { headers: Record<string, string> };
 }
 
 interface Props {
-    //responsable: Responsable;
+  //responsable: Responsable;
-    imprimirError: (msg: { message: string }) => void;
+  imprimirError: (msg: { message: string }) => void;
-    imprimirMensaje: (msg: string) => void;
+  imprimirMensaje: (msg: string) => void;
-    imprimirWarning: (msg: string, callback: () => void) => void;
+  imprimirWarning: (msg: string, callback: () => void) => void;
-    updateIsLoading: (value: boolean) => void;
+  updateIsLoading: (value: boolean) => void;
 }
 
 export default function CasoEspecialForm({
-    //responsable,
+  //responsable,
-    imprimirError,
+  imprimirError,
-    imprimirMensaje,
+  imprimirMensaje,
-    imprimirWarning,
+  imprimirWarning,
-    updateIsLoading,
+  updateIsLoading,
 }: Props) {
-    // 🔹 Estados del formulario
+  // 🔹 Estados del formulario
-    const [dependencia, setDependencia] = useState('');
+  const [dependencia, setDependencia] = useState("");
-    const [direccion, setDireccion] = useState('');
+  const [direccion, setDireccion] = useState("");
-    const [correo, setCorreo] = useState('');
+  const [correo, setCorreo] = useState("");
-    const [idStatus, setIdStatus] = useState('');
+  const [idStatus, setIdStatus] = useState("");
-    const [institucion, setInstitucion] = useState('');
+  const [institucion, setInstitucion] = useState("");
-    const [motivo, setMotivo] = useState('');
+  const [motivo, setMotivo] = useState("");
-    const [numeroCuenta, setNumeroCuenta] = useState('');
+  const [numeroCuenta, setNumeroCuenta] = useState("");
-    const [telefono, setTelefono] = useState('');
+  const [telefono, setTelefono] = useState("");
-    const [alumno, setAlumno] = useState<Alumno>({});
+  const [alumno, setAlumno] = useState<Alumno>({});
-    const [fechaInicio, setFechaInicio] = useState<Date>(new Date());
+  const [fechaInicio, setFechaInicio] = useState<Date>(new Date());
-    const [fechaFin, setFechaFin] = useState<Date>(new Date());
+  const [fechaFin, setFechaFin] = useState<Date>(new Date());
-    const [fechaNacimiento, setFechaNacimiento] = useState<Date>(new Date());
+  const [fechaNacimiento, setFechaNacimiento] = useState<Date>(new Date());
-    const [file, setFile] = useState<File | null>(null);
+  const [file, setFile] = useState<File | null>(null);
-    const [minDate, setMinDate] = useState<Date>(new Date('2020-01-02'));
+  const [minDate, setMinDate] = useState<Date>(new Date("2020-01-02"));
-    const [minDate2, setMinDate2] = useState<Date>(new Date());
+  const [minDate2, setMinDate2] = useState<Date>(new Date());
+  const handleFechaInicioChange = (date: Date | null) => {
+    setFechaInicio(date || new Date());
+  };
+  const handleFechaFinChange = (date: Date | null) => {
+    setFechaFin(date || new Date());
+  };
+  const handleFechaNacimientoChange = (date: Date | null) => {
+    setFechaNacimiento(date || new Date());
+  };
+  //  Función para resetear campos
+  const resetear = (): void => {
+    setDependencia("");
+    setDireccion("");
+    setCorreo("");
+    setIdStatus("");
+    setInstitucion("");
+    setMotivo("");
+    setTelefono("");
+    setAlumno({});
+    setFechaInicio(new Date());
+    setFechaFin(new Date());
+    setFechaNacimiento(new Date());
+    setFile(null);
+  };
 
-    //  Función para resetear campos
+  //  Validar extensión
-    const resetear = (): void => {
+  const validarExtencion = (archivo: File): void => {
-        setDependencia('');
+    const permitidas = [/.zip$/i, /.rar$/i];
-        setDireccion('');
+    const esValida = permitidas.some((regex) => regex.test(archivo.name));
-        setCorreo('');
+    if (!esValida) {
-        setIdStatus('');
+      setFile(null);
-        setInstitucion('');
+      imprimirError({
-        setMotivo('');
+        message:
-        setTelefono('');
+          "Asegúrate de ingresar un archivo con la extensión correcta (.zip o .rar).",
-        setAlumno({});
+      });
-        setFechaInicio(new Date());
+    }
-        setFechaFin(new Date());
+  };
-        setFechaNacimiento(new Date());
-        setFile(null);
-    };
 
-    //  Validar extensión
+  //  Mostrar/ocultar botón de enviar
-    const validarExtencion = (archivo: File): void => {
+  const mostrarBoton = (): boolean => {
-        const permitidas = [/.zip$/i, /.rar$/i];
-        const esValida = permitidas.some((regex) => regex.test(archivo.name));
-        if (!esValida) {
-            setFile(null);
-            imprimirError({
-                message: 'Asegúrate de ingresar un archivo con la extensión correcta (.zip o .rar).',
-            });
-        }
-    };
-
-    //  Mostrar/ocultar botón de enviar
-    const mostrarBoton = (): boolean => {
-        return (
-            !alumno.idUsuario ||
-            !telefono ||
-            !direccion ||
-            !correo ||
-            !idStatus ||
-            (idStatus === '11' && !motivo) ||
-            (idStatus === '12' && (!dependencia || !institucion)) ||
-            !file
-        );
-    };
-
-    //  Buscar alumno
-    const buscarAlumno = async (): Promise<void> => {
-        try {
-            updateIsLoading(true);
-            const res = await axiosInstance.get(`/usuario/escolares?numeroCuenta=${numeroCuenta}`);
-            resetear();
-            setAlumno(res.data);
-        } catch (err: unknown) {
-            resetear();
-            setNumeroCuenta('');
-            let msg = { message: 'Error al buscar alumno.' };
-            if (typeof err === 'object' && err !== null && 'response' in err) {
-                const anyErr = err as { response?: { data?: { message?: unknown } } };
-                const m = anyErr.response?.data as { message?: unknown } | undefined;
-                msg = { message: m?.message ? String(m.message) : msg.message };
-            } else if (err instanceof Error) msg = { message: err.message };
-            imprimirError(msg);
-        } finally {
-            updateIsLoading(false);
-        }
-    };
-
-    //  Enviar formulario
-    const enviar = async (): Promise<void> => {
-        if (!file) return;
-
-        const data = {
-            idUsuario: alumno.idUsuario,
-            idCarrera: alumno.idCarrera,
-            idStatus,
-            numeroCuenta,
-            creditos: alumno.creditos,
-            correo,
-            fechaInicio: moment(fechaInicio),
-            fechaFin: moment(fechaFin),
-            fechaNacimiento: moment(fechaNacimiento),
-            direccion,
-            telefono,
-            institucion,
-            dependencia,
-            motivo,
-        };
-
-        const formData = new FormData();
-        formData.append('alumno', JSON.stringify(data));
-        formData.append('archivos', file);
-
-        try {
-            updateIsLoading(true);
-            const res = await axiosInstance.post(`/caso_especial/nuevo`, formData);
-            resetear();
-            setNumeroCuenta('');
-            imprimirMensaje(res.data.message);
-        } catch (err: unknown) {
-            let msg: { message: string } = { message: 'Error al enviar formulario.' };
-            if (typeof err === 'object' && err !== null && 'response' in err) {
-                const anyErr = err as { response?: { data?: unknown } };
-                if (anyErr.response && typeof anyErr.response.data === 'object' && anyErr.response.data !== null) {
-                const d = anyErr.response.data as { message?: unknown } | unknown;
-                if (d && typeof d === 'object' && 'message' in d && typeof (d as { message?: unknown }).message === 'string') {
-                    msg = { message: (d as { message?: unknown }).message as string };
-                }
-                }
-            } else if (err instanceof Error) {
-                msg = { message: err.message };
-            }
-            imprimirError(msg);
-        } finally {
-            updateIsLoading(false);
-        }
-    };
-
-    //  Actualizar fechas automáticamente
-    const updateFechas = (): void => {
-        const nuevaFin = new Date(
-        fechaInicio.getFullYear(),
-        fechaInicio.getMonth() + 6,
-        fechaInicio.getDate()
-        );
-        setFechaFin(nuevaFin);
-        setMinDate2(nuevaFin);
-    };
-
-    //  Efectos (equivalentes a watch)
-    useEffect(() => {
-        setMotivo('');
-        setInstitucion('');
-        setDependencia('');
-    }, [idStatus]);
-
-    useEffect(() => {
-        if (file && file.size >= 20_000_000) {
-        imprimirError({ message: 'El tamaño del archivo excede los 20MB.' });
-        setFile(null);
-        } else if (file) {
-        validarExtencion(file);
-        }
-    }, [file]);
-
-    useEffect(() => {
-        updateFechas();
-    }, [fechaInicio]);
-
-    useEffect(() => {
-        const min = new Date('2020-01-02');
-        min.setDate(min.getDate() - 1);
-        setMinDate(min);
-        updateFechas();
-    }, []);
-
-
-    {/* Validaciones del cuestionario */}
-    
-
-    //  Render
     return (
-        <div className="container mt-4">
+      !alumno.idUsuario ||
-        <div className="mb-3">
+      !telefono ||
-            <label className="form-label">Número de Cuenta</label>
+      !direccion ||
-            <div className="input-group">
+      !correo ||
-            <input
+      !idStatus ||
-                type="text"
+      (idStatus === "11" && !motivo) ||
-                className="form-control"
+      (idStatus === "12" && (!dependencia || !institucion)) ||
-                placeholder="Número de Cuenta"
+      !file
-                maxLength={9}
+    );
-                value={numeroCuenta}
+  };
-                onChange={(e) => setNumeroCuenta(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && buscarAlumno()}
-            />
-            <button className="btn btn-info text-white" onClick={buscarAlumno}>
-                Buscar
-            </button>
-            </div>
-        </div>
 
-        <div className="mb-3">
+  //  Buscar alumno
-            <label className="form-label">Nombre</label>
+  const buscarAlumno = async (): Promise<void> => {
-            <p className="form-control">{alumno.nombre || ''}</p>
+    try {
-        </div>
+      updateIsLoading(true);
+      const res = await axiosInstance.get(
+        `/usuario/escolares?numeroCuenta=${numeroCuenta}`
+      );
+      resetear();
+      setAlumno(res.data);
+    } catch (err: unknown) {
+      resetear();
+      setNumeroCuenta("");
+      let msg = { message: "Error al buscar alumno." };
+      if (typeof err === "object" && err !== null && "response" in err) {
+        const anyErr = err as { response?: { data?: { message?: unknown } } };
+        const m = anyErr.response?.data as { message?: unknown } | undefined;
+        msg = { message: m?.message ? String(m.message) : msg.message };
+      } else if (err instanceof Error) msg = { message: err.message };
+      imprimirError(msg);
+    } finally {
+      updateIsLoading(false);
+    }
+  };
 
-        <div className="mb-3">
+  //  Enviar formulario
-            <label className="form-label">Carrera</label>
+  const enviar = async (): Promise<void> => {
-            <p className="form-control">{alumno.carrera || ''}</p>
+    if (!file) return;
-        </div>
 
-        <div className="mb-3">
+    const data = {
-            <label className="form-label">Créditos</label>
+      idUsuario: alumno.idUsuario,
-            <p className="form-control">
+      idCarrera: alumno.idCarrera,
-            {alumno.creditos ? parseInt(alumno.creditos) : ''}{' '}
+      idStatus,
-            {alumno.creditos ? '%' : ''}
+      numeroCuenta,
-            </p>
+      creditos: alumno.creditos,
-        </div>
+      correo,
+      fechaInicio: moment(fechaInicio),
+      fechaFin: moment(fechaFin),
+      fechaNacimiento: moment(fechaNacimiento),
+      direccion,
+      telefono,
+      institucion,
+      dependencia,
+      motivo,
+    };
 
-        <div className="mb-3">
+    const formData = new FormData();
-            <label className="form-label">Dirección</label>
+    formData.append("alumno", JSON.stringify(data));
-            <input
+    formData.append("archivos", file);
+
+    try {
+      updateIsLoading(true);
+      const res = await axiosInstance.post(`/caso_especial/nuevo`, formData);
+      resetear();
+      setNumeroCuenta("");
+      imprimirMensaje(res.data.message);
+    } catch (err: unknown) {
+      let msg: { message: string } = { message: "Error al enviar formulario." };
+      if (typeof err === "object" && err !== null && "response" in err) {
+        const anyErr = err as { response?: { data?: unknown } };
+        if (
+          anyErr.response &&
+          typeof anyErr.response.data === "object" &&
+          anyErr.response.data !== null
+        ) {
+          const d = anyErr.response.data as { message?: unknown } | unknown;
+          if (
+            d &&
+            typeof d === "object" &&
+            "message" in d &&
+            typeof (d as { message?: unknown }).message === "string"
+          ) {
+            msg = { message: (d as { message?: unknown }).message as string };
+          }
+        }
+      } else if (err instanceof Error) {
+        msg = { message: err.message };
+      }
+      imprimirError(msg);
+    } finally {
+      updateIsLoading(false);
+    }
+  };
+
+  //  Actualizar fechas automáticamente
+  const updateFechas = (): void => {
+    const nuevaFin = new Date(
+      fechaInicio.getFullYear(),
+      fechaInicio.getMonth() + 6,
+      fechaInicio.getDate()
+    );
+    setFechaFin(nuevaFin);
+    setMinDate2(nuevaFin);
+  };
+
+  //  Efectos (equivalentes a watch)
+  useEffect(() => {
+    setMotivo("");
+    setInstitucion("");
+    setDependencia("");
+  }, [idStatus]);
+
+  useEffect(() => {
+    if (file && file.size >= 20_000_000) {
+      imprimirError({ message: "El tamaño del archivo excede los 20MB." });
+      setFile(null);
+    } else if (file) {
+      validarExtencion(file);
+    }
+  }, [file]);
+
+  useEffect(() => {
+    updateFechas();
+  }, [fechaInicio]);
+
+  useEffect(() => {
+    const min = new Date("2020-01-02");
+    min.setDate(min.getDate() - 1);
+    setMinDate(min);
+    updateFechas();
+  }, []);
+
+  {
+    /* Validaciones del cuestionario */
+  }
+
+  //  Render
+  return (
+    <div className="container mt-4">
+      <div className="mb-3">
+        <label className="form-label">Número de Cuenta</label>
+        <div className="input-group">
+          <input
             type="text"
             className="form-control"
-            maxLength={200}
+            placeholder="Número de Cuenta"
-            value={direccion}
+            maxLength={9}
-            onChange={(e) => setDireccion(e.target.value)}
+            value={numeroCuenta}
-            />
+            onChange={(e) => setNumeroCuenta(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && buscarAlumno()}
+          />
+          <button className="btn btn-info text-white" onClick={buscarAlumno}>
+            Buscar
+          </button>
         </div>
+      </div>
 
-        <div className="mb-3">
+      <div className="mb-3">
-            <label className="form-label">Teléfono</label>
+        <label className="form-label">Nombre</label>
-            <input
+        <p className="form-control" style={{ padding: "1rem 1rem" }}>
-            type="tel"
+          {alumno.nombre || ""}
-            className="form-control"
+        </p>
-            maxLength={10}
+      </div>
-            value={telefono}
+
-            onChange={(e) => setTelefono(e.target.value)}
+      <div className="mb-3">
-            />
+        <label className="form-label">Carrera</label>
-        </div>
+        <p className="form-control" style={{ padding: "1rem 1rem" }}>
-
+          {alumno.carrera || ""}
-        <div className="mb-3">
+        </p>
-            <label className="form-label">Correo electrónico</label>
+      </div>
-            <input
+
-            type="email"
+      <div className="mb-3">
-            className="form-control"
+        <label className="form-label">Créditos</label>
-            value={correo}
+        <p className="form-control" style={{ padding: "1rem 1rem" }}>
-            onChange={(e) => setCorreo(e.target.value)}
+          {alumno.creditos ? parseInt(alumno.creditos) : ""}{" "}
-            />
+          {alumno.creditos ? "%" : ""}
-        </div>
+        </p>
-
+      </div>
-        <Col>
+
-            <FormGroup>
+      <div className="mb-3">
-                <FormLabel>Fecha de inicio</FormLabel>
+        <label className="form-label">Dirección</label>
-                <InputGroup>
+        <input
-                    <InputGroup.Text>
+          type="text"
-                        <FaRegCalendarAlt />
+          className="form-control"
-                    </InputGroup.Text>
+          maxLength={200}
-
+          value={direccion}
-                    <DatePicker
+          onChange={(e) => setDireccion(e.target.value)}
-                        selected={fechaInicio}
+        />
-                        minDate={minDate}
+      </div>
-                        dateFormat="dd-MM-yyyy"
+
-                        className="form-control"
+      <div className="mb-3">
-                        wrapperClassName="flex-grow-1"
+        <label className="form-label">Teléfono</label>
-                        calendarClassName="mi-calendario"
+        <input
-                    />
+          type="tel"
-                </InputGroup>
+          className="form-control"
-            </FormGroup>
+          maxLength={10}
-        </Col>
+          value={telefono}
-
+          onChange={(e) => setTelefono(e.target.value)}
-        <Col>
+        />
-            <FormGroup>
+      </div>
-                <FormLabel>Fecha de fin</FormLabel>
+
-                <InputGroup>
+      <div className="mb-3">
-                    <InputGroup.Text>
+        <label className="form-label">Correo electrónico</label>
-                        <FaRegCalendarAlt />
+        <input
-                    </InputGroup.Text>
+          type="email"
-
+          className="form-control"
-                    <DatePicker
+          value={correo}
-                        selected={fechaFin}
+          onChange={(e) => setCorreo(e.target.value)}
-                        value={fechaFin.toISOString().substring(0,10)}
+        />
-                        minDate={minDate2}
+      </div>
-                        dateFormat="dd-MM-yyyy"
+
-                        className="form-control"
+      <Col>
-                        wrapperClassName="flex-grow-1"
+        <FormGroup>
-                        calendarClassName="mi-calendario"
+          <FormLabel>Fecha de inicio</FormLabel>
-                    />
+          <InputGroup>
-                </InputGroup>
+            <InputGroup.Text>
-            </FormGroup>
+              <FaRegCalendarAlt />
-        </Col>
+            </InputGroup.Text>
-
+
-        <Col>
+            <DatePicker
-            <FormGroup>
+              selected={fechaInicio}
-                <FormLabel>Fecha de nacimiento</FormLabel>
+              onChange={handleFechaInicioChange}
-                <InputGroup>
+              minDate={minDate}
-                    <InputGroup.Text>
+              dateFormat="yyyy-MM-dd"
-                        <FaRegCalendarAlt />
+              className="form-control"
-                    </InputGroup.Text>
+              wrapperClassName="flex-grow-1"
-
+              calendarClassName="mi-calendario"
-                    <DatePicker
-                        selected={fechaNacimiento}
-                        maxDate={new Date()}
-                        dateFormat="dd-MM-yyyy"
-                        className="form-control"
-                        wrapperClassName="flex-grow-1"
-                        calendarClassName="mi-calendario"
-                    />
-                </InputGroup>
-            </FormGroup>
-        </Col>
-
-        <div className="mb-3">
-            <label className="form-label">Fecha de inicio</label>
-            <input
-            type="date"
-            className="form-control"
-            value={fechaInicio.toISOString().substring(0, 10)}
-            onChange={(e) => setFechaInicio(new Date(e.target.value))}
-            min={minDate.toISOString().substring(0, 10)}
-            />
-        </div>
-
-        {fechaInicio && (
-            <div className="mb-3">
-            <label className="form-label">Fecha de fin</label>
-            <input
-                type="date"
-                className="form-control"
-                value={fechaFin.toISOString().substring(0, 10)}
-                onChange={(e) => setFechaFin(new Date(e.target.value))}
-                min={minDate2.toISOString().substring(0, 10)}
-            />
-            </div>
-        )}
-
-        <div className="mb-3">
-            <label className="form-label">Fecha de nacimiento</label>
-            <input
-            type="date"
-            className="form-control"
-            max={new Date().toISOString().substring(0, 10)}
-            value={fechaNacimiento.toISOString().substring(0, 10)}
-            onChange={(e) => setFechaNacimiento(new Date(e.target.value))}
-            />
-        </div>
-
-        <div className="mb-3">
-            <label className="form-label">Artículo</label>
-            <select
-            className="form-select"
-            value={idStatus}
-            onChange={(e) => setIdStatus(e.target.value)}
-            >
-            <option value="">Selecciona una opción</option>
-            <option value="11">Artículo 52</option>
-            <option value="12">Artículo 91</option>
-            </select>
-        </div>
-
-        {idStatus === '11' && (
-            <div className="mb-3">
-            <label className="form-label">Motivo</label>
-            <select
-                className="form-select"
-                value={motivo}
-                onChange={(e) => setMotivo(e.target.value)}
-            >
-                <option value="">Selecciona una opción</option>
-                <option value="1">Tercera edad</option>
-                <option value="2">Capacidades diferentes</option>
-            </select>
-            </div>
-        )}
-
-        {idStatus === '12' && (
-            <>
-            <div className="mb-3">
-                <label className="form-label">Institución</label>
-                <input
-                type="text"
-                className="form-control"
-                maxLength={250}
-                value={institucion}
-                onChange={(e) => setInstitucion(e.target.value)}
-                />
-            </div>
-
-            <div className="mb-3">
-                <label className="form-label">Dependencia</label>
-                <input
-                type="text"
-                className="form-control"
-                maxLength={250}
-                value={dependencia}
-                onChange={(e) => setDependencia(e.target.value)}
-                />
-            </div>
-            </>
-        )}
-
-        <FormGroup className='mb-3'>
-            <FormLabel>Archivo (.zip, .rar)</FormLabel>
-            <div
-                className='border p-4 text-center rounded'
-                style={{ cursor: 'pointer' }}
-                onClick={() => document.getElementById('fileInput')?.click()}
-            >
-                <FaUpload size={40} className='mb-2'/>
-                <p className='mb-1'>
-                    {file?.name || 'Arrastra aquí tu archivo o da click aquí para buscar'}
-                </p>
-                <p className='is-size-6'>Tmaño máximo 20MB</p>
-                <p className='is-size-6'>Si al momento de elegir un archivo este no se selecciona, haga click en cancelar en la ventana emergente e intente de nuevo.</p>
-            </div>
-            <input 
-                id='fileInput'
-                type="file" 
-                style={{ display: 'none'}}
-                onChange={e => setFile(e.target.files ? e.target.files[0] : null)}
             />
+          </InputGroup>
         </FormGroup>
+      </Col>
 
-{/*
+      <Col>
+        <FormGroup>
+          <FormLabel>Fecha de fin</FormLabel>
+          <InputGroup>
+            <InputGroup.Text>
+              <FaRegCalendarAlt />
+            </InputGroup.Text>
+
+            <DatePicker
+              selected={fechaFin}
+              onChange={handleFechaFinChange}
+              value={fechaFin.toISOString().substring(0, 10)}
+              minDate={minDate2}
+              dateFormat="yyyy-MM-dd"
+              className="form-control"
+              wrapperClassName="flex-grow-1"
+              calendarClassName="mi-calendario"
+            />
+          </InputGroup>
+        </FormGroup>
+      </Col>
+
+      <Col>
+        <FormGroup>
+          <FormLabel>Fecha de nacimiento</FormLabel>
+          <InputGroup>
+            <InputGroup.Text>
+              <FaRegCalendarAlt />
+            </InputGroup.Text>
+
+            <DatePicker
+              selected={fechaNacimiento}
+              maxDate={new Date()}
+              onChange={handleFechaNacimientoChange}
+              dateFormat="yyyy-MM-dd"
+              className="form-control"
+              wrapperClassName="flex-grow-1"
+              calendarClassName="mi-calendario"
+            />
+          </InputGroup>
+        </FormGroup>
+      </Col>
+
+      <div className="mb-3">
+        <label className="form-label">Fecha de inicio</label>
+        <input
+          type="date"
+          className="form-control"
+          value={fechaInicio.toISOString().substring(0, 10)}
+          onChange={(e) => setFechaInicio(new Date(e.target.value))}
+          min={minDate.toISOString().substring(0, 10)}
+        />
+      </div>
+
+      {fechaInicio && (
+        <div className="mb-3">
+          <label className="form-label">Fecha de fin</label>
+          <input
+            type="date"
+            className="form-control"
+            value={fechaFin.toISOString().substring(0, 10)}
+            onChange={(e) => setFechaFin(new Date(e.target.value))}
+            min={minDate2.toISOString().substring(0, 10)}
+          />
+        </div>
+      )}
+
+      <div className="mb-3">
+        <label className="form-label">Fecha de nacimiento</label>
+        <input
+          type="date"
+          className="form-control"
+          max={new Date().toISOString().substring(0, 10)}
+          value={fechaNacimiento.toISOString().substring(0, 10)}
+          onChange={(e) => setFechaNacimiento(new Date(e.target.value))}
+        />
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label">Artículo</label>
+        <select
+          className="form-select"
+          value={idStatus}
+          onChange={(e) => setIdStatus(e.target.value)}
+        >
+          <option value="">Selecciona una opción</option>
+          <option value="11">Artículo 52</option>
+          <option value="12">Artículo 91</option>
+        </select>
+      </div>
+
+      {idStatus === "11" && (
+        <div className="mb-3">
+          <label className="form-label">Motivo</label>
+          <select
+            className="form-select"
+            value={motivo}
+            onChange={(e) => setMotivo(e.target.value)}
+          >
+            <option value="">Selecciona una opción</option>
+            <option value="1">Tercera edad</option>
+            <option value="2">Capacidades diferentes</option>
+          </select>
+        </div>
+      )}
+
+      {idStatus === "12" && (
+        <>
+          <div className="mb-3">
+            <label className="form-label">Institución</label>
+            <input
+              type="text"
+              className="form-control"
+              maxLength={250}
+              value={institucion}
+              onChange={(e) => setInstitucion(e.target.value)}
+            />
+          </div>
+
+          <div className="mb-3">
+            <label className="form-label">Dependencia</label>
+            <input
+              type="text"
+              className="form-control"
+              maxLength={250}
+              value={dependencia}
+              onChange={(e) => setDependencia(e.target.value)}
+            />
+          </div>
+        </>
+      )}
+
+      <FormGroup className="mb-3">
+        <FormLabel>Archivo (.zip, .rar)</FormLabel>
+        <div
+          className="border p-4 text-center rounded"
+          style={{ cursor: "pointer" }}
+          onClick={() => document.getElementById("fileInput")?.click()}
+        >
+          <FaUpload size={40} className="mb-2" />
+          <p className="mb-1">
+            {file?.name ||
+              "Arrastra aquí tu archivo o da click aquí para buscar"}
+          </p>
+          <p className="is-size-6">Tmaño máximo 20MB</p>
+          <p className="is-size-6">
+            Si al momento de elegir un archivo este no se selecciona, haga click
+            en cancelar en la ventana emergente e intente de nuevo.
+          </p>
+        </div>
+        <input
+          id="fileInput"
+          type="file"
+          style={{ display: "none" }}
+          onChange={(e) => setFile(e.target.files ? e.target.files[0] : null)}
+        />
+      </FormGroup>
+
+      {/*
 <div className="mb-3">
             <label className="form-label">Archivo (.zip, .rar)</label>
             <input
@@ -467,22 +498,22 @@ export default function CasoEspecialForm({
         </div>
 */}
 
-        <div className="text-center mt-4 mb-3">
+      <div className="text-center mt-4 mb-3">
-            <button
+        <button
-            className="btn btn-success"
+          className="btn btn-success"
-            disabled={mostrarBoton()}
+          disabled={mostrarBoton()}
-            onClick={() =>
+          onClick={() =>
-                imprimirWarning(
+            imprimirWarning(
-                '¿Estás seguro(a) de querer crear un nuevo caso especial?',
+              "¿Estás seguro(a) de querer crear un nuevo caso especial?",
-                enviar
+              enviar
-                )
+            )
-            }
+          }
-            >
+        >
-            Enviar
+          Enviar
-            </button>
+        </button>
-        </div>
+      </div>
 
-        <BotonRegresar />
+      <BotonRegresar />
-        </div>
+    </div>
-    );
+  );
 }

src/components/layout/logout.tsx

@@ -2,30 +2,28 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 export default function Logout() {
-    const router = useRouter();
+  const router = useRouter();
-    const [usuario, setUsuario] = useState<string | null>(null);
+  const [usuario, setUsuario] = useState<string | null>(null);
 
-    useEffect(() => {
+  useEffect(() => {
-        const storedUsuario = localStorage.getItem("usuario")
+    const storedUsuario = localStorage.getItem("usuario");
-        setUsuario(storedUsuario);
+    setUsuario(storedUsuario);
-    }, []);
+  }, []);
-    
 
-    const handleLogout = () => {
+  const handleLogout = () => {
-        localStorage.removeItem("token");
+    localStorage.removeItem("token");
-        localStorage.removeItem('usuario');
+    localStorage.removeItem("usuario");
-        router.push("/");
+    router.push("/");
-    }
+  };
-    
-    return(
-        <section className="bg-dorado">
-            <div className="container d-flex justify-content-between align-items-center">
-                <h2 className="m-2 text-white">{ usuario }</h2>
-                <button onClick={handleLogout} className="m-2 bg-danger">
-                    Cerrar Sesion
-                </button>
-            </div>
-        </section>
-    )
 
-}
+  return (
+    <section className="bg-dorado">
+      <div className="container d-flex justify-content-between align-items-center">
+        <h2 className="m-2 text-white">{usuario}</h2>
+        <button onClick={handleLogout} className="m-2 bg-danger">
+          Cerrar Sesion
+        </button>
+      </div>
+    </section>
+  );
+}