hecho rf 16

Front/src/paginas/ContratosPropietario.svelte

@@ -3,12 +3,12 @@
     import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
     import ModalEstatico from "../Componentes/ModalEstatico.svelte";
     import {urlG} from "../stores/urlStore";
-    import type { CanonDto, ContratoDto, ContratoPropiedadDto, DefectoDto, GaranteDto2, OpcionVentaDto } from "../types";
+    import type { CanonDto, ChartData, ContratoDto, ContratoPropiedadDto, DefectoDto, GaranteDto2, OpcionVentaDto } from "../types";
     import ModalConfirm from "../Componentes/ModalConfirm.svelte";
     import ModalPedirDoc from "../Componentes/ModalPedirDoc.svelte";
     import ModalNotificacion from "../Componentes/ModalNotificacion.svelte";
     import { navigate } from "svelte-routing";
-    
+    import FChart from "../Componentes/Estadisticas/fChart.svelte";
     
     let token:string = sessionStorage.getItem("token")||"";
 
@@ -16,6 +16,7 @@
     let selMod:any =$state();
     let showmodal:boolean = $state(false);
     let shownotif:boolean = $state(false);
+    let chartData:ChartData|any = $state();
 
     let max:number=$state(0);
 
@@ -47,8 +48,26 @@
         await obtenerDatosACargar();
         max = canons.at(-1).mesNum||0;
         opcionVenta();
-
+        await setChartData();
     });
+    async function setChartData() {
+        try{
+            const r = await fetch($urlG+"/api/contrato/stats?idcontrato="+contratoid, {
+                method: "GET",
+                headers: {
+                    "Auth": String(token),
+                }
+            });
+            let data = await r.json();
+            if (r.ok){
+                chartData = data;
+                return;
+            }
+            modaldata = data.message;
+        }catch{
+            modaldata = "no se pudo obtener el chartdata";
+        } 
+    }
 
     async function opcionVenta() {
         try {
@@ -309,7 +328,6 @@
             if (r.ok) {
                 refreshDefectos();
             }
-
         }catch {
             modaldata = "No se pudo marcar como pago";
         }
@@ -424,6 +442,27 @@
                     </div>
                 </div>
             </div>
+            <div class="accordion-item">
+                <h2 class="accordion-header" id="h6">
+                    <button class="accordion-button collapsed"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#c6"
+                        aria-expanded="false"
+                        aria-controls="c6">
+                        Estadisticas
+                    </button>
+                </h2>
+                <div id="c6" class="accordion-collapse collapse"
+                    data-bs-parent="#accordionExample">
+                    <div class="accordion-body d-flex justify-content-center" >
+                        <div style="width: 500px; height: 500px;">
+                            {#if chartData != null}
+                            <FChart {chartData} typec="doughnut" />
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingTwo">
                     <button