Implement Monthly-checking Feature for Mentees, Mentors and Admins

package.json

@@ -19,16 +19,20 @@
   "license": "ISC",
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@react-spring/web": "^9.7.4",
     "@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",
     "react-hook-form": "^7.51.0",
     "react-intersection-observer": "^9.13.1",
     "react-router": "^6.11.2",
     "react-router-dom": "^6.11.2",
+    "react-spring": "^9.7.4",
+    "react-tag-input": "^6.10.3",
     "zod": "^3.22.4"
   },
   "devDependencies": {

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,12 @@ 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/ArrowDownIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ArrowDownIcon: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-4 w-4 mr-1"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M19 9l-7 7-7-7"
+    />
+  </svg>
+);
+
+export default ArrowDownIcon;

src/assets/svg/Icons/ArrowRightIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ArrowRightIcon: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-4 w-4 mr-1"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M9 5l7 7-7 7"
+    />
+  </svg>
+);
+
+export default ArrowRightIcon;

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/components/CongratsModal/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { animated, useSpring } from 'react-spring';
+
+interface CongratulationsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const CongratulationsModal: React.FC<CongratulationsModalProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const animation = useSpring({
+    opacity: isOpen ? 1 : 0,
+    transform: isOpen ? 'translateY(0)' : 'translateY(-50%)',
+  });
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
+      <animated.div
+        style={animation}
+        className="bg-white p-6 rounded-lg shadow-lg"
+      >
+        <h2 className="text-2xl font-bold mb-4">Congratulations!</h2>
+        <p className="mb-4">Your check-in has been successfully submitted.</p>
+        <button
+          onClick={onClose}
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+        >
+          Close
+        </button>
+      </animated.div>
+    </div>
+  );
+};
+
+export default CongratulationsModal;

src/components/MentorProfile/MentorProfile.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ProfilePic from '../ProfilePic/index.tsx';
+import { type Mentor } from '../../types.ts';
+
+interface MentorCardProps {
+  mentor: Mentor;
+}
+
+const MentorProfileCard: React.FC<MentorCardProps> = ({ mentor }) => {
+  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>
+  );
+};
+
+export default MentorProfileCard;