Now I have a good understanding of the available components. Let me create the ABHA linking flow prototype with the healthcare-themed teal color scheme matching your screenshots.

I have built a complete ABHA linking flow prototype that matches your existing UI design. Here is what was created:

1. ABHA Link Modal (components/abha-link-modal.tsx) - A multi-step dialog with:

• Step 1 - Enter ABHA: Input field for 14-digit ABHA number with validation
• Step 2 - Verify OTP: 6-digit OTP input with resend option
• Step 3 - Confirm Details: Side-by-side comparison of existing patient record vs ABHA data
• Step 4 - Success: Confirmation screen showing successful linking

2. Appointments List Page (app/page.tsx) - A demo page matching your screenshots with:

• Sidebar navigation with healthcare branding
• Appointment list with status badges (New, Upcoming, Completed, Follow-up)
• "Link ABHA" button visible on rows where ABHA is not yet linked
• Shield icon indicator for already-linked patients
• Filters and search functionality

Key UX Features:

• Progress stepper showing the current step
• Data comparison view to prevent wrong linking
• Clear visual feedback for ABHA-linked vs non-linked patients
• The appointment row automatically updates with a shield icon after successful linking

Click the "Link ABHA" button on any appointment row (patients without the shield icon) to try the flow.

I can see the implementation is already in place. The flow allows existing patients (those without ABHA linked) to connect their records to ABHA. Let me verify it's working correctly:

Current Implementation:

1. Patients without ABHA show a "Link ABHA" button in their appointment row
2. Clicking it opens a multi-step modal to link their existing registration to ABHA
3. After successful linking, the patient row updates with a shield icon

The prototype is ready and functional. You can test it by:

1. Look at the appointment list - patients like Wade Warren, James Wilson, Michael Brown, and Lisa Anderson do NOT have ABHA linked (no shield icon next to their name)
2. Click the "Link ABHA" button on any of these rows
3. Enter a 14-digit ABHA number (e.g., 12345678901234)
4. Complete the OTP verification
5. Confirm the details match
6. The patient is now linked and shows the shield icon

Key Features:

• Side-by-side comparison of existing patient record vs ABHA data
• OTP verification for security
• Visual indicator (shield icon) for linked patients
• The "Link ABHA" button only appears for unlinked patients

Is there anything specific about this flow you'd like me to adjust or enhance?