diskominfo/simedkom
diskominfo/simedkom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance filter button styles and add icon to 'all' filter for improved visual clarity and user interaction in the admin verification page.

Browse Source
This commit is contained in:
Yoga Pangestu 2026-03-27 10:04:16 +07:00
parent 3897954b78
commit be8408f9b3
2 changed files with 42 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Filament/Pages/AdminVerification/Index.php
View File

@ -187,7 +187,7 @@ public function getFilters(): array
[
'id' => 'all',
'label' => 'Semua',
'icon' => null,
'icon' => 'heroicon-s-squares-2x2',
'color' => 'primary',
'count' => VerificationRequest::count(),
],

55
resources/views/filament/pages/admin-verification.blade.php
View File

@ -1,23 +1,50 @@
<x-filament-panels::page>
<div class="flex flex-wrap gap-2">
<div class="flex flex-wrap items-center gap-3">
@foreach ($this->getFilters as $filter)
<button wire:click="setFilter('{{ $filter['id'] }}')" @class([
'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200',
"bg-{$filter['color']}-500 text-white shadow-md shadow-{$filter['color']}-500/20" =>
$filterStatus === $filter['id'],
'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700' =>
$filterStatus !== $filter['id'],
])>
<button wire:click="setFilter('{{ $filter['id'] }}')"
@class([
'group inline-flex items-center gap-2.5 px-5 py-2.5 text-sm font-bold rounded-2xl transition-all duration-300 active:scale-95 shadow-sm hover:shadow-md',
// Active Styles
$filterStatus === $filter['id'] ? match($filter['color']) {
'primary' => 'bg-primary-500 text-white shadow-primary-500/30 ring-2 ring-primary-500/20',
'warning' => 'bg-warning-500 text-white shadow-warning-500/30 ring-2 ring-warning-500/20',
'success' => 'bg-success-500 text-white shadow-success-500/30 ring-2 ring-success-500/20',
'danger' => 'bg-danger-500 text-white shadow-danger-500/30 ring-2 ring-danger-500/20',
'info' => 'bg-info-500 text-white shadow-info-500/30 ring-2 ring-info-500/20',
default => 'bg-gray-500 text-white shadow-gray-500/25',
} : 'bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700',
])>
@if ($filter['icon'])
<x-dynamic-component :component="$filter['icon']" class="w-4 h-4" />
<x-dynamic-component :component="$filter['icon']"
@class([
'w-5 h-5 transition-transform duration-300 group-hover:scale-110',
$filterStatus === $filter['id'] ? 'text-white' : match($filter['color']) {
'primary' => 'text-primary-500',
'warning' => 'text-warning-500',
'success' => 'text-success-500',
'danger' => 'text-danger-500',
'info' => 'text-info-500',
default => 'text-gray-500',
},
])
/>
@endif
<span>{{ $filter['label'] }}</span>
<span @class([
'px-2 py-0.5 text-xs rounded-full',
'bg-white/20' => $filterStatus === $filter['id'],
"bg-{$filter['color']}-100 text-{$filter['color']}-700 dark:bg-{$filter['color']}-500/20 dark:text-{$filter['color']}-400" =>
$filterStatus !== $filter['id'],
])>{{ $filter['count'] ?? 0 }}</span>
'px-2.5 py-0.5 text-[10px] font-extrabold rounded-full transition-all duration-300',
$filterStatus === $filter['id'] ? 'bg-white/20 text-white shadow-inner' : match($filter['color']) {
'primary' => 'bg-primary-100 text-primary-700 dark:bg-primary-500/20 dark:text-primary-400',
'warning' => 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300',
'success' => 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-400',
'danger' => 'bg-danger-100 text-danger-700 dark:bg-danger-500/20 dark:text-danger-400',
'info' => 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-400',
default => 'bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400',
},
])>
{{ $filter['count'] ?? 0 }}
</span>
</button>
@endforeach
</div>