Nuevos estilos en las vistas

src/app/administrador/casos_especiales/page.tsx

@@ -1,12 +1,23 @@
+'use client'
 import TablaCasosEspeciales from "@/components/administrador/tabla-casos-especiales";
 import BotonRegresar from "@/components/boton-regresar";
+import { useEffect, useState } from "react";
 
 export default function CasosEspeciales() {
+    const [admin, setAdmin] = useState<{ idTipoUsuario: number; token?: string } | null>(null);
+    
+    useEffect(() => {
+        const idTipoUsuario = Number(localStorage.getItem('idTipoUsuario') ?? 0);
+        const token = localStorage.getItem('token') ?? undefined;
+        if (!idTipoUsuario) return; // no logueado
+        setAdmin({ idTipoUsuario, token });
+    }, []);
+
     return(
         <section className="container px-2 pb-5">
             <BotonRegresar />
 
-            <TablaCasosEspeciales  />
+            <TablaCasosEspeciales  admin={admin ?? undefined}/>
         </section>
     );
 }

src/components/administrador/archivo.tsx

@@ -147,7 +147,7 @@ export default function Archivo({
     return (
         <div className="mb-4">
             <div className="flex items-center">
-                <h6 className="pr-4 text-lg">Ver {title}</h6>
+                <h5 className="pr-4 text-lg">Ver {title}</h5>
 
                 <div className="pr-4">
                     <a

src/components/administrador/editar-servicio.tsx

@@ -144,7 +144,7 @@ export default function EditarServicio({
 
     //  Cambiar contraseña
     const password = async () => {
-        const data = { servicioid };
+        const data = localStorage.getItem('idServicio');//{ servicioid };
 
         try {
             updateIsLoading(true);
@@ -211,7 +211,7 @@ export default function EditarServicio({
     useEffect(() => {
         const id = Number(localStorage.getItem("idServicio"));
         console.log("ID Servicio para editar:", id);
-        if (!id) router.push("/admin");
+        if (!id) router.push("/administrador");
         else {
             setServicioid(id);
             console.log("idServicio seteado:", id);

src/components/administrador/informacion-caso-especial.tsx

@@ -56,11 +56,100 @@ export default function InformacionCasoEspecial({ alumno }: Props) {
     return (
         <div className="mt-4">
         {/* Título */}
-        <h3 className="text-primary fw-bold mb-3">{alumno.Status?.status}</h3>
+        <h2 className="fw-bold mb-3">{alumno.Status?.status}</h2>
 
         <h4 className="mb-4">Datos personales</h4>
 
+        <div className="mb-3">
+            <label className="form-label fw-semibold">Número de Cuenta: </label>
+            <p className="form-control">{alumno.Usuario?.usuario || ''}</p>
+        </div>
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Nombre:</label>
+            <p className="form-control">{alumno.Usuario?.nombre || ''}</p>
+        </div>
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Carrera:</label>
+            <p className="form-control">{alumno.Carrera?.carrera || ''}</p>
+        </div>
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Créditos:</label>
+            <p className="form-control">{alumno.creditos || ''}</p>
+        </div>
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Correo:</label>
+            <p className="form-control">{alumno.correo || ''}</p>
+        </div>
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Fecha de Nacimiento:</label>
+            <p className="form-control">{fecha(alumno.fechaNacimiento)}</p>
+        </div>
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Direcciòn:</label>
+            <p className="form-control">{alumno.direccion}</p>
+        </div>
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Telèfono:</label>
+            <p className="form-control">{alumno.telefono}</p>
+        </div>
+
+        {alumno.motivo && (
+            <div className="fw-semibold mb-3">
+                <label className="form-label">Motivo:</label>
+                <p className="form-control">{
+                    alumno.motivo === "1" 
+                    ? "Tercera edad" 
+                    : alumno.motivo === "2" 
+                    ? "Capacidades diferentes" 
+                    : ""
+                    }</p>
+            </div>
+        )}
+
+        {alumno.institucion && (
+            <div className="fw-semibold mb-3">
+                <label className="form-label">Instituciòn:</label>
+                <p className="form-control">{alumno.institucion}</p>
+            </div>
+        )}
+
+        {alumno.dependencia && (
+            <div className="fw-semibold mb-3">
+                <label className="form-label">Dependencia:</label>
+                <p className="form-control">{alumno.dependencia}</p>
+            </div>
+        )}
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Fecha Inicio:</label>
+            <p className="form-control">{fecha(alumno.fechaInicio)}</p>
+        </div>
+
+        <div className="fw-semibold mb-3">
+            <label className="form-label">Fecha Fin:</label>
+            <p className="form-control">{fecha(alumno.fechaFin)}</p>
+        </div>
+
+        <div className="fw-semibold mb-5">
+            <label className="form-label">Fecha Registro:</label>
+            <p className="form-control">{fecha(alumno.createdAt)}</p>
+        </div>
+
+
+
+
         {/* Campos */}
+{/*
+
+        // Informacino de antes
+
         <Form.Group as={Row} className="mb-2">
             <Form.Label column sm={3}>Número de Cuenta:</Form.Label>
             <Col sm={9}>
@@ -117,7 +206,7 @@ export default function InformacionCasoEspecial({ alumno }: Props) {
             </Col>
         </Form.Group>
 
-        {alumno.motivo && (
+                {alumno.motivo && (
             <Form.Group as={Row} className="mb-2">
             <Form.Label column sm={3}>Motivo:</Form.Label>
             <Col sm={9}>
@@ -174,6 +263,7 @@ export default function InformacionCasoEspecial({ alumno }: Props) {
             <Form.Control plaintext readOnly value={fecha(alumno.createdAt)} />
             </Col>
         </Form.Group>
+*/}
 
         {(alumno.Status?.idStatus === 11 || alumno.Status?.idStatus === 12) && (
             <div className="text-end mt-4">

src/components/administrador/tabla-casos-especiales.tsx

@@ -8,6 +8,7 @@ import { Button, Col, Form, FormGroup, FormLabel, FormSelect, InputGroup, Row, S
 import ServicioSocialTabla from "../servicio-social-tabla";
 import { ServicioSocialResponse } from "@/types/responses";
 import { FaInfoCircle, FaSchool, FaUser } from "react-icons/fa";
+import { useRouter } from "next/navigation";
 
 interface Admin {
     idTipoUsuario?: number;
@@ -45,6 +46,9 @@ interface CasosEspecialesResponse {
 }
 
 export default function TablaCasosEspeciales({ admin, imprimirError }: Props) {
+    // Para el redirecionamiento
+    const router = useRouter();
+
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);
     const [total, setTotal] = useState(0);
@@ -247,15 +251,27 @@ export default function TablaCasosEspeciales({ admin, imprimirError }: Props) {
                 {/* Tabla 
                 
                 <ServicioSocialTabla />
+
+                onPageChange={onPageChange}
+                columnasResponsable={admin?.idTipoUsuario === 1}
+
                 */}
                 <ServicioSocialTabla 
                     data={data}
                     total={total} 
                     columnaFechaRegistro={true}
-                    columnasResponsable={false}
+                    idTipoUsuario={admin?.idTipoUsuario}
+                    columnasResponsable={admin?.idTipoUsuario === 1}
                     onPageChange={onPageChange} 
                     columnaFechaInicio={false} 
                     columnaFechaFin={false} 
+                    onRowAction={(row, path) => {
+                        try {
+                            router.push(`/responsable/${path}`)
+                        } catch (error) {
+                            console.error('Error al manejar accion de fila', error)
+                        }
+                    }}
                 />
             
         </section>

src/components/administrador/titulo-status.tsx

@@ -14,10 +14,10 @@ export default function TituloStatus({ status }: Props) {
     console.log('idStatus en TituloStatus:', idStatus);
 
     return (
-        <div className="mb-5">
-        {idStatus === 1 && <h3 className="title">Confirmar el pre-registro del alumno</h3>}
-        {idStatus === 4 && <h3 className="title">Término</h3>}
-        {idStatus === 5 && <h3 className="title">Validar el término del alumno</h3>}
+        <div className="mb-4">
+        {idStatus === 1 && <h2 className="fw-bold mt-4">Confirmar el pre-registro del alumno</h2>}
+        {idStatus === 4 && <h2 className="fw-bold mt-4">Término</h2>}
+        {idStatus === 5 && <h2 className="fw-bold mt-4">Validar el término del alumno</h2>}
         </div>
     );
 }

src/components/servicio-social-tabla.tsx

@@ -77,11 +77,19 @@ export default function ServicioSocialTabla({
             localStorage.setItem("idServicio", String(row.idServicio));
         }
 
+        // esta mal esta logica
         if ("idCasoEspecial" in row && row.idCasoEspecial) {
             localStorage.setItem("idCasoEspecial", String(row.idCasoEspecial));
         }
 
-        router.push("/administrador/servicio");
+        if ( row.idServicio ) {
+            router.push("/administrador/servicio");
+        } else if ("idCasoEspecial" in row && row.idCasoEspecial) {
+            router.push('/administrador/casos_especiales/caso_especial')
+        }
+        // Hacer validacion para saber que id fue y redireccionar
+        //router.push("/administrador/servicio");
+        //router.push('/administrador/casos_especiales/caso_especial')
 
         } else if (
             row.idServicio ||