+
+ );
+};
+
+export default Form;
\ No newline at end of file
diff --git a/src/front/components/GoogleMaps.jsx b/src/front/components/GoogleMaps.jsx
new file mode 100644
index 0000000000..f404749326
--- /dev/null
+++ b/src/front/components/GoogleMaps.jsx
@@ -0,0 +1,143 @@
+import React, { useState, useRef, useEffect } from "react";
+
+
+function GoogleMaps({ lat, lng, setLat, setLng, address, setAddress }) {
+ const mapRef = useRef(null);
+ const markerRef = useRef(null);
+ const [search, setSearch] = useState("");
+
+ const fetchAddress = (latitude, longitude) => {
+ const key = import.meta.env.VITE_GOOGLE_MAPS_KEY || '';
+ fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${key}`)
+ .then(res => res.json())
+ .then(data => {
+ if (data.status === "OK" && data.results.length > 0) {
+ // Filtrar para evitar códigos Plus y 'Sin Nombre'
+ const result = data.results.find(r =>
+ !/^([A-Z0-9]{4,}\+\w{2,})/.test(r.formatted_address) &&
+ !r.formatted_address.includes('Sin Nombre')
+ );
+ setAddress(result ? result.formatted_address : "");
+ } else {
+ setAddress("");
+ }
+ })
+ .catch(() => setAddress(""));
+ };
+
+ const fetchCoords = (direccion) => {
+ const key = import.meta.env.VITE_GOOGLE_MAPS_KEY || '';
+ fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(direccion)}&key=${key}`)
+ .then(res => res.json())
+ .then(data => {
+ if (data.status === "OK" && data.results.length > 0) {
+ const loc = data.results[0].geometry.location;
+ setLat(loc.lat);
+ setLng(loc.lng);
+ setAddress(data.results[0].formatted_address);
+ }
+ });
+ };
+
+ useEffect(() => {
+ fetchAddress(lat, lng);
+ }, [lat, lng]);
+
+ useEffect(() => {
+ function safeInitMap() {
+ if (window.google && window.google.maps && typeof window.google.maps.Map === "function") {
+ const center = { lat: lat ? parseFloat(lat) : 20, lng: lng ? parseFloat(lng) : -99 };
+ const map = new window.google.maps.Map(mapRef.current, {
+ center,
+ zoom: 5,
+ mapId: "12fb4a783b70dc8349a13bb3"
+ });
+ if (window.google.maps.marker && window.google.maps.marker.AdvancedMarkerElement) {
+ markerRef.current = new window.google.maps.marker.AdvancedMarkerElement({
+ position: center,
+ map,
+ draggable: true,
+ });
+ map.addListener("click", (e) => {
+ markerRef.current.position = e.latLng;
+ setLat(e.latLng.lat());
+ setLng(e.latLng.lng());
+ fetchAddress(e.latLng.lat(), e.latLng.lng());
+ });
+ markerRef.current.addListener("dragend", (e) => {
+ setLat(e.latLng.lat());
+ setLng(e.latLng.lng());
+ fetchAddress(e.latLng.lat(), e.latLng.lng());
+ });
+ } else {
+ markerRef.current = new window.google.maps.Marker({
+ position: center,
+ map,
+ draggable: true,
+ });
+ map.addListener("click", (e) => {
+ markerRef.current.setPosition(e.latLng);
+ setLat(e.latLng.lat());
+ setLng(e.latLng.lng());
+ fetchAddress(e.latLng.lat(), e.latLng.lng());
+ });
+ markerRef.current.addListener("dragend", (e) => {
+ setLat(e.latLng.lat());
+ setLng(e.latLng.lng());
+ fetchAddress(e.latLng.lat(), e.latLng.lng());
+ });
+ }
+ } else {
+ setTimeout(safeInitMap, 100);
+ }
+ }
+
+ const key = import.meta.env.VITE_GOOGLE_MAPS_KEY || '';
+ const scriptId = "google-maps-script";
+ const existingScript = document.getElementById(scriptId);
+ if (!window.google) {
+ if (!existingScript) {
+ const script = document.createElement("script");
+ script.id = scriptId;
+ script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&libraries=marker&loading=async`;
+ script.async = true;
+ script.defer = true;
+ script.onload = safeInitMap;
+ script.onerror = function () {
+ if (mapRef.current) {
+ mapRef.current.innerHTML = '
+ {mode !== "config" && (
+
+
+ 
+
+ )}
+
+
+
+
+
+
+
+ + {mode === "register" && "Registrarse"} + {mode === "login" && "Iniciar Sesión"} + {mode === "config" && "Configuración"} +
+ + {errorMsn && ( +
+ {errorMsn}
+
+ )}
+
+
+ No se pudo cargar el mapa. Verifica tu conexión o la clave de Google Maps.
';
+ }
+ };
+ document.body.appendChild(script);
+ } else {
+ existingScript.onload = safeInitMap;
+ existingScript.onerror = function () {
+ if (mapRef.current) {
+ mapRef.current.innerHTML = 'No se pudo cargar el mapa. Verifica tu conexión o la clave de Google Maps.
';
+ }
+ };
+ }
+ } else {
+ safeInitMap();
+ }
+ }, [lat, lng]);
+
+ return (
+ <>
+ {
+ setAddress(e.target.value);
+ setSearch(e.target.value);
+ }}
+ onBlur={() => search && fetchCoords(search)}
+ style={{ width: "100%", marginBottom: 8, borderRadius: 8, padding: 8 }}
+ placeholder="Dirección"
+ />
+
+
+ );
+}
+
+export default GoogleMaps;
diff --git a/src/front/components/LandingCards.jsx b/src/front/components/LandingCards.jsx
new file mode 100644
index 0000000000..c392adf3e3
--- /dev/null
+++ b/src/front/components/LandingCards.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { motion } from "framer-motion";
+import "../styles/Landing.css";
+
+const cards = [
+ {
+ title: "Organiza tus tareas",
+ desc: "Crea, asigna y sigue el progreso de tus tareas en tu equipo.",
+ img: "https://img.freepik.com/foto-gratis/papeles-comerciales-naturaleza-muerta-varias-piezas-mecanismo_23-2149352652.jpg?semt=ais_hybrid&w=740&q=80"
+ },
+ {
+ title: "Comunicación centralizada",
+ desc: "Muro interno para chatear y mantener todo en un solo lugar.",
+ img: "https://media.istockphoto.com/id/1406124833/es/vector/problemas-en-el-concepto-de-vector-de-comunicaci%C3%B3n.jpg?s=612x612&w=0&k=20&c=5pkMR8J1QN8VWhnOBmEHk5n7ydB_9DfoBDf8khIEec4="
+ },
+ {
+ title: "Integración con Google Maps",
+ desc: "Nunca te perderás: Google Maps te guía en cada tarea y en cada rincón.",
+ img: "https://i.blogs.es/635f55/maps/1366_2000.jpg"
+ },
+ {
+ title: "Multiplataforma",
+ desc: "Accede desde móvil, tablet o escritorio sin perder información.",
+ img: "https://kinsta.com/es/wp-content/uploads/sites/8/2020/09/diseno-de-paginas-web-sensibles-1024x512.jpg"
+ },
+];
+
+export default function LandingCards() {
+ return (
+ {card.title}
+{card.desc}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
Redes
+ + + +
+
+
+
+
+
+
+
+ )}
+
+ {showBoteModal && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Register.jsx b/src/front/pages/Register.jsx
new file mode 100644
index 0000000000..7ae707869e
--- /dev/null
+++ b/src/front/pages/Register.jsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import Form from "../components/Form.jsx";
+
+const Register = () => {
+ const navigate = useNavigate();
+
+ const handleSignup = async ({ email, password, name, setErrorMsn }) => {
+ setErrorMsn(null);
+ const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+ try {
+ const response = await fetch(`${backendUrl}/api/users/register`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ email, password, name }),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ setErrorMsn(data.msg || "Error en el registro");
+ console.error(data.msg || "Error en el registro");
+ return;
+ }
+
+ navigate("/login", {
+ state: { successMessage: "Registro exitoso. Ahora puedes iniciar sesión." },
+ });
+ } catch (error) {
+ setErrorMsn("Error al conectar con el servidor");
+ console.error("Error al conectar con el servidor", error);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Amigos activos
+ {store.friends.map(friend => (
+
+
+
+
+ {tasksCompleted}
Tareas completadas
+ Tareas completadas
{tasksPending}
Tareas sin hacer
+ Tareas sin hacer
{clanCount}
Clan
+ Clan
+
+
+
+
+
+
+
+
+ Detalles
+{store.profile.bio}
++
{store.profile.city}
+{store.profile.age} años
+{store.profile.phone}
+{store.profile.gender}
+
+
+
+
+
+ Mensajes
+No hay mensajes nuevos.
+
+
+
+
+
+ Otras redes
+{store.profile.instagram || ""}
+{store.profile.twitter || ""}
+{store.profile.facebook || ""}
+
+
+
+
+ Gastos del Mes
+ +{totalExpenses.toFixed(2)}€
+ Ver Detalles +
+
+
+
+
+
+ Saldo del Bote Personal
+ +{store.personalBote.toFixed(2)} €
+
+
+
+ );
+};
+
+export default Register;
\ No newline at end of file
diff --git a/src/front/routes.jsx b/src/front/routes.jsx
index 0557df6141..c08b0ef31c 100644
--- a/src/front/routes.jsx
+++ b/src/front/routes.jsx
@@ -1,30 +1,89 @@
// Import necessary components and functions from react-router-dom.
import {
- createBrowserRouter,
- createRoutesFromElements,
- Route,
+ createBrowserRouter,
+ createRoutesFromElements,
+ Route,
} from "react-router-dom";
+import PrivateRoute from "./components/PrivateRoute";
import { Layout } from "./pages/Layout";
-import { Home } from "./pages/Home";
+import { Dashboard } from "./pages/Dashboard";
import { Single } from "./pages/Single";
import { Demo } from "./pages/Demo";
-
+import Register from "./pages/Register";
+import Login from "./pages/Login";
+import { Profile } from "./pages/Profile";
+import { Groups } from "./pages/Groups";
+import { Finances } from "./pages/Finances";
+import { Config } from "./pages/Config"
+import Home from "./pages/Home";
+import { Chat } from "./pages/Chat";
export const router = createBrowserRouter(
- createRoutesFromElements(
+ createRoutesFromElements(
// CreateRoutesFromElements function allows you to build route elements declaratively.
// Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
// Root, on the contrary, create a sister Route, if you have doubts, try it!
// Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
// Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
- // Root Route: All navigation will start from here.
-