Product engineeringFeaturesOrder splitFrontend
Modal Components
Component structure and responsibilities of the SplitOrderModalComponents folder.
👤 Nilesh Bhusari📅 Updated: Apr 29, 2026🏷️ feature🏷️ frontend🏷️ react🏷️ components
Directory Structure
The SplitOrderModalComponents folder encapsulates the distinct steps and reusable UI bits of the Order Split feature wizard in livehealth-frontend.
Path: src/components/reusable/OrderUpdates/BillTab/SplitOrderModalComponents/
Core Components
| Component | Responsibility |
|---|---|
SplitOrderStepper.tsx | Orchestrates the top-level multi-step progress bar (Selection, Data Transfer, Payment). |
SplitOrderSelection.tsx | Manages the initial step where tests and data are selected for splitting. |
SplitOrderTransfer.tsx | Handes the data transfer step. Organizes various transfer-related cards (Consents, Tests, Attachments) through the TransferSections/ components. |
SplitOrderPayment.tsx | Deals with resolving billing amounts and captures payment required for the new split source. |
SplitOrderPatientDetails.tsx | Displays read-only patient context (e.g., name, ID) consistently across stepper steps. |
SplitOrderFAQSidebar.tsx | Renders the context-aware sidebar with helpful split behavior summaries and FAQs. |
TransferSections
The TransferSections subdirectory (.../TransferSections/) further breaks down the specific blocks shown inside the SplitOrderTransfer step:
SplitOrderTestsGrid.tsx&splitOrderGridUtils.ts: Highly dynamic tabular view (ag-grid) of selected tests, showing dynamically calculated columns depending on lab/ICD settings.IcdsContent.tsx/InsuranceDetailsContent.tsx/LedgerEntriesContent.tsx: Specialized view components that format related attached data during the transfer.TransferModals.tsx&TransferUIComponents.tsx: Shared building blocks used throughout the data transfer section.