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