refactor(analysis): responsivitas filter

This commit is contained in:
Yoga Pangestu 2025-11-11 23:41:59 +07:00
parent 95779ff4c8
commit 407a8c6113

View File

@ -3,10 +3,10 @@
<flux:separator />
<div class="mt-6">
<div class="flex justify-between items-center mb-6">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2">
<flux:select wire:model.live="period">
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center mb-6 gap-4">
<div class="flex flex-col sm:flex-row flex-wrap items-start sm:items-center gap-4 w-full">
<div class="flex items-center gap-2 w-full sm:w-auto">
<flux:select wire:model.live="period" class="w-full sm:w-auto">
<option value="all">Semua</option>
<option value="7">7 Hari Terakhir</option>
<option value="30">30 Hari Terakhir</option>
@ -15,22 +15,28 @@
</flux:select>
</div>
<flux:separator vertical class="max-lg:hidden mx-2 my-2" />
<flux:checkbox.group wire:model.live="selectedOutletIds" variant="buttons">
@foreach ($outlets as $key => $value)
<flux:checkbox value="{{ $key }}" label="{{ $value }}" />
@endforeach
</flux:checkbox.group>
<flux:separator vertical class="hidden lg:block mx-2 my-2" />
<flux:separator vertical class="max-lg:hidden mx-2 my-2" />
<flux:date-picker mode="range" wire:model.live="range">
<x-slot name="trigger">
<div class="flex flex-col sm:flex-row gap-6 sm:gap-4">
<flux:date-picker.input />
<flux:date-picker.input />
</div>
</x-slot>
</flux:date-picker>
<div class="flex flex-wrap gap-2 w-full sm:w-auto">
<flux:checkbox.group wire:model.live="selectedOutletIds" variant="buttons">
@foreach ($outlets as $key => $value)
<flux:checkbox value="{{ $key }}" label="{{ $value }}" />
@endforeach
</flux:checkbox.group>
</div>
<flux:separator vertical class="hidden lg:block mx-2 my-2" />
<div class="w-full sm:w-auto">
<flux:date-picker mode="range" wire:model.live="range">
<x-slot name="trigger">
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full">
<flux:date-picker.input />
<flux:date-picker.input />
</div>
</x-slot>
</flux:date-picker>
</div>
</div>
</div>