Will add results tab

src/components/search/applicationcycles.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Applicationcycles = () => {
+  return (
+    <div>
+          Applicationcycles
+    </div>
+  )
+}
+
+export default Applicationcycles

src/components/search/cohorts.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Cohorts = () => {
+  return (
+    <div>
+        Cohorts
+    </div>
+  )
+}
+
+export default Cohorts

src/components/search/jobs.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Jobs = () => {
+  return (
+    <div>
+      jobs
+    </div>
+  )
+}
+
+export default Jobs

src/components/search/programs.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+
+const Programs = () => {
+  return (
+    <div>
+          Programs
+    </div>
+  )
+}
+
+export default Programs

src/components/search/roles.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Roles = () => {
+  return (
+    <div>
+      roles
+    </div>
+  )
+}
+
+export default Roles

src/components/search/trainees.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Trainees = () => {
+  return (
+    <div>
+          Trainees
+    </div>
+  )
+}
+
+export default Trainees

src/components/search/users.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Users = () => {
+  return (
+    <div>
+      users
+    </div>
+  )
+}
+
+export default Users

src/pages/search.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { fetchSearchData } from '../redux/actions/fetchSearchDataAction';
+import { RootState } from '../redux/reducers';
+import Users from '../components/search/users';
+import Roles from '../components/search/roles';
+import Jobs from '../components/search/jobs';
+import Cohorts from '../components/search/cohorts';
+import Programs from '../components/search/programs';
+import Trainees from '../components/search/trainees';
+import Applicationcycles from '../components/search/applicationcycles';
+
+const Search = () => {
+  const [searchParams] = useSearchParams(); // Hook to get URL query parameters
+  const searchTerm = searchParams.get('q'); // Extract the 'q' parameter from query params
+  const [filterAttribute, setFilterAttribute] = useState(''); // Example filter state, adjust as needed
+  const [activeItem, setActiveItem] = useState<string>('Users'); // New state for active item
+
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const searchResults = useSelector((state: RootState) => state.searchData.data);
+  const loading = useSelector((state: RootState) => state.searchData.loading);
+  const error = useSelector((state: RootState) => state.searchData.error);
+
+  // Dispatch the action to fetch search results whenever searchTerm or filterAttribute changes
+  useEffect(() => {
+    if (searchTerm) {
+      dispatch(fetchSearchData({ searchTerm, itemsPerPage: 10, page: 1, filterAttribute }));
+    }
+  }, [dispatch, searchTerm, filterAttribute]);
+
+  // Log the search results for debugging
+  console.log(searchResults);
+
+  // Construct an array of items based on search results
+  const items = [
+    {
+      name: 'Users',
+      length: searchResults ? searchResults.users?.length : 0,
+    },
+    {
+      name: 'Roles',
+      length: searchResults ? searchResults.roles?.length : 0,
+    },
+    {
+      name: 'Jobs',
+      length: searchResults ? searchResults.jobs?.length : 0,
+    },
+    {
+      name: 'Cohorts',
+      length: searchResults ? searchResults.cohorts?.length : 0,
+    },
+    {
+      name: 'Programs',
+      length: searchResults ? searchResults.programs?.length : 0,
+    },
+    {
+      name: 'Trainees',
+      length: searchResults ? searchResults.trainees?.length : 0,
+    },
+    {
+      name: 'Applicationcycles',
+      length: searchResults ? searchResults.applicationCycles?.length : 0,
+    },
+  ];
+
+  console.log(items);
+
+  // Example rendering logic (loading, error, results)
+  return (
+    <div className='w-full'>
+      <div className='w-full px-16 py-4 text-3xl text-white'>
+        <h1>Search Results</h1>
+      </div>
+      <div className='flex flex-row gap-8 mx-12'>
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className={`flex gap-2 cursor-pointer ${activeItem === item.name
+              ? 'text-[#56C870]'
+                : 'text-white' 
+              }`}
+            onClick={() => setActiveItem(item.name)}
+          >
+            <span className={`my-2 border-b-2 ${activeItem === item.name ? 'border-[#56C870]' : 'border-none'}`}>{item.name} ({item.length})</span>
+          </div>
+        ))}
+      </div>
+      <div className='w-full bg-white h-[.1px]'></div>
+      <div>
+        {activeItem === 'Users' && <Users />}
+        {activeItem === 'Roles' && <Roles />}
+        {activeItem === 'Jobs' && <Jobs />}
+        {activeItem === 'Cohorts' && <Cohorts />}
+        {activeItem === 'Programs' && <Programs />}
+        {activeItem === 'Trainees' && <Trainees />}
+        {activeItem === 'Applicationcycles' && <Applicationcycles />}
+      </div>
+      <div>
+        {/* If loading, show a loading message */}
+        {loading && <p>Loading...</p>}
+
+        {/* If there's an error, display the error message */}
+        {error && <p>Error: {error}</p>}
+
+        {/* Display search results or a "no results" message */}
+        {!loading && !error && searchResults && (
+          <div>
+            <h2>Found {items[0].length} users</h2>
+            {searchResults.users && searchResults.users.length > 0 ? (
+              <ul>
+                {searchResults.users.map((user: any, index: number) => (
+                  <li key={index}>{user.name}</li> // Assuming each user has a 'name' property
+                ))}
+              </ul>
+            ) : (
+              <p>No users found for "{searchTerm}"</p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Search;

src/routes/routes.tsx

@@ -41,6 +41,7 @@ import ApplicationDetails from "../pages/Applications/ViewSingleApplication";
 import Dashboard from "../pages/Dashboard";
 import ApplicantLayout from "../pages/Applicant/ApplicantLayout";
 import AdminLayout from "../components/Layout/Admins/AdminLayout";
+import Search from "./../pages/search";
 
 function Navigation() {
   const roleName = localStorage.getItem("roleName");
@@ -139,6 +140,14 @@ function Navigation() {
             </PrivateRoute>
           }
         />
+        <Route
+          path="search"
+          element={
+            <PrivateRoute>
+              <Search />
+            </PrivateRoute>
+          }
+        />
         <Route
           path="roles"
           element={