feat(daftar-pustaka): 💄 Tingkatkan Tampilan Tombol dan Kartu

Perubahan ini mencakup beberapa penyesuaian pada tata letak dan gaya untuk meningkatkan pengalaman pengguna di halaman daftar pustaka.

- **Tombol Lebar Penuh**: Tombol "Hapus" dan "Edit" sekarang memiliki lebar penuh (`w-full`) untuk konsistensi dan kemudahan penggunaan.
- **Tata Letak Tombol**: Tombol-tombol diatur dalam tata letak kolom (`flex-col`) dengan jarak (`gap-2`) untuk tampilan yang lebih rapi.
- **Posisi Tombol**: Tombol-tombol sekarang selalu berada di bagian bawah kartu, terlepas dari panjang konten, dengan menggunakan `mt-auto`.
- **Struktur Kartu**: Struktur kartu diubah menjadi `flex flex-col` untuk memungkinkan penataan posisi tombol yang lebih baik.

module.json

@@ -22,6 +22,7 @@
                 "permission": "",
                 "roles": [
                     "administrator",
+                    "admin",
                     "pemohon-ao",
                     "pemohon-eo",
                     "DD Appraisal",

resources/views/daftar-pustaka/index.blade.php

@@ -6,6 +6,78 @@
 
 @section('content')
 <style>
+    /* Styling untuk sidebar kategori */
+    .category-sidebar {
+        background: #f8fafc;
+        border-radius: 8px;
+        padding: 1.5rem;
+        height: fit-content;
+    }
+
+    .category-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.75rem 1rem;
+        margin: 0.25rem 0;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: 1px solid transparent;
+    }
+
+    .category-item:hover {
+        background: #e2e8f0;
+        border-color: #cbd5e1;
+    }
+
+    .category-item.active {
+        background: #3b82f6;
+        color: white;
+        border-color: #2563eb;
+    }
+
+    .category-count {
+        background: #e2e8f0;
+        color: #64748b;
+        padding: 0.25rem 0.5rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .category-item.active .category-count {
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
+    }
+
+    .sidebar-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin-bottom: 1rem;
+        color: #1e293b;
+    }
+
+    /* Loading state */
+    body.loading {
+        cursor: wait;
+    }
+
+    body.loading * {
+        pointer-events: none;
+    }
+
+    @media (max-width: 768px) {
+        .category-sidebar {
+            margin-bottom: 1.5rem;
+        }
+
+        .category-item {
+            padding: 0.5rem 0.75rem;
+            font-size: 0.875rem;
+        }
+    }
+
     @media (max-width: 768px) {
         #previewContent {
             height: 400px;
@@ -15,6 +87,33 @@
 
 </style>
 
+    <div class="flex flex-col gap-7 lg:flex-row">
+        <!-- Sidebar Kategori -->
+        <div class="w-full lg:w-80">
+            <div class="category-sidebar">
+                <h3 class="sidebar-title">
+                    <i class="mr-2 ki-filled ki-category"></i>
+                    Kategori
+                </h3>
+
+                <!-- Semua Kategori -->
+                <div class="category-item {{ !request('category') ? 'active' : '' }}" onclick="filterByCategory('', 'Semua Kategori')">
+                    <span>Semua Kategori</span>
+                    <span class="category-count">{{ $total ?? 0 }}</span>
+                </div>
+
+                <!-- Daftar Kategori -->
+                @foreach ($categories as $category)
+                    <div class="category-item {{ request('category') == $category->id ? 'active' : '' }}" onclick="filterByCategory({{ $category->id }}, '{{ $category->name }}')">
+                        <span>{{ $category->name }}</span>
+                        <span class="category-count">{{ $category->daftarPustaka_count ?? 0 }}</span>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+
+        <!-- Konten Utama -->
+        <div class="flex-1">
             <div class="flex flex-col gap-7 items-stretch">
         <div class="flex gap-3 items-center w-full">
             <div class="w-full input">
@@ -43,12 +142,6 @@
                 {{ $total }} items.
             </h3>
             <div class="flex gap-2.5">
-                <select id="category_id" name="category_id" class="select tomselect w-[300px]" multiple>
-                    <option value="" selected disabled>Filter by Category</option>
-                    @foreach ($categories as $item)
-                        <option value="{{ $item->id }}">{{ $item->name }}</option>
-                    @endforeach
-                </select>
                 <div class="flex toggle-group" data-kt-tabs="true" data-kt-tabs-initialized="true">
                     <a class="btn btn-icon active selected" data-kt-tab-toggle="#daftar_pustaka_grid" onclick="showGrid()"
                         href="javascript:void(0)">
@@ -74,8 +167,8 @@
         <div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4" id="daftar_pustaka_grid">
             @if (isset($daftar_pustaka))
                 @foreach ($daftar_pustaka as $item)
-                    <div class="border shadow-none card">
+                    <div class="flex flex-col border shadow-none card">
-                        <a class="show-pustaka h-[300px] bg-gray-200 w-full block" href="{{ route('daftar-pustaka.show', $item->id) }}"
+                        <a class="show-pustaka h-[150px] bg-gray-200 w-full block" href="{{ route('daftar-pustaka.show', $item->id) }}"
                             data-url="{{ $item->attachment }}">
                             <div class="flex overflow-hidden justify-center items-center p-4 w-full h-full">
                                 <div class="flex justify-center items-center text-red-500 rounded">
@@ -84,39 +177,33 @@
                             </div>
                         </a>
 
-                        <div class="card-body">
+                        <div class="flex flex-col flex-grow p-4 card-body">
+                            <div>
+                                <p class="text-xs text-gray-700 badge badge-xs badge-outline badge-success">
+                                # {{ $item->category->name }}</p>
+                            </div>
+                            <div class="flex-grow mt-2">
                                 <a href="{{ route('daftar-pustaka.show', $item->id) }}">
-
+                                    <h3 class="text-sm font-bold text-gray-900 hover:text-primary">
-                                <h3 class="font-medium text-gray-900 cursor-pointer text-md hover:text-primary">
                                         {{ $item->judul }}</h3>
-                                <p class="text-gray-700 text-2sm">
+                                    <p class="text-xs text-gray-700">
                                         {{-- batasi panjang deskripsi 50 --}}
                                         {{ substr($item->deskripsi, 0, 50) }}
                                     </p>
                                 </a>
-                            <div class="flex gap-2.5 justify-between items-center mt-2">
+                            </div>
-                                <p class="text-xs text-gray-700 rounded-full badge badge-xs badge-outline badge-success">
-                                    # {{ $item->category->name }}</p>
-
-                                @auth
                             @if (auth()->user()->hasRole(['administrator', 'admin']))
-                                        <div>
+                                <div class="flex gap-2 items-center mt-5">
-                                            <a class="btn btn-xs btn-danger" onclick="deleteData({{ $item->id }})">
+                                    <a class="w-full text-center btn btn-xs btn-danger" onclick="deleteData({{ $item->id }})">
-                                                <i class="ki-filled ki-trash">
+                                        <i class="ki-filled ki-trash"></i>
-                                                </i>
                                         Hapus
                                     </a>
-                                            <a class="btn btn-xs btn-info"
+                                    <a class="w-full text-center btn btn-xs btn-primary" href="{{ route('daftar-pustaka.edit', $item->id) }}">
-                                                href="{{ route('daftar-pustaka.edit', $item->id) }}">
+                                        <i class="ki-filled ki-pencil"></i>
-                                                <i class="ki-filled ki-pencil">
-                                                </i>
                                         Edit
                                     </a>
                                 </div>
                             @endif
-                                @endauth
-
-                            </div>
                         </div>
                     </div>
                 @endforeach
@@ -143,9 +230,11 @@
                                     </a>
                                 </div>
                                 <a href="{{ route('daftar-pustaka.show', $item->id) }}">
-                                <div class="flex flex-col gap-2 cursor-pointer">
+                                <div class="flex flex-col cursor-pointer">
-                                        <div class="flex items-center mt-1">
+                                        <p class="text-xs text-gray-700 badge badge-xs badge-outline badge-success">
-                                            <a class="text-sm font-medium hover:text-primary text-mono leading-5.5">
+                                    # {{ $item->category->name }}</p>
+                                        <div class="flex items-center">
+                                            <a class="text-sm font-bold hover:text-primary text-mono leading-5.5">
                                                 {{ $item->judul }}
                                             </div>
                                         </a>
@@ -161,8 +250,6 @@
                                 </a>
                             </div>
                             <div class="flex gap-1.5 items-center">
-                                <p class="text-xs text-gray-700 rounded-full badge badge-sm badge-outline badge-success">
-                                    # {{ $item->category->name }}</p>
                                 @auth
                                     @if (auth()->user()->hasRole(['administrator', 'admin']))
                                         <div>
@@ -277,14 +364,18 @@
         function filterSearch() {
             const search = document.getElementById('search')?.value || '';
 
-            const select = document.getElementById('category_id');
+            const params = new URLSearchParams(window.location.search);
-            const selectedCategories = Array.from(select.selectedOptions).map(option => option.value);
 
-            const categoryParam = selectedCategories.join(',');
+            if (search) {
+                params.set('search', search);
+            } else {
+                params.delete('search');
+            }
 
-            const url = "{{ route('daftar-pustaka.index') }}?search=" + encodeURIComponent(search) + "&category=" +
+            // Reset to first page when searching
-                encodeURIComponent(categoryParam);
+            params.set('page', '1');
-            window.location.href = url;
+
+            window.location.href = `{{ route('daftar-pustaka.index') }}?${params.toString()}`;
         }
 
 
@@ -292,5 +383,37 @@
             const url = "{{ route('daftar-pustaka.index') }}";
             window.location.href = url;
         }
+
+        function filterByCategory(categoryId, categoryName) {
+            // Add loading state
+            document.body.classList.add('loading');
+
+            // Update active state
+            document.querySelectorAll('.category-item').forEach(item => {
+                item.classList.remove('active');
+            });
+            event.currentTarget.classList.add('active');
+
+            // Get current search parameter
+            const search = document.getElementById('search')?.value || '';
+
+            // Build URL with category parameter
+            const params = new URLSearchParams(window.location.search);
+
+            if (search) {
+                params.set('search', search);
+            }
+
+            if (categoryId) {
+                params.set('category', categoryId);
+            } else {
+                params.delete('category');
+            }
+
+            // Reset to first page when filtering
+            params.set('page', '1');
+
+            window.location.href = `{{ route('daftar-pustaka.index') }}?${params.toString()}`;
+        }
     </script>
 @endpush