Frontend
Component structure, state management, and interaction patterns for the Reflex Test Configuration UI in livehealth-frontend.
Frontend
Repo: livehealth-frontend
Root path: src/components/LabAdmin/ReflexTestingConfiguration/Container/
Folder Structure
ReflexTestingConfiguration/
├── Components/
│ ├── ActionDropdown.tsx ← Handles row-level actions like Edit/Delete
│ ├── DeleteConsentModal.tsx ← Confirms deletion before API call
│ ├── FaqSection.tsx ← Displays contextual help inside modal
│ ├── ReflexDemoModal.tsx ← Provides demo/tutorial for users
│ ├── ReflexTestConfigurationModal.tsx ← Controls modal lifecycle (open/close/save)
│ └── ReflexTestConfigurationModalBody.tsx ← Core form logic and rule builder
│
├── Container/
│ └── index.tsx ← Main entry; orchestrates data, grid, and modals
│
├── styles.module.scss ← Scoped styling for the module
│
└── utils/
├── constants.ts ← Static configs, enums, dropdown mappings
├── helper.ts ← Core business logic & validations
├── interface.ts ← Type definitions (TS interfaces)
└── services.ts ← API integration layerRoute Configuration
Module
Admin
Menu Path
Profile & Report Management → Reflex Test Configuration
Route
/admin/reflex-testing-configuration
Component
ReflexTestConfigurations
Note: This component is lazy-loaded. It is fetched from the server only when the user explicitly navigates to this route, helping reduce initial load time and improve overall performance.
Access Control
- Required Permission: Report Management
- Access Key:
userReportManagementkey in session - Access Level: Users must have the above permission enabled to access this route
Redux State Structure
The Reflex Test Configuration module uses a centralized Redux state to manage UI behavior, configuration data, and rule definitions.
export interface ReflexTestConfigurationState {
testIdList: number[];
testList: TestOption[];
isEditMode: boolean;
isReflexModalDataLoading: boolean;
reflexTestConfigs: ReflexTestConfig[];
selectedTest: TestOption | null;
reflexTestsOptions: TestOption[];
reflexTestConfigDataToEdit: ReflexTestConfig | JsonObject;
selectedTriggerParameter: TriggerParameterOption | null;
triggerParameterOptions: TriggerParameterOption[];
isReflexTestConfigsLoading: boolean;
rangeParameterRules: RangeParameterRule[];
listOrDescriptiveParameterRules: ListAndDescriptiveParameterRule[];
createNewBill: 0 | 1;
manualReflex: boolean;
interfacingReflex: boolean;
}State Breakdown
Test Data
-
testIdList
- Stores IDs of available tests
- Used for quick lookup and filtering
-
testList
- Contains full test options for dropdown selection
-
reflexTestsOptions
- List of tests that can be selected as reflex tests
Configuration Data
-
reflexTestConfigs
- Stores all existing reflex configurations fetched from backend
- Used to populate the grid
-
reflexTestConfigDataToEdit
- Holds selected configuration data when editing
- Used to pre-fill the modal
Selection State
-
selectedTest
- Currently selected primary test
-
selectedTriggerParameter
- Parameter chosen for rule evaluation
-
triggerParameterOptions
- Available parameters for the selected test
Rule State
-
rangeParameterRules
- Stores rules for numeric (range-based) parameters
-
listOrDescriptiveParameterRules
- Stores rules for list or text-based parameters
UI State
-
isEditMode
- Determines whether the modal is in create or edit mode
-
isReflexModalDataLoading
- Controls loader for modal data (e.g., during edit fetch)
-
isReflexTestConfigsLoading
- Controls loader for main grid data
Billing & Execution
-
createNewBill (0 | 1)
- Controls billing behavior
0→ Same bill1→ New bill
-
manualReflex
- Enables manual triggering of reflex tests
-
interfacingReflex
- Enables automatic triggering via interfacing
Entry Flow
1. Initial Load
When the module loads:
index.tsxis mounted- Calls
fetchReflexTestInitialData()
This internally:
- Fetches all available tests
- Fetches existing reflex configurations
- Normalizes response into UI-friendly structure
Result: Grid is populated with existing configurations
2. Main Screen
- Data is rendered using AG Grid
- Each row represents one reflex configuration
Row Structure
- Test Name → Parent test
- Trigger Parameter → Parameter used for evaluation
- Trigger Type → Condition type (Range/List/etc.)
- Reflex Tests → Tests to be triggered
- Status Toggle → Enable/Disable rule
- Actions → Edit / Delete
3. Available Actions
Add Reflex Test
- Opens modal in create mode
- Initializes empty state
Edit
- Calls
prepareReflexTestConfigDataForEdit - Converts API data → UI structure
- Opens modal with pre-filled values
Delete
- Opens
DeleteConsentModal - Calls delete API on confirmation
Enable / Disable
- Uses optimistic UI update
- Immediately updates UI
- Syncs with backend via API
Configuration Flow
1. Select Test
- User selects a test
- System triggers API call to fetch parameters
Internal Behavior
- Filters only valid parameters
- Maps parameter type (Range/List/Descriptive)
2. Select Trigger Parameter
The selected parameter determines:
- UI rendering
- Available rule types
- Validation logic
Rule Engine
The core of this module is the dynamic rule engine, which adapts based on parameter type.
Range Parameters
Used for numeric data (e.g., WBC, Hemoglobin)
Supported Rules
- Critical Range
- Out of Normal Range
- Custom Range
Internal Handling
- Values are compared numerically
- Range boundaries are validated before save
Validations
- Only one Critical / Normal rule allowed per parameter
- Multiple Custom ranges allowed
- Custom ranges must:
- Not overlap
- Have valid min/max bounds
List / Descriptive Parameters
Used for categorical or text-based values.
Supported Conditions
- Contains
- Does Not Contain
- Is Not
- Exact Matches
- Contains Multiple Values
Contains Multiple Values (Advanced)
This enables complex logical conditions.
Structure
Each condition:
- Type → Contains / Does Not Contain
- Value → User-defined input
Multiple conditions can be combined.
Evaluation Logic
AND Condition
All conditions must evaluate to true:
Value contains "A"
AND does not contain "B"
AND does not contain "C"OR Condition
Any one condition must be true:
Value contains "A"
OR does not contain "B"Internal Representation
- Stored as structured JSON
- Parsed and evaluated during execution
Billing Configuration
Defines how reflex tests are added financially:
-
Same Bill
→ Reflex tests are appended to the existing bill -
Different Bill
→ A new bill is created for reflex tests
Reflex Testing Methods
-
Via Interfacing
- Triggered automatically from machine-generated results
- Requires interfacing integration
-
Manual Reflex Testing
- Triggered during report entry
- User-driven execution
API Layer
All API interactions are abstracted inside services.ts
Responsibilities
- Network calls
- Request/response handling
- Error handling
APIs
getOnlyTestListAPI→ Fetch test listgetAllReflexTestAPI→ Fetch configurationscreateReflexTestAPI→ Create configurationupdateReflexTestAPI→ Update configurationdeleteReflexTestAPI→ Delete configurationenableDisableReflexTestAPI→ Toggle status
Payload Handling
Handled via prepareSavePayload()
Responsibilities
- Convert UI state → API payload
- Normalize rule structures
- Handle edge cases
Covers
- Range conditions
- List/descriptive conditions
- Complex AND/OR logic
Validations
Implemented in helper.ts
Key Checks
- Duplicate rule prevention
- Conflicting condition detection
- Invalid range validation
- Duplicate reflex test prevention