From bb6c4cea8b432c25d2f83928ef12924f088179d4 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 9 Nov 2025 19:27:01 +0700
Subject: [PATCH] refactor(outlet): mengubah tampuilan image yang ditrampilkan
 dari menggunakan avatar flux ui menjadi tag img dan menyesuaikan susunan card
 nya

---
 .../Forms/Studio/Master/OutletForm.php        |  4 ++--
 .../studio/master/outlet/index.blade.php      | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/Livewire/Forms/Studio/Master/OutletForm.php b/app/Livewire/Forms/Studio/Master/OutletForm.php
index d9f53e9..2be627a 100644
--- a/app/Livewire/Forms/Studio/Master/OutletForm.php
+++ b/app/Livewire/Forms/Studio/Master/OutletForm.php
@@ -102,8 +102,8 @@ public function setOutlet(Outlet $outlet)
         $this->opening_hours = $outlet->openingHours
             ->mapWithKeys(fn ($item) => [
                 $item->day->value => [
-                    'open_time' => formatTime($item->open_time),
-                    'close_time' => formatTime($item->close_time),
+                    'open_time' => $item->open_time ? formatTime($item->open_time) : null,
+                    'close_time' => $item->close_time ? formatTime($item->close_time) : null,
                 ],
             ])
             ->toArray();
diff --git a/resources/views/livewire/studio/master/outlet/index.blade.php b/resources/views/livewire/studio/master/outlet/index.blade.php
index 9aad1a3..aa2e129 100644
--- a/resources/views/livewire/studio/master/outlet/index.blade.php
+++ b/resources/views/livewire/studio/master/outlet/index.blade.php
@@ -28,14 +28,16 @@ class="text-sm">
                 </flux:checkbox.group>
             </flux:card>
         </div>
-        <div class="columns-1 md:columns-2 lg:columns-3 gap-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
             @foreach ($outlets as $outlet)
                 <flux:card
-                    class="mb-6 break-inside-avoid space-y-2 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
+                    class="space-y-2 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
                     <div class="flex items-start justify-between mb-4">
                         <div class="flex items-center gap-3">
-                            <flux:avatar size="lg" src="{{ $outlet['image'] }}"
-                                wire:click="openImage('{{ $outlet['image'] }}')" />
+                            <img src="{{ $outlet['image'] }}" alt="{{ $outlet['image'] }}"
+                                class="w-12 h-12 rounded-full cursor-pointer"
+                                wire:click="openImage('{{ $outlet['image'] }}')">
+
                             <div>
                                 <flux:heading size="lg">{{ $outlet['name'] }}</flux:heading>
                                 <flux:badge color="{{ $outlet['status']['color'] }}" size="sm">
@@ -114,12 +116,13 @@ class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-cente
                                 <flux:icon.photo class="w-4 h-4" />
                                 Gambar
                             </h4>
-                            <flux:avatar.group class="mt-6">
+                            <div class="flex mt-6">
                                 @foreach ($outlet['images'] as $key => $value)
-                                    <flux:avatar circle size="lg" src="{{ $value }}"
-                                        wire:click="openImage('{{ $value }}')" />
+                                    <img src="{{ $value }}" alt="{{ $value }}"
+                                        class="w-12 h-12 rounded-full -ml-3 first:ml-0 cursor-pointer"
+                                        wire:click="openImage('{{ $value }}')">
                                 @endforeach
-                            </flux:avatar.group>
+                            </div>
                         </div>
                     @endif