From f844bb1fb7a95f5c0b673049d01c45c6003c395c Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 10 Feb 2026 14:29:09 +0700
Subject: [PATCH] Refactor: Improve audit log UI readability by adjusting
 layout, detailing stock changes, and adding an empty state.

---
 .../components/sections/ui/audit.blade.php    | 48 ++++++++++++++-----
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/resources/views/components/sections/ui/audit.blade.php b/resources/views/components/sections/ui/audit.blade.php
index 0e5abd6..f53f682 100644
--- a/resources/views/components/sections/ui/audit.blade.php
+++ b/resources/views/components/sections/ui/audit.blade.php
@@ -10,14 +10,22 @@
         </div>
     </div>
 
-    <div class="mt-6 space-y-2">
+    <div class="mt-6 space-y-4">
         @forelse ($activityLogs as $log)
             <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">{{ formatDateLocalized($log->created_at) }}</div>
-                    <div class="text-md">{{ $log->causer?->employee?->full_name }}</div>
-                    <span class="px-2 py-1 inline-flex text-xs font-semibold rounded-full {{ $log->event['classes'] }}">
+                    <div class="text-md font-semibold text-zinc-800 dark:text-zinc-100">{{ $log->log_name }}</div>
+                    <div class="text-xs">{{ formatDateLocalized($log->created_at) }}</div>
+                </div>
+
+                <div class="flex justify-between items-center mb-2">
+                    <div class="text-sm">
+                        <span
+                            class="font-medium">{{ $log->properties['location_name'] ?? 'Lokasi Tidak Diketahui' }}</span>
+                        <span class="text-xs opacity-70">({{ ucfirst($log->properties['location_type'] ?? '') }})</span>
+                    </div>
+                    <span
+                        class="px-2 py-0.5 inline-flex text-xs font-semibold rounded-full {{ $log->event['classes'] }}">
                         {{ $log->event['label'] }}
                     </span>
                 </div>
@@ -25,21 +33,37 @@
                 <flux:separator class="my-2 dark:border-gray-700" />
 
                 <div class="flex flex-wrap gap-4 text-sm ">
-                    <div>Stok Sebelumnya: {{ formatCurrencyNumber($log->properties['previous_stock']) }}</div>
-                    <flux:separator vertical class="dark:border-gray-700" />
-                    <div>Perubahan: {{ formatCurrencyNumber($log->properties['quantity_change']) }}</div>
-                    <flux:separator vertical class="dark:border-gray-700" />
-                    <div>Total Stok: {{ formatCurrencyNumber($log->properties['new_stock']) }}</div>
+                    <div>Awal: <span
+                            class="font-medium text-zinc-700 dark:text-zinc-200">{{ formatCurrencyNumber($log->properties['previous_stock'] ?? 0) }}</span>
+                    </div>
+                    <flux:separator vertical class="hidden sm:block dark:border-gray-700" />
+                    <div>Perubahan: <span
+                            class="font-medium {{ ($log->properties['quantity_change'] ?? 0) >= 0 ? 'text-emerald-600' : 'text-orange-600' }}">{{ ($log->properties['quantity_change'] ?? 0) >= 0 ? '+' : '' }}{{ formatCurrencyNumber($log->properties['quantity_change'] ?? 0) }}</span>
+                    </div>
+                    <flux:separator vertical class="hidden sm:block dark:border-gray-700" />
+                    <div>Akhir: <span
+                            class="font-medium text-zinc-700 dark:text-zinc-200">{{ formatCurrencyNumber($log->properties['new_stock'] ?? 0) }}</span>
+                    </div>
                 </div>
 
                 <flux:separator class="my-2 dark:border-gray-700" />
 
-                <p class="mt-2 text-sm truncate">
-                    {{ $log->description }}
+                <div class="flex items-center gap-2 mt-2">
+                    <flux:icon name="user" size="sm" class="opacity-50" />
+                    <p class="text-xs">
+                        {{ $log->causer?->employee?->full_name ?? ($log->causer?->name ?? 'System') }}
+                    </p>
+                </div>
+
+                <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400 italic">
+                    "{{ $log->description }}"
                 </p>
             </flux:card>
         @empty
             @include('components.animations.lottie.boxing-cat')
+            <div class="py-10 text-center text-zinc-500 italic">
+                Belum ada riwayat tercatat untuk barang ini.
+            </div>
         @endforelse
     </div>