+
+
+ ⏳
+
+ )}
+
+
+
+ );
+ }
+
return (
;
+
+const months = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+];
+
+const MonthlyCheckInModal: React.FC<{
+ onClose: () => void;
+ isOpen: boolean;
+ menteeId: string;
+}> = ({ onClose, isOpen, menteeId }) => {
+ const {
+ register,
+ setValue,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = useForm+ {mentor.application.firstName} {mentor.application.lastName} +
++ {mentor.application.position} +
++ {mentor.application.institution} +
+
+
+
+ );
+};
+
+export default MonthlyCheckInModal;
diff --git a/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
new file mode 100644
index 00000000..c498d0d4
--- /dev/null
+++ b/src/components/MonthlyChecking/MenteeMonthlyChecking.tsx
@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { format } from 'date-fns';
+import NoCheckInsIcon from '../../assets/svg/Icons/NoCheckInsIcon';
+import { useMonthlyCheckIns } from '../../hooks/useSubmitCheckIn';
+import { MonthlyCheckIn } from '../../types';
+import NewSubmissionsToggle from '../Toggle/NewSubmissionToggle';
+import HistoryToggle from '../Toggle/HistoryToggle';
+import ArrowIcon from '../../assets/svg/Icons/ArrowIcon';
+import Loading from '../../assets/svg/Loading';
+
+interface MenteeMonthlyCheckingProps {
+ menteeId: string;
+}
+
+interface CheckInItemProps {
+ checkIn: MonthlyCheckIn;
+}
+
+const CheckInItem: React.FC
+
+
+
+
+ Monthly Check-In
+ +
+
+ );
+};
+
+const MenteeMonthlyChecking: React.FC {
+ setIsExpanded(!isExpanded);
+ }}
+ >
+
+
+ {isExpanded && (
+
+
+ + {checkIn.title} +
++ Submitted on {format(new Date(checkIn.checkInDate), 'MMM dd, yyyy')} +
+
+
+ )}
+
+
+
+
+ + General Updates: +
++ {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'} +
+
+
+ + Progress Towards Goals: +
++ {checkIn.progressTowardsGoals ?? 'No progress updates provided'} +
+
+
+ Submissions:
+ {checkIn.mediaContentLinks.map((link, index) => ( + + Media Link {index + 1} + + ))} +
+
+
+
+ + Mentor Feedback: +
+ {checkIn.mentorFeedback ? ( ++ {checkIn.mentorFeedback} +
+ ) : ( +No feedback yet
+ )} +
+
+ {checkIn.isCheckedByMentor
+ ? `✓ Checked on ${format(
+ new Date(checkIn.mentorCheckedDate ?? ''),
+ 'MMM dd, yyyy'
+ )}`
+ : '⏳ Pending review'}
+
+
+
+
+ );
+ }
+
+ if (checkInHistory.length === 0) {
+ return (
+
+
+ );
+ }
+
+ const uncheckedCheckIns = checkInHistory.filter(
+ (checkIn: MonthlyCheckIn) => !checkIn.isCheckedByMentor
+ );
+ const checkedCheckIns = checkInHistory.filter(
+ (checkIn: MonthlyCheckIn) => checkIn.isCheckedByMentor
+ );
+
+ return (
+ + No monthly check-ins yet +
++ Start by submitting your first monthly check-in! +
+
+ {
+ setNewSubmissionOpen(!isNewSubmissionOpen);
+ }}
+ newSubmissionsCount={uncheckedCheckIns.length}
+ />
+ {isNewSubmissionOpen && (
+ {
+ setIsHistoryOpen(!isHistoryOpen);
+ }}
+ checkingCount={checkedCheckIns.length}
+ />
+ {isHistoryOpen && (
+
+ );
+};
+
+export default MenteeMonthlyChecking;
diff --git a/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
new file mode 100644
index 00000000..2c20deab
--- /dev/null
+++ b/src/components/MonthlyChecking/MentorFeedbackForm.component.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { MentorFeedbackSchema } from '../../schemas';
+import { useMentorFeedback } from '../../hooks/useSubmitCheckIn';
+import Loading from '../../assets/svg/Loading';
+
+interface MentorFeedbackFormData {
+ menteeId: string;
+ checkInId: string;
+ mentorFeedback: string;
+ isCheckedByMentor: boolean;
+}
+
+interface MentorFeedbackFormProps {
+ menteeId: string;
+ checkInId: string;
+ onSubmit: () => Promise
+ {uncheckedCheckIns.length > 0 ? (
+ uncheckedCheckIns.map((checkIn) => (
+
+ )}
+
+
+
+ )}
+ No new check-ins to display.
+
+ {checkedCheckIns.length > 0 ? (
+ checkedCheckIns.map((checkIn) => (
+
+ )}
+ No feedback history available.
+ )} +
+
+ );
+};
+
+const MentorMonthlyChecking: React.FC {
+ setIsExpanded(!isExpanded);
+ }}
+ >
+
+
+ {isExpanded && (
+
+
+ + {checkIn.title} +
++ Submitted on {format(new Date(checkIn.checkInDate), 'MMM dd, yyyy')} +
+
+
+ )}
+
+
+
+
+ + General Updates: +
++ {checkIn.generalUpdatesAndFeedback ?? 'No updates provided'} +
+
+
+ + Progress Towards Goals: +
++ {checkIn.progressTowardsGoals ?? 'No progress updates provided'} +
+
+
+ Submissions:
+ {checkIn.mediaContentLinks.map((link, index) => ( + + Media Link {index + 1} + + ))} +
+ {isHistory ? (
+ {
+ await onSubmitFeedback(checkIn.uuid);
+ }}
+ />
+ )
+ )}
+
+ )}
+
+
+
+ ) : (
+ <>
+ {isSubmitting ? (
+ + Given Feedback: +
++ {checkIn.mentorFeedback} +
+
+
+ ✓ Checked on{' '}
+ {format(
+ new Date(checkIn.mentorCheckedDate ?? ''),
+ 'MMM dd, yyyy'
+ )}
+
+
+
+
+ ) : (
+ !isAdmin && (
+
+
+ );
+ }
+
+ if (checkInHistory.length === 0) {
+ return (
+
+
+ );
+ }
+
+ const uncheckedCheckIns = checkInHistory.filter(
+ (checkIn) => !checkIn.isCheckedByMentor
+ );
+ const checkedCheckIns = checkInHistory.filter(
+ (checkIn) => checkIn.isCheckedByMentor
+ );
+
+ return (
+ + No Check-ins Found +
++ Mentee has not submitted any monthly check-ins yet. +
+
+ {
+ setNewSubmissionOpen(!isNewSubmissionOpen);
+ }}
+ newSubmissionsCount={uncheckedCheckIns.length}
+ />
+ {isNewSubmissionOpen && (
+ {
+ setIsHistoryOpen(!isHistoryOpen);
+ }}
+ checkingCount={checkedCheckIns.length}
+ />
+ {isHistoryOpen && (
+
+ );
+};
+
+export default MentorMonthlyChecking;
diff --git a/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx b/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx
new file mode 100644
index 00000000..45cca4f4
--- /dev/null
+++ b/src/components/MonthlyChecking/MonthlyCheckingHeader.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import ArrowIcon from '../../assets/svg/Icons/ArrowIcon';
+
+interface MonthlyCheckingHeaderProps {
+ isMentorView: boolean;
+ handleAddCheckIn?: () => void;
+ toggleGuidelines: () => void;
+ menteeId?: string;
+ showGuidelines: boolean;
+}
+
+const MonthlyCheckInHeader: React.FC
+ {uncheckedCheckIns.length > 0 ? (
+ uncheckedCheckIns.map((checkIn) => (
+
+ )}
+
+
+
+ )}
+ No new check-ins to review.
+
+ {checkedCheckIns.length > 0 ? (
+ checkedCheckIns.map((checkIn) => (
+
+ )}
+ No feedback history available.
+ )} +
+
+
+ {showGuidelines && (
+
+
+ )}
+
+ );
+};
+
+export default MonthlyCheckInHeader;
diff --git a/src/components/NotificationBadge/index.tsx b/src/components/NotificationBadge/index.tsx
new file mode 100644
index 00000000..85695992
--- /dev/null
+++ b/src/components/NotificationBadge/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import NotificationBell from '../../assets/svg/Icons/NotificationBell';
+import { NotificationProps } from '../../types';
+
+const NotificationBadge: React.FC
+
+ + Monthly Check-in Guidelines +
+
+
+
+
+ + Guidelines: +
+-
+ {isMentorView ? (
+ <>
+
- Review monthly updates submitted by your mentees. +
- Provide constructive feedback on their progress. +
- + Ensure mentees are meeting their submission + requirements. + + + ) : ( + <> +
- + Submit monthly updates on your progress via the ScholarX + platform. + +
- + Make at least 3 media submissions during the 6-month + period. + +
- + Include links to your media submissions in the monthly + check-ins. + +
- Share your progress on social media and tag us. + + )} +
+
+ + Types of Media: +
+-
+
- 📝 Written: Blogs, Medium +
- 🎥 Video: YouTube, Facebook +
- 🎙️ Audio: Podcasts, Spotify +
- 💻 Code: GitHub repositories +
+
+ );
+};
+
+export default NotificationBadge;
diff --git a/src/components/Toggle/ButtonToggle.tsx b/src/components/Toggle/ButtonToggle.tsx
new file mode 100644
index 00000000..0843654e
--- /dev/null
+++ b/src/components/Toggle/ButtonToggle.tsx
@@ -0,0 +1,41 @@
+import React, { ReactElement } from 'react';
+import NotificationBadge from '../NotificationBadge';
+import ArrowIcon from '../../assets/svg/Icons/ArrowIcon';
+
+interface ToggleButtonProps {
+ isOpen: boolean;
+ toggle: () => void;
+ icon?: ReactElement;
+ text: string;
+ badgeCount?: number;
+ useNotificationBadge?: boolean;
+}
+
+const ToggleButton: React.FC
+
+
+ );
+
+ return (
+
+ {mentee.profile.image_url ? (
+ 
+ ) : (
+
+
+
+ )}
+
+
+
+
+ + {mentee.application.firstName} {mentee.application.lastName} +
+
+
+ );
+};
+
+const AdminMenteeDetails: React.FC = () => {
+ const { menteeId } = useParams<{ menteeId: string }>();
+
+ const {
+ data: checkInHistory = [],
+ isLoading,
+ refetch,
+ } = useMonthlyCheckIns(menteeId ?? '');
+
return (
+
+ Approved Mentees
+
+ {approvedMentees.map(renderMenteeLink)}
+ {approvedMentees.length === 0 && (
+
+ No approved mentees available.
+ )} +
+
+
+
+
-
+
);
};
diff --git a/src/pages/MenteeApplicationsView/MenteeApplications.component.tsx b/src/pages/MenteeApplicationsView/MenteeApplications.component.tsx
index c88cccbb..0ef7b44c 100644
--- a/src/pages/MenteeApplicationsView/MenteeApplications.component.tsx
+++ b/src/pages/MenteeApplicationsView/MenteeApplications.component.tsx
@@ -9,6 +9,7 @@ const MenteeApplications: React.FC = () => {
const { mentor } = useContext(UserContext) as UserContextType;
const { data: mentees } = useMyMentees();
const [isAvailable, setIsAvailable] = useState(mentor?.availability);
+
const { updateAvailability } = useMentor(mentor?.uuid);
const handleAvailability = async (availability: boolean) => {
diff --git a/src/pages/MenteeCheckIn/MenteeCheckIn.component.tsx b/src/pages/MenteeCheckIn/MenteeCheckIn.component.tsx
deleted file mode 100644
index 6652fa62..00000000
--- a/src/pages/MenteeCheckIn/MenteeCheckIn.component.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { MenteeCheckInSchema } from '../../schemas';
-
-type MenteeCheckInForm = z.inferOngoing Mentorship Programs
++
+ Monthly Check-Ins +
+
+
-
- );
-};
-
-export default MenteeCheckIn;
diff --git a/src/pages/MenteeCheckIn/MenteeCheckIn.stories.tsx b/src/pages/MenteeCheckIn/MenteeCheckIn.stories.tsx
deleted file mode 100644
index d687e7f9..00000000
--- a/src/pages/MenteeCheckIn/MenteeCheckIn.stories.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { expect } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/react';
-import { waitFor, within, userEvent } from '@storybook/testing-library';
-
-import MenteeCheckIn from './MenteeCheckIn.component';
-
-const meta: Meta- Monthly Progress -
- -
-
- Mentors
-
-
-
- My Mentor:
-
- {approvedApplications?.length > 0
- ? approvedApplications.map(({ mentor, uuid }) => (
-
-
- (
+ ApplicationStatus.APPROVED
+ );
+ const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+ const navigate = useNavigate();
- return (
-
- Your pending mentee applications: -
-
- {pendingApplications?.length > 0
- ? pendingApplications.map(({ mentor, uuid }) => (
-
+
+
-
+
+ {isApproved ? (
+ <>
+
+
+
+
+ ) : (
+ + Monthly Check-Ins +
+
+
+
+
+
+ )}
+ + Your pending mentee applications: +
+
+ {pendingApplications.length > 0
+ ? pendingApplications.map(({ mentor, uuid }) => (
+
+
+
+
+ + Your approved mentee applications: +
+
+ {approvedApplications.length > 0
+ ? approvedApplications.map(({ mentor, uuid }) => (
+
+
-
-
-
Mentee Applications
+ useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; + + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + const filteredApplications = + menteeApplications?.filter((mentee) => mentee.state === activeTab) || []; + + const tabData = [ + { status: ApplicationStatus.APPROVED, label: 'Approved' }, + { status: ApplicationStatus.PENDING, label: 'Pending' }, + ]; + + const renderMenteeLink = (mentee: Mentee) => ( + +
+
+ {mentee.profile.image_url ? (
+
+ ) : (
+
-
+
+ )}
- {menteeApplications?.length} Application(s) -
-
- {menteeApplications
- ?.filter((mentee) => mentee.state !== 'revoked')
- .map((mentee) => (
-
-
+
+ );
-
-
-
- ))}
+
- {mentee.profile.image_url !== '' ? (
-
- ) : (
-
-
-
- )}
-
-
- - {mentee.application.firstName}{' '} - {mentee.application.lastName} -
- {mentee.application.isUndergrad ? ( -- {mentee.application.university} -
- ) : ( -- {mentee.application.position} - {', '} - {mentee.application.company} -
- )} -
+
+
+ {mentee.application.firstName} {mentee.application.lastName} +
+
- ;
+
+export interface MonthlyCheckIn {
+ uuid: string;
+ title: string;
+ checkInDate: string;
+ mediaContentLinks: string[];
+ isCheckedByMentor: boolean;
+ mentorCheckedDate: string;
+ mentorFeedback: string;
+ generalUpdatesAndFeedback: string;
+ progressTowardsGoals?: string;
+ mentee: Mentee;
+}
+
+export interface MonthlyCheckingProps {
+ isMentorView: boolean;
+ menteeId: string;
+}
+
+export interface MentorFeedbackForm {
+ checkInId: string;
+ menteeId: string;
+ mentorFeedback: string;
+ isCheckedByMentor: boolean;
+}
+
+export interface NotificationProps {
+ iconColor?: string;
+ badgeColor?: string;
+ textColor?: string;
+ count?: number;
+ className?: string;
+}
diff --git a/src/utils.ts b/src/utils.ts
index 92425c82..b5003fbd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,5 @@
+import { format, isValid, parseISO } from 'date-fns';
+
export const getStateColor = (state: string | undefined) => {
switch (state) {
case 'pending':
@@ -12,3 +14,11 @@ export const getStateColor = (state: string | undefined) => {
return 'bg-gray-100 text-gray-700';
}
};
+
+export const formatDate = (dateString: string | null | undefined): string => {
+ if (!dateString) return 'Date not available';
+ const date = parseISO(dateString);
+ return isValid(date)
+ ? format(date, 'MMMM dd, yyyy, hh:mm a')
+ : 'Invalid date';
+};
-
- ←
-
-
-
+ const renderMenteeList = () => (
+
+
+ );
+
+ return (
+
+
+ Mentee Applications
+
+ {tabData.map((tab) => (
+
+ ))}
+
+
+ {filteredApplications.map(renderMenteeLink)}
+ {filteredApplications.length === 0 && (
+
+ No mentee applications available.
+ )} +
+ {isMobile ? (
- {
+ navigate('/mentor/dashboard');
+ }}
+ isMobile={isMobile}
+ />
+ }
+ />
+ ) : (
+ <>
+ {renderMenteeList()}
+
+ );
+};
+
+const WelcomeMessage: React.FC = () => (
+
+
+ {}} isMobile={isMobile} />
+ }
+ />
+
+
+
+ )}
+
+
+);
+
+const MenteeDetails: React.FC<{ onBack: () => void; isMobile: boolean }> = ({
+ onBack,
+ isMobile,
+}) => {
+ const { menteeId } = useParams<{ menteeId: string }>();
+ const [showGuidelines, setShowGuidelines] = useState(true);
+
+ const toggleGuidelines = () => {
+ setShowGuidelines((prev) => !prev);
+ };
+
+ const {
+ data: checkInHistory = [],
+ isLoading,
+ refetch,
+ } = useMonthlyCheckIns(menteeId ?? '');
+
+ return (
+ + Welcome to the ScholarX Mentee Dashboard! +
++ Here, you can view your mentees and provide feedback on their monthly + check-ins. Click on a mentee to view their profile and their monthly + check-in submissions. +
+
+ {isMobile && (
+
+ )}
+
+
);
diff --git a/src/schemas.ts b/src/schemas.ts
index 35988a8a..0e6850ae 100644
--- a/src/schemas.ts
+++ b/src/schemas.ts
@@ -105,12 +105,23 @@ export const MentorApplicationSchema = z.object({
});
export const MenteeCheckInSchema = z.object({
- generalUpdate: z.string().min(1, 'Please provide general updates'),
- progressUpdate: z.string().min(1, 'Please summarize your progress'),
- mediaLink: z
+ title: z.string().min(1, 'Title is required'),
+ generalUpdatesAndFeedback: z
.string()
- .url('Please provide a valid URL')
- .min(1, 'Please provide a media link'),
+ .min(5, 'Please provide general updates'),
+ progressTowardsGoals: z.string().min(5, 'Please summarize your progress'),
+ mediaContentLinks: z
+ .array(z.string().url('Please provide a valid URL'))
+ .min(1, 'Please provide at least 1 media links'),
+});
+
+export const MentorFeedbackSchema = z.object({
+ menteeId: z.string().min(1, 'Mentee ID is required'),
+ checkInId: z.string().min(1, 'Check-in ID is required'),
+ mentorFeedback: z.string().optional(),
+ isCheckedByMentor: z.literal(true, {
+ errorMap: () => ({ message: 'You must mark this as checked' }),
+ }),
});
export const mentorTermsAgreementModalSchema = z.object({
diff --git a/src/types.ts b/src/types.ts
index 2c4bfe98..15d4bba7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,6 +2,7 @@ import { type z } from 'zod';
import {
type MentorApplicationSchema,
type MenteeApplicationSchema,
+ MenteeCheckInSchema,
} from './schemas';
import {
type StatusUpdatedBy,
@@ -102,3 +103,38 @@ export interface PasswordUpdateData {
token: string;
newPassword: string;
}
+
+export type MenteeCheckInForm = z.infer+
+
+
+