Skip to content

feat: added help area in medical camp map

Vandana reddy Balannagari requested to merge fix/camp-area into develop

Overview

Adds the new Help workstation to the medical camp area flow and removes the redundant queues shortcut from the medicine dashboard. This keeps workstation assignment, camp map navigation, and volunteer medicine navigation aligned with the updated camp workflow.

What does this MR do and why?

This MR adds Help as a first-class camp area so volunteers can be assigned to it during attendance deployment and access it from the camp map when stationed there. The Help station routes to the volunteer queues page, matching the intended support workflow.

It also removes the floating plus shortcut from the medicine dashboard because direct queue access now belongs on the Help station/map flow, while the medicine dashboard should stay focused on medicine-specific actions.

The approach keeps the existing component structure and local state patterns. No new APIs, routes, or shared abstractions were introduced.

Changes Made

  • Modified src/components/AttendanceMarker.tsx
    • Added help to the station assignment list.
    • Fixed hook dependency arrays for translation usage.
  • Modified src/components/CampMap.tsx
    • Added Help to available areas.
    • Replaced the desktop empty padding block with an interactive Help workstation tile.
    • Help tile navigates assigned users to /volunteer/queues.
  • Modified src/pages/volunteer/MedicineDashboardPage.tsx
    • Removed the floating plus button that navigated to /volunteer/queues.
    • Removed the unused Plus icon import.
  • Updated tests:
    • tests/components/AttendanceMarker.exit-mode.test.tsx
    • tests/components/CampMap.test.tsx
    • tests/volunteers/MedicineDashboardPage.test.tsx

Technical Details

The Help area is handled consistently with existing workstation IDs such as registration, vitals, medicine, and counselling.

For attendance assignment, the new Help station is included in the existing availableAreas array. When selected, it uses the existing assignArea service with area: 'help'.

For the camp map, Help uses the same assignment guard as other workstations:

  • If the volunteer is assigned to help, clicking Help navigates to /volunteer/queues.
  • If the volunteer is assigned elsewhere, the standard access denied toast is shown.

For the medicine dashboard, removing the plus shortcut avoids duplicate navigation paths and keeps the page scoped to prescription queue, pickup, verification, and medicine list actions.

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

closes #349 (closed)

Screenshots or Screen Recordings

image

Before After
Medicine dashboard had a floating plus shortcut to queues. Camp map had no Help tile. Medicine dashboard only shows medicine actions. Camp map includes a Help workstation tile that routes assigned users to queues.

How to Set Up and Validate Locally

  1. Pull this branch / checkout MR.
  2. Install dependencies if needed:
    bun install
  3. Run the development server:
    bun dev
  4. Validate the Help station flow:
    • Open the volunteer camp map.
    • Ensure the Help tile appears in the top-right workstation area.
    • Assign or mock the current volunteer area as help.
    • Click Help.
    • Expected behavior: user navigates to /volunteer/queues.
  5. Validate the locked station behavior:
    • Set the volunteer assigned area to another station, such as registration.
    • Click Help.
    • Expected behavior: access denied toast is displayed and navigation does not occur.
  6. Validate the medicine dashboard:
    • Navigate to /volunteer/medicine-dashboard.
    • Confirm there is no floating plus shortcut.
    • Confirm medicine action cards still navigate correctly.

No backend changes are required beyond the backend accepting help as a station area.

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Help appears in attendance station assignment after entry attendance Help is rendered in the station list and can be selected
Help station assignment calls assignArea assignArea receives area: 'help' and the active camp ID
Volunteer assigned to Help clicks Help on camp map User navigates to /volunteer/queues
Volunteer assigned elsewhere clicks Help on camp map Access denied toast is shown and no Help navigation occurs
Medicine dashboard renders without queues shortcut No button navigates to /volunteer/queues
Medicine dashboard action cards are clicked Cards navigate to their existing medicine routes

Validation commands run:

/home/vandanareddy/.bun/bin/bun node_modules/.bin/prettier --write src/components/AttendanceMarker.tsx src/components/CampMap.tsx src/pages/volunteer/MedicineDashboardPage.tsx tests/components/AttendanceMarker.exit-mode.test.tsx tests/components/CampMap.test.tsx tests/volunteers/MedicineDashboardPage.test.tsx
/home/vandanareddy/.bun/bin/bun node_modules/.bin/eslint src/components/AttendanceMarker.tsx src/components/CampMap.tsx src/pages/volunteer/MedicineDashboardPage.tsx tests/components/AttendanceMarker.exit-mode.test.tsx tests/components/CampMap.test.tsx tests/volunteers/MedicineDashboardPage.test.tsx

ESLint and Prettier passed for the changed files.

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 (no any unless justified)
  • ESLint and Prettier checks pass
    bun run lint

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • State management is appropriate (local vs global state)
  • No unnecessary re-renders (memoization used where needed)
  • Event handlers are properly cleaned up

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach
  • Responsive design considered (mobile-first if applicable)
  • Accessibility attributes included (aria-*, role, etc.)
  • Icons from lucide-react used consistently

API & Data Fetching

  • TanStack Query used for server state (if applicable)
  • Loading and error states handled
  • API types defined in src/types/api.ts
  • Axios interceptors handle auth tokens correctly
  • Use of Zod for data validations

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed
  • Errors are being toasted properly
  • Network failures handled appropriately

Documentation

  • README.md updated (if setup steps changed)
  • .env.example updated (if new env vars added)
  • CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

  • Screenshots were not added in this file.
  • Full project test coverage was not rerun while preparing this description.
  • Backend must recognize help as a valid station area for end-to-end assignment to work.

Additional Notes

The change intentionally reuses the existing workstation styling, assignment checks, and toast behavior to keep the new Help area consistent with the rest of the camp map.


MR Acceptance Checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Vandana reddy Balannagari

Merge request reports

Loading