From 2ad6b4fa4ea3c257af0b9cd05804f7e7e9f613e0 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Fri, 15 Nov 2024 23:16:58 -0500
Subject: [PATCH 01/10] update table styling

---
 .../src/components/DocumentPagination.tsx     |   2 +-
 frontend/src/index.css                        |  12 +-
 frontend/src/settings/Documents.tsx           | 224 ++++++++++--------
 3 files changed, 128 insertions(+), 110 deletions(-)

diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
index b0532362b..4000f83d9 100644
--- a/frontend/src/components/DocumentPagination.tsx
+++ b/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
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9bd2ec964..91f1403dd 100644
--- a/frontend/src/index.css
+++ b/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 {
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index f91a33559..1e5a610ec 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -86,10 +86,8 @@ const Documents: React.FC<DocumentsProps> = ({
     }
     getDocsWithPagination(sortField, sortOrder, page, rowsPerPg)
       .then((data) => {
-        //dispatch(setSourceDocs(data ? data.docs : []));
         dispatch(setPaginatedDocuments(data ? data.docs : []));
         setTotalPages(data ? data.totalPages : 0);
-        //setTotalDocuments(data ? data.totalDocuments : 0);
       })
       .catch((error) => console.error(error))
       .finally(() => {
@@ -161,92 +159,127 @@ const Documents: React.FC<DocumentsProps> = ({
           {loading ? (
             <SkeletonLoader count={1} />
           ) : (
-            <table className="table-default">
-              <thead>
-                <tr>
-                  <th>{t('settings.documents.name')}</th>
-                  <th>
-                    <div className="flex justify-center items-center">
-                      {t('settings.documents.date')}
-                      <img
-                        className="cursor-pointer"
-                        onClick={() => refreshDocs('date')}
-                        src={caretSort}
-                        alt="sort"
-                      />
-                    </div>
-                  </th>
-                  <th>
-                    <div className="flex justify-center items-center">
-                      {t('settings.documents.tokenUsage')}
-                      <img
-                        className="cursor-pointer"
-                        onClick={() => refreshDocs('tokens')}
-                        src={caretSort}
-                        alt="sort"
-                      />
-                    </div>
-                  </th>
-                  <th>
-                    <div className="flex justify-center items-center">
-                      {t('settings.documents.type')}
-                    </div>
-                  </th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody>
-                {!currentDocuments?.length && (
-                  <tr>
-                    <td colSpan={5} className="!p-4">
-                      {t('settings.documents.noData')}
-                    </td>
-                  </tr>
-                )}
-                {Array.isArray(currentDocuments) &&
-                  currentDocuments.map((document, index) => (
-                    <tr key={index} className="text-nowrap font-normal">
-                      <td>{document.name}</td>
-                      <td>{document.date}</td>
-                      <td>
-                        {document.tokens ? formatTokens(+document.tokens) : ''}
-                      </td>
-                      <td>
-                        {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
-                      </td>
-                      <td>
-                        <div className="min-w-[70px] flex flex-row items-end justify-end ml-auto">
-                          {document.type !== 'remote' && (
+            <div className="flex flex-col">
+              <div className="flex-grow">
+                <div className="dark:border-silver/40 border-silver rounded-xl border overflow-auto">
+                  <table className="min-w-full divide-y divide-gray-200 ">
+                    <thead>
+                      <tr>
+                        <th className="px-5 py-3 text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
+                          {t('settings.documents.name')}
+                        </th>
+                        <th className="px-5 py-3 text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
+                          <div className="flex justify-center items-center">
+                            {t('settings.documents.date')}
                             <img
-                              src={Trash}
-                              alt="Delete"
-                              className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
-                              id={`img-${index}`}
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                handleDeleteDocument(index, document);
-                              }}
+                              className="cursor-pointer"
+                              onClick={() => refreshDocs('date')}
+                              src={caretSort}
+                              alt="sort"
                             />
-                          )}
-                          {document.syncFrequency && (
-                            <div className="ml-2">
-                              <DropdownMenu
-                                name="Sync"
-                                options={syncOptions}
-                                onSelect={(value: string) => {
-                                  handleManageSync(document, value);
-                                }}
-                                defaultValue={document.syncFrequency}
-                                icon={SyncIcon}
-                              />
-                            </div>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
+                          </div>
+                        </th>
+                        <th className="px-5 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
+                          <div className="flex justify-center items-center">
+                            {t('settings.documents.tokenUsage')}
+                            <img
+                              className="cursor-pointer"
+                              onClick={() => refreshDocs('tokens')}
+                              src={caretSort}
+                              alt="sort"
+                            />
+                          </div>
+                        </th>
+                        <th className="px-5 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
+                          <div className="flex justify-center items-center">
+                            {t('settings.documents.type')}
+                          </div>
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-6 py-2 text-start text-xs font-medium text-gray-700 dark:text-gray-50 uppercase"
+                        ></th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
+                      {!currentDocuments?.length && (
+                        <tr>
+                          <td colSpan={5} className="!p-4">
+                            {t('settings.documents.noData')}
+                          </td>
+                        </tr>
+                      )}
+                      {Array.isArray(currentDocuments) &&
+                        currentDocuments.map((document, index) => (
+                          <tr key={index} className="text-nowrap font-normal">
+                            <td className="px-6 py-4 whitespace-nowrap text-left text-sm font-medium text-gray-800 dark:text-neutral-200">
+                              {document.name}
+                            </td>
+                            <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200">
+                              {document.date}
+                            </td>
+                            <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200">
+                              {document.tokens
+                                ? formatTokens(+document.tokens)
+                                : ''}
+                            </td>
+                            <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200">
+                              {document.type === 'remote'
+                                ? 'Pre-loaded'
+                                : 'Private'}
+                            </td>
+                            <td className="px-6 py-4 whitespace-nowrap text-left text-sm font-medium flex">
+                              <div className="min-w-[150px] flex flex-row items-center ml-auto gap-10">
+                                {document.type !== 'remote' && (
+                                  <img
+                                    src={Trash}
+                                    alt="Delete"
+                                    className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
+                                    id={`img-${index}`}
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      handleDeleteDocument(index, document);
+                                    }}
+                                  />
+                                )}
+                                {document.syncFrequency && (
+                                  <div className="ml-2">
+                                    <DropdownMenu
+                                      name="Sync"
+                                      options={syncOptions}
+                                      onSelect={(value: string) => {
+                                        handleManageSync(document, value);
+                                      }}
+                                      defaultValue={document.syncFrequency}
+                                      icon={SyncIcon}
+                                    />
+                                  </div>
+                                )}
+                              </div>
+                            </td>
+                          </tr>
+                        ))}
+                    </tbody>
+                  </table>
+                </div>
+                <div className="mt-4">
+                  <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    rowsPerPage={rowsPerPage}
+                    onPageChange={(page) => {
+                      setCurrentPage(page);
+                      refreshDocs(sortField, page, rowsPerPage);
+                    }}
+                    onRowsPerPageChange={(rows) => {
+                      setRowsPerPage(rows);
+                      setCurrentPage(1);
+                      refreshDocs(sortField, 1, rows);
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
           )}
         </div>
         {/* Conditionally render the Upload modal based on modalState */}
@@ -263,25 +296,6 @@ const Documents: React.FC<DocumentsProps> = ({
           </div>
         )}
       </div>
-      {/* Pagination component with props:
-      # Note: Every time the page changes, 
-      the refreshDocs function is called with the updated page number and rows per page.
-      and reset cursor paginated query parameter to undefined.
-      */}
-      <Pagination
-        currentPage={currentPage}
-        totalPages={totalPages}
-        rowsPerPage={rowsPerPage}
-        onPageChange={(page) => {
-          setCurrentPage(page);
-          refreshDocs(sortField, page, rowsPerPage);
-        }}
-        onRowsPerPageChange={(rows) => {
-          setRowsPerPage(rows);
-          setCurrentPage(1);
-          refreshDocs(sortField, 1, rows);
-        }}
-      />
     </div>
   );
 };

From 13b91193cc569e1de206f1354362b0c60cf16704 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Mon, 18 Nov 2024 00:05:48 -0500
Subject: [PATCH 02/10] backend : update sources/paginated to search document
 by query 'name'

---
 application/api/user/routes.py | 13 ++++++++++++-
 application/celery_init.py     | 10 +++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 6a2f3bea3..5ebd54c84 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -473,11 +473,22 @@ def get(self):
         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
 
diff --git a/application/celery_init.py b/application/celery_init.py
index c5838083c..185cc87f1 100644
--- a/application/celery_init.py
+++ b/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()

From 0493352292b3d89317709c8bb79e77cdd978ac99 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Mon, 18 Nov 2024 00:06:18 -0500
Subject: [PATCH 03/10] frontend: remove search on localstate, change to
 backend search use mongo passing searchTerm

---
 frontend/src/preferences/preferenceApi.ts |  3 ++-
 frontend/src/settings/Documents.tsx       | 29 +++++++++++++----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/frontend/src/preferences/preferenceApi.ts b/frontend/src/preferences/preferenceApi.ts
index 32cf8b178..8d21bdcd2 100644
--- a/frontend/src/preferences/preferenceApi.ts
+++ b/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[] = [];
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 1e5a610ec..bb45b9ff0 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -40,25 +40,18 @@ const Documents: React.FC<DocumentsProps> = ({
   const { t } = useTranslation();
   const dispatch = useDispatch();
   // State for search input
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
   // State for modal: active/inactive
   const [modalState, setModalState] = useState<ActiveState>('INACTIVE'); // Initialize with inactive state
-  const [isOnboarding, setIsOnboarding] = useState(false); // State for onboarding flag
-  const [loading, setLoading] = useState(false);
+  const [isOnboarding, setIsOnboarding] = useState<boolean>(false); // State for onboarding flag
+  const [loading, setLoading] = useState<boolean>(false);
   const [sortField, setSortField] = useState<'date' | 'tokens'>('date');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
   // Pagination
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const [totalPages, setTotalPages] = useState<number>(1);
-  // const [totalDocuments, setTotalDocuments] = useState<number>(0);
-  // Filter documents based on the search term
-  const filteredDocuments = paginatedDocuments?.filter((document) =>
-    document.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-  // State for documents
-  const currentDocuments = filteredDocuments ?? [];
-  console.log('currentDocuments', currentDocuments);
+  const currentDocuments = paginatedDocuments ?? [];
   const syncOptions = [
     { label: 'Never', value: 'never' },
     { label: 'Daily', value: 'daily' },
@@ -84,7 +77,7 @@ const Documents: React.FC<DocumentsProps> = ({
         setSortOrder('desc');
       }
     }
-    getDocsWithPagination(sortField, sortOrder, page, rowsPerPg)
+    getDocsWithPagination(sortField, sortOrder, page, rowsPerPg, searchTerm)
       .then((data) => {
         dispatch(setPaginatedDocuments(data ? data.docs : []));
         setTotalPages(data ? data.totalPages : 0);
@@ -130,6 +123,10 @@ const Documents: React.FC<DocumentsProps> = ({
     }
   }, [modalState, sortField, currentPage, rowsPerPage]);
 
+  useEffect(() => {
+    refreshDocs(sortField, 1, rowsPerPage);
+  }, [searchTerm]);
+
   return (
     <div className="mt-8">
       <div className="flex flex-col relative">
@@ -143,7 +140,13 @@ const Documents: React.FC<DocumentsProps> = ({
                 type="text"
                 id="document-search-input"
                 value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)} // Handle search input change
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  setCurrentPage(1);
+                  // refreshDocs(sortField, 1, rowsPerPage);
+                  // do not call refreshDocs here the state is async
+                  // so it will not have the updated value
+                }} // Handle search input change
               />
             </div>
             <button

From 25b1173db76b85c9b642d5403d0edafee4f39f7e Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Fri, 22 Nov 2024 09:10:58 -0500
Subject: [PATCH 04/10] remove table type column

---
 frontend/src/settings/Documents.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index bb45b9ff0..51db58953 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -193,11 +193,13 @@ const Documents: React.FC<DocumentsProps> = ({
                             />
                           </div>
                         </th>
+                        {/*}
                         <th className="px-5 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
                           <div className="flex justify-center items-center">
                             {t('settings.documents.type')}
                           </div>
                         </th>
+                        */}
                         <th
                           scope="col"
                           className="px-6 py-2 text-start text-xs font-medium text-gray-700 dark:text-gray-50 uppercase"
@@ -226,11 +228,13 @@ const Documents: React.FC<DocumentsProps> = ({
                                 ? formatTokens(+document.tokens)
                                 : ''}
                             </td>
+                            {/*}
                             <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200">
                               {document.type === 'remote'
                                 ? 'Pre-loaded'
                                 : 'Private'}
                             </td>
+                            */}
                             <td className="px-6 py-4 whitespace-nowrap text-left text-sm font-medium flex">
                               <div className="min-w-[150px] flex flex-row items-center ml-auto gap-10">
                                 {document.type !== 'remote' && (

From f01f76dba707720a7375e061aa9a4711983dd8f6 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Sat, 23 Nov 2024 18:06:54 -0500
Subject: [PATCH 05/10] Move Pagination Outside Scrollable Area | Add smooth
 transition dropdown rows per page select | adjust sync button

---
 .../src/components/DocumentPagination.tsx     |  69 +++++++----
 frontend/src/components/DropdownMenu.tsx      |   2 +-
 frontend/src/settings/Documents.tsx           | 111 ++++++++++--------
 3 files changed, 112 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
index 4000f83d9..af849ed4d 100644
--- a/frontend/src/components/DocumentPagination.tsx
+++ b/frontend/src/components/DocumentPagination.tsx
@@ -19,7 +19,10 @@ const Pagination: React.FC<PaginationProps> = ({
   onPageChange,
   onRowsPerPageChange,
 }) => {
-  const [rowsPerPageOptions] = useState([5, 10, 15, 20]);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const rowsPerPageOptions = [5, 10, 20, 50];
+
+  const toggleDropdown = () => setIsDropdownOpen((prev) => !prev);
 
   const handlePreviousPage = () => {
     if (currentPage > 1) {
@@ -41,31 +44,51 @@ const Pagination: React.FC<PaginationProps> = ({
     onPageChange(totalPages);
   };
 
+  const handleSelectRowsPerPage = (rows: number) => {
+    setIsDropdownOpen(false);
+    onRowsPerPageChange(rows);
+  };
+
   return (
-    <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 ">
+    <div className="flex items-center text-xs justify-end gap-4 mt-2 p-2 border-gray-200">
+      {/* Rows per page dropdown */}
+      <div className="flex items-center gap-2 relative">
         <span className="text-gray-900 dark:text-gray-50">Rows per page:</span>
-        <select
-          value={rowsPerPage}
-          onChange={(e) => onRowsPerPageChange(Number(e.target.value))}
-          className="border border-gray-300 rounded px-2 py-1 dark:bg-dark-charcoal dark:text-gray-50"
-        >
-          {rowsPerPageOptions.map((option) => (
-            <option
-              className="bg-white dark:bg-dark-charcoal dark:text-gray-50"
-              key={option}
-              value={option}
-            >
-              {option}
-            </option>
-          ))}
-        </select>
+        <div className="relative">
+          <button
+            onClick={toggleDropdown}
+            className="px-3 py-1 border rounded dark:bg-dark-charcoal dark:text-light-gray hover:bg-gray-200 dark:hover:bg-neutral-700"
+          >
+            {rowsPerPage}
+          </button>
+          <div
+            className={`absolute z-50 right-0 mt-1 w-28 transform  bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${
+              isDropdownOpen
+                ? 'scale-100 opacity-100 visible'
+                : 'scale-95 opacity-0 invisible'
+            }`}
+          >
+            {rowsPerPageOptions.map((option) => (
+              <div
+                key={option}
+                onClick={() => handleSelectRowsPerPage(option)}
+                className={`cursor-pointer px-4 py-2 text-xs hover:bg-gray-100 dark:hover:bg-neutral-700 ${
+                  rowsPerPage === option
+                    ? 'bg-gray-100 dark:bg-neutral-700 dark:text-light-gray'
+                    : 'bg-white dark:bg-dark-charcoal dark:text-light-gray'
+                }`}
+              >
+                {option}
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
 
+      {/* Pagination controls */}
       <div className="text-gray-900 dark:text-gray-50">
         Page {currentPage} of {totalPages}
       </div>
-
       <div className="flex items-center gap-2 text-gray-900 dark:text-gray-50">
         <button
           onClick={handleFirstPage}
@@ -74,7 +97,7 @@ const Pagination: React.FC<PaginationProps> = ({
         >
           <img
             src={DoubleArrowLeft}
-            alt="arrow"
+            alt="First page"
             className="dark:invert dark:sepia dark:brightness-200"
           />
         </button>
@@ -85,7 +108,7 @@ const Pagination: React.FC<PaginationProps> = ({
         >
           <img
             src={SingleArrowLeft}
-            alt="arrow"
+            alt="Previous page"
             className="dark:invert dark:sepia dark:brightness-200"
           />
         </button>
@@ -96,7 +119,7 @@ const Pagination: React.FC<PaginationProps> = ({
         >
           <img
             src={SingleArrowRight}
-            alt="arrow"
+            alt="Next page"
             className="dark:invert dark:sepia dark:brightness-200"
           />
         </button>
@@ -107,7 +130,7 @@ const Pagination: React.FC<PaginationProps> = ({
         >
           <img
             src={DoubleArrowRight}
-            alt="arrow"
+            alt="Last page"
             className="dark:invert dark:sepia dark:brightness-200"
           />
         </button>
diff --git a/frontend/src/components/DropdownMenu.tsx b/frontend/src/components/DropdownMenu.tsx
index 787d3b847..2e6c922c4 100644
--- a/frontend/src/components/DropdownMenu.tsx
+++ b/frontend/src/components/DropdownMenu.tsx
@@ -48,7 +48,7 @@ export default function DropdownMenu({
     <div className="static inline-block text-left" ref={dropdownRef}>
       <button
         onClick={handleToggle}
-        className="flex w-20 cursor-pointer flex-row items-center gap-px rounded-3xl border-purple-30/25 bg-purple-30 p-2 text-xs text-white hover:bg-[#6F3FD1] focus:outline-none"
+        className="flex w-20 cursor-pointer flex-row  gap-1 rounded-3xl border-purple-30/25 bg-purple-30 p-2 text-xs text-white hover:bg-[#6F3FD1] focus:outline-none"
       >
         {icon && <img src={icon} alt="OptionIcon" className="h-4 w-4" />}
         {selectedOption.value !== 'never' ? selectedOption.label : name}
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 51db58953..074d5516e 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
@@ -59,34 +59,50 @@ const Documents: React.FC<DocumentsProps> = ({
     { label: 'Monthly', value: 'monthly' },
   ];
 
-  const refreshDocs = (
-    field: 'date' | 'tokens' | undefined,
-    pageNumber?: number,
-    rows?: number,
-  ) => {
-    const page = pageNumber ?? currentPage;
-    const rowsPerPg = rows ?? rowsPerPage;
+  const refreshDocs = useCallback(
+    (
+      field: 'date' | 'tokens' | undefined,
+      pageNumber?: number,
+      rows?: number,
+    ) => {
+      const page = pageNumber ?? currentPage;
+      const rowsPerPg = rows ?? rowsPerPage;
 
-    if (field !== undefined) {
-      if (field === sortField) {
-        // Toggle sort order
-        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
-      } else {
-        // Change sort field and reset order to 'desc'
-        setSortField(field);
-        setSortOrder('desc');
+      // If field is undefined, (Pagination or Search) use the current sortField
+      const newSortField = field ?? sortField;
+
+      // If field is undefined, (Pagination or Search) use the current sortOrder
+      const newSortOrder =
+        field === sortField
+          ? sortOrder === 'asc'
+            ? 'desc'
+            : 'asc'
+          : sortOrder;
+
+      // If field is defined, update the sortField and sortOrder
+      if (field) {
+        setSortField(newSortField);
+        setSortOrder(newSortOrder);
       }
-    }
-    getDocsWithPagination(sortField, sortOrder, page, rowsPerPg, searchTerm)
-      .then((data) => {
-        dispatch(setPaginatedDocuments(data ? data.docs : []));
-        setTotalPages(data ? data.totalPages : 0);
-      })
-      .catch((error) => console.error(error))
-      .finally(() => {
-        setLoading(false);
-      });
-  };
+
+      getDocsWithPagination(
+        newSortField,
+        newSortOrder,
+        page,
+        rowsPerPg,
+        searchTerm,
+      )
+        .then((data) => {
+          dispatch(setPaginatedDocuments(data ? data.docs : []));
+          setTotalPages(data ? data.totalPages : 0);
+        })
+        .catch((error) => console.error(error))
+        .finally(() => {
+          setLoading(false);
+        });
+    },
+    [currentPage, rowsPerPage, sortField, sortOrder, searchTerm],
+  );
 
   const handleManageSync = (doc: Doc, sync_frequency: string) => {
     setLoading(true);
@@ -118,13 +134,15 @@ const Documents: React.FC<DocumentsProps> = ({
   };
 
   useEffect(() => {
+    console.log('modalState', modalState);
     if (modalState === 'INACTIVE') {
       refreshDocs(sortField, currentPage, rowsPerPage);
     }
-  }, [modalState, sortField, currentPage, rowsPerPage]);
+  }, [modalState]);
 
   useEffect(() => {
-    refreshDocs(sortField, 1, rowsPerPage);
+    // undefine to prevent reset the sort order
+    refreshDocs(undefined, 1, rowsPerPage);
   }, [searchTerm]);
 
   return (
@@ -151,6 +169,7 @@ const Documents: React.FC<DocumentsProps> = ({
             </div>
             <button
               className="rounded-full w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
+              title="Add New Document"
               onClick={() => {
                 setIsOnboarding(false); // Set onboarding flag if needed
                 setModalState('ACTIVE'); // Open the upload modal
@@ -165,7 +184,7 @@ const Documents: React.FC<DocumentsProps> = ({
             <div className="flex flex-col">
               <div className="flex-grow">
                 <div className="dark:border-silver/40 border-silver rounded-xl border overflow-auto">
-                  <table className="min-w-full divide-y divide-gray-200 ">
+                  <table className="min-w-full divide-y divide-silver dark:divide-silver/40 ">
                     <thead>
                       <tr>
                         <th className="px-5 py-3 text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
@@ -269,26 +288,26 @@ const Documents: React.FC<DocumentsProps> = ({
                     </tbody>
                   </table>
                 </div>
-                <div className="mt-4">
-                  <Pagination
-                    currentPage={currentPage}
-                    totalPages={totalPages}
-                    rowsPerPage={rowsPerPage}
-                    onPageChange={(page) => {
-                      setCurrentPage(page);
-                      refreshDocs(sortField, page, rowsPerPage);
-                    }}
-                    onRowsPerPageChange={(rows) => {
-                      setRowsPerPage(rows);
-                      setCurrentPage(1);
-                      refreshDocs(sortField, 1, rows);
-                    }}
-                  />
-                </div>
               </div>
             </div>
           )}
         </div>
+        {/* outside scrollable area */}
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          rowsPerPage={rowsPerPage}
+          onPageChange={(page) => {
+            setCurrentPage(page);
+            refreshDocs(undefined, page, rowsPerPage);
+          }}
+          onRowsPerPageChange={(rows) => {
+            setRowsPerPage(rows);
+            setCurrentPage(1);
+            refreshDocs(undefined, 1, rows);
+          }}
+        />
+
         {/* Conditionally render the Upload modal based on modalState */}
         {modalState === 'ACTIVE' && (
           <div className="fixed top-0 left-0 w-screen h-screen z-50 flex items-center justify-center bg-transparent">

From e5bd194b6c7a29bd62e89f00e4a485de45d0f5a6 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Sat, 23 Nov 2024 20:04:53 -0500
Subject: [PATCH 06/10] Remove dangling console log

---
 frontend/src/settings/Documents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 074d5516e..7efd9016c 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -134,7 +134,7 @@ const Documents: React.FC<DocumentsProps> = ({
   };
 
   useEffect(() => {
-    console.log('modalState', modalState);
+    // console.log('modalState', modalState);
     if (modalState === 'INACTIVE') {
       refreshDocs(sortField, currentPage, rowsPerPage);
     }

From 2709994ede7d644afb1973b2d1b0734552bba735 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Sun, 24 Nov 2024 11:18:42 -0500
Subject: [PATCH 07/10] update APIKey Table and dark styling

---
 frontend/src/settings/APIKeys.tsx   | 85 +++++++++++++++++------------
 frontend/src/settings/Documents.tsx |  7 ++-
 2 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index b039477c3..6775ba87e 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -109,41 +109,56 @@ export default function APIKeys() {
             {loading ? (
               <SkeletonLoader count={1} component={'chatbot'} />
             ) : (
-              <table className="table-default">
-                <thead>
-                  <tr>
-                    <th>{t('settings.apiKeys.name')}</th>
-                    <th>{t('settings.apiKeys.sourceDoc')}</th>
-                    <th>{t('settings.apiKeys.key')}</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {!apiKeys?.length && (
-                    <tr>
-                      <td colSpan={4} className="!p-4">
-                        {t('settings.apiKeys.noData')}
-                      </td>
-                    </tr>
-                  )}
-                  {apiKeys?.map((element, index) => (
-                    <tr key={index}>
-                      <td>{element.name}</td>
-                      <td>{element.source}</td>
-                      <td>{element.key}</td>
-                      <td>
-                        <img
-                          src={Trash}
-                          alt="Delete"
-                          className="h-4 w-4 cursor-pointer hover:opacity-50"
-                          id={`img-${index}`}
-                          onClick={() => handleDeleteKey(element.id)}
-                        />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+              <div className="flex flex-col">
+                <div className="flex-grow">
+                  <div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
+                    <table className="min-w-full divide-y divide-silver dark:divide-silver/40 ">
+                      <thead>
+                        <tr className="text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
+                          <th className="p-2">{t('settings.apiKeys.name')}</th>
+                          <th className="p-2">
+                            {t('settings.apiKeys.sourceDoc')}
+                          </th>
+                          <th className="p-2">{t('settings.apiKeys.key')}</th>
+                          <th></th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
+                        {!apiKeys?.length && (
+                          <tr>
+                            <td
+                              colSpan={4}
+                              className="!p-4 text-gray-800 dark:text-neutral-200 text-center"
+                            >
+                              {t('settings.apiKeys.noData')}
+                            </td>
+                          </tr>
+                        )}
+                        {Array.isArray(apiKeys) &&
+                          apiKeys?.map((element, index) => (
+                            <tr
+                              key={index}
+                              className="text-nowrap whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200 p-2"
+                            >
+                              <td className="p-1">{element.name}</td>
+                              <td className="p-2">{element.source}</td>
+                              <td>{element.key}</td>
+                              <td>
+                                <img
+                                  src={Trash}
+                                  alt="Delete"
+                                  className="h-4 w-4 cursor-pointer hover:opacity-50"
+                                  id={`img-${index}`}
+                                  onClick={() => handleDeleteKey(element.id)}
+                                />
+                              </td>
+                            </tr>
+                          ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
             )}
           </div>
         </div>
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 7efd9016c..4003f6552 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -183,7 +183,7 @@ const Documents: React.FC<DocumentsProps> = ({
           ) : (
             <div className="flex flex-col">
               <div className="flex-grow">
-                <div className="dark:border-silver/40 border-silver rounded-xl border overflow-auto">
+                <div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
                   <table className="min-w-full divide-y divide-silver dark:divide-silver/40 ">
                     <thead>
                       <tr>
@@ -228,7 +228,10 @@ const Documents: React.FC<DocumentsProps> = ({
                     <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
                       {!currentDocuments?.length && (
                         <tr>
-                          <td colSpan={5} className="!p-4">
+                          <td
+                            colSpan={5}
+                            className="!p-4 text-gray-800 dark:text-neutral-200"
+                          >
                             {t('settings.documents.noData')}
                           </td>
                         </tr>

From b5e5fb7f10337ea2c774a9b6a5f32e3c7cb080b1 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Sun, 24 Nov 2024 17:02:57 -0500
Subject: [PATCH 08/10] fix table header text wrap

---
 frontend/src/settings/Documents.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 4003f6552..0fd82aa8b 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -186,7 +186,7 @@ const Documents: React.FC<DocumentsProps> = ({
                 <div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
                   <table className="min-w-full divide-y divide-silver dark:divide-silver/40 ">
                     <thead>
-                      <tr>
+                      <tr className="text-nowrap">
                         <th className="px-5 py-3 text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
                           {t('settings.documents.name')}
                         </th>
@@ -201,7 +201,7 @@ const Documents: React.FC<DocumentsProps> = ({
                             />
                           </div>
                         </th>
-                        <th className="px-5 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
+                        <th className="px-5 py-2 text-center text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
                           <div className="flex justify-center items-center">
                             {t('settings.documents.tokenUsage')}
                             <img

From e22669f91d6483082b7b286df1bf128a0f032f38 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Sun, 24 Nov 2024 17:05:36 -0500
Subject: [PATCH 09/10] add text center when no data

---
 frontend/src/settings/Documents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 0fd82aa8b..0987b5d70 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -230,7 +230,7 @@ const Documents: React.FC<DocumentsProps> = ({
                         <tr>
                           <td
                             colSpan={5}
-                            className="!p-4 text-gray-800 dark:text-neutral-200"
+                            className="!p-4 text-gray-800 dark:text-neutral-200 text-center"
                           >
                             {t('settings.documents.noData')}
                           </td>

From d89bd0941d7cda6dc0287955ab9cf1829efb2916 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Mon, 25 Nov 2024 08:35:24 -0500
Subject: [PATCH 10/10] change visible to block

---
 frontend/src/components/DocumentPagination.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
index af849ed4d..f02ef1c05 100644
--- a/frontend/src/components/DocumentPagination.tsx
+++ b/frontend/src/components/DocumentPagination.tsx
@@ -62,17 +62,17 @@ const Pagination: React.FC<PaginationProps> = ({
             {rowsPerPage}
           </button>
           <div
-            className={`absolute z-50 right-0 mt-1 w-28 transform  bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${
+            className={`absolute z-50 right-0 mt-1 w-28 transform  bg-white dark:bg-dark-charcoal shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${
               isDropdownOpen
-                ? 'scale-100 opacity-100 visible'
-                : 'scale-95 opacity-0 invisible'
+                ? 'scale-100 opacity-100 block'
+                : 'scale-95 opacity-0 hidden'
             }`}
           >
             {rowsPerPageOptions.map((option) => (
               <div
                 key={option}
                 onClick={() => handleSelectRowsPerPage(option)}
-                className={`cursor-pointer px-4 py-2 text-xs hover:bg-gray-100 dark:hover:bg-neutral-700 ${
+                className={`cursor-pointer px-4 py-2 text-xs hover:bg-gray-100 dark:hover:bg-neutral-700  ${
                   rowsPerPage === option
                     ? 'bg-gray-100 dark:bg-neutral-700 dark:text-light-gray'
                     : 'bg-white dark:bg-dark-charcoal dark:text-light-gray'