añadido tercera estadistica

Front/src/paginas/Informes.svelte

@@ -98,11 +98,17 @@
         });
     }
 
+const nombresMeses = [
+    "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
+    "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
+];
+
     let ingresos: IngresosDto[] = $state([]);
     let chartingresos: ChartData | null = $state(null);
-    async function getIngresos() {
+    let yearr:number = $state(0);
+    async function getIngresos(year:number) {
         try{
-            const req = await fetch($urlG+"", {
+            const req = await fetch($urlG+"/api/stats/Pagos?year="+year, {
                 method:"GET",
                 headers: {
                     "Auth": token || "",
@@ -110,7 +116,10 @@
             });
             const data = await req.json();
             if (req.ok){
-                ingresos = data.tabla;
+                ingresos = data.tabla.map(item => ({
+                    ...item,
+                    mes: nombresMeses[Number(item.mes) - 1] 
+                }));
                 chartingresos = data.chart;
             } else {
                 modaldata = data.message;
@@ -141,7 +150,7 @@
                         aria-expanded="true"
                         aria-controls="c1"
                     >
-                        Alquileres en el ultimo año
+                        Alquileres Por Mes
                     </button>
                 </h2>
                 <div
@@ -167,6 +176,9 @@
                                     />Buscar</button
                                 >
                             </div>
+                            <p class="text-muted">
+                                Todos los Alquileres de un año mostrados por mes
+                            </p>
                             <table class="table table-hover">
                                 <thead>
                                     <tr>
@@ -279,39 +291,77 @@
                             data-bs-target="#c3"
                             aria-expanded="false"
                             aria-controls="c3"
-                    >
-                        Ingresos
+                            onclick={async ()=> {
+                                    if (yearr ==0){
+                                        yearr = new Date().getFullYear();
+                                        getIngresos(yearr);
+
+                                    } else if (yearr != 0){
+                                    yearr = 0;
+                                    }}}
+                        >
+                        Estado Pagos por Mes
                     </button>
                 </h2>
                 <div class="accordion-collapse collapse" id="c3"
-                    data-bs-parent="#accordionExample"
+                     data-bs-parent="#accordionExample"
                 >
-                    <div class="accordion-body d-flex">
-                        <div>
+                    <div class="accordion-body row">
+                        <div class="col">
+
+                            <div class="d-flex input-group">
+                                <input
+                                    class="form-control"
+                                    type="number"
+                                    bind:value={yearr}
+                                />
+                                <button
+                                    class="btn btn-primary"
+                                    onclick={() => getIngresos(yearr)}
+                                    ><img
+                                        src="/zoom.svg"
+                                        alt="lupa"
+                                        aria-label="Lupa"
+                                    />Buscar</button
+                                >
+                            </div>
+                            <p class="text-muted">
+                                Todos los canones ya sean pagados, Pagados Atrasados o Sin Realizar
+                            </p>
+                            {#if ingresos.length == 0}
+                            <div class="d-flex justify-content-center align-items-center mt-3">
+                                <div class="spinner-border text-primary" role="status">
+                                    <span class="visually-hidden">Cargando...</span>
+                                </div>
+                            </div>
+	                          {:else}
                             <table class="table table-striped table-hover">
 	                              <thead>
                                     <tr>
 	                                      <th>Mes</th>
-	                                      <th>Ingreso AR$</th>
-	                                      <th>Ingreso US$</th>
+	                                      <th>Pagos Realizados</th>
+	                                      <th>Pagos Atrasados</th>
+	                                      <th>Pagos Sin Realizar</th>
                                     </tr>
                                 </thead>
                                 <tbody>
-                                {#each ingresos as i }
-	                                  <tr>
+                                    {#each ingresos as i }
+                                    <tr>
                                         <td>{i.mes}</td>
-                                        <td>{i.ingresoAr}</td>
-                                        <td>{i.ingresoUs}</td>
+                                        <td>{i.realizados}</td>
+                                        <td>{i.atrasados}</td>
+                                        <td>{i.sin_realizar}</td>
                                     </tr>
                                 {/each}
                                 </tbody>
                             </table>
+                            {/if}
                         </div>
-                        <div>
+                        <div class="col">
                             {#if chartingresos != null}
                             <FChart
                                  chartData={chartingresos}
-                                 typec="pie"
+                                 typec="line"
                             />
                             {/if}
                         </div>

Front/src/types.d.ts

@@ -245,6 +245,7 @@ export type ClientePanel = {
 
 export type IngresosDto = {
     mes:number,
-    ingresoAr:number,
-    ingresoUs:number
+    realizados:number,
+    atrasados:number,
+    sin_realizar:number
 }