feat(outlet): add search and filter by status

app/Livewire/Studio/Master/Outlet/Index.php

@@ -22,9 +22,20 @@ class Index extends Component
 
     public ?string $imageUrl = null;
 
+    public string $search = '';
+
+    public array $status = [];
+
     public function mount()
+    {
+        $this->loadOutlets();
+    }
+
+    protected function loadOutlets()
     {
         $this->outlets = Outlet::with(['openingHours', 'facilities'])
+            ->when(! empty($this->search), fn ($query) => $query->where('name', 'like', '%'.$this->search.'%'))
+            ->when(! empty($this->status), fn ($query) => $query->whereIn('status', $this->status))
             ->latest()
             ->get()
             ->map(fn ($outlet) => [
@@ -55,6 +66,18 @@ public function mount()
             ->toArray();
     }
 
+    public function updatedSearch(string $value)
+    {
+        $this->search = $value;
+
+        $this->loadOutlets();
+    }
+
+    public function updatedStatus()
+    {
+        $this->loadOutlets();
+    }
+
     public function openImage(string $imageUrl)
     {
         $this->imageUrl = $imageUrl;

resources/views/livewire/studio/master/outlet/index.blade.php

@@ -14,6 +14,20 @@ class="text-sm">
     </div>
 
     <div class="mt-6">
+        <div class="mb-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <flux:card class="flex flex-col justify-center">
+                <flux:input icon="magnifying-glass" placeholder="Cari outlet..."
+                    wire:model.live.debounce.500ms="search" />
+            </flux:card>
+
+            <flux:card>
+                <flux:checkbox.group wire:model.live="status" variant="buttons">
+                    @foreach (\App\Enums\OutletStatus::cases() as $status)
+                        <flux:checkbox value="{{ $status->value }}" label="{{ $status->label() }}" />
+                    @endforeach
+                </flux:checkbox.group>
+            </flux:card>
+        </div>
         <div class="columns-1 md:columns-2 lg:columns-3 gap-6">
             @foreach ($outlets as $outlet)
                 <flux:card