<x-app-layout>
    <x-slot name="header">
            {{ __('Reports') }}
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-6 sm:px-20 bg-white border-b border-gray-200">

                    <!--- Select period -->
                    @livewire('select-period', ['label' => __('Select Period')])

                    <!-- Table title -->
                    @livewire('table-title')

                    <!--- Reports component -->
                    @livewire('reports')

                </div>
            </div>
        </div>

</x-app-layout>