feat: build mentor portal page

[EmeditWeb]

Problem

There is no mentor portal page in the app. Mentors who click "Mentor" on the Dashboard or "Vouch for Learners" CTA are taken to /vouch which is a vouch management page, not a full mentor dashboard. The product vision requires a dedicated mentor portal with:

• Mentor profile showing own reputation score and tier
• Vouch requests list
• Active vouches list with expiry and repayment status
• Vouch impact preview
• Revoke vouch with confirmation
• Vouch risk warning

Root Cause

The mentor portal was never built. Only the vouch management sub-page exists (Vouch.tsx).

What To Build

1. Create /mentor route with mentor dashboard layout
2. Add mentor profile section showing reputation, tier, and stats
3. Move vouch request list from Vouch.tsx into mentor portal
4. Add active vouches list with revoke functionality
5. Add loading, error, and empty states for all sections
6. Add auth guard to ensure only mentors can access

Files To Touch

• src/router/index.tsx — add /mentor route
• src/pages/MentorDashboard.tsx — new file
• src/services/vouching.service.ts — ensure API calls exist
• src/hooks/useMentor.ts — new hook for mentor data

Acceptance Criteria

• Mentor portal accessible at /mentor
• Profile shows reputation score, tier, and stats
• Vouch requests list with accept/decline actions
• Active vouches list with revoke confirmation dialog
• Loading, error, and empty states for all sections
• Auth guard blocks non-mentors

Mandatory Checks

• context/ files read
• npm run build passes
• npm test passes, count not decreased
• PR references this issue

[Emeka-12]

Hi Team, I would love to take on this issue. Building a dedicated Mentor Portal at /mentor is essential to fulfilling StepFi's product vision, giving mentors clear visibility over their own reputation, active vouches, risk exposure, and pending request queues.

Before writing any code, I will read all required context/ files to ensure full alignment with StepFi's architecture, styling guidelines, and existing vouching service patterns.

To build the portal:

• Routing & Auth Guard: I will add the /mentor route in src/router/index.tsx and wrap it in an authentication guard so only authenticated users with mentor permissions can access the dashboard.
• Custom Hook & Services: I will create src/hooks/useMentor.ts to manage mentor profile state, reputation score, tier, and vouch statistics. I will ensure all necessary API endpoints exist in src/services/vouching.service.ts to support fetching profile data, listing active/pending vouches, and executing vouch revocations.
• Dashboard Component (MentorDashboard.tsx): I will implement the mentor profile section (displaying reputation, tier, and key metrics), embed the vouch requests list with accept/decline actions, and build the active vouches list complete with repayment tracking, risk warnings, and a revoke confirmation modal.
• UI States & Testing: I will implement robust loading, error, and empty states across every dashboard section, ensuring npm run build and npm test pass cleanly without decreasing test coverage.

With strong experience building complex React/TypeScript dashboards and DeFi/Web3 user interfaces, I am ready to deliver a clean, well-tested implementation. Please assign this issue to me!

[grantfox-oss]

🦊 GrantFox — @Emeka-12 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #64)
2. Your PR will be reviewed by the StepFi-app maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@Emeka-12's PR #95 was approved and merged by @EmeditWeb.

🏆 @Emeka-12: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (519 total points). Track your full progress on GrantFox.

👏 Great work, @Emeka-12! Keep contributing to StepFi-app.