Mentorship Portal: UI/UX Enhancements, Validation Improvements, and Admin Functionality (#2701)

[motalib-code]

Proposed change

he changes are categorized into Minor, Intermediate, and Major updates:
• Minor Improvements
• Enhanced UI interactions (cursor pointers for dropdowns, clickable cards, right-aligned menus).
• Streamlined forms by removing redundant headers and preview buttons.
• Improved naming conventions (, TypeScript param typing).
• Better readability (truncate program descriptions, hide labels on public views, fix gaps in admin views).
• Adjusted terminology (, “ADVANCED → Advanced”).
• Intermediate Improvements
• Strengthened validation (project name error handling, program name validation without DB errors).
• Added module removal functionality and ensured draft programs/modules remain hidden.
• Introduced ESLint rules to discourage unsafe casting.
• Improved date formatting consistency and refined comment sync logic.
• Major Improvements
• Replaced loading spinners with skeleton loaders for smoother UX.
• Introduced holistic form management for creation and validation.
• Implemented searchable dropdowns for domains/taxonomies.
• Added module ordering and task-level admin functionality.
• Enforced tag validation (uniqueness, alphanumeric security).
• Improved timezone handling for program/module dates.
• Extended GitHub API integration for assignment functionality.
• Unified dashboard issue views for admins and mentees.
• Revisited hooks directory for architectural consistency.

✅ Impact: These enhancements collectively improve the portal’s usability, maintainability, and scalability, ensuring a smoother experience for both admins and mentees while aligning with modern TypeScript and UI best practices.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

Release Notes

• New Features

  • Added admin-controlled issue assignment/unassignment for mentees
  • New mentee profile page displaying issue tracking and progress stats
  • Domain selection dropdown for streamlined module/program creation

• Improvements

  • Enhanced form validation with real-time error feedback
  • Replaced loading spinners with skeleton screens for better UX
  • Made program and module cards fully clickable
  • Added 404 handling for unpublished programs
  • Improved date range display on modules

• Bug Fixes

  • Fixed modules without labels being processed incorrectly

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

This PR refactors mentorship frontend pages and components to use typed parameters, introduces a custom useForm hook for form state management, adds validation utilities (validateTags), improves loading states with DetailsCardSkeleton, and integrates new UI components (DomainSelect, ModuleActions). The backend adds a guard to skip modules without labels during comment sync processing.

Changes

Cohort / File(s)	Summary
Backend - Mentorship Processing backend/apps/mentorship/management/commands/mentorship_update_comments.py	Adds early return guard in process_module to skip modules lacking labels, emitting a warning before repo checks proceed.
ESLint Configuration frontend/eslint.config.mjs	Adds new rule restricting TSAsExpression for useParams calls, enforcing generic typing instead of type casting.
Form & Validation Utilities frontend/src/hooks/useForm.ts, frontend/src/utils/validators.ts, frontend/src/utils/dateFormatter.ts	Introduces useForm hook for state/validation management; adds validateTags function for comma-separated tag validation; refactors dateFormatter for UTC-aware parsing and formatting.
New Skeleton & UI Components frontend/src/components/DetailsCardSkeleton.tsx, frontend/src/components/DomainSelect.tsx, frontend/src/components/ModuleActions.tsx	Adds DetailsCardSkeleton for loading states; adds DomainSelect multi-select component; adds ModuleActions dropdown for edit/view-issues actions.
Program & Module Pages frontend/src/app/mentorship/programs/[programKey]/page.tsx, frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx	Replaces LoadingSpinner with DetailsCardSkeleton; adds typed useParams with generic; adds 404 guard for unpublished programs; integrates getSimpleDuration for date ranges.
Admin Program/Module Edit Pages frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx, frontend/src/app/my/mentorship/programs/[programKey]/create/page.tsx, frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx, frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx	Refactors to use useForm hook; integrates validateTags and validation logic; updates form prop wiring (values/setValues instead of formData/setFormData); improves error handling and user feedback.
Mentee Management Pages frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeHandle]/page.tsx, frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeId]/page.tsx	Adds admin-aware issue assignment/unassignment flows with mutations and state; introduces MenteeProfilePage with mentee details, issue filtering, and stats display.
Admin Module/Program Pages frontend/src/app/my/mentorship/programs/[programKey]/page.tsx, frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx, frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx, frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx	Updates to typed useParams, DetailsCardSkeleton loading states, refactored parameter access patterns, and query variable wiring.
Form Components frontend/src/components/ProgramForm.tsx, frontend/src/components/ModuleForm.tsx	Adds optional errors prop for field-level error rendering; replaces domains input with DomainSelect component; integrates error display with dynamic border coloring.
Card & UI Components frontend/src/components/CardDetailsPage.tsx, frontend/src/components/ProgramCard.tsx, frontend/src/components/ModuleCard.tsx, frontend/src/components/SingleModuleCard.tsx, frontend/src/components/ProgramActions.tsx, frontend/src/components/ToggleableList.tsx, frontend/src/components/AnchorTitle.tsx, frontend/src/components/MenteeIssues.tsx	Adds ModuleActions integration; makes cards clickable; normalizes experience level casing; updates button styling (cursor-pointer); refactors action labels; changes menteeHandle prop to menteeId; makes AnchorTitle interactive with keyboard accessibility.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• Form handling architecture: New useForm hook integrated across multiple edit/create pages with custom validation patterns; validate how errors flow and form state management
• Type safety with generics: useParams now uses generics across several files; verify generic parameter usage is consistent
• Validation integration: validateTags and date validation added to multiple pages; ensure validation errors surface correctly in UI
• Date formatting changes: UTC refactor in dateFormatter affects parsing and formatting; verify date comparisons and locale handling across timezones
• Component interdependencies: DomainSelect, ModuleActions, DetailsCardSkeleton used across multiple pages; verify prop passing and error states
• Mentee page mutations: New AssignIssueToUser/UnassignIssueFromUser mutations with admin-gated flows; verify mutation error handling and cache updates

Possibly related issues

• Mentorship Portal improvement ideas #2701: Backend change to skip unlabeled modules in mentorship_update_comments directly addresses this issue's request to prevent comment sync for modules without labels.

Possibly related PRs

• refactor: nested ternary operators into independent statements #2532: Modifies overlapping frontend components (CardDetailsPage, ProgramCard) with related card/display logic changes.
• Feat/mentee page #2567: Overlaps on mentee page components, MenteeIssues prop changes, and module/mentee types and query wiring.
• fix params and remove refresh params #2287: Both refactor post-mutation navigation and cache update flows in program/module edit/create pages.

Suggested labels

frontend, backend, refactoring

Suggested reviewers

• arkid15r
• kasya

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f542220 and 6ee6b81.

📒 Files selected for processing (30)

• backend/apps/mentorship/management/commands/mentorship_update_comments.py (1 hunks)
• frontend/eslint.config.mjs (1 hunks)
• frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx (3 hunks)
• frontend/src/app/mentorship/programs/[programKey]/page.tsx (4 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx (4 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx (2 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx (4 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx (7 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeHandle]/page.tsx (5 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeId]/page.tsx (1 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx (3 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx (4 hunks)
• frontend/src/app/my/mentorship/programs/[programKey]/page.tsx (3 hunks)
• frontend/src/app/my/mentorship/programs/create/page.tsx (2 hunks)
• frontend/src/components/AnchorTitle.tsx (1 hunks)
• frontend/src/components/CardDetailsPage.tsx (5 hunks)
• frontend/src/components/DetailsCardSkeleton.tsx (1 hunks)
• frontend/src/components/DomainSelect.tsx (1 hunks)
• frontend/src/components/MenteeIssues.tsx (2 hunks)
• frontend/src/components/ModuleActions.tsx (1 hunks)
• frontend/src/components/ModuleCard.tsx (1 hunks)
• frontend/src/components/ModuleForm.tsx (5 hunks)
• frontend/src/components/ProgramActions.tsx (2 hunks)
• frontend/src/components/ProgramCard.tsx (2 hunks)
• frontend/src/components/ProgramForm.tsx (9 hunks)
• frontend/src/components/SingleModuleCard.tsx (2 hunks)
• frontend/src/components/ToggleableList.tsx (1 hunks)
• frontend/src/hooks/useForm.ts (1 hunks)
• frontend/src/utils/dateFormatter.ts (3 hunks)
• frontend/src/utils/validators.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

The PR must be linked to an issue assigned to the PR author.

[sonarqubecloud]

Quality Gate failed

Failed conditions
14.9% Duplication on New Code (required ≤ 3%)
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE