inicio soporte informe

Front/src/App.svelte

@@ -17,10 +17,11 @@
   import AdminUsuarios from "./paginas/AdminUsuarios.svelte";
   import AdminPropiedades from "./paginas/AdminPropiedades.svelte";
   import Notificaciones from "./paginas/Notificaciones.svelte";
-    import ControlAlquileresInquilino from "./paginas/ControlAlquileresInquilino.svelte";
-    import ControlAlquileresPropietario from "./paginas/ControlAlquileresPropietario.svelte";
-    import ContratosPropietario from "./paginas/ContratosPropietario.svelte";
-    import ContratoInquilino from "./paginas/ContratoInquilino.svelte";
+  import ControlAlquileresInquilino from "./paginas/ControlAlquileresInquilino.svelte";
+  import ControlAlquileresPropietario from "./paginas/ControlAlquileresPropietario.svelte";
+  import ContratosPropietario from "./paginas/ContratosPropietario.svelte";
+  import ContratoInquilino from "./paginas/ContratoInquilino.svelte";
+    import Informes from "./paginas/Informes.svelte";
 </script>
 
 <Router>
@@ -64,6 +65,11 @@
     <ProteRoute componente={PropPage}/>
   </Route>
 
+    <!--Crear Cuenta Propietario-->
+  <Route path="/accion/6">
+    <ProteRoute componente={Informes}/>
+  </Route>
+
   <!--Administrar Propiedades Dadas de Baja-->
   <Route path="/accion/8">
     <ProteRoute componente={MisPropiedadesDeBaja}/>

Front/src/Componentes/Estadisticas/fChart.svelte

@@ -0,0 +1,49 @@
+<script>
+    import { onMount } from "svelte";
+    import {
+      Chart,
+      registerables
+    } from "chart.js";
+  
+    Chart.register(...registerables);
+  
+    export let data;
+  
+    let chartCanvas;
+    let chartInstance;
+  
+    onMount(() => {
+      if (chartCanvas) {
+        chartInstance = new Chart(chartCanvas, {
+          type: "bar",
+          data: data,
+          options: {
+            responsive: true,
+            plugins: {
+              legend: {
+                position: "top"
+              },
+              tooltip: {
+                enabled: true
+              }
+            },
+            scales: {
+              y: {
+                beginAtZero: true
+              }
+            }
+          }
+        });
+      }
+  
+      return () => {
+        if (chartInstance) {
+          chartInstance.destroy();
+        }
+      };
+    });
+  </script>
+  
+  <div class="card card-body">
+    <canvas bind:this={chartCanvas}></canvas>
+  </div>

Front/src/paginas/Informes.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import { Chart } from "chart.js";
+    import FChart from "../Componentes/Estadisticas/fChart.svelte";
+
+    let cdata = $state();
+
+    let myChart;
+    onMount(() => {
+    });
+</script>
+
+<NavBarAutocompletable/>
+
+<div class="container">
+    <br>
+    <div class="row">
+        <BarraHorizontalConTexto text="Alquileres del ultimo año"/>
+        <div class="col">
+            <table class="table table-hover">
+                <thead>
+
+                    <tr>
+                        <th>#</th>
+                        <th>Ubicacion</th>
+                        <th>Divisa</th>
+                    </tr>
+                </thead>
+            </table>
+        </div>
+        <div class="col">
+            <FChart data={null}/>
+        </div>
+    </div>
+        
+</div>