refactor: standardize pagination across all admin pages

Migrated marketplace.js, imports.js, and logs.js to use the same
pagination pattern as companies.js, users.js, and vendors.js:

- pagination: { page, per_page, total, pages }
- Computed getters: totalPages, startIndex, endIndex, pageNumbers
- Methods: previousPage(), nextPage(), goToPage()

Updated templates to use the shared pagination macro:
- marketplace.html
- imports.html
- logs.html

All admin pages now use consistent pagination behavior and styling.

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

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

app/templates/admin/imports.html

@@ -1,5 +1,6 @@
 {# app/templates/admin/imports.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/pagination.html' import pagination %}
 
 {% block title %}Import Jobs - Platform Monitoring{% endblock %}
 
@@ -289,33 +290,7 @@
             </div>
         </div>
 
-        {# noqa: FE-001 - Custom pagination with page/limit/totalJobs variables #}
+        {{ pagination(show_condition="!loading && pagination.total > 0") }}
-        <!-- Pagination -->
-        <div x-show="!loading && totalJobs > limit" class="px-4 py-3 border-t dark:border-gray-700">
-            <div class="flex items-center justify-between">
-                <div class="text-sm text-gray-700 dark:text-gray-400">
-                    Showing <span x-text="((page - 1) * limit) + 1"></span> to
-                    <span x-text="Math.min(page * limit, totalJobs)"></span> of
-                    <span x-text="totalJobs"></span> jobs
-                </div>
-                <div class="flex space-x-2">
-                    <button
-                        @click="previousPage()"
-                        :disabled="page === 1"
-                        class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                        Previous
-                    </button>
-                    <button
-                        @click="nextPage()"
-                        :disabled="page * limit >= totalJobs"
-                        class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                        Next
-                    </button>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 

app/templates/admin/logs.html

@@ -1,5 +1,6 @@
 {# app/templates/admin/logs.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/pagination.html' import pagination %}
 
 {% block title %}Application Logs{% endblock %}
 
@@ -236,31 +237,7 @@
             </table>
         </div>
 
-        {# noqa: FE-001 - Custom pagination with filters.skip/limit/totalLogs variables #}
+        {{ pagination(show_condition="!loading && logs.length > 0") }}
-        <!-- Pagination -->
-        <div x-show="!loading && logs.length > 0" class="px-4 py-3 border-t dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-            <div class="flex items-center justify-between">
-                <div class="text-sm text-gray-700 dark:text-gray-400">
-                    Showing <span x-text="filters.skip + 1"></span> to <span x-text="Math.min(filters.skip + filters.limit, totalLogs)"></span> of <span x-text="totalLogs"></span>
-                </div>
-                <div class="flex space-x-2">
-                    <button
-                        @click="previousPage()"
-                        :disabled="filters.skip === 0"
-                        class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
-                    >
-                        Previous
-                    </button>
-                    <button
-                        @click="nextPage()"
-                        :disabled="filters.skip + filters.limit >= totalLogs"
-                        class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
-                    >
-                        Next
-                    </button>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 

app/templates/admin/marketplace.html

@@ -1,5 +1,6 @@
 {# app/templates/admin/marketplace.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/pagination.html' import pagination %}
 
 {% block title %}Marketplace Import{% endblock %}
 
@@ -370,33 +371,7 @@
             </div>
         </div>
 
-        {# noqa: FE-001 - Custom pagination with page/limit/totalJobs variables #}
+        {{ pagination(show_condition="!loading && pagination.total > 0") }}
-        <!-- Pagination -->
-        <div x-show="!loading && totalJobs > limit" class="px-4 py-3 border-t dark:border-gray-700">
-            <div class="flex items-center justify-between">
-                <div class="text-sm text-gray-700 dark:text-gray-400">
-                    Showing <span x-text="((page - 1) * limit) + 1"></span> to
-                    <span x-text="Math.min(page * limit, totalJobs)"></span> of
-                    <span x-text="totalJobs"></span> jobs
-                </div>
-                <div class="flex space-x-2">
-                    <button
-                        @click="previousPage()"
-                        :disabled="page === 1"
-                        class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                        Previous
-                    </button>
-                    <button
-                        @click="nextPage()"
-                        :disabled="page * limit >= totalJobs"
-                        class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                        Next
-                    </button>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 

static/admin/js/imports.js

@@ -43,9 +43,12 @@ function adminImports() {
 
         // Import jobs
         jobs: [],
-        totalJobs: 0,
+        pagination: {
-        page: 1,
+            page: 1,
-        limit: 20,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
 
         // Modal state
         showJobModal: false,
@@ -54,6 +57,51 @@ function adminImports() {
         // Auto-refresh for active jobs
         autoRefreshInterval: null,
 
+        // Computed: Total pages
+        get totalPages() {
+            return this.pagination.pages;
+        },
+
+        // Computed: Start index for pagination display
+        get startIndex() {
+            if (this.pagination.total === 0) return 0;
+            return (this.pagination.page - 1) * this.pagination.per_page + 1;
+        },
+
+        // Computed: End index for pagination display
+        get endIndex() {
+            const end = this.pagination.page * this.pagination.per_page;
+            return end > this.pagination.total ? this.pagination.total : end;
+        },
+
+        // Computed: Page numbers for pagination
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                pages.push(1);
+                if (current > 3) {
+                    pages.push('...');
+                }
+                const start = Math.max(2, current - 1);
+                const end = Math.min(totalPages - 1, current + 1);
+                for (let i = start; i <= end; i++) {
+                    pages.push(i);
+                }
+                if (current < totalPages - 2) {
+                    pages.push('...');
+                }
+                pages.push(totalPages);
+            }
+            return pages;
+        },
+
         async init() {
             // Guard against multiple initialization
             if (window._adminImportsInitialized) {
@@ -117,8 +165,8 @@ function adminImports() {
             try {
                 // Build query params
                 const params = new URLSearchParams({
-                    page: this.page,
+                    skip: (this.pagination.page - 1) * this.pagination.per_page,
-                    limit: this.limit
+                    limit: this.pagination.per_page
                 });
 
                 // Add filters
@@ -140,7 +188,8 @@ function adminImports() {
                 );
 
                 this.jobs = response.items || [];
-                this.totalJobs = response.total || 0;
+                this.pagination.total = response.total || 0;
+                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
 
                 adminImportsLog.debug('Loaded all jobs:', this.jobs.length);
             } catch (error) {
@@ -155,7 +204,7 @@ function adminImports() {
          * Apply filters and reload
          */
         async applyFilters() {
-            this.page = 1;  // Reset to first page when filtering
+            this.pagination.page = 1;  // Reset to first page when filtering
             await this.loadJobs();
             await this.loadStats();  // Update stats based on filters
         },
@@ -168,7 +217,7 @@ function adminImports() {
             this.filters.status = '';
             this.filters.marketplace = '';
             this.filters.created_by = '';
-            this.page = 1;
+            this.pagination.page = 1;
             await this.loadJobs();
             await this.loadStats();
         },
@@ -239,20 +288,30 @@ function adminImports() {
         /**
          * Pagination: Previous page
          */
-        async previousPage() {
+        previousPage() {
-            if (this.page > 1) {
+            if (this.pagination.page > 1) {
-                this.page--;
+                this.pagination.page--;
-                await this.loadJobs();
+                this.loadJobs();
             }
         },
 
         /**
          * Pagination: Next page
          */
-        async nextPage() {
+        nextPage() {
-            if (this.page * this.limit < this.totalJobs) {
+            if (this.pagination.page < this.totalPages) {
-                this.page++;
+                this.pagination.page++;
-                await this.loadJobs();
+                this.loadJobs();
+            }
+        },
+
+        /**
+         * Pagination: Go to specific page
+         */
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                this.loadJobs();
             }
         },
 

static/admin/js/logs.js

@@ -17,7 +17,6 @@ function adminLogs() {
         successMessage: null,
         logSource: 'database',
         logs: [],
-        totalLogs: 0,
         stats: {
             total_count: 0,
             warning_count: 0,
@@ -28,14 +27,63 @@ function adminLogs() {
         filters: {
             level: '',
             module: '',
-            search: '',
+            search: ''
-            skip: 0,
+        },
-            limit: 50
+        pagination: {
+            page: 1,
+            per_page: 50,
+            total: 0,
+            pages: 0
         },
         logFiles: [],
         selectedFile: '',
         fileContent: null,
 
+        // Computed: Total pages
+        get totalPages() {
+            return this.pagination.pages;
+        },
+
+        // Computed: Start index for pagination display
+        get startIndex() {
+            if (this.pagination.total === 0) return 0;
+            return (this.pagination.page - 1) * this.pagination.per_page + 1;
+        },
+
+        // Computed: End index for pagination display
+        get endIndex() {
+            const end = this.pagination.page * this.pagination.per_page;
+            return end > this.pagination.total ? this.pagination.total : end;
+        },
+
+        // Computed: Page numbers for pagination
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                pages.push(1);
+                if (current > 3) {
+                    pages.push('...');
+                }
+                const start = Math.max(2, current - 1);
+                const end = Math.min(totalPages - 1, current + 1);
+                for (let i = start; i <= end; i++) {
+                    pages.push(i);
+                }
+                if (current < totalPages - 2) {
+                    pages.push('...');
+                }
+                pages.push(totalPages);
+            }
+            return pages;
+        },
+
         async init() {
             logsLog.info('=== LOGS PAGE INITIALIZING ===');
             await this.loadStats();
@@ -72,13 +120,14 @@ function adminLogs() {
                 if (this.filters.level) params.append('level', this.filters.level);
                 if (this.filters.module) params.append('module', this.filters.module);
                 if (this.filters.search) params.append('search', this.filters.search);
-                params.append('skip', this.filters.skip);
+                params.append('skip', (this.pagination.page - 1) * this.pagination.per_page);
-                params.append('limit', this.filters.limit);
+                params.append('limit', this.pagination.per_page);
 
                 const data = await apiClient.get(`/admin/logs/database?${params}`);
                 this.logs = data.logs;
-                this.totalLogs = data.total;
+                this.pagination.total = data.total;
-                logsLog.info(`Loaded ${this.logs.length} logs (total: ${this.totalLogs})`);
+                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
+                logsLog.info(`Loaded ${this.logs.length} logs (total: ${this.pagination.total})`);
             } catch (error) {
                 logsLog.error('Failed to load logs:', error);
                 this.error = error.response?.data?.detail || 'Failed to load logs';
@@ -143,21 +192,31 @@ function adminLogs() {
             this.filters = {
                 level: '',
                 module: '',
-                search: '',
+                search: ''
-                skip: 0,
-                limit: 50
             };
-            this.loadLogs();
+            this.pagination.page = 1;
-        },
-
-        nextPage() {
-            this.filters.skip += this.filters.limit;
             this.loadLogs();
         },
 
         previousPage() {
-            this.filters.skip = Math.max(0, this.filters.skip - this.filters.limit);
+            if (this.pagination.page > 1) {
-            this.loadLogs();
+                this.pagination.page--;
+                this.loadLogs();
+            }
+        },
+
+        nextPage() {
+            if (this.pagination.page < this.totalPages) {
+                this.pagination.page++;
+                this.loadLogs();
+            }
+        },
+
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                this.loadLogs();
+            }
         },
 
         showLogDetail(log) {

static/admin/js/marketplace.js

@@ -46,9 +46,12 @@ function adminMarketplace() {
 
         // Import jobs
         jobs: [],
-        totalJobs: 0,
+        pagination: {
-        page: 1,
+            page: 1,
-        limit: 10,
+            per_page: 10,
+            total: 0,
+            pages: 0
+        },
 
         // Modal state
         showJobModal: false,
@@ -57,6 +60,51 @@ function adminMarketplace() {
         // Auto-refresh for active jobs
         autoRefreshInterval: null,
 
+        // Computed: Total pages
+        get totalPages() {
+            return this.pagination.pages;
+        },
+
+        // Computed: Start index for pagination display
+        get startIndex() {
+            if (this.pagination.total === 0) return 0;
+            return (this.pagination.page - 1) * this.pagination.per_page + 1;
+        },
+
+        // Computed: End index for pagination display
+        get endIndex() {
+            const end = this.pagination.page * this.pagination.per_page;
+            return end > this.pagination.total ? this.pagination.total : end;
+        },
+
+        // Computed: Page numbers for pagination
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                pages.push(1);
+                if (current > 3) {
+                    pages.push('...');
+                }
+                const start = Math.max(2, current - 1);
+                const end = Math.min(totalPages - 1, current + 1);
+                for (let i = start; i <= end; i++) {
+                    pages.push(i);
+                }
+                if (current < totalPages - 2) {
+                    pages.push('...');
+                }
+                pages.push(totalPages);
+            }
+            return pages;
+        },
+
         async init() {
             adminMarketplaceLog.info('Marketplace init() called');
 
@@ -156,8 +204,8 @@ function adminMarketplace() {
             try {
                 // Build query params
                 const params = new URLSearchParams({
-                    page: this.page,
+                    skip: (this.pagination.page - 1) * this.pagination.per_page,
-                    limit: this.limit,
+                    limit: this.pagination.per_page,
                     created_by_me: 'true'  // ✅ Only show jobs I triggered
                 });
 
@@ -177,7 +225,8 @@ function adminMarketplace() {
                 );
 
                 this.jobs = response.items || [];
-                this.totalJobs = response.total || 0;
+                this.pagination.total = response.total || 0;
+                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
 
                 adminMarketplaceLog.info('Loaded my jobs:', this.jobs.length);
             } catch (error) {
@@ -267,7 +316,7 @@ function adminMarketplace() {
             this.filters.vendor_id = '';
             this.filters.status = '';
             this.filters.marketplace = '';
-            this.page = 1;
+            this.pagination.page = 1;
             this.loadJobs();
         },
 
@@ -336,20 +385,30 @@ function adminMarketplace() {
         /**
          * Pagination: Previous page
          */
-        async previousPage() {
+        previousPage() {
-            if (this.page > 1) {
+            if (this.pagination.page > 1) {
-                this.page--;
+                this.pagination.page--;
-                await this.loadJobs();
+                this.loadJobs();
             }
         },
 
         /**
          * Pagination: Next page
          */
-        async nextPage() {
+        nextPage() {
-            if (this.page * this.limit < this.totalJobs) {
+            if (this.pagination.page < this.totalPages) {
-                this.page++;
+                this.pagination.page++;
-                await this.loadJobs();
+                this.loadJobs();
+            }
+        },
+
+        /**
+         * Pagination: Go to specific page
+         */
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                this.loadJobs();
             }
         },