prima nota v2

app/Http/Livewire/Record.php

@@ -25,14 +25,14 @@ class Record extends Component
     public $fromDate;
     public $toDate;
 
-    // Add these properties for the actual filtering
     public $appliedFromDate;
     public $appliedToDate;
 
+    public $selectedPeriod = 'OGGI';
+
     public $filterCausals = null;
     public $filterMember = null;
 
-    // Add this property to track filtering state
     public $isFiltering = false;
 
     public array $recordDatas = [];
@@ -51,7 +51,6 @@ class Record extends Component
         $this->fromDate = date("Y-m-d");
         $this->toDate = date("Y-m-d");
 
-        // Initialize applied dates to current date
         $this->appliedFromDate = date("Y-m-d");
         $this->appliedToDate = date("Y-m-d");
 
@@ -62,25 +61,76 @@ class Record extends Component
         $this->payments = \App\Models\PaymentMethod::select('id', 'name', 'type')->where('enabled', true)->where('money', false)->get();
     }
 
-    // Add this method to handle manual filtering
+    public function resetFilters()
+    {
+        $this->selectedPeriod = 'OGGI';
+        $this->filterCausals = [];
+        $this->filterMember = null;
+
+        $today = date("Y-m-d");
+        $this->fromDate = $today;
+        $this->toDate = $today;
+        $this->appliedFromDate = $today;
+        $this->appliedToDate = $today;
+
+        $this->emit('filters-reset');
+    }
+
     public function applyFilters()
     {
-        // Set filtering state to true
         $this->isFiltering = true;
 
+        $this->setPeriodDates();
+
         $this->appliedFromDate = $this->fromDate;
         $this->appliedToDate = $this->toDate;
 
-        // Process the data
         $this->render();
 
-        // Reset filtering state
         $this->isFiltering = false;
 
-        // Emit event to update any JavaScript components if needed
         $this->emit('filters-applied');
     }
 
+    private function setPeriodDates()
+    {
+        $today = now();
+
+        switch ($this->selectedPeriod) {
+            case 'OGGI':
+                $this->fromDate = $today->format('Y-m-d');
+                $this->toDate = $today->format('Y-m-d');
+                break;
+
+            case 'IERI':
+                $yesterday = $today->copy()->subDay();
+                $this->fromDate = $yesterday->format('Y-m-d');
+                $this->toDate = $yesterday->format('Y-m-d');
+                break;
+
+            case 'MESE CORRENTE':
+                $this->fromDate = $today->copy()->startOfMonth()->format('Y-m-d');
+                $this->toDate = $today->copy()->endOfMonth()->format('Y-m-d');
+                break;
+
+            case 'MESE PRECEDENTE':
+                $lastMonth = $today->copy()->subMonth();
+                $this->fromDate = $lastMonth->startOfMonth()->format('Y-m-d');
+                $this->toDate = $lastMonth->endOfMonth()->format('Y-m-d');
+                break;
+
+            case 'ULTIMO TRIMESTRE':
+                $this->fromDate = $today->copy()->subMonths(3)->startOfMonth()->format('Y-m-d');
+                $this->toDate = $today->copy()->subMonth()->endOfMonth()->format('Y-m-d');
+                break;
+
+            case 'ULTIMO QUADRIMESTRE':
+                $this->fromDate = $today->copy()->subMonths(4)->startOfMonth()->format('Y-m-d');
+                $this->toDate = $today->copy()->subMonth()->endOfMonth()->format('Y-m-d');
+                break;
+        }
+    }
+
     public function getCausals($records, $indentation)
     {
         foreach ($records as $record) {
@@ -147,9 +197,8 @@ class Record extends Component
 
         $exclude_from_records = \App\Models\Member::where('exclude_from_records', true)->pluck('id')->toArray();
 
-        // Use applied dates instead of current dates for filtering
         $datas = \App\Models\Record::with('member', 'supplier', 'payment_method')
-            ->select('records.*', 'records_rows.*') // Ensure all columns are selected
+            ->select('records.*', 'records_rows.*')
             ->join('records_rows', 'records.id', '=', 'records_rows.record_id')
             ->whereBetween('date', [$this->appliedFromDate, $this->appliedToDate])
             ->where(function ($query) {
@@ -186,13 +235,12 @@ class Record extends Component
         }
         $datas = $datas->orderBy('date', 'ASC')
             ->orderBy('records.created_at', 'ASC')
-            ->orderBy('records_rows.id', 'ASC') // Important to maintain row order
+            ->orderBy('records_rows.id', 'ASC')
             ->get();
 
-        // Group data by date, type (commercial/non-commercial), payment method, and type (IN/OUT)
         $groupedData = [];
-        $causalsCount = []; // Track how many different causals per group
-        $nominativi = []; // Track nominativi for each group
+        $causalsCount = [];
+        $nominativi = [];
 
         foreach ($datas as $idx => $data) {
 
@@ -243,56 +291,44 @@ class Record extends Component
                     $nominativi[$groupKey] = $nominativo;
                 }
 
-                // Add amount to group
                 $groupedData[$groupKey]['amount'] += $amount;
 
-                // Track causals for this group
                 $causalsCount[$groupKey][$causalCheck->getTree()] = true;
 
-                // Collect notes
                 if (!empty($data->note)) {
                     $groupedData[$groupKey]['notes'][] = $data->note;
                 }
 
-                // Track if any record in this group is deleted
                 if ($data->deleted) {
                     $groupedData[$groupKey]['deleted'] = true;
                 }
             }
         }
 
-        // Convert grouped data to records format
         foreach ($groupedData as $groupKey => $group) {
             $causalsInGroup = array_keys($causalsCount[$groupKey]);
 
-            // Always show type in causale column
-            $causalDisplay = $group['type_label']; // Always Commerciale or Non Commerciale
+            $causalDisplay = $group['type_label'];
 
-            // Determine detail display
             if (count($causalsInGroup) > 1) {
-                $detailDisplay = 'Varie|' . implode('|', $causalsInGroup); // Store causals for popup
+                $detailDisplay = 'Varie|' . implode('|', $causalsInGroup);
             } else {
-                $detailDisplay = $causalsInGroup[0]; // Show single causal
+                $detailDisplay = $causalsInGroup[0];
             }
 
-            // Create record key with nominativo
             $recordKey = $group['date'] . "§" . $causalDisplay . "§" . $group['nominativo'] . "§" . $detailDisplay . "§" . ($group['deleted'] ? 'DELETED' : '') . "§";
 
-            // Initialize records structure
             if (!isset($this->records[$recordKey][$group['payment_method']][$group['transaction_type']])) {
                 $this->records[$recordKey][$group['payment_method']][$group['transaction_type']] = 0;
             }
 
-            // Add amount to records
             $this->records[$recordKey][$group['payment_method']][$group['transaction_type']] += $group['amount'];
 
-            // Initialize totals if needed
             if (!isset($this->totals[$group['payment_method']])) {
                 $this->totals[$group['payment_method']]["IN"] = 0;
                 $this->totals[$group['payment_method']]["OUT"] = 0;
             }
 
-            // Update totals if not deleted
             if (!$group['deleted'])
                 $this->totals[$group['payment_method']][$group['transaction_type']] += $group['amount'];
         }
@@ -362,8 +398,8 @@ class Record extends Component
         $activeWorksheet = $spreadsheet->getActiveSheet();
 
         $activeWorksheet->setCellValue('A1', "Data");
-        $activeWorksheet->setCellValue('B1', "Causale");
-        $activeWorksheet->setCellValue('C1', "Dettaglio");
+        $activeWorksheet->setCellValue('B1', "Tipo");
+        $activeWorksheet->setCellValue('C1', "Causale");
         $activeWorksheet->setCellValue('D1', "Nominativo");
         $activeWorksheet->setCellValue('E1', "Stato");
 
@@ -428,23 +464,22 @@ class Record extends Component
 
         foreach ($recordsArray as $recordsBatch) {
             foreach ($recordsBatch as $causal => $record) {
-                $check = $causal; // No need to handle prefix anymore
+                $check = $causal;
 
                 $parts = explode("§", $check);
                 $d = $parts[0] ?? '';
                 $c = $parts[1] ?? '';
-                $j = $parts[2] ?? ''; // Nominativo
+                $j = $parts[2] ?? '';
                 $det = $parts[3] ?? '';
                 $deleted = $parts[4] ?? '';
 
-                // Handle "Varie" case for export - show actual causals instead of "Varie"
                 $detailParts = explode('|', $det);
                 $exportDetail = count($detailParts) > 1 ? implode(', ', array_slice($detailParts, 1)) : $det;
 
                 $activeWorksheet->setCellValue('A' . $count, !empty($d) ? date("d/m/Y", strtotime($d)) : '');
                 $activeWorksheet->setCellValue('B' . $count, $c);
-                $activeWorksheet->setCellValue('C' . $count, $exportDetail); // Show all causals in export
-                $activeWorksheet->setCellValue('D' . $count, $j); // Nominativo
+                $activeWorksheet->setCellValue('C' . $count, $exportDetail);
+                $activeWorksheet->setCellValue('D' . $count, $j);
 
                 $stato = ($deleted === 'DELETED') ? 'ANNULLATA' : '';
                 $activeWorksheet->setCellValue('E' . $count, $stato);

public/css/style.css

@@ -16879,6 +16879,7 @@ button[disabled] {
     border-bottom: none;
 }
 
+/* Ensure select2 dropdown stays below modal */
 .select2-container {
     z-index: 999 !important;
 }
@@ -16887,11 +16888,32 @@ button[disabled] {
     z-index: 999 !important;
 }
 
+/* Disable body scroll when modal is open */
 body.modal-open {
     overflow: hidden;
 }
 
+/* Ensure modal dialog is properly centered and above everything */
 .modal-dialog {
     z-index: 10001 !important;
     margin: 1.75rem auto;
 }
+
+/* Period filter styles */
+.form-select[disabled] {
+    background-color: #e9ecef;
+    opacity: 0.65;
+}
+
+/* Responsive adjustments for filters */
+@media (max-width: 768px) {
+    .col-md-2, .col-md-3, .col-md-4 {
+        margin-bottom: 10px;
+    }
+
+    .prima--nota_buttons {
+        float: none !important;
+        margin-top: 10px !important;
+        text-align: center;
+    }
+}

resources/views/livewire/records.blade.php

@@ -7,11 +7,9 @@
         </div>
 
     </header>
-
-
     <section id="subheader" class="">
         <div class="row g-3">
-            <div class="col-md-2">
+            <div class="col-md-3">
                 Utente
                 <select name="search_member_id" class="form-select filterMember" wire:model="filterMember">
                     <option value="">--Seleziona--
@@ -28,13 +26,16 @@
                     @endforeach
                 </select>
             </div>
-            <div class="col-md-2">
-                <span class="date_span">Dal</span>
-                <input type="date" wire:model.defer="fromDate" class="form-control" @if($isFiltering) disabled @endif>
-            </div>
-            <div class="col-md-2">
-                <span class="date_span ms-2">al</span>
-                <input type="date" wire:model.defer="toDate" class="form-control" @if($isFiltering) disabled @endif>
+            <div class="col-md-3">
+                Periodo
+                <select wire:model="selectedPeriod" class="form-select" @if($isFiltering) disabled @endif style="height: 38px;">
+                    <option value="OGGI">Oggi</option>
+                    <option value="IERI">Ieri</option>
+                    <option value="MESE CORRENTE">Mese Corrente</option>
+                    <option value="MESE PRECEDENTE">Mese Precedente</option>
+                    <option value="ULTIMO TRIMESTRE">Ultimo Trimestre</option>
+                    <option value="ULTIMO QUADRIMESTRE">Ultimo Quadrimestre</option>
+                </select>
             </div>
             <div class="col-md-2">
                 <div class="prima--nota_buttons ms-auto" style="float:right; margin-top:25px;">
@@ -45,7 +46,7 @@
                             FILTRA
                         @endif
                     </button>
-                    <button class="btn--ui lightGrey reset reset" style="margin-left:5px;color:#10172A;" onclick="reset()" @if($isFiltering) disabled @endif>RESET</button>
+                    <button class="btn--ui lightGrey reset reset" style="margin-left:5px;color:#10172A;" wire:click="resetFilters" @if($isFiltering) disabled @endif>RESET</button>
                 </div>
             </div>
         </div>
@@ -65,103 +66,101 @@
 
     <section id="resume-table" class="scrollTable records-table" style="position: relative;">
 
-            @if($isFiltering)
-                <div class="loading-overlay">
-                    <div class="loading-content">
-                        <i class="fas fa-spinner fa-spin fa-3x"></i>
-                        <p>Caricamento dati in corso...</p>
-                    </div>
+        @if($isFiltering)
+            <div class="loading-overlay">
+                <div class="loading-content">
+                    <i class="fas fa-spinner fa-spin fa-3x"></i>
+                    <p>Caricamento dati in corso...</p>
                 </div>
-            @endif
+            </div>
+        @endif
 
-            <!-- Your existing table -->
-            <table class="table tablesaw tableHead tablesaw-stack" id="tablesaw-350" width="100%">
-                <thead>
-                    <tr>
-                        <th scope="col">Data</th>
-                        <th scope="col" style="border-left:3px solid white;">Causale</th>
-                        <th scope="col" style="border-left:3px solid white;">Dettaglio Causale</th>
-                        <th scope="col" style="border-left:3px solid white;">Stato</th>
-                        <th scope="col" style="border-left:3px solid white;">Nominativo</th>
-                        @foreach($payments as $p)
-                            <th colspan="2" scope="col" style="text-align:center; border-left:3px solid white;">{{$p->name}}</th>
-                        @endforeach
-                    </tr>
+        <table class="table tablesaw tableHead tablesaw-stack" id="tablesaw-350" width="100%">
+            <thead>
+                <tr>
+                    <th scope="col">Data</th>
+                    <th scope="col" style="border-left:3px solid white;">Tipo</th>
+                    <th scope="col" style="border-left:3px solid white;">Causale</th>
+                    <th scope="col" style="border-left:3px solid white;">Stato</th>
+                    <th scope="col" style="border-left:3px solid white;">Nominativo</th>
+                    @foreach($payments as $p)
+                        <th colspan="2" scope="col" style="text-align:center; border-left:3px solid white;">{{$p->name}}</th>
+                    @endforeach
+                </tr>
+                <tr>
+                    <th scope="col"></th>
+                    <th scope="col" style="border-left:3px solid white;"></th>
+                    <th scope="col" style="border-left:3px solid white;"></th>
+                    <th scope="col" style="border-left:3px solid white;"></th>
+                    <th scope="col" style="border-left:3px solid white;"></th>
+                    @foreach($payments as $p)
+                        @if($p->type == 'ALL')
+                            <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
+                            <th scope="col" style="text-align:center">Uscite</th>
+                        @elseif($p->type == 'IN')
+                            <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
+                            <th scope="col" style="text-align:center;"></th>
+                        @elseif($p->type == 'OUT')
+                            <th style="border-left:3px solid white;"></th>
+                            <th scope="col" style="text-align:center;">Uscite</th>
+                        @endif
+                    @endforeach
+                </tr>
+            </thead>
+            <tbody id="checkall-target">
+                @php $count = 0; @endphp
+                @foreach($records as $causal => $record)
                     <tr>
-                        <th scope="col"></th>
-                        <th scope="col" style="border-left:3px solid white;"></th>
-                        <th scope="col" style="border-left:3px solid white;"></th>
-                        <th scope="col" style="border-left:3px solid white;"></th>
-                        <th scope="col" style="border-left:3px solid white;"></th>
+                        @php
+                        $parts = explode("§", $causal);
+                        $d = $parts[0] ?? '';
+                        $c = $parts[1] ?? '';
+                        $n = $parts[2] ?? '';
+                        $det = $parts[3] ?? '';
+                        $del = $parts[4] ?? '';
+
+                        $detailParts = explode('|', $det);
+                        $isMultiple = count($detailParts) > 1;
+                        $displayDetail = $isMultiple ? 'Varie' : $det;
+                        @endphp
+                        <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{date("d/m/Y", strtotime($d))}}</td>
+                        <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$c}}</td>
+                        <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
+                            @if($isMultiple)
+                                <span class="varie-link" data-causals="{{implode('|', array_slice($detailParts, 1))}}" style="color: #0C6197; cursor: pointer; text-decoration: underline;">
+                                    {{$displayDetail}}
+                                </span>
+                            @else
+                                {{$displayDetail}}
+                            @endif
+                        </td>
+                        <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
+                            @if($del == 'DELETED')
+                                <span style='color:red'>Annullata</span>
+                            @endif
+                        </td>
+                        <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$n}}</td>
                         @foreach($payments as $p)
-                            @if($p->type == 'ALL')
-                                <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
-                                <th scope="col" style="text-align:center">Uscite</th>
-                            @elseif($p->type == 'IN')
-                                <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
-                                <th scope="col" style="text-align:center;"></th>
-                            @elseif($p->type == 'OUT')
-                                <th style="border-left:3px solid white;"></th>
-                                <th scope="col" style="text-align:center;">Uscite</th>
+                            @if(isset($record[$p->name]))
+                                <td style="text-align:right; border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
+                                    @if(isset($record[$p->name]["IN"]))
+                                        <span class="tablesaw-cell-content " style="color:green">{{formatPrice($record[$p->name]["IN"])}}</span>
+                                    @endif
+                                </td>
+                                <td style="text-align:right;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
+                                    @if(isset($record[$p->name]["OUT"]))
+                                        <span class="tablesaw-cell-content " style="color:red">{{formatPrice($record[$p->name]["OUT"])}}</span>
+                                    @endif
+                                </td>
+                            @else
+                                <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}"></td>
+                                <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}"></td>
                             @endif
                         @endforeach
                     </tr>
-                </thead>
-                <tbody id="checkall-target">
-                    @php $count = 0; @endphp
-                    @foreach($records as $causal => $record)
-                        <tr>
-                            @php
-                            $parts = explode("§", $causal);
-                            $d = $parts[0] ?? '';
-                            $c = $parts[1] ?? '';
-                            $n = $parts[2] ?? ''; // Nominativo
-                            $det = $parts[3] ?? '';
-                            $del = $parts[4] ?? '';
-
-                            // Check if detail contains multiple causals (separated by |)
-                            $detailParts = explode('|', $det);
-                            $isMultiple = count($detailParts) > 1;
-                            $displayDetail = $isMultiple ? 'Varie' : $det;
-                            @endphp
-                            <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{date("d/m/Y", strtotime($d))}}</td>
-                            <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$c}}</td>
-                            <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
-                                @if($isMultiple)
-                                    <span class="varie-link" data-causals="{{implode('|', array_slice($detailParts, 1))}}" style="color: #0C6197; cursor: pointer; text-decoration: underline;">
-                                        {{$displayDetail}}
-                                    </span>
-                                @else
-                                    {{$displayDetail}}
-                                @endif
-                            </td>
-                            <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
-                                @if($del == 'DELETED')
-                                    <span style='color:red'>Annullata</span>
-                                @endif
-                            </td>
-                            <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$n}}</td>
-                            @foreach($payments as $p)
-                                @if(isset($record[$p->name]))
-                                    <td style="text-align:right; border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
-                                        @if(isset($record[$p->name]["IN"]))
-                                            <span class="tablesaw-cell-content " style="color:green">{{formatPrice($record[$p->name]["IN"])}}</span>
-                                        @endif
-                                    </td>
-                                    <td style="text-align:right;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
-                                        @if(isset($record[$p->name]["OUT"]))
-                                            <span class="tablesaw-cell-content " style="color:red">{{formatPrice($record[$p->name]["OUT"])}}</span>
-                                        @endif
-                                    </td>
-                                @else
-                                    <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}"></td>
-                                    <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}"></td>
-                                @endif
-                            @endforeach
-                        </tr>
-                        @php $count++; @endphp
-                    @endforeach
-                </tbody>
+                    @php $count++; @endphp
+                @endforeach
+            </tbody>
             <tfoot>
                 <tr>
                     <td></td>
@@ -223,45 +222,108 @@
         <button type="button" class="btn btn-floating btn-lg" id="btn-back-to-bottom"><i class="fas fa-arrow-down"></i></button>
         <button type="button" class="btn btn-floating btn-lg" id="btn-back-to-top"><i class="fas fa-arrow-up"></i></button>
     </section>
+
     <div class="modal fade" id="causalsModal" tabindex="-1" aria-labelledby="causalsModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
-            <div class="modal-header" style="background-color: #0C6197!important;">
-                <h5 class="modal-title" id="causalsModalLabel" >Dettaglio Causali</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="CHIUDI"></button>
-            </div>
-            <div class="modal-body">
-                <div class="row">
-                <div class="col-12">
-                    <h6>Causali incluse:</h6>
-                    <ul id="causalsList" class="list-group list-group-flush">
-                    <!-- Causals will be populated here by JavaScript -->
-                    </ul>
+                <div class="modal-header" style="background-color: #0C6197!important;">
+                    <h5 class="modal-title" id="causalsModalLabel">Dettaglio Causali</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="CHIUDI"></button>
                 </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-12">
+                            <h6>Causali incluse:</h6>
+                            <ul id="causalsList" class="list-group list-group-flush">
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer" style="background-color: #FFF!important;">
+                    <button type="button" class="btn--ui lightGrey me-2" data-bs-dismiss="modal">CHIUDI</button>
                 </div>
             </div>
-            <div class="modal-footer" style="background-color: #FFF!important;">
-                <button type="button" class="btn--ui lightGrey me-2" data-bs-dismiss="modal">CHIUDI</button>
-            </div>
-            </div>
-    </div>
+        </div>
     </div>
 </div>
 
-
 @push('scripts')
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 @endpush
+
 @push('scripts')
     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
     <style>
+        .loading-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(255, 255, 255, 0.9);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            border-radius: 4px;
+        }
+
+        .loading-content {
+            text-align: center;
+            color: #0C6197;
+        }
+
+        .loading-content i {
+            margin-bottom: 15px;
+            color: #0C6197;
+        }
+
+        .loading-content p {
+            margin: 0;
+            font-size: 16px;
+            font-weight: 500;
+            color: #10172A;
+        }
+
+        .modal {
+            z-index: 9999 !important;
+        }
+
+        .modal-backdrop {
+            z-index: 9998 !important;
+            background-color: rgba(0, 0, 0, 0.6) !important;
+        }
+
+        .modal-content {
+            border-radius: 8px;
+            border: none;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            z-index: 10000 !important;
+        }
+
+        .modal-header {
+            color: white;
+            border-bottom: none;
+            border-radius: 8px 8px 0 0;
+        }
+
+        .modal-header .btn-close {
+            filter: invert(1);
+        }
+
+        .modal-title {
+            font-weight: 600;
+        }
+
+        .varie-link:hover {
+            color: #084c6b !important;
+            text-decoration: underline !important;
+        }
 
         #btn-back-to-top {
             background-color: #0C6197;
             color: white;
             position: fixed;
-            /* bottom: 20px; */
-            /* right: 20px; */
             display: none;
         }
 
@@ -269,17 +331,23 @@
             background-color: #0C6197;
             color: white;
             position: fixed;
-            /* top: 120px; */
-            /* right: 20px; */
             z-index: 9999;
             display: none;
         }
 
+        button[disabled] {
+            opacity: 0.7;
+            cursor: not-allowed;
+        }
+
+        .btn--ui .fa-spinner {
+            margin-right: 5px;
+        }
+
         .scrollTable {
-            margin-left: 0px ;
-            margin-right: 0px ;
+            margin-left: 0px;
+            margin-right: 0px;
             padding: 15px;
-            /*max-width: 800px !important;*/
             overflow-x: auto;
             overflow-y: auto;
             white-space: nowrap;
@@ -292,47 +360,44 @@
         }
 
         table thead {
-        /* Important */
             position: sticky;
             z-index: 100;
             top: 0;
         }
-        .select2-container--default .select2-selection--single{
+
+        .select2-container--default .select2-selection--single {
             background-color: #E9F0F5;
             border: 0.0625rem solid #DFE5EB;
             font-size: 0.75rem;
-        }
-        .select2-selection
-        {
             height: 38px !important;
         }
-        .select2-selection__rendered
-        {
-            padding-top:3px;
+
+        .select2-selection__rendered {
+            padding-top: 3px;
         }
+
         .select2 {
-            width:100% !important;
-        }
-        .i{
-            font-size:16px;
-            font-weight:bold;
-        }
-        .cellBorder
-        {
-            border-left: 1px solid grey;
+            width: 100% !important;
         }
 
-        .select2-selection--multiple{
+        .select2-selection--multiple {
             overflow: hidden !important;
             height: auto !important;
         }
+
         .select2-container {
             box-sizing: border-box;
             display: inline-block;
             margin: 0;
             position: relative;
             vertical-align: middle;
+            z-index: 999 !important;
         }
+
+        .select2-dropdown {
+            z-index: 999 !important;
+        }
+
         .select2-container .select2-selection--single {
             box-sizing: border-box;
             cursor: pointer;
@@ -341,6 +406,7 @@
             user-select: none;
             -webkit-user-select: none;
         }
+
         .select2-container .select2-selection--single .select2-selection__rendered {
             display: block;
             padding-left: 8px;
@@ -349,9 +415,11 @@
             text-overflow: ellipsis;
             white-space: nowrap;
         }
+
         button#exportDropdown.btn--ui_outline.light {
             font-weight: normal !important;
         }
+
         .btn--ui_outline.light.dropdown-toggle:active,
         .btn--ui_outline.light.dropdown-toggle:focus,
         .btn--ui_outline.light.dropdown-toggle.show {
@@ -365,6 +433,45 @@
             color: #10172A !important;
         }
 
+        .form-select {
+            height: 38px !important;
+        }
+
+        body.modal-open {
+            overflow: hidden;
+        }
+
+        .modal-dialog {
+            z-index: 10001 !important;
+            margin: 1.75rem auto;
+        }
+
+        .list-group-item {
+            border-left: none;
+            border-right: none;
+            border-top: 1px solid #dee2e6;
+            padding: 12px 15px;
+        }
+
+        .list-group-item:first-child {
+            border-top: none;
+        }
+
+        .list-group-item:last-child {
+            border-bottom: none;
+        }
+
+        @media (max-width: 768px) {
+            .col-md-2, .col-md-3, .col-md-4 {
+                margin-bottom: 10px;
+            }
+
+            .prima--nota_buttons {
+                float: none !important;
+                margin-top: 10px !important;
+                text-align: center;
+            }
+        }
     </style>
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@@ -373,18 +480,22 @@
 
 @push('scripts')
     <script>
+        function closeSelect2Dropdowns() {
+            $('.filterCausals').each(function() {
+                if ($(this).hasClass('select2-hidden-accessible')) {
+                    $(this).select2('close');
+                }
+            });
+            $('.filterMember').each(function() {
+                if ($(this).hasClass('select2-hidden-accessible')) {
+                    $(this).select2('close');
+                }
+            });
+        }
 
-        Livewire.on('load-table', () => {
-            load();
-        });
-
-
-        function load()
-        {
+        function load() {
             $(document).ready(function(){
-
                 $(document).on("keypress", $('.filterCausals'), function (e) {
-
                     setTimeout(() => {
                         $(".select2-results__option").each(function(){
                             var txt = $(this).html();
@@ -394,13 +505,24 @@
                     }, 100);
                 });
 
-                $('.filterCausals').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
-                $('.filterCausals').on('change', function (e) {
+                if (!$('.filterCausals').hasClass('select2-hidden-accessible')) {
+                    $('.filterCausals').select2({
+                        "language": {"noResults": function(){return "Nessun risultato";}},
+                        "dropdownParent": $('body'),
+                        "width": "100%"
+                    });
+                }
+
+                $('.filterCausals').off('change.customHandler').on('change.customHandler', function (e) {
                     var data = $('.filterCausals').select2("val");
                     @this.set('filterCausals', data);
                 });
 
-                $('.filterCausals').on('select2:open', function (e) {
+                $('.filterCausals').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
+                    if ($('#causalsModal').hasClass('show')) {
+                        $('#causalsModal').modal('hide');
+                    }
+
                     setTimeout(() => {
                         $(".select2-results__option").each(function(){
                             var txt = $(this).html();
@@ -410,45 +532,30 @@
                     }, 100);
                 });
 
-                $('.filterMember').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
-                $('.filterMember').on('change', function (e) {
+                if (!$('.filterMember').hasClass('select2-hidden-accessible')) {
+                    $('.filterMember').select2({
+                        "language": {"noResults": function(){return "Nessun risultato";}},
+                        "dropdownParent": $('body'),
+                        "width": "100%"
+                    });
+                }
+
+                $('.filterMember').off('change.customHandler').on('change.customHandler', function (e) {
                     var data = $('.filterMember').select2("val");
                     @this.set('filterMember', data);
                 });
 
+                $('.filterMember').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
+                    if ($('#causalsModal').hasClass('show')) {
+                        $('#causalsModal').modal('hide');
+                    }
+                });
             });
         }
 
-        Livewire.on('load-select', () => {
-            $('.filterCausals').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
-            $('.filterCausals').on('change', function (e) {
-                var data = $('.filterCausals').select2("val");
-                @this.set('filterCausals', data);
-            });
-            $('.filterMember').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
-            $('.filterMember').on('change', function (e) {
-                var data = $('.filterMember').select2("val");
-                @this.set('filterMember', data);
-            });
-            setMaxWidth();
-            setMaxHeight();
-        });
-
-        load();
-
-
-    </script>
-
-@endpush
-
-@push('scripts')
-    <script>
-
-        function printData()
-        {
-
-            var divToPrint=document.getElementById("tablesaw-350");
-            newWin= window.open("");
+        function printData() {
+            var divToPrint = document.getElementById("tablesaw-350");
+            newWin = window.open("");
             var htmlToPrint = '' +
                 '<style type="text/css">' +
                 'table th, table td {' +
@@ -463,135 +570,56 @@
             newWin.close();
         }
 
-        document.querySelector("#print").addEventListener("click", function(){
-        printData();
-        });
-
-        $( document ).ready( function(){
-
-            setMaxWidth();
-            setMaxHeight();
-            $( window ).bind( "resize", setMaxWidth );
-            $( window ).bind( "resize", setMaxHeight );
-
-            $(".open-filter").click(function(){
-                setMaxWidth();
-                setMaxHeight();
-            });
-
-        });
-
-            function setMaxWidth() {
-            }
-
-            function setMaxHeight() {
-            }
-
-            let mybuttonBottom = document.getElementById("btn-back-to-bottom");
-            let mybutton = document.getElementById("btn-back-to-top");
-
-            window.onscroll = function () {
-                scrollFunction();
-            };
-
+        function scrollFunction() {
             const element = document.getElementById('resume-table');
-                element.onscroll = (e)=>{
-                    scrollFunction();
-                };
-
-                function scrollFunction() {
-                if (
-                    element.scrollTop > 20
-                ) {
-                    mybutton.style.display = "block";
-                    mybuttonBottom.style.display = "block";
-                } else {
-                    mybutton.style.display = "none";
-                    mybuttonBottom.style.display = "none";
-                }
-            }
+            const mybuttonBottom = document.getElementById("btn-back-to-bottom");
+            const mybutton = document.getElementById("btn-back-to-top");
 
-            function scrollFunctionOld() {
-            if (
-                document.body.scrollTop > 20 ||
-                document.documentElement.scrollTop > 20
-            ) {
+            if (element.scrollTop > 20) {
                 mybutton.style.display = "block";
                 mybuttonBottom.style.display = "block";
             } else {
                 mybutton.style.display = "none";
                 mybuttonBottom.style.display = "none";
             }
-            }
-            // When the user clicks on the button, scroll to the top of the document
-            mybutton.addEventListener("click", backToTop);
-            mybuttonBottom.addEventListener("click", backToBottom);
+        }
 
-            function backToTop() {
-                $('#resume-table').scrollTop(0);
-                /*document.body.scrollTop = 0;
-                document.documentElement.scrollTop = 0;*/
-            }
-            function backToBottom() {
-                $('#resume-table').scrollTop($('#resume-table')[0].scrollHeight);
-                //window.scrollTo(0, document.body.scrollHeight);
-            }
+        function backToTop() {
+            $('#resume-table').scrollTop(0);
+        }
 
-            function reset()
-            {
-                $('.filterMember').val('');
-                $('.filterMember').trigger('change');
-                $('.filterCausals').val('');
-                $('.filterCausals').trigger('change');
-                var today = new Date().toISOString().split('T')[0];
+        function backToBottom() {
+            $('#resume-table').scrollTop($('#resume-table')[0].scrollHeight);
+        }
 
-                // Update the form inputs
-                window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).set('fromDate', today);
-                window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).set('toDate', today);
+        $(document).ready(function() {
+            load();
+            document.querySelector("#print").addEventListener("click", function(){
+                printData();
+            });
 
-                // Reset the applied dates and trigger filter
-                window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).set('appliedFromDate', today);
-                window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).set('appliedToDate', today);
+            const element = document.getElementById('resume-table');
+            element.onscroll = scrollFunction;
 
-                // Trigger re-render
-                window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).call('$refresh');
-            }
+            const mybuttonBottom = document.getElementById("btn-back-to-bottom");
+            const mybutton = document.getElementById("btn-back-to-top");
 
-            $(document).ready(function() {
-            // Safe function to close select2 dropdowns
-            function closeSelect2Dropdowns() {
-                // Only close select2 on elements that actually have select2 initialized
-                $('.filterCausals').each(function() {
-                    if ($(this).hasClass('select2-hidden-accessible')) {
-                        $(this).select2('close');
-                    }
-                });
-                $('.filterMember').each(function() {
-                    if ($(this).hasClass('select2-hidden-accessible')) {
-                        $(this).select2('close');
-                    }
-                });
-            }
+            mybutton.addEventListener("click", backToTop);
+            mybuttonBottom.addEventListener("click", backToBottom);
 
-            // Handle click on "Varie" links
             $(document).on('click', '.varie-link', function(e) {
                 e.preventDefault();
                 e.stopPropagation();
 
-                // Close any open select2 dropdowns safely
                 closeSelect2Dropdowns();
 
-                // Get the causals data from the data attribute
                 const causalsData = $(this).data('causals');
 
                 if (causalsData) {
-                    // Split the causals by | separator
                     const causals = causalsData.split('|');
 
-                    // Clear the previous list
                     $('#causalsList').empty();
 
-                    // Populate the modal with causals
                     causals.forEach(function(causal) {
                         if (causal.trim()) {
                             $('#causalsList').append(
@@ -603,132 +631,36 @@
                         }
                     });
 
-                    // Show the modal with proper focus management
                     $('#causalsModal').modal('show');
 
-                    // Ensure modal gets focus
                     $('#causalsModal').on('shown.bs.modal', function () {
                         $(this).find('.btn-close').focus();
                     });
                 }
             });
 
-            // Close select2 dropdowns when modal is opening
             $('#causalsModal').on('show.bs.modal', function () {
                 closeSelect2Dropdowns();
                 $('body').addClass('modal-open');
             });
 
-            // Clean up when modal is closed
             $('#causalsModal').on('hidden.bs.modal', function () {
                 $('body').removeClass('modal-open');
             });
         });
 
-        // Update the existing load function to include the new event handlers
-        function load()
-        {
-            $(document).ready(function(){
-
-                $(document).on("keypress", $('.filterCausals'), function (e) {
-                    setTimeout(() => {
-                        $(".select2-results__option").each(function(){
-                            var txt = $(this).html();
-                            var count = (txt.match(/-/g) || []).length;
-                            $(this).addClass('paddingLeftSelect' + count);
-                        });
-                    }, 100);
-                });
-
-                // Initialize select2 only if not already initialized
-                if (!$('.filterCausals').hasClass('select2-hidden-accessible')) {
-                    $('.filterCausals').select2({
-                        "language": {"noResults": function(){return "Nessun risultato";}},
-                        "dropdownParent": $('body'),
-                        "width": "100%"
-                    });
-                }
-
-                $('.filterCausals').off('change.customHandler').on('change.customHandler', function (e) {
-                    var data = $('.filterCausals').select2("val");
-                    @this.set('filterCausals', data);
-                });
-
-                $('.filterCausals').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
-                    // Close modal if open when select2 opens
-                    if ($('#causalsModal').hasClass('show')) {
-                        $('#causalsModal').modal('hide');
-                    }
-
-                    setTimeout(() => {
-                        $(".select2-results__option").each(function(){
-                            var txt = $(this).html();
-                            var count = (txt.match(/-/g) || []).length;
-                            $(this).addClass('paddingLeftSelect' + count);
-                        });
-                    }, 100);
-                });
-
-                // Initialize select2 only if not already initialized
-                if (!$('.filterMember').hasClass('select2-hidden-accessible')) {
-                    $('.filterMember').select2({
-                        "language": {"noResults": function(){return "Nessun risultato";}},
-                        "dropdownParent": $('body'),
-                        "width": "100%"
-                    });
-                }
-
-                $('.filterMember').off('change.customHandler').on('change.customHandler', function (e) {
-                    var data = $('.filterMember').select2("val");
-                    @this.set('filterMember', data);
-                });
-
-                $('.filterMember').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
-                    // Close modal if open when select2 opens
-                    if ($('#causalsModal').hasClass('show')) {
-                        $('#causalsModal').modal('hide');
-                    }
-                });
-
-                // Re-attach event handlers for "Varie" links after Livewire updates
-                $(document).off('click', '.varie-link').on('click', '.varie-link', function(e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    // Close any open select2 dropdowns safely
-                    $('.filterCausals').each(function() {
-                        if ($(this).hasClass('select2-hidden-accessible')) {
-                            $(this).select2('close');
-                        }
-                    });
-                    $('.filterMember').each(function() {
-                        if ($(this).hasClass('select2-hidden-accessible')) {
-                            $(this).select2('close');
-                        }
-                    });
-
-                    const causalsData = $(this).data('causals');
-
-                    if (causalsData) {
-                        const causals = causalsData.split('|');
-
-                        $('#causalsList').empty();
+        Livewire.on('load-table', () => {
+            load();
+        });
 
-                        causals.forEach(function(causal) {
-                            if (causal.trim()) {
-                                $('#causalsList').append(
-                                    '<li class="list-group-item">' +
-                                    '<i class="fas fa-tags me-2" style="color: #0C6197;"></i>' +
-                                    causal.trim() +
-                                    '</li>'
-                                );
-                            }
-                        });
+        Livewire.on('load-select', () => {
+            load();
+        });
 
-                        $('#causalsModal').modal('show');
-                    }
-                });
-            });
-        }
+        Livewire.on('filters-reset', () => {
+            $('.filterMember').val('').trigger('change');
+            $('.filterCausals').val('').trigger('change');
+            load();
+        });
     </script>
 @endpush