", methods=["PUT"])
+@jwt_required()
+def update_trip_image(trip_id):
+ user = get_current_user()
+
+ # Verificamos que el usuario pertenezca a este viaje
+ validate_user_trip(user, trip_id)
+
+ data = get_json_payload()
+ new_image_url = data.get("image_url", "").strip()
+
+ trip = db.session.get(Trip, trip_id)
+ if not trip:
+ raise APIException("Viaje no encontrado", status_code=404)
+
+ # Actualizamos la URL y guardamos
+ trip.image_url = new_image_url
+ db.session.commit()
+
+ return jsonify({
+ "message": "Imagen de portada actualizada correctamente",
+ "image_url": trip.image_url
+ }), 200
+
+# ENDPOINT QUE MODIFICA LOS DATOS DEL USUARIO
+# 1º: recibe el JWT y saca el usuario
+
+# 2º: debe recibir el tipo de modificacion (perfil o contraseña) y los datos a modificar
+
+# 3º: modifica los datos necesarios
+
+# 4º: devuelve los datos actualizados del usuario
+
+
+# ENDPOINT QUE CREA EL PDF DEL ITIENERARIO COMPLETO
+
+
+# ENDPOINT QUE CREA EL PDF DE LOS GASTOS COMPLETOS
\ No newline at end of file
diff --git a/src/app.py b/src/app.py
index 1b3340c0fa..60bacdd33e 100644
--- a/src/app.py
+++ b/src/app.py
@@ -5,20 +5,29 @@
from flask import Flask, request, jsonify, url_for, send_from_directory
from flask_migrate import Migrate
from flask_swagger import swagger
+from flask_jwt_extended import JWTManager # <--- IMPORTACIÓN AÑADIDA
from api.utils import APIException, generate_sitemap
from api.models import db
from api.routes import api
from api.admin import setup_admin
from api.commands import setup_commands
+from flask_cors import CORS # <--- 1. AÑADE ESTA LÍNEA AQUÍ
# from models import Person
ENV = "development" if os.getenv("FLASK_DEBUG") == "1" else "production"
static_file_dir = os.path.join(os.path.dirname(
os.path.realpath(__file__)), '../dist/')
+
app = Flask(__name__)
+CORS(app) # <--- 2. AÑADE ESTA LÍNEA JUSTO AQUÍ
app.url_map.strict_slashes = False
+# --- CONFIGURACIÓN DE JWT AÑADIDA ---
+app.config["JWT_SECRET_KEY"] = "super-secreta-cambiar-luego"
+jwt = JWTManager(app)
+# ------------------------------------
+
# database condiguration
db_url = os.getenv("DATABASE_URL")
if db_url is not None:
@@ -69,4 +78,4 @@ def serve_any_other_file(path):
# this only runs if `$ python src/main.py` is executed
if __name__ == '__main__':
PORT = int(os.environ.get('PORT', 3001))
- app.run(host='0.0.0.0', port=PORT, debug=True)
+ app.run(host='0.0.0.0', port=PORT, debug=True)
\ No newline at end of file
diff --git a/src/front/assets/img/EXPEDITION-LOGO.png b/src/front/assets/img/EXPEDITION-LOGO.png
new file mode 100644
index 0000000000..0de4fdf1a4
Binary files /dev/null and b/src/front/assets/img/EXPEDITION-LOGO.png differ
diff --git a/src/front/assets/img/fondo-landing.jpg b/src/front/assets/img/fondo-landing.jpg
new file mode 100644
index 0000000000..324f356358
Binary files /dev/null and b/src/front/assets/img/fondo-landing.jpg differ
diff --git a/src/front/assets/img/fondo-login.jpg b/src/front/assets/img/fondo-login.jpg
new file mode 100644
index 0000000000..e4474e9483
Binary files /dev/null and b/src/front/assets/img/fondo-login.jpg differ
diff --git a/src/front/assets/img/fondo-mytrips.jpg b/src/front/assets/img/fondo-mytrips.jpg
new file mode 100644
index 0000000000..99b8997493
Binary files /dev/null and b/src/front/assets/img/fondo-mytrips.jpg differ
diff --git a/src/front/components/ChatTab.jsx b/src/front/components/ChatTab.jsx
new file mode 100644
index 0000000000..89a821e4c1
--- /dev/null
+++ b/src/front/components/ChatTab.jsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useParams } from "react-router-dom";
+import "../styles/ChatTab.css";
+
+export const ChatTab = () => {
+ // 1. Obtenemos el ID del viaje de la URL
+ const { id } = useParams();
+
+ const [messages, setMessages] = useState([]);
+ const [newMessage, setNewMessage] = useState("");
+ const messagesEndRef = useRef(null);
+
+ // Leemos quién es el usuario logueado desde el localStorage (para saber qué burbujas son tuyas)
+ const currentUserString = localStorage.getItem("user");
+ const currentUser = currentUserString ? JSON.parse(currentUserString) : null;
+
+ // Auto-scroll al último mensaje
+ const scrollToBottom = () => {
+ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+ };
+
+ useEffect(() => {
+ scrollToBottom();
+ }, [messages]);
+
+ // 2. FUNCIÓN: Leer mensajes de la base de datos
+ const fetchMessages = async () => {
+ const token = localStorage.getItem("token");
+ if (!token) return;
+
+ try {
+ const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/trip-detail/${id}`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${token}`
+ }
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ if (data.messages) {
+ setMessages(data.messages);
+ }
+ }
+ } catch (error) {
+ console.error("Error al cargar el historial del chat:", error);
+ }
+ };
+
+ // 3. EFECTO: Cargar al entrar y refrescar (Polling)
+ useEffect(() => {
+ fetchMessages();
+ // Pregunta a Rigo cada 5 segundos si hay mensajes nuevos
+ const interval = setInterval(fetchMessages, 5000);
+ return () => clearInterval(interval);
+ }, [id]);
+
+ // 4. FUNCIÓN: Enviar a la base de datos
+ const handleSendMessage = async (e) => {
+ e.preventDefault();
+ if (!newMessage.trim()) return;
+
+ const token = localStorage.getItem("token");
+ try {
+ const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/new-message/${id}`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${token}`
+ },
+ // 🛠️ EL FIX ESTÁ AQUÍ: Rigo exige "content"
+ body: JSON.stringify({ content: newMessage })
+ });
+
+ if (response.ok) {
+ setNewMessage(""); // Limpiamos el input si se envió con éxito
+ fetchMessages(); // Pedimos la lista actualizada
+ } else {
+ const errorData = await response.json();
+ console.error("Rigo rechazó el mensaje:", errorData);
+ }
+ } catch (error) {
+ console.error("Error al enviar el mensaje:", error);
+ }
+ };
+
+ return (
+
+
+ {messages.length > 0 ? (
+ messages.map((msg, index) => {
+ // 🛠️ IDENTIDAD: Comparamos el user_id del mensaje con tu ID
+ const isMe = currentUser && msg.user_id === currentUser.id;
+
+ return (
+
+ {!isMe &&
{msg.user_name || "Viajero"} }
+
+ {/* 🛠️ EL OTRO FIX: Renderizamos msg.content en lugar de msg.text */}
+
{msg.content}
+
+ {msg.date_time
+ ? new Date(msg.date_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+ : "Ahora"}
+
+
+
+ );
+ })
+ ) : (
+
+ Aún no hay mensajes. ¡Escribe el primero!
+
+ )}
+
+
+
+
+
+
+
Control de Gastos
+ {
+ setIsEditingExpense(false);
+ setExpenseData({ description: "", amount: "", category: "Comida", paidBy: allParticipants[0] || "Yo", splitMethod: "equally", splitWith: allParticipants, settledWith: [] });
+ setShowExpenseModal(true);
+ }}
+ >
+
+
+
+ {expensesList.length > 0 ? (
+
+ {expensesList.map((expense) => (
+
setSelectedExpense(expense)}>
+
+
+
+
{expense.description}
+ {expense.paidBy} pagó por {expense.splitWith ? expense.splitWith.length : 0}
+
+
+
{expense.amount} €
+ {expense.date}
+
+
+ ))}
+
+ ) : (
+
+
Aún no hay gastos registrados
+ setShowExpenseModal(true)}>Añadir Gasto
+
+ )}
+
+
e.stopPropagation()}>
+
+
{isEditingExpense ? "Editar Gasto" : "Añadir Nuevo Gasto"}
+ ×
+
+
+
+
setSelectedExpense(null)}>
+
e.stopPropagation()}>
+
+
+
+ setSelectedExpense(null)}>×
+
+
+
+
{selectedExpense.description}
+
{selectedExpense.amount} €
+
Pagado por {selectedExpense.paidBy} el {selectedExpense.date}
+
+
+
+
+
+
División del gasto ({selectedExpense.splitWith ? selectedExpense.splitWith.length : 0} personas)
+
+ {selectedExpense.splitWith && selectedExpense.splitWith.map((person, index) => {
+ const amountPerPerson = (selectedExpense.amount / selectedExpense.splitWith.length).toFixed(2);
+ const isPayer = person === selectedExpense.paidBy;
+ const isSettled = selectedExpense.settledWith?.includes(person);
+
+ return (
+
+
+
{person.charAt(0)}
+
{person}
+
+
+ {isPayer ? (
+
Pagó la cuenta
+ ) : (
+
+
+ {isSettled ? "Saldado" : `Debe ${amountPerPerson} €`}
+
+ {
+ e.stopPropagation();
+ toggleSettleDebt(selectedExpense.id, person);
+ }}
+ >
+ {isSettled ?
+
+ )}
+
+
+ );
+ })}
+
+
+
+ handleDeleteExpense(selectedExpense.id)}>
+
+
+ Editar
+
+ setSelectedExpense(null)}>
+ Cerrar
+
+
+
+
+ Todo lo que necesitas
+
+
💰
+
Gestión de Gastos
+
Divide cuentas y liquida deudas fácilmente (Model: Expense/Debt).
+
+
📍
+
Itinerarios Vivos
+
Planifica cada parada con tu grupo en tiempo real (Model: Itinerary).
+
+
💬
+
Chat Grupal
+
Toda la comunicación en un solo lugar (Model: Chat/Message).
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/components/Hero.jsx b/src/front/components/Hero.jsx
new file mode 100644
index 0000000000..3588dd8803
--- /dev/null
+++ b/src/front/components/Hero.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Stats } from "./Stats";
+
+export const Hero = () => {
+ const navigate = useNavigate();
+
+ return (
+
+
+
Viaja en grupo sin complicaciones
+
+ {/* Texto actualizado al diseño */}
+
+ Organiza destinos, gastos y decisiones con tus amigos en un solo lugar.
+
+
+
+ {/* Botones actualizados */}
+ navigate("/login", { state: { tab: "register" } })}>
+ Comienza GRATIS
+
+ navigate("/demo")}>
+ Explorar cómo funciona
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/components/ItineraryTab.jsx b/src/front/components/ItineraryTab.jsx
new file mode 100644
index 0000000000..f14afdc66e
--- /dev/null
+++ b/src/front/components/ItineraryTab.jsx
@@ -0,0 +1,202 @@
+import React, { useState } from "react";
+import { useParams } from "react-router-dom"; // <-- Necesario para obtener el ID del viaje
+import "../styles/ItineraryTab.css";
+
+export const ItineraryTab = ({ tripItinerary, setTripItinerary }) => {
+ const { id } = useParams(); // Obtenemos el ID de la URL
+
+ // Estados internos solo para esta pestaña
+ const [selectedActivity, setSelectedActivity] = useState(null);
+ const [isEditingActivity, setIsEditingActivity] = useState(false);
+ const [tempActivityData, setTempActivityData] = useState(null);
+ const [showAddActivityModal, setShowAddActivityModal] = useState(false);
+ const [loading, setLoading] = useState(false); // Para mostrar "Guardando..."
+
+ const today = new Date().toISOString().split('T')[0];
+
+ // ALINEADO CON LA BASE DE DATOS: title, destination, hour, starting_date, notes
+ const [newActivity, setNewActivity] = useState({
+ starting_date: today,
+ hour: "12:00",
+ title: "",
+ destination: "",
+ notes: ""
+ });
+
+ // Función de formateo de fecha
+ const formatDateDisplay = (dateStr) => {
+ if (!dateStr) return "";
+ const date = new Date(dateStr);
+ return date.toLocaleDateString('es-ES', { day: 'numeric', month: 'short', year: 'numeric' });
+ };
+
+ // Funciones de control
+ const openActivityModal = (activity) => {
+ setSelectedActivity(activity);
+ setTempActivityData({ ...activity });
+ setIsEditingActivity(false);
+ };
+
+ const handleActivityChange = (e) => {
+ setTempActivityData({ ...tempActivityData, [e.target.name]: e.target.value });
+ };
+
+ const saveActivityChanges = () => {
+ // (Nota: La edición al backend la dejaremos para el siguiente paso, por ahora se queda en local)
+ setTripItinerary(tripItinerary.map(item => item.id === selectedActivity.id ? tempActivityData : item));
+ setSelectedActivity(tempActivityData);
+ setIsEditingActivity(false);
+ };
+
+ const handleNewActivityChange = (e) => {
+ setNewActivity({ ...newActivity, [e.target.name]: e.target.value });
+ };
+
+ // --- LA FUNCIÓN MÁGICA CONECTADA AL BACKEND ---
+ const handleAddActivitySubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+
+ const token = localStorage.getItem("token");
+
+ try {
+ // Enviamos el paquete exacto que espera routes.py
+ const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/new-activity/${id}`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${token}`
+ },
+ body: JSON.stringify(newActivity)
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+
+ // Añadimos la actividad devuelta por el servidor a la lista y ordenamos por fecha
+ const updatedItinerary = [...tripItinerary, data.itinerary].sort((a, b) => new Date(a.starting_date) - new Date(b.starting_date));
+
+ setTripItinerary(updatedItinerary);
+ setShowAddActivityModal(false);
+
+ // Reseteamos el formulario
+ setNewActivity({ starting_date: today, hour: "12:00", title: "", destination: "", notes: "" });
+ } else {
+ const errorData = await response.json();
+ alert("Error al guardar: " + (errorData.message || "Error desconocido"));
+ }
+ } catch (error) {
+ console.error("Error de conexión:", error);
+ alert("No se pudo conectar con el servidor.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <>
+
+
Plan de Viaje
+ {tripItinerary.length > 0 ? (
+
+ {tripItinerary.map((item, index) => (
+
openActivityModal(item)}>
+
+
+
{formatDateDisplay(item.starting_date)}
+
{item.hour}
+
{item.title}
+
{item.notes}
+
+
+ ))}
+
+ ) : (
+
Aún no hay actividades planeadas.
+ )}
+
setShowAddActivityModal(true)}>
+
+
setSelectedActivity(null)}>
+
e.stopPropagation()}>
+
+ {formatDateDisplay(tempActivityData.starting_date)}
+ setSelectedActivity(null)}>×
+
+ {isEditingActivity ? (
+
+
Título
+
+
Ubicación
+
Descripción
+
+ setIsEditingActivity(false)}>Cancelar
+ Guardar
+
+
+ ) : (
+ <>
+
+
{selectedActivity.title}
+
+
+
+
Descripción {selectedActivity.notes}
+
+ setIsEditingActivity(true)}>Editar
+ setSelectedActivity(null)}>Cerrar
+
+
+ )}
+
+
setShowAddActivityModal(false)}>
+
e.stopPropagation()}>
+
Nueva Actividad setShowAddActivityModal(false)}>×
+
+
+
+
+ {/* 1. IZQUIERDA: Menú Móvil y Logo */}
+
+
setMenuOpen(!menuOpen)}>
+
+
+
+
+
+
+
+ {/* 2. CENTRO: Menú de navegación */}
+
+
+
+ {/* 3. DERECHA: Autenticación y Avatar */}
+
+ {isAuthenticated ? (
+ // ✅ SI ESTÁ LOGUEADO: Mostramos Cerrar Sesión y el Avatar
+ <>
+
+ Cerrar sesión
+
+
navigate("/profile")}
+ style={{ cursor: "pointer" }}
+ >
+
+
+ ) : (
+ // ❌ SI NO ESTÁ LOGUEADO: Escondemos el Avatar y mostramos "Iniciar sesión"
+ // (Pero lo ocultamos si ya estamos en la propia pantalla de login)
+ !isLoginPage && (
+
navigate("/login")}
+ style={{ cursor: "pointer", fontWeight: "600", color: "var(--brand-navy)" }}
+ >
+ Iniciar sesión
+
+ )
+ )}
+
+
-
-
-
React Boilerplate
-
-
- Check the Context in action
-
-
-
- );
+ {/* Menú desplegable Móvil */}
+ {menuOpen && (
+
+
setMenuOpen(false)}>Inicio
+
+ {/* 🔒 RUTAS PROTEGIDAS EN MÓVIL */}
+ {isAuthenticated && (
+ <>
+
setMenuOpen(false)}>Mis viajes
+
setMenuOpen(false)}>Perfil
+
+ )}
+
+
+
+ {/* Botón de sesión dinámico en el móvil */}
+ {isAuthenticated ? (
+
+ Cerrar sesión
+
+ ) : (
+
setMenuOpen(false)} style={{ color: "var(--brand-navy)", fontWeight: "bold" }}>
+ Iniciar sesión
+
+ )}
+
+ );
};
\ No newline at end of file
diff --git a/src/front/components/Stats.jsx b/src/front/components/Stats.jsx
new file mode 100644
index 0000000000..5a80fe5d9b
--- /dev/null
+++ b/src/front/components/Stats.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+export const Stats = () => {
+ return (
+
+
+
+ 1M+
+ Viajeros
+
+
+ 500K
+ Destinos
+
+
+ {/* El texto extra que aparece abajo en tu diseño */}
+
+ Expande tus horizontes, nosotros hacemos el resto
+
+
-
-
- );
+ // Si no hay URL de backend, mostramos el aviso
+ if(!import.meta.env.VITE_BACKEND_URL || import.meta.env.VITE_BACKEND_URL == "") {
+ return
- {/* Provide global state to all components */}
-
- {/* Set up routing for the application */}
-
-
-
-
+
+ {/* RouterProvider DEBE ser el único que maneje la vista */}
+
);
}
-// Render the Main component into the root DOM element.
-ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+ { setIsLogin(true); setErrorMsg(""); }}
+ >
+ Inicia sesión
+
+ { setIsLogin(false); setErrorMsg(""); }}
+ >
+ Regístrate
+
+
+
+
+
{isLogin ? "Bienvenido de nuevo" : "Crea tu cuenta"}
+
+ {isLogin
+ ? "Gestiona tus aventuras compartidas con facilidad."
+ : "Únete a Expedition y empieza a planificar con tus amigos."}
+
+
+
+
+
+ O CONTINÚA CON
+
+
+
+
+
+
+
+
+
+
+
+
+ {isLogin ? "¿Aún no tienes cuenta? " : "¿Ya tienes una cuenta? "}
+ setIsLogin(!isLogin)}>
+ {isLogin ? "Únete a la comunidad" : "Inicia sesión"}
+
+
+
+ {/* Aquí llamamos a los componentes */}
+
+ ¿Listo para tu próxima expedición?
+ Crear mi viaje ahora
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Layout.jsx b/src/front/pages/Layout.jsx
index 9bfa31325c..300915cb2c 100644
--- a/src/front/pages/Layout.jsx
+++ b/src/front/pages/Layout.jsx
@@ -1,15 +1,17 @@
-import { Outlet } from "react-router-dom/dist"
-import ScrollToTop from "../components/ScrollToTop"
-import { Navbar } from "../components/Navbar"
-import { Footer } from "../components/Footer"
+import React from "react";
+import { Outlet } from "react-router-dom"; // Outlet es donde se cargan las páginas como LandingPage o Home
+import { Navbar } from "../components/Navbar"; // Verifica que la "N" coincida con tu archivo
+import { Footer } from "../components/Footer";
+import ScrollToTop from "../components/ScrollToTop";
-// Base component that maintains the navbar and footer throughout the page and the scroll to top functionality.
export const Layout = () => {
return (
-
-
- )
-}
\ No newline at end of file
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/MyTrips.jsx b/src/front/pages/MyTrips.jsx
new file mode 100644
index 0000000000..e57ae7b8cb
--- /dev/null
+++ b/src/front/pages/MyTrips.jsx
@@ -0,0 +1,191 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import "../styles/MyTrips.css";
+
+export const MyTrips = () => {
+ // 1. HERRAMIENTAS DE REACT
+ const navigate = useNavigate();
+ const [activeFilter, setActiveFilter] = useState("Todos");
+
+ // Estados para la Base de Datos Real
+ const [trips, setTrips] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ // 2. CONEXIÓN AL BACKEND
+ useEffect(() => {
+ const fetchMyTrips = async () => {
+ const token = localStorage.getItem("token");
+
+ // Si no hay llave, a iniciar sesión
+ if (!token) {
+ navigate("/login");
+ return;
+ }
+
+ try {
+ const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/trips`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${token}`
+ }
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ setTrips(data.viajes || []);
+ } else if (response.status === 401) {
+ navigate("/login");
+ }
+ } catch (error) {
+ console.error("Error al cargar los viajes:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchMyTrips();
+ }, [navigate]);
+
+ // 3. TRADUCTOR DE ESTADOS
+ const translateStatus = (status) => {
+ if (!status) return "Planificando";
+ const s = status.toUpperCase();
+ if (s === "FINISHED") return "Pasados";
+ if (s === "ONGOING") return "En curso";
+ if (s === "PLANNING") return "Planificando";
+ return status;
+ };
+
+ // 4. DATOS DE SUGERENCIAS (Estáticos por ahora)
+ const suggestions = [
+ { title: "Misterios de la India", image: "https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&w=400&q=80" },
+ { title: "Islas Griegas", image: "https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=400&q=80" },
+ { title: "Tokio Moderno", image: "https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?auto=format&fit=crop&w=400&q=80" },
+ { title: "Dubai Futurista", image: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=400&q=80" }
+ ];
+
+ // 5. LA MAGIA DEL FILTRADO
+ const filteredTrips = activeFilter === "Todos"
+ ? trips
+ : trips.filter(trip => translateStatus(trip.state) === activeFilter);
+
+ // 6. PANTALLA DE CARGA
+ if (loading) {
+ return (
+
+
Cargando tus aventuras... 🌍
+
+ );
+ }
+
+ // 7. RENDERIZADO VISUAL
+ return (
+
+
+
+
+
+
Mis Viajes
+
Gestiona tus próximas aventuras y recuerdos pasados.
+
+
navigate("/new-trip")}>
+
+
+
+
+ {["Todos", "En curso", "Planificando", "Pasados"].map(filter => (
+ setActiveFilter(filter)}
+ >
+ {filter}
+
+ ))}
+
+
+
+ {filteredTrips.length === 0 ? (
+
+ No tienes viajes en esta categoría.
+
+ ) : (
+ filteredTrips.map((trip) => {
+ const statusEsp = translateStatus(trip.state);
+
+ // 📸 LÓGICA DE LA IMAGEN:
+ // 1. Usa la image_url de la DB si existe y no es nula.
+ // 2. Si no hay imagen, busca una aleatoria en Unsplash basada en el destino.
+ const tripImage = trip.image_url && trip.image_url.trim() !== ""
+ ? trip.image_url
+ : `https://source.unsplash.com/500x300/?${encodeURIComponent(trip.destination || 'travel')}`;
+
+ return (
+
+
+
{ e.target.src = "https://images.unsplash.com/photo-1488646953014-85cb44e25828?auto=format&fit=crop&w=500&q=80" }}
+ />
+
+ {statusEsp}
+
+
+
+
+
{trip.title}
+
+
+
+ {statusEsp === "En curso" && (
+
+ )}
+
+
navigate(`/trip-details/${trip.id}`)}>
+ Ver detalles
+
+
+
+ );
+ })
+ )}
+
+
+
+
+
+
¿Sin ideas?
+
Explora destinos seleccionados por nuestra comunidad.
+
Explorar destinos
+
+
+
+
+
+
+
Sugerencias para ti
+ Ver todas
+
+
+ {suggestions.map((sug, index) => (
+
+
+
+
{sug.title}
+
+
+ ))}
+
+
+
+
+
+
+
+ {/* 🛠️ FIX: Botón de volver a prueba de balas usando Link y zIndex máximo */}
+
+
Volver a Mis Viajes
+
+
+
+
+
Planifica una nueva aventura
+
El primer paso de tu próximo gran viaje comienza aquí.
+
+
+
+
+
+
+
+
+
navigate("/my-trips")}>
+
+
+
+ {/* CABECERA */}
+
+
+
+ {user.firstName.charAt(0)}{user.lastName.charAt(0)}
+
+
+
+
+
+
{user.firstName} {user.lastName}
+
+
+
+
+
+
+
+
+ {/* =========================================
+ MODAL: CAMBIAR CONTRASEÑA
+ ========================================= */}
+ {showPasswordModal && (
+
+
+
Cambiar Contraseña
+
Introduce tu contraseña actual y la nueva que deseas utilizar.
+
+
+
+ )}
+
+ {/* =========================================
+ MODAL: ELIMINAR CUENTA
+ ========================================= */}
+ {showDeleteModal && (
+
+
+
+
+
¿Eliminar cuenta definitivamente?
+
Esta acción no se puede deshacer . Todos tus viajes, gastos, e información personal serán eliminados de nuestros servidores para siempre.
+
+ setShowDeleteModal(false)}>Cancelar
+ Sí, eliminar mi cuenta
+
+
+
+ )}
+
+
+
+
Cargando información del viaje...
+
+ {/* HERO SECTION */}
+
+
+
+ {/* 🛠️ FIX: Botón de volver a prueba de balas usando Link */}
+
+
Volver
+
+
+
+ {currentState.text}
+
+
+
{trip.title}
+
+
+ {/* 📸 INTERFAZ DE EDICIÓN DE IMAGEN */}
+
+ {!isEditingImage ? (
+
{ setIsEditingImage(true); setNewImageUrl(trip.image_url || ""); }}
+ style={{ background: "rgba(255,255,255,0.2)", border: "1px solid white", color: "white", padding: "8px 12px", borderRadius: "8px", cursor: "pointer", backdropFilter: "blur(4px)" }}
+ >
+
+ ) : (
+
+
+ {isUpdatingImage ? "..." : "Guardar"}
+
+ setIsEditingImage(false)}
+ style={{ background: "#e2e8f0", color: "#334155", border: "none", padding: "8px 10px", borderRadius: "4px", cursor: "pointer" }}
+ >
+
+
+ )}
+
+
+
+
+
+ {/* CONTENEDOR PRINCIPAL */}
+
+
+
+
+ {/* ÁREA DE PESTAÑAS */}
+
+
+ setActiveTab("itinerario")}>Itinerario
+ setActiveTab("gastos")}>Gastos
+ setActiveTab("documentos")}>Documentos
+
+
+ {activeTab === "itinerario" && (
+
+ )}
+
+ {activeTab === "gastos" && (
+
+ )}
+
+ {activeTab === "documentos" && (
+
+
+
Aún no hay documentos
+
Sube aquí tus reservas de hotel o vuelos.
+
+ )}
+
+
+ {/* CHAT PERSISTENTE */}
+
+
+
+
+
+
+ {/* BARRA LATERAL / SIDEBAR */}
+
+
+
+
+
Gastado
{totalSpent.toFixed(2)}€
+
Total
{trip.budget || 0}€
+
+
+
0 ? Math.min((totalSpent / trip.budget) * 100, 100) : 0}%`,
+ backgroundColor: totalSpent > trip.budget ? "#e74c3c" : "#2ecc71"
+ }}>
+
+
+
+
+
+
+
+
+
+
Not found! } >
+ Not found! }>
+
+ {/* Landing Page es la vista por defecto al entrar a la web */}
+ 
{ e.target.src = "https://images.unsplash.com/photo-1488646953014-85cb44e25828?auto=format&fit=crop&w=500&q=80" }}
+ />
+
+ {statusEsp}
+
+ 
+