Admin Configuration (CRUD)

The admin configuration flow lets lab admins create, edit, enable/disable, and map Lab Form configurations. The entry point is the LabFormConfiguration list page.

5.1 List Page — LabFormConfiguration

Component: src/components/LabAdmin/LabForms/components/index.tsx

• Renders an AG Grid table of all configurations for the selected formType.
• Row click → navigates to the edit page.
• Copy → duplicates the selected configuration.
• Enable / Disable → opens EnableDisableConfigurationModal for confirmation.
• Bulk Instance Mapping → opens MapConfigurationsToInstancesModal to bulk-assign configurations to test/profile/promotion instances.

5.2 Add / Edit Page — AddEditLabFormConfiguration

Component: src/components/LabAdmin/LabForms/components/AddEditConfiguration/index.tsx

Two-tab layout:

• Tab 1: Basic Information — form metadata fields
• Tab 2: Form Components — drag-and-drop section/question builder

Lifecycle:

1. On mount (edit mode): calls getLabFormConfig(formType, configId) → loads config into Redux LAB_FORM slice.
2. On tab switch: validation runs on the current tab's fields before proceeding.
3. On save: calls validateLabForm() → on pass, calls createLabFormConfiguration() or updateFormConfiguration().

5.3 Basic Information Tab

Component: src/components/LabAdmin/LabForms/components/AddEditConfiguration/BasicInformation/index.tsx

Fields:

• Name — process name
• Description — optional description
• Icon — icon picker
• Process Type — dropdown (options vary by formType):

• Response Preference — "Capture once for all instances" vs "Capture separately per instance" (applicable to Test, Profile, Promotion types)
• TTL / Expiry — only shown for consent + Patient process type; value + mode (Day/Month/Year)
• Mapped Tests/Profiles/Promotions — MappedTests sub-component with AG Grid; shown for instance-dependent process types

5.4 Form Components Tab (Drag-and-Drop Builder)

Component: src/components/LabAdmin/LabForms/components/AddEditConfiguration/FormComponents/index.tsx

Two-panel layout:

┌──────────────────────┬──────────────────────────────────────────┐
│   Section Sidebar    │        Main Content Area                 │
│                      │                                          │
│  Section A           │  ► Section A                            │
│    • Question 1      │      Question 1 ─────────── [edit] [×]  │
│    • Question 2      │      Question 2 ─────────── [edit] [×]  │
│  Section B           │      [+] Add Question                    │
│    • Question 3      │  ► Section B                            │
│                      │      Question 3 ─────────── [edit] [×]  │
│  [+] Add Section     │      [+] Add Question                    │
└──────────────────────┴──────────────────────────────────────────┘

The main content area uses react-beautiful-dnd to allow dragging sections and questions to reorder them. Reordering updates the sequence field in the Redux state.

5.5 Sections

Component: src/components/LabAdmin/LabForms/components/AddEditConfiguration/FormComponents/Section/index.tsx

Each section (SectionComponent) manages:

• Name, Icon, Code, Mandatory, Hidden fields
• Import Section — ImportSectionModal allows importing a section from another configuration of the same form type
• Communication Section — special type available only for consent forms; triggers AddCommunicationSectionModal for confirmation
• Delete — DeleteSectionModal with confirmation; removes from labForm state and tracks in removedSections

Shared Section Guard: If a section is shared across multiple configurations, editing it shows EditExistingSectionModal listing all affected configurations. The user must explicitly acknowledge this before changes are applied.

5.6 Questions

Component: src/components/LabAdmin/LabForms/components/AddEditConfiguration/FormComponents/Question/index.tsx

Each question (QuestionComponent) displays:

• Question text, Code, Field Type selector, Mandatory / Hidden toggles
• Attribute panel — rendered based on the selected field type (see §5.7)
• Conditional Config — shown if allow_skipping is enabled; renders skip_to_conditions builder
• Prefilling Config — shown if allow_prefilling is enabled; source + source field picker
• Delete — DeleteQuestionModal; for existing questions, sets is_disabled: true and tracks in removedQuestions

Shared Section Guard: If the question belongs to a shared section, editing shows EditExistingQuestionModal. Adding a question to a shared section shows AddQuestionModal.

5.7 Field Types & Attributes

19 supported field types, each with a dedicated attributes component:

Date formats supported: DD-MM-YYYY, MM-DD-YYYY, YYYY-MM-DD, DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD

Allowed file types: PDF, JPG, JPEG, PNG, DOC, DOCX, CSV, XLSX, MP4, HEIC

5.8 Presets / Templates

Component: AddConfigViaPresetModal

• Full-screen modal accessible from the list page.
• Left sidebar: labFormPresetSidebar — virtualized list of preset categories.
• Main area: labFormPresetList — AG Grid of presets in the selected category.
• Preview button → labFormPresetPreview shows a disabled (read-only) form preview.
• Use Template → copies the preset's structure into a new configuration (loads into Redux LAB_FORM state and navigates to the add page).

5.9 Instance Mapping

Two entry points:

Bulk (from list page):
MapConfigurationsToInstancesModal — select multiple configurations and map them all to a set of instances in one operation.

Inline (from edit page, Basic Information tab):
MappedTests grid — add/remove individual test, profile, or promotion instances. Changes are tracked in addedInstanceIds / removedInstanceIds Redux state and sent on save.

API call: POST api-v3/account/lab/form/{formType}/linked-instances/bulk

Promotion and Store Mapping Rules

• Promotion: A form can be created with Promotion process type and mapped to a specific promotion (example: Promo 1). In CRM, this can also be managed from CRM → Promotions → <Promotion> → Configuration, where forms of any supported process type can be mapped/unmapped (not limited to Promotion-type forms).
• Store: In CRM → Store → Configurations → Checkout, bill and store forms are available by default for mapping, and only Bill and Store process type mappings are allowed.
• Booking runtime: For both Promotion and Store flows, all forms mapped to that entity are rendered during booking.

5.10 Validation

validateLabForm() runs before every save. It checks all fields and auto-focuses the first invalid input.

Errors are stored in Redux.LAB_FORM.validationState and surfaced inline next to each field.

5.11 Save Flow

validateLabForm()
    │
    ├── FAIL → scroll to first error, abort
    │
    └── PASS
         │
         ├── NEW CONFIG (no id):
         │     stringifyQuestionAttributes()
         │     POST api-v3/account/lab/form/{formType}/config/new
         │     → redirect to edit page with new configId
         │
         └── EXISTING CONFIG (has id):
               stringifyQuestionAttributes()
               Compute delta in updatedFields
               PUT api-v3/account/lab/form/{formType}/config/{configId}/update
               → stay on edit page, refresh config

stringifyQuestionAttributes(): Before the API call, the following attributes are serialized from objects to JSON strings:

• skip_to_conditions
• confirmation_messages
• prefilling_options

Dual-Track State: Every mutation in the form builder maintains two parallel Redux states:

• labForm — full current form (what the user sees in the UI)
• updatedFields — only the delta of what changed (what is sent to the API)

This minimizes payload size and avoids overwriting unrelated fields on update.