Frontend

Frontend components, form state management, AgGrid definitions, and API integration for Microbiology.

👤 Mohammad Ashfaque Alam📅 Updated: May 22, 2026📁 Microbiology

Frontend

Core Repositories

The Microbiology frontend code resides primarily in livehealth-frontend. This handles the master data UI in Drug Master / Panel Master and the report builder / report entry UI in Profile & Report Management.

Master Data Components

Antibiotic Master

Source: livehealth-frontend/src/components/reusable/Antibiotic/container/index.tsx

The Antibiotic Master component provides a list view and a creation/edit modal. It interacts with the /reporting/antibiotics/ APIs.

  • Fetches and displays the list of antibiotics.
  • Provides standard table actions (Copy, Edit, Disable, Enable).
  • When disabling an antibiotic, it fetches related organisms from /reporting/antibiotics/\{id\}/organisms and displays them in a warning modal.

Organism Master & Mapping

Source: livehealth-frontend/src/components/reusable/Organism/container/index.tsx

The Organism Master provides the main CRUD operations for organisms.

  • Contains a MappingTab which acts as the host for the Microbiology Ranges and Molecular Mapping sub-tabs.
  • The Microbiology Ranges tab enables searching for an antibiotic and configuring the R, I, and S breakpoints for Disk Diffusion (Diameter) and MIC.
  • When disabling an organism, it fetches related antibiotics from /reporting/organisms/\{id\}/antibiotics.

RIS Mapping Helper (mappingListParsing)

Source: livehealth-frontend/src/components/reusable/Antibiotic/utils/helpers.ts

This helper translates the UI representation of RIS grids into the flat payload structure required by the backend API:

// Each antibiotic is transformed to:
{
  antibiotic_id: 42,
  antibiotic_name: "Ciprofloxacin",
  resistance_diameter_upper: 12,
  resistance_diameter_lower: 0,
  // ... (all 12 fields)
}

Report Configuration Components

These components are used when configuring a Microbiology test under Test List > Add New Parameter.

MicrobiologyForm

Source: livehealth-frontend/src/components/LabAdmin/AddEditReport/components/MicrobiologyForm/index.tsx

  • Mounts the main parameter settings.
  • Forces Render Pivot Table on PDF (should_pivot) to false if max_allowed_microorganism is set to 1.
  • Contains tabs for Configuration and Meta.

updateMicroEditables

Source: livehealth-frontend/src/components/LabAdmin/Utils/helpers.ts

When Method Type changes between Detection Window, MIC, and Interpretation Only, this helper manages visibility of the result grid columns (result_1, result_2, result_r, etc.). For Interpretation Only, it hides all columns except name and result_2.

Report Entry & AgGrid

At report entry, the Microbiology component builds a dynamic grid using ag-grid-react.

Rendering the Component (renderComponent)

Source: livehealth-frontend/src/components/reusable/Modals/Report/EditReportView/index.tsx

The standard EditReportView handles rendering based on component_type. For MICROBIOLOGY:

  • It renders a multi-select dropdown for adding organisms up to max_allowed_microorganism.
  • Below each selected organism, it renders an AgGrid of mapped antibiotics.

Maximum Organism Enforcement

Before adding a new organism, the system validates the current count:

if (Object.keys(microbiologyOrganisms).length >= max_allowed_microorganism) {
  message: `${t("Maximum")} ${max_allowed_microorganism} ${t("organism")} ${t("allowed")}`;
  // Prevents addition
}

Auto-interpretation (calculateValueForMicro)

Source: livehealth-frontend/src/components/reusable/Modals/Report/helpers.ts

When the user types a value in the result_1 cell, calculateValueForMicro runs:

  1. Determines if the method type is MIC or Detection Window.
  2. Checks the entered value against resistance_upper/_lower, intermediate_upper/_lower, and sensitive_upper/_lower.
  3. Populates result_2 with the corresponding interpretation text (e.g. Sensitive).

Reference Range Formatting

Source: livehealth-frontend/src/components/reusable/Modals/Report/helpers.ts

The read-only reference columns (result_r, result_i, result_s) are formatted as strings: {lower} - {upper}. If no range is configured, they display - - -.

On this page