fix: correct KYP cancel navigation and clear patient context

Overview

This MR fixes incorrect cancel navigation and stale patient context issues in the KYP flow. Previously, cancel actions did not properly reset the selected patient, leading to inconsistent UI behavior.

What does this MR do and why?

The KYP page was retaining bookNo in the URL or component state even after cancel actions. As a result:

• Patient information was still displayed after cancelling ❌
• Navigation behavior differed between registration and dashboard flows ❌

Solution:

• Implemented context-aware cancel navigation
• Removed bookNo from URL on cancel
• Ensured UI renders based only on route state
• Cleared stale patient state

This ensures consistent and predictable UX across all KYP flows.

Changes Made

• Updated cancel button logic in KYP form
• Added conditional rendering based on bookNo
• Cleared selected patient state when bookNo is absent
• Improved navigation using replace: true

Technical Details

Root Cause:

• UI relied on stale component state instead of URL params
• Cancel action did not clear bookNo from route

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• 🎨 UI/UX improvement

Related Issues / References

• closes #309 (closed)

Screenshots or Screen Recordings

Before	After
Cancel shows patient info incorrectly Screencast_from_2026-04-29_16-34-35	Cancel resets to clean KYP state Screencast_from_2026-04-29_16-31-15

How to Set Up and Validate Locally

1. Install dependencies: bun install

2. Start the app: bun dev

3. Test flows:

   • Register a patient → open KYP → click Cancel
     → should redirect to registration page
   • From dashboard → open KYP form → click Cancel
     → should return to pending KYP list without patient info

Testing Done

• Manual testing completed

Test Cases Covered:

Scenario	Expected Result	Status
Registration → Cancel	Redirects to registration page	✅
Dashboard → KYP → Cancel	Redirects to pending list	✅
Cancel clears patient state	No Patient Info shown	✅
No bookNo in URL	Only pending list visible	✅

Code Quality Checklist

Code Standards

• Code follows project conventions
• No console.log() or debugger statements
• No unused imports, variables, or functions
• No duplicate code
• i18n check passed
• TypeScript types properly defined
• ESLint passes

React Best Practices

• Components properly structured
• Hooks used correctly
• State management appropriate
• No unnecessary re-renders

Component Patterns

• Tailwind used correctly
• UI consistency maintained
• Accessibility considered

API & Data Fetching

• No API changes

Error Handling

• No new errors introduced

Documentation

• CHANGELOG.md updated

Known Limitations / Technical Debt

• Uses query params (bookNo); can be improved to route params (/kyp/:bookNo) in future.

Additional Notes

This change aligns UI rendering with route-driven state and prevents stale patient context issues.