Implemented Interviewee Dashboard

[Raafay-Qureshi]

Summary

This PR implements the complete Interviewee Dashboard flow with 5 sub-features, allowing candidates to view their profile, submit availability, and see their interview schedule after joining a team via email invite.

Features Implemented

1. Interviewee Profile Menu

• File: frontend/src/features/dashboard/components/Header.tsx
• Displays real user name from AuthContext
• Shows "Applicant" role for CANDIDATE users
• Profile image support with fallback to User icon
• Loading state while user data loads

2. Interviewee Navigation Bar

• File: frontend/src/features/dashboard/components/Sidebar.tsx
• Role-based navigation filtering
• CANDIDATE users see only: Dashboard and Availability
• INTERVIEWER/ADMIN users see all navigation items (Team Availability, Candidate Availability, Admin Settings, Schedule Interviews)

3. Interviewee Availability Submission

• File: frontend/src/features/dashboard/components/Availability.tsx
• Connected to backend API: POST /api/availability
• Transforms local time strings (e.g., "8:00 am") to ISO timestamps
• 1-hour time slot duration per selection
• Success/error feedback on submission
• Validates user has teamId before submitting
• Utils: frontend/src/utils/timezone.ts - Date/time conversion helpers

4. Calendar at a Glance

• File: frontend/src/features/dashboard/components/CalendarStats.tsx
• Fetches real meeting data from GET /api/meetings/user/:userId
• Calculates stats: Today's Interviews, This Week, Next 7 Days
• Dynamic welcome message with user name
• Loading and error states
• Empty state handling

5. Interview Schedule

• File: frontend/src/features/dashboard/components/InterviewScheduleSection.tsx
• Displays real meetings from backend API
• Shows interviewer names (populated from user data)
• Date filtering tabs: Today, Tomorrow, This Week, Next Week
• Formatted dates: "Thursday, Oct 9, 2:00 PM"
• Displays role and interviewer in format: "Role | with Interviewer Name"
• Loading, error, and empty states

Backend Changes

Meeting API Enhancement

• File: backend/src/controllers/meeting/getUserMeetings.ts
• Added .populate('interviewerIds', 'name email') to query
• Returns populated interviewer user objects instead of ObjectIds
• Enables frontend to display interviewer names directly

Technical Details

New Files

• frontend/src/utils/timezone.ts - Timezone conversion utilities
  • parseTimeString() - Parse "8:00 am" format
  • combineDateAndTime() - Merge date and time
  • toISOTimestamp() - Convert to ISO 8601 format
  • formatDisplayDate() - Format for UI display

Modified Files

• backend/src/controllers/meeting/getUserMeetings.ts - Populate interviewer data
• frontend/src/features/dashboard/components/Header.tsx - Real user data
• frontend/src/features/dashboard/components/Sidebar.tsx - Role-based nav
• frontend/src/features/dashboard/components/CalendarStats.tsx - Real stats
• frontend/src/features/dashboard/components/InterviewScheduleSection.tsx - Real meetings
• frontend/src/features/dashboard/components/Availability.tsx - API integration

UI/UX Highlights

• Role-based UI: Candidates see simplified navigation
• Real-time Data: All dashboard data now comes from backend APIs
• Loading States: Skeleton loaders while data fetches
• Error Handling: Graceful error messages with retry capability
• Empty States: Helpful messages when no data exists
• Responsive: Works across desktop viewports

Acceptance Criteria

• Profile Menu shows real user name and "Applicant" role
• Navigation filters based on user role
• Availability submits to backend with correct format
• Calendar Stats display real meeting counts
• Interview Schedule shows real meetings with interviewer names
• Empty states handled gracefully
• Loading states implemented
• Error handling in place

Screenshots:

Interviewee Availability

Interviewee Dashboard

Closes #148