fix:Role-Based Mobile Navigation, UUID Copy Improvements & Book Number Support

Overview

This MR improves the mobile navigation experience, enhances UUID usability, and adds Book Number support to the Profile page. It ensures that users only see roles assigned to them in mobile navigation, removes redundant menu items, and improves the QR UUID interaction experience. :contentReference[oaicite:0]{index=0}

What does this MR do and why?

This MR addresses multiple UI and usability issues related to role visibility, profile information, and QR-based identification.

Motivation

• Mobile navigation displayed all possible roles even when the user was assigned only specific roles.
• A redundant “Open Menu” item existed in the bottom mobile navigation despite already having a top-right menu button.
• UUID values were difficult to copy manually.
• UUID layout broke on smaller screens due to wrapping.
• Profile page lacked Book Number information.

Approach Taken

• Dynamically filtered mobile navigation items using assigned user roles.
• Removed redundant “Open Menu” item from the mobile bottom navigation.
• Added copy-to-clipboard functionality for UUIDs.
• Improved responsive alignment using Tailwind flex utilities.
• Added Book Number display in the Profile page personal information section.

Trade-offs

• Long UUIDs are truncated on smaller screens for responsiveness.
• Copy functionality depends on browser clipboard API support.

Changes Made

Mobile Navigation

• Filtered role tabs dynamically based on assigned roles.
• Removed unassigned roles from mobile bottom navigation.
• Removed “Open Menu” item from bottom navigation.
• Preserved active role highlighting behavior.

UUID Copy Functionality

• Added copy button beside UUID values in:
  • Medical Camp Registration QR section
  • Profile Digital ID QR modal
• Added success toast/snackbar feedback.
• Improved UUID alignment and responsiveness.

Profile Enhancements

• Added Book Number field under Personal Information.
• Added fallback rendering for unavailable book numbers.

Technical Details

Root Cause

The mobile navigation rendered all predefined role items statically without checking assigned user roles.

Fix

Implemented role-based filtering before rendering navigation items.

Example:

const availableRoles = allRoles.filter(role =>
  userRoles.includes(role.key)
);

UUID Layout Improvements

Implemented responsive layout fixes:

<div className="flex items-center justify-between gap-2 overflow-hidden rounded-full px-3 py-2">

Clipboard Functionality

Implemented:

navigator.clipboard.writeText(uuid)

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 #358 (closed)

• Closes #RoleBasedMobileNavigation
• Closes #UUIDCopyButton
• Closes #ProfileBookNumber

Screenshots or Screen Recordings

Before	After
Mobile navigation showed all roles and Open Menu	Only assigned roles shown
UUID wrapped into multiple lines	UUID aligned correctly with copy button
No Book Number field	Book Number displayed in Profile

Viewport Size	Breakpoint	Before	After
Extra Small	<576px	Navigation cluttered	Clean responsive navigation
Small	≥576px	UUID wrapping issue	Proper UUID alignment
Medium	≥768px	Missing Book Number	Book Number visible

How to Set Up and Validate Locally

1. Pull this branch / checkout MR

2. Install dependencies:

bun install

3. Run development server:

bun dev

4. Navigate to:

• http://localhost:5173/?role=volunteer
• Profile page
• Medical Camp Registration page

5. Validate:

• Only assigned roles appear in mobile navigation.
• “Open Menu” item is removed.
• UUID copy button works correctly.
• Success toast appears after copy.
• UUID does not wrap on mobile.
• Book Number is displayed correctly.

Testing Done

• Manual testing completed
• Unit tests added/updated

Test Cases Covered:

Scenario	Expected Result	Status
User with single role	Only assigned role visible	✅
User with multiple roles	Only assigned roles visible	✅
Mobile bottom navigation	No Open Menu item	✅
UUID copy action	UUID copied successfully	✅
Mobile responsive UUID	No wrapping/alignment issue	✅
Missing Book Number	Fallback value displayed	✅

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
• TypeScript types are properly defined (no any unless justified)
• ESLint and Prettier checks pass

React Best Practices

• Components are properly split and single-responsibility
• Hooks follow rules (no conditional hooks, proper dependencies)
• State management is appropriate
• Responsive design considered

Component Patterns

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

Error Handling

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

Documentation

• README.md updated
• .env.example updated
• CHANGELOG.md updated

Known Limitations / Technical Debt

• UUID text is truncated on smaller devices for responsive layout consistency.
• Clipboard API behavior may vary on unsupported browsers.

Additional Notes

• Mobile navigation is now cleaner and role-aware.
• UI consistency improved across QR sections and profile pages.
• Future enhancement can extract UUID copy functionality into reusable component.

---

MR Acceptance Checklist

Evaluate this MR against the MR acceptance checklist to ensure quality, maintainability, responsiveness, and accessibility compliance.