Enhance Process Management with Improved Filtering and Pagination

- Updated the items per page default to 20 for better data visibility in process management.
- Implemented comprehensive filtering options for processes, including search by name, description, category, and creator, enhancing user experience and data retrieval.
- Adjusted pagination logic to handle high limits, allowing for client-side pagination when necessary.
- Enhanced API response handling to accommodate new pagination and filtering features, ensuring accurate data representation and navigation.

pages/process-builder/manage.vue

@@ -31,7 +31,7 @@ const currentView = ref('dashboard'); // 'dashboard', 'list', 'analytics'
 
 // Pagination state
 const currentPage = ref(1);
-const itemsPerPage = ref(5); // Set to 5 to test pagination
+const itemsPerPage = ref(20); // Default to 20 items per page
 const totalItems = ref(0);
 
 // Dashboard metrics and data
@@ -75,6 +75,28 @@ const categoryOptions = [
 const filteredProcesses = computed(() => {
   let filtered = processStore.processes;
   
+  // Apply search filter
+  if (searchQuery.value.trim()) {
+    const query = searchQuery.value.toLowerCase().trim();
+    filtered = filtered.filter(process => 
+      process.name?.toLowerCase().includes(query) ||
+      process.description?.toLowerCase().includes(query) ||
+      process.category?.toLowerCase().includes(query) ||
+      process.creator?.userFullName?.toLowerCase().includes(query) ||
+      process.creator?.userUsername?.toLowerCase().includes(query)
+    );
+  }
+  
+  // Apply status filter
+  if (statusFilter.value) {
+    filtered = filtered.filter(process => process.status === statusFilter.value);
+  }
+  
+  // Apply category filter
+  if (categoryFilter.value) {
+    filtered = filtered.filter(process => process.category === categoryFilter.value);
+  }
+  
   // Update total items for pagination
   totalItems.value = filtered.length;
   
@@ -230,7 +252,8 @@ const loadProcesses = async () => {
   try {
     const options = {
       sortBy: sortBy.value,
-      sortOrder: sortOrder.value
+      sortOrder: sortOrder.value,
+      limit: 1000 // Set a high limit to get all processes
     };
     
     if (statusFilter.value) {
@@ -861,7 +884,8 @@ const copyWorkflowLink = async (processId) => {
                   { label: '5', value: 5 },
                   { label: '10', value: 10 },
                   { label: '20', value: 20 },
-                  { label: '50', value: 50 }
+                  { label: '50', value: 50 },
+                  { label: '100', value: 100 }
                 ]"
                 :classes="{
                   outer: 'mb-0',

server/api/process/index.get.js

@@ -53,6 +53,10 @@ export default defineEventHandler(async (event) => {
     // Calculate pagination
     const skip = (parseInt(page) - 1) * parseInt(limit);
     const take = parseInt(limit);
+    
+    // If limit is very high (like 1000), return all processes without pagination
+    // This allows the frontend to handle client-side pagination
+    const shouldReturnAll = parseInt(limit) >= 1000;
 
     // Build orderBy clause
     const orderBy = {};
@@ -63,8 +67,8 @@ export default defineEventHandler(async (event) => {
       prisma.process.findMany({
         where,
         orderBy,
-        skip,
-        take,
+        skip: shouldReturnAll ? 0 : skip,
+        take: shouldReturnAll ? undefined : take,
         select: {
           processID: true,
           processUUID: true,
@@ -93,9 +97,9 @@ export default defineEventHandler(async (event) => {
     ]);
 
     // Calculate pagination info
-    const totalPages = Math.ceil(totalCount / take);
-    const hasNextPage = parseInt(page) < totalPages;
-    const hasPrevPage = parseInt(page) > 1;
+    const totalPages = shouldReturnAll ? 1 : Math.ceil(totalCount / take);
+    const hasNextPage = shouldReturnAll ? false : parseInt(page) < totalPages;
+    const hasPrevPage = shouldReturnAll ? false : parseInt(page) > 1;
 
     return {
       success: true,