From 88350689fcd26b7221f9cd7018deb2c20d98e29a Mon Sep 17 00:00:00 2001
From: MuzakkiABBAUF <muzakki.abbauftech@gmail.com>
Date: Thu, 18 Sep 2025 09:11:27 +0700
Subject: [PATCH] fix desain

---
 .../admin/kategori_fitur/index.blade.php      | 135 ++++++++++++------
 backend/resources/views/layouts/app.blade.php |   2 +-
 2 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/backend/resources/views/admin/kategori_fitur/index.blade.php b/backend/resources/views/admin/kategori_fitur/index.blade.php
index c64a643..32b7618 100644
--- a/backend/resources/views/admin/kategori_fitur/index.blade.php
+++ b/backend/resources/views/admin/kategori_fitur/index.blade.php
@@ -35,55 +35,104 @@
         </script>
     @endif
 
-    <!-- Tabel Kategori -->
-    <div class="bg-white rounded-lg shadow-sm">
-        <div class="p-4 overflow-x-auto">
-            <table class="w-full table-fixed border border-gray-300 text-left">
-                <thead class="bg-gray-100">
-                    <tr>
-                        <th class="w-[10%] p-2 border border-gray-300 text-center">ID</th>
-                        <th class="w-[60%] p-2 border border-gray-300 text-center">Deskripsi</th>
-                        <th class="w-[30%] p-2 border border-gray-300 text-center">Aksi</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    @forelse ($kategoriFitur as $item)
-                        <tr class="hover:bg-gray-50">
-                            <td class="py-4 px-2 border border-gray-300 text-center">
-                                {{ $item->id }}
-                            </td>
-                            <td class="py-4 px-2 border border-gray-300">
-                                {{ $item->deskripsi }}
-                            </td>
-                            <td class="py-4 px-2 border border-gray-300 text-center">
-                                <div class="flex justify-center space-x-2">
-                                    <button class="text-blue-600 flex items-center pr-4 openEditModalBtn"
-                                        data-id="{{ $item->id }}">
-                                        <i class="bi bi-pencil mr-1"></i> Ubah
-                                    </button>
-                                    <button class="text-red-600 flex items-center openDeleteModalBtn"
-                                        data-id="{{ $item->id }}">
-                                        <i class="bi bi-trash mr-1"></i> Hapus
-                                    </button>
-                                </div>
-                            </td>
-                        </tr>
-                    @empty
+        <!-- Tabel Kategori -->
+        <div class="bg-white rounded-lg shadow-sm">
+            <div class="p-4 overflow-x-auto">
+                <table class="w-full table-fixed border border-gray-300 text-left">
+                    <thead class="bg-gray-100">
                         <tr>
-                            <td colspan="3" class="p-2 text-center text-gray-500">Belum ada kategori fitur</td>
+                            <th class="w-[10%] p-2 border border-gray-300 text-center">ID</th>
+                            <th class="w-[60%] p-2 border border-gray-300 text-center">Deskripsi</th>
+                            <th class="w-[30%] p-2 border border-gray-300 text-center">Aksi</th>
                         </tr>
-                    @endforelse
-                </tbody>
-            </table>
-        </div>
+                    </thead>
+                    <tbody>
+                        @forelse ($kategoriFitur as $item)
+                            <tr class="hover:bg-gray-50">
+                                <td class="py-4 px-2 border border-gray-300 text-center">
+                                    {{ $item->id }}
+                                </td>
+                                <td class="py-4 px-2 border border-gray-300">
+                                    {{ $item->deskripsi }}
+                                </td>
+                                <td class="py-4 px-2 border border-gray-300 text-center">
+                                    <div class="flex justify-center space-x-2">
+                                        <button class="text-blue-600 flex items-center pr-4 openEditModalBtn"
+                                            data-id="{{ $item->id }}">
+                                            <i class="bi bi-pencil mr-1"></i> Ubah
+                                        </button>
+                                        <button class="text-red-600 flex items-center openDeleteModalBtn"
+                                            data-id="{{ $item->id }}">
+                                            <i class="bi bi-trash mr-1"></i> Hapus
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        @empty
+                            <tr>
+                                <td colspan="3" class="p-2 text-center text-gray-500">Belum ada kategori fitur</td>
+                            </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
 
-        <!-- Pagination -->
-        <div class="p-4 flex justify-center">
-            {{ $kategoriFitur->links() }}
-        </div>
+            <!-- Pagination -->
+<div class="p-4 flex justify-center">
+    <div class="flex space-x-1">
+        {{-- Tombol Previous --}}
+        @if ($kategoriFitur->onFirstPage())
+            <span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span>
+        @else
+            <a href="{{ $kategoriFitur->previousPageUrl() }}"
+               class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a>
+        @endif
+
+        @php
+            $total = $kategoriFitur->lastPage();
+            $current = $kategoriFitur->currentPage();
+        @endphp
+
+        {{-- Selalu tampilkan halaman pertama --}}
+        @if ($current > 2)
+            <a href="{{ $kategoriFitur->url(1) }}"
+               class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">1</a>
+            @if ($current > 3)
+                <span class="px-3 py-1 text-gray-500">...</span>
+            @endif
+        @endif
+
+        {{-- Halaman tengah --}}
+        @for ($i = max(1, $current - 1); $i <= min($total, $current + 1); $i++)
+            @if ($i == $current)
+                <span class="px-3 py-1 rounded-lg bg-blue-600 text-white font-semibold">{{ $i }}</span>
+            @else
+                <a href="{{ $kategoriFitur->url($i) }}"
+                   class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $i }}</a>
+            @endif
+        @endfor
+
+        {{-- Selalu tampilkan halaman terakhir --}}
+        @if ($current < $total - 1)
+            @if ($current < $total - 2)
+                <span class="px-3 py-1 text-gray-500">...</span>
+            @endif
+            <a href="{{ $kategoriFitur->url($total) }}"
+               class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $total }}</a>
+        @endif
+
+        {{-- Tombol Next --}}
+        @if ($kategoriFitur->hasMorePages())
+            <a href="{{ $kategoriFitur->nextPageUrl() }}"
+               class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Next</a>
+        @else
+            <span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Next</span>
+        @endif
     </div>
 </div>
 
+    </div>
+
 <!-- Modal Tambah -->
 <div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50">
     <div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div>
diff --git a/backend/resources/views/layouts/app.blade.php b/backend/resources/views/layouts/app.blade.php
index 28a94d9..d3031e1 100644
--- a/backend/resources/views/layouts/app.blade.php
+++ b/backend/resources/views/layouts/app.blade.php
@@ -73,7 +73,7 @@
                         <i class="bi bi-chevron-down transition-transform {{ $isFiturPage ? 'rotate-180' : '' }}"
                             id="manajemenFiturIcon"></i>
                     </button>
-                    <ul class="submenu pl-6 space-y-1 {{ $isFiturPage ? 'show' : '' }}" id="manajemenFiturSubmenu">
+                    <ul class="submenu pl-6 space-y-1 mt-2 {{ $isFiturPage ? 'show' : '' }}" id="manajemenFiturSubmenu">
                         <li>
                             <a href="{{ route('admin.kategori_fitur.index') }}"
                                 class="block py-2 px-2 rounded {{ request()->is('admin/kategori_fitur*') ? 'bg-blue-100 text-blue-600' : 'text-gray-500 hover:text-blue-600 hover:bg-blue-50' }}">