From 16608370a6c03e9beac666eafb8791fae9a4c0f9 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 27 Jan 2025 03:01:39 +0530
Subject: [PATCH] (feat:settings)docs table design perfection

---
 frontend/src/settings/Documents.tsx | 242 ++++++++++++++--------------
 1 file changed, 124 insertions(+), 118 deletions(-)

diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index ee52b377..e33a5214 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -15,7 +15,6 @@ import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure Act
 import { getDocs, getDocsWithPagination } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
 import { setPaginatedDocuments } from '../preferences/preferenceSlice';
-import { truncate } from '../utils/stringUtils';
 import { formatDate } from '../utils/dateTimeUtils';
 
 // Utility function to format numbers
@@ -146,8 +145,8 @@ const Documents: React.FC<DocumentsProps> = ({
   }, [searchTerm]);
 
   return (
-    <div className="mt-8">
-      <div className="flex flex-col relative">
+    <div className="flex flex-col mt-8">
+      <div className="flex flex-col relative flex-grow">
         <div className="mb-6">
           <h2 className="text-base font-medium text-sonic-silver">
             {t('settings.documents.title')}
@@ -186,128 +185,135 @@ const Documents: React.FC<DocumentsProps> = ({
         {loading ? (
           <SkeletonLoader count={1} />
         ) : (
-          <div className="w-full overflow-x-auto rounded-md border border-silver dark:border-silver/40">
-            <table className="w-full min-w-[640px] table-auto">
-              <thead>
-                <tr className="border-b border-silver dark:border-silver/40">
-                  <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
-                    {t('settings.documents.name')}
-                  </th>
-                  <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[20%]">
-                    <div className="flex justify-center items-center">
-                      {t('settings.documents.date')}
-                      <img
-                        className="cursor-pointer ml-2"
-                        onClick={() => refreshDocs('date')}
-                        src={caretSort}
-                        alt="sort"
-                      />
-                    </div>
-                  </th>
-                  <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[25%]">
-                    <div className="flex justify-center items-center">
-                      <span className="hidden sm:inline">
-                        {t('settings.documents.tokenUsage')}
+          <div className="flex flex-col flex-grow">
+            {' '}
+            {/* Removed overflow-auto */}
+            <div className="border rounded-md border-silver dark:border-silver/40">
+              <table className="w-full min-w-[640px] table-auto">
+                <thead>
+                  <tr className="border-b border-silver dark:border-silver/40">
+                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
+                      {t('settings.documents.name')}
+                    </th>
+                    <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[20%]">
+                      <div className="flex justify-center items-center">
+                        {t('settings.documents.date')}
+                        <img
+                          className="cursor-pointer ml-2"
+                          onClick={() => refreshDocs('date')}
+                          src={caretSort}
+                          alt="sort"
+                        />
+                      </div>
+                    </th>
+                    <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[25%]">
+                      <div className="flex justify-center items-center">
+                        <span className="hidden sm:inline">
+                          {t('settings.documents.tokenUsage')}
+                        </span>
+                        <span className="sm:hidden">
+                          {t('settings.documents.tokenUsage')}
+                        </span>
+                        <img
+                          className="cursor-pointer ml-2"
+                          onClick={() => refreshDocs('tokens')}
+                          src={caretSort}
+                          alt="sort"
+                        />
+                      </div>
+                    </th>
+                    <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[10%]">
+                      <span className="sr-only">
+                        {t('settings.documents.actions')}
                       </span>
-                      <span className="sm:hidden">
-                        {t('settings.documents.tokenUsage')}
-                      </span>
-                      <img
-                        className="cursor-pointer ml-2"
-                        onClick={() => refreshDocs('tokens')}
-                        src={caretSort}
-                        alt="sort"
-                      />
-                    </div>
-                  </th>
-                  <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[10%]">
-                    <span className="sr-only">
-                      {t('settings.documents.actions')}
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-silver dark:divide-silver/40">
-                {!currentDocuments?.length && (
-                  <tr>
-                    <td
-                      colSpan={4}
-                      className="py-4 text-center text-gray-700 dark:text-[#E0E0E0]"
-                    >
-                      {t('settings.documents.noData')}
-                    </td>
+                    </th>
                   </tr>
-                )}
-                {Array.isArray(currentDocuments) &&
-                  currentDocuments.map((document, index) => (
-                    <tr key={index}>
-                      <td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%]">
-                        <div
-                          className="overflow-hidden text-ellipsis whitespace-nowrap"
-                          title={document.name}
-                        >
-                          {truncate(document.name, 50)}
-                        </div>
-                      </td>
-                      <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%]">
-                        {document.date ? formatDate(document.date) : ''}
-                      </td>
-                      <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%]">
-                        {document.tokens ? formatTokens(+document.tokens) : ''}
-                      </td>
-                      <td className="py-4 px-4 text-right w-[10%]">
-                        <div className="flex items-center justify-end gap-3">
-                          {/* For non-remote documents, adding empty space holder */}
-                          {!document.syncFrequency && (
-                            <div className="w-8"></div>
-                          )}
-                          {document.syncFrequency && (
-                            <DropdownMenu
-                              name={t('settings.documents.sync')}
-                              options={syncOptions}
-                              onSelect={(value: string) => {
-                                handleManageSync(document, value);
-                              }}
-                              defaultValue={document.syncFrequency}
-                              icon={SyncIcon}
-                            />
-                          )}
-                          <button
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              handleDeleteDocument(index, document);
-                            }}
-                            className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
-                          >
-                            <img
-                              src={Trash}
-                              alt={t('convTile.delete')}
-                              className="h-4 w-4 opacity-60 hover:opacity-100"
-                            />
-                          </button>
-                        </div>
+                </thead>
+                <tbody className="divide-y divide-silver dark:divide-silver/40">
+                  {!currentDocuments?.length ? (
+                    <tr>
+                      <td
+                        colSpan={4}
+                        className="py-4 text-center text-gray-700 dark:text-[#E0E0E0] bg-white dark:bg-transparent"
+                      >
+                        {t('settings.documents.noData')}
                       </td>
                     </tr>
-                  ))}
-              </tbody>
-            </table>
+                  ) : (
+                    currentDocuments.map((document, index) => (
+                      <tr key={index} className="bg-white dark:bg-transparent">
+                        <td
+                          className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] truncate"
+                          title={document.name}
+                        >
+                          {document.name}
+                        </td>
+                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%]">
+                          {document.date ? formatDate(document.date) : ''}
+                        </td>
+                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%]">
+                          {document.tokens
+                            ? formatTokens(+document.tokens)
+                            : ''}
+                        </td>
+                        <td className="py-4 px-4 text-right w-[10%]">
+                          <div className="flex items-center justify-end gap-3">
+                            {!document.syncFrequency && (
+                              <div className="w-8"></div>
+                            )}
+                            {document.syncFrequency && (
+                              <DropdownMenu
+                                name={t('settings.documents.sync')}
+                                options={syncOptions}
+                                onSelect={(value: string) => {
+                                  handleManageSync(document, value);
+                                }}
+                                defaultValue={document.syncFrequency}
+                                icon={SyncIcon}
+                              />
+                            )}
+                            <button
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleDeleteDocument(index, document);
+                              }}
+                              className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+                            >
+                              <img
+                                src={Trash}
+                                alt={t('convTile.delete')}
+                                className="h-4 w-4 opacity-60 hover:opacity-100"
+                              />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
           </div>
         )}
       </div>
-      <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);
-        }}
-      />
+
+      <div className="mt-auto pt-4">
+        <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);
+          }}
+        />
+      </div>
+
       {modalState === 'ACTIVE' && (
         <Upload
           receivedFile={[]}