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,4 +1,4 @@
-'use client';
+"use client";
 import BotonRegresar from "@/components/boton-regresar";
 import CasoEspecialForm from "@/components/casoEspecial/caso-especial-form";
 import { useState } from "react";
@@ -7,28 +7,28 @@ export default function Nuevo() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   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 updateIsLoading = (value: boolean) => {
     setIsLoading(value);
-    }
+  };
 
   return (
     <div>
       <BotonRegresar />
 
-            <h2>Agregar un Servicio Social</h2>
+      <h2 style={{ marginLeft: "19rem" }}>Agregar un Servicio Social</h2>
 
       <CasoEspecialForm
         imprimirError={imprimirError}
@@ -36,9 +36,7 @@ export default function Nuevo() {
         imprimirWarning={imprimirWarning}
         updateIsLoading={updateIsLoading}
       />
-{/* <CasoEspecialForm /> */}
+      {/* <CasoEspecialForm /> */}
-            
-
     </div>
-    )
+  );
 }

src/app/casoEspecial/page.tsx

@@ -4,35 +4,59 @@ 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 getMessageFromUnknown = (err: unknown) => {
-        if (typeof err === 'string') return err;
+    if (typeof err === "string") return err;
     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 = (
+    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') {
+    if (
-        try { localStorage.clear(); } catch (_) {}
+      typeof err === "object" &&
-        router.push('/');
+      err !== null &&
+      (err as { err?: unknown }).err === "token error"
+    ) {
+      try {
+        localStorage.clear();
+      } catch (_) {}
+      router.push("/");
     }
   };
 
   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(() => {
@@ -41,20 +65,28 @@ export default function Page() {
   }, []);
 
   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
   }, [responsable]);
 
   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>
+        <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)} />
+        <LiberarCasoEspecial
+          responsable={{
+            idTipoUsuario: responsable.idTipoUsuario!,
+            token: responsable.token!,
+          }}
+          imprimirError={(msg: string) => imprimirError(msg)}
+        />
       ) : null}
     </section>
   );

src/app/page.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { axiosInstance } from "@/api/config";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -12,39 +12,38 @@ export default function Home() {
     const object = Object.fromEntries(formData);
 
     try {
-            const res = await axiosInstance.post('/usuario/login', object);
+      const res = await axiosInstance.post("/usuario/login", object);
 
       // Extraer datos del backend
-            const token = res?.data?.token ?? '';
+      const token = res?.data?.token ?? "";
       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 as any).TipoUsuario?.idTipoUsuario ?? 0);
 
-
       // Guardar en localStorage
-            localStorage.setItem('token', String(token));
+      localStorage.setItem("token", String(token));
-            localStorage.setItem('idUsuario', String(idUsuario));
+      localStorage.setItem("idUsuario", String(idUsuario));
-            localStorage.setItem('usuario', String(usuario));
+      localStorage.setItem("usuario", String(usuario));
-            localStorage.setItem('nombre', String(nombre));
+      localStorage.setItem("nombre", String(nombre));
-            localStorage.setItem('idTipoUsuario', String(idTipoUsuario));
+      localStorage.setItem("idTipoUsuario", String(idTipoUsuario));
 
       // Validar y redirigir según el idTipoUsuario
       if (token && idUsuario && idTipoUsuario) {
         switch (idTipoUsuario) {
           case 1:
-                        router.push('/administrador');
+            router.push("/administrador");
             break;
           case 2:
-                        router.push('/responsable');
+            router.push("/responsable");
             break;
           case 3:
-                        router.push('/alumno');
+            router.push("/alumno");
             break;
           case 4:
-                        router.push('/casoEspecial');
+            router.push("/casoEspecial");
             break;
           default:
             console.warn(`Tipo de usuario desconocido: ${idTipoUsuario}`);
@@ -53,31 +52,56 @@ export default function Home() {
         }
       } else {
         localStorage.clear();
-                console.error('Error: datos de usuario incompletos');
+        console.error("Error: datos de usuario incompletos");
       }
     } catch (error) {
-            console.error('Error en el inicio de sesión:', 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)' }}>
+    <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"
+      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>
+          <label htmlFor="usuario" className="form-label">
-                    <input type="text" name="usuario" id="usuario" className="form-control" required />
+            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>
+          <label htmlFor="password" className="form-label">
-                    <input type="password" name="password" id="password" className="form-control" required />
+            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>
+          <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,7 +1,7 @@
-"use client"
+"use client";
 
 import { useRouter } from "next/navigation";
-import React from "react"
+import React from "react";
 
 const BotonRegresar: React.FC = () => {
   const router = useRouter();
@@ -11,12 +11,13 @@ const BotonRegresar: React.FC = () => {
     router.back();
   };
 
-
   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">
+        Regresar
+      </button>
     </div>
-    )
+  );
-}
+};
 
-export default BotonRegresar
+export default BotonRegresar;

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

@@ -1,13 +1,13 @@
-'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 {
@@ -39,31 +39,39 @@ export default function CasoEspecialForm({
   updateIsLoading,
 }: Props) {
   // 🔹 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 [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 [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('');
+    setDependencia("");
-        setDireccion('');
+    setDireccion("");
-        setCorreo('');
+    setCorreo("");
-        setIdStatus('');
+    setIdStatus("");
-        setInstitucion('');
+    setInstitucion("");
-        setMotivo('');
+    setMotivo("");
-        setTelefono('');
+    setTelefono("");
     setAlumno({});
     setFechaInicio(new Date());
     setFechaFin(new Date());
@@ -78,7 +86,8 @@ export default function CasoEspecialForm({
     if (!esValida) {
       setFile(null);
       imprimirError({
-                message: 'Asegúrate de ingresar un archivo con la extensión correcta (.zip o .rar).',
+        message:
+          "Asegúrate de ingresar un archivo con la extensión correcta (.zip o .rar).",
       });
     }
   };
@@ -91,8 +100,8 @@ export default function CasoEspecialForm({
       !direccion ||
       !correo ||
       !idStatus ||
-            (idStatus === '11' && !motivo) ||
+      (idStatus === "11" && !motivo) ||
-            (idStatus === '12' && (!dependencia || !institucion)) ||
+      (idStatus === "12" && (!dependencia || !institucion)) ||
       !file
     );
   };
@@ -101,14 +110,16 @@ export default function CasoEspecialForm({
   const buscarAlumno = async (): Promise<void> => {
     try {
       updateIsLoading(true);
-            const res = await axiosInstance.get(`/usuario/escolares?numeroCuenta=${numeroCuenta}`);
+      const res = await axiosInstance.get(
+        `/usuario/escolares?numeroCuenta=${numeroCuenta}`
+      );
       resetear();
       setAlumno(res.data);
     } catch (err: unknown) {
       resetear();
-            setNumeroCuenta('');
+      setNumeroCuenta("");
-            let msg = { message: 'Error al buscar alumno.' };
+      let msg = { message: "Error al buscar alumno." };
-            if (typeof err === 'object' && err !== null && 'response' in err) {
+      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 };
@@ -141,22 +152,31 @@ export default function CasoEspecialForm({
     };
 
     const formData = new FormData();
-        formData.append('alumno', JSON.stringify(data));
+    formData.append("alumno", JSON.stringify(data));
-        formData.append('archivos', file);
+    formData.append("archivos", file);
 
     try {
       updateIsLoading(true);
       const res = await axiosInstance.post(`/caso_especial/nuevo`, formData);
       resetear();
-            setNumeroCuenta('');
+      setNumeroCuenta("");
       imprimirMensaje(res.data.message);
     } catch (err: unknown) {
-            let msg: { message: string } = { message: 'Error al enviar formulario.' };
+      let msg: { message: string } = { message: "Error al enviar formulario." };
-            if (typeof err === 'object' && err !== null && 'response' in err) {
+      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) {
+        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') {
+          if (
+            d &&
+            typeof d === "object" &&
+            "message" in d &&
+            typeof (d as { message?: unknown }).message === "string"
+          ) {
             msg = { message: (d as { message?: unknown }).message as string };
           }
         }
@@ -182,14 +202,14 @@ export default function CasoEspecialForm({
 
   //  Efectos (equivalentes a watch)
   useEffect(() => {
-        setMotivo('');
+    setMotivo("");
-        setInstitucion('');
+    setInstitucion("");
-        setDependencia('');
+    setDependencia("");
   }, [idStatus]);
 
   useEffect(() => {
     if (file && file.size >= 20_000_000) {
-        imprimirError({ message: 'El tamaño del archivo excede los 20MB.' });
+      imprimirError({ message: "El tamaño del archivo excede los 20MB." });
       setFile(null);
     } else if (file) {
       validarExtencion(file);
@@ -201,15 +221,15 @@ export default function CasoEspecialForm({
   }, [fechaInicio]);
 
   useEffect(() => {
-        const min = new Date('2020-01-02');
+    const min = new Date("2020-01-02");
     min.setDate(min.getDate() - 1);
     setMinDate(min);
     updateFechas();
   }, []);
 
-
+  {
-    {/* Validaciones del cuestionario */}
+    /* Validaciones del cuestionario */
-    
+  }
 
   //  Render
   return (
@@ -224,7 +244,7 @@ export default function CasoEspecialForm({
             maxLength={9}
             value={numeroCuenta}
             onChange={(e) => setNumeroCuenta(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && buscarAlumno()}
+            onKeyDown={(e) => e.key === "Enter" && buscarAlumno()}
           />
           <button className="btn btn-info text-white" onClick={buscarAlumno}>
             Buscar
@@ -234,19 +254,23 @@ export default function CasoEspecialForm({
 
       <div className="mb-3">
         <label className="form-label">Nombre</label>
-            <p className="form-control">{alumno.nombre || ''}</p>
+        <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">{alumno.carrera || ''}</p>
+        <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">
+        <p className="form-control" style={{ padding: "1rem 1rem" }}>
-            {alumno.creditos ? parseInt(alumno.creditos) : ''}{' '}
+          {alumno.creditos ? parseInt(alumno.creditos) : ""}{" "}
-            {alumno.creditos ? '%' : ''}
+          {alumno.creditos ? "%" : ""}
         </p>
       </div>
 
@@ -292,8 +316,9 @@ export default function CasoEspecialForm({
 
             <DatePicker
               selected={fechaInicio}
+              onChange={handleFechaInicioChange}
               minDate={minDate}
-                        dateFormat="dd-MM-yyyy"
+              dateFormat="yyyy-MM-dd"
               className="form-control"
               wrapperClassName="flex-grow-1"
               calendarClassName="mi-calendario"
@@ -312,9 +337,10 @@ export default function CasoEspecialForm({
 
             <DatePicker
               selected={fechaFin}
-                        value={fechaFin.toISOString().substring(0,10)}
+              onChange={handleFechaFinChange}
+              value={fechaFin.toISOString().substring(0, 10)}
               minDate={minDate2}
-                        dateFormat="dd-MM-yyyy"
+              dateFormat="yyyy-MM-dd"
               className="form-control"
               wrapperClassName="flex-grow-1"
               calendarClassName="mi-calendario"
@@ -334,7 +360,8 @@ export default function CasoEspecialForm({
             <DatePicker
               selected={fechaNacimiento}
               maxDate={new Date()}
-                        dateFormat="dd-MM-yyyy"
+              onChange={handleFechaNacimientoChange}
+              dateFormat="yyyy-MM-dd"
               className="form-control"
               wrapperClassName="flex-grow-1"
               calendarClassName="mi-calendario"
@@ -391,7 +418,7 @@ export default function CasoEspecialForm({
         </select>
       </div>
 
-        {idStatus === '11' && (
+      {idStatus === "11" && (
         <div className="mb-3">
           <label className="form-label">Motivo</label>
           <select
@@ -406,7 +433,7 @@ export default function CasoEspecialForm({
         </div>
       )}
 
-        {idStatus === '12' && (
+      {idStatus === "12" && (
         <>
           <div className="mb-3">
             <label className="form-label">Institución</label>
@@ -432,29 +459,33 @@ export default function CasoEspecialForm({
         </>
       )}
 
-        <FormGroup className='mb-3'>
+      <FormGroup className="mb-3">
         <FormLabel>Archivo (.zip, .rar)</FormLabel>
         <div
-                className='border p-4 text-center rounded'
+          className="border p-4 text-center rounded"
-                style={{ cursor: 'pointer' }}
+          style={{ cursor: "pointer" }}
-                onClick={() => document.getElementById('fileInput')?.click()}
+          onClick={() => document.getElementById("fileInput")?.click()}
         >
-                <FaUpload size={40} className='mb-2'/>
+          <FaUpload size={40} className="mb-2" />
-                <p className='mb-1'>
+          <p className="mb-1">
-                    {file?.name || 'Arrastra aquí tu archivo o da click aquí para buscar'}
+            {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>
-                <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'
+          id="fileInput"
           type="file"
-                style={{ display: 'none'}}
+          style={{ display: "none" }}
-                onChange={e => setFile(e.target.files ? e.target.files[0] : null)}
+          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
@@ -473,7 +504,7 @@ export default function CasoEspecialForm({
           disabled={mostrarBoton()}
           onClick={() =>
             imprimirWarning(
-                '¿Estás seguro(a) de querer crear un nuevo caso especial?',
+              "¿Estás seguro(a) de querer crear un nuevo caso especial?",
               enviar
             )
           }

src/components/layout/logout.tsx

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