skeleton para pagina grupo creado por usuario

Front/src/App.svelte

@@ -31,6 +31,7 @@
     import BuscarVentas from "./paginas/BuscarVentas.svelte";
     import MisPropiedadesEnVenta from "./paginas/MisPropiedadesEnVenta.svelte";
     import AdminGrupos from "./paginas/AdminGrupos.svelte";
+    import OtroG from "./paginas/grupos/OtroG.svelte";
 </script>
 
 <Router>
@@ -151,6 +152,9 @@
     <Route path="/grupo/Informes">
         <ProteRoute componente={FrontInformes} />
     </Route>
+    <Route path="/grupo/:id" let:params>
+        <ProteRoute componente={{ OtroG, params }} />
+    </Route>
 
     <!--Notificaciones-->
     <Route path="/notificaciones">

Front/src/Componentes/RutaProtegida.svelte

@@ -1,55 +1,59 @@
 <script>
-  import { onMount } from 'svelte';
+    import { onMount } from "svelte";
-  import { writable } from 'svelte/store';
+    import { writable } from "svelte/store";
 
-  import { urlG } from "../stores/urlStore";
+    import { urlG } from "../stores/urlStore";
 
-  let { componente } = $props();  
+    let { componente } = $props();
 
-  const isAuthenticated = writable(false); 
+    const isAuthenticated = writable(false);
-  const isVerified = writable(false); 
+    const isVerified = writable(false);
 
-  const redirect = window.location.pathname;
+    const redirect = window.location.pathname;
-  const email = localStorage.getItem('email');
+    const email = localStorage.getItem("email");
-  const token = sessionStorage.getItem('token');
+    const token = sessionStorage.getItem("token");
 
-  const handleAccess = async () => {
+    const handleAccess = async () => {
-    try {
+        try {
-      const response = await fetch($urlG+"/api/login/validar", {
+            const response = await fetch($urlG + "/api/login/validar", {
-        method: 'POST',
+                method: "POST",
-        headers: {
+                headers: {
-          'Auth': String(token),
+                    Auth: String(token),
-          'Content-Type': 'application/json',
+                    "Content-Type": "application/json",
-        },
+                },
-        body: JSON.stringify({ email, redirect }),
+                body: JSON.stringify({ email, redirect }),
-        credentials: "include"
+                credentials: "include",
-      });
+            });
 
-      if (response.ok) {
+            if (response.ok) {
-        isAuthenticated.set(true); // Actualiza el store
+                isAuthenticated.set(true); // Actualiza el store
-      }
+            }
-    } catch (error) {
+        } catch (error) {
-      console.error('Error durante la autenticación:', error);
+            console.error("Error durante la autenticación:", error);
-    } finally {
+        } finally {
-      isVerified.set(true); // Marca la verificación como completada
+            isVerified.set(true); // Marca la verificación como completada
-    }
+        }
-  };
+    };
 
-  onMount(() => {
+    onMount(() => {
-    handleAccess();
+        handleAccess();
-  });
+    });
 </script>
 
 {#if !$isVerified}
-<div class="d-flex justify-content-center position-absolute top-50 start-50">
+    <div
-  <div class="spinner-border" role="status">
+        class="d-flex justify-content-center position-absolute top-50 start-50"
-    <span class="visually-hidden">Loading...</span>
+    >
-  </div>
+        <div class="spinner-border" role="status">
-</div>
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
+{:else if $isAuthenticated}
+    {#if typeof componente === "object" && componente !== null}
+        {@render componente.OtroG(componente.params)}
+    {:else}
+        {@render componente()}
+    {/if}
 {:else}
-  {#if $isAuthenticated}
+    {window.location.replace("/")}
-    {@render componente()}
-  {:else}
-    {window.location.replace('/')}  
-  {/if}
 {/if}

Front/src/paginas/grupos/OtroG.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import ListaAcciones from "../../Componentes/ListaAcciones.svelte";
+    import NavBarAutocompletable from "../../Componentes/NavBarAutocompletable.svelte";
+    let { id }: { id: string } = $props();
+</script>
+
+<NavBarAutocompletable />
+<div class="container mt-5">
+    <div class="text-center mb-4">
+        <h1>Menu grupo: {id}</h1>
+    </div>
+    <ListaAcciones />
+</div>