feat: enhance audit logs display with event status colors and localized date formatting

app/Livewire/Studio/Catalog/Bottle/Audit.php

@@ -28,9 +28,30 @@ public function mount(Outlet $outlet, Bottle $bottle): void
             ->latest()
             ->get()
             ->map(function (Activity $activity) {
+                $status = match ($activity->event) {
+                    'increase' => AuditStockStatus::INCREASED,
+                    'decrease' => AuditStockStatus::DECREASED,
+                    'created' => AuditStockStatus::INCREASED,
+                    'updated' => AuditStockStatus::UPDATED,
+                    'deleted' => AuditStockStatus::DELETED,
+                    default => AuditStockStatus::tryFrom($activity->event),
+                };
+
+                $color = $status?->color() ?? 'gray';
+                $label = $status?->label() ?? ucfirst($activity->event);
+
+                $classes = match ($color) {
+                    'emerald' => 'bg-emerald-200 text-emerald-800 dark:bg-emerald-800 dark:text-emerald-200',
+                    'orange' => 'bg-orange-200 text-orange-800 dark:bg-orange-800 dark:text-orange-200',
+                    'yellow' => 'bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200',
+                    'red' => 'bg-red-200 text-red-800 dark:bg-red-800 dark:text-red-200',
+                    default => 'bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
+                };
+
                 $activity->event = [
-                    'label' => $activity->event,
+                    'label' => $label,
-                    'color' => AuditStockStatus::from($activity->event)->color(),
+                    'color' => $color,
+                    'classes' => $classes,
                 ];
 
                 return $activity;

app/Livewire/Studio/Catalog/Perfume/Audit.php

@@ -28,9 +28,30 @@ public function mount(Outlet $outlet, Perfume $perfume): void
             ->latest()
             ->get()
             ->map(function (Activity $activity) {
+                $status = match ($activity->event) {
+                    'increase' => AuditStockStatus::INCREASED,
+                    'decrease' => AuditStockStatus::DECREASED,
+                    'created' => AuditStockStatus::INCREASED,
+                    'updated' => AuditStockStatus::UPDATED,
+                    'deleted' => AuditStockStatus::DELETED,
+                    default => AuditStockStatus::tryFrom($activity->event),
+                };
+
+                $color = $status?->color() ?? 'gray';
+                $label = $status?->label() ?? ucfirst($activity->event);
+
+                $classes = match ($color) {
+                    'emerald' => 'bg-emerald-200 text-emerald-800 dark:bg-emerald-800 dark:text-emerald-200',
+                    'orange' => 'bg-orange-200 text-orange-800 dark:bg-orange-800 dark:text-orange-200',
+                    'yellow' => 'bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200',
+                    'red' => 'bg-red-200 text-red-800 dark:bg-red-800 dark:text-red-200',
+                    default => 'bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
+                };
+
                 $activity->event = [
-                    'label' => $activity->event,
+                    'label' => $label,
-                    'color' => AuditStockStatus::from($activity->event)->color(),
+                    'color' => $color,
+                    'classes' => $classes,
                 ];
 
                 return $activity;

app/Livewire/Studio/Catalog/Product/Audit.php

@@ -28,9 +28,30 @@ public function mount(Outlet $outlet, Product $product): void
             ->latest()
             ->get()
             ->map(function (Activity $activity) {
+                $status = match ($activity->event) {
+                    'increase' => AuditStockStatus::INCREASED,
+                    'decrease' => AuditStockStatus::DECREASED,
+                    'created' => AuditStockStatus::INCREASED,
+                    'updated' => AuditStockStatus::UPDATED,
+                    'deleted' => AuditStockStatus::DELETED,
+                    default => AuditStockStatus::tryFrom($activity->event),
+                };
+
+                $color = $status?->color() ?? 'gray';
+                $label = $status?->label() ?? ucfirst($activity->event);
+
+                $classes = match ($color) {
+                    'emerald' => 'bg-emerald-200 text-emerald-800 dark:bg-emerald-800 dark:text-emerald-200',
+                    'orange' => 'bg-orange-200 text-orange-800 dark:bg-orange-800 dark:text-orange-200',
+                    'yellow' => 'bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200',
+                    'red' => 'bg-red-200 text-red-800 dark:bg-red-800 dark:text-red-200',
+                    default => 'bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
+                };
+
                 $activity->event = [
-                    'label' => $activity->event,
+                    'label' => $label,
-                    'color' => AuditStockStatus::from($activity->event)->color(),
+                    'color' => $color,
+                    'classes' => $classes,
                 ];
 
                 return $activity;

resources/views/components/sections/ui/audit.blade.php

@@ -15,18 +15,14 @@
             <flux:card class="p-4 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition text-gray-500 dark:text-gray-300">
                 <div class="flex justify-between items-center mb-2">
                     <div class="text-md">{{ $log->log_name }}</div>
-                    <div class="text-md">{{ $log->created_at }}</div>
+                    <div class="text-md">{{ formatDateLocalized($log->created_at) }}</div>
                     <div class="text-md">{{ $log->causer?->employee?->full_name }}</div>
-                    <span
+                    <span class="px-2 py-1 inline-flex text-xs font-semibold rounded-full {{ $log->event['classes'] }}">
-                        class="px-2 py-1 inline-flex text-xs font-semibold rounded-full
-                        bg-{{ $log->event['color'] }}-200 text-{{ $log->event['color'] }}-800
-                        dark:bg-{{ $log->event['color'] }}-800 dark:text-{{ $log->event['color'] }}-200">
                         {{ $log->event['label'] }}
                     </span>
                 </div>
 
-                <flux:separator class="my-2
+                <flux:separator class="my-2 dark:border-gray-700" />
-                        dark:border-gray-700" />
 
                 <div class="flex flex-wrap gap-4 text-sm ">
                     <div>Stok Sebelumnya: {{ formatCurrencyNumber($log->properties['previous_stock']) }}</div>
@@ -38,7 +34,7 @@ class="px-2 py-1 inline-flex text-xs font-semibold rounded-full
 
                 <flux:separator class="my-2 dark:border-gray-700" />
 
-                <p class="mt-2text-sm truncate">
+                <p class="mt-2 text-sm truncate">
                     {{ $log->description }}
                 </p>
             </flux:card>