fix: add Book Number and UUID Copy Functionality

Issue Summary

Add Book Number to the Profile page and introduce copy-to-clipboard functionality for UUIDs in QR sections. Also fix UUID alignment and responsiveness issues.

Problem Statement

Currently:

The Profile page does not display the user's Book Number.
UUIDs shown in QR sections cannot be copied easily.
UUID text and copy icon alignment breaks on smaller widths and wraps into multiple lines.

Impact:

Users cannot quickly access or share their Book Number.
Users must manually select UUID text for copying.
UI becomes inconsistent and visually broken on responsive layouts.

Affected Areas:

Profile Page
Medical Camp Registration QR Section
Digital ID QR Modal

Proposed Solution

Book Number

Add a new “Book Number” card inside the Personal Information section.
Fetch the value dynamically from profile data.
Show fallback value if unavailable.

UUID Copy Button

Add a copy icon/button beside UUID values.
Use navigator.clipboard.writeText() for copy functionality.
Show toast/snackbar feedback after successful copy.

UI Alignment Fix

Keep UUID and copy icon in a single row.
Prevent text wrapping using Tailwind utilities.
Ensure responsive layout behavior.

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Display Book Number

Given the user opens the Profile page
  And the user has a valid book number
 When the profile data loads
 Then the Book Number card should be visible
  And it should match the existing UI design

Scenario 2: Book Number Fallback

Given the user has no assigned book number
 When the Profile page loads
 Then the UI should display "Not Assigned"

Scenario 3: Copy UUID Successfully

Given the UUID is displayed in the QR section
 When the user clicks the copy button
 Then the UUID should be copied to clipboard
  And a success message should appear

Scenario 4: UUID Layout Responsiveness

Given the UUID and copy button are visible
 When the viewport width changes
 Then the UUID should remain on a single line
  And the copy icon should remain aligned

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Display Book Number	User profile loaded	1. Open profile page 2. Check personal information section	Book Number card is visible	High
TC-002	Book Number fallback	No book number assigned	1. Open profile page	"Not Assigned" displayed	Medium
TC-003	Copy UUID from registration page	UUID available	1. Click copy icon	UUID copied successfully	High
TC-004	Copy UUID from profile modal	UUID modal open	1. Click copy icon	UUID copied successfully	High
TC-005	Responsive UUID layout	Small viewport	1. Resize screen	UUID stays single-line	Medium

Unit Test Requirements

Components/Functions to Test:

Module/Component	Function/Hook	Test Cases to Cover
`Profile.tsx`	Profile render	TC-001, TC-002
`QRCodeCard.tsx`	handleCopy	TC-003, TC-004
`DigitalIDModal.tsx`	UUID layout render	TC-005

Test Assertions Required:

Renders correctly with initial state
Handles user interaction correctly
Handles success response
Updates UI state appropriately
Responsive layout verification

Implementation Details

Files to Change

File Path	Action	Purpose
`src/pages/Profile.tsx`	Modify	Add Book Number card
`src/components/QRCodeCard.tsx`	Modify	Add UUID copy button
`src/components/DigitalIDModal.tsx`	Modify	Add UUID copy button
`src/components/ui/...`	Modify	Alignment/styling fixes
`src/__tests__/...`	Create/Modify	Unit tests

Technical Considerations

Use navigator.clipboard.writeText() for copy functionality.
Use reusable copy handler utility if needed.
Avoid fixed widths that cause wrapping.
Maintain dark theme consistency.

UI/UX Requirements

UUID and copy button must stay aligned horizontally.
Use:
- flex
- items-center
- whitespace-nowrap
- truncate
- flex-shrink-0
Responsive across desktop/tablet/mobile.
Show success toast/snackbar after copy.

Suggested Layout

<div className="flex items-center justify-between gap-2 overflow-hidden rounded-full px-3 py-2">
  <span className="truncate whitespace-nowrap text-sm font-medium">
    {userId}
  </span>

  <button
    className="flex-shrink-0"
    onClick={() => handleCopy(userId)}
  >
    <Copy className="h-4 w-4" />
  </button>
</div>

Testing Strategy

Manual Testing

Test Environment:

Browser: Chrome / Firefox
Viewport: Desktop + Mobile
User Role: Volunteer / Patient

Manual Test Steps:

Open Profile page
Verify Book Number card visibility
Open QR modal
Click copy icon
Verify toast message
Resize viewport and verify alignment

Automated Testing

Unit Tests:

Component render tests
User interaction tests
Error handling tests

Integration Tests:

Multi-component interaction tests

Test Data Requirements

const mockProfileData = {
  bookNumber: "BK-1024",
  uuid: "124a2b6f-89df-4d91-8274-018acc7c5cb3",
};

Definition of Done

Acceptance criteria met
All test cases passing
Unit tests written and passing
Manual testing completed
Code reviewed and approved
Responsive on all required viewport sizes
Accessibility checks passed
No console errors or warnings
ESLint/Prettier checks pass