Release v2.1.1 (#213)

index.html

@@ -15,6 +15,17 @@
 
       gtag('config', 'UA-167873271-3');
     </script>
+    <!-- Hotjar Tracking Code for ScholarX V2 -->
+    <script>
+        (function(h,o,t,j,a,r){
+            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+            h._hjSettings={hjid:5160281,hjsv:6};
+            a=o.getElementsByTagName('head')[0];
+            r=o.createElement('script');r.async=1;
+            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+            a.appendChild(r);
+        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    </script>
     <meta charset="UTF-8" />
     <meta
       name="viewport"

package.json

@@ -22,6 +22,7 @@
     "@tanstack/react-query": "^5.28.4",
     "@tanstack/react-query-devtools": "^5.37.1",
     "axios": "^1.4.0",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -13,11 +13,9 @@ import MyMentees from './pages/MyMentees/MyMentees.component.tsx';
 import EditProfileForm from './pages/EditProfileForm/EditProfileForm.component.tsx';
 import MenteeDashboard from './pages/MenteeDashboard';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import MenteeApplications from './pages/MenteeApplicationsView/MenteeApplications.component.tsx';
 import { LoginModalProvider } from './contexts/LoginModalContext.tsx';
 import PasswordReset from './pages/PasswordReset/index.tsx';
 import MenteeProfile from './pages/MenteeProfile/MenteeProfile.component.tsx';
-import MenteeCheckIn from './pages/MenteeCheckIn/MenteeCheckIn.component.tsx';
 
 const queryClient = new QueryClient();
 
@@ -39,16 +37,11 @@ const App: React.FC = () => {
                   element={<MenteeRegistration />}
                 />
                 <Route path="/admin/dashboard/*" element={<Dashboard />} />
-                <Route
-                  path="/mentor/dashboard"
-                  element={<MenteeApplications />}
-                />
+                <Route path="/mentor/dashboard/*" element={<MyMentees />} />
                 <Route path="/mentee/dashboard" element={<MenteeDashboard />} />
-                <Route path="/mentor/my-mentees/*" element={<MyMentees />} />
                 <Route path="/mentors" element={<Mentors />} />
                 <Route path="/mentors/:mentorId" element={<MentorProfile />} />
                 <Route path="/mentees/:menteeId" element={<MenteeProfile />} />
-                <Route path="/mentee-checkin" element={<MenteeCheckIn />} />
                 <Route path="/settings" element={<EditProfileForm />} />
                 <Route path="/resetpassword" element={<PasswordReset />} />
               </Routes>

src/assets/svg/Icons/ArrowIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface ArrowIconProps {
+  isExpanded: boolean;
+}
+
+const ArrowIcon: React.FC<ArrowIconProps> = ({ isExpanded }) => {
+  return (
+    <svg
+      className={`w-5 h-5 text-gray-500 transform transition-transform ${
+        isExpanded ? 'rotate-180' : ''
+      }`}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+};
+
+export default ArrowIcon;

src/assets/svg/Icons/HistoryClockIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface HistoryClockIconProps {
+  className?: string;
+}
+
+const HistoryClockIcon: React.FC<HistoryClockIconProps> = ({
+  className = 'w-6 h-6',
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <polyline points="12 6 12 12 16 14" />
+    <path d="M12 22V18" />
+    <path d="M10 22H14" />
+  </svg>
+);
+
+export default HistoryClockIcon;

src/assets/svg/Icons/NewSubmissionsIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface NewSubmissionsIconProps {
+  className?: string;
+}
+
+const NewSubmissionsIcon: React.FC<NewSubmissionsIconProps> = ({
+  className = 'w-6 h-6',
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="black"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="12" y1="18" x2="12" y2="12" />
+    <line x1="9" y1="15" x2="15" y2="15" />
+  </svg>
+);
+
+export default NewSubmissionsIcon;

src/assets/svg/Icons/NoCheckInsIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const NoCheckInsIcon: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-12 w-12 mx-auto text-gray-400 mb-3"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+    />
+  </svg>
+);
+
+export default NoCheckInsIcon;

src/assets/svg/Icons/NotificationBell.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { NotificationProps } from '../../../types';
+
+const NotificationBell: React.FC<NotificationProps> = ({
+  iconColor = 'currentColor',
+  badgeColor = '#EF4444',
+  textColor = 'white',
+  count = 0,
+}) => {
+  const displayCount = count > 99 ? '99+' : count.toString();
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="w-6 h-6"
+    >
+      <path
+        fill="none"
+        stroke={iconColor}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M12 6.5V3m0 3.5a5 5 0 015 5v3.5c0 1 .5 2 1.5 2.5H5.5c1-.5 1.5-1.5 1.5-2.5V11.5a5 5 0 015-5zm-3.5 14h7"
+      />
+      {count > 0 && (
+        <>
+          <circle cx="18" cy="6" r="5.5" fill={badgeColor} />
+          <text
+            x="18"
+            y="6"
+            fontFamily="Arial, sans-serif"
+            fontSize="7"
+            fontWeight="bold"
+            fill={textColor}
+            textAnchor="middle"
+            dominantBaseline="central"
+          >
+            {displayCount}
+          </text>
+        </>
+      )}
+    </svg>
+  );
+};
+
+export default NotificationBell;

src/assets/svg/Icons/OpenIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const OpenIcon: React.FC = () => {
+  return (
+    <div>
+      <svg
+        className="h-5 w-5"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+      >
+        <path
+          className="stroke-gray-500"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4m-8-2 8-8m0 0v5m0-5h-5"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default OpenIcon;

src/components/Layout/Navbar/index.tsx

@@ -1,6 +1,5 @@
 import { RefObject, useContext, useEffect, useRef, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-
 import { useLoginModalContext } from '../../../contexts/LoginModalContext';
 import { UserContext, UserContextType } from '../../../contexts/UserContext';
 import StickyBanner from '../../Banner/StickyBanner';
@@ -84,13 +83,14 @@ const Navbar: React.FC = () => {
               src="/scholarx-logo.png"
               className="md:h-12 h-10"
               alt="ScholarX Logo"
+              referrerPolicy="no-referrer"
             />
           </Link>
-          <div className="flex items-center md:items-start">
+          <div className="flex items-center">
             <ul className="items-center hidden md:flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-2 text-nowrap rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
               <li>
                 <Link
-                  className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 cursor-pointer"
+                  className="py-2 lg:px-3 md:text-sm md:px-1 text-gray-900 rounded hover:bg-gray-100 cursor-pointer"
                   to="/mentors"
                 >
                   Find a mentor
@@ -99,33 +99,33 @@ const Navbar: React.FC = () => {
               <li>
                 <a
                   href="https://handbook.sefglobal.org/"
-                  className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
+                  className="py-2 lg:px-3 md:text-sm md:px-1 text-gray-900 rounded hover:bg-gray-100 "
                 >
                   About
                 </a>
               </li>
               <li>
                 <a
                   href="https://sefglobal.org/#projects"
-                  className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
+                  className="py-2 lg:px-3 md:text-sm md:px-1 text-gray-900 rounded hover:bg-gray-100 "
                 >
                   Initiatives
                 </a>
               </li>
               <li>
                 <a
                   href="https://sefglobal.org/join-us.html"
-                  className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
+                  className="py-2 lg:px-3 md:text-sm md:px-1 text-gray-900 rounded hover:bg-gray-100 "
                 >
                   Join Us
                 </a>
               </li>
               {!isUserMentor && (
-                <li>
+                <li className="items-center flex justify-center">
                   <button
                     type="button"
                     onClick={handleMentorRegistration}
-                    className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2"
+                    className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 lg:me-2 mb-2"
                   >
                     Become a Mentor
                   </button>
@@ -137,7 +137,7 @@ const Navbar: React.FC = () => {
                   <button
                     type="button"
                     onClick={handleLoginModalOpen}
-                    className="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 text-center  dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
+                    className="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 lg:me-2 mb-2 text-center  dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
                   >
                     Login
                   </button>

src/components/MenteeApplication/MenteeApplication.component.tsx

@@ -143,6 +143,7 @@ const MenteeApplication: React.FC = () => {
                     src={mentee?.mentor.profile.image_url}
                     className="w-14 h-14 rounded-full object-cover"
                     alt=""
+                    referrerPolicy="no-referrer"
                   />
                   <div>
                     <h3 className="font-medium sm:text-lg">

src/components/MentorCard/MentorCard.component.tsx

@@ -5,9 +5,47 @@ import ProfilePic from '../ProfilePic/index.tsx';
 
 interface MentorCardProps {
   mentor: Mentor;
+  variant?: 'default' | 'profile';
 }
 
-const MentorCard: React.FC<MentorCardProps> = ({ mentor }) => {
+const MentorCard: React.FC<MentorCardProps> = ({
+  mentor,
+  variant = 'default',
+}) => {
+  if (variant === 'profile') {
+    return (
+      <Link
+        className="border border-gray-200 p-2 rounded-md shadow-sm flex items-center space-x-3 hover:bg-gray-50 transition-colors duration-200"
+        to={`/mentors/${mentor.uuid}`}
+      >
+        <div className="relative">
+          <ProfilePic
+            src={mentor.profile.image_url}
+            alt="Mentor Avatar"
+            size="2.5rem"
+            availability={mentor.availability}
+          />
+          {!mentor.availability && (
+            <div className="absolute -top-1 -right-1 bg-white bg-opacity-75 text-gray-600 px-1 rounded-full text-xs">
+              ⏳
+            </div>
+          )}
+        </div>
+        <div className="flex-grow min-w-0">
+          <h5 className="text-sm font-semibold text-slate-600 truncate">
+            {mentor.application.firstName} {mentor.application.lastName}
+          </h5>
+          <p className="text-xs text-gray-500 truncate">
+            {mentor.application.position}
+          </p>
+          <p className="text-xs text-gray-400 truncate">
+            {mentor.application.institution}
+          </p>
+        </div>
+      </Link>
+    );
+  }
+
   return (
     <Link
       className="border border-gray-200 p-4 rounded-md shadow-md w-52 flex flex-col h-full relative"