Implement Monthly-checking Feature for Mentees, Mentors and Admins

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/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"