iao_team/resources/views/livewire/dashboard.blade.php

<div class="col card--ui" id="card--dashboard">

    <header id="calendar--filter">
        <div class="calendar--wrapper d-flex align-items-end">
            <a href="#" class="prev-arrow"><i class="ico--ui big prev me-3"></i></a>
            <h2 class="calendar-date"><small>{{ \Carbon\Carbon::now()->locale('it_IT')->dayName }}</small>{{\Carbon\Carbon::now()->locale('it_IT')->translatedFormat('d F')}}</h2>
            <a href="#" class="next-arrow"><i class="ico--ui big next ms-3 me-1"></i></a>
            <a href="#"><i class="ico--ui big calendar"></i></a>
        </div>
        </header>

    <main id="dashboard" class="d-flex">
    <section id="dash_anagrafica">
        <div class="anagrafica--btn">
            <h1>Anagrafica</h1>
            <div class="anagrafica--btn_wrapper w-100 d-flex">

                <div class="card--ui card--ui_btnDash utente d-flex justify-content-between me-3">
                    <header class="d-flex justify-content-between">
                        <div class="card-title d-flex align-items-start"><i class="ico--ui medium user me-2"></i><h2><small>Nuovo</small><br>Utente</h2></div><a href="/members?new=1"><i class="ico--ui big add"></i></a>
                    </header>
                    <footer class="d-flex justify-content-between align-items-end">
                        <div class="card-footer_percentage d-flex">
                            <!--<i class="ico--ui small uscite ico me-1"></i><span>10%</span>-->
                        </div>
                        <div class="card-footer_info text-end">
                            <span>{{$totMembers}} </span> persone registrate
                        </div>
                    </footer>
                </div>
                <div class="card--ui card--ui_btnDash fornitore d-flex justify-items-between">
                    <header class="d-flex justify-content-between"><div class="card-title d-flex align-items-start"><i class="ico--ui medium fornitore me-2"></i><h2><small>Nuovo</small><br>Fornitore</h2></div><a href="/suppliers?new=1"><i class="ico--ui big add"></i></a>
                    </header>
                    <footer class="d-flex justify-content-between align-items-end">
                        <div class="card-footer_percentage d-flex">
                            <!--<i class="ico--ui small uscite ico me-1"></i><span>10%</span>-->
                        </div>
                        <div class="card-footer_info text-end">
                            <span>{{$totSuppliers}} </span> fornitori registrati
                        </div>
                    </footer>
                </div>
            </div>
        </div>
        <div class="anagrafica_chart">
            <h1>Utenti iscritti ultimi 7 giorni</h1>
            <canvas id="userChart"></canvas>
        </div>
        </section>
        <section id="dash_contabilita">
        <div class="contabilita--btn">
            <h1>Contabilità</h1>
            <div class="contabilita--btn_wrapper w-100 d-flex">
                <div class="card--ui card--ui_btnDash entrata d-flex justify-items-between me-3">
                    <header class="d-flex justify-content-between"><div class="card-title d-flex align-items-start"><h2><small>Registra</small><br>Nuova Entrata</h2></div><a href="/in?new=1"><i class="ico--ui big add primary"></i></a>
                    </header>
                    <footer class="d-flex justify-content-between align-items-end">
                        <div class="card-footer_percentage d-flex">
                            <!--<i class="ico--ui small entrate ico me-1"></i><span>10%</span>-->
                        </div>
                        <div class="card-footer_info text-end">
                            <span><strong>+ € {{$totTodayIn}}</strong></span> entrate oggi
                        </div>
                    </footer>
                </div>
                <div class="card--ui card--ui_btnDash uscite d-flex justify-items-between">
                    <header class="d-flex justify-content-between"><div class="card-title d-flex align-items-start"><h2><small>Registra</small><br>Nuova Uscita</h2></div><a href="/out?new=1"><i class="ico--ui big add secondary"></i></a>
                    </header>
                    <footer class="d-flex justify-content-between align-items-end">
                        <div class="card-footer_percentage d-flex">
                            <!--<i class="ico--ui small uscite ico me-1"></i><span>10%</span>-->
                        </div>
                        <div class="card-footer_info text-end">
                            <span><strong>- € {{$totTodayOut}}</strong></span> uscite oggi
                        </div>
                    </footer>
                </div>
            </div>
        </div>
        <div class="contabilita--chart">
            <h1>Entrate/Uscite ultimi 7 giorni</h1>
            <canvas id="recordChart"></canvas>
        </div>
        </section>

    </main>

</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush


@push('scripts')
    <script>
        const chart = new Chart(
            document.getElementById('recordChart'), {
                type: 'line',
                data: {
                    labels: @json($labels),
                    datasets: @json($recordDatas)
                },
                options: {
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    },
                    responsive: true,
                    elements: {
                        line: {
                            tension : 0.4  // smooth lines
                        },
                    },
                }
            }
        );
        const chartX = new Chart(
            document.getElementById('userChart'), {
                type: 'line',
                data: {
                    labels: @json($labels),
                    datasets: @json($memberDatas)
                },
                options: {
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    },
                    responsive: true,
                    elements: {
                        line: {
                            tension : 0.4  // smooth lines
                        },
                    },
                }
            }
        );
        Livewire.on('updateChart', data => {
            chart.data = data;
            chart.update();
        });
    </script>
@endpush