Merge branch 'dev' of https://github.com/LTU-D0020E/d0020e-project-dpp into profilePageV3

Author: AronGunnar

package-lock.json

@@ -12,7 +12,7 @@
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@yudiel/react-qr-scanner": "^1.2.6",
-    "axios": "^1.6.2",
+    "axios": "^1.6.7",
     "bcrypt": "^5.1.1",
     "bcryptjs": "^2.4.3",
     "clsx": "^2.0.0",
@@ -25,6 +25,7 @@
     "next-auth": "^4.24.5",
     "next-progress": "^2.3.1",
     "react": "^18",
+    "react-datepicker": "^6.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18",
     "react-modal": "^3.16.1",

package.json

@@ -25,7 +25,7 @@ export function NavbarGlobal({ searchBar = true, navClassName }) {
 
           {/* Conditionally render SearchBar */}
           {searchBar && (
-            <div className='mx-auto w-max'>
+            <div className='z-30 mx-auto w-[500px]'>
               <SearchBar />
             </div>
           )}

public/683424-200.png

@@ -14,12 +14,17 @@ export default function SearchBar({ className, ...props }) {
   const [showSearchResults, setShowSearchResults] = useState(false)
 
   const handleSearch = async () => {
+    if (searchTerm.trim() === '') {
+      setSearchResult([])
+      return
+    }
+
     setLoading(true)
 
     try {
       const response = await fetch(`/api/v1/search?query=${searchTerm}`)
       const data = await response.json()
-      setSearchResult(data)
+      setSearchResult(data.successful)
     } catch (error) {
       console.error('Error fetching search results:', error)
       setSearchResult([])
@@ -29,35 +34,25 @@ export default function SearchBar({ className, ...props }) {
   }
 
   useEffect(() => {
-    if (searchTerm.trim() !== '') {
+    const delayDebounce = setTimeout(() => {
       handleSearch()
-    } else {
-      setSearchResult([])
-    }
+    }, 300) // Add a debounce to reduce API calls
+
+    return () => clearTimeout(delayDebounce)
   }, [searchTerm])
 
   const handleInputChange = event => {
     setSearchTerm(event.target.value)
   }
 
-  const filteredResults = searchResult.filter(
-    item =>
-      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      (item.manufactured_by &&
-        item.manufactured_by.owner_name
-          .toLowerCase()
-          .includes(searchTerm.toLowerCase())) ||
-      item.dpp_class.toLowerCase().includes(searchTerm.toLowerCase())
-  )
+  const handleBlur = () => {
+    setShowSearchResults(false)
+  }
 
   const handleSearchBoxSelect = () => {
     setShowSearchResults(true)
   }
 
-  const handleBlur = () => {
-    setShowSearchResults(false)
-  }
-
   const handleSearchSelect = url => {
     router.push(url)
     handleBlur()
@@ -82,17 +77,17 @@ export default function SearchBar({ className, ...props }) {
       </div>
       {showSearchResults && (
         <>
-          {filteredResults.length > 0 && (
+          {searchResult.length > 0 && (
             <ul
               className={`absolute left-0 top-16 w-full cursor-pointer rounded-md border border-transparent bg-white text-blue-900 shadow-lg`}
             >
-              {filteredResults.map((item, index) => {
+              {searchResult.map((item, index) => {
                 if (!item) {
                   return null
                 }
 
                 const uniqueKey = item._id || item.name + item.dpp_class + index
-                console.log(item)
+
                 return (
                   <li
                     key={uniqueKey}

public/lifecycle.png

@@ -58,15 +58,15 @@ export default function DropdownMenu() {
               <Menu.Item>
                 {({ active }) => (
                   <Link
-                    href='/profile'
+                    href={`/user/${session.user._id}`} // Link to your account settings page
                     className={classNames(
                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                       'block px-4 py-2 text-sm'
                     )}
                   >
                     <div className='flex flex-row items-center space-x-4'>
-                      <Cog6ToothIcon className='h-5 text-gray-800' />
-                      <p>Account settings</p>
+                      <UserIcon className='h-5 text-gray-800' />
+                      <p>My Profile</p>
                     </div>
                   </Link>
                 )}
@@ -85,8 +85,8 @@ export default function DropdownMenu() {
                     )}
                   >
                     <div className='flex flex-row items-center space-x-4'>
-                      <ExclamationCircleIcon className='h-5 text-gray-800' />
-                      <p>Example link</p>
+                      <Cog6ToothIcon className='h-5 text-gray-800' />
+                      <p>Settings</p>
                     </div>
                   </Link>
                 )}

public/volvo.svg

@@ -1,19 +1,22 @@
 import Link from 'next/link'
 export default function SearchResultCard({ item }) {
+  const cid = item.cid
   console.log(item)
-  const { name, dpp_class, manufactured_by, created_at } = item
-
   return (
-    <Link className='w-full' href={`/product/${item._id}`} passHref>
+    <Link className='w-full' href={`/product/${cid}`} passHref>
       <div className='flex w-full cursor-pointer items-center space-x-3 rounded-md p-3 hover:bg-gray-50'>
         <div className='relative'></div>
-        <div className='flex flex-col'>
-          <p className='font-semibold'>{name}</p>
-          <p className='text-xs font-medium text-gray-500'>
-            {manufactured_by && manufactured_by.owner_name && (
-              <span> {manufactured_by.owner_name}</span>
-            )}
-          </p>
+        <div className='flex flex-grow flex-row items-center justify-between'>
+          <div>
+            <p className='font-semibold'>{item.ProductName}</p>
+            <p className='text-xs font-medium text-gray-500'>
+              <span>{item.Entrydate} </span>
+            </p>
+          </div>
+          <div className='flex flex-col text-right'>
+            <p className='text-sm font-bold'>CID</p>
+            <p className='text-xs font-medium text-gray-500'>{item.cid}</p>
+          </div>
         </div>
       </div>
     </Link>