From 407a8c6113db530b437ce64e3d0b0d755c62e05e Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 11 Nov 2025 23:41:59 +0700
Subject: [PATCH] refactor(analysis): responsivitas filter

---
 .../studio/dashboard/analysis.blade.php       | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/resources/views/livewire/studio/dashboard/analysis.blade.php b/resources/views/livewire/studio/dashboard/analysis.blade.php
index e77ebb0..f032b83 100644
--- a/resources/views/livewire/studio/dashboard/analysis.blade.php
+++ b/resources/views/livewire/studio/dashboard/analysis.blade.php
@@ -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>