feat: added help area in medical camp map
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
helpto the station assignment list. - Fixed hook dependency arrays for translation usage.
- Added
- 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
Plusicon import.
- Removed the floating plus button that navigated to
- Updated tests:
tests/components/AttendanceMarker.exit-mode.test.tsxtests/components/CampMap.test.tsxtests/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
| 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
- Pull this branch / checkout MR.
- Install dependencies if needed:
bun install - Run the development server:
bun dev - 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.
- 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.
- Set the volunteer assigned area to another station, such as
- Validate the medicine dashboard:
- Navigate to
/volunteer/medicine-dashboard. - Confirm there is no floating plus shortcut.
- Confirm medicine action cards still navigate correctly.
- Navigate to
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 anyunless 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.exampleupdated (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
helpas 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.
