Fix navigation and routing issues across the application by correcting broken links

[Josue19-08]

Pull Request | StellarRent

📝 Summary

Fix navigation and routing issues across the application by correcting broken links, resolving merge conflicts, adding authentication protection to protected routes, and implementing breadcrumb navigation.

🔗 Related Issues

Closes #202

🔄 Changes Made

Bug Fixes:

• Resolved merge conflicts in useUserRole.tsx and RoleGuard.tsx
• Corrected dashboard routes in menu-items.ts (/dashboard/guest → /dashboard/tenant-dashboard, /dashboard/host → /dashboard/host-dashboard)
• Fixed broken link /add-property → /list in dashboard page
• Fixed broken link /list/create → /list in HeroSection and Footer components

New Features:

• Added authentication protection to /invitations route using ProtectedRoute
• Added breadcrumb navigation to tenant and host dashboards
• Updated navigation.ts with missing routes and proper requiresAuth flags

🖼️ Current Output

Route	Status
/dashboard/tenant-dashboard	✅ Breadcrumb added
/dashboard/host-dashboard	✅ Breadcrumb added
/invitations	✅ Protected (redirects to login)
Footer links	✅ Corrected
Menu items	✅ Correct routes

🧪 Testing

Manual testing performed on all routes:

• Verified menu items point to correct dashboard routes
• Verified /invitations redirects unauthenticated users to login
• Verified breadcrumbs display correctly on dashboard pages
• Verified footer and HeroSection links work correctly

✅ Testing Checklist

• Unit tests added/modified
• Integration tests performed
• Manual tests executed
• All tests pass in CI/CD

⚠️ Potential Risks

• None identified

🚀 Next Steps & Improvements

• 🔹 Implement /messages and /applications routes (currently referenced in menu but not implemented)
• 🔹 Add E2E tests for navigation flows

💬 Comments

• The RoleGuard component now includes a loading state to prevent flash of unauthorized content
• The useUserRole hook fetches role from API with localStorage fallback for better reliability

Summary by CodeRabbit

• New Features

  • Breadcrumb navigation added to host and tenant dashboards for improved navigation clarity
  • Guest invitations page now protected with authentication requirement and login redirect

• Improvements

  • Navigation routing consolidated and updated across the application for consistency
  • Property listing endpoints unified to streamline the user experience
  • Enhanced backend user role detection with improved API integration

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

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR consolidates navigation routing, adds UI breadcrumbs to dashboards, replaces role-based guards with protected route wrappers, removes the RoleGuard component, and refactors useUserRole to fetch user profile data via API with localStorage fallback for role computation.

Changes

Cohort / File(s)	Summary
Breadcrumb UI additions apps/web/src/app/dashboard/host-dashboard/page.tsx, apps/web/src/app/dashboard/tenant-dashboard/page.tsx	Added Breadcrumb import and rendered component with pt-4 class in header sections of both dashboards.
Navigation href updates apps/web/src/app/dashboard/page.tsx, apps/web/src/components/shared/layout/Footer.tsx, apps/web/src/components/shared/layout/HeroSection.tsx	Updated property listing navigation targets from /list/create to /list across multiple components.
Access control changes apps/web/src/app/invitations/page.tsx	Wrapped invitations page content in ProtectedRoute component with redirect to /login?redirect=/invitations.
Route definitions apps/web/src/constants/menu-items.ts, apps/web/src/lib/navigation.ts	Updated menu item hrefs to point to specific dashboards (tenant-dashboard, host-dashboard); removed BOOKINGS route, added LIST_PROPERTY and INVITATIONS routes with requiresAuth flags.
Hook and access control refactor apps/web/src/hooks/useUserRole.tsx, apps/web/src/components/guards/RoleGuard.tsx	Refactored useUserRole to fetch user profile via API with localStorage fallback and added isLoading to return type; removed RoleGuard component file.

Sequence Diagram(s)

sequenceDiagram
    participant Component as Component/<br/>useUserRole Hook
    participant API as profileAPI
    participant Storage as localStorage
    participant Logic as Role<br/>Computation

    Component->>Storage: Check for cached<br/>hostStatus/hasProperties
    Component->>API: Fetch user profile
    Note over API: Get hostStatus,<br/>hasProperties
    alt API Success
        API-->>Component: Return profile data
        Component->>Storage: Cache hostStatus<br/>& hasProperties
        Component->>Logic: Derive role<br/>(guest/host/dual)
    else API Failure
        API-->>Component: Error
        Component->>Storage: Retrieve fallback values
        Component->>Logic: Derive role from<br/>cached/fallback data
    end
    Logic-->>Component: Return role + isLoading

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• Issue #201: Removing the RoleGuard component eliminates the previously enforced role-based access control implementation that this linked issue may have requested.

Possibly related PRs

• PR #184: Both PRs modify apps/web/src/constants/menu-items.ts to update navigation hrefs and connect sidebar menu items to routes.
• PR #179: Both PRs adjust access control and role-based logic, with overlapping changes to useUserRole and RoleGuard usage.
• PR #151: Both PRs add Breadcrumb UI components and update navigation constants/helpers to wire dashboard routes.

Poem

🐰 Hopping through routes with breadcrumb trails,
Protected paths where auth prevails,
API whispers what role to be,
Guard removed, the site runs free!
Navigation bounces, clean and bright,
The dashboard hops toward the light! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: correcting navigation and routing issues by fixing broken links throughout the application.
Linked Issues check	✅ Passed	The PR addresses all acceptance criteria from issue #202: valid routes, protected routes with ProtectedRoute, breadcrumbs on dashboards, and broken links corrected.
Out of Scope Changes check	✅ Passed	All changes are in scope: fixing navigation/routing, adding breadcrumbs, implementing ProtectedRoute, removing RoleGuard, and updating menu/route constants align with issue #202 objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

apps/web/src/components/guards/RoleGuard.tsx (1)

14-47: The default fallback path is safe, but the component has incomplete role checking.

The /dashboard route is a safe fallback—it intelligently redirects users based on their role rather than guarding content. However, the new RoleGuard component only validates requiredRole === 'host' and ignores 'guest' and 'dual' roles. Compare with the original RoleGuard in hooks/auth/, which properly validates all role types. Before this component is used, add role checks for 'guest' and 'dual' to match the original implementation, or clarify if it's intentionally host-only.

apps/web/src/lib/navigation.ts (1)

59-63: Redirect URLs use incorrect path — will cause 404 after login.

The redirect parameter in both getBookingsUrl and getDashboardUrl uses /tenant-dashboard, but the actual route defined above is /dashboard/tenant-dashboard. After login, users will be redirected to a non-existent route.

Proposed fix

 export const navigationHelpers = {
   getBookingsUrl: (isAuthenticated: boolean) =>
-    isAuthenticated ? '/dashboard/tenant-dashboard' : '/login?redirect=/tenant-dashboard',
+    isAuthenticated ? '/dashboard/tenant-dashboard' : '/login?redirect=/dashboard/tenant-dashboard',

   getDashboardUrl: (isAuthenticated: boolean) =>
-    isAuthenticated ? '/dashboard/tenant-dashboard' : '/login?redirect=/tenant-dashboard',
+    isAuthenticated ? '/dashboard/tenant-dashboard' : '/login?redirect=/dashboard/tenant-dashboard',

🤖 Fix all issues with AI agents

In `@apps/web/src/app/privacy/page.tsx`:
- Around line 9-65: The Privacy Policy in apps/web/src/app/privacy/page.tsx
(sections titled "1. Information We Collect", "3. Blockchain Data", and "5.
Contact Us") is inaccurate and incomplete: update the "Information We Collect"
section to clearly state wallet address is optional and only collected when
users opt into wallet authentication (vs. email/password registration), and
explicitly list optional profile fields collected (phone, address, preferences,
social links); expand the "Blockchain Data" and "3. Blockchain Data"/transaction
paragraphs to specify exactly which transaction details are stored (e.g.,
payment hashes, escrow addresses, booking details), clarify retention periods
and a data deletion/ERASURE procedure (retention timeframe and how users request
deletion), and add an explicit disclosure that escrow addresses are created and
stored on-chain; finally, ensure the "Last updated" date is updated when the
revised policy is approved.

[respp]

Additionally, I’m not finding any references to /dashboard/bookings, which is mentioned in the issue. Since you have a better overview of the issue, what’s your take on it?

[Josue19-08]

@respp Requested changes corrected, please check again

[Josue19-08]

Additionally, I’m not finding any references to /dashboard/bookings, which is mentioned in the issue. Since you have a better overview of the issue, what’s your take on it?

/dashboard/bookings doesn't exist as a standalone route. Bookings are handled within the tenant dashboard using tabs - users access them via /dashboard/tenant-dashboard?tab=bookings. The issue mentioned it as an example to verify, and after verification, this is the intended design. The menu items in menu-items.ts already point to the correct path with the tab parameter.