new structure

app/AT/ActivosMantenimiento/page.tsx

@@ -1,7 +1,7 @@
 "use client";
+import SearchUser from "@/app/Components/SearchUser/searchUser";
+import Toggle from "@/app/Components/Toggle/Toggle";
 import { useState } from "react";
-import SearchUser from "../Components/SearchUser/searchUser";
-import Toggle from "../Components/Toggle/Toggle";
 
 export default function Page() {
   const [tiempo, setTiempo] = useState("");

app/AT/AgregarTiempo/page.tsx

@@ -1,8 +1,8 @@
-import Information from "../Components/Information/information";
-import Receipt from "../Components/Receipt/Receipt";
-import SearchUser from "../Components/SearchUser/searchUser";
 
+import SearchUser from '@/app/Components/SearchUser/searchUser';
 import './addTime.css'
+import Information from '@/app/Components/Information/information';
+import Receipt from '@/app/Components/Receipt/Receipt';
 
 export default function Page() {
   return (

app/AT/Alta/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 import { useState } from "react";
-import "../globals.css";
-import StepNavigator from "../Components/StepNavigator/StepNavigator";
+import StepNavigator from "@/app/Components/StepNavigator/StepNavigator";
 
 export default function Page() {
   const [step, setStep] = useState(1);

app/AT/AsignacionEquipo/page.tsx

@@ -1,7 +1,7 @@
 "use client";
+import SearchUser from "@/app/Components/SearchUser/searchUser";
+import Toggle from "@/app/Components/Toggle/Toggle";
 import { useState } from "react";
-import SearchUser from "../Components/SearchUser/searchUser";
-import Toggle from "../Components/Toggle/Toggle";
 // Assuming you will create this new component
 
 export default function Page() {

app/AT/AsignacionMesas/page.tsx

@@ -1,7 +1,7 @@
 "use client";
+import SearchUser from "@/app/Components/SearchUser/searchUser";
+import Toggle from "@/app/Components/Toggle/Toggle";
 import { useState } from "react";
-import SearchUser from "../Components/SearchUser/searchUser";
-import Toggle from "../Components/Toggle/Toggle";
 // Assuming you will create this new component
 
 export default function Page() {

app/AT/BitacoraSanciones/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import SearchDate from "../Components/SearchDate/SearchDate";
-import SearchUser from "../Components/SearchUser/searchUser";
-import Toggle from "../Components/Toggle/Toggle";
 import styles from "./Page.module.css"; // importamos el css
-import Information from "../Components/Information/information";
+import Toggle from "@/app/Components/Toggle/Toggle";
+import SearchDate from "@/app/Components/SearchDate/SearchDate";
+import Information from "@/app/Components/Information/information";
+import SearchUser from "@/app/Components/SearchUser/searchUser";
 
 export default function Page() {
   const [usuario_sanciones] = useState([
@@ -163,7 +163,7 @@ export default function Page() {
             content: (
               <>
                 <div className={styles.tableContainer}>
-                  <SearchUser></SearchUser>
+                  <SearchUser/>
                   <Information NoCuenta="id cuenta" Nombre="id nombre" />
                   <table className={styles.machineTable}>
                     <thead>

app/AT/CambiarPass/page.tsx

@@ -1,5 +1,4 @@
-import ChangePassword from "../Components/ChangePassword/changePassword";
-import SearchUser from "../Components/SearchUser/searchUser";
+import ChangePassword from "../../Components/ChangePassword/changePassword";
 
 export default function Page() {
   return (

app/AT/Impresiones/page.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import SearchUser from "../Components/SearchUser/searchUser";
-import Receipt from "../Components/Receipt/Receipt";
-import Impressions from "../Components/Impressions/impressions";
-import Toggle from "../Components/Toggle/Toggle";
+import SearchUser from "../../Components/SearchUser/searchUser";
+import Receipt from "../../Components/Receipt/Receipt";
+import Impressions from "../../Components/Impressions/impressions";
+import Toggle from "../../Components/Toggle/Toggle";
 
 import "@/app/globals.css";
-import Information from "../Components/Information/information";
+import Information from "../../Components/Information/information";
 
 export default function Page() {
   return (

app/AT/InformacionEquipo/page.tsx

@@ -1,5 +1,6 @@
-import ProgramSelector from "../Components/ProgramSelector/ProgramSelector";
-import Toggle from "../Components/Toggle/Toggle";
+import ProgramSelector from "@/app/Components/ProgramSelector/ProgramSelector";
+import Toggle from "@/app/Components/Toggle/Toggle";
+
 import "./informacionequipo.css";
 
 export default function Page() {
@@ -41,7 +42,6 @@ export default function Page() {
           {
             key: "2",
             label: "Programa por equipo",
-            // ✅ Ahora pasamos titulo y opcion como props al componente
             content: (
               <ProgramSelector
                 titulo="Programas de Equipo"
@@ -52,7 +52,6 @@ export default function Page() {
           {
             key: "3",
             label: "Programa por sala",
-            // ✅ Aquí también pasamos un array válido de strings
             content: (
               <ProgramSelector
                 titulo="Programas por Sala"

app/AT/Inscripciones/page.tsx

@@ -1,11 +1,12 @@
 "use client";
-import Information from "../Components/Information/information";
-import Receipt from "../Components/Receipt/Receipt";
-import SearchUser from "../Components/SearchUser/searchUser";
-import Selection from "../Components/Selection/Selection";
-import StepNavigator from "../Components/StepNavigator/StepNavigator";
 import "./inscriptions.css";
 
+import SearchUser from "@/app/Components/SearchUser/searchUser";
+import Information from "@/app/Components/Information/information";
+import StepNavigator from "@/app/Components/StepNavigator/StepNavigator";
+import Receipt from "@/app/Components/Receipt/Receipt";
+import Selection from "@/app/Components/Selection/Selection";
+
 export default function Page() {
   return (
     <section className="containerSection">

app/AT/Inscritos/page.tsx

@@ -1,4 +1,3 @@
-import SearchUser from "../Components/SearchUser/searchUser";
 
 export default function Page() {
   return (

app/AT/Mensajes/page.tsx

@@ -1,6 +1,7 @@
 "use client";
-import Toggle from "../Components/Toggle/Toggle";
-import EnviarMensaje from "../Components/EviarMensaje/EnviarMensaje"; // 👈 importa bien
+
+import EnviarMensaje from "@/app/Components/EviarMensaje/EnviarMensaje";
+import Toggle from "@/app/Components/Toggle/Toggle";
 
 export default function Page() {
   return (

app/AT/Programas/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useState } from "react";
-import SearchUser from "../Components/SearchUser/searchUser";
+import SearchUser from "../../Components/SearchUser/searchUser";
 import styleprograms from "./programas.module.css";
 
 export default function Page() {

app/AT/QuitarSancion/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useState } from "react";
-import SearchUser from "../Components/SearchUser/searchUser";
 import styles from "./Page.module.css"; // importamos el css
+import SearchUser from "@/app/Components/SearchUser/searchUser";
 
 export default function Page() {
   const [sanciones] = useState([

app/AT/Recibo/page.tsx

@@ -2,8 +2,9 @@
 
 import { useState } from "react";
 import styles from "./Page.module.css"; // importamos el css
-import SearchDateBetween from "../Components/SearchDateBetween/SearchDateBetween";
-import Toggle from "../Components/Toggle/Toggle";
+import Toggle from "@/app/Components/Toggle/Toggle";
+import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
+
 export default function Page() {
   const [reportes] = useState([
     {

app/AT/layout.tsx

@@ -0,0 +1,5 @@
+import { PrivateRoute } from "../Routes/PrivateRoute";
+
+export default function PrivateLayout({ children }: { children: React.ReactNode }) {
+  return <PrivateRoute>{children}</PrivateRoute>;
+}

app/Components/BarNavigation/BarNavigation.tsx

@@ -26,13 +26,13 @@ function BarNavigation() {
         <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
           <span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
           <ul className="containerLinks" onClick={toggleMenu}>
-            <Link href="/Alta" className="links">
+            <Link href="/AT/Alta" className="links">
               <li>Alta</li>
             </Link>
-            <Link href="/AgregarTiempo" className="links">
+            <Link href="/AT/AgregarTiempo" className="links">
               <li>Agregar Tiempo</li>
             </Link>
-            <Link href="/Inscripciones" className="links">
+            <Link href="/AT/Inscripciones" className="links">
               <li>Inscripciones</li>
             </Link>
           </ul>
@@ -41,16 +41,16 @@ function BarNavigation() {
         <li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
           <span onClick={() => toggleSubMenu(1)}>Servicios</span>
           <ul onClick={toggleMenu}>
-            <Link href="/Impresiones" className="links">
+            <Link href="/AT/Impresiones" className="links">
               <li>Impresiones y Ploteo</li>
             </Link>
-            <Link href="/AsignacionMesas" className="links">
+            <Link href="/AT/AsignacionMesas" className="links">
               <li>Asignacion de Mesas</li>
             </Link>
-            <Link href="/AsignacionEquipo" className="links">
+            <Link href="/AT/AsignacionEquipo" className="links">
               <li>Asignacion de Equipos</li>
             </Link>
-            <Link href="/Monitor" className="links">
+            <Link href="/AT/Monitor" className="links">
               <li>Monitor</li>
             </Link>
           </ul>
@@ -59,16 +59,16 @@ function BarNavigation() {
         <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
           <span onClick={() => toggleSubMenu(2)}>Equipo</span>
           <ul onClick={toggleMenu}>
-            <Link href="/InformacionEquipo" className="links">
+            <Link href="/AT/InformacionEquipo" className="links">
               <li>Informacion de Equipos</li>
             </Link>
-            <Link href="/ActivosMantenimiento" className="links">
+            <Link href="/AT/ActivosMantenimiento" className="links">
               <li>Activos y en Mantenimiento</li>
             </Link>
-            <Link href="/Mensajes" className="links">
+            <Link href="/AT/Mensajes" className="links">
               <li>Mensajes</li>
             </Link>
-            <Link href="/Programas" className="links">
+            <Link href="/AT/Programas" className="links">
               <li>Programas</li>
             </Link>
           </ul>
@@ -77,24 +77,24 @@ function BarNavigation() {
         <li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
           <span onClick={() => toggleSubMenu(3)}>Reportes</span>
           <ul onClick={toggleMenu}>
-            <Link href="/Recibo" className="links">
+            <Link href="/AT/Recibo" className="links">
               <li>Recibo</li>
             </Link>
-            <Link href="/Inscritos" className="links">
+            <Link href="/AT/Inscritos" className="links">
               <li>Inscritos</li>
             </Link>
-            <Link href="/BitacoraSanciones" className="links">
+            <Link href="/AT/BitacoraSanciones" className="links">
               <li>Bitacora y sanciones</li>
             </Link>
           </ul>
         </li>
         <li className="subMenu" onClick={toggleMenu}>
-          <Link href="/QuitarSancion" className="links">
+          <Link href="/AT/QuitarSancion" className="links">
             Quitar sancion
           </Link>
         </li>
         <li className="subMenu" onClick={toggleMenu}>
-          <Link href="CambiarPass" className="links">
+          <Link href="/AT/CambiarPass" className="links">
             Cambiar contraseña
           </Link>
         </li>

app/Components/Footer/Footer.module.css

@@ -6,7 +6,7 @@
     width: 20%;
     height: 100%;
     min-width: 300px;
-    background: linear-gradient(to left, #003d79,#d59f0f);
+    background: linear-gradient(to left, #003d79, #d59f0f);
     transform: skew(45deg);
     z-index: 1;
 }
@@ -19,7 +19,19 @@
     width: 20%;
     height: 100%;
     min-width: 300px;
-    background: linear-gradient(to right, #003d79,#d59f0f);
+    background: linear-gradient(to right, #003d79, #d59f0f);
     transform: skew(-45deg);
     z-index: 1;
 }
+
+@media(max-width:800px) {
+    .yellowPart {
+        width: 5%;
+        left: -150px;
+    }
+
+    .yellowPartOpuest {
+        width: 5%;
+        right: -150px;
+    }
+}

app/Routes/LoginRedirect.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useAuth } from "../lib/useAuth";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export const LoginRedirect = ({ children }: { children: React.ReactNode }) => {
+    const { loading, authenticated } = useAuth();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (!loading && authenticated) {
+            router.push("/AT/Impresiones");
+        }
+    }, [loading, authenticated, router]);
+
+    if (loading) return <p>Cargando...</p>;
+
+    return !authenticated ? <>{children}</> : null;
+};
+//IO

app/Routes/PrivateRoute.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useAuth } from "../lib/useAuth";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
+  const { loading, authenticated } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !authenticated) {
+      router.push("/");
+    }
+  }, [loading, authenticated, router]);
+
+  if (loading) return <p>Cargando...</p>;
+
+  return authenticated ? <>{children}</> : null;
+};

app/globals.css

@@ -359,7 +359,7 @@ table tr {
 }
 
 .messageBox {
-  position: relative;
+  position: absolute;
   padding: 0.5rem 1.25rem;
   border-radius: 4px;
   font-weight: bold;
@@ -367,6 +367,9 @@ table tr {
   text-align: center;
   opacity: 1;
   z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100%;
 }
 
 .messageBox.hidden {
@@ -438,6 +441,12 @@ table tr {
   .containerSection {
     align-items: center;
   }
+
+  .centerGrid {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 @media (max-height: 960px) {

app/lib/useAuth.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { envConfig } from "./config";
+
+export const useAuth = () => {
+  const [loading, setLoading] = useState(true);
+  const [authenticated, setAuthenticated] = useState(false);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = localStorage.getItem('token');
+
+      if (!token) {
+        setAuthenticated(false);
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const res = await axios.get(`${envConfig.apiUrl}/user/validate-token`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+
+        const isValid = res.data.valid;
+
+        if (isValid) {
+          setAuthenticated(true);
+        } else {
+          setAuthenticated(false);
+          localStorage.removeItem('token');
+          localStorage.removeItem('session');
+        }
+      } catch (err) {
+        setAuthenticated(false);
+        localStorage.removeItem('token');
+        localStorage.removeItem('session');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkAuth();
+  }, []);
+
+  return { loading, authenticated };
+};
+//IO

app/page.tsx

@@ -1,8 +1,11 @@
 import Login from "./Components/Login/Login";
+import { LoginRedirect } from "./Routes/LoginRedirect";
 
 export default function Home() {
   return (
-    <Login />
+    <LoginRedirect>
+      <Login />
+    </LoginRedirect>
   );
 }
 //IO