Merge pull request #121 from JumboCode/holden

borrow finishes

Author: hkittelberger

frontend/api/approval.js

@@ -30,29 +30,6 @@ export async function approveHandler(req, res) {
     res.status(200).json({ message: "User approved" });
 }
 
-export async function checkHandler(req, res) {
-    const { userId } = req.body;
-
-    if (!userId) {
-      return res.status(400).json({ error: "Missing userId" });
-    }
-
-    const response = await fetch(`https://api.clerk.dev/v1/users/${userId}`, {
-      headers: {
-        Authorization: `Bearer sk_test_wGcUTzeo4CJJ2iVUObnFRmkbaPT6pzAXcnonlv8q8w`, // GET RID OF HARDCODED EVENTUALLY
-      },
-    });
-  
-    if (!response.ok) {
-      return res.status(500).json({ error: "Failed to fetch user from Clerk" });
-    }
-  
-    const user = await response.json();
-  
-    const approved = user.public_metadata?.approved === true;
-    res.status(200).json({ approved });
-}
-
 export async function unapprovedHandler(req, res) {
     console.log("Testing unapproved handler");
     try {

frontend/src/app/components/BorrowPopup.css

@@ -108,8 +108,20 @@
 
   .borrowed-items-container {
     flex: 1;
-    overflow-y: auto;
+/*     overflow-y: auto; */
+    width: 100%;
+  }
+
+  .pagination-container {
     width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: auto;
+  }
+  
+  .pagination {
+    display: flex;
+    gap: 0.5rem;
   }
 
   .borrowed-item-box {
@@ -204,6 +216,11 @@
   .form-group.full-width {
     width: 100%;
   }
+
+  .form-group.half-height {
+    width: 100%;
+    height: 50%;
+  }
 
   .form-group label {
     margin-bottom: 0.25rem;
@@ -242,6 +259,10 @@
 
   }
 
+  .form-group-dropdown {
+    font: Akatab;
+  }
+
   .form-group select.form-group-dropdown {
     border: 0.5px solid transparent !important;
 
@@ -255,12 +276,16 @@
     border: 1px solid #9b525f;
     font-size: 1rem;
     font-family: Arial, sans-serif;
-    box-sizing: border-box;
     width: 100%;
-
+    height: 50%;
     border-radius: 5px;
     box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
   }
+
+  .form-group textarea {
+    resize: vertical;
+    min-height: 100px;
+  }
 
 .info-form input.non-editable {
     background-color: #e0e0e0 !important;
@@ -324,12 +349,6 @@
   }
 
 
-  .form-group textarea {
-    resize: vertical;
-    min-height: 150px;
-  }
-  
-  
   .form-actions {
     display: flex;
     justify-content: flex-end;
@@ -473,20 +492,6 @@
     background-color: #9B525F; 
     color: #FFFFFF;
   }
-
-  .pagination-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    position: absolute;  /* 👈 pins it to bottom */
-    bottom: 1rem;        /* spacing from bottom */
-    left: 0;
-  }
-  
-  .pagination {
-    display: flex;
-    gap: 0.5rem;
-  }
 
 
   .alert-container {

frontend/src/app/components/BorrowPopup.jsx

@@ -229,25 +229,58 @@ const BorrowPopup = ({ selectedItems = [], onClose, onSuccess }) => {
         </div>
 
         {/* Left column of items to borrow */}
-        <div className="borrowItemsContent">
-            {borrowItems.length > 0 ? (
-            <>
-                <div className="borrowed-items-container">
-                {getCurrentPageItems().map((item) => (
-                    <BorrowUnit
-                    key={item.id}
-                    item={item}
-                    onDelete={handleDelete}
-                    />
-                ))}
-                </div>
-                
-            </>
-            ) : (
-            <p>No items selected.</p>
-            )}
+        <div className="leftWrapper">
+          <div className="borrowItemsContent">
+              {borrowItems.length > 0 ? (
+              <>
+                  <div className="borrowed-items-container">
+                  {getCurrentPageItems().map((item) => (
+                      <BorrowUnit
+                      key={item.id}
+                      item={item}
+                      onDelete={handleDelete}
+                      />
+                  ))}
+                  </div>
+                  
+              </>
+              ) : (
+              <p>No items selected.</p>
+              )}
+          </div>
         </div>
-        
+
+        <div className="pagination-container">
+            <div className="pagination">
+                <StylishButton
+                  type="button"
+                  disabled={currentPage === 1}
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  styleType='style4'
+                  >
+                  {"<"}
+                </StylishButton>
+                {Array.from({ length: totalPages }, (_, index) => (
+                <StylishButton
+                      key={index + 1}
+                      type="button"
+                      className={currentPage === index + 1 ? "active" : ""}
+                      onClick={() => handlePageChange(index + 1)}
+                      styleType={currentPage === index + 1 ? 'style5' : 'style4'}
+                  >
+                      {index + 1}
+                </StylishButton>
+                ))}
+                <StylishButton
+                  type="button"
+                  disabled={currentPage === totalPages}
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  styleType='style4'
+                  >
+                {">"}
+                </StylishButton>
+            </div>
+          </div>
         </div>
 
       <div className="dividerNew"></div>
@@ -397,37 +430,6 @@ const BorrowPopup = ({ selectedItems = [], onClose, onSuccess }) => {
         </div>
 
       </form>
-      <div className="pagination-container">
-          <div className="pagination">
-              <StylishButton
-                type="button"
-                disabled={currentPage === 1}
-                onClick={() => handlePageChange(currentPage - 1)}
-                styleType='style4'
-                >
-                {"<"}
-              </StylishButton>
-              {Array.from({ length: totalPages }, (_, index) => (
-              <StylishButton
-                    key={index + 1}
-                    type="button"
-                    className={currentPage === index + 1 ? "active" : ""}
-                    onClick={() => handlePageChange(index + 1)}
-                    styleType={currentPage === index + 1 ? 'style5' : 'style4'}
-                >
-                    {index + 1}
-              </StylishButton>
-              ))}
-              <StylishButton
-                type="button"
-                disabled={currentPage === totalPages}
-                onClick={() => handlePageChange(currentPage + 1)}
-                styleType='style4'
-                >
-              {">"}
-              </StylishButton>
-          </div>
-                </div>
       {isSuccessPopupVisible && (
         <div className="success-popup-overlay">
           <div className="success-popup">

frontend/src/app/components/BorrowPopupSearchBar.css

@@ -0,0 +1,23 @@
+
+
+.searchbar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.searchbar-dropdown {
+    margin-top: 2%;
+    display: flex;
+    align-items: left;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+}
+
+.borrower:hover {
+    background-color: #bdbdbd;
+    cursor: pointer;
+}

frontend/src/app/components/BorrowPopupSearchBar.jsx

@@ -1,6 +1,6 @@
 "use client";
 
-import "./SearchBar.css";
+import "./BorrowPopupSearchBar.css";
 import { useState, useEffect } from "react"; 
 
 export default function BorrowPopupSearchBar({ onSelect }) {
@@ -57,7 +57,7 @@ export default function BorrowPopupSearchBar({ onSelect }) {
           {results.map((borrower) => {
             const [firstName = "", lastName = ""] = borrower.name.split(" ");
             return (
-              <li key={borrower.id} onClick={() => {
+              <div className="borrower" key={borrower.id} onClick={() => {
                 setQuery(borrower.name);
                 setResults([]);
                 onSelect?.({
@@ -68,7 +68,7 @@ export default function BorrowPopupSearchBar({ onSelect }) {
                 });
               }}>
                 {borrower.name} — {borrower.email}
-              </li>
+              </div>
             );
           })}
         </ul>