yadiparfum/parfum
yadiparfum/parfum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Improve audit log UI readability by adjusting layout, detailing stock changes, and adding an empty state.

Browse Source
This commit is contained in:
Yoga Pangestu 2026-02-10 14:29:09 +07:00
parent 7a5ecc02bd
commit f844bb1fb7
1 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
resources/views/components/sections/ui/audit.blade.php
View File

@ -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>