creado componente para las rows y mejorado el pagination stepper

Front/src/Componentes/PaginacionStepper.svelte

@@ -3,25 +3,45 @@
 
     let {currentPag,
          cantpag,
-         queryPag
+         queryPag,
+         centrado = false
         }:{
          currentPag: number,
          cantpag: number,
-         queryPag: (a:number) => void} = $props();
+         queryPag: (a:number) => void,
+         centrado:boolean
+        } = $props();
+    
+        function getVisiblePages() {
+        if (!centrado || cantpag <= 5) {
+            return Array.from({ length: cantpag }, (_, i) => i + 1);
+        }
+
+        if (currentPag <= 3) {
+            return [1, 2, 3, 4, 5];
+        } else if (currentPag >= cantpag - 2) {
+            return [cantpag - 4, cantpag - 3, cantpag - 2, cantpag - 1, cantpag];
+        } else {
+            return [currentPag - 2, currentPag - 1, currentPag, currentPag + 1, currentPag + 2];
+        }
+    }
+    let visiblePages = $derived.by(getVisiblePages);
+
     
-    let array = $derived.by(()=> Array.from({ length: cantpag }, (_, i) => i + 1));
 </script>
 
-{#if cantpag>0}
+{#if cantpag > 1}
-<nav aria-label="Page navigation example">
+<nav aria-label="Paginador">
     <ul class="pagination">
-        {#each array as num }
+        <li class="page-item {currentPag === 1 ? 'disabled' : ''}">
-        {#if currentPag !== num}
+            <a class="page-link" href="#" onclick={() => currentPag > 1 && queryPag(currentPag - 1)}>Anterior</a>
-        <li class="page-item"><a class="page-link" href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
+        </li>
-        {:else}
+        {#each visiblePages as num }
-        <li class="page-item"><a class="page-link active" href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
+        <li class="page-item"><a class="page-link" class:active={currentPag === num} href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
-        {/if}
         {/each}
+        <li class="page-item {currentPag === cantpag ? 'disabled' : ''}">
+            <a class="page-link" href="#" onclick={() => currentPag < cantpag && queryPag(currentPag + 1)}>Siguiente</a>
+        </li>
     </ul>
 </nav>
 {/if}

Front/src/Componentes/RowPropiedadVenta.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { fade } from "svelte/transition";
+    import type { PropiedadDto } from "../types";
+    import ModificarPropiedadForm from "./modificarPropiedadForm.svelte";
+
+    let {p, unsetventa}: {p:PropiedadDto, unsetventa:(p:PropiedadDto)=>void} = $props();
+
+    let modificar:boolean = $state(false);
+
+    function setmod() {
+        modificar =! modificar;
+    }
+
+</script>
+<tr in:fade>
+    <td>{p.id}</td>
+    <td>{p.ubicacion}</td>
+    <td>{p.canthabitaciones}</td>
+    <td>{p.letra}</td>
+    <td>{p.piso}</td>  	
+    <td>{p.tipo}</td>
+    <td>{p.servicios}</td>
+    <td>
+    {#if p.iddivisa == 0}
+    AR$
+    {:else}
+    US$
+    {/if}
+    </td>
+    <td>{p.monto}</td>
+    <td class="d-flex justify-content-between gap-2">
+    <button class="btn btn-secondary btn-sm" onclick={()=> setmod()}>Modificar</button>
+    <button class="btn btn-secondary btn-sm" onclick={()=> unsetventa(p)}>Bajar de venta</button>
+    </td>
+</tr>
+{#if modificar}
+<tr in:fade>
+    <td colspan="10">
+        <ModificarPropiedadForm id={p.id} ubicacion={p.ubicacion} 
+        canthabitaciones={p.canthabitaciones} letra={p.letra} piso={p.piso}
+        tipo={p.tipo} servicios={p.servicios} monto={p.monto} iddivisa={p.iddivisa}/>
+    </td>
+</tr>
+{/if}

Front/src/paginas/MisPropiedadesEnVenta.svelte

@@ -8,6 +8,7 @@
     import ModalEstatico from "../Componentes/ModalEstatico.svelte";
     import ModalPublicarPropiedadParaVenta from "../Componentes/ModalPublicarPropiedadParaVenta.svelte";
     import ModificarPropiedadForm from "../Componentes/modificarPropiedadForm.svelte";
+    import RowPropiedadVenta from "../Componentes/RowPropiedadVenta.svelte";
 
     let token = sessionStorage.getItem("token")||"";
     
@@ -118,36 +119,7 @@
         </tr>
     {:else}
     {#each propiedades as p}
-        <tr in:fade>
+        <RowPropiedadVenta {p} {unsetventa}/>
-            <td>{p.id}</td>
-            <td>{p.ubicacion}</td>
-            <td>{p.canthabitaciones}</td>
-            <td>{p.letra}</td>
-            <td>{p.piso}</td>  	
-            <td>{p.tipo}</td>
-            <td>{p.servicios}</td>
-            <td>
-            {#if p.iddivisa == 0}
-            AR$
-            {:else}
-            US$
-            {/if}
-            </td>
-            <td>{p.monto}</td>
-            <td class="d-flex justify-content-between gap-2">
-            <button class="btn btn-secondary btn-sm" onclick={()=> setmod(p)}>Modificar</button>
-            <button class="btn btn-secondary btn-sm" onclick={()=> unsetventa(p)}>Bajar de venta</button>
-            </td>
-        </tr>
-    {#if modificar}
-        <tr transition:fade={{duration:100}}> 
-            <td colspan="10">
-                <ModificarPropiedadForm id={selprop.id} ubicacion={selprop.ubicacion} 
-                canthabitaciones={selprop.canthabitaciones} letra={selprop.letra} piso={selprop.piso}
-                tipo={selprop.tipo} servicios={selprop.servicios} monto={selprop.monto} iddivisa={selprop.iddivisa}/>
-            </td>
-        </tr>
-    {/if}
     {/each}
     {/if}
     </tbody>

Front/src/paginas/VerLogs.svelte

@@ -106,6 +106,6 @@
         </tbody>
     </table>
     <div class="d-flex justify-content-center">
-        <PaginacionStepper currentPag={pagina} {cantpag} {queryPag}/>
+        <PaginacionStepper currentPag={pagina} {cantpag} {queryPag} centrado={true}/>
     </div>
 </div>