Fix mering issues

Author: AnderssonProgramming

images/Screenshot 2025-03-17 203721.png

@@ -9,14 +9,15 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.8.4",
     "d3": "^7.9.0",
-    "jwt-decode": "^4.0.0",
+    "date-fns": "^4.1.0",
     "framer-motion": "^12.6.2",
+    "jwt-decode": "^4.0.0",
     "react": "^19.0.0",
-    "date-fns": "^4.1.0",
+    "react-datepicker": "^8.2.1",
     "react-day-picker": "^9.6.3",
     "react-dom": "^19.0.0",
     "react-native": "^0.78.1",
-    "react-router-dom": "^7.4.0",
+    "react-router-dom": "^7.4.1",
     "react-scripts": "^5.0.1",
     "styled-components": "^6.1.16",
     "styled-system": "^5.1.5",

package-lock.json

@@ -126,6 +126,13 @@ ul {
   justify-content: flex-end;
 }
 
+.content .panel .header .user-info button {
+  background: transparent;
+  border: none;
+  color: var(--variable-collection-current-color);
+  cursor: pointer;
+}
+
 .content .panel .header .user-info span {
   font-size: 18px;
 }

package.json

@@ -12,6 +12,7 @@ import {
 import { ReactComponent as House } from "./assets/icons/house-user_11269953 1.svg";
 import { ReactComponent as Room } from "./assets/icons/workshop_14672030 1.svg";
 import { ReactComponent as UserIcon } from "./assets/icons/User.svg";
+import { ReactComponent as Door } from "./assets/icons/logOut 1.svg";
 import { consultarUsuarioPorCorreo } from "./api/usuario";
 import LoginPage from "./pages/Login/LoginPage";
 import Home from "./pages/Home/Home";
@@ -87,14 +88,13 @@ const Header = ({ user, onLogout }) => {
           alt="Avatar de usuario"
         />
         <span>{user.nombre} {user.apellido}</span>
-        <LogoutIcon
-          src="https://cdn.builder.io/api/v1/image/assets/TEMP/1954f6c7c642021490080ffd4c81bc9798bf0beb?placeholderIfAbsent=true"
-          alt="Logout"
+        <button className="log-out"
           onClick={() => {
             onLogout();
             navigate("/");
-          }}
-        />
+          }}>
+            <Door />
+        </button>
       </div>
     </div>
   );
@@ -107,13 +107,6 @@ const UserAvatar = styled.img`
   border-radius: 50%;
 `;
 
-const LogoutIcon = styled.img`
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  fill: var(--variable-collection-current-color);
-`;
-
 const obtenerCorreoDesdeToken = (token) => {
   try {
     const decoded = jwtDecode(token);
@@ -200,7 +193,7 @@ function AppRoutes({ user, setUser }) {
                       </>
                     ) : (
                       <>
-                        <Route path="/home" element={<Home />} />
+                        <Route path="/home" element={<Home usuario={user}/>} />
                         <Route path="*" element={<Navigate to="/home" />} />
                       </>
                     )}

src/App.css

@@ -8,6 +8,19 @@ const api = axios.create({
     }
 });
 
+// Interceptor para agregar el token automáticamente
+api.interceptors.request.use(
+    (config) => {
+        const token = localStorage.getItem("token");
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    },
+    (error) => Promise.reject(error)
+);
+
+
 // Interceptor para manejar errores globalmente
 api.interceptors.response.use(
     response => response,