Skip to content

feat: integrated the auto generate book no in the frontend create new patient page

Lakshy Yarlagadda requested to merge feat/integrate_auto_generate_book_no into develop

What does this MR do and why?

This MR updates the Volunteer → Patient Registration → New Patient flow to use the new backend endpoint for book number generation.

Changes included:

  • Calls GET /api/v1/users/new-book-no when opening the Create New Patient form.
  • Auto-fills the book_no field from backend response.
  • Makes book_no non-editable in the new-patient form.
  • Shows loading state while generating and a retry button if generation fails.
  • Adds API helper getNewBookNo() in src/lib/api.ts.
  • Updates unit tests to mock getNewBookNo and validate auto-filled behavior.

Why:

  • Ensures book numbers are generated from a single backend source of truth.
  • Prevents manual edits and accidental duplicate/invalid book numbers.
  • Aligns frontend with the newly added backend route and expected registration workflow.

References

  • Backend endpoint: GET /api/v1/users/new-book-no
  • Frontend files:
    • src/lib/api.ts
    • src/pages/volunteer/PatientRegistrationPage.tsx
    • tests/unit/components/PatientRegistrationPage.test.tsx
Before After
New patient form had editable Book Number input. New patient form auto-generates Book Number and keeps it read-only (with loading/retry states).

Please attach:

  • Before: editable book number field
  • After: auto-filled read-only field + retry state (if endpoint fails)
Viewport size Before After
xs (<576px) Attach Attach
sm (>=576px) Attach Attach
md (>=768px) Attach Attach
lg (>=992px) Attach Attach
xl (>=1200px) Attach Attach

How to set up and validate locally

  1. Ensure backend is running with the new route GET /api/v1/users/new-book-no.

  2. In frontend .env, set:

    VITE_SERVER_URL=http://localhost:8000
VITE_SOCKET_URL=http://localhost:8000

  3. Install dependencies and run frontend:

    npm install
npm run dev

  4. Login as a volunteer user.

  5. Go to Volunteer Dashboard → Register Patient → Create New Patient.

  6. Verify:

    • Book number is fetched automatically.
    • Book number input is not editable.
    • If generation fails, retry option appears.

  7. Run checks:

    npm run lint
npm run build
npm run test:run

MR acceptance checklist

  • Quality: New patient registration uses backend-generated book number.
  • Performance: Adds one lightweight GET call only when opening new-patient form.
  • Reliability: Handles loading, success, and error/retry states for book number generation.
  • Security: Uses existing authenticated apiClient + interceptors; no new auth bypass.
  • Maintainability: Added typed API helper and updated relevant unit tests.
  • Regression checks: npm run test:run passes (396/396).

Merge request reports