Initial commit

resources/views/livewire/select-period.blade.php

@@ -0,0 +1,92 @@
+<div class="">
+    <x-jetstream.label for="period-selector" value="{{ $label }}" />
+
+    <div class="space-y-4">
+        <!-- Period Selection -->
+        <div class="w-full">
+            <x-select
+                wire:model.live="selectedPeriod"
+                :options="[
+                    ['label' => __('Previous Year'), 'value' => 'previous_year'],
+                    ['label' => __('Previous Quarter'), 'value' => 'previous_quarter'],
+                    ['label' => __('Previous Month'), 'value' => 'previous_month'],
+                    ['label' => __('Custom'), 'value' => 'custom']
+                ]"
+                option-label="label"
+                option-value="value"
+                placeholder="{{ __('Select a period') }}"
+            />
+        </div>
+
+        <!-- Custom Date Range (shown when 'custom' is selected) -->
+        @if($selectedPeriod === 'custom')
+            <div class="space-y-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" wire:ignore>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('From date') }}</label>
+                        <x-flatpickr
+                            id="select-period-from"
+                            dateFormat="Y-m-d"
+                            altFormat="d-m-Y"
+                            placeholder="{{ __('Select start date') }}"
+                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm placeholder-theme-light"
+                        />
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('To date') }}</label>
+                        <x-flatpickr
+                            id="select-period-to"
+                            dateFormat="Y-m-d"
+                            altFormat="d-m-Y"
+                            placeholder="{{ __('Select end date') }}"
+                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm placeholder-theme-light"
+                        />
+                    </div>
+                </div>
+
+                @error('customFromDate')
+                    <div class="text-sm text-red-700" role="alert">{{ __($message) }}</div>
+                @enderror
+                @error('customToDate')
+                    <div class="text-sm text-red-700" role="alert">{{ __($message) }}</div>
+                @enderror
+
+                <div class="flex justify-end">
+                    <x-jetstream.secondary-button
+                        x-on:click="
+                            let fp1 = document.getElementById('select-period-from');
+                            let fp2 = document.getElementById('select-period-to');
+                            let from = fp1 && fp1._flatpickr ? fp1._flatpickr.input.value : '';
+                            let to   = fp2 && fp2._flatpickr ? fp2._flatpickr.input.value : '';
+                            $wire.applyCustomPeriod(from, to)
+                        "
+                        wire:loading.attr="disabled"
+                    >
+                        <span wire:loading.remove wire:target="applyCustomPeriod">
+                            {{ __('Update') }}
+                        </span>
+                        <span wire:loading wire:target="applyCustomPeriod">
+                            <x-icon class="h-4 w-4 animate-spin" name="arrow-path" />
+                        </span>
+                    </x-jetstream.secondary-button>
+                </div>
+            </div>
+        @endif
+
+    </div>
+</div>
+
+@script
+<script>
+    Livewire.hook('morph.updated', () => {
+        $nextTick(() => {
+            document.querySelectorAll('.flatpickr-input').forEach(el => {
+                if (!el._flatpickr && window.LaravelFlatpickr) {
+                    window.LaravelFlatpickr.initializeFlatpickr(el);
+                }
+            });
+        });
+    });
+</script>
+@endscript