Frontend

Component structure, state management, and interaction patterns for the Reflex Test Configuration UI in livehealth-frontend.

👤 Mohammad Yameen📅 Updated: May 6, 2026🏷️ frontend🏷️ reflex

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 layer

Route Configuration

Module

Admin

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: userReportManagement key 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 bill
    • 1 → 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.tsx is 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 list
  • getAllReflexTestAPI → Fetch configurations
  • createReflexTestAPI → Create configuration
  • updateReflexTestAPI → Update configuration
  • deleteReflexTestAPI → Delete configuration
  • enableDisableReflexTestAPI → 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

On this page