Modificaciones en la vista

src/app/administrador/servicio/editar/page.tsx

@@ -46,7 +46,7 @@ export default function Servicio() {
     }, []);
 
     return (
-        <section>
+        <section className="container">
             <BotonRegresar />
             {/* <EditarServicio admin={}/> */}
             <EditarServicio 

src/app/administrador/servicio/page.tsx

@@ -239,7 +239,7 @@ export default function Servicio() {
         <section className="container px-2 pb-6">
         <BotonRegresar />
 
-        <h3 className="title">{datos.Status?.status}</h3>
+        <h3 className="container fw-bold title">{datos.Status?.status}</h3>
         
         <InformacionServicio 
             datos={datos}
@@ -265,7 +265,7 @@ export default function Servicio() {
 
         {datos.cartaTermino && (
             <Archivo 
-                title={datos.cartaTermino ? "carta de término" : ""}
+                title={datos.cartaTermino ? "carta de termino" : ""}
                 datos={datos}
                 admin={admin}
                 imprimirMensaje={imprimirMensaje}
@@ -287,7 +287,7 @@ export default function Servicio() {
             />
         )}
 
-        <div>
+        <div className='container'>
             {datos.idCuestionarioPrograma || datos.idCuestionarioPrograma2 ? (
             <p className="my-4">
                 <strong>Cuenta con cuestionario de programa resuelto.</strong>
@@ -373,7 +373,9 @@ export default function Servicio() {
 
 */}
 
-        <BotonRegresar />
+        <div className='container mt-4'>
+            <BotonRegresar />
+        </div>
 
         {isLoading && (
             <div className="loading-overlay">

src/components/administrador/archivo.tsx

@@ -145,13 +145,25 @@ export default function Archivo({
         axiosInstance.put(`/servicio/rechazar_informe`, data);
 
     return (
-        <div className="mb-4">
+        <div className="container mb-4">
             <div className="flex items-center">
-                <h5 className="pr-4 text-lg">Ver {title}</h5>
-
-                <div className="pr-4">
+                <h5 className="pr-4 text-lg">
+                    Ver {title}                     
                     <a
-                        className="btn btn-link btn-light"
+                        className="btn btn-link btn-light text-decoration-none ms-3 text-morado"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={`https://drive.google.com/file/d/${archivo()}/view?usp=sharing`}
+                        style={{ background: '#eae4f8'}}
+                    >
+                        Ver
+                    </a>
+                </h5>
+
+{/*
+<div className="pr-4">
+                    <a
+                        className="btn btn-link btn-light text-decoration-none"
                         target="_blank"
                         rel="noopener noreferrer"
                         href={`https://drive.google.com/file/d/${archivo()}/view?usp=sharing`}
@@ -159,6 +171,7 @@ export default function Archivo({
                         Ver
                     </a>
                 </div>
+*/}
 
                 {((datos.Status?.idStatus === 1 && title === "carta de aceptación") ||
                 (datos.Status?.idStatus === 5 &&

src/components/administrador/cancelar.servicio.tsx

@@ -92,49 +92,49 @@ export default function CancelarServicio({
     };
 
     return (
-        <div className="mt-5 space-y-4">
-        {/* Botón de Cancelar */}
-        <button
-            disabled={datos.Status?.idStatus === 6 || datos.Status?.idStatus === 10}
-            onClick={updateCancelar}
-            className={`px-4 py-2 rounded text-white ${
-            datos.Status?.idStatus === 6 || datos.Status?.idStatus === 10
-                ? "bg-gray-400 cursor-not-allowed"
-                : "bg-red-600 hover:bg-red-700"
-            }`}
-        >
-            Cancelar
-        </button>
-
-        {/* Área de mensaje */}
-        {cancelar && (
-            <div className="space-y-2">
-            <label className="block font-medium">Razón de la cancelación:</label>
-            <textarea
-                maxLength={500}
-                value={mensajeCancelar}
-                onChange={(e) => setMensajeCancelar(e.target.value)}
-                className="border rounded p-2 w-full"
-            />
-
+        <div className="container mt-5 space-y-4">
+            {/* Botón de Cancelar */}
             <button
-                disabled={!mensajeCancelar}
-                onClick={() =>
-                imprimirWarning(
-                    "¿Seguro(a) que quiere cancelar este servicio?",
-                    cancelarServicio
-                )
-                }
-                className={`px-4 py-2 rounded text-white ${
-                !mensajeCancelar
+                disabled={datos.Status?.idStatus === 6 || datos.Status?.idStatus === 10}
+                onClick={updateCancelar}
+                className={`px-4 py-2 bg-danger rounded text-white${
+                datos.Status?.idStatus === 6 || datos.Status?.idStatus === 10
                     ? "bg-gray-400 cursor-not-allowed"
-                    : "bg-blue-600 hover:bg-blue-700"
+                    : "bg-red-600 hover:bg-red-700"
                 }`}
             >
-                Cancelar servicio
+                Cancelar
             </button>
-            </div>
-        )}
+
+            {/* Área de mensaje */}
+            {cancelar && (
+                <div className="space-y-2 mt-3">
+                    <label className="block font-medium mb-2">Razón de la cancelación:</label>
+                    <textarea
+                        maxLength={500}
+                        value={mensajeCancelar}
+                        onChange={(e) => setMensajeCancelar(e.target.value)}
+                        className="form-control border rounded p-2 w-full"
+                    />
+
+                    <button
+                        disabled={!mensajeCancelar}
+                        onClick={() =>
+                        imprimirWarning(
+                            "¿Seguro(a) que quiere cancelar este servicio?",
+                            cancelarServicio
+                        )
+                        }
+                        className={`bg-morado mt-3 mb-4 px-4 py-2 rounded text-white ${
+                        !mensajeCancelar
+                            ? "bg-gray-400 cursor-not-allowed"
+                            : "bg-blue-600 hover:bg-blue-700"
+                        }`}
+                    >
+                        Cancelar servicio
+                    </button>
+                </div>
+            )}
         </div>
     );
 }

src/components/administrador/confirmar-servicio.tsx

@@ -119,7 +119,7 @@ export default function ConfirmarServicio({
     };
 
     return (
-        <div className="space-y-4">
+        <div className="container space-y-4">
         {datos.Status?.idStatus === 5 && datos.Programa?.acatlan && (
             <div className="flex items-center space-x-2">
             <input

src/components/administrador/editar-servicio.tsx

@@ -8,6 +8,8 @@ import validator from "validator";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { useRouter } from "next/navigation";
+import { Col, FormGroup, FormLabel, InputGroup } from "react-bootstrap";
+import { FaRegCalendarAlt, FaUpload } from "react-icons/fa";
 
 interface Servicio {
     Status: { idStatus?: number };
@@ -87,7 +89,7 @@ export default function EditarServicio({
 
             // Redirección si el estado no es válido
             if (data.Status.idStatus === 6 || data.Status.idStatus === 10) {
-                router.push("/admin/servicio");
+                router.push("/administrador/servicio");
             }
 
             setFechaInicio(new Date(data.fechaInicio));
@@ -144,15 +146,20 @@ export default function EditarServicio({
 
     //  Cambiar contraseña
     const password = async () => {
-        const data = localStorage.getItem('idServicio');//{ servicioid };
+        const data = { servicioid };
+
+        console.log("Id del servicio para nueva password", data);
+        console.log("Id servicio entrando a la info", data.servicioid)
 
         try {
+            console.log("Si entro par mandar la solicitud")
             updateIsLoading(true);
-            const res = await axiosInstance.put(`/usuario/new_password_alumno`, data);
+            const res = await axiosInstance.put(`/usuario/new_password_alumno`, { idServicio: servicioid });
             imprimirMensaje(res.data.message);
             updateIsLoading(false);
-            router.push("/admin");
+            router.push("/administrador");
         } catch (err: unknown) {
+            console.log("No esta mandando la solicitud")
             updateIsLoading(false);
             if (isAxiosError(err)) imprimirError(err.response?.data || err.message);
             else if (err instanceof Error) imprimirError(err.message);
@@ -223,143 +230,229 @@ export default function EditarServicio({
 
     return (
         <div className="space-y-4 mt-6">
-        <h3 className="text-2xl font-semibold mb-4">
-            Editar información del alumno
-        </h3>
+            <h2 className="fw-bold mb-4">
+                Editar información del alumno
+            </h2>
 
-        {/* Correo */}
-        <div>
-            <label className="block font-medium mb-1">
-            Correo electrónico del alumno
-            </label>
-            <input
-            type="email"
-            placeholder={servicio.correo || "Correo"}
-            value={correo}
-            onChange={(e) => setCorreo(e.target.value)}
-            className="border rounded p-2 w-full"
-            />
-        </div>
-
-        {/* Fecha inicio */}
-        <div>
-            <label className="block font-medium mb-1">Fecha de inicio</label>
-            <DatePicker
-                selected={fechaFin}
-                onChange={(date: Date | null) => {
-                    if (date) setFechaFin(date);
-                }}
-                minDate={fechaInicio}
-                className="border rounded p-2 w-full"
-            />
-        </div>
-
-        {/* Fecha fin */}
-        <div>
-            <label className="block font-medium mb-1">Fecha de fin</label>
-            <DatePicker
-                selected={fechaInicio}
-                onChange={(date: Date | null) => {
-                    if (date) setFechaInicio(date);
-                }}
-                minDate={new Date("2020-01-01")}
-                className="border rounded p-2 w-full"
-            />
-        </div>
-
-        {/* Dirección */}
-        {servicio.direccion && (
-            <div>
-            <label className="block font-medium mb-1">Dirección</label>
-            <input
-                type="text"
-                placeholder={servicio.direccion}
-                value={direccion}
-                onChange={(e) => setDireccion(e.target.value)}
-                className="border rounded p-2 w-full"
-            />
+            {/* Correo */}
+            <div className="mb-3">
+                <label className="form-label fw-semibold block font-medium mb-1">
+                    Correo electrónico del alumno
+                </label>
+                <input
+                type="email"
+                placeholder={servicio.correo || "Correo"}
+                value={correo}
+                onChange={(e) => setCorreo(e.target.value)}
+                className="form-control border rounded p-2 w-full"
+                />
             </div>
-        )}
 
-        {/* Teléfono */}
-        {servicio.telefono && (
-            <div>
-            <label className="block font-medium mb-1">Teléfono</label>
-            <input
-                type="tel"
-                maxLength={10}
-                placeholder={servicio.telefono}
-                value={telefono}
-                onChange={(e) => setTelefono(e.target.value)}
-                className="border rounded p-2 w-full"
-            />
+            {/* Fecha inicio */}
+            <Col>
+                <FormGroup>
+                    <FormLabel>Fecha de inicio</FormLabel>
+                    <InputGroup>
+                        <InputGroup.Text>
+                            <FaRegCalendarAlt />
+                        </InputGroup.Text>
+                        <DatePicker 
+                            onChange={(date: Date | null ) => {
+                                if (date) setFechaInicio(date);
+                            }}
+                            placeholderText="Selecciona una fecha de inicio"
+                            minDate={fechaInicio}
+                            dateFormat={'dd-MM-yyyy'}
+                            className="form-control"
+                            wrapperClassName="flex-grow-1"
+                            calendarClassName="mi-calendario"
+                        />
+                    </InputGroup>
+                </FormGroup>
+            </Col>
+
+            <Col>
+                <FormGroup>
+                    <FormLabel>Fecha de fin</FormLabel>
+                    <InputGroup>
+                            <InputGroup.Text>
+                                <FaRegCalendarAlt />
+                            </InputGroup.Text>
+                            <DatePicker 
+                                onChange={(date: Date | null) => {
+                                    if (date) setFechaFin(date);
+                                }}
+                                placeholderText="Selecciona una fecha de fin"
+                                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 fw-semibold block font-medium mb-1">Fecha de inicio</label>
+                <DatePicker
+                    selected={fechaFin}
+                    onChange={(date: Date | null) => {
+                        if (date) setFechaFin(date);
+                    }}
+                    minDate={fechaInicio}
+                    className="border rounded p-2 w-full"
+                />
             </div>
-        )}
 
-        {/* Fecha nacimiento */}
-        {servicio.fechaNacimiento && (
-            <div>
-            <label className="block font-medium mb-1">
-                Fecha de nacimiento
-            </label>
-            <DatePicker
-                selected={fechaFin}
-                onChange={(date: Date | null) => {
-                    if (date) setFechaFin(date);
-                }}
-                minDate={fechaInicio}
-                className="border rounded p-2 w-full"
-            />
+            {/* Fecha fin */}
+            <div className="mb-3">
+                <label className="form-labeñ fw-semibold block font-medium mb-1">Fecha de fin</label>
+                <DatePicker
+                    selected={fechaInicio}
+                    onChange={(date: Date | null) => {
+                        if (date) setFechaInicio(date);
+                    }}
+                    minDate={new Date("2020-01-01")}
+                    className="border rounded p-2 w-full"
+                />
             </div>
-        )}
 
-        {/* Subir archivos */}
-        <div className="space-y-2">
-            <label className="block font-medium mb-1">Carta de aceptación</label>
-            <input
-            type="file"
-            accept="application/pdf"
-            onChange={(e) =>
-                setCartaAceptacion(e.target.files ? e.target.files[0] : null)
-            }
-            className="border p-2 rounded w-full"
-            />
-        </div>
+            {/* Dirección */}
+            {servicio.direccion && (
+                <div className="mb-3">
+                <label className="form-label fw-semibold block font-medium mb-1">Dirección</label>
+                <input
+                    type="text"
+                    placeholder={servicio.direccion}
+                    value={direccion}
+                    onChange={(e) => setDireccion(e.target.value)}
+                    className="form-control border rounded p-2 w-full"
+                />
+                </div>
+            )}
 
-        {/* Botones */}
-        <div className="mt-6 flex gap-4">
-            <button
-            disabled={mostrar()}
-            onClick={() =>
-                imprimirWarning(
-                "¿Seguro(a) que quiere actualizar estos datos?",
-                actualizar
-                )
-            }
-            className={`px-4 py-2 rounded text-white ${
-                mostrar()
-                ? "bg-gray-400 cursor-not-allowed"
-                : "bg-blue-600 hover:bg-blue-700"
-            }`}
-            >
-            Actualizar Datos
-            </button>
+            {/* Teléfono */}
+            {servicio.telefono && (
+                <div className="mb-3">
+                <label className="form-label fw-semibold block font-medium mb-1">Teléfono</label>
+                <input
+                    type="tel"
+                    maxLength={10}
+                    placeholder={servicio.telefono}
+                    value={telefono}
+                    onChange={(e) => setTelefono(e.target.value)}
+                    className="form-control border rounded p-2 w-full"
+                />
+                </div>
+            )}
 
-            <button
-            disabled={
-                servicio.Status.idStatus === 1 || servicio.Status.idStatus === 7
-            }
-            onClick={() =>
-                imprimirWarning(
-                "¿Seguro(a) que quieres cambiar/reenviar la contraseña de este alumno?",
-                password
-                )
-            }
-            className="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white"
-            >
-            Cambiar/Reenviar contraseña
-            </button>
-        </div>
+            {servicio.fechaNacimiento && (
+                <Col>
+                    <FormGroup>
+                        <FormLabel>Fecha de nacimiento</FormLabel>
+                        <InputGroup>
+                            <InputGroup.Text>
+                                
+                            </InputGroup.Text>
+                        </InputGroup>
+                    </FormGroup>
+                </Col>
+            )}
+
+            {/* Fecha nacimiento */}
+            {servicio.fechaNacimiento && (
+                <div className="mb-3">
+                <label className="form-label fw-semibold block font-medium mb-1">
+                    Fecha de nacimiento
+                </label>
+                <DatePicker
+                    selected={fechaFin}
+                    onChange={(date: Date | null) => {
+                        if (date) setFechaFin(date);
+                    }}
+                    minDate={fechaInicio}
+                    className="border rounded p-2 w-full"
+                />
+                </div>
+            )}
+
+            <FormGroup className="mb-4">
+                <FormLabel>Carta de aceptaciòn</FormLabel>
+
+                <div
+                    className="border p-4 text-center rounded"
+                    style={{ cursor: "pointer" }}
+                    onClick={() => document.getElementById("application/pdf")?.click()}
+                >
+                    <FaUpload size={40} className="mb-2"/>
+                    <p className="mb-1">
+                        {cartaAceptacion?.name || 'Arrastra aqui tu archivo o da click aqui para buscar'}
+                    </p>
+                    <p className="is-size-6">Tamaño màximo 20MB</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="pdfInput"
+                    type="file"
+                    accept=".pdf"
+                    style={{ display: 'none'}}
+                    onChange={(e) => {
+                        setCartaAceptacion(e.target.files ? e.target.files[0] : null)
+                    }}
+                    />
+            </FormGroup>
+
+
+            {/* Subir archivos */}
+{/*
+            <div className="space-y-2">
+                <label className="block font-medium mb-1">Carta de aceptación</label>
+                <input
+                type="file"
+                accept="application/pdf"
+                onChange={(e) =>
+                    setCartaAceptacion(e.target.files ? e.target.files[0] : null)
+                }
+                className="border p-2 rounded w-full"
+                />
+            </div>
+*/}
+
+            {/* Botones */}
+            <div className="mt-6 flex gap-4 mb-5">
+                <button
+                disabled={mostrar()}
+                onClick={() =>
+                    imprimirWarning(
+                    "¿Seguro(a) que quiere actualizar estos datos?",
+                    actualizar
+                    )
+                }
+                className={`me-2 px-4 py-2 rounded text-white ${
+                    mostrar()
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-blue-600 hover:bg-blue-700"
+                }`}
+                >
+                Actualizar Datos
+                </button>
+
+                <button
+                disabled={
+                    servicio.Status.idStatus === 1 || servicio.Status.idStatus === 7
+                }
+                onClick={() =>
+                    imprimirWarning(
+                    "¿Seguro(a) que quieres cambiar/reenviar la contraseña de este alumno?",
+                    password
+                    )
+                }
+                className="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white"
+                >
+                Cambiar/Reenviar contraseña
+                </button>
+            </div>
         </div>
     );
 }

src/components/administrador/informacion-servicio.tsx

@@ -132,7 +132,7 @@ export default function InformacionServicio({ admin, imprimirError, updateIsLoad
     return (
         <div className="container mv-5">
             <div className="mb-5">
-                <h3 className="fw-bold mb-4">Datos del programa</h3>
+                <h3 className="mt-3 mb-2">Datos del programa</h3>
 
                 <div className="mb-3">
                     <label className="form-label fw-semibold">Institucion:</label>