General search and filtration admin

src/components/SearchBar.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import * as icons from "react-icons/ai";
+import { useNavigate } from "react-router-dom";
+
+const SearchBar = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterAttribute, setFilterAttribute] = useState('');
+  const navigate = useNavigate();
+
+  const handleSearch = () => {
+    if (searchTerm.trim()) {
+      navigate(`search?q=${searchTerm}&filter=${filterAttribute}`);
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      <div className="flex bg-gray-100 dark:bg-dark-tertiary rounded-xl h-10 items-center border-2">
+        <select
+          className="bg-gray-800 text-white border-none text-sm dark:text-gray-300 outline-none pl-2 py-2 rounded-l-xl cursor-pointer"
+          value={filterAttribute}
+          onChange={(e) => setFilterAttribute(e.target.value)}
+        >
+          <option value="">All</option>
+          <option value="firstname">First Name</option>
+          <option value="lastname">Last Name</option>
+          <option value="email">Email</option>
+          <option value="roleName">Role Name</option>
+          <option value="title">Title</option>
+          <option value="phase">Phase</option>
+          <option value="name">Name</option>
+        </select>
+        <input
+          type="text"
+          placeholder="Search devpulse"
+          className="bg-transparent outline-none px-2 text-gray-700 dark:text-gray-300 w-96"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+        />
+        <button className="px-4" onClick={handleSearch}>
+          <icons.AiOutlineSearch className="cursor-pointer text-cyan-300" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;

src/components/SearchResultItem.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const SearchResultItem= ({ 
+  activeItem, 
+  name, 
+  length, 
+  results, 
+  Component, 
+  noResultsMessage 
+}) => {
+  if (activeItem !== name) return null;
+
+  return length > 0 ? (
+    <Component {...{ [name.toLowerCase()]: results }} />
+  ) : (
+    <p className="text-center py-6 text-white">{noResultsMessage}</p>
+  );
+};
+
+export default SearchResultItem;

src/components/search/applicationcycles.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const Applicationcycles = ({ applicationCycles }: { applicationCycles: Array<any> }) => {
+  return (
+    <div className="w-full">
+      {applicationCycles.length > 0 ? (
+        <table className="min-w-full bg-dark-900 border-separate border-spacing-0">
+          <thead>
+            <tr className="bg-dark-800 text-white">
+              <th className="py-3 px-6 border">Name</th>
+            </tr>
+          </thead>
+          <tbody>
+            {applicationCycles.map((applicationCycle, index) => (
+              <tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center">
+                <td className="py-4 px-6 border">
+                  {applicationCycle.name}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div className="text-center py-6 text-white">
+          <p>No application cycles found.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Applicationcycles;

src/components/search/cohorts.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+const Cohorts = ({ cohorts }: { cohorts: Array<any> }) => {
+  return (
+    <div className="w-full">
+      {cohorts.length > 0 ? (
+        <table className="min-w-full bg-dark-900 border-separate border-spacing-0">
+          <thead>
+            <tr className="bg-dark-800 text-white">
+              <th className="py-3 px-6 border">Title</th>
+              <th className="py-3 px-6 border">Program</th>
+              <th className="py-3 px-6 border">Cycle</th>
+            </tr>
+          </thead>
+          <tbody>
+            {cohorts.map((cohort, index) => (
+              <tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center">
+                <td className="py-4 px-6 border">
+                  {cohort.title}
+                </td>
+                <td className="py-4 px-6 border">
+                  {cohort.program.title}
+                </td>
+                <td className="py-4 px-6 border">
+                  {cohort.cycle.name}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div className="text-center py-6 text-white">
+          <p>No cohorts found.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Cohorts;

src/components/search/jobs.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const Jobs = ({ jobs }: { jobs: Array<any> }) => {
+  return (
+    <div className="w-full">
+      {jobs.length > 0 ? (
+        <table className="min-w-full bg-dark-900 border-separate border-spacing-0">
+          <thead>
+            <tr className="bg-dark-800 text-white">
+              <th className="py-3 px-6 border">Job Name</th>
+              <th className="py-3 px-6 border">Job Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {jobs.map((job, index) => (
+              <tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center">
+                <td className="py-4 px-6 border">
+                  {job.title}
+                </td>
+                <td className="py-4 px-6 border">
+                  {job.description}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div className="text-center py-6 text-white">
+          <p>No jobs found.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Jobs;

src/components/search/programs.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+const Programs = ({ programs }: { programs: Array<any> }) => {
+  return (
+    <div className="w-full">
+      {programs.length > 0 ? (
+        <table className="min-w-full bg-dark-900 border-separate border-spacing-0">
+          <thead>
+            <tr className="bg-dark-800 text-white">
+              <th className="py-3 px-6 border">Title</th>
+              <th className="py-3 px-6 border">Description</th>
+              <th className="py-3 px-6 border">Main Objective</th>
+            </tr>
+          </thead>
+          <tbody>
+            {programs.map((program, index) => (
+              <tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center">
+                <td className="py-4 px-6 border">
+                  {program.title}
+                </td>
+                <td className="py-4 px-6 border">
+                  {program.description}
+                </td>
+                <td className="py-4 px-6 border">
+                  {program.mainObjective}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div className="text-center py-6 text-white">
+          <p>No programs found.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Programs;

src/components/search/roles.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const Roles = ({ roles }: { roles: Array<any> }) => {
+  return (
+    <div className="w-full">
+      {roles.length > 0 ? (
+        <table className="min-w-full bg-dark-900 border-separate border-spacing-0">
+          <thead>
+            <tr className="bg-dark-800 text-white">
+              <th className="py-3 px-6 border">Role Name</th>
+              <th className="py-3 px-6 border">Role Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {roles.map((role, index) => (
+              <tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center">
+                <td className="py-4 px-6 border">
+                  {role.roleName}
+                </td>
+                <td className="py-4 px-6 border">
+                  {role.description}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div className="text-center py-6 text-white">
+          <p>No roles found.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Roles;

src/components/search/trainees.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const Trainees = ({ trainees }: { trainees: Array<any> }) => {
+  return (
+    <div className="w-full">
+      {trainees.length > 0 ? (
+        <table className="min-w-full bg-dark-900 border-separate border-spacing-0">
+          <thead>
+            <tr className="bg-dark-800 text-white">
+              <th className="py-3 px-6 border">First Name</th>
+              <th className="py-3 px-6 border">Last Name</th>
+              <th className="py-3 px-6 border">Email</th>
+              <th className="py-3 px-6 border">Cycle</th>
+            </tr>
+          </thead>
+          <tbody>
+            {trainees.map((trainee, index) => (
+              <tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center">
+                <td className="py-4 px-6 border">
+                  {trainee.firstName}
+                </td>
+                <td className="py-4 px-6 border">
+                  {trainee.lastName}
+                </td>
+                <td className="py-4 px-6 border">
+                  {trainee.email}
+                </td>
+                <td className="py-4 px-6 border">
+                  {trainee.cycle_id.name}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div className="text-center py-6 text-white">
+          <p>No trainees found.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Trainees;

src/components/search/users.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+const Users = ({ users }: { users: Array<any> }) => {
+  return (
+    <div className="w-full">
+      {users.length > 0 ? (
+        <table className="min-w-full bg-dark-900 border-separate border-spacing-0">
+          <thead>
+            <tr className="bg-dark-800 text-white">
+              <th className="py-3 px-6 border">First Name</th>
+              <th className="py-3 px-6 border">Last Name</th>
+              <th className="py-3 px-6 border">Email</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user, index) => (
+              <tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center">
+                <td className="py-4 px-6 border">
+                  {user.firstname}
+                </td>
+                <td className="py-4 px-6 border">
+                  {user.lastname}
+                </td>
+                <td className="py-4 px-6 border">
+                  {user.email}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div className="text-center py-6 text-white">
+          <p>No users found.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Users;

src/components/sidebar/navHeader.tsx

@@ -13,6 +13,7 @@ const profile: string = require("../../assets/avatar.png").default;
 const LogoWhite: string = require("../../assets/logoWhite.svg").default;
 import jwtDecode from "jwt-decode";
 import {destination} from '../../utils/utils'
+import SearchBar from "../../components/SearchBar";
 
 const placeholderImage = profile;
 
@@ -37,8 +38,6 @@ function NavBar() {
   const handleShowProfileDropdown = () =>
     setShowprofileDropdown(!showProfileDropdown);
 
-
-
   return (
 
     <div className="flex items-center dark:bg-zinc-800 ">
@@ -87,6 +86,11 @@ function NavBar() {
           </span>
 
         </div>
+
+        {/* Add Search Bar */}
+        <SearchBar />
+        {/* End of Search Bar */}
+
         <div className="flex items-center mr-4">
           <span className="flex items-center">
             {" "}