Avansamos mucho con el administracion propiedades

Front/src/App.svelte

@@ -14,7 +14,8 @@
   import FrontPropietario from "./paginas/grupos/PropietarioG.svelte";
   import PublicarPropiedad from "./paginas/PublicarPropiedad.svelte";
   import BusquedaPropiedades from "./paginas/BusquedaPropiedades.svelte";
-    import ControlUsuarios from "./paginas/ControlUsuarios.svelte";
+  import ControlUsuarios from "./paginas/AdminUsuarios.svelte";
+  import ControlPropiedades from "./paginas/AdminPropiedades.svelte";
 </script>
 
 <Router>
@@ -32,7 +33,8 @@
      <ProteRoute componente={MenuPage} />
   </Route>
 
-  <!--Publicar Propiedad-->
+  <!--Publicar Prop
+  iedad-->
   <Route path="/accion/1">
     <ProteRoute componente={PublicarPropiedad}/>
   </Route>
@@ -67,6 +69,12 @@
     <ProteRoute componente={ControlUsuarios}/>
   </Route>
   
+  <!-- Pantalla Control Propiedades -->
+  <Route path="/accion/10">
+    <ProteRoute componente={ControlPropiedades}/>
+  </Route>
+    
+  
 
   <!--Paginas info Grupo-->
   <Route path="/grupo/Inquilino">

Front/src/Componentes/AdminPanelBusqueda.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+    import "./css/dotted-line.css";
+    import {urlG} from "../stores/urlStore";
+    import type { AdminParametrosBusqueda, PropiedadAdmin } from "../types";
+    import { onMount } from "svelte";
+
+    let canthabitaciones:number = $state(0);
+    let servicios = ["Gas", "Internet", "Telefono", "Luz"];
+    let serviciosSel:string[] = $state([]);
+    let tipo: number = $state(0);
+
+
+
+    let { Params }: { Params: (a: AdminParametrosBusqueda) => void} = $props();
+
+    let token = sessionStorage.getItem("token");
+
+    async function formsubmit(e: Event){
+        e.preventDefault();
+        let params: AdminParametrosBusqueda = {
+          cantidadhabitaciones: canthabitaciones||0,
+          pag: 1,
+          servicios: serviciosSel.join(","),
+          tipopropiedad: tipo,
+        };
+        Params(params);
+    }
+</script>
+
+<form class="card p-3 border border-succes">
+
+    <div>Busqueda Filtrada
+      <div class="dotted-line"></div> 
+    </div>
+  
+    <div class="form-floating mb-3">
+      <input
+        type="number"
+        id="canthabitaciones"
+        class="form-control"
+        bind:value={canthabitaciones}
+        min="0"
+        placeholder="Cantidad de Habitaciones"
+        required
+      />
+      <label for="canthabitaciones">Cantidad de Habitaciones</label>
+    </div>
+  
+    <div class="mb-3">
+      <h6 class="form-floating form-label">Servicios</h6>
+      {#each servicios as servicio}
+      <div class="form-check">
+        <input
+          type="checkbox"
+          class="form-check-input"
+          bind:group={serviciosSel}
+          value={servicio}
+          id={`servicio-${servicio}`}
+          
+        />
+        <label class="form-check-label" for={`servicio-${servicio}`}>
+          {servicio}
+        </label>
+      </div>
+      {/each}
+    </div>
+  
+    <div class="form-floating mb-3">
+      <select id="idtipo" class="form-select" bind:value={tipo} required>
+        <option value="0">No Define</option>
+        <option value="1">Casa</option>
+        <option value="2">Piso</option>
+        <option value="3">Departamento</option>
+        <option value="4">Galpon</option>
+        <option value="5">LocalComercial</option>
+        <option value="6">Oficina</option>
+      </select>
+      <label for="idtipopropiedad">Tipo de propiedad</label>
+    </div>
+  
+    <button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center" onclick={formsubmit}>
+      Buscar
+      <img src="/zoom.svg" alt="" class="ms-2" style="height: 1.2em;" />
+    </button>
+  </form>
+  

Front/src/Componentes/AdminPropiedad.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { PropiedadAdmin } from "../types";
+    import {urlG} from "../stores/urlStore";
+
+    let { prop, modal }: { prop: PropiedadAdmin, modal: (a:string) => void } = $props();
+
+    const token = sessionStorage.getItem("token");
+
+    async function cambioEstado() {
+        try {
+            const response = await fetch($urlG+"/api/admin/propiedad?id="+prop.id, {
+                method: "DELETE",
+                headers: {
+                    "Auth": String(token)
+                }
+            });
+            
+            if (response.ok) {
+                prop.estado = prop.estado=="Baja" ? "Disponible": "Baja";
+            }
+
+            let data = await response.json();
+            modal(String(data.message));
+            
+            
+        } catch {
+            modal("Fallo al intentar enviar la peticion para dar de baja");
+        }
+    }
+</script>
+
+<div class="card text-center border shadow-sm">
+    <div class="card-header bg-primary text-white">
+        <h5 class="mb-0">{prop.tipo}</h5>
+    </div>
+    <div class="card-body">
+        <div class="card-img-top mb-3">
+            <i class="bi bi-building" style="font-size: 3rem;"></i>
+        </div>
+        <h6 class="card-title">{prop.ubicacion}</h6>
+        <p class="card-text">
+            <strong>Habitaciones:</strong> {prop.canthabitaciones}<br>
+            <strong>Piso:</strong> {prop.piso || "N/A"}<br>
+            <strong>Letra:</strong> {prop.letra || "N/A"}<br>
+            <strong>Servicios:</strong> {prop.servicios || "Sin servicios especificados"}<br>
+            <strong>Monto:</strong> ${prop.monto}<br>
+            <strong>Estado:</strong> {prop.estado}<br>
+        </p>
+        {#if prop.estado == "Disponible"}
+        <button class="btn btn-success" onclick={cambioEstado}>Baja</button>
+        {:else}
+        <button class="btn btn-danger" onclick={cambioEstado}>Alta</button>
+        {/if}
+    </div>
+    <div class="card-footer text-muted">
+        ID Propiedad: {prop.id}
+    </div>
+</div>
+  

Front/src/Componentes/PaginacionStepper.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { onMount } from "svelte";   
+    import {urlG} from "../stores/urlStore";
+
+    let {currentPag,
+         cantpag,
+         queryPag
+        }:{
+         currentPag: number,
+         cantpag: number,
+         queryPag: (a:number) => void} = $props();
+    
+    
+    const token = sessionStorage.getItem("token");
+
+    onMount(async () => {
+
+    });
+    
+    let array = $derived.by(()=> Array.from({ length: cantpag }, (_, i) => i + 1));
+</script>
+
+{#if cantpag>1}
+<nav aria-label="Page navigation example">
+    <ul class="pagination">
+        {#each array as num }
+        {#if currentPag !== num}
+        <li class="page-item"><a class="page-link" href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
+        {:else}
+        <li class="page-item"><a class="page-link active" href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
+        {/if}
+        {/each}
+    </ul>
+</nav>
+{/if}

Front/src/Componentes/PanelBusqueda.svelte

@@ -8,10 +8,11 @@
   let serviciosSel = $state([]);
   let tipo = $state(0);
 
-  async function formsubmit (e){
+  async function formsubmit (e:Event){
     e.preventDefault();
     
     const url = window.location.pathname;
+
     const goto = url+"?cantidadHabitaciones="+canthabitaciones+"&tipoPropiedad="+tipo+"&servicios="+serviciosSel.join(",");
     window.location.replace(goto);
   }
@@ -20,7 +21,7 @@
 <form class="card p-3 border border-succes">
 
   <div>Busqueda Filtrada
-    <div class="dotted-line">
+    <div class="dotted-line"></div>
   </div>
 
   <div class="form-floating mb-3">

Front/src/paginas/AdminPropiedades.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import PanelBusqueda from "../Componentes/AdminPanelBusqueda.svelte";
+    import BotonVolverArriba from "../Componentes/BotonVolverArriba.svelte";
+    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
+    import { fade } from "svelte/transition";
+    import type { AdminParametrosBusqueda, PropiedadAdmin, PropiedadDto } from "../types";
+    import {urlG} from "../stores/urlStore";
+    import AdminPropiedad from "../Componentes/AdminPropiedad.svelte";
+    import PaginacionStepper from "../Componentes/PaginacionStepper.svelte";
+    
+
+    const token = sessionStorage.getItem("token");
+
+    let showButton: boolean = $state(false);
+    let modaldata: string = $state("");
+    let cantpag:number = $state(1);
+    let Propiedades:PropiedadAdmin[] = $state([]);
+
+    let p: AdminParametrosBusqueda = $state({
+        cantidadhabitaciones: 0,
+        pag: 1,
+        servicios: "",
+        tipopropiedad: 0,
+    });
+    
+    
+    onMount(() => {    
+        cargaPropiedades();
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+
+    });
+
+    const handleScroll = () => {
+        showButton = window.scrollY > 100;
+    };
+    
+    async function cargaPropiedades() {
+        try{
+            const response = await fetch($urlG+"/api/admin/busqueda/paginada?cantidadHabitaciones="+p.cantidadhabitaciones+"&tipoPropiedad="+p.tipopropiedad+"&servicios="+p.servicios+"&pag="+p.pag, {
+                method: "GET",
+                headers: {
+                    "Auth": String(token)
+                }
+            });
+            if (response.ok) {
+                let data = await response.json();
+                Propiedades = data;
+                return;
+            }
+            modaldata = "Fallo la request";
+        }catch {
+            modaldata = "Fallo al intentar obtener la lista de propiedades"; 
+        }
+    }
+    async function obtenerCant(){
+
+        try{
+            const response = await fetch($urlG+"/api/propiedad/cantPagina?estado="+0, {
+                method: "GET",
+                headers: {
+                    "Auth": String(token)
+                }
+            });
+            if (response.ok) {
+                let data = await response.json();
+                cantpag = data.message;
+                return;
+            }
+            if (response.status === 400)  {
+                let data = await response.json();
+                modaldata=data.message;
+                return;
+            }
+            modaldata="Fallo al recibir la peticion de la cantidad de paginas de propiedades";
+        } catch {
+            modaldata="Fallo al intentar hacer la peticion de cuantas paginas hay";
+        }
+    }
+
+
+    function queryPag(a:number){
+        p.pag = a;
+        cargaPropiedades();
+    }
+    function querybusc(a) {
+        p = a;
+        cargaPropiedades();
+    }
+    $inspect(p);
+</script>
+
+<NavBarAutocompletable/>
+
+{#if modaldata}
+<ModalEstatico payload={modaldata} close={()=> !!(modaldata = "")}/>
+{/if}
+
+<div class="container mt-4">
+    <BarraHorizontalConTexto text="Administracion Propiedades"/>
+    <div class="row">
+        <div class="col col-md-8 order-2">
+            {#each Propiedades as p }
+            <AdminPropiedad prop={p} modal={(a:string)=> modaldata = a} />
+            <br>
+            {/each}
+            <PaginacionStepper currentPag={p.pag} {queryPag}/>
+        </div>
+        <div class="col col-md-4 order-1">
+            <PanelBusqueda Params={querybusc} />
+        </div>
+    </div>
+</div>
+
+{#if showButton }
+<div transition:fade={{duration:100}}>
+    <BotonVolverArriba/>
+</div>
+{/if}

Front/src/paginas/AdminUsuarios.svelte

@@ -14,7 +14,7 @@
     let showAddmenu: boolean = $state(false);
 
     let grupo:string = $state("");
-    let SelCliente: Cliente = $state();
+    let SelCliente: Cliente = $state(null);
 
     onMount(async () => {
         try{

Front/src/paginas/BusquedaPropiedades.svelte

@@ -7,6 +7,8 @@
     import { fade } from "svelte/transition";
     import {urlG} from "../stores/urlStore"
     import type { PropiedadDto } from "../types";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import { text } from "@sveltejs/kit";
 
 
     let showButton = $state(false);
@@ -69,6 +71,7 @@
 <NavBarAutocompletable/>
 
 <div class="container mt-4">
+    <BarraHorizontalConTexto text="Busqueda Propiedades"/>
     <div class="row">
         <div class="col col-md-8 order-2">
         {#each propiedades as item}

Front/src/types.d.ts

@@ -8,6 +8,25 @@ export type PropiedadDto = {
     servicios: string,
     monto: number
 }
+
+export type AdminParametrosBusqueda = {
+  cantidadhabitaciones: number=0,
+  tipopropiedad: number=0, 
+  servicios: string="",
+  pag: number=1
+}
+
+export type PropiedadAdmin = {
+  id: number,
+  ubicacion: string,
+  tipo: string,
+  piso: string | null,
+  letra: string | null,
+  canthabitaciones: number,
+  servicios: string,
+  monto: number,
+  estado: string
+}
 export type Permiso = {
     id: number;
     descripcion: string;