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/layout.tsx

@@ -0,0 +1,11 @@
+'use client'
+import Logout from "@/components/layout/logout";
+
+export default function Layout({ children }: { children: React.ReactNode}) {
+    return (
+        <>
+            <Logout />
+            {children}
+        </>
+    )
+}

src/app/casoEspecial/nuevo/page.tsx

@@ -0,0 +1,42 @@
+"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 imprimirError = (error: unknown) => {
+    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 updateIsLoading = (value: boolean) => {
+    setIsLoading(value);
+  };
+
+  return (
+    <div>
+      <BotonRegresar />
+
+      <h2 style={{ marginLeft: "19rem" }}>Agregar un Servicio Social</h2>
+
+      <CasoEspecialForm
+        imprimirError={imprimirError}
+        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 [responsable, setResponsable] = useState<LocalResponsable>({});
+  const router = useRouter();
+  const [responsable, setResponsable] = useState<LocalResponsable>({});
 
-    const getMessageFromUnknown = (err: unknown) => {
-        if (typeof err === 'string') return err;
-        if (err instanceof Error) return err.message;
-        try { return JSON.stringify(err); } catch (_) { return String(err); }
-    };
+  const getMessageFromUnknown = (err: unknown) => {
+    if (typeof err === "string") return err;
+    if (err instanceof Error) return err.message;
+    try {
+      return JSON.stringify(err);
+    } catch (_) {
+      return String(err);
+    }
+  };
 
-    const imprimirError = (err: unknown = {}, title = '¡Hubo un error!', onConfirm: () => void = () => {}) => {
-        const msg = getMessageFromUnknown(err);
-        // eslint-disable-next-line no-alert
-        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 imprimirError = (
+    err: unknown = {},
+    title = "¡Hubo un error!",
+    onConfirm: () => void = () => {}
+  ) => {
+    const msg = getMessageFromUnknown(err);
+    // eslint-disable-next-line no-alert
+    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 idUsuario = Number(localStorage.getItem('idUsuario'));
-        const idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'));
-        const tipoUsuario = localStorage.getItem('tipoUsuario');
-        const token = localStorage.getItem('token') || undefined;
-    setResponsable({ idUsuario: Number.isNaN(idUsuario) ? undefined : idUsuario, idTipoUsuario: Number.isNaN(idTipoUsuario) ? undefined : idTipoUsuario, tipoUsuario, token: token ?? undefined });
-    };
+  const getLocalhostInfo = () => {
+    const idUsuario = Number(localStorage.getItem("idUsuario"));
+    const idTipoUsuario = Number(localStorage.getItem("idTipoUsuario"));
+    const tipoUsuario = localStorage.getItem("tipoUsuario");
+    const token = localStorage.getItem("token") || undefined;
+    setResponsable({
+      idUsuario: Number.isNaN(idUsuario) ? undefined : idUsuario,
+      idTipoUsuario: Number.isNaN(idTipoUsuario) ? undefined : idTipoUsuario,
+      tipoUsuario,
+      token: token ?? undefined,
+    });
+  };
 
-    useEffect(() => {
-        getLocalhostInfo();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  useEffect(() => {
+    getLocalhostInfo();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    useEffect(() => {
-        if (responsable.idTipoUsuario === 1) router.push('/admin');
-        if (responsable.idTipoUsuario === 2) router.push('/responsable');
-        if (responsable.idTipoUsuario === 3) router.push('/alumno');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [responsable]);
+  useEffect(() => {
+    if (responsable.idTipoUsuario === 1) router.push("/admin");
+    if (responsable.idTipoUsuario === 2) router.push("/responsable");
+    if (responsable.idTipoUsuario === 3) router.push("/alumno");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [responsable]);
 
-    return (
-        <section className="container px-2 pb-6">
-        <div className="pb-5 pt-6">
-            <button className="btn btn-info" onClick={() => router.push('/casoEspecial/nuevo')}>Nuevo Caso Especial</button>
-        </div>
+  return (
+    <section className="container px-2 pb-6">
+      <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>
+      </div>
 
-        {responsable.idTipoUsuario !== undefined && responsable.token ? (
-            <LiberarCasoEspecial responsable={{ idTipoUsuario: responsable.idTipoUsuario!, token: responsable.token! }} imprimirError={(msg: string) => imprimirError(msg)} />
-        ) : null}
-        </section>
-    );
+      {responsable.idTipoUsuario !== undefined && responsable.token ? (
+        <LiberarCasoEspecial
+          responsable={{
+            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>) => {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        const object = Object.fromEntries(formData);
+  const handleOnSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const object = Object.fromEntries(formData);
 
-        try {
-            const res = await axiosInstance.post('/usuario/login', object);
+    try {
+      const res = await axiosInstance.post("/usuario/login", object);
 
-            // Extraer datos del backend
-            const token = res?.data?.token ?? '';
-            const usuarioObj = res?.data?.Usuario ?? res?.data ?? {};
-            const idUsuario = usuarioObj.idUsuario ?? '';
-            const usuario = usuarioObj.usuario ?? '';
-            const nombre = usuarioObj.nombre ?? '';
-            const idTipoUsuario = Number(usuarioObj.TipoUsuario?.idTipoUsuario ?? 0);
-            //const idTipoUsuario = Number((usuarioObj as any).TipoUsuario?.idTipoUsuario ?? 0);
+      // Extraer datos del backend
+      const token = res?.data?.token ?? "";
+      const usuarioObj = res?.data?.Usuario ?? res?.data ?? {};
+      const idUsuario = usuarioObj.idUsuario ?? "";
+      const usuario = usuarioObj.usuario ?? "";
+      const nombre = usuarioObj.nombre ?? "";
+      const idTipoUsuario = Number(usuarioObj.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
-            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));
-
-            // Validar y redirigir según el idTipoUsuario
-            if (token && idUsuario && idTipoUsuario) {
-                switch (idTipoUsuario) {
-                    case 1:
-                        router.push('/administrador');
-                        break;
-                    case 2:
-                        router.push('/responsable');
-                        break;
-                    case 3:
-                        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);
+      // Validar y redirigir según el idTipoUsuario
+      if (token && idUsuario && idTipoUsuario) {
+        switch (idTipoUsuario) {
+          case 1:
+            router.push("/administrador");
+            break;
+          case 2:
+            router.push("/responsable");
+            break;
+          case 3:
+            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();
+    }
+  };
 
-    return (
-        <div className="d-flex justify-content-center align-items-center bg-light" 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>
+  return (
+    <div
+      className="d-flex justify-content-center align-items-center bg-light"
+      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">
-                    <label htmlFor="usuario" className="form-label">Usuario</label>
-                    <input type="text" name="usuario" id="usuario" className="form-control" required />
-                </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 className="mb-3">
+          <label htmlFor="usuario" className="form-label">
+            Usuario
+          </label>
+          <input
+            type="text"
+            name="usuario"
+            id="usuario"
+            className="form-control"
+            required
+          />
         </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/app/responsable/page.tsx

@@ -76,7 +76,7 @@ export default function Page() {
 
     return (
         <section className="container px-2 pb-6">
-            <div className="pt-6 pb-5">
+            <div className="pt-6 pb-4">
                 <p className="is-size-4 block mt-5 h4 mb-4">Estimado(a) responsable del programa de servicio social:</p>
 
                 <p className="block">

src/components/administrador/carga-masiva.tsx

@@ -70,7 +70,7 @@ export default function CargaMasiva({datos}: {datos: CargaMasivaProps}) {
                         {csv?.name || 'Arrastra aquí tu archivo o da click aquí para buscar'}
                     </p>
                     <p className="is-size-6">Tamaño máximo 20MB</p>
-                    <p className="is-size-7">Si al momento de elegir uin archivo este no se selecciona, haga click en cancelar en la ventana emergente e intente de nuevo.</p>
+                    <p className="is-size-7">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="csvInput"

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">
@@ -186,6 +192,7 @@ export default function TablaServicioSocial({ admin, imprimirError }: Props) {
                 onPageChange={onPageChange}
                 idTipoUsuario={admin?.idTipoUsuario}
                 columnasResponsable={admin?.idTipoUsuario === 1}
+                columnaFechaRegistro={true}
                 columnaCuestionario={false}
                 columnaCartaTermino={false}
                 columnaCuestionarioCompleto={false}

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 = () => {
-            //window.history.back();
-            router.back();
-        };
-    
+  const handleGoBack = () => {
+    //window.history.back();
+    router.back();
+  };
 
-    return (
-        <div className="pb-5 pt-3">
-            <button onClick={handleGoBack} className="btn-outline-primary">Regresar</button>
-        </div>
-    )
-}
+  return (
+    <div style={{ marginLeft: "19rem" }} className="pb-5 pt-3">
+      <button onClick={handleGoBack} className="btn-outline-primary">
+        Regresar
+      </button>
+    </div>
+  );
+};
 
-export default BotonRegresar
+export default BotonRegresar;

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

@@ -1,373 +1,492 @@
-'use client';
+"use client";
 
-import React, { useState, useEffect } from 'react';
-import { axiosInstance } from '@/api/config';
-import moment from 'moment';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import React, { useState, useEffect } from "react";
+import { axiosInstance } from "@/api/config";
+import moment from "moment";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Col, FormGroup, FormLabel, InputGroup } from "react-bootstrap";
+import { FaRegCalendarAlt, FaUpload } from "react-icons/fa";
+import DatePicker from "react-datepicker";
+import BotonRegresar from "../boton-regresar";
 
 // 🔹 Tipos estrictos
 interface Alumno {
-    idUsuario?: number;
-    idCarrera?: number;
-    nombre?: string;
-    carrera?: string;
-    creditos?: string;
+  idUsuario?: number;
+  idCarrera?: number;
+  nombre?: string;
+  carrera?: string;
+  creditos?: string;
 }
 
 interface Responsable {
-    token: { headers: Record<string, string> };
-    tokenArchivo: { headers: Record<string, string> };
+  //token: { headers: Record<string, string> };
+  tokenArchivo: { headers: Record<string, string> };
 }
 
 interface Props {
-    responsable: Responsable;
-    imprimirError: (msg: { message: string }) => void;
-    imprimirMensaje: (msg: string) => void;
-    imprimirWarning: (msg: string, callback: () => void) => void;
-    updateIsLoading: (value: boolean) => void;
+  //responsable: Responsable;
+  imprimirError: (msg: { message: string }) => void;
+  imprimirMensaje: (msg: string) => void;
+  imprimirWarning: (msg: string, callback: () => void) => void;
+  updateIsLoading: (value: boolean) => void;
 }
 
 export default function CasoEspecialForm({
-    responsable,
-    imprimirError,
-    imprimirMensaje,
-    imprimirWarning,
-    updateIsLoading,
+  //responsable,
+  imprimirError,
+  imprimirMensaje,
+  imprimirWarning,
+  updateIsLoading,
 }: Props) {
-    // 🔹 Estados del formulario
-    const [dependencia, setDependencia] = useState('');
-    const [direccion, setDireccion] = useState('');
-    const [correo, setCorreo] = useState('');
-    const [idStatus, setIdStatus] = useState('');
-    const [institucion, setInstitucion] = useState('');
-    const [motivo, setMotivo] = useState('');
-    const [numeroCuenta, setNumeroCuenta] = useState('');
-    const [telefono, setTelefono] = useState('');
-    const [alumno, setAlumno] = useState<Alumno>({});
-    const [fechaInicio, setFechaInicio] = useState<Date>(new Date());
-    const [fechaFin, setFechaFin] = useState<Date>(new Date());
-    const [fechaNacimiento, setFechaNacimiento] = useState<Date>(new Date());
-    const [file, setFile] = useState<File | null>(null);
-    const [minDate, setMinDate] = useState<Date>(new Date('2020-01-02'));
-    const [minDate2, setMinDate2] = useState<Date>(new Date());
+  // 🔹 Estados del formulario
+  const [dependencia, setDependencia] = useState("");
+  const [direccion, setDireccion] = useState("");
+  const [correo, setCorreo] = useState("");
+  const [idStatus, setIdStatus] = useState("");
+  const [institucion, setInstitucion] = useState("");
+  const [motivo, setMotivo] = useState("");
+  const [numeroCuenta, setNumeroCuenta] = useState("");
+  const [telefono, setTelefono] = useState("");
+  const [alumno, setAlumno] = useState<Alumno>({});
+  const [fechaInicio, setFechaInicio] = useState<Date>(new Date());
+  const [fechaFin, setFechaFin] = useState<Date>(new Date());
+  const [fechaNacimiento, setFechaNacimiento] = useState<Date>(new Date());
+  const [file, setFile] = useState<File | null>(null);
+  const [minDate, setMinDate] = useState<Date>(new Date("2020-01-02"));
+  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
-    const resetear = (): void => {
-        setDependencia('');
-        setDireccion('');
-        setCorreo('');
-        setIdStatus('');
-        setInstitucion('');
-        setMotivo('');
-        setTelefono('');
-        setAlumno({});
-        setFechaInicio(new Date());
-        setFechaFin(new Date());
-        setFechaNacimiento(new Date());
-        setFile(null);
-    };
+  //  Validar extensión
+  const validarExtencion = (archivo: File): void => {
+    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).",
+      });
+    }
+  };
 
-    //  Validar extensión
-    const validarExtencion = (archivo: File): void => {
-        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}`, responsable.token);
-        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, responsable.tokenArchivo);
-        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
+  //  Mostrar/ocultar botón de enviar
+  const mostrarBoton = (): boolean => {
     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"
-                placeholder="Número de Cuenta"
-                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>
+      !alumno.idUsuario ||
+      !telefono ||
+      !direccion ||
+      !correo ||
+      !idStatus ||
+      (idStatus === "11" && !motivo) ||
+      (idStatus === "12" && (!dependencia || !institucion)) ||
+      !file
+    );
+  };
 
-        <div className="mb-3">
-            <label className="form-label">Nombre</label>
-            <p className="form-control">{alumno.nombre || ''}</p>
-        </div>
+  //  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);
+    }
+  };
 
-        <div className="mb-3">
-            <label className="form-label">Carrera</label>
-            <p className="form-control">{alumno.carrera || ''}</p>
-        </div>
+  //  Enviar formulario
+  const enviar = async (): Promise<void> => {
+    if (!file) return;
 
-        <div className="mb-3">
-            <label className="form-label">Créditos</label>
-            <p className="form-control">
-            {alumno.creditos ? parseInt(alumno.creditos) : ''}{' '}
-            {alumno.creditos ? '%' : ''}
-            </p>
-        </div>
+    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,
+    };
 
-        <div className="mb-3">
-            <label className="form-label">Dirección</label>
-            <input
+    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">
+      <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}
-            value={direccion}
-            onChange={(e) => setDireccion(e.target.value)}
-            />
+            placeholder="Número de Cuenta"
+            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">
-            <label className="form-label">Teléfono</label>
-            <input
-            type="tel"
-            className="form-control"
-            maxLength={10}
-            value={telefono}
-            onChange={(e) => setTelefono(e.target.value)}
+      <div className="mb-3">
+        <label className="form-label">Nombre</label>
+        <p className="form-control" style={{ padding: "1rem 1rem" }}>
+          {alumno.nombre || ""}
+        </p>
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label">Carrera</label>
+        <p className="form-control" style={{ padding: "1rem 1rem" }}>
+          {alumno.carrera || ""}
+        </p>
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label">Créditos</label>
+        <p className="form-control" style={{ padding: "1rem 1rem" }}>
+          {alumno.creditos ? parseInt(alumno.creditos) : ""}{" "}
+          {alumno.creditos ? "%" : ""}
+        </p>
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label">Dirección</label>
+        <input
+          type="text"
+          className="form-control"
+          maxLength={200}
+          value={direccion}
+          onChange={(e) => setDireccion(e.target.value)}
+        />
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label">Teléfono</label>
+        <input
+          type="tel"
+          className="form-control"
+          maxLength={10}
+          value={telefono}
+          onChange={(e) => setTelefono(e.target.value)}
+        />
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label">Correo electrónico</label>
+        <input
+          type="email"
+          className="form-control"
+          value={correo}
+          onChange={(e) => setCorreo(e.target.value)}
+        />
+      </div>
+
+      <Col>
+        <FormGroup>
+          <FormLabel>Fecha de inicio</FormLabel>
+          <InputGroup>
+            <InputGroup.Text>
+              <FaRegCalendarAlt />
+            </InputGroup.Text>
+
+            <DatePicker
+              selected={fechaInicio}
+              onChange={handleFechaInicioChange}
+              minDate={minDate}
+              dateFormat="yyyy-MM-dd"
+              className="form-control"
+              wrapperClassName="flex-grow-1"
+              calendarClassName="mi-calendario"
             />
-        </div>
+          </InputGroup>
+        </FormGroup>
+      </Col>
 
-        <div className="mb-3">
-            <label className="form-label">Correo electrónico</label>
-            <input
-            type="email"
-            className="form-control"
-            value={correo}
-            onChange={(e) => setCorreo(e.target.value)}
+      <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"
             />
-        </div>
+          </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 inicio</label>
-            <input
+          <label className="form-label">Fecha de fin</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)}
-            />
+            value={fechaFin.toISOString().substring(0, 10)}
+            onChange={(e) => setFechaFin(new Date(e.target.value))}
+            min={minDate2.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">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
+          <label className="form-label">Motivo</label>
+          <select
             className="form-select"
-            value={idStatus}
-            onChange={(e) => setIdStatus(e.target.value)}
-            >
+            value={motivo}
+            onChange={(e) => setMotivo(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>
+            <option value="1">Tercera edad</option>
+            <option value="2">Capacidades diferentes</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>
 
-        {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>
+        </>
+      )}
 
-            <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">
+      {/*
+<div className="mb-3">
             <label className="form-label">Archivo (.zip, .rar)</label>
             <input
             type="file"
@@ -377,21 +496,24 @@ export default function CasoEspecialForm({
             />
             <div className="form-text">Tamaño máximo 20MB</div>
         </div>
+*/}
 
-        <div className="text-center mt-4">
-            <button
-            className="btn btn-success"
-            disabled={mostrarBoton()}
-            onClick={() =>
-                imprimirWarning(
-                '¿Estás seguro(a) de querer crear un nuevo caso especial?',
-                enviar
-                )
-            }
-            >
-            Enviar
-            </button>
-        </div>
-        </div>
-    );
+      <div className="text-center mt-4 mb-3">
+        <button
+          className="btn btn-success"
+          disabled={mostrarBoton()}
+          onClick={() =>
+            imprimirWarning(
+              "¿Estás seguro(a) de querer crear un nuevo caso especial?",
+              enviar
+            )
+          }
+        >
+          Enviar
+        </button>
+      </div>
+
+      <BotonRegresar />
+    </div>
+  );
 }

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

@@ -3,6 +3,8 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { axiosInstance } from "@/api/config";
 import ServicioSocialTabla from "../servicio-social-tabla";
+import { Button, Col, Form, FormControl, FormGroup, FormLabel, InputGroup, Row } from "react-bootstrap";
+import { FaInfoCircle, FaSchool, FaUser } from "react-icons/fa";
 
 interface Responsable {
     idTipoUsuario: number;
@@ -120,8 +122,82 @@ export default function LiberarCasoEspecial({ responsable, imprimirError }: Prop
         <div className="mb-6 container mt-4">
         <h3 className="h4 mb-4">Casos Especiales</h3>
 
+        <section className="container-fluid my-3">
+            <Form onSubmit={(e) => { e.preventDefault(); obtenerCasosEspeciales(); }}>
+                <Row className="g-3">
+                    <Col md={3}>
+                        <FormGroup>
+                            <FormLabel>Número de Cuenta</FormLabel>
+                            <InputGroup>
+                                <InputGroup.Text className="rounded-4">
+                                    <FaSchool />
+                                </InputGroup.Text>
+                                <FormControl 
+                                    type="text"
+                                    placeholder="No.Cuenta"
+                                    maxLength={9}
+                                    value={search.numeroCuenta}
+                                    onChange={(e) => setSearch(prev => ({ ...prev, numeroCuenta: e.target.value }))}
+                                    onKeyDown={(e) => { if (e.key === 'Enter') obtenerCasosEspeciales(); }}
+                                    className="rounded-4"
+                                />
+                            </InputGroup>
+                        </FormGroup>
+                    </Col>
+
+                    <Col md={3}>
+                        <FormGroup>
+                            <FormLabel>Nombre</FormLabel>
+                            <InputGroup>
+                                <InputGroup.Text className="rounded-4">
+                                    <FaUser />
+                                </InputGroup.Text>
+                                <FormControl 
+                                    type="text"
+                                    placeholder="Nombre"
+                                    value={search.nombre}
+                                    onChange={(e) => setSearch(prev => ({ ...prev, nombre: e.target.value }))}
+                                    onKeyDown={(e) => { if (e.key === 'Enter') obtenerCasosEspeciales(); }}
+                                    className="rounded-4"
+                                />
+                            </InputGroup>
+                        </FormGroup>
+                    </Col>
+
+                    <Col md={3}>
+                        <FormGroup>
+                            <FormLabel>Status</FormLabel>
+                            <InputGroup>
+                                <InputGroup.Text className="rounded-4">
+                                    <FaInfoCircle />
+                                </InputGroup.Text>                                
+                                <Form.Select
+                                    className="rounded-4"
+                                    value={search.idStatus}
+                                    onChange={(e) => setSearch(prev => ({ ...prev, idStatus: e.target.value }))}
+                                >
+                                    <option value="">Status</option>
+                                    {status.slice(10, 14).map((s) => (
+                                        <option key={s.idStatus} value={s.idStatus}>
+                                            {s.status}
+                                        </option>
+                                    ))}
+                                </Form.Select>
+                            </InputGroup>
+                        </FormGroup>
+                    </Col>
+
+                    <Col md={3} className="d-flex align-items-end">
+                        <Button type="submit" className="w-100 rounded-5" disabled={isLoading}>
+                            {isLoading ? 'Buscando...' : 'Buscar'}
+                        </Button>
+                    </Col>
+                </Row>
+            </Form>
+        </section>
+
+{/*
         <div className="row g-3">
-            {/* Número de cuenta */}
             <div className="col-md-3">
             <label className="form-label">Número de Cuenta</label>
             <input
@@ -135,7 +211,7 @@ export default function LiberarCasoEspecial({ responsable, imprimirError }: Prop
             />
             </div>
 
-            {/* Nombre */}
+            
             <div className="col-md-3">
             <label className="form-label">Nombre</label>
             <input
@@ -148,7 +224,6 @@ export default function LiberarCasoEspecial({ responsable, imprimirError }: Prop
             />
             </div>
 
-            {/* Status */}
             <div className="col-md-3">
             <label className="form-label">Status</label>
             <select
@@ -167,7 +242,7 @@ export default function LiberarCasoEspecial({ responsable, imprimirError }: Prop
             </select>
             </div>
 
-            {/* Botón Buscar */}
+            
             <div className="col-md-3 d-flex align-items-end">
             <button
                 className="btn btn-info w-100"
@@ -178,6 +253,17 @@ export default function LiberarCasoEspecial({ responsable, imprimirError }: Prop
             </button>
             </div>
         </div>
+*/}
+
+        <ServicioSocialTabla
+            columnaFechaFin={false}
+            columnaFechaInicio={false}
+            columnaFechaRegistro={true}
+            idTipoUsuario={responsable.idTipoUsuario}
+            total={total}
+            data={data}
+            onPageChange={onPageChange}
+            />
 
         {/* Tabla */}
         {/*

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 [usuario, setUsuario] = useState<string | null>(null);
+  const router = useRouter();
+  const [usuario, setUsuario] = useState<string | null>(null);
 
-    useEffect(() => {
-        const storedUsuario = localStorage.getItem("usuario")
-        setUsuario(storedUsuario);
-    }, []);
-    
+  useEffect(() => {
+    const storedUsuario = localStorage.getItem("usuario");
+    setUsuario(storedUsuario);
+  }, []);
 
-    const handleLogout = () => {
-        localStorage.removeItem("token");
-        localStorage.removeItem('usuario');
-        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>
-    )
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    localStorage.removeItem("usuario");
+    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>
+  );
+}

src/components/servicio-social-tabla.tsx

@@ -174,13 +174,14 @@ const servicioSelected = (row: ServicioSocialResponse | ServicioSocialConCasoEsp
                         //idTipoUsuario === 1 ? servicioSelected(item) : undefined
                         //}
                     >
+                        {columnaFechaRegistro && <td>{formatDate(item.createdAt)}</td>}
                         <td>{item.Usuario?.usuario}</td>
                         <td>{item.Usuario?.nombre}</td>
                         <td>{item.Carrera?.carrera}</td>
                         {columnaFechaInicio && (
-                        <td>{formatDate(item.fecha_inicio)}</td>
+                        <td>{formatDate(item.fechaInicio)}</td>
                         )}
-                        {columnaFechaFin && <td>{formatDate(item.fecha_fin)}</td>}
+                        {columnaFechaFin && <td>{formatDate(item.fechaFin)}</td>}
                         <td>
                         {columnasResponsable && item.Status?.idStatus === 7 ? (
                             <button

src/types/responses.d.ts

@@ -5,8 +5,8 @@ export interface ServicioSocialResponse {
     id?: number;
     createdAt?: string;
     fecha_creacion?: string | null;
-    fecha_fin?: string | null;
-    fecha_inicio?: string | null;
+    fechaFin?: string | null;
+    fechaInicio?: string | null;
     fecha_registro?: string | null;
     Usuario?: Usuario;
     Carrera?: Carrera;