feat(admin): add server-side pagination and search to list pages

Companies and Vendors pages now use server-side pagination:
- Moved from client-side to server-side pagination
- Added search with debounced input
- Added status and verification filters
- Added pagination state object (page, per_page, total, pages)
- Added pageNumbers computed with ellipsis support
- Updated templates with search bar and filter dropdowns

Benefits:
- Better performance with large datasets
- Consistent UX across all admin list pages
- Reduced initial page load time

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/templates/admin/companies.html

@@ -98,6 +98,62 @@
     </div>
 </div>
 
+<!-- Search and Filters Bar -->
+<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <!-- Search Input -->
+        <div class="flex-1 max-w-md">
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
+                </span>
+                <input
+                    type="text"
+                    x-model="filters.search"
+                    @input="debouncedSearch()"
+                    placeholder="Search by name or email..."
+                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+                >
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="flex flex-wrap gap-3">
+            <!-- Status Filter -->
+            <select
+                x-model="filters.is_active"
+                @change="pagination.page = 1; loadCompanies()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Status</option>
+                <option value="true">Active</option>
+                <option value="false">Inactive</option>
+            </select>
+
+            <!-- Verification Filter -->
+            <select
+                x-model="filters.is_verified"
+                @change="pagination.page = 1; loadCompanies()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Verification</option>
+                <option value="true">Verified</option>
+                <option value="false">Unverified</option>
+            </select>
+
+            <!-- Refresh Button -->
+            <button
+                @click="loadCompanies()"
+                class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                title="Refresh companies"
+            >
+                <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
+                Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
 <!-- Companies Table -->
 <div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
     <div class="w-full overflow-x-auto">
@@ -120,7 +176,7 @@
                             <div class="flex flex-col items-center">
                                 <span x-html="$icon('office-building', 'w-12 h-12 mb-2 text-gray-300')"></span>
                                 <p class="font-medium">No companies found</p>
-                                <p class="text-xs mt-1">Create your first company to get started</p>
+                                <p class="text-xs mt-1" x-text="filters.search || filters.is_active || filters.is_verified ? 'Try adjusting your search or filters' : 'Create your first company to get started'"></p>
                             </div>
                         </td>
                     </tr>
@@ -218,7 +274,7 @@
     <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
         <!-- Results Info -->
         <span class="flex items-center col-span-3">
-            Showing <span class="mx-1 font-bold" x-text="startIndex"></span>-<span class="mx-1 font-bold" x-text="endIndex"></span> of <span class="mx-1 font-bold" x-text="companies.length"></span>
+            Showing <span class="mx-1 font-bold" x-text="startIndex"></span>-<span class="mx-1 font-bold" x-text="endIndex"></span> of <span class="mx-1 font-bold" x-text="pagination.total"></span>
         </span>
         <span class="col-span-2"></span>
 
@@ -230,9 +286,9 @@
                     <li>
                         <button
                             @click="previousPage()"
-                            :disabled="currentPage === 1"
+                            :disabled="pagination.page === 1"
                             class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
-                            :class="currentPage === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                            :class="pagination.page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
                             aria-label="Previous"
                         >
                             <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
@@ -242,16 +298,16 @@
                     </li>
 
                     <!-- Page Numbers -->
-                    <template x-for="page in pageNumbers" :key="page">
+                    <template x-for="pageNum in pageNumbers" :key="pageNum">
                         <li>
                             <button
-                                x-show="page !== '...'"
-                                @click="goToPage(page)"
+                                x-show="pageNum !== '...'"
+                                @click="goToPage(pageNum)"
                                 class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
-                                :class="currentPage === page ? 'text-white bg-purple-600 border border-purple-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
-                                x-text="page"
+                                :class="pagination.page === pageNum ? 'text-white bg-purple-600 border border-purple-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                                x-text="pageNum"
                             ></button>
-                            <span x-show="page === '...'" class="px-3 py-1">...</span>
+                            <span x-show="pageNum === '...'" class="px-3 py-1">...</span>
                         </li>
                     </template>
 
@@ -259,9 +315,9 @@
                     <li>
                         <button
                             @click="nextPage()"
-                            :disabled="currentPage === totalPages"
+                            :disabled="pagination.page === totalPages"
                             class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
-                            :class="currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                            :class="pagination.page === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
                             aria-label="Next"
                         >
                             <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">

app/templates/admin/vendors.html

@@ -98,6 +98,62 @@
     </div>
 </div>
 
+<!-- Search and Filters Bar -->
+<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <!-- Search Input -->
+        <div class="flex-1 max-w-md">
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
+                </span>
+                <input
+                    type="text"
+                    x-model="filters.search"
+                    @input="debouncedSearch()"
+                    placeholder="Search by name or vendor code..."
+                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+                >
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="flex flex-wrap gap-3">
+            <!-- Status Filter -->
+            <select
+                x-model="filters.is_active"
+                @change="pagination.page = 1; loadVendors()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Status</option>
+                <option value="true">Active</option>
+                <option value="false">Inactive</option>
+            </select>
+
+            <!-- Verification Filter -->
+            <select
+                x-model="filters.is_verified"
+                @change="pagination.page = 1; loadVendors()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Verification</option>
+                <option value="true">Verified</option>
+                <option value="false">Pending</option>
+            </select>
+
+            <!-- Refresh Button -->
+            <button
+                @click="refresh()"
+                class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                title="Refresh vendors"
+            >
+                <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
+                Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
 <!-- Vendors Table with Pagination -->
 <div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
     <div class="w-full overflow-x-auto">
@@ -119,7 +175,7 @@
                             <div class="flex flex-col items-center">
                                 <span x-html="$icon('user-group', 'w-12 h-12 mb-2 text-gray-300')"></span>
                                 <p class="font-medium">No vendors found</p>
-                                <p class="text-xs mt-1">Create your first vendor to get started</p>
+                                <p class="text-xs mt-1" x-text="filters.search || filters.is_active || filters.is_verified ? 'Try adjusting your search or filters' : 'Create your first vendor to get started'"></p>
                             </div>
                         </td>
                     </tr>
@@ -200,7 +256,7 @@
     <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
         <!-- Results Info -->
         <span class="flex items-center col-span-3">
-            Showing <span class="mx-1 font-bold" x-text="startIndex"></span>-<span class="mx-1 font-bold" x-text="endIndex"></span> of <span class="mx-1 font-bold" x-text="vendors.length"></span>
+            Showing <span class="mx-1 font-bold" x-text="startIndex"></span>-<span class="mx-1 font-bold" x-text="endIndex"></span> of <span class="mx-1 font-bold" x-text="pagination.total"></span>
         </span>
         <span class="col-span-2"></span>
 
@@ -212,9 +268,9 @@
                     <li>
                         <button
                             @click="previousPage()"
-                            :disabled="currentPage === 1"
+                            :disabled="pagination.page === 1"
                             class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
-                            :class="currentPage === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                            :class="pagination.page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
                             aria-label="Previous"
                         >
                             <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
@@ -224,16 +280,16 @@
                     </li>
 
                     <!-- Page Numbers -->
-                    <template x-for="page in pageNumbers" :key="page">
+                    <template x-for="pageNum in pageNumbers" :key="pageNum">
                         <li>
                             <button
-                                x-show="page !== '...'"
-                                @click="goToPage(page)"
+                                x-show="pageNum !== '...'"
+                                @click="goToPage(pageNum)"
                                 class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
-                                :class="currentPage === page ? 'text-white bg-purple-600 border border-purple-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
-                                x-text="page"
+                                :class="pagination.page === pageNum ? 'text-white bg-purple-600 border border-purple-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                                x-text="pageNum"
                             ></button>
-                            <span x-show="page === '...'" class="px-3 py-1">...</span>
+                            <span x-show="pageNum === '...'" class="px-3 py-1">...</span>
                         </li>
                     </template>
 
@@ -241,9 +297,9 @@
                     <li>
                         <button
                             @click="nextPage()"
-                            :disabled="currentPage === totalPages"
+                            :disabled="pagination.page === totalPages"
                             class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
-                            :class="currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                            :class="pagination.page === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
                             aria-label="Next"
                         >
                             <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">