Frontend

Repo: livehealth-frontend Root path: src/components/reusable/OrderUpdates/

Component Tree

OrderUpdates (index.tsx)           ← Entry point; renders as a modal (page mode built-in but unused)
├── BillDetailsSidebar             ← Left panel: past bills list + search
│   └── RenderBillCard             ← Individual bill card row
│
└── OrderUpdate                    ← Right panel: bill editing area
    ├── DeveloperNames             ← Shows which staff members are viewing this bill
    ├── BillTab                    ← Main content orchestrator
    │   ├── [Lock Banner]          ← Alert bar for locked/cancelled/invoiced bills
    │   ├── BasicBillDetails       ← Bill date, sample date, source, ICD, tests
    │   ├── AdditionalDetails      ← Org, referral, comments, branch, agent fields
    │   │   └── PriceListModal     ← Price list comparison when org/referral changes
    │   ├── PaymentDetails         ← Bill summary + payment status cards (non-insurance)
    │   ├── InsurancePaymentDetails← Co-pay, deductible, insurance payable (insurance bills)
    │   ├── PaymentHistory         ← Past payments table + Add Payment button
    │   │   └── BillPaymentModalBody ← Modal for adding/editing a payment entry
    │   ├── BillUpdateFooter       ← All action buttons + modals
    │   │   ├── BillUpdateConfirmationModal ← Shows diff before confirming
    │   │   ├── CancelOrderModal   ← Confirms bill cancellation
    │   │   ├── AOEModal           ← AOE form (for new tests being added)
    │   │   ├── PatientConsentDetails ← Consent form (for new tests)
    │   │   └── UnsavedMessageModal   ← Prompts on unsaved insurance changes
    │   ├── ResetBillModal         ← Confirm reset of a cancelled bill
    │   └── UnlockBillModal        ← Confirm unlock of a locked bill
    │
    └── AOEModal                   ← Top-level AOE modal (for viewing existing AOE)

Entry Point — OrderUpdates

File: src/components/reusable/OrderUpdates/index.tsx Github Link

The OrderUpdates component is the public-facing entry point. It is React.memo-wrapped and accepts these props:

Rendering behaviour:

• Currently always renders in "modal" mode — all call sites use the default
• In "modal" mode: wraps everything in a ConfirmationModal
• In "page" mode (unused): would render a plain div without a modal wrapper
• If aoeForms exist in Redux state, renders AOEModal instead of the normal layout

Bill Details Sidebar — BillDetailsSidebar

File: src/components/reusable/OrderUpdates/BillDetailsSidebar.tsx Github Link

A virtualised list of all bills for the patient, with a search input at the top.

Key behaviours:

• Uses react-virtualized (VirtualizedList + CellMeasurerCache) for performance — renders only the visible rows even if the patient has hundreds of bills
• Bills are grouped using groupData() when billList is available
• The scrollToRow state auto-scrolls to the currently active bill whenever searchedBills changes
• The search input filters by labBillId (exact match or prefix)
• Keyboard: pressing Enter while a row is highlighted calls the onClick handler

State source: genericState.allBillsData[userDetailsId] from Redux

Main Panel — OrderUpdate

File: src/components/reusable/OrderUpdates/OrderUpdate.tsx Github Link

Renders the header, the BillTab, and the unsaved-insurance-changes guard.

Header shows:

• Patient full name, age, sex
• Emergency badge (if labReportList[0].mode is truthy)
• Bill Approval status badge (shown when the modal is opened from the bill-approval page)
• Close icon (hidden when claimSubmissionFlag is true)

Loading state: while orderUpdateLoader is true in Redux, a <Loading> spinner fills the panel.

Unsaved insurance guard: if the user closes the panel while editInsurance is true in the bill data, UnsavedMessageModal is shown. On "Continue", the insurance edits are discarded and the panel closes.

Bill Content — BillTab

File: src/components/reusable/OrderUpdates/BillTab/BillTab.tsx Github Link

The orchestrator for all bill editing sections. Reads genericState from Redux to determine which modals are open and what the current bill state is.

Lock/restriction banner: shown when any of these is true:

• billLocked === 1
• restrictBillUpdateForClaims(has_active_claim) returns true
• invoiceId is set
• Bill time restriction exceeded (!billUpdateRestriction(billTime))
• isCancel === 1

The banner shows a different action button per condition:

isCancel  → "Reset Bill"         → opens ResetBillModal
invoiceId → "View Invoice Details" → dispatches showInvoiceUpdateModal to Redux
billLocked → "Unlock Bill"       → opens UnlockBillModal

Scroll height: the body area dynamically adjusts its CSS scroll height class based on whether the lock banner is visible and whether DeveloperNames is shown.

Conditional payment sections:

• Non-insurance source → PaymentDetails + PaymentHistory
• Insurance source + insuranceListExists → InsurancePaymentDetails + PaymentHistory
• Insurance source but no insurance list → neither section is shown

Basic Bill Details — BasicBillDetails

File: src/components/reusable/OrderUpdates/BillTab/BasicBillDetails.tsx Github Link

Handles the top section of the bill form: dates, source, ICD codes, modifiers, existing tests, and add-test capability.

Notable logic:

• On mount (useEffect([])): syncs org source to Redux, initialises sampleDate from the latest lab report, and fetches MissingField states from the API
• Sample Date Tooltip: if not all tests have the same sample date, a note "Showing the latest sample date for this bill" is displayed below the picker
• Bill ICD — Missing Field integration: if the lab has configured Bill ICD as a missing field, a MissingFieldCustomCheckBox appears. Checking it auto-fills the ICD from the lab's missing-field configuration value
• Modifiers: rendered via the <Modifiers> component; state is kept locally in selectedModifiers and synced to billingData.billModifiers in Redux

Disabled state: the entire section is disabled when billLocked, has_active_claim, invoiceId, isCancel, or claimSubmissionFlag is true.

Additional Details — AdditionalDetails

File: src/components/reusable/OrderUpdates/BillTab/AdditionalDetails.tsx Github Link

Handles organisation, referral, comments, branch, agent, order number, and other metadata fields.

Organisation change flow:

1. User selects a new org from the dropdown
2. orgChangeHandler fires — checks if the bill is completed with advance and the new org has a different payment type (blocks walk-in → non-walk-in changes with an error)
3. Calls checkOrganisationPriceList() — if the org has a price list, shows Update Price List link
4. Calls checkIsOptionalId() — if the lab restricts org-wise duplicate MRNs, checks for a conflict

Referral doctor change flow:

1. Calls checkReferralPriceList() on doctor selection
2. If the doctor has a revenue price list, shows Update Doctor Revenue link
3. If the doctor has a standard price list, shows Update Price List link
4. Clicking either opens PriceListModal showing a comparison of existing vs. new prices

Bill Comments:

• Stored as an array of strings (split by \n), rendered as separate <InputBox> fields
• If showTimestamps is enabled, timestamps are interspersed between comment entries and rendered as read-only <span> elements (not editable inputs)
• Supports Instant Comments dropdown — pre-configured comment templates that append to the comment array

Payment Details — PaymentDetails

File: src/components/reusable/OrderUpdates/BillTab/PaymentDetails.tsx Github Link

Calculates and displays the bill summary (test total, concession, additional amount, VAT, TDS) and payment status (payable, paid, due).

Amount calculation (getPaymentDetails): runs whenever any of these change in Redux:

• billTestList, paidAmount, existingTests, additionalAmount, testConcession, tdsConcession, paymentList, preSetAmountFlag, newTestTotal, billingData.orgId

Concession cap: the handleConcessionChange function enforces allowedDiscountOnBill — the maximum concession percentage a lab user is allowed to give. Fetched from getLabUserAPI() on mount.

VAT handling: supports both org-level VAT disable flag (disable_tax_for_organisation) and manually entered VAT amounts.

Output to Redux: dispatches finalPayableAmount, advanceAmount, totalConcession, dueAmount, vatAmount, vatPercent, tdsAmount on every recalculation — these values are read by BillUpdateFooter during submission.

Insurance Payment Details — InsurancePaymentDetails

File: src/components/reusable/OrderUpdates/BillTab/InsurancePaymentDetails.tsx Github Link

Shown instead of PaymentDetails for insurance-sourced bills with insurance data.

Calculates and displays:

• Test Amount — sum of testAmount across all tests
• Co-pay Amount — co_pay_amount (existing tests) + patientAmount (new tests)
• Deductible Amount — deductible_amount across all tests
• Patient Payable Amount — co-pay + deductible
• Insurance Payable Amount — test total − patient payable

Payment History — PaymentHistory

File: src/components/reusable/OrderUpdates/BillTab/PaymentHistory.tsx Github Link

Renders a table of past payments from billApiData.paymentList. Refund-type rows are visually highlighted with an alternate row background (row-bg-color).

The Add Payment button opens BillPaymentModalBody in a modal — this is the same payment entry form used during billing, reused here with orderUpdateFlag={true}.

Footer — BillUpdateFooter

File: src/components/reusable/OrderUpdates/BillTab/BillUpdateFooter.tsx Github Link

The most complex component in the module. Manages all submission paths and secondary actions.

Submission guard (handleBillUpdate):

1. Checks bill time restriction — shows restriction alert if exceeded
2. Checks if concession changed but comments are empty — blocks submission if so
3. Checks ICD code requirements (bill-level and source-based test-level)
4. If insurance is being edited — shows unsaved-changes modal first
5. If all checks pass — opens BillUpdateConfirmationModal

footerActionMapper: a lookup object mapping footer action strings to their handlers, used by the unsaved-insurance guard to resume the correct action after discarding insurance edits:

{
  confirmAndUpdate: () => setBillUpdateConfirmation(true),
  cancelBill:       () => setCancelBill(true),
  updateAndAddToBill: () => addTest(),
  addToNewBill:     () => addNewTestModal(1),
  consentForm:      () => setShowPatientConsentModal(true),
  showAOE:          () => setShowAOEModal(true),
}

Bill Approval actions (shown only when the modal is opened from the /bill-approval URL — detected via window.location.href):

• Hold — sets bill_approval_status to "on-hold"
• Reject — sets bill_approval_status to "rejected"
• Approve / Resolve & Approve — sets bill_approval_status to "approved"

Redux State Used

All bill data is stored in GENERIC redux slice under billingData[userId][labBillId]. Key shape:

billingData: {
  [userId]: {
    [labBillId]: {
      billingData: { ... },      // Core bill fields
      paymentList: [ ... ],      // Payment records
      labReportList: [ ... ],    // Lab report relations
      billICD: { bill: {}, tests: {} }, // ICD codes
      billModifiers: { bill: {}, tests: {} }, // Modifiers
      bill_insurances: [ ... ],  // Insurance list
      insuranceListExists: boolean,
      editInsurance: boolean,
    }
  }
}

Additional keys used across components: