@iapps/ng-dhis2-ui 1.1.80 → 1.2.1

package/fesm2022/iapps-ng-dhis2-ui.mjs

@@ -8,7 +8,7 @@ import { NgxDhis2HttpClientService } from '@iapps/ngx-dhis2-http-client';
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef, useEffect, createContext, useContext, useMemo } from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { catchError, of, map, zip, firstValueFrom, take, filter, Subject, takeUntil } from 'rxjs';
+import { catchError, of, map, zip, firstValueFrom, filter, take, Subject, takeUntil } from 'rxjs';
 import i18n from '@dhis2/d2-i18n';
 import { colors, theme, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
@@ -25,16 +25,16 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
-import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, CalendarInput, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, DataTableToolbar, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, CircularLoader as CircularLoader$1, Chip, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { isObject, isString, debounce, sortBy, isArray, find, camelCase, flatten, isUndefined, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
-import { switchMap, map as map$1 } from 'rxjs/operators';
-import { parse as parse$1, format } from 'date-fns';
+import { map as map$1 } from 'rxjs/operators';
+import { format, parse as parse$1 } from 'date-fns';
+import { Pager, DataOrderCriteria, DataQueryFilter, DataFilterCondition, ProgramRuleEngine } from '@iapps/d2-web-sdk';
 import * as i2 from '@angular/forms';
 import { Validators, UntypedFormControl, UntypedFormGroup, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { toObservable } from '@angular/core/rxjs-interop';
-import { DataQueryFilter, DataFilterCondition, ProgramRuleEngine } from '@iapps/d2-web-sdk';
 import moment from 'moment';
 
 class SharedDhis2UiModule {
@@ -3106,6 +3106,195 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+class LineListService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    /**
+      * Fetch orgUnit names for given orgUnit IDs
+      */
+    fetchOrgUnits(orgUnitIds) {
+        const idsQuery = `filter=id:in:[${orgUnitIds}]`;
+        return this.httpClient
+            .get(`organisationUnits.json?fields=id,name&paging=false&${idsQuery}`)
+            .pipe(map$1((response) => {
+            const orgUnitsMap = new Map();
+            response.organisationUnits.forEach((orgUnit) => {
+                orgUnitsMap.set(orgUnit.id, orgUnit.name);
+            });
+            return orgUnitsMap;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService, deps: [{ token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
+
+const getTrackedEntityTableData = (response, programId, pager, metaData) => {
+    const teisRaw = response.data
+        .trackedEntityInstances;
+    const teis = Array.isArray(teisRaw)
+        ? teisRaw
+        : [teisRaw];
+    const orgUnitLabel = metaData.orgUnitLabel;
+    const orgUnitMap = response.data
+        .orgUnitsMap;
+    const attributeColumns = metaData.displayInListTrackedEntityAttributes
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map((attr) => ({
+        label: attr.name,
+        key: attr.id,
+    }));
+    const dataElementColumns = metaData.displayInListDataElements
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map((element) => ({
+        label: element.name,
+        key: element.id,
+    }));
+    const dataElementOptions = metaData.displayInListDataElements.map((element) => ({
+        id: element.id,
+        options: element.optionSet?.options.map((opt) => ({
+            name: opt.name,
+            color: opt.style?.color,
+        })),
+    }));
+    const tableColumns = [
+        {
+            label: orgUnitLabel || 'registering unit',
+            key: 'orgUnit',
+        },
+        ...attributeColumns,
+        ...dataElementColumns,
+    ];
+    const tableFilters = metaData.searchableTrackedEntityAttributes
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map((attr) => ({
+        label: attr.name,
+        key: attr.id,
+        valueType: attr.valueType,
+        options: attr.optionSet ?? undefined,
+    }));
+    const tableData = teis.map((tei, idx) => {
+        const row = {
+            trackedEntityInstance: { value: tei.trackedEntity },
+            index: { value: (pager.page - 1) * pager.pageSize + idx + 1 },
+        };
+        const matchingEnrollment = tei.latestEnrollment;
+        let attributesData = matchingEnrollment.attributes;
+        const dataElementsData = matchingEnrollment.events.flatMap((event) => event.dataValues);
+        attributesData = attributesData.map((attr) => {
+            if (attr?.valueType?.toLowerCase() === 'date') {
+                try {
+                    return {
+                        ...attr,
+                        value: format(parse$1(attr.value, 'yyyy-MM-dd', new Date()), 'dd/MM/yyyy'),
+                    };
+                }
+                catch {
+                    return { ...attr }; // Leave value as is on parse failure
+                }
+            }
+            return attr;
+        });
+        attributesData.forEach((attr) => {
+            row[attr.attribute] = { value: attr.value };
+        });
+        dataElementsData.forEach((element) => {
+            // Find the matching data element in dataElementOptions by ID
+            const dataElementOption = dataElementOptions.find((deo) => deo.id === element.dataElement);
+            // find a matching option within that data element's options
+            const matchingOption = dataElementOption?.options?.find((opt) => opt.name === element.value);
+            // Build the row entry with value and optionally style
+            if (matchingOption) {
+                row[element.dataElement] = {
+                    value: element.value,
+                    style: matchingOption.color,
+                };
+            }
+            else {
+                row[element.dataElement] = {
+                    value: element.value,
+                };
+            }
+        });
+        // Include orgUnit in the row for id access with style
+        row['orgUnitId'] = { value: matchingEnrollment.orgUnit };
+        row['orgUnit'] = {
+            value: orgUnitMap?.get(matchingEnrollment.orgUnit) || '-',
+        };
+        row['responseData'] = { value: tei.toObject() };
+        return row;
+    });
+    return {
+        columns: tableColumns,
+        data: tableData,
+        filteredEntityColumns: tableFilters,
+        orgUnitLabel: orgUnitLabel,
+    };
+};
+const addActionsColumn = (columns, actionOptions) => {
+    return [
+        ...columns,
+        ...(actionOptions && actionOptions.length > 0
+            ? [{ label: 'Actions', key: 'actions' }]
+            : []),
+    ];
+};
+
+const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, defaultOrgUnit, setHide, startDateState, setStartDateState, endDateState, setEndDateState, visibleFilters, dateStates, inputValues, setInputValues, handleInputChange, handleInputChangeForSelectField, handleDateSelect, prevValue, setPrevValue, showAllFilters, setShowAllFilters, }) => (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
+    React__default.createElement("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            flexWrap: 'wrap',
+        } },
+        React__default.createElement(InputField$1, { key: "location", label: orgUnitLabel ? orgUnitLabel : 'registering unit:', value: selectedOrgUnit, onFocus: () => setHide(false), className: "custom-input", clearable: true, onChange: (event) => {
+                setSelectedOrgUnit(event.value);
+                setOrgUnitState(defaultOrgUnit);
+            } }),
+        React__default.createElement(CalendarInput, { label: "Start date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: startDateState, onDateSelect: (selectedDate) => {
+                setStartDateState(selectedDate.calendarDateString);
+            } }),
+        React__default.createElement(CalendarInput, { label: "End date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: endDateState, onDateSelect: (selectedDate) => {
+                setEndDateState(selectedDate.calendarDateString);
+            } }),
+        (visibleFilters ?? []).map(({ label, key, valueType, options }) => {
+            if (valueType === 'DATE') {
+                return (React__default.createElement(CalendarInput, { key: key, label: `${label}:`, calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: dateStates[key] || '', onDateSelect: (selectedDate) => handleDateSelect(key, selectedDate) }));
+            }
+            if (options && options.options.length > 0) {
+                return (React__default.createElement(SingleSelectField, { key: key, label: `${label}:`, selected: inputValues[key] || '', className: "custom-select-input", clearable: true, onChange: ({ selected }) => {
+                        setInputValues((prevValues) => ({
+                            ...prevValues,
+                            [key]: selected ?? '',
+                        }));
+                        handleInputChangeForSelectField(key, selected ?? '');
+                    } }, (options.options ?? []).map((opt) => (React__default.createElement(SingleSelectOption, { key: opt.id, label: opt.name, value: opt.code })))));
+            }
+            return (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', clearable: true, onChange: (e) => {
+                    const currentValue = 'target' in e ? e.target.value : e.value ?? '';
+                    setInputValues((prevValues) => ({
+                        ...prevValues,
+                        [key]: currentValue,
+                    }));
+                    if (currentValue === '') {
+                        handleInputChange(key, '');
+                    }
+                }, onBlur: (e) => {
+                    const currentValue = 'target' in e ? e.target.value : e.value ?? '';
+                    if (currentValue !== '' && currentValue !== prevValue) {
+                        handleInputChange(key, currentValue);
+                        setPrevValue(currentValue);
+                    }
+                } }));
+        }),
+        React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters'))));
+
+const TableHeader = ({ columns }) => (React__default.createElement(TableHead, null,
+    React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))));
+
 const dropdownStyles$1 = {
     layer: {
         zIndex: '1 !important',
@@ -3242,6 +3431,72 @@ const DataTableActions = (props) => {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+const TableCell = ({ cell, getTextColorFromBackGround, }) => {
+    if (cell?.style && cell?.style !== 'default-value') {
+        return (React__default.createElement(DataTableCell, null,
+            React__default.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+                React__default.createElement("span", { style: {
+                        backgroundColor: cell.style,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        padding: 4,
+                        borderRadius: 3,
+                        fontSize: 12,
+                        color: getTextColorFromBackGround(cell.style),
+                    } }, cell.value))));
+    }
+    return (React__default.createElement(DataTableCell, null,
+        React__default.createElement("div", { className: "text-sm text-gray-800" }, cell?.value || '-')));
+};
+
+const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, }) => (React__default.createElement(DataTableRow, { key: row.index.value }, columns.map((col) => {
+    if (col.key === 'actions') {
+        return (React__default.createElement(DataTableCell, { key: col.key }, actionOptions && (React__default.createElement(DataTableActions, { actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, onClick: (option) => {
+                const data = row['responseData']?.['value'];
+                if (option.onClick)
+                    option.onClick(data);
+                actionSelected.emit({
+                    action: option.label,
+                    data,
+                });
+            } }))));
+    }
+    return (React__default.createElement(TableCell, { key: col.key, cell: row[col.key], getTextColorFromBackGround: getTextColorFromBackGround }));
+})));
+
+const TableBody = ({ data, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, }) => (React__default.createElement(TableBody$1, null, data.length > 0 ? (data.map((row) => (React__default.createElement(TableRow, { key: row.index.value, row: row, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected })))) : (React__default.createElement(DataTableRow, null,
+    React__default.createElement(DataTableCell, { colSpan: columns.length.toString(), style: {
+            textAlign: 'center',
+            fontWeight: 'bold',
+            color: 'grey',
+            padding: '20px',
+        } }, "No data found")))));
+
+const Pagination = ({ pager, setPager }) => {
+    if (!pager || pager.page === undefined || pager.pageSize === undefined) {
+        return null; //skip rendering until valid
+    }
+    return (React__default.createElement(Pagination$1, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => new Pager({ ...prev, page })), onPageSizeChange: (pageSize) => setPager((prev) => new Pager({
+            ...prev,
+            pageSize: Number(pageSize),
+            page: 1,
+        })), pageSizes: ['10', '20', '50', '100', '500'] }));
+};
+
+const TableFooter = ({ pager, setPager, columns }) => {
+    return (React__default.createElement(TableFoot, null,
+        React__default.createElement(DataTableRow, null,
+            React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
+                React__default.createElement(Pagination, { pager: pager, setPager: setPager })))));
+};
+
+const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, }) => {
+    return (React__default.createElement(DataTable, null,
+        React__default.createElement(TableHeader, { columns: columns }),
+        React__default.createElement(TableBody, { data: data, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected }),
+        React__default.createElement(TableFooter, { columns: columns, pager: pager, setPager: setPager })));
+};
+
 // Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -3426,857 +3681,30 @@ const OrgUnitFormField$1 = (props) => {
                     React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree()))))))));
 };
 
-// export function buildFilters(filters: AttributeFilter[]): string {
-//   return filters
-//     .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
-//     .join('&');
-// }
-function buildFilters(filters) {
-    return filters
-        .map(({ attribute, dataElement, operator, value }) => {
-        // Check if attribute is defined, otherwise use dataElement
-        const field = attribute || dataElement;
-        return field ? `filter=${field}:${operator}:${value}` : '';
-    })
-        .filter(Boolean) // Remove any empty strings
-        .join('&');
-}
-function buildFiltersFromEvents(filters) {
-    return filters
-        .map((filter) => `filter=${filter.programStage}.${filter.dataElement}:${filter.operator}:${filter.value}`)
-        .join('&');
-}
-const matchesCondition = (eventValue, operator, filterValue) => {
-    if (typeof eventValue === 'number' && typeof filterValue === 'number') {
-        switch (operator) {
-            case '=':
-                return eventValue === filterValue;
-            case '!=':
-                return eventValue !== filterValue;
-            case '>':
-                return eventValue > filterValue;
-            case '<':
-                return eventValue < filterValue;
-            case '>=':
-                return eventValue >= filterValue;
-            case '<=':
-                return eventValue <= filterValue;
-            default:
-                return false;
-        }
-    }
-    const strEventValue = String(eventValue);
-    const strFilterValue = String(filterValue);
-    switch (operator) {
-        case '=':
-            return strEventValue === strFilterValue;
-        case '!=':
-            return strEventValue !== strFilterValue;
-        case 'contains':
-            return strEventValue.includes(strFilterValue);
-        case 'startsWith':
-            return strEventValue.startsWith(strFilterValue);
-        case 'endsWith':
-            return strEventValue.endsWith(strFilterValue);
-        case 'regex':
-            return new RegExp(strFilterValue).test(strEventValue);
-        default:
-            return false;
-    }
-};
-// export const getFilteredTrackedEntityInstances = (
-//   trackedEntityInstance: TrackedEntityInstance[],
-//   filters: FilterConfig[]
-// ): TrackedEntityInstance[] => {
-//   return trackedEntityInstance.filter(
-//       (trackedEntityInstance: TrackedEntityInstance) =>
-//           trackedEntityInstance.enrollments.some((enrollment) =>
-//               enrollment.events.some((event) =>
-//                   filters.every(
-//                       (filter) =>
-//                           event.programStage === filter.programStage &&
-//                           event.dataValues.some(
-//                               (dataValue) =>
-//                                   dataValue.dataElement === filter.dataElement &&
-//                                   matchesCondition(
-//                                       dataValue.value,
-//                                       filter.operator,
-//                                       filter.value
-//                                   )
-//                           )
-//                   )
-//               )
-//           )
-//   );
-// };
-const getFilteredTrackedEntityInstances = (trackedEntityInstances, filters) => {
-    if (!filters.length)
-        return trackedEntityInstances;
-    return trackedEntityInstances.filter((tei) => filters.every((filter) => tei.enrollments?.some((enrollment) => enrollment.events?.some((event) => event.programStage === filter.programStage &&
-        event.dataValues?.some((dataValue) => dataValue.dataElement === filter.dataElement &&
-            matchesCondition(dataValue.value, filter.operator, filter.value))))));
-};
-const getFilteredTrackedEntites = (trackedEntities, filters) => {
-    if (!filters.length)
-        return trackedEntities;
-    return trackedEntities.filter((tei) => filters.every((filter) => tei.enrollments?.some((enrollment) => enrollment.events?.some((event) => event.programStage === filter.programStage &&
-        event.dataValues?.some((dataValue) => dataValue.dataElement === filter.dataElement &&
-            matchesCondition(dataValue.value, filter.operator, filter.value))))));
-};
-
-class LineListService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-    }
-    getProgramMetadata(programId) {
-        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name,shortName,formName,code,optionSetValue,valueType,
-    optionSet[id,name,options[id,name,code]]]]],programTrackedEntityAttributes[*,trackedEntityAttribute[id,name,unique,generated,formName,code,optionSetValue
-    ,valueType,optionSet[id,name,options[id,name,code]]]],orgUnitLabel`);
-    }
-    // private getTrackedEntityInstances(
-    //   programId: string,
-    //   orgUnit: string,
-    //   page: number,
-    //   pageSize: number,
-    //   filters: AttributeFilter[] = [],
-    //   startDate?: string,
-    //   endDate?: string,
-    //   ouMode?: string,
-    //   filterRootOrgUnit?: boolean
-    // ): Observable<TrackedEntityResponse> {
-    //   const filterParams = buildFilters(filters);
-    //  // const dateFilter = startDate || endDate ? `enrollmentEnrolledAfter=${startDate}&enrollmentEnrolledBefore=${endDate}` : '';
-    //  const dateFilter = [
-    //   startDate ? `enrollmentEnrolledAfter=${startDate}` : '',
-    //   endDate ? `enrollmentEnrolledBefore=${endDate}` : '',
-    // ].filter(Boolean).join('&');
-    //   const ouModeIdentifier = ouMode ? `&orgUnitMode=${ouMode}`: ``;
-    //   return this.httpClient.get(
-    //     `tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc`
-    //   ).pipe(
-    //     map((response: any) => {
-    //       if (filterRootOrgUnit) {
-    //         response.trackedEntities = response.trackedEntities.filter(
-    //           (tei: any) => tei.orgUnit !== orgUnit // Exclude TEIs with the root orgUnit
-    //         );
-    //       }
-    //       return response;
-    //     })
-    //   );
-    // }
-    //tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc&trackedEntities=uid1,uid2,uid3
-    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance, filtersFromEvents = []) {
-        const filterParams = buildFilters(filters);
-        const filterParamsFromEvents = buildFiltersFromEvents(filtersFromEvents);
-        const dateFilter = [
-            startDate ? `enrollmentEnrolledAfter=${startDate}` : '',
-            endDate ? `enrollmentEnrolledBefore=${endDate}` : '',
-        ]
-            .filter(Boolean)
-            .join('&');
-        const ouModeIdentifier = ouMode && useOuModeWithOlderDHIS2Instance
-            ? `&ouMode=${ouMode}`
-            : `&orgUnitMode=${ouMode}`;
-        return this.httpClient
-            .get(`tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc`)
-            .pipe(switchMap((response) => {
-            if (filterRootOrgUnit) {
-                response.trackedEntities = response.trackedEntities.filter((tei) => tei.orgUnit !== orgUnit);
-            }
-            // **Step 1:** Extract unique orgUnits from enrollments
-            const uniqueOrgUnitIds = new Set();
-            if (response && response.trackedEntities) {
-                response.trackedEntities.forEach((tei) => {
-                    tei.enrollments?.forEach((enrollment) => {
-                        if (enrollment.program === programId) {
-                            uniqueOrgUnitIds.add(enrollment.orgUnit);
-                        }
-                    });
-                });
-            }
-            else {
-                if (response && response.instances) {
-                    response?.instances?.forEach((tei) => {
-                        tei.enrollments?.forEach((enrollment) => {
-                            if (enrollment.program === programId) {
-                                uniqueOrgUnitIds.add(enrollment?.orgUnit);
-                            }
-                        });
-                    });
-                }
-            }
-            // If no unique orgUnits found, return immediately
-            if (uniqueOrgUnitIds.size === 0) {
-                return of({ ...response, orgUnitsMap: new Map() });
-            }
-            // **Step 2:** Fetch orgUnit names in a single request
-            return this.fetchOrgUnits(Array.from(uniqueOrgUnitIds)).pipe(map$1((orgUnitsMap) => ({
-                ...response,
-                orgUnitsMap, // Attach orgUnitId → orgUnitName map
-            })));
-        }));
-    }
-    // private getTrackedEntityInstances(
-    //   programId: string,
-    //   orgUnit: string,
-    //   page: number,
-    //   pageSize: number,
-    //   filters: AttributeFilter[] = [],
-    //   startDate?: string,
-    //   endDate?: string,
-    //   ouMode?: string,
-    //   filterRootOrgUnit?: boolean,
-    //   useOuModeWithOlderDHIS2Instance?: boolean,
-    //   filtersFromEvents: FilterConfig[] = []
-    // ): Observable<TrackedEntityResponse> {
-    //   const filterParams = buildFilters(filters);
-    //   const filterParamsFromEvents = buildFiltersFromEvents(filtersFromEvents);
-    //   const dateFilter = [
-    //     startDate ? `enrollmentEnrolledAfter=${startDate}` : '',
-    //     endDate ? `enrollmentEnrolledBefore=${endDate}` : '',
-    //   ]
-    //     .filter(Boolean)
-    //     .join('&');
-    //   const ouModeIdentifier =
-    //     ouMode && useOuModeWithOlderDHIS2Instance
-    //       ? `&ouMode=${ouMode}`
-    //       : `&orgUnitMode=${ouMode}`;
-    //       let baseUrl='';
-    //       if(filtersFromEvents.length === 0) {
-    //         baseUrl = `tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc`;
-    //       } else {
-    //         baseUrl = `tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&${filterParams}${dateFilter}&order=createdAt:desc&paging=false`;
-    //       }
-    //   return this.httpClient.get(baseUrl).pipe(
-    //     switchMap((response: any) => {
-    //       if (filterRootOrgUnit) {
-    //         response.trackedEntities = response.trackedEntities.filter(
-    //           (tei: any) => tei.orgUnit !== orgUnit
-    //         );
-    //       }
-    //       const uniqueOrgUnitIds = new Set<string>();
-    //       if (response && response.trackedEntities) {
-    //         response.trackedEntities.forEach((tei: any) => {
-    //           tei.enrollments?.forEach((enrollment: any) => {
-    //             if (enrollment.program === programId) {
-    //               uniqueOrgUnitIds.add(enrollment.orgUnit);
-    //             }
-    //           });
-    //         });
-    //       } else {
-    //         response?.instances?.forEach((tei: any) => {
-    //           tei.enrollments?.forEach((enrollment: any) => {
-    //             if (enrollment.program === programId) {
-    //               uniqueOrgUnitIds.add(enrollment.orgUnit);
-    //             }
-    //           });
-    //         });
-    //       }
-    //       if (filtersFromEvents.length === 0) {
-    //         if (uniqueOrgUnitIds.size === 0) {
-    //           return of({ ...response, orgUnitsMap: new Map<string, string>() });
-    //         }
-    //         return this.fetchOrgUnits(Array.from(uniqueOrgUnitIds)).pipe(
-    //           map((orgUnitsMap: Map<string, string>) => ({
-    //             ...response,
-    //             orgUnitsMap,
-    //           }))
-    //         );
-    //       }
-    //       // NEW LOGIC STARTS HERE if filtersFromEvents is present
-    //       const filteredTrackedEntities = getFilteredTrackedEntites( 
-    //         response.trackedEntities,
-    //         filtersFromEvents
-    //       );
-    //       const trackedEntityIds = filteredTrackedEntities
-    //         .map((tei: any) => tei.trackedEntity)
-    //         .join(',');
-    //       if (!trackedEntityIds) {
-    //         return of({
-    //           trackedEntities: [],
-    //           orgUnitsMap: new Map<string, string>(),
-    //         });
-    //       }
-    //       const refetchUrl = `tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc&trackedEntities=${trackedEntityIds}`;
-    //       return this.httpClient.get(refetchUrl).pipe(
-    //         switchMap((filteredResponse: any) => {
-    //           const orgUnitIds = new Set<string>();
-    //           filteredResponse.trackedEntities?.forEach((tei: any) => {
-    //             tei.enrollments?.forEach((enrollment: any) => {
-    //               if (enrollment.program === programId) {
-    //                 orgUnitIds.add(enrollment.orgUnit);
-    //               }
-    //             });
-    //           });
-    //           return this.fetchOrgUnits(Array.from(orgUnitIds)).pipe(
-    //             map((orgUnitsMap: Map<string, string>) => ({
-    //               ...filteredResponse,
-    //               orgUnitsMap,
-    //             }))
-    //           );
-    //         })
-    //       );
-    //     })
-    //   );
-    // }
-    /**
-     * Fetch orgUnit names for given orgUnit IDs
-     */
-    fetchOrgUnits(orgUnitIds) {
-        const idsQuery = `filter=id:in:[${orgUnitIds}]`;
-        return this.httpClient
-            .get(`organisationUnits.json?fields=id,name&paging=false&${idsQuery}`)
-            .pipe(map$1((response) => {
-            const orgUnitsMap = new Map();
-            response.organisationUnits.forEach((orgUnit) => {
-                orgUnitsMap.set(orgUnit.id, orgUnit.name);
-            });
-            return orgUnitsMap;
-        }));
-    }
-    getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode, useOuModeWithOlderDHIS2Instance) {
-        const filterParams = buildFilters(filters);
-        const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
-        const ouModeIdentifier = ouMode && useOuModeWithOlderDHIS2Instance
-            ? `&ouMode=${ouMode}`
-            : `&ouMode=${ouMode}`;
-        // const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}`: ``;
-        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
-    }
-    getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
-        const filterParams = buildFilters(filters);
-        const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
-        const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
-        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
-    }
-    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance, filtersFromEvents = []) {
-        return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
-            if (programStageId) {
-                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((events) => ({
-                    metadata: programMetadata,
-                    data: events,
-                })));
-            }
-            if (programMetadata.programType === 'WITH_REGISTRATION') {
-                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance, filtersFromEvents).pipe(map$1((teis) => ({
-                    metadata: programMetadata,
-                    data: teis,
-                    orgUnits: teis.orgUnitsMap,
-                })));
-            }
-            else {
-                return this.getEvents(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode, useOuModeWithOlderDHIS2Instance).pipe(map$1((events) => ({
-                    metadata: programMetadata,
-                    data: events,
-                })));
-            }
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService, deps: [{ token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
-
-// export const getProgramStageData = (
-//   response: LineListResponse,
-//   programStageId: string,
-//   pager: any,
-//   isOptionSetNameVisible: boolean
-// ): { columns: ColumnDefinition[]; data: TableRow[] } => {
-//   const events = (response.data as EventsResponse).events;
-//   const allDataElements = new Set<string>();
-//   events.forEach((event: any) => {
-//     event.dataValues.forEach((dv: any) => allDataElements.add(dv.dataElement));
-//   });
-//   const stageFromMetaData = response.metadata.programStages.find(
-//     (stage: any) => stage.id === programStageId
-//   );
-//   if (!stageFromMetaData) {
-//     throw new Error(`Program stage with ID ${programStageId} not found`);
-//   }
-//   const entityColumns = Array.from(allDataElements).map(
-//     (dataElementId: string) => ({
-//       label:
-//         stageFromMetaData.programStageDataElements.find(
-//           (psde: any) => psde.dataElement.id === dataElementId
-//         )?.dataElement.name || dataElementId,
-//       key: dataElementId,
-//     })
-//   );
-//   const dataElementsData: TableRow[] = events.map((event: any, idx: number) => {
-//     const row: TableRow = {
-//       event: event.event,
-//       index: (pager.page - 1) * pager.pageSize + idx + 1,
-//     };
-//     allDataElements.forEach(
-//       (dataElementId: string) => (row[dataElementId] = '')
-//     );
-//     if (isOptionSetNameVisible) {
-//       event.dataValues.forEach((dv: any) => (row[dv.dataElement] = dv.value));
-//     } else {
-//       event.dataValues.forEach((dv: any) => (row[dv.dataElement] = dv.value));
-//     }
-//     return row;
-//   });
-//   return { columns: entityColumns, data: dataElementsData };
-// };
-// export const getTrackedEntityData = (
-//   response: LineListResponse,
-//   programId: string,
-//   pager: any,
-//   isOptionSetNameVisible: boolean,
-//   filters?: FilterConfig[]
-// ): {
-//   columns: ColumnDefinition[];
-//   data: TableRow[];
-//   filteredEntityColumns: ColumnDefinition[];
-// } => {
-//   let teis =
-//     (response.data as TrackedEntityResponse)?.trackedEntities ??
-//     (response.data as TrackedEntityResponse)?.instances ??
-//     [];
-//   const programMetaData = response.metadata.programTrackedEntityAttributes;
-//   // //organisation units from metadata
-//   // let orgUnitsFromMetaData = response.metadata.organisationUnits;
-//   // //a Map to efficiently look up orgUnit names by ID
-//   // const orgUnitMap = new Map<string, string>(
-//   //   orgUnitsFromMetaData.map((ou: { id: string; name: string }) => [
-//   //     ou.id,
-//   //     ou.name,
-//   //   ])
-//   // );
-//   const orgUnitMap = (response.data as TrackedEntityResponse).orgUnitsMap;
-//   const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
-//     displayInList: attr.displayInList,
-//     searchable: attr.searchable,
-//     id: attr.trackedEntityAttribute.id,
-//   }));
-//   const programAttributesMap = programMetaData.reduce(
-//     (acc: { [key: string]: string }, attribute: any) => {
-//       if (attribute.displayInList) {
-//         acc[attribute.id] = attribute.displayName;
-//       }
-//       return acc;
-//     },
-//     {}
-//   );
-//   if (filters) {
-//     teis = getFilteredTrackedEntites(teis, filters);
-//   }
-//   const allAttributes = new Set<string>();
-//   teis.forEach((tei: any) => {
-//     const matchingEnrollment = tei.enrollments.find(
-//       (enrollment: any) => enrollment.program === programId
-//     );
-//     const attributes = matchingEnrollment
-//       ? matchingEnrollment.attributes
-//       : tei.attributes;
-//     attributes.forEach((attr: any) => allAttributes.add(attr.attribute));
-//   });
-//   let entityColumns = Array.from(allAttributes).map((attrId: string) => {
-//     const foundAttribute = teis
-//       .flatMap((tei: any) => {
-//         const matchingEnrollment = tei.enrollments.find(
-//           (enrollment: any) => enrollment.program === programId
-//         );
-//         return matchingEnrollment
-//           ? matchingEnrollment.attributes
-//           : tei.attributes;
-//       })
-//       .find((attr: any) => attr.attribute === attrId);
-//     return {
-//       label: foundAttribute?.displayName || attrId,
-//       key: attrId,
-//     };
-//   });
-//   entityColumns = entityColumns.filter((column) => {
-//     // Check if the column label is part of any value in programAttributesMap
-//     return Object.values(programAttributesMap).some((value: string) =>
-//       value.includes(column.label)
-//     );
-//   });
-//   // Add orgUnit as the first column
-//   entityColumns.unshift({
-//     label: 'Location',
-//     key: 'orgUnit',
-//   });
-//   const searchableAttributes = mappedProgramMetadataAttributes
-//     .filter((attr) => attr.searchable && attr.displayInList)
-//     .map((attr) => ({
-//       //  label: attr.trackedEntityAttribute.displayName,
-//       key: attr.id,
-//     }));
-//   // Extract keys from searchableAttributes for quick lookup
-//   const searchableKeys = new Set(searchableAttributes.map((attr) => attr.key));
-//   // Filter entityColumns to keep only those whose key exists in searchableAttributes
-//   const filteredEntityColumns = entityColumns.filter((column) =>
-//     searchableKeys.has(column.key)
-//   );
-//   const attributesData = teis.map((tei: any, idx: number) => {
-//     const row: TableRow = {
-//       trackedEntityInstance: tei.trackedEntity,
-//       index: (pager.page - 1) * pager.pageSize + idx + 1,
-//     };
-//     allAttributes.forEach((attrId: string) => (row[attrId] = ''));
-//     const matchingEnrollment = tei.enrollments.find(
-//       (enrollment: any) => enrollment.program === programId
-//     );
-//     const attributesToUse = matchingEnrollment
-//       ? matchingEnrollment.attributes
-//       : tei.attributes;
-//     console.log('RESPONSE::: ', JSON.stringify(attributesToUse));
-//     console.log('HERE WEARE', JSON.stringify(response.metadata));
-//     if (isOptionSetNameVisible) {
-//       attributesToUse.forEach(
-//         (attr: any) => (row[attr.attribute] = attr.value)
-//       );
-//     } else {
-//       attributesToUse.forEach(
-//         (attr: any) => (row[attr.attribute] = attr.value)
-//       );
-//     }
-//     //include orgUnit in the row for id access
-//     row['orgUnitId'] = matchingEnrollment.orgUnit;
-//     // Access the name of the orgUnit using the Map
-//     //  row['orgUnit'] = matchingEnrollment.orgUnitName;
-//     row['orgUnit'] = orgUnitMap?.get(matchingEnrollment.orgUnit) || 'N/A';
-//     //  row['orgUnit'] =
-//     // orgUnitMap && orgUnitMap[matchingEnrollment.orgUnit]
-//     //   ? orgUnitMap[matchingEnrollment.orgUnit]
-//     //   : 'N/A';
-//     return row;
-//   });
-//   return {
-//     columns: entityColumns,
-//     data: attributesData,
-//     filteredEntityColumns: filteredEntityColumns,
-//   };
-// };
-const getProgramStageData = (response, programStageId, pager, isOptionSetNameVisible) => {
-    const events = response.data.events;
-    const allDataElements = new Set();
-    events.forEach((event) => {
-        event.dataValues.forEach((dv) => allDataElements.add(dv.dataElement));
-    });
-    const stageFromMetaData = response.metadata.programStages.find((stage) => stage.id === programStageId);
-    if (!stageFromMetaData) {
-        throw new Error(`Program stage with ID ${programStageId} not found`);
-    }
-    const entityColumns = Array.from(allDataElements).map((dataElementId) => {
-        const dataElementMeta = stageFromMetaData.programStageDataElements.find((psde) => psde.dataElement.id === dataElementId);
-        return {
-            label: dataElementMeta?.dataElement.name || dataElementId,
-            key: dataElementId,
-        };
-    });
-    const dataElementsData = events.map((event, idx) => {
-        const row = {
-            event: event.event,
-            index: (pager.page - 1) * pager.pageSize + idx + 1,
-        };
-        allDataElements.forEach((dataElementId) => (row[dataElementId] = ''));
-        event.dataValues.forEach((dv) => {
-            const dataElementMeta = stageFromMetaData.programStageDataElements.find((psde) => psde.dataElement.id === dv.dataElement);
-            if (isOptionSetNameVisible && dataElementMeta?.dataElement.optionSet) {
-                const optionSet = dataElementMeta.dataElement.optionSet;
-                const matchingOption = optionSet.options.find((option) => option.code === dv.value);
-                row[dv.dataElement] = matchingOption ? matchingOption.name : dv.value;
-            }
-            else {
-                row[dv.dataElement] = dv.value;
-            }
-        });
-        return row;
-    });
-    return { columns: entityColumns, data: dataElementsData };
-};
-const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible, filters) => {
-    let teis = response.data?.trackedEntities ??
-        response.data?.instances ??
-        [];
-    const programMetaData = response.metadata.programTrackedEntityAttributes;
-    const orgUnitLabel = response.metadata.orgUnitLabel;
-    const orgUnitMap = response.data.orgUnitsMap;
-    const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
-        displayInList: attr.displayInList,
-        searchable: attr.searchable,
-        id: attr.trackedEntityAttribute.id,
-        name: attr.trackedEntityAttribute.name,
-        optionSet: attr.trackedEntityAttribute.optionSetValue
-            ? attr.trackedEntityAttribute.optionSet
-            : null,
-        sortOrder: attr.sortOrder,
-    }));
-    if (filters) {
-        teis = getFilteredTrackedEntites(teis, filters);
-    }
-    const allAttributes = new Set();
-    teis.forEach((tei) => {
-        const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
-        const attributes = matchingEnrollment
-            ? matchingEnrollment.attributes
-            : tei.attributes;
-        attributes.forEach((attr) => allAttributes.add(attr.attribute));
-    });
-    let entityColumns = Array.from(allAttributes).map((attrId) => {
-        const foundAttribute = teis
-            .flatMap((tei) => {
-            const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
-            return matchingEnrollment
-                ? matchingEnrollment.attributes
-                : tei.attributes;
-        })
-            .find((attr) => attr.attribute === attrId);
-        return {
-            label: foundAttribute?.displayName || attrId,
-            key: attrId,
-        };
-    });
-    entityColumns = entityColumns
-        .filter((column) => {
-        return mappedProgramMetadataAttributes
-            .filter((attr) => attr.displayInList)
-            .some((attr) => attr.id === column.key); // Ensure the column's key matches an id in the filtered list
-    })
-        .sort((a, b) => {
-        // Ensures sortOrder values are treated as numbers
-        const sortOrderA = Number(mappedProgramMetadataAttributes.find((attr) => attr.id === a.key)
-            ?.sortOrder ?? 0); // Default to 0 if undefined, explicitly cast to number
-        const sortOrderB = Number(mappedProgramMetadataAttributes.find((attr) => attr.id === b.key)
-            ?.sortOrder ?? 0); // Default to 0 if undefined, explicitly cast to number
-        return sortOrderA - sortOrderB; // Ascending order based on sortOrder
-    });
-    entityColumns.unshift({
-        label: orgUnitLabel || 'registering unit',
-        key: 'orgUnit',
-    });
-    const searchableAttributes = mappedProgramMetadataAttributes
-        .filter((attr) => attr.searchable && attr.displayInList)
-        .map((attr) => ({
-        key: attr.id,
-    }));
-    const searchableKeys = new Set(searchableAttributes.map((attr) => attr.key));
-    const filteredEntityColumns = Array.from(allAttributes)
-        .map((attrId) => {
-        const foundAttribute = teis
-            .flatMap((tei) => {
-            const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
-            return matchingEnrollment
-                ? matchingEnrollment.attributes
-                : tei.attributes;
-        })
-            .find((attr) => attr.attribute === attrId);
-        // Find the corresponding attribute in mappedProgramMetadataAttributes
-        const mappedAttr = mappedProgramMetadataAttributes.find((attr) => attr.id === attrId);
-        return {
-            label: foundAttribute?.displayName || attrId,
-            key: attrId,
-            valueType: foundAttribute?.valueType,
-            options: mappedAttr?.optionSet ?? undefined,
-        };
-    })
-        .filter((column) => {
-        return mappedProgramMetadataAttributes
-            .filter((attr) => attr.displayInList)
-            .some((attr) => attr.id === column.key);
-    })
-        .sort((a, b) => {
-        const sortOrderA = Number(mappedProgramMetadataAttributes.find((attr) => attr.id === a.key)
-            ?.sortOrder ?? 0);
-        const sortOrderB = Number(mappedProgramMetadataAttributes.find((attr) => attr.id === b.key)
-            ?.sortOrder ?? 0);
-        return sortOrderA - sortOrderB;
-    })
-        .filter((column) => searchableKeys.has(column.key));
-    const attributesData = teis.map((tei, idx) => {
-        const row = {
-            trackedEntityInstance: tei.trackedEntity,
-            index: (pager.page - 1) * pager.pageSize + idx + 1,
-        };
-        allAttributes.forEach((attrId) => (row[attrId] = ''));
-        const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
-        let attributesToUse = matchingEnrollment
-            ? matchingEnrollment.attributes
-            : tei.attributes;
-        //TODO: find a better way to do optimize this date parsing
-        //map any date that occur in the attributes to dd-mm-yyyy
-        attributesToUse = attributesToUse.map((attr) => {
-            // Check if the attribute is of type DATE
-            if (attr?.valueType === 'DATE' || attr?.valueType === 'date') {
-                try {
-                    // Parse the date and format it as dd-MM-yyyy
-                    const parsedDate = parse$1(attr.value, 'yyyy-MM-dd', new Date());
-                    const formattedDate = format(parsedDate, 'dd-MM-yyyy');
-                    // Update the value to the formatted date
-                    return {
-                        ...attr,
-                        value: formattedDate,
-                    };
-                }
-                catch {
-                    // If parsing fails, keep the original value
-                    return {
-                        ...attr,
-                        value: attr.value,
-                    };
-                }
-            }
-            // If not a date, just return the attribute as is
-            return attr;
-        });
-        // If option set names are visible, transform the attribute values
-        if (isOptionSetNameVisible) {
-            attributesToUse.forEach((attr) => {
-                const attributeMeta = programMetaData.find((metadata) => metadata.trackedEntityAttribute.id === attr.attribute);
-                // Check if the attribute has an option set and map value to option name
-                if (attributeMeta?.trackedEntityAttribute.optionSetValue) {
-                    const optionSet = attributeMeta?.trackedEntityAttribute?.optionSet;
-                    const option = optionSet?.options?.find((option) => option.code === attr.value);
-                    row[attr.attribute] = option ? option.name : attr.value;
-                }
-                else {
-                    row[attr.attribute] = attr.value;
-                }
-            });
-        }
-        else {
-            attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
-        }
-        // Include orgUnit in the row for id access
-        row['orgUnitId'] = matchingEnrollment.orgUnit;
-        row['orgUnit'] = orgUnitMap?.get(matchingEnrollment.orgUnit) || 'N/A';
-        return row;
-    });
-    if (teis.length === 0) {
-        entityColumns = [
-            { label: orgUnitLabel || 'registering unit', key: 'orgUnit' },
-            ...mappedProgramMetadataAttributes
-                .filter((attr) => attr.displayInList === true)
-                .sort((a, b) => {
-                return Number(a.sortOrder) - Number(b.sortOrder);
-            })
-                .map((attr) => ({
-                key: attr.id,
-                label: attr.name,
-            })),
-        ];
-    }
-    return {
-        columns: entityColumns,
-        data: attributesData,
-        filteredEntityColumns: filteredEntityColumns,
-        orgUnitLabel: orgUnitLabel,
-    };
-};
-// export const getEventData = (
-//   response: LineListResponse,
-//   pager: any,
-//   isOptionSetNameVisible: boolean
-// ): { columns: ColumnDefinition[]; data: TableRow[] } => {
-//   const events = (response.data as EventsResponse).events;
-//   const uniqueDataElements = new Set<string>();
-//   events?.forEach((event: any) => {
-//     event?.dataValues.forEach((dv: any) =>
-//       uniqueDataElements.add(dv.dataElement)
-//     );
-//   });
-//   const entityColumns = Array.from(uniqueDataElements).map(
-//     (dataElement: string) => ({
-//       label:
-//         response.metadata.programStages[0].programStageDataElements.find(
-//           (psde: any) => psde.dataElement.id === dataElement
-//         )?.dataElement.name || dataElement,
-//       key: dataElement,
-//     })
-//   );
-//   const dataElementsData = events.map((event: any, idx: number) => {
-//     const row: TableRow = {
-//       event: event.event,
-//       index: (pager.page - 1) * pager.pageSize + idx + 1,
-//     };
-//     uniqueDataElements.forEach(
-//       (dataElement: string) => (row[dataElement] = '')
-//     );
-//     event.dataValues.forEach((dv: any) => {
-//       if (isOptionSetNameVisible) {
-//         return (row[dv.dataElement] = dv.value)
-//       } else {
-//         return (row[dv.dataElement] = dv.value)
-//       }
-//     });
-//     return row;
-//   });
-//   return { columns: entityColumns, data: dataElementsData };
-// };
-const getEventData = (response, pager, isOptionSetNameVisible) => {
-    const events = response.data.events;
-    const uniqueDataElements = new Set();
-    events?.forEach((event) => {
-        event?.dataValues.forEach((dv) => uniqueDataElements.add(dv.dataElement));
-    });
-    const entityColumns = Array.from(uniqueDataElements).map((dataElement) => ({
-        label: response.metadata.programStages[0].programStageDataElements.find((psde) => psde.dataElement.id === dataElement)?.dataElement.name || dataElement,
-        key: dataElement,
-    }));
-    const dataElementsData = events.map((event, idx) => {
-        const row = {
-            event: event.event,
-            index: (pager.page - 1) * pager.pageSize + idx + 1,
-        };
-        uniqueDataElements.forEach((dataElement) => (row[dataElement] = ''));
-        event.dataValues.forEach((dv) => {
-            if (isOptionSetNameVisible && dv.optionSetValue) {
-                const dataElementMetadata = response.metadata.programStages
-                    .flatMap((programStage) => programStage.programStageDataElements)
-                    .find((psde) => psde.dataElement.id === dv.dataElement)
-                    ?.dataElement.optionSet;
-                if (dataElementMetadata && dataElementMetadata.options) {
-                    const matchingOption = dataElementMetadata.options.find((option) => option.code === dv.value);
-                    if (matchingOption) {
-                        row[dv.dataElement] = matchingOption.name;
-                    }
-                    else {
-                        row[dv.dataElement] = dv.value;
-                    }
-                }
-                else {
-                    row[dv.dataElement] = dv.value;
-                }
-            }
-            else {
-                row[dv.dataElement] = dv.value;
-            }
-        });
-        return row;
-    });
-    return { columns: entityColumns, data: dataElementsData };
-};
-const addActionsColumn = (columns, actionOptions) => {
-    return [
-        ...columns,
-        ...(actionOptions && actionOptions.length > 0
-            ? [{ label: 'Actions', key: 'actions' }]
-            : []),
-    ];
-};
+const OrgUnitSelector = ({ hide, setHide, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, }) => (React__default.createElement(Modal$1, { hide: hide, position: "middle" },
+    React__default.createElement(ModalTitle$1, null, "Select organization unit"),
+    React__default.createElement(ModalContent$1, null,
+        React__default.createElement(OrgUnitFormField$1, { key: selectedOrgUnit, onSelectOrgUnit: (selectedOrgUnit) => {
+                setSelectedOrgUnit(selectedOrgUnit.displayName);
+                setOrgUnitState(selectedOrgUnit.id);
+                setHide(true);
+            } })),
+    React__default.createElement(ModalActions$1, null,
+        React__default.createElement(ButtonStrip$1, { end: true },
+            React__default.createElement(Button$1, { onClick: () => setHide(true), secondary: true }, "Close")))));
 
 // src/app/line-list-table.component.ts
 class LineListTableComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.actionOptionOrientation = 'DROPDOWN';
-        this.dispatchTeis = false;
-        this.actionSelected = new EventEmitter();
-        this.reactStateUpdaters = null;
-        this.approvalSelected = new EventEmitter();
         this.isButtonLoading = false;
-        this.buttonLabel = '';
-        this.firstValue = new EventEmitter();
         this.filterRootOrgUnit = false;
         this.showFilters = false;
         this.isOptionSetNameVisible = false;
+        this.actionSelected = new EventEmitter();
+        this.approvalSelected = new EventEmitter();
+        this.reactStateUpdaters = null;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
         };
@@ -4284,29 +3712,25 @@ class LineListTableComponent extends ReactWrapperModule {
         this.LineList = () => {
             const [columns, setColumns] = useState([]);
             const [data, setData] = useState([]);
-            const [pager, setPager] = useState({
+            const [pager, setPager] = useState(new Pager({
                 page: 1,
                 pageSize: 10,
                 total: 0,
                 pageCount: 1,
-            });
-            const paginationRef = useRef(null);
+            }));
             const [programIdState, setProgramIdState] = useState(this.programId);
             const [isOptionSetNameVisibleState, setOptionSetNameVisible] = useState(this.isOptionSetNameVisible);
             const [orgUnitState, setOrgUnitState] = useState(this.orgUnit);
             const [programStageIdState, setProgramStageIdState] = useState(this.programStageId);
             const [attributeFiltersState, setAttributeFiltersState] = useState(this.attributeFilters);
+            const [dataQueryFiltersState, setDataQueryFiltersState] = useState(this.dataQueryFilters);
             const [startDateState, setStartDateState] = useState(this.startDate);
             const [endDateState, setEndDateState] = useState(this.endDate);
             const [loading, setLoading] = useState(false);
-            const [isButtonLoading, setIsButtonLoading] = useState(this.isButtonLoading);
+            const [metaDataLoadng, setMetaDataLoading] = useState(false);
             const [filteredColumns, setFilteredColumns] = useState();
             const [inputValues, setInputValues] = useState({});
-            const [filters, setFilters] = useState(false);
             const [orgUnitLabel, setOrgUnitLabel] = useState('');
-            //TODO: this will be migrated on the parent component
-            const [checkValue, setCheckValue] = useState([]);
-            const [valueMatch, setValuesMatch] = useState(false);
             const [selectedOrgUnit, setSelectedOrgUnit] = useState('');
             const [hide, setHide] = useState(true);
             const [showAllFilters, setShowAllFilters] = useState(false);
@@ -4316,6 +3740,8 @@ class LineListTableComponent extends ReactWrapperModule {
             const defaultOrgUnit = this.orgUnit;
             const [prevValue, setPrevValue] = useState();
             const [dateStates, setDateStates] = useState({});
+            const [metaData, setMetaData] = useState(null);
+            const d2 = window.d2Web;
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -4324,7 +3750,6 @@ class LineListTableComponent extends ReactWrapperModule {
                 setAttributeFiltersState,
                 setStartDateState,
                 setEndDateState,
-                setIsButtonLoading,
                 setOptionSetNameVisible,
             });
             useEffect(() => {
@@ -4332,64 +3757,82 @@ class LineListTableComponent extends ReactWrapperModule {
             }, []);
             useEffect(() => {
                 setLoading(true);
-                const subscription = this.lineListService
-                    .getLineListData(this.programId, orgUnitState, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, startDateState, endDateState, this.ouMode, this.filterRootOrgUnit, this.useOuModeWithOlderDHIS2Instance, this.filters)
-                    .pipe(take(1)) // Automatically unsubscribe after the first emission
-                    .subscribe((response) => {
-                    let entityColumns = [];
-                    let responsePager;
-                    let entityData = [];
-                    let filteredDataColumns = [];
-                    if (this.programStageId) {
-                        responsePager = response.data.pager;
-                        const { columns, data } = getProgramStageData(response, this.programStageId, pager, this.isOptionSetNameVisible);
-                        entityColumns = columns;
-                        entityData = data;
-                    }
-                    else if ('trackedEntities' in response.data ||
-                        'instances' in response.data) {
-                        const responseData = response.data;
-                        responsePager = responseData.pager || {
-                            page: responseData.page,
-                            pageSize: responseData.pageSize,
-                            total: responseData.total,
-                            pageCount: responseData.pageCount,
-                        };
-                        const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityData(response, this.programId, pager, this.isOptionSetNameVisible, this.filters);
-                        entityColumns = columns;
-                        entityData = data;
-                        setOrgUnitLabel(orgUnitLabel);
-                        const checkValues = [
-                            ...new Set(responseData?.trackedEntities?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
-                                .filter((dataValue) => /^[A-Za-z]{3}$/.test(dataValue.value))
-                                .map((dataValue) => dataValue.value)) ??
-                                responseData?.instances?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
-                                    .filter((dataValue) => /^[A-Za-z]{3}$/.test(dataValue.value))
-                                    .map((dataValue) => dataValue.value))),
-                        ];
-                        if (checkValues.length > 0) {
-                            setCheckValue(checkValues);
-                            setValuesMatch(!checkValues.includes(this.buttonFilter));
-                        }
-                        setFilteredColumns((prev) => filteredEntityColumns.length > 0 ? filteredEntityColumns : prev);
-                        filteredDataColumns = filteredEntityColumns;
+                const fetchmetaData = async () => {
+                    try {
+                        const trackerResponse = (await d2.trackerModule.trackedEntity
+                            .setProgram(this.programId)
+                            .getMetaData());
+                        const data = trackerResponse;
+                        setMetaData(data);
                     }
-                    else {
-                        responsePager = response.data.pager;
-                        const { columns, data } = getEventData(response, pager, this.isOptionSetNameVisible);
-                        entityColumns = columns;
-                        entityData = data;
+                    catch (error) {
+                        console.error('Failed to metadata:', error);
                     }
-                    const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
-                    setLoading(false);
-                    setColumns(finalColumns);
-                    setData(entityData);
-                    setPager(responsePager);
-                });
-                return () => {
-                    subscription.unsubscribe(); // Ensure cleanup on unmount
                 };
+                if (this.programId) {
+                    fetchmetaData();
+                }
+            }, []);
+            useEffect(() => {
+                if (!metaData) {
+                    return undefined;
+                }
+                setLoading(true);
+                const isTracker = metaData.programType === 'WITH_REGISTRATION';
+                const endDate = endDateState ?? new Date().toISOString().split('T')[0];
+                if (isTracker) {
+                    d2.trackerModule.trackedEntity
+                        .setEndDate(endDate)
+                        .setStartDate(startDateState)
+                        .setProgram(this.programId)
+                        .setOrgUnit(orgUnitState)
+                        .setOuMode(this.ouMode)
+                        .setFilters(dataQueryFiltersState)
+                        .setPagination(new Pager({
+                        pageSize: pager.pageSize,
+                        page: pager.page,
+                    }))
+                        .setOrderCriterias([
+                        new DataOrderCriteria().setField('createdAt').setOrder('desc'),
+                    ])
+                        .get()
+                        .then((response) => {
+                        const trackedEntityInstances = Array.isArray(response.data)
+                            ? response.data
+                            : [response.data];
+                        const orgUnitIdsFromEnrollments = new Set(trackedEntityInstances.map((tei) => tei.latestEnrollment.orgUnit));
+                        const uniqueOrgUnitIds = [...orgUnitIdsFromEnrollments];
+                        this.lineListService.fetchOrgUnits(uniqueOrgUnitIds).subscribe({
+                            next: (fetchedOrgUnits) => {
+                                const trackedEntityResponse = {
+                                    trackedEntityInstances: response.data,
+                                    pager: pager,
+                                    orgUnitsMap: fetchedOrgUnits,
+                                };
+                                const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityTableData({ data: trackedEntityResponse }, this.programId, pager, metaData);
+                                setFilteredColumns((prev) => filteredEntityColumns.length > 0
+                                    ? filteredEntityColumns
+                                    : prev);
+                                const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...columns], this.actionOptions);
+                                const pagerResponse = response.pagination;
+                                setLoading(false);
+                                setColumns(finalColumns);
+                                setData(data);
+                                setPager(new Pager(pagerResponse || {}));
+                                setOrgUnitLabel(orgUnitLabel);
+                            },
+                            error: (err) => {
+                                console.error('Error fetching org units:', err);
+                                setLoading(false);
+                            },
+                        });
+                    });
+                }
+                else {
+                    //TODO: TO IMPLEMEMNT EVENT QUERY FOR FILTERING EVENTS WHEN PROGRAM STAGE IS PASSED OR DEALING WITH EVENT PROGRAM USING TRACKER SDK QUERY
+                }
             }, [
+                metaData,
                 programIdState,
                 orgUnitState,
                 programStageIdState,
@@ -4399,50 +3842,25 @@ class LineListTableComponent extends ReactWrapperModule {
                 pager.page,
                 pager.pageSize,
                 isOptionSetNameVisibleState,
+                dataQueryFiltersState,
             ]);
-            const handleApprovalClick = () => {
-                setIsButtonLoading(true);
-                const subscription = this.lineListService
-                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, 1000, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
-                    .pipe(take(1))
-                    .subscribe((response) => {
-                    if ('trackedEntities' in response.data ||
-                        'instances' in response.data) {
-                        const trackedEntityInstances = response.data.trackedEntities;
-                        // Map TEIs to objects with teiId and enrollmentId
-                        const teiEnrollmentList = trackedEntityInstances
-                            .map((tei) => {
-                            const matchingEnrollment = tei.enrollments?.find((enrollment) => enrollment.program === this.programId);
-                            return matchingEnrollment
-                                ? {
-                                    teiId: tei.trackedEntity,
-                                    enrollmentId: matchingEnrollment.enrollment,
-                                }
-                                : null;
-                        })
-                            .filter(Boolean);
-                        this.approvalSelected.emit(teiEnrollmentList);
-                    }
-                    else {
-                        this.approvalSelected.emit([]);
-                    }
-                    setIsButtonLoading(false);
-                });
-                return () => {
-                    subscription.unsubscribe();
-                };
-            };
             const handleInputChange = (key, value) => {
                 setInputValues((prevValues) => ({
                     ...prevValues,
                     [key]: value ?? '',
                 }));
-                setAttributeFiltersState((prevFilters = []) => {
+                setDataQueryFiltersState((prevFilters) => {
                     // Remove old filter for this key
                     const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
                     // Only add new filter if value is not empty
                     const updatedFilters = value.trim()
-                        ? [...filteredFilters, { attribute: key, operator: 'like', value }]
+                        ? [
+                            ...filteredFilters,
+                            new DataQueryFilter()
+                                .setAttribute(key)
+                                .setCondition(DataFilterCondition.Like)
+                                .setValue(value),
+                        ]
                         : filteredFilters;
                     return updatedFilters;
                 });
@@ -4453,175 +3871,69 @@ class LineListTableComponent extends ReactWrapperModule {
                     ...prevValues,
                     [key]: value ?? '',
                 }));
-                setAttributeFiltersState((prevFilters = []) => {
-                    // Remove old filter for this key
+                setDataQueryFiltersState((prevFilters = []) => {
+                    // Remove existing filter for the same key (attribute)
                     const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
                     // Only add new filter if value is not empty
                     const updatedFilters = value.trim()
-                        ? [...filteredFilters, { attribute: key, operator: 'eq', value }]
+                        ? [
+                            ...filteredFilters,
+                            new DataQueryFilter()
+                                .setAttribute(key)
+                                .setCondition(DataFilterCondition.Equal)
+                                .setValue(value),
+                        ]
                         : filteredFilters;
                     return updatedFilters;
                 });
             };
             const handleDateSelect = (key, selectedDate) => {
-                const selectedDateString = selectedDate?.calendarDateString ?? ''; // Default to empty string if null
+                const selectedDateString = selectedDate?.calendarDateString ?? '';
                 // Update dateStates
                 setDateStates((prevDateStates) => ({
                     ...prevDateStates,
-                    [key]: selectedDateString, // Will set it to empty if date is cleared
+                    [key]: selectedDateString,
                 }));
-                // Update attributeFiltersState to remove filter if date is cleared
-                setAttributeFiltersState((prevFilters = []) => {
-                    // Remove old filter for this key if the date is empty
-                    const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
-                    // Only add a filter if the date is not empty
+                // Update dataQueryFilters
+                setDataQueryFiltersState((prevFilters) => {
+                    const filteredFilters = (prevFilters || []).filter((f) => f.attribute !== key);
                     const updatedFilters = selectedDateString.trim()
                         ? [
                             ...filteredFilters,
-                            { attribute: key, operator: 'like', value: selectedDateString },
+                            new DataQueryFilter()
+                                .setAttribute(key)
+                                .setCondition(DataFilterCondition.Equal)
+                                .setValue(selectedDateString),
                         ]
-                        : filteredFilters; // If empty, just keep the filteredFilters as they are
+                        : filteredFilters;
                     return updatedFilters;
                 });
             };
-            return (React__default.createElement("div", null,
-                React__default.createElement("div", null, valueMatch &&
-                    this.dispatchTeis &&
-                    (isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (
-                    //TODO: this implementation should be done where the library will be consumed
-                    React__default.createElement(Button$1, { style: {
-                            backgroundColor: '#3b82f6',
-                            color: 'white',
-                            padding: '8px 16px',
-                            borderRadius: '4px',
-                            cursor: 'pointer',
-                        }, onClick: handleApprovalClick, primary: true }, this.buttonLabel)))),
-                loading ? (React__default.createElement("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 8,
-                        padding: 8,
-                    } },
-                    React__default.createElement(CircularLoader$1, { small: true }),
-                    React__default.createElement("div", { style: {
-                            fontSize: 14,
-                        } }, "Loading"))) : (
-                // <div>
-                //   <div/>
-                React__default.createElement("div", null,
-                    React__default.createElement(Modal$1, { hide: hide, position: "middle" },
-                        React__default.createElement(ModalTitle$1, null, "Select organization unit"),
-                        React__default.createElement(ModalContent$1, null,
-                            React__default.createElement(OrgUnitFormField$1, { key: selectedOrgUnit, onSelectOrgUnit: (selectedOrgUnit) => {
-                                    setSelectedOrgUnit(selectedOrgUnit.displayName);
-                                    setOrgUnitState(selectedOrgUnit.id);
-                                    setHide(true);
-                                } })),
-                        React__default.createElement(ModalActions$1, null,
-                            React__default.createElement(ButtonStrip$1, { end: true },
-                                React__default.createElement(Button$1, { onClick: () => setHide(true), secondary: true }, "Close")))),
-                    this.showFilters && (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
-                        React__default.createElement("div", { style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: '10px',
-                                flexWrap: 'wrap',
-                            } },
-                            React__default.createElement(InputField$1, { key: "location", 
-                                //label={orgUnitLabel}
-                                label: orgUnitLabel ? orgUnitLabel : 'registering unit', value: selectedOrgUnit, onFocus: () => setHide(false), className: "custom-input", onChange: (event) => {
-                                    setSelectedOrgUnit(event.value);
-                                    setOrgUnitState(defaultOrgUnit);
-                                } }),
-                            React__default.createElement(CalendarInput, { label: "Start date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: startDateState, onDateSelect: (selectedDate) => {
-                                    if (selectedDate?.calendarDateString) {
-                                        setStartDateState(selectedDate.calendarDateString);
-                                    }
-                                    //  setStartDateState(selectedDate.calendarDateString);
-                                } }),
-                            React__default.createElement(CalendarInput, { label: "End date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: endDateState, onDateSelect: (selectedDate) => {
-                                    setEndDateState(selectedDate.calendarDateString);
-                                } }),
-                            (visibleFilters ?? []).map(({ label, key, valueType, options }) => {
-                                // Render CalendarInput for DATE fields
-                                if (valueType === 'DATE') {
-                                    return (React__default.createElement(CalendarInput, { key: key, label: `${label}:`, calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: dateStates[key] || '', onDateSelect: (selectedDate) => handleDateSelect(key, selectedDate) }));
-                                }
-                                // Render SingleSelectField if options exist
-                                if (options && options.options.length > 0) {
-                                    return (React__default.createElement(SingleSelectField, { key: key, label: `${label}:`, selected: inputValues[key] || '', className: "custom-select-input", clearable: true, onChange: ({ selected }) => {
-                                            setInputValues((prevValues) => ({
-                                                ...prevValues,
-                                                [key]: selected ?? '',
-                                            }));
-                                            handleInputChangeForSelectField(key, selected ?? '');
-                                        } }, (options.options ?? []).map((opt) => (React__default.createElement(SingleSelectOption, { key: opt.id, label: opt.name, value: opt.code })))));
-                                }
-                                // Fallback: default InputField
-                                return (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', clearable: true, onChange: (e) => {
-                                        let currentValue = '';
-                                        if ('target' in e && e.target) {
-                                            currentValue = e.target.value;
-                                        }
-                                        else if ('value' in e) {
-                                            currentValue = e.value ?? '';
-                                        }
-                                        setInputValues((prevValues) => ({
-                                            ...prevValues,
-                                            [key]: currentValue,
-                                        }));
-                                        if (currentValue === '') {
-                                            handleInputChange(key, '');
-                                        }
-                                    }, onBlur: (e) => {
-                                        let currentValue = '';
-                                        if ('target' in e && e.target) {
-                                            currentValue = e.target.value;
-                                        }
-                                        else if ('value' in e) {
-                                            currentValue = e.value ?? '';
-                                        }
-                                        if (currentValue !== '' &&
-                                            currentValue !== prevValue) {
-                                            handleInputChange(key, currentValue);
-                                            setPrevValue(currentValue);
-                                        }
-                                    } }));
-                            }),
-                            React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))),
-                    React__default.createElement(DataTable, null,
-                        React__default.createElement(TableHead, null,
-                            React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
-                        React__default.createElement(TableBody, null, data.length > 0 ? (data.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions'
-                            ? this.actionOptions && (React__default.createElement(DataTableActions, { actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, onClick: (option) => {
-                                    if (option.onClick) {
-                                        option.onClick(row);
-                                    }
-                                    this.actionSelected.emit({
-                                        action: option.label,
-                                        row,
-                                    });
-                                } }))
-                            : row[col.key] || '--' // Display '--' if value is undefined or null
-                        ))))))) : (React__default.createElement(DataTableRow, null,
-                            React__default.createElement(DataTableCell, { colSpan: columns.length?.toString(), style: {
-                                    textAlign: 'center',
-                                    fontWeight: 'bold',
-                                    color: 'grey',
-                                    padding: '20px',
-                                } }, "No data found")))),
-                        React__default.createElement(TableFoot, null,
-                            React__default.createElement(DataTableRow, null,
-                                React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
-                                    React__default.createElement("div", null,
-                                        React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
-                                                const newPageSize = Number(pageSize);
-                                                setPager((prev) => ({
-                                                    ...prev,
-                                                    page: 1,
-                                                    pageSize: newPageSize,
-                                                }));
-                                            }, pageSizes: ['10', '20', '50', '100', '500'] }))))))))));
+            function getTextColorFromBackGround(hex) {
+                // Remove the hash if present
+                hex = hex.replace('#', '');
+                // Convert to RGB
+                const r = parseInt(hex.substr(0, 2), 16);
+                const g = parseInt(hex.substr(2, 2), 16);
+                const b = parseInt(hex.substr(4, 2), 16);
+                // YIQ formula to calculate brightness
+                const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+                // Return black for light backgrounds, white for dark backgrounds
+                return yiq >= 128 ? colors$1.grey700 : '#FFFFFF';
+            }
+            return (React__default.createElement("div", null, loading ? (React__default.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: 8,
+                } },
+                React__default.createElement(CircularLoader$1, { small: true }),
+                React__default.createElement("div", { style: {
+                        fontSize: 14,
+                    } }, "Loading"))) : (React__default.createElement("div", null,
+                React__default.createElement(OrgUnitSelector, { hide: hide, setHide: setHide, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState }),
+                this.showFilters && (React__default.createElement(FilterToolbar, { orgUnitLabel: orgUnitLabel, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, defaultOrgUnit: defaultOrgUnit, setHide: setHide, startDateState: startDateState, setStartDateState: setStartDateState, endDateState: endDateState, setEndDateState: setEndDateState, visibleFilters: visibleFilters, dateStates: dateStates, inputValues: inputValues, setInputValues: setInputValues, handleInputChange: handleInputChange, handleInputChangeForSelectField: handleInputChangeForSelectField, handleDateSelect: handleDateSelect, prevValue: prevValue, setPrevValue: setPrevValue, showAllFilters: showAllFilters, setShowAllFilters: setShowAllFilters })),
+                React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected })))));
         };
     }
     ngOnChanges(changes) {
@@ -4660,7 +3972,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:14px!important}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:14px!important}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -4683,22 +3995,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], endDate: [{
                 type: Input
-            }], filters: [{
+            }], dataQueryFilters: [{
                 type: Input
             }], ouMode: [{
                 type: Input
-            }], dispatchTeis: [{
-                type: Input
-            }], actionSelected: [{
-                type: Output
-            }], approvalSelected: [{
-                type: Output
             }], isButtonLoading: [{
                 type: Input
-            }], buttonLabel: [{
-                type: Input
-            }], firstValue: [{
-                type: Output
             }], buttonFilter: [{
                 type: Input
             }], filterRootOrgUnit: [{
@@ -4707,6 +4009,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], isOptionSetNameVisible: [{
                 type: Input
+            }], actionSelected: [{
+                type: Output
+            }], approvalSelected: [{
+                type: Output
             }] } });
 
 class LineListModule {
@@ -4878,7 +4184,7 @@ class DataTableUIComponent extends ReactWrapperModule {
                     React__default.createElement(DataTableRow, null,
                         columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.column }, col.display))),
                         this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableColumnHeader, null, "Actions")))),
-                React__default.createElement(TableBody, null, tableData.map((row, rowIndex) => (React__default.createElement(DataTableRow, { key: rowIndex },
+                React__default.createElement(TableBody$1, null, tableData.map((row, rowIndex) => (React__default.createElement(DataTableRow, { key: rowIndex },
                     columns.map((col) => (React__default.createElement(DataTableCell, { key: col.column }, row[col.column] || '-'))),
                     this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableCell, null,
                         React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.(row) }))))))),
@@ -7909,28 +7215,29 @@ class ProgramEntryFormMetaData {
         return metaData;
     }
     get formFields() {
-        if (!this.metaData) {
+        if (!this.program) {
             return [];
         }
-        return new ProgramEntryFormFieldUtil(this.metaData, this.config).fields;
+        return new ProgramEntryFormFieldUtil(this.program, this.config).fields;
     }
     get sections() {
-        if (!this.metaData || this.config.displayType !== 'SECTION') {
+        if (!this.program || this.config.displayType !== 'SECTION') {
             return [];
         }
-        return new ProgramEntryFormSectionUtil(this.metaData, this.config).sections;
+        return new ProgramEntryFormSectionUtil(this.program, this.config).sections;
     }
     get rules() {
-        if (!this.metaData || !this.metaData.programRules) {
+        if (!this.program || !this.program.programRules) {
             return [];
         }
-        return this.metaData.programRules.map((programRule) => new MetadataRule(programRule, this.metaData.programRuleVariables || []).toJson());
+        return this.program.programRules.map((programRule) => new MetadataRule(programRule, this.program.programRuleVariables || []).toJson());
     }
     toJson() {
         return {
-            id: this.metaData?.id,
-            name: this.metaData?.name,
-            description: this.metaData?.description,
+            id: this.program?.id,
+            name: this.program?.name,
+            description: this.program?.description,
+            program: this.program,
             formFields: this.formFields,
             sections: this.sections,
             rules: this.rules,
@@ -7938,9 +7245,9 @@ class ProgramEntryFormMetaData {
     }
     async get() {
         try {
-            const metaData = await this.#getProgramMetaData();
-            if (metaData) {
-                this.metaData = metaData;
+            const program = await this.#getProgramMetaData();
+            if (program) {
+                this.program = program;
                 return this.toJson();
             }
             return null;
@@ -8088,11 +7395,19 @@ class ProgramEntryFormModule {
         this.instanceQuery = this.d2.trackerModule.trackedEntity
             .setProgram(this.config().program)
             .setOrgUnit(this.orgUnit());
-        return this.trackedEntity()
-            ? (await this.instanceQuery
-                .setTrackedEntity(this.trackedEntity())
-                .get()).data || (await this.instanceQuery.create())
-            : await this.instanceQuery.create();
+        if (!this.trackedEntity) {
+            return await this.instanceQuery.create();
+        }
+        const instance = (await this.instanceQuery
+            .setTrackedEntity(this.trackedEntity())
+            .get()).data;
+        if (!instance) {
+            return await this.instanceQuery.create();
+        }
+        if (this.metaData()?.program) {
+            instance.setFields(this.metaData().program);
+        }
+        return instance;
     }
     async #getEventInstance() {
         this.instanceQuery = this.d2.eventModule.event
@@ -8117,11 +7432,11 @@ class ProgramEntryFormModule {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ProgramEntryFormModule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n  <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance()!\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form" }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n\n  <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance()!\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form" }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ProgramEntryFormModule, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-program-entry-form', imports: [CommonModule, D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n  <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance()!\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-program-entry-form', imports: [CommonModule, D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n\n  <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance()!\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
         }], propDecorators: { instanceSave: [{
                 type: Output
             }], instanceSaveCompleted: [{