Skip to content

feat: displaying pending know your patient

Rajuldev Vandana requested to merge feat/pending-kyp into develop

Overview

Added a Pending Know Your Patient (KYP) section on the KYP dashboard to help volunteers quickly identify and complete missing or incomplete patient KYP forms.

What does this MR do and why?

Previously, there was no clear way to identify patients with pending or incomplete KYP forms. Volunteers had to manually search, which was inefficient.

This MR introduces a "Pending KYP" section that:

  • Lists patients in the current camp who have not completed KYP
  • Improves workflow by enabling direct access to incomplete forms
  • Enhances UX by switching to a full-page form view instead of inline rendering

The approach ensures better visibility, faster processing, and cleaner UI interaction without affecting existing functionality.

Changes Made

  • Added "Pending KYP" section below the "Find Patient" search box
  • Displayed patient cards with:
    • Book number
    • Name
    • Mobile number
    • Status badge (Never filled / Incomplete)
    • "Complete KYP" button
  • Updated behavior:
    • Clicking "Complete KYP" switches to full-page form view
    • Dashboard is hidden during form interaction
  • After submission:
    • Redirects back to dashboard
    • Removes patient from pending list if completed
  • Auto-hide Pending KYP section when no patients remain
  • Fixed i18n translation key for heading

Technical Details

  • Filters only patients registered in the current camp
  • Conditions for appearing in pending list:
    • Never filled KYP (across any camp), OR
    • Contains NA values in any KYP field
  • Implemented view switching instead of route-based navigation
  • No modifications made to existing features

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

Screenshots or Screen Recordings

Before After
Only "Find Patient" search box visible "Pending KYP" section displayed below search
KYP form rendered below dashboard Full view switch to KYP form
No visibility of pending patients Clear list of pending patients with status

Screencast_from_2026-04-22_00-08-25

How to Set Up and Validate Locally

  1. Pull this branch
  2. Install dependencies: 
    bun install
  3. Run development server: 
    bun dev
  4. Navigate to: 
    http://localhost:5173/volunteer/kyp
  5. Test scenarios:
    • Register a patient without KYP → appears in Pending KYP
    • Click Complete KYP → full form view opens
    • Submit form → redirects to dashboard
    • Completed patient disappears from list
    • No pending patients → section hidden

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Patient registered in current camp with no KYP Appears with "Never filled" badge ✅
Patient with incomplete KYP (NA fields) Appears with "Incomplete" badge ✅
Click "Complete KYP" Full view form, dashboard hidden ✅
Submit completed KYP form Redirect + removed from list ✅
No pending patients Section hidden ✅
Patient from previous camp only Does NOT appear ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log/debugger statements
  • No unused code
  • Reusable components used
  • i18n compliance ensured
  • Proper TypeScript usage
  • ESLint & Prettier pass

React Best Practices

  • Proper component separation
  • Hooks used correctly
  • Appropriate state management
  • Avoided unnecessary re-renders
  • Clean event handling

Component Patterns

  • shadcn/ui used correctly
  • Tailwind utility-based styling
  • Responsive design handled
  • Accessibility considered
  • lucide-react icons used

API & Data Fetching

  • TanStack Query used where needed
  • Loading/error states handled
  • API types defined
  • Axios interceptors configured
  • Zod validation used

Error Handling

  • Graceful error handling
  • User-friendly messages
  • Toast notifications used
  • Network failures handled

Documentation

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

Known Limitations / Technical Debt

None at this time.

Additional Notes

  • No existing functionality was altered
  • Feature is fully isolated to KYP dashboard improvements
  • Focused on improving volunteer workflow and UX

MR Acceptance Checklist

Evaluate this MR against the MR acceptance checklist: https://docs.gitlab.com/development/code_review/#acceptance-checklist

Edited by Rajuldev Vandana

Merge request reports