Frontend

What Frontend Owns

Frontend Perspective

• The sidebar exposes Drug Master / Panel Master as the entry point.
• Drug Master shows the drug catalog with tabs for all, system default, custom, and disabled drugs.
• Panel Master lets users search and add drugs to a panel, then optionally enable screening or prescription reflex behavior.
• Brand Master lets users search and add drugs to a brand-based collection.
• List pages support download, bulk actions, filtering, row actions, and system-default requests.
• Test List lets users create a report/test with test type Toxicology.
• Report Parameters lets users add toxicology components such as Screening, Confirmation, Prescription, Summary, History, Image, and Clinical Notes.
• Screening configuration controls report-entry fields, billing availability, default drugs/panels/brands, and display ordering metadata.
• Confirmation uses the same configuration pattern as Screening and adds a Reflex tab.
• Prescription captures prescribed drugs and can expose selected drugs/panels/brands during billing.
• Summary links to Screening or Confirmation and summarizes the selected component's findings.
• History links to a result component and summarizes prior reports using report count, display type, summary classes, date format, date filter, and ordering.
• Image configures an upload grid using max rows and max columns.
• Clinical Notes links to a result component and controls note fields and drug visibility.

Core Frontend State Objects

Visibility Rules

The feature appears when the user has access to the Drug Master / Panel Master sidebar section. Exact permission keys are TBD.

The panel and brand modals require drug master data because both flows depend on searching and adding drugs.

Toxicology report components appear from the Add New Parameter menu after the test/report is configured with test type Toxicology.

Runtime UI Behaviors

• When a user adds a drug to a panel or brand, it appears in the selected-drug table.
• When a user removes a drug, it is removed from the selected collection before save.
• When a user updates an existing panel or brand, previously mapped drugs are loaded into the modal.
• When validation fails, the modal should keep entered data and show actionable validation feedback.
• When save succeeds, the modal closes and the list reflects the updated record.
• When the user selects test type Toxicology, the Report Parameters tab can add toxicology components.
• When the user adds Screening, the component opens with Configuration, Meta, and Defaults tabs.
• When Available during Billing is checked, the UI allows specific drugs, panels, or brands to be selected for billing availability.
• When defaults are added, those drugs or panels are inserted by default once the toxicology test is billed.
• When Confirmation is configured, the Reflex tab can decide whether confirmation drugs are added automatically or only when requested during billing.
• When Prescription is configured, selected drugs/panels/brands represent prescribed medications that should be tracked for the patient.
• When Summary is configured, it must link to Screening or Confirmation before it can summarize findings.
• When History is configured, it links to a component and generates historical summary output for the selected number of previous reports.
• When Image is configured, the row/column counts generate a preview grid and upload slots.
• When Clinical Notes is configured, the user chooses whether notes apply to all drugs or selected drugs.

Important Toxicology Snippets (Frontend)

Report entry component renderer

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

renderComponent(...) is the report-entry switchboard. It reads component_type from each report format row and renders the matching toxicology component.

Important behavior:

• SCREENING and CONFIRMATION render collapsible drug grids.
• Both use SearchDrugs to add drugs into the component.
• Both pass component meta into prepareColumnDef(...), so configured labels, hidden fields, editable fields, grouping, sorting, and ordering affect the grid.
• CONFIRMATION passes component_type to prepareColumnDef(...), allowing confirmation-specific column behavior.
• PRESCRIPTION also uses SearchDrugs, but if the selected drug has metabolites it calls findDrugsMetabolitesAndFill(...) before adding the drug.
• PRESCRIPTION uses translation.PRESCRIPTION_COLUMNS; if enable_prn_description is false, only the first prescription column is rendered.
• IMAGE renders ImageComponent and passes image-grid meta plus labReportId for upload keying.
• SUMMARY renders a Calculate button, a summary-info tooltip, and a summary grid using prepareSummaryComponentColumnDef(...).
• HISTORY supports both chart and table output based on meta.sub_type.
• HISTORY warns when the date grouping saved in report values differs from the current configured date_filter.

Minimal control flow:

const { component_type, meta, testName = "" } = format;
const newMeta = JSON.parse(meta || "{}");

switch (component_type?.toUpperCase()) {
  case "SCREENING":
  case "CONFIRMATION":
    // SearchDrugs + GridComponent using prepareColumnDef(...)
    break;
  case "PRESCRIPTION":
    // SearchDrugs + metabolite expansion + prescription columns
    break;
  case "IMAGE":
    // ImageComponent using grid metadata
    break;
  case "SUMMARY":
    // Calculate + SummaryInfoComponent + summary grid
    break;
  case "HISTORY":
    // Calculate History + ChartComponent or GridComponent
    break;
}

Summary and clinical-note columns

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

prepareSummaryComponentColumnDef(...) builds the grid columns from component meta.columns. It also applies:

• group_by,
• sort_by,
• order_by,
• red highlighting when result_1 has highlightFlag.

For Clinical Notes, the helper keeps only name and result_2, so the clinical-note grid is intentionally narrower than the full toxicology drug grid.

Metabolite expansion

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

findDrugsMetabolitesAndFill(...) expands selected drugs before they are added to Prescription. It:

• keeps selected brand/panel records separately,
• collects metabolite ids from selected drugs,
• builds a unique drug-id set from selected drugs plus metabolites,
• preserves brand name context when available.

This is why Prescription can add a selected drug and still carry its metabolite context into report entry.

Device mapping grid

Source: livehealth-frontend/src/components/Operations/DeviceManagement/components/ToxicologyDrugGrid.tsx

ToxicologyDrugGrid is separate from report entry. It is used in device management to map toxicology device keys to drugs.

Important behavior:

• fetches mapped device drugs with deviceDrugApi(deviceId),
• fetches unmapped device keys for the last 30 days with getUnmappedResultsApi(...),
• stores mapped drugs in MODEL.deviceDrug,
• lets the user map a device key to a drug through CreateSelectField,
• shows validation state as Validated or Not Validated,
• supports deleting a device-drug mapping through DeleteModal.

Drug Master container

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

DrugMaster owns the Drug Master list screen shown under Drug Master / Panel Master.

Important behavior:

• initial load calls getDrugListApi("/reporting/drugs/?is_panel=0&is_disabled=0"),
• stores active drugs in MODEL.allDrugs,
• Disabled Drugs tab lazily calls getDrugListApi("/reporting/drugs/?is_panel=0&is_disabled=1"),
• tabs split the same list into All Drugs, System Defaults, Custom Drug, and Disabled Drugs,
• Add Drug opens CreateDrug,
• row click/edit loads related drugs through fetchRelatedDrugs(...),
• copy creates a new drug by cloning the selected row and prefixing the name with Copy of,
• enable calls /reporting/drugs/{id}/enable/,
• disable first calls /reporting/drugs/{id}/related/brands-panels/?is_disabled=0 to warn about linked panels/brands, then calls /reporting/drugs/{id}/disable/,
• Enable Custom Drug setup copies system defaults into custom setup through enableCustomDrugSetup(...),
• bulk upload/action state is handled through BulkModal.

Panel Master container

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

PanelMaster owns the Panel Master list screen. Panels are backed by the same drug API/table as drugs, but are loaded and saved with is_panel=1.

Important behavior:

• initial load calls getDrugListApi("/reporting/drugs/?is_panel=1&is_disabled=0"),
• stores active panels in MODEL.allPanel,
• Disabled Panels tab lazily calls getDrugListApi("/reporting/drugs/?is_panel=1&is_disabled=1"),
• tabs split the same list into All Panels, System Defaults, Custom Panels, and Disabled Panels,
• Add Panel opens CreatePanel,
• row click/edit opens the update flow for the selected panel,
• copy creates a new panel by cloning the selected row and prefixing the name with Copy of,
• create/copy/update uses the drug create/update helpers because a panel is represented as a Drug record with is_panel=1,
• enable calls /reporting/drugs/{id}/enable/,
• disable calls /reporting/drugs/{id}/disable/.

Brand Master container

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

BrandMaster owns the Brand Master list screen. Brands are separate records that maintain drug mappings through the brand-to-drug relationship.

Important behavior:

• initial load calls getDrugListApi("/reporting/brands/?is_disabled=0"),
• stores active brands in MODEL.allBrands,
• Disabled Brands tab lazily calls getDrugListApi("/reporting/brands/?is_disabled=1"),
• tabs split the same list into All Brands, System Defaults, Custom Brands, and Disabled Brands,
• Add Brand opens CreateBrand,
• row click/edit opens the update flow for the selected brand,
• copy creates a new brand by cloning the selected row and prefixing the name with Copy of,
• create/copy/update uses brand helpers such as createBrand(...) and addAndUpdate(...),
• enable calls /reporting/brands/{id}/enable/,
• disable calls /reporting/brands/{id}/disable/,
• unmount clears MODEL.drugsList so stale selected-drug options do not leak into later brand flows.

Key Frontend Locations & Helpers

Frontend State Lifecycle