Table Styling & Add search feature to backend

application/api/user/routes.py

@@ -473,11 +473,22 @@
         sort_order = request.args.get("order", "desc")  # Default to 'desc'
         page = int(request.args.get("page", 1))  # Default to 1
         rows_per_page = int(request.args.get("rows", 10))  # Default to 10
+        # add .strip() to remove leading and trailing whitespaces
+        search_term = request.args.get(
+            "search", ""
+        ).strip()  # add search for filter documents
 
-        # Prepare
+        # Prepare query for filtering
         query = {"user": user}
+        if search_term:
+            query["name"] = {
+                "$regex": search_term,
+                "$options": "i",  # using case-insensitive search
+            }
+
         total_documents = sources_collection.count_documents(query)
         total_pages = max(1, math.ceil(total_documents / rows_per_page))
+        page = min(max(1, page), total_pages) # add this to make sure page inbound is within the range
         sort_order = 1 if sort_order == "asc" else -1
         skip = (page - 1) * rows_per_page
 

application/celery_init.py

@@ -2,14 +2,22 @@
 from application.core.settings import settings
 from celery.signals import setup_logging
 
+
 def make_celery(app_name=__name__):
-    celery = Celery(app_name, broker=settings.CELERY_BROKER_URL, backend=settings.CELERY_RESULT_BACKEND)
+    celery = Celery(
+        app_name,
+        broker=settings.CELERY_BROKER_URL,
+        backend=settings.CELERY_RESULT_BACKEND,
+    )
     celery.conf.update(settings)
     return celery
 
+
 @setup_logging.connect
 def config_loggers(*args, **kwargs):
     from application.core.logging_config import setup_logging
+
     setup_logging()
 
+
 celery = make_celery()

frontend/src/components/DocumentPagination.tsx

@@ -42,7 +42,7 @@ const Pagination: React.FC<PaginationProps> = ({
   };
 
   return (
-    <div className="flex items-center text-xs justify-end gap-4 mt-2 p-2 border-gray-200">
+    <div className="flex items-center text-xs justify-end  gap-4 mt-2 p-2 border-gray-200">
       <div className="flex items-center gap-2 ">
         <span className="text-gray-900 dark:text-gray-50">Rows per page:</span>
         <select

frontend/src/index.css

@@ -50,19 +50,23 @@ body.dark {
 
 @layer components {
   .table-default {
-    @apply block w-full mx-auto table-auto content-start justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
+    @apply block w-full table-auto content-start justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
   }
 
   .table-default th {
-    @apply p-4 w-full font-normal text-gray-400 text-nowrap; /* Remove border-r */
+    @apply p-4  font-normal text-gray-400 text-nowrap; /* Remove border-r */
+  }
+
+  .table-default th {
+    flex: 1;
   }
 
   .table-default th:last-child {
-    @apply w-[auto];
+    flex: 0; /* Ensure the last column does not stretch unnecessarily */
   }
 
   .table-default td {
-    @apply border-t border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
+    @apply border-t w-full border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
   }
 
   .table-default td:last-child {

frontend/src/preferences/preferenceApi.ts

@@ -25,9 +25,10 @@ export async function getDocsWithPagination(
   order = 'desc',
   pageNumber = 1,
   rowsPerPage = 10,
+  searchTerm = '',
 ): Promise<GetDocsResponse | null> {
   try {
-    const query = `sort=${sort}&order=${order}&page=${pageNumber}&rows=${rowsPerPage}`;
+    const query = `sort=${sort}&order=${order}&page=${pageNumber}&rows=${rowsPerPage}&search=${searchTerm}`;
     const response = await userService.getDocsWithPagination(query);
     const data = await response.json();
     const docs: Doc[] = [];