Entity Requests pagination + Lock / Unlock

Author: simonredfern

src/lib/utils/roleChecker.ts

@@ -205,6 +205,12 @@ export const SITE_MAP: Record<string, PageRoleConfig> = {
   "/users/[provider]/[username]": {
     required: [{ role: "CanGetAnyUser" }],
   },
+  "/users/[provider]/[username]/unlock": {
+    required: [{ role: "CanUnlockUser" }],
+  },
+  "/users/[provider]/[username]/lock": {
+    required: [{ role: "CanLockUser" }],
+  },
 
   // ── Dynamic Entities ──────────────────────────────────
   "/dynamic-entities/diagnostics": {

src/routes/(protected)/dynamic-entities/system/[id]/crud/+page.svelte

@@ -915,11 +915,6 @@
         <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
           <thead class="bg-gray-50 dark:bg-gray-900">
             <tr>
-              <th
-                class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
-              >
-                ID
-              </th>
               {#each Object.keys(properties).slice(0, 4) as fieldName}
                 <th
                   class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
@@ -939,13 +934,7 @@
           >
             {#each filteredRecords as record, index}
               {@const recordData = getRecordData(record)}
-              {@const recordId = getRecordId(record)}
               <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                <td
-                  class="max-w-xs truncate px-6 py-4 text-sm font-mono text-gray-600 dark:text-gray-400"
-                >
-                  {recordId || "-"}
-                </td>
                 {#each Object.keys(properties).slice(0, 4) as fieldName}
                   <td
                     class="max-w-xs truncate px-6 py-4 text-sm text-gray-900 dark:text-gray-100"
@@ -1339,14 +1328,6 @@
 
       <div class="bg-white p-6 dark:bg-gray-800">
         <dl class="space-y-4">
-          <div>
-            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
-              ID
-            </dt>
-            <dd class="mt-1 text-sm font-mono text-gray-600 dark:text-gray-400">
-              {getRecordId(selectedRecord) || "-"}
-            </dd>
-          </div>
           {#each Object.entries(properties) as [fieldName, fieldDef]}
             {@const recordData = getRecordData(selectedRecord)}
             <div>

src/routes/(protected)/rbac/entitlement-requests/+page.server.ts

@@ -21,7 +21,9 @@ interface EntitlementRequestsResponse {
   entitlement_requests: EntitlementRequest[];
 }
 
-export const load: PageServerLoad = async ({ locals }) => {
+const DEFAULT_LIMIT = 50;
+
+export const load: PageServerLoad = async ({ locals, url }) => {
   const session = locals.session;
 
   if (!session?.data?.user) {
@@ -38,12 +40,18 @@ export const load: PageServerLoad = async ({ locals }) => {
       entitlementRequests: [],
       hasApiAccess: false,
       error: "No API access token available",
+      limit: DEFAULT_LIMIT,
+      offset: 0,
     };
   }
 
+  const limit = parseInt(url.searchParams.get("limit") || String(DEFAULT_LIMIT));
+  const offset = parseInt(url.searchParams.get("offset") || "0");
+  const sortDirection = url.searchParams.get("sort_direction") || "DESC";
+
   try {
     logger.info("=== ENTITLEMENT REQUESTS API CALL ===");
-    const endpoint = `/obp/v6.0.0/entitlement-requests`;
+    const endpoint = `/obp/v6.0.0/entitlement-requests?limit=${limit}&offset=${offset}&sort_direction=${sortDirection}`;
     logger.info(`Request: ${endpoint}`);
 
     const response: EntitlementRequestsResponse = await obp_requests.get(
@@ -58,6 +66,8 @@ export const load: PageServerLoad = async ({ locals }) => {
     return {
       entitlementRequests: response.entitlement_requests || [],
       hasApiAccess: true,
+      limit,
+      offset,
     };
   } catch (err) {
     logger.error("Error loading entitlement requests:", err);
@@ -69,6 +79,8 @@ export const load: PageServerLoad = async ({ locals }) => {
         err instanceof Error
           ? err.message
           : "Failed to load entitlement requests",
+      limit,
+      offset,
     };
   }
 };

src/routes/(protected)/rbac/entitlement-requests/+page.svelte

@@ -8,9 +8,12 @@
     User,
     Calendar,
     ArrowUpDown,
+    ChevronLeft,
+    ChevronRight,
   } from "@lucide/svelte";
   import { toast } from "$lib/utils/toastService";
   import { trackedFetch } from "$lib/utils/trackedFetch";
+  import { goto, invalidateAll } from "$app/navigation";
 
   interface EntitlementRequest {
     entitlement_request_id: string;
@@ -29,6 +32,10 @@
   let entitlementRequests = $derived(data.entitlementRequests || []);
   let hasApiAccess = $derived(data.hasApiAccess);
   let error = $derived(data.error);
+  let limit = $derived(data.limit || 50);
+  let offset = $derived(data.offset || 0);
+  let hasNextPage = $derived(entitlementRequests.length >= limit);
+  let hasPreviousPage = $derived(offset > 0);
   // Search state
   let searchQuery = $state("");
 
@@ -68,6 +75,17 @@
     return sorted;
   });
 
+  // Pagination
+  function nextPage() {
+    const newOffset = offset + limit;
+    goto(`?limit=${limit}&offset=${newOffset}&sort_direction=DESC`);
+  }
+
+  function previousPage() {
+    const newOffset = Math.max(0, offset - limit);
+    goto(`?limit=${limit}&offset=${newOffset}&sort_direction=DESC`);
+  }
+
   // Helper function to format date
   function formatDate(dateString: string): string {
     try {
@@ -159,7 +177,7 @@
           );
 
           setTimeout(() => {
-            window.location.reload();
+            invalidateAll();
           }, 1000);
           return;
         }
@@ -446,6 +464,34 @@
               </div>
             {/each}
           </div>
+
+          <!-- Pagination -->
+          <div class="pagination">
+            <div class="pagination-info">
+              Showing {offset + 1}–{offset + entitlementRequests.length}
+              {#if offset > 0}
+                <span class="pagination-offset">(offset: {offset})</span>
+              {/if}
+            </div>
+            <div class="pagination-buttons">
+              <button
+                class="btn-pagination"
+                onclick={previousPage}
+                disabled={!hasPreviousPage}
+              >
+                <ChevronLeft size={16} />
+                Previous
+              </button>
+              <button
+                class="btn-pagination"
+                onclick={nextPage}
+                disabled={!hasNextPage}
+              >
+                Next
+                <ChevronRight size={16} />
+              </button>
+            </div>
+          </div>
         </div>
       {/if}
     </div>
@@ -958,6 +1004,78 @@
     background: rgb(var(--color-error-700));
   }
 
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  :global([data-mode="dark"]) .pagination {
+    border-top-color: rgb(var(--color-surface-700));
+  }
+
+  .pagination-info {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+
+  :global([data-mode="dark"]) .pagination-info {
+    color: var(--color-surface-400);
+  }
+
+  .pagination-offset {
+    margin-left: 0.25rem;
+    color: #9ca3af;
+  }
+
+  :global([data-mode="dark"]) .pagination-offset {
+    color: var(--color-surface-500);
+  }
+
+  .pagination-buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .btn-pagination {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    background: white;
+    color: #374151;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .btn-pagination:hover:not(:disabled) {
+    background: #f9fafb;
+    border-color: #9ca3af;
+  }
+
+  .btn-pagination:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :global([data-mode="dark"]) .btn-pagination {
+    background: rgb(var(--color-surface-700));
+    border-color: rgb(var(--color-surface-600));
+    color: var(--color-surface-200);
+  }
+
+  :global([data-mode="dark"]) .btn-pagination:hover:not(:disabled) {
+    background: rgb(var(--color-surface-600));
+    border-color: rgb(var(--color-surface-500));
+  }
+
   @media (max-width: 768px) {
     .header-top {
       flex-direction: column;

src/routes/(protected)/users/[provider]/[username]/+page.server.ts

@@ -5,17 +5,6 @@ import { obp_requests } from "$lib/obp/requests";
 import { SessionOAuthHelper } from "$lib/oauth/sessionHelper";
 import { error } from "@sveltejs/kit";
 
-interface UserDetail {
-  user_id: string;
-  username: string;
-  email: string;
-  provider: string;
-  created_date: string;
-  entitlements?: any[];
-  views?: any[];
-  accounts?: any[];
-}
-
 export const load: PageServerLoad = async ({ locals, params }) => {
   const session = locals.session;
 
@@ -42,8 +31,10 @@ export const load: PageServerLoad = async ({ locals, params }) => {
     };
   }
 
+  let user = null;
+
   try {
-    // Fetch user details from OBP API using v5.1.0 endpoint
+    // Fetch user details from OBP API
     logger.info("=== USER DETAIL API CALL ===");
     const endpoint = `/obp/v6.0.0/users/provider/${encodeURIComponent(provider)}/username/${encodeURIComponent(username)}`;
     logger.info(`Request: ${endpoint}`);
@@ -53,12 +44,7 @@ export const load: PageServerLoad = async ({ locals, params }) => {
     logger.info(`Response: User ${username} from provider ${provider}`);
 
     if (response) {
-      return {
-        user: response,
-        provider,
-        username,
-        hasApiAccess: true,
-      };
+      user = response;
     } else {
       logger.warn("NO USER DATA IN RESPONSE");
       return {
@@ -84,4 +70,11 @@ export const load: PageServerLoad = async ({ locals, params }) => {
       error: err instanceof Error ? err.message : "Failed to load user details",
     };
   }
+
+  return {
+    user,
+    provider,
+    username,
+    hasApiAccess: true,
+  };
 };