Skip to content

fix: navigations in frontend

Vandana reddy Balannagari requested to merge fix/navigations into develop

Overview

This MR addresses a navigation issue where volunteers were incorrectly redirected to the main camp map instead of their respective station dashboards when using the header's back button. It also unifies the dashboard UI by removing redundant internal headers in favor of the global AppLayout header.

What does this MR do and why?

  • Navigation Fix: Ensures that sub-pages within the Registration and Medicine flows (e.g., Patient Registration, Prescription Queue) return to the Registration Dashboard or Medicine Dashboard respectively, rather than the main map.
  • UI Consolidation: Removes "double headers" that occurred on the dashboard pages where both the AppLayout header and an internal page header were being displayed.
  • Consistency: Centralizes navigation logic in AppLayout.tsx for better maintainability.

Changes Made

  • src/components/AppLayout.tsx: Updated getPageHeaderInfo to set correct backPath for registration and medicine sub-routes. Added header info for dispatcher dashboards.
  • src/pages/volunteer/RegistrationDashboardPage.tsx: Removed internal header and simplified component.
  • src/pages/volunteer/MedicineDashboardPage.tsx: Removed internal header and simplified component.
  • tests/components/AppLayout.test.tsx: Added comprehensive navigation tests for all volunteer sub-routes.
  • tests/volunteers/MedicineDashboardPage.test.tsx: Updated tests to match the new UI structure (removed back button check, updated button count).
  • tests/volunteers/RegistrationDashboardPage.test.tsx: Cleaned up redundant tests for the removed internal back button.

Technical Details

The root cause was that getPageHeaderInfo in AppLayout.tsx defaulted many routes to /?role=volunteer. By explicitly mapping these routes to their parent dashboards, we provide a more intuitive nested navigation experience.

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

  • Related to user feedback on navigation flow consistency within workstations.

Screenshots or Screen Recordings

Screencast_from_2026-05-26_15-37-18

Before After
Multiple redundant headers Single, unified sticky header

How to Set Up and Validate Locally

  1. Pull this branch: fix/navigations
  2. Run development server: 
    bun dev
  3. Navigate to Volunteer -> Registration.
  4. Click on Patient Registration.
  5. Click the Back button in the top header.
  6. Expected Result: You should return to the Registration Dashboard, not the main map.
  7. Repeat the same for Medicine sub-pages.

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Back from Patient Registration Returns to Registration Dashboard ✅
Back from Select Specialization Returns to Registration Dashboard ✅
Back from Prescription Queue Returns to Medicine Dashboard ✅
Back from Medicine Dashboard Returns to Camp Map ✅
Header UI check No duplicate headers on dashboard pages ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • No duplicate code and use of existing components for reusability
  • i18n check passed with no hardcoded strings in codebase for i18n support
  • TypeScript types are properly defined
  • ESLint and Prettier checks pass

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules
  • State management is appropriate

Component Patterns

  • Tailwind classes follow utility-first approach
  • Responsive design considered
  • Icons from lucide-react used consistently

API & Data Fetching

  • Loading and error states handled

Error Handling

  • User-friendly error messages displayed

Documentation

  • CHANGELOG.md updated (if applicable)

Additional Notes

The changes were verified with the full test suite (66 passed), including the specialized navigation tests added to AppLayout.test.tsx.

Merge request reports