more

src/Components/Document/DocumentListPage.js

@@ -176,7 +176,7 @@ const DocumentListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-  console.log("allDocs", allDocs);
+
   const DesktopContent = () => {
     return (
       <>
@@ -186,21 +186,29 @@ const DocumentListPage = ({ perPage }) => {
         </div>
         {allDocs === null ? <div>Loading...</div> : null}
         {allDocs !== null ? (
-          <div>
-            <div className="doclist-upper-wrapper">
-              <div className="doclist-toggle-box"> </div>
-              {allDocs.length > 0 ? (
-                <div className="doclist-select-box mb-3">
-                  <SelectDropdown
-                    dropDownOptions={dropDownOptions}
-                    titleText="Sort documents"
-                    handleSelect={setOrder}
-                  />
+          <div className="content-container">
+            {allDocs.length > 0 ? (
+              <div className="document-list-upper-wrapper">
+                <div className="list-upper-left">
+                  <p className="select-billing-text">Min</p>
+
+                  <Toggle onClick={handleToggle} />
+
+                  <p className="select-billing-text">Max</p>
                 </div>
-              ) : (
-                <></>
-              )}
-            </div>
+                <div className="list-upper-right">
+                  <div className="d-flex justify-content-end mb-3">
+                    <SelectDropdown
+                      dropDownOptions={dropDownOptions}
+                      titleText="Sort documents"
+                      handleSelect={setOrder}
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
             <div className="document-list-lower-wrapper">
               {allDocs.length > 0 ? (
                 allDocs
@@ -209,17 +217,17 @@ const DocumentListPage = ({ perPage }) => {
                     <DocCard
                       key={`doccard-${i}`}
                       title={doc.docTitle}
-                      parentCaseNumber={doc?.parentCaseNumber}
-                      parentCaseName={doc?.parentCaseName}
-                      parentCaseId={doc?.parentCaseId}
-                      createdAt={doc?.createdAt}
-                      docType={doc?.docType}
-                      documentId={doc?.documentId}
-                      dateServed={doc?.dateServed}
+                      parentCaseNumber={doc.parentCaseNumber}
+                      parentCaseName={doc.parentCaseName}
+                      parentCaseId={doc.parentCaseId}
+                      createdAt={doc.createdAt}
+                      docType={doc.docType}
+                      documentId={doc.documentId}
+                      dateServed={doc.dateServed}
                       confirmDelete={confirmDelete}
                       handleNavigate={handleNavigate}
                       displayDeleteButton={true}
-                      responseGenerations={doc?.responseGenerations}
+                      responseGenerations={doc.responseGenerations}
                     />
                   ))
               ) : (

src/styles/doclist-page.scss

@@ -52,6 +52,22 @@
   padding: 3px 0px;
 }
 
+.document-list-upper-wrapper {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  background-color: yellow;
+}
+
+.list-upper-left {
+  background-color: blue;
+  width: 95%;
+}
+
+.list-upper-right {
+  background-color: red;
+}
+
 .document-list-lower-wrapper {
   display: flex;
   flex-direction: column;
@@ -66,6 +82,6 @@
   font-weight: 500;
 }
 
-.dropdown-container {
+.content-container {
   padding: 0rem 1rem;
 }