AlquilaFacil/Front/src/paginas/Informes.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import FChart from "../Componentes/Estadisticas/fChart.svelte";
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import { urlG } from "../stores/urlStore";
    import type { ChartData } from "../types";

    let token = sessionStorage.getItem("token") || "";
    let y = $state(2025);

    let cdata: ChartData | any = $state();
    let aldata: { id: number; ubicacion: string; divisa: string }[] = $state(
        [],
    );

    let chartMesesDuracion: ChartData | any = $state();
    let tablaMesesDuracion: {
        meses: number;
        repes: number;
        semaforizacion: string;
    }[] = $state([]);

    let showModoDaltonico: boolean = $state(false);
    let modaldata: string = $state("");

    onMount(async () => {
        await dataAlquileresporAño();
    });

    async function dataAlquileresporAño(year = 2025) {
        try {
            const rep = fetch(
                $urlG + "/api/stats/alquileresIniciados?year=" + year,
                {
                    method: "GET",
                    headers: {
                        Auth: token,
                    },
                },
            );
            const pre = fetch(
                $urlG + "/api/tabla/alquileresIniciados?year=" + year,
                {
                    method: "GET",
                    headers: {
                        Auth: token,
                    },
                },
            );
            let [r, p] = await Promise.all([rep, pre]);

            let data = await r.json();
            let data2 = await p.json();

            cdata = data;
            aldata = data2;
            return;
        } catch {
            modaldata = "Fallo al intentar alcanzar el servidor";
        }
    }

    let visibleMesesDuracion: boolean = $state(false);
    async function dataMesesDuracion() {
        try {
            const p1 = fetch($urlG + "/api/stats/duracionContrato", {
                method: "GET",
                headers: {
                    Auth: token,
                },
            });
            const p2 = fetch($urlG + "/api/tabla/duracionContrato", {
                method: "GET",
                headers: {
                    Auth: token,
                },
            });
            let [r1, r2] = await Promise.all([p1, p2]);
            let [d1, d2] = await Promise.all([r1.json(), r2.json()]);
            chartMesesDuracion = d1;
            tablaMesesDuracion = d2;
        } catch {
            modaldata = "Fallo al intentar alcanzar el servidor";
        }
    }

    function toggleModoDaltonico() {
        if (tablaMesesDuracion == null) return;

        tablaMesesDuracion.forEach((item) => {
            if (item.semaforizacion === "🟢") {
                item.semaforizacion = "🔵";
            } else if (item.semaforizacion === "🔵") {
                item.semaforizacion = "🟢";
            }
        });
    }
</script>

{#if modaldata}
    <ModalEstatico payload={modaldata} close={() => !!(modaldata = "")} />
{/if}

<NavBarAutocompletable />

<div class="container-fluid">
    <div class="row mt-4">
        <BarraHorizontalConTexto text="Estadisticas" />
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="hea1">
                    <button
                        class="accordion-button"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#c1"
                        aria-expanded="true"
                        aria-controls="c1"
                    >
                        Alquileres en el ultimo año
                    </button>
                </h2>
                <div
                    class="accordion-collapse collapse show"
                    id="c1"
                    data-bs-parent="#accordionExample"
                >
                    <div class="accordion-body row">
                        <div class="col">
                            <div class="d-flex input-group">
                                <input
                                    class="form-control"
                                    type="number"
                                    bind:value={y}
                                />
                                <button
                                    class="btn btn-primary"
                                    onclick={() => dataAlquileresporAño(y)}
                                    ><img
                                        src="/zoom.svg"
                                        alt="lupa"
                                        aria-label="Lupa"
                                    />Buscar</button
                                >
                            </div>
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Ubicacion</th>
                                        <th>Divisa</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {#each aldata as al}
                                        <tr>
                                            <td>{al.id}</td>
                                            <td>{al.ubicacion}</td>
                                            <td>{al.divisa}</td>
                                        </tr>
                                    {/each}
                                </tbody>
                            </table>
                        </div>
                        <div class="col">
                            {#if cdata}
                                <FChart chartData={cdata} />
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="hea2">
                    <button
                        class="accordion-button collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#c2"
                        aria-expanded="false"
                        aria-controls="c2"
                        onclick={() => {
                            if (visibleMesesDuracion === true) {
                                visibleMesesDuracion = false;
                                return;
                            } else if (visibleMesesDuracion === false) {
                                visibleMesesDuracion = true;
                                showModoDaltonico = false;
                                dataMesesDuracion();
                            }
                        }}
                    >
                        Meses De Duracion
                    </button>
                </h2>
                <div
                    class="accordion-collapse collapse"
                    id="c2"
                    data-bs-parent="#accordionExample"
                >
                    <div class="accordion-body row">
                        <div class="col">
                            <p class="text-muted">
                                Objetivo: <i
                                    >Mide la longitud de los contratos en meses
                                    y cuantos hay por cada longitud. por lo
                                    menos 2.</i
                                >
                            </p>
                            <input
                                class="form-check-input"
                                type="checkbox"
                                onclick={() => {
                                    showModoDaltonico = !showModoDaltonico;
                                    toggleModoDaltonico();
                                }}
                                checked={showModoDaltonico}
                            />
                            Activar Modo Daltónico
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Cantidad de meses</th>
                                        <th>Repeticiones</th>
                                        <th>Semaforización</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {#each tablaMesesDuracion as mes}
                                        <tr>
                                            <td>{mes.meses}</td>
                                            <td>{mes.repes}</td>
                                            <td>{mes.semaforizacion}</td>
                                        </tr>
                                    {/each}
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-4">
                            {#if chartMesesDuracion}
                                <FChart
                                    chartData={chartMesesDuracion}
                                    typec="pie"
                                />
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>