From be8408f9b31dd7a8535aba41af9d54a2e1dd12c3 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 27 Mar 2026 10:04:16 +0700
Subject: [PATCH] feat: Enhance filter button styles and add icon to 'all'
 filter for improved visual clarity and user interaction in the admin
 verification page.

---
 .../Pages/AdminVerification/Index.php         |  2 +-
 .../pages/admin-verification.blade.php        | 55 ++++++++++++++-----
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/app/Filament/Pages/AdminVerification/Index.php b/app/Filament/Pages/AdminVerification/Index.php
index 2b8df6a..3a08e3a 100644
--- a/app/Filament/Pages/AdminVerification/Index.php
+++ b/app/Filament/Pages/AdminVerification/Index.php
@@ -187,7 +187,7 @@ public function getFilters(): array
             [
                 'id' => 'all',
                 'label' => 'Semua',
-                'icon' => null,
+                'icon' => 'heroicon-s-squares-2x2',
                 'color' => 'primary',
                 'count' => VerificationRequest::count(),
             ],
diff --git a/resources/views/filament/pages/admin-verification.blade.php b/resources/views/filament/pages/admin-verification.blade.php
index 96454ab..aef6f16 100644
--- a/resources/views/filament/pages/admin-verification.blade.php
+++ b/resources/views/filament/pages/admin-verification.blade.php
@@ -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>