Merge pull request #1300 from AkashJana18/table-redsign

Feature: Table redesign

frontend/src/assets/caret-sort.svg

@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="gray" fill-rule="evenodd" clip-rule="evenodd"></path></svg>

frontend/src/index.css

@@ -53,22 +53,24 @@ body.dark {
   }
 
   .table-default th {
-    @apply border-r border-silver dark:border-silver/40 p-4 w-[244px];
+    @apply p-4 w-[244px] font-normal text-gray-400; /* Remove border-r */
   }
 
   .table-default th:last-child {
-    @apply w-[auto] border-r-0;
+    @apply w-[auto];
   }
 
   .table-default td {
-    @apply border-r border-t border-silver dark:border-silver/40 px-4 py-2;
+    @apply border-t border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
   }
 
   .table-default td:last-child {
-    @apply border-r-0;
+    @apply border-r-0; /* Ensure no right border on the last column */
   }
+
 }
 
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document

frontend/src/settings/Documents.tsx

@@ -6,11 +6,14 @@ import { useDispatch } from 'react-redux';
 import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/trash.svg';
+import caretSort from '../assets/caret-sort.svg';
 import DropdownMenu from '../components/DropdownMenu';
+import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure ActiveState type is imported
 import SkeletonLoader from '../components/SkeletonLoader';
-import { Doc, DocumentsProps } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
+import Input from '../components/Input';
+import Upload from '../upload/Upload'; // Import the Upload component
 
 // Utility function to format numbers
 const formatTokens = (tokens: number): string => {
@@ -35,7 +38,14 @@ const Documents: React.FC<DocumentsProps> = ({
 }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
+
+  // State for search input
+  const [searchTerm, setSearchTerm] = useState('');
+  // 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 syncOptions = [
     { label: 'Never', value: 'never' },
     { label: 'Daily', value: 'daily' },
@@ -59,10 +69,37 @@ const Documents: React.FC<DocumentsProps> = ({
       });
   };
 
+  // Filter documents based on the search term
+  const filteredDocuments = documents?.filter((document) =>
+    document.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   return (
     <div className="mt-8">
       <div className="flex flex-col relative">
         <div className="z-10 w-full overflow-x-auto">
+          <div className="my-3 flex justify-between items-center">
+            <div className="p-1">
+              <Input
+                maxLength={256}
+                placeholder="Search..."
+                name="Document-search-input"
+                type="text"
+                id="document-search-input"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)} // Handle search input change
+              />
+            </div>
+            <button
+              className="rounded-full w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
+              onClick={() => {
+                setIsOnboarding(false); // Set onboarding flag if needed
+                setModalState('ACTIVE'); // Open the upload modal
+              }}
+            >
+              Add New
+            </button>
+          </div>
           {loading ? (
             <SkeletonLoader count={1} />
           ) : (
@@ -70,22 +107,37 @@ const Documents: React.FC<DocumentsProps> = ({
               <thead>
                 <tr>
                   <th>{t('settings.documents.name')}</th>
-                  <th>{t('settings.documents.date')}</th>
-                  <th>{t('settings.documents.tokenUsage')}</th>
-                  <th>{t('settings.documents.type')}</th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.date')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.tokenUsage')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.type')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
                   <th></th>
                 </tr>
               </thead>
               <tbody>
-                {!documents?.length && (
+                {!filteredDocuments?.length && (
                   <tr>
                     <td colSpan={5} className="!p-4">
                       {t('settings.documents.noData')}
                     </td>
                   </tr>
                 )}
-                {documents &&
-                  documents.map((document, index) => (
+                {filteredDocuments &&
+                  filteredDocuments.map((document, index) => (
                     <tr key={index}>
                       <td>{document.name}</td>
                       <td>{document.date}</td>
@@ -101,7 +153,7 @@ const Documents: React.FC<DocumentsProps> = ({
                             <img
                               src={Trash}
                               alt="Delete"
-                              className="h-4 w-4 cursor-pointer hover:opacity-50"
+                              className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
                               id={`img-${index}`}
                               onClick={(event) => {
                                 event.stopPropagation();
@@ -130,6 +182,19 @@ const Documents: React.FC<DocumentsProps> = ({
             </table>
           )}
         </div>
+        {/* 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">
+            <div className="w-full h-full bg-transparent flex flex-col items-center justify-center p-8">
+              {/* Your Upload component */}
+              <Upload
+                modalState={modalState}
+                setModalState={setModalState}
+                isOnboarding={isOnboarding}
+              />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );