mese e giorno personalizzaato prima nota

app/Http/Livewire/Record.php

@@ -40,7 +40,11 @@ class Record extends Component
     public $exportEmailAddress = '';
     public $exportEmailSubject = 'Prima Nota - Export';
     private $causalAmounts = [];
-
+    public $selectedMonth;
+    public $showMonthPicker = false;
+    public $selectedDay;
+    public $showDayPicker = false;
+    public $selectedYear;
     protected $rules = [
         'exportEmailAddress' => 'required_if:sendViaEmail,true|email',
         'exportEmailSubject' => 'required_if:sendViaEmail,true|string|max:255',
@@ -71,14 +75,16 @@ class Record extends Component
 
         $this->exportEmailSubject = 'Prima Nota - Export del ' . date('d/m/Y');
 
-
         $this->getCausals(\App\Models\Causal::select('id', 'name')->where('parent_id', null)->get(), 0);
 
         $this->members = \App\Models\Member::select(['id', 'first_name', 'last_name', 'fiscal_code'])->orderBy('last_name')->orderBy('first_name')->get();
 
         $this->payments = \App\Models\PaymentMethod::select('id', 'name', 'type')->where('enabled', true)->where('money', false)->get();
-    }
 
+        $this->selectedMonth = date('Y-m');
+        $this->selectedDay = date('Y-m-d');
+        $this->selectedYear = date('Y');
+    }
     private function generateExportDataAndTotals($fromDate, $toDate)
     {
         Log::info('generateExportDataAndTotals: Start (combined method)', [
@@ -390,6 +396,11 @@ class Record extends Component
     public function resetFilters()
     {
         $this->selectedPeriod = 'OGGI';
+        $this->selectedMonth = date('Y-m');
+        $this->selectedDay = date('Y-m-d');
+        $this->selectedYear = date('Y');
+        $this->showMonthPicker = false;
+        $this->showDayPicker = false;
         $this->filterCausals = [];
         $this->filterMember = null;
 
@@ -402,6 +413,7 @@ class Record extends Component
         $this->emit('filters-reset');
     }
 
+
     public function applyFilters()
     {
         $this->isFiltering = true;
@@ -445,6 +457,22 @@ class Record extends Component
                 $this->toDate = $lastMonth->endOfMonth()->format('Y-m-d');
                 break;
 
+            case 'MESE_PERSONALIZZATO':
+                if (!empty($this->selectedMonth)) {
+                    $firstDay = date('Y-m-01', strtotime($this->selectedMonth . '-01'));
+                    $lastDay = date('Y-m-t', strtotime($this->selectedMonth . '-01'));
+                    $this->fromDate = $firstDay;
+                    $this->toDate = $lastDay;
+                }
+                break;
+
+            case 'GIORNO_PERSONALIZZATO':
+                if (!empty($this->selectedDay)) {
+                    $this->fromDate = $this->selectedDay;
+                    $this->toDate = $this->selectedDay;
+                }
+                break;
+
             case 'ULTIMO TRIMESTRE':
                 $this->fromDate = $today->copy()->subMonths(3)->format('Y-m-d');
                 $this->toDate = $today->format('Y-m-d');
@@ -456,7 +484,6 @@ class Record extends Component
                 break;
         }
     }
-
     public function getCausals($records, $indentation)
     {
         foreach ($records as $record) {
@@ -1383,7 +1410,6 @@ class Record extends Component
 
     private function getPreferredEmail()
     {
-        // Try multiple sources in order of preference
         $email = auth()->user()->email ?? null;
 
         if (empty($email)) {
@@ -1396,10 +1422,68 @@ class Record extends Component
         }
 
         if (empty($email)) {
-            // Get from user input or company default
             $email = config('mail.default_recipient', '');
         }
 
         return $email;
     }
+
+        public function updatedSelectedDay($value)
+    {
+        if (!empty($value)) {
+            $this->selectedPeriod = 'GIORNO_PERSONALIZZATO';
+            $this->fromDate = $value;
+            $this->toDate = $value;
+            $this->applyFilters();
+        }
+    }
+
+    public function selectDay($day)
+    {
+        $this->selectedDay = $day;
+        $this->showDayPicker = false;
+        $this->updatedSelectedDay($day);
+    }
+
+    public function toggleDayPicker()
+    {
+        $this->showDayPicker = !$this->showDayPicker;
+    }
+
+    public function selectToday()
+    {
+        $today = date('Y-m-d');
+        $this->selectDay($today);
+    }
+
+    public function selectYesterday()
+    {
+        $yesterday = date('Y-m-d', strtotime('-1 day'));
+        $this->selectDay($yesterday);
+    }
+
+    // Updated month methods to work with both custom month and day
+    public function updatedSelectedMonth($value)
+    {
+        if (!empty($value)) {
+            $this->selectedPeriod = 'MESE_PERSONALIZZATO';
+            $firstDay = date('Y-m-01', strtotime($value . '-01'));
+            $lastDay = date('Y-m-t', strtotime($value . '-01'));
+            $this->fromDate = $firstDay;
+            $this->toDate = $lastDay;
+            $this->applyFilters();
+        }
+    }
+
+    public function selectMonth($month)
+    {
+        $this->selectedMonth = $month;
+        $this->showMonthPicker = false;
+        $this->updatedSelectedMonth($month);
+    }
+
+    public function toggleMonthPicker()
+    {
+        $this->showMonthPicker = !$this->showMonthPicker;
+    }
 }

resources/views/livewire/records.blade.php

@@ -1,3 +1,4 @@
+
 <div class="col card--ui" id="card--dashboard">
 
      <header id="title--section" style="display:none !important"  class="d-flex align-items-center justify-content-between">
@@ -28,14 +29,235 @@
             </div>
             <div class="col-md-3">
                 Periodo
-                <select wire:model="selectedPeriod" class="form-select" @if($isFiltering) disabled @endif style="height: 43px!important;">
-                    <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 class="col-12 mb-3">
+                    <select wire:model="selectedPeriod" class="form-select" @if($isFiltering) disabled @endif style="height: 43px!important;">
+                        <option value="OGGI">Oggi</option>
+                        <option value="IERI">Ieri</option>
+                        <option value="GIORNO_PERSONALIZZATO">Giorno Personalizzato</option>
+                        <option value="MESE CORRENTE">Mese Corrente</option>
+                        <option value="MESE PRECEDENTE">Mese Precedente</option>
+                        <option value="MESE_PERSONALIZZATO">Mese Personalizzato</option>
+                        <option value="ULTIMO TRIMESTRE">Ultimo Trimestre</option>
+                        <option value="ULTIMO QUADRIMESTRE">Ultimo Quadrimestre</option>
+                    </select>
+                </div>
+
+                @if($selectedPeriod === 'GIORNO_PERSONALIZZATO')
+                <div class="col-12 mb-2" wire:transition>
+                    <div class="day-picker-container position-relative">
+                        <div class="input-group">
+                            <input type="date"
+                                wire:model="selectedDay"
+                                class="form-control"
+                                style="height: 43px!important;"
+                                @if($isFiltering) disabled @endif>
+                        </div>
+
+                        @if($showDayPicker)
+                        <div class="day-picker-dropdown position-absolute bg-white border rounded shadow-lg p-3 mt-1"
+                            style="z-index: 1060; width: 100%; max-width: 350px;">
+                            <div class="d-flex justify-content-between align-items-center mb-3">
+                                <h6 class="mb-0 text-primary">
+                                    <i class="fa-regular fa-calendar me-2"></i>
+                                    Seleziona Giorno
+                                </h6>
+                                <button type="button"
+                                        class="btn-close btn-sm"
+                                        wire:click="toggleDayPicker"></button>
+                            </div>
+
+                            <div class="row g-2 mb-3">
+                                <div class="col-6">
+                                    <button type="button"
+                                            class="btn btn-sm btn-outline-primary w-100"
+                                            wire:click="selectToday">
+                                        <i class="fas fa-calendar-day me-1"></i>
+                                        Oggi
+                                    </button>
+                                </div>
+                                <div class="col-6">
+                                    <button type="button"
+                                            class="btn btn-sm btn-outline-secondary w-100"
+                                            wire:click="selectYesterday">
+                                        <i class="fas fa-step-backward me-1"></i>
+                                        Ieri
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="mb-3">
+                                <label class="form-label small">Anno</label>
+                                <select wire:model="selectedYear" class="form-select form-select-sm">
+                                    @php
+                                        $currentYear = date('Y');
+                                        $selectedDayYear = $selectedDay ? substr($selectedDay, 0, 4) : $currentYear;
+                                    @endphp
+                                    @for($year = $currentYear - 3; $year <= $currentYear + 1; $year++)
+                                        <option value="{{ $year }}" {{ $year == $selectedDayYear ? 'selected' : '' }}>
+                                            {{ $year }}
+                                        </option>
+                                    @endfor
+                                </select>
+                            </div>
+
+                            <div class="mb-3">
+                                <label class="form-label small">Mese</label>
+                                <div class="row g-1">
+                                    @php
+                                        $months = [
+                                            '01' => 'Gen', '02' => 'Feb', '03' => 'Mar', '04' => 'Apr',
+                                            '05' => 'Mag', '06' => 'Giu', '07' => 'Lug', '08' => 'Ago',
+                                            '09' => 'Set', '10' => 'Ott', '11' => 'Nov', '12' => 'Dic'
+                                        ];
+                                        $currentMonth = $selectedDay ? substr($selectedDay, 5, 2) : date('m');
+                                        $currentYear = $selectedDay ? substr($selectedDay, 0, 4) : date('Y');
+                                    @endphp
+
+                                    @foreach($months as $monthNum => $monthName)
+                                        <div class="col-3">
+                                            <button type="button"
+                                                    class="btn btn-sm w-100 month-selector {{ $monthNum === $currentMonth ? 'btn-primary' : 'btn-outline-secondary' }}"
+                                                    data-month="{{ $monthNum }}">
+                                                {{ $monthName }}
+                                            </button>
+                                        </div>
+                                    @endforeach
+                                </div>
+                            </div>
+
+                            <div class="mb-3">
+                                <label class="form-label small">Giorno</label>
+                                <div class="day-grid" id="dayGrid">
+                                </div>
+                            </div>
+
+                            <div class="row g-2">
+                                <div class="col-6">
+                                    <button type="button"
+                                            class="btn btn-sm btn-success w-100"
+                                            id="confirmDaySelection">
+                                        <i class="fas fa-check me-1"></i>
+                                        Conferma
+                                    </button>
+                                </div>
+                                <div class="col-6">
+                                    <button type="button"
+                                            class="btn btn-sm btn-outline-secondary w-100"
+                                            wire:click="toggleDayPicker">
+                                        <i class="fas fa-times me-1"></i>
+                                        Annulla
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        @endif
+                    </div>
+                </div>
+
+                @if($selectedDay && $selectedPeriod === 'GIORNO_PERSONALIZZATO')
+                <div class="col-12 mb-2">
+                    <div class="alert alert-info py-2 px-3 mb-0" style="font-size: 0.875rem;">
+                        <i class="fas fa-info-circle me-1"></i>
+                        <strong>Giorno selezionato:</strong><br>
+                        {{ \Carbon\Carbon::createFromFormat('Y-m-d', $selectedDay)->locale('it')->isoFormat('dddd, D MMMM YYYY') }}
+                    </div>
+                </div>
+                @endif
+                @endif
+
+                @if($selectedPeriod === 'MESE_PERSONALIZZATO')
+                <div class="col-12 mb-2" wire:transition>
+                    <div class="month-picker-container position-relative">
+                        <div class="input-group">
+                            <input type="month"
+                                wire:model="selectedMonth"
+                                class="form-control"
+                                style="height: 43px!important;"
+                                @if($isFiltering) disabled @endif>
+                        </div>
+
+                        @if($showMonthPicker)
+                        <div class="month-picker-dropdown position-absolute bg-white border rounded shadow-lg p-3 mt-1"
+                            style="z-index: 1060; width: 100%; max-width: 300px;">
+                            <div class="d-flex justify-content-between align-items-center mb-3">
+                                <h6 class="mb-0 text-primary">
+                                    <i class="fa-regular fa-calendar me-2"></i>
+                                    Seleziona Mese
+                                </h6>
+                                <button type="button"
+                                        class="btn-close btn-sm"
+                                        wire:click="toggleMonthPicker"></button>
+                            </div>
+
+                            <div class="mb-3">
+                                <label class="form-label small">Anno</label>
+                                <select wire:model="selectedYear" class="form-select form-select-sm">
+                                    @php
+                                        $currentYear = date('Y');
+                                        $selectedYear = $selectedMonth ? substr($selectedMonth, 0, 4) : $currentYear;
+                                    @endphp
+                                    @for($year = $currentYear - 3; $year <= $currentYear + 1; $year++)
+                                        <option value="{{ $year }}" {{ $year == $selectedYear ? 'selected' : '' }}>
+                                            {{ $year }}
+                                        </option>
+                                    @endfor
+                                </select>
+                            </div>
+
+                            <div class="row g-1 mb-3">
+                                @php
+                                    $months = [
+                                        '01' => 'Gen', '02' => 'Feb', '03' => 'Mar', '04' => 'Apr',
+                                        '05' => 'Mag', '06' => 'Giu', '07' => 'Lug', '08' => 'Ago',
+                                        '09' => 'Set', '10' => 'Ott', '11' => 'Nov', '12' => 'Dic'
+                                    ];
+                                    $currentMonth = $selectedMonth ?: date('Y-m');
+                                @endphp
+
+                                @foreach($months as $monthNum => $monthName)
+                                    <div class="col-3">
+                                        <button type="button"
+                                                class="btn btn-sm w-100 {{ ($selectedYear . '-' . $monthNum) === $currentMonth ? 'btn-primary' : 'btn-outline-secondary' }}"
+                                                wire:click="selectMonth('{{ $selectedYear }}-{{ $monthNum }}')">
+                                            {{ $monthName }}
+                                        </button>
+                                    </div>
+                                @endforeach
+                            </div>
+
+                            <div class="row g-1">
+                                <div class="col-6">
+                                    <button type="button"
+                                            class="btn btn-sm btn-outline-primary w-100"
+                                            wire:click="selectMonth('{{ date('Y-m') }}')">
+                                        <i class="fas fa-calendar-day me-1"></i>
+                                        Questo Mese
+                                    </button>
+                                </div>
+                                <div class="col-6">
+                                    <button type="button"
+                                            class="btn btn-sm btn-outline-secondary w-100"
+                                            wire:click="selectMonth('{{ date('Y-m', strtotime('-1 month')) }}')">
+                                        <i class="fas fa-step-backward me-1"></i>
+                                        Mese Scorso
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        @endif
+                    </div>
+                </div>
+
+                @if($selectedMonth && $selectedPeriod === 'MESE_PERSONALIZZATO')
+                <div class="col-12 mb-2">
+                    <div class="alert alert-info py-2 px-3 mb-0" style="font-size: 0.875rem;">
+                        <i class="fas fa-info-circle me-1"></i>
+                        <strong>Periodo selezionato:</strong><br>
+                        {{ \Carbon\Carbon::createFromFormat('Y-m', $selectedMonth)->locale('it')->isoFormat('MMMM YYYY') }}
+                    </div>
+                </div>
+                @endif
+                @endif
             </div>
             <div class="col-md-2">
                 <div class="prima--nota_buttons ms-auto" style="float:right; margin-top:25px;">
@@ -725,7 +947,6 @@
             border-bottom: none;
         }
 
-        /* Enhanced styles for the causal modal with amounts */
         .list-group-item.d-flex {
             display: flex !important;
             justify-content: space-between !important;
@@ -746,6 +967,288 @@
             padding: 1rem 0;
         }
 
+         .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;
+        }
+
+        /* New styles for Custom Day Picker */
+        .day-picker-container {
+            position: relative;
+        }
+
+        .day-picker-dropdown {
+            max-height: 600px;
+            overflow-y: auto;
+            border: 1px solid #dee2e6;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+            z-index: 1060;
+            animation: slideDown 0.2s ease-out;
+            transform-origin: top;
+        }
+
+        .day-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 2px;
+            margin-bottom: 1rem;
+        }
+
+        .day-grid .day-header {
+            text-align: center;
+            font-weight: bold;
+            font-size: 0.75rem;
+            padding: 0.25rem;
+            background-color: #f8f9fa;
+            border-radius: 3px;
+            color: #6c757d;
+        }
+
+        .day-grid .day-button {
+            padding: 0.375rem 0.25rem;
+            font-size: 0.75rem;
+            border: 1px solid #dee2e6;
+            background: white;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.15s ease-in-out;
+            text-align: center;
+            min-height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .day-grid .day-button:hover:not(.disabled) {
+            background-color: #e9ecef;
+            border-color: #0C6197;
+        }
+
+        .day-grid .day-button.selected {
+            background-color: #0C6197;
+            border-color: #0C6197;
+            color: white;
+        }
+
+        .day-grid .day-button.today {
+            border-color: #28a745;
+            font-weight: bold;
+        }
+
+        .day-grid .day-button.disabled {
+            color: #6c757d;
+            background-color: #f8f9fa;
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        .day-grid .day-button.other-month {
+            color: #adb5bd;
+            background-color: #f8f9fa;
+        }
+
+        .month-selector.btn-primary {
+            background-color: #0C6197;
+            border-color: #0C6197;
+        }
+
+        .month-selector.btn-outline-secondary:hover {
+            background-color: #6c757d;
+            border-color: #6c757d;
+            color: white;
+        }
+
+        input[type="date"] {
+            background-color: #E9F0F5;
+            border: 0.0625rem solid #DFE5EB;
+            font-size: 0.75rem;
+        }
+
+        input[type="date"]:focus {
+            border-color: #0C6197;
+            box-shadow: 0 0 0 0.2rem rgba(12, 97, 151, 0.25);
+        }
+
+        input[type="date"]::-webkit-calendar-picker-indicator {
+            cursor: pointer;
+            opacity: 0.7;
+            transition: opacity 0.15s ease-in-out;
+        }
+
+        input[type="date"]::-webkit-calendar-picker-indicator:hover {
+            opacity: 1;
+        }
+
+        @media (max-width: 768px) {
+            .day-picker-dropdown {
+                width: 100% !important;
+                max-width: none !important;
+            }
+
+            .day-grid .day-button {
+                font-size: 0.7rem;
+                padding: 0.25rem;
+                min-height: 28px;
+            }
+        }
+
+        .month-picker-container {
+            position: relative;
+        }
+
+        .month-picker-dropdown {
+            max-height: 500px;
+            overflow-y: auto;
+            border: 1px solid #dee2e6;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+            z-index: 1060;
+        }
+
+        .month-picker-dropdown .btn {
+            font-size: 0.75rem;
+            padding: 0.375rem 0.5rem;
+            border-radius: 4px;
+            transition: all 0.15s ease-in-out;
+        }
+
+        .month-picker-dropdown .btn-sm {
+            font-size: 0.875rem;
+            padding: 0.25rem 0.5rem;
+        }
+
+        .month-picker-dropdown .btn-close {
+            padding: 0.25rem;
+            font-size: 0.75rem;
+        }
+
+        .month-picker-dropdown .btn-primary {
+            background-color: #0C6197;
+            border-color: #0C6197;
+        }
+
+        .month-picker-dropdown .btn-outline-primary {
+            color: #0C6197;
+            border-color: #0C6197;
+        }
+
+        .month-picker-dropdown .btn-outline-primary:hover {
+            background-color: #0C6197;
+            border-color: #0C6197;
+        }
+
+        .month-picker-dropdown .btn-outline-secondary:hover {
+            background-color: #6c757d;
+            border-color: #6c757d;
+        }
+
+        input[type="month"] {
+            background-color: #E9F0F5;
+            border: 0.0625rem solid #DFE5EB;
+            font-size: 0.75rem;
+        }
+
+        input[type="month"]:focus {
+            border-color: #0C6197;
+            box-shadow: 0 0 0 0.2rem rgba(12, 97, 151, 0.25);
+        }
+
+        input[type="month"]::-webkit-calendar-picker-indicator {
+            cursor: pointer;
+            opacity: 0.7;
+            transition: opacity 0.15s ease-in-out;
+        }
+
+        input[type="month"]::-webkit-calendar-picker-indicator:hover {
+            opacity: 1;
+        }
+
+        .alert-info {
+            background-color: rgba(12, 97, 151, 0.1);
+            border-color: rgba(12, 97, 151, 0.2);
+            color: #0C6197;
+            border-radius: 6px;
+        }
+
+        .month-picker-dropdown {
+            animation: slideDown 0.2s ease-out;
+            transform-origin: top;
+        }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px) scaleY(0.8);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scaleY(1);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .month-picker-dropdown {
+                width: 100% !important;
+                max-width: none !important;
+            }
+
+            .month-picker-dropdown .row.g-1 .col-3 {
+                flex: 0 0 25%;
+                max-width: 25%;
+            }
+        }
+
+        [wire\:transition] {
+            transition: all 0.3s ease-in-out;
+        }
+
+        .select2-container {
+            z-index: 999 !important;
+        }
+
+        .select2-dropdown {
+            z-index: 999 !important;
+        }
+
+        .month-picker-dropdown {
+            z-index: 1060 !important;
+        }
+
+        .month-picker-dropdown .btn-group-sm .btn {
+            padding: 0.25rem 0.5rem;
+            font-size: 0.75rem;
+        }
+
+        .month-picker-container .form-label {
+            font-weight: 600;
+            color: #10172A;
+            margin-bottom: 0.5rem;
+        }
+
+        .month-picker-container .input-group .btn {
+            border-left: 0;
+            background-color: #f8f9fa;
+            border-color: #DFE5EB;
+            color: #6c757d;
+        }
+
+        .month-picker-container .input-group .btn:hover {
+            background-color: #e9ecef;
+            color: #0C6197;
+        }
+
     </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>
@@ -754,6 +1257,133 @@
 
 @push('scripts')
     <script>
+         let selectedDayValue = '';
+        let currentDisplayMonth = '';
+        let currentDisplayYear = '';
+
+        function initializeDayPicker() {
+            const today = new Date();
+            const selectedDay = @this.get('selectedDay');
+
+            if (selectedDay) {
+                selectedDayValue = selectedDay;
+                const selectedDate = new Date(selectedDay);
+                currentDisplayMonth = String(selectedDate.getMonth() + 1).padStart(2, '0');
+                currentDisplayYear = String(selectedDate.getFullYear());
+            } else {
+                currentDisplayMonth = String(today.getMonth() + 1).padStart(2, '0');
+                currentDisplayYear = String(today.getFullYear());
+            }
+
+            updateDayGrid();
+        }
+
+        function updateDayGrid() {
+            const dayGrid = document.getElementById('dayGrid');
+            if (!dayGrid) return;
+
+            const year = parseInt(currentDisplayYear);
+            const month = parseInt(currentDisplayMonth);
+            const today = new Date();
+            const selectedDate = selectedDayValue ? new Date(selectedDayValue) : null;
+
+            dayGrid.innerHTML = '';
+
+            const dayHeaders = ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'];
+            dayHeaders.forEach(header => {
+                const headerDiv = document.createElement('div');
+                headerDiv.className = 'day-header';
+                headerDiv.textContent = header;
+                dayGrid.appendChild(headerDiv);
+            });
+
+            const firstDay = new Date(year, month - 1, 1);
+            const lastDay = new Date(year, month, 0);
+            const startDate = new Date(firstDay);
+            startDate.setDate(startDate.getDate() - firstDay.getDay());
+
+            for (let i = 0; i < 42; i++) {
+                const currentDate = new Date(startDate);
+                currentDate.setDate(startDate.getDate() + i);
+
+                const dayButton = document.createElement('button');
+                dayButton.type = 'button';
+                dayButton.className = 'day-button';
+                dayButton.textContent = currentDate.getDate();
+
+                const isCurrentMonth = currentDate.getMonth() === month - 1;
+                const isToday = currentDate.toDateString() === today.toDateString();
+                const isSelected = selectedDate && currentDate.toDateString() === selectedDate.toDateString();
+
+                if (!isCurrentMonth) {
+                    dayButton.classList.add('other-month');
+                }
+
+                if (isToday) {
+                    dayButton.classList.add('today');
+                }
+
+                if (isSelected) {
+                    dayButton.classList.add('selected');
+                }
+
+                const dateString = currentDate.getFullYear() + '-' +
+                                 String(currentDate.getMonth() + 1).padStart(2, '0') + '-' +
+                                 String(currentDate.getDate()).padStart(2, '0');
+
+                dayButton.addEventListener('click', function() {
+                    document.querySelectorAll('.day-button.selected').forEach(btn => {
+                        btn.classList.remove('selected');
+                    });
+
+                    this.classList.add('selected');
+                    selectedDayValue = dateString;
+                });
+
+                dayGrid.appendChild(dayButton);
+            }
+        }
+
+        document.addEventListener('click', function(event) {
+            if (event.target.classList.contains('month-selector')) {
+                const month = event.target.getAttribute('data-month');
+                currentDisplayMonth = month;
+
+                document.querySelectorAll('.month-selector').forEach(btn => {
+                    btn.classList.remove('btn-primary');
+                    btn.classList.add('btn-outline-secondary');
+                });
+                event.target.classList.remove('btn-outline-secondary');
+                event.target.classList.add('btn-primary');
+
+                updateDayGrid();
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            if (event.target.id === 'confirmDaySelection') {
+                if (selectedDayValue) {
+                    @this.call('selectDay', selectedDayValue);
+                }
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const dayPicker = document.querySelector('.day-picker-dropdown');
+            const dayPickerContainer = document.querySelector('.day-picker-container');
+
+            if (dayPicker && dayPickerContainer && !dayPickerContainer.contains(event.target)) {
+                @this.set('showDayPicker', false);
+            }
+        });
+
+        document.addEventListener('livewire:updated', function() {
+            const dayPicker = document.querySelector('.day-picker-dropdown');
+            if (dayPicker) {
+                initializeDayPicker();
+            }
+        });
+
         function closeSelect2Dropdowns() {
             $('.filterCausals').each(function() {
                 if ($(this).hasClass('select2-hidden-accessible')) {
@@ -1205,7 +1835,6 @@
             document.getElementById('exportButton').disabled = false;
         }
 
-        // Listen for when export is complete
         Livewire.on('export-complete', function() {
             hideExportLoading();
         });
@@ -1240,5 +1869,72 @@
                 });
             }
         }
+        document.addEventListener('DOMContentLoaded', function() {
+            document.addEventListener('click', function(event) {
+                const monthPicker = document.querySelector('.month-picker-dropdown');
+                const monthPickerContainer = document.querySelector('.month-picker-container');
+
+                if (monthPicker && monthPickerContainer && !monthPickerContainer.contains(event.target)) {
+                    if (typeof @this !== 'undefined') {
+                        @this.set('showMonthPicker', false);
+                    }
+                }
+            });
+
+            document.addEventListener('keydown', function(event) {
+                if (event.key === 'Escape') {
+                    if (typeof @this !== 'undefined') {
+                        @this.set('showMonthPicker', false);
+                    }
+                }
+            });
+
+            document.addEventListener('click', function(event) {
+                const monthPickerDropdown = event.target.closest('.month-picker-dropdown');
+                if (monthPickerDropdown) {
+                    event.stopPropagation();
+                }
+            });
+        });
+
+        function resetFiltersWithMonthPicker() {
+            $('.filterMember').val('').trigger('change');
+            $('.filterCausals').val('').trigger('change');
+
+            if (typeof @this !== 'undefined') {
+                @this.call('resetFilters');
+            }
+
+            load();
+        }
+
+        if (typeof Livewire !== 'undefined') {
+            Livewire.on('filters-applied', function() {
+                console.log('Filters applied with month picker');
+            });
+
+            Livewire.on('filters-reset', function() {
+                console.log('Filters reset including month picker');
+                load();
+            });
+        }
+
+        function initializeMonthPicker() {
+            const monthPickerDropdown = document.querySelector('.month-picker-dropdown');
+            if (monthPickerDropdown) {
+                monthPickerDropdown.style.opacity = '0';
+                monthPickerDropdown.style.transform = 'translateY(-10px)';
+
+                setTimeout(() => {
+                    monthPickerDropdown.style.transition = 'all 0.2s ease-out';
+                    monthPickerDropdown.style.opacity = '1';
+                    monthPickerDropdown.style.transform = 'translateY(0)';
+                }, 10);
+            }
+        }
+
+        document.addEventListener('livewire:updated', function() {
+            initializeMonthPicker();
+        });
     </script>
 @endpush