@iapps/ng-dhis2-ui 1.2.0 → 1.2.2

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

@@ -25,13 +25,13 @@ 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, 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 { 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, CircularLoader as CircularLoader$1, Chip, 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, 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 { Pager, DataOrderCriteria, DataQueryFilter, DataFilterCondition, ProgramRuleEngine } from '@iapps/d2-web-sdk';
 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';
@@ -3106,215 +3106,317 @@ 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) => {
-    let teisRaw = response.data
-        .trackedEntityInstances;
-    const teis = Array.isArray(teisRaw)
-        ? teisRaw
-        : [teisRaw];
-    const programTrackedEntityAttributes = metaData.programTrackedEntityAttributes;
-    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 disaplayInListAttributes = metaData.displayInListTrackedEntityAttributes;
-        let attributesData = matchingEnrollment.attributes;
-        let 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) || '-',
-        };
-        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',
+// 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.
+// @flow
+const orgUnitFieldStyles$1 = {
+    container: {
+        border: '1px solid',
+        borderColor: colors$1.grey400,
+        borderRadius: '3px',
+        height: '100%',
+        width: '100%',
+        zIndex: 0,
+        backgroundColor: 'white',
+    },
+    searchField: {
+        height: '40px',
+        overflow: 'hidden',
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        boxShadow: 'none',
+        border: 'none',
+    },
+    debounceFieldContainer: {
+        padding: '8px',
+        background: colors$1.grey100,
+        borderTopLeftRadius: '3px',
+        borderTopRightRadius: '3px',
+    },
+    orgUnitTreeContainer: {
+        borderBottomLeftRadius: '3px',
+        borderBottomRightRadius: '3px',
+        overflow: 'auto',
+    },
+    orgUnitTreeLoader: {
+        padding: '8px',
+    },
+    orgUnitFieldLabel: {
+        marginBottom: '8px',
+        display: 'block',
+        boxSizing: 'border-box',
+        fontSize: '14px',
+        lineHeight: '19px',
+        color: 'rgb(33, 41, 52)',
+        padding: '0',
+    },
+    orgUnitFieldRequiredLabel: {
+        paddingInlineStart: '4px',
     },
 };
-
-// Helper function to generate a unique class name
-const generateClassName$1 = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
-// Helper function to convert camelCased properties to hyphenated CSS properties
-const convertStylesToCSS$1 = (className, styles) => {
-    let cssString = `.${className} {`;
-    for (const key in styles) {
-        if (typeof styles[key] === "object" && key.startsWith("@media")) {
-            const mediaStyles = convertStylesToCSS$1(className, styles[key]);
-            cssString += `${key} { ${mediaStyles} }`;
+const OrgUnitFormField$1 = (props) => {
+    const { onSelectOrgUnit, label, required, selected, disabled, key } = props;
+    const d2 = window?.d2Web;
+    const classes = useDynamicStyles$2(orgUnitFieldStyles$1);
+    const config = useMemo(() => {
+        return d2.systemInfo?.toInitObject();
+    }, []);
+    const rootOrgUnits = useMemo(() => {
+        return d2.currentUser?.organisationUnits || [];
+    }, []);
+    const getExpandedItems = () => {
+        if (rootOrgUnits && rootOrgUnits.length === 1) {
+            return [`/${rootOrgUnits[0].id}`];
         }
-        else if (key.startsWith("&:")) {
-            const pseudoClass = key.replace("&", "");
-            cssString += `${pseudoClass} { ${convertStylesToCSS$1("", styles[key])} }`;
+        else if (rootOrgUnits?.length > 1) {
+            return rootOrgUnits.map((root) => root.path);
+        }
+        return undefined;
+    };
+    const initiallyExpanded = getExpandedItems();
+    const [searchText, setSearchText] = useState(undefined);
+    const [loading, setLoading] = useState(true);
+    const [searchLoading, setSearchLoading] = useState();
+    const [searchData, setSearchData] = useState();
+    const [selectedOrgUnit, setSelectedOrgUnit] = useState();
+    const [expanded, setExpanded] = useState(initiallyExpanded);
+    const [showOrgUnitTree, setShowOrgUnitTree] = useState(!selected);
+    useEffect(() => {
+        setLoading(true);
+        if (selected) {
+            d2.httpInstance
+                .get(`organisationUnits/${selected}.json?fields=id,displayName,path,code,ancestors[id,displayName]`)
+                .then((response) => {
+                if (response.data) {
+                    setSelectedOrgUnit(response.data);
+                    handleExpand({ path: response.data['path'] });
+                    setLoading(false);
+                }
+            });
+        }
+        else {
+            setShowOrgUnitTree(true);
+            setLoading(false);
+        }
+    }, []);
+    const highlighted = useMemo(() => {
+        if (selectedOrgUnit) {
+            return [selectedOrgUnit['path']];
+        }
+        return undefined;
+    }, [selectedOrgUnit]);
+    const selectedOrgUnitLabel = useMemo(() => {
+        if (selectedOrgUnit) {
+            return [
+                ...(selectedOrgUnit['ancestors'] || []),
+                selectedOrgUnit,
+            ]
+                .map((orgUnit) => orgUnit['displayName'])
+                .join(' / ');
+        }
+        return '';
+    }, [selectedOrgUnit]);
+    const handleExpand = ({ path }) => {
+        if (expanded && !expanded.includes(path)) {
+            setExpanded([...expanded, path]);
+        }
+    };
+    const handleCollapse = ({ path }) => {
+        const pathIndex = expanded?.indexOf(path);
+        if (pathIndex && pathIndex !== -1 && expanded) {
+            const updatedExpanded = pathIndex === 0
+                ? expanded.slice(1)
+                : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];
+            setExpanded(updatedExpanded);
+        }
+    };
+    const handleOrgUnitSearch = async (query) => {
+        setSearchLoading(true);
+        try {
+            const searchResponse = await d2.httpInstance.get(`organisationUnits.json?fields=id,displayName,path,publicAccess,access,lastUpdated,children[id,displayName,publicAccess,access,path,children::isNotEmpty]&paging=true&query=${query}&withinUserSearchHierarchy=true&pageSize=15`);
+            setSearchData((searchResponse.data || {})['organisationUnits']);
+            setSearchLoading(false);
+        }
+        catch (e) {
+            setSearchLoading(false);
+        }
+    };
+    const debouncedSearch = useCallback(debounce((value) => {
+        handleOrgUnitSearch(value);
+    }, 500), []);
+    const handleFilterChange = (event) => {
+        setSearchText(event.value);
+        debouncedSearch(event.value);
+    };
+    const ready = useMemo(() => {
+        return searchText?.length ? !searchLoading : !loading;
+    }, [searchText, searchLoading, loading]);
+    const renderOrgUnitTree = () => {
+        if (searchText && searchText?.length > 0) {
+            if (searchLoading) {
+                return (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                    React__default.createElement(CircularLoader$1, { small: true })));
+            }
+            return (ready && (React__default.createElement(OrganisationUnitTree, { key: `${key}-search`, roots: searchData?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
+                    setSelectedOrgUnit(event);
+                    setShowOrgUnitTree(false);
+                    onSelectOrgUnit(event);
+                } })));
+        }
+        return (React__default.createElement(OrganisationUnitTree, { key: key, roots: rootOrgUnits?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
+                setSelectedOrgUnit(event);
+                setShowOrgUnitTree(false);
+                onSelectOrgUnit(event);
+            } }));
+    };
+    const handleBlur = () => {
+        // onBlur && onBlur(null);
+    };
+    return (config && (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
+        React__default.createElement("div", null,
+            label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
+                React__default.createElement("span", null, label),
+                required ? (React__default.createElement("span", { className: classes.orgUnitFieldRequiredLabel }, "*")) : (React__default.createElement(React__default.Fragment, null)))),
+            !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Tooltip, { content: selectedOrgUnitLabel },
+                    React__default.createElement(Chip, { onRemove: () => {
+                            setShowOrgUnitTree(true);
+                        } }, selectedOrgUnit.displayName)))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                React__default.createElement(CircularLoader$1, { small: true })))) : (React__default.createElement("div", { className: classes.container },
+                React__default.createElement("div", { className: classes.debounceFieldContainer },
+                    React__default.createElement(InputField$1, { placeholder: "Search", value: searchText, disabled: disabled, onChange: handleFilterChange })),
+                loading ? (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                    React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree()))))))));
+};
+
+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")))));
+
+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", clearable: !!startDateState, date: startDateState, onDateSelect: (selectedDate) => {
+                if (!(selectedDate.calendarDateString === null)) {
+                    setStartDateState(selectedDate.calendarDateString);
+                }
+                console.log(selectedDate.calendarDateString);
+            } }),
+        React__default.createElement(CalendarInput, { label: "End date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", clearable: !!endDateState, date: endDateState, onDateSelect: (selectedDate) => {
+                if (!(selectedDate.calendarDateString === null)) {
+                    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", clearable: !!dateStates[key], 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'))));
+
+// export const TableHeader = ({
+//   columns,
+//   data,
+// }: {
+//   columns: any[];
+//   data: TableRow;
+// }) => {
+//   const [checked, setChecked] = useState(false);
+//   const handleCheckboxChange = () => {
+//     const newChecked = !checked;
+//     setChecked(newChecked);
+//     console.log('Header checkbox toggled. Checked:', newChecked);
+//     console.log('Row selected:', data);
+//   };
+//   return (
+//     <TableHead>
+//       <DataTableRow>
+//         <DataTableColumnHeader width="48px">
+//           <Checkbox checked={checked} onChange={handleCheckboxChange} />
+//         </DataTableColumnHeader>
+//         {columns.map((col) => (
+//           <DataTableColumnHeader key={col.key}>
+//             {col.label}
+//           </DataTableColumnHeader>
+//         ))}
+//       </DataTableRow>
+//     </TableHead>
+//   );
+// };
+const TableHeader = ({ columns, allSelected, onSelectAll, selectable, }) => {
+    const handleCheckboxChange = () => {
+        onSelectAll(!allSelected);
+    };
+    return (React__default.createElement(TableHead, null,
+        React__default.createElement(DataTableRow, null,
+            selectable && (React__default.createElement(DataTableColumnHeader, { width: "48px" },
+                React__default.createElement(Checkbox, { checked: allSelected, onChange: handleCheckboxChange }))),
+            columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))));
+};
+
+const dropdownStyles$1 = {
+    layer: {
+        zIndex: '1 !important',
+    },
+};
+
+// Helper function to generate a unique class name
+const generateClassName$1 = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+// Helper function to convert camelCased properties to hyphenated CSS properties
+const convertStylesToCSS$1 = (className, styles) => {
+    let cssString = `.${className} {`;
+    for (const key in styles) {
+        if (typeof styles[key] === "object" && key.startsWith("@media")) {
+            const mediaStyles = convertStylesToCSS$1(className, styles[key]);
+            cssString += `${key} { ${mediaStyles} }`;
+        }
+        else if (key.startsWith("&:")) {
+            const pseudoClass = key.replace("&", "");
+            cssString += `${pseudoClass} { ${convertStylesToCSS$1("", styles[key])} }`;
         }
         else {
             const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
@@ -3396,7 +3498,7 @@ const DropdownMenu$1 = (props) => {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 const DataTableActions = (props) => {
-    const { actionOptions, actionOptionOrientation, onClick } = props;
+    const { data, actionOptions, actionOptionOrientation, onClick } = props;
     switch (actionOptionOrientation) {
         case 'BUTTON':
             return (React__default.createElement(ButtonStrip$1, null, actionOptions.map((option) => (React__default.createElement(Button$1, { key: option.label, onClick: () => onClick(option), icon: option.icon ? React__default.createElement(option.icon, null) : React__default.createElement(React__default.Fragment, null), small: true, destructive: option.destructive }, !option.iconOnly ? option.label : '')))));
@@ -3419,289 +3521,385 @@ const DataTableActions = (props) => {
                     color: option.destructive ? colors$1.red700 : colors$1.grey900,
                 }, key: option.label, onClick: (event) => {
                     event.stopPropagation();
-                    onClick(option);
-                } },
-                option.icon ? React__default.createElement(option.icon, null) : React__default.createElement(React__default.Fragment, null),
-                !option.iconOnly ? React__default.createElement("span", null, option.label) : React__default.createElement(React__default.Fragment, null))))));
-        default:
-            return React__default.createElement(React__default.Fragment, null);
-    }
-};
-
-// 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.
-
-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) => {
-                if (option.onClick)
-                    option.onClick(row);
-                actionSelected.emit({ action: option.label, row });
-            } }))));
-    }
-    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.
-// @flow
-const orgUnitFieldStyles$1 = {
-    container: {
-        border: '1px solid',
-        borderColor: colors$1.grey400,
-        borderRadius: '3px',
-        height: '100%',
-        width: '100%',
-        zIndex: 0,
-        backgroundColor: 'white',
-    },
-    searchField: {
-        height: '40px',
-        overflow: 'hidden',
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        boxShadow: 'none',
-        border: 'none',
-    },
-    debounceFieldContainer: {
-        padding: '8px',
-        background: colors$1.grey100,
-        borderTopLeftRadius: '3px',
-        borderTopRightRadius: '3px',
-    },
-    orgUnitTreeContainer: {
-        borderBottomLeftRadius: '3px',
-        borderBottomRightRadius: '3px',
-        overflow: 'auto',
-    },
-    orgUnitTreeLoader: {
-        padding: '8px',
-    },
-    orgUnitFieldLabel: {
-        marginBottom: '8px',
-        display: 'block',
-        boxSizing: 'border-box',
-        fontSize: '14px',
-        lineHeight: '19px',
-        color: 'rgb(33, 41, 52)',
-        padding: '0',
-    },
-    orgUnitFieldRequiredLabel: {
-        paddingInlineStart: '4px',
-    },
-};
-const OrgUnitFormField$1 = (props) => {
-    const { onSelectOrgUnit, label, required, selected, disabled, key } = props;
-    const d2 = window?.d2Web;
-    const classes = useDynamicStyles$2(orgUnitFieldStyles$1);
-    const config = useMemo(() => {
-        return d2.systemInfo?.toInitObject();
-    }, []);
-    const rootOrgUnits = useMemo(() => {
-        return d2.currentUser?.organisationUnits || [];
-    }, []);
-    const getExpandedItems = () => {
-        if (rootOrgUnits && rootOrgUnits.length === 1) {
-            return [`/${rootOrgUnits[0].id}`];
-        }
-        else if (rootOrgUnits?.length > 1) {
-            return rootOrgUnits.map((root) => root.path);
-        }
-        return undefined;
-    };
-    const initiallyExpanded = getExpandedItems();
-    const [searchText, setSearchText] = useState(undefined);
-    const [loading, setLoading] = useState(true);
-    const [searchLoading, setSearchLoading] = useState();
-    const [searchData, setSearchData] = useState();
-    const [selectedOrgUnit, setSelectedOrgUnit] = useState();
-    const [expanded, setExpanded] = useState(initiallyExpanded);
-    const [showOrgUnitTree, setShowOrgUnitTree] = useState(!selected);
-    useEffect(() => {
-        setLoading(true);
-        if (selected) {
-            d2.httpInstance
-                .get(`organisationUnits/${selected}.json?fields=id,displayName,path,code,ancestors[id,displayName]`)
-                .then((response) => {
-                if (response.data) {
-                    setSelectedOrgUnit(response.data);
-                    handleExpand({ path: response.data['path'] });
-                    setLoading(false);
-                }
-            });
-        }
-        else {
-            setShowOrgUnitTree(true);
-            setLoading(false);
-        }
-    }, []);
-    const highlighted = useMemo(() => {
-        if (selectedOrgUnit) {
-            return [selectedOrgUnit['path']];
-        }
-        return undefined;
-    }, [selectedOrgUnit]);
-    const selectedOrgUnitLabel = useMemo(() => {
-        if (selectedOrgUnit) {
-            return [
-                ...(selectedOrgUnit['ancestors'] || []),
-                selectedOrgUnit,
-            ]
-                .map((orgUnit) => orgUnit['displayName'])
-                .join(' / ');
-        }
-        return '';
-    }, [selectedOrgUnit]);
-    const handleExpand = ({ path }) => {
-        if (expanded && !expanded.includes(path)) {
-            setExpanded([...expanded, path]);
-        }
-    };
-    const handleCollapse = ({ path }) => {
-        const pathIndex = expanded?.indexOf(path);
-        if (pathIndex && pathIndex !== -1 && expanded) {
-            const updatedExpanded = pathIndex === 0
-                ? expanded.slice(1)
-                : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];
-            setExpanded(updatedExpanded);
-        }
-    };
-    const handleOrgUnitSearch = async (query) => {
-        setSearchLoading(true);
-        try {
-            const searchResponse = await d2.httpInstance.get(`organisationUnits.json?fields=id,displayName,path,publicAccess,access,lastUpdated,children[id,displayName,publicAccess,access,path,children::isNotEmpty]&paging=true&query=${query}&withinUserSearchHierarchy=true&pageSize=15`);
-            setSearchData((searchResponse.data || {})['organisationUnits']);
-            setSearchLoading(false);
-        }
-        catch (e) {
-            setSearchLoading(false);
-        }
-    };
-    const debouncedSearch = useCallback(debounce((value) => {
-        handleOrgUnitSearch(value);
-    }, 500), []);
-    const handleFilterChange = (event) => {
-        setSearchText(event.value);
-        debouncedSearch(event.value);
+                    onClick(option);
+                } },
+                option.icon ? React__default.createElement(option.icon, null) : React__default.createElement(React__default.Fragment, null),
+                !option.iconOnly ? React__default.createElement("span", null, option.label) : React__default.createElement(React__default.Fragment, null))))));
+        default:
+            return React__default.createElement(React__default.Fragment, null);
+    }
+};
+
+// 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.
+
+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',
+                        fontWeight: 'lighter',
+                        paddingTop: 4,
+                        paddingBottom: 4,
+                        paddingLeft: 8,
+                        paddingRight: 8,
+                        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 || '-')));
+};
+
+// export const TableRow = ({
+//   row,
+//   columns,
+//   getTextColorFromBackGround,
+//   actionOptions,
+//   actionOptionOrientation,
+//   actionSelected,
+// }: any) => {
+//   const [isChecked, setIsChecked] = useState(false);
+//   const handleCheckBoxChange = () => {
+//     const newState = !isChecked;
+//     setIsChecked(newState);
+//     console.log('Row selected:', row, 'Checked:', newState);
+//   };
+//   return (
+//     <DataTableRow key={row.index.value}>
+//       <DataTableCell width="48px">
+//         <Checkbox
+//           onChange={handleCheckBoxChange}
+//           value="id_1"
+//           checked={isChecked}
+//         />
+//       </DataTableCell>
+//       {columns.map((col: any) => {
+//         if (col.key === 'actions') {
+//           return (
+//             <DataTableCell key={col.key}>
+//               {actionOptions && (
+//                 <DataTableActions
+//                   actionOptions={actionOptions}
+//                   actionOptionOrientation={actionOptionOrientation}
+//                   onClick={(option) => {
+//                     const data = row['responseData']?.['value'];
+//                     if (option.onClick) option.onClick(data);
+//                     actionSelected.emit({
+//                       action: option.label,
+//                       data,
+//                     });
+//                   }}
+//                 />
+//               )}
+//             </DataTableCell>
+//           );
+//         }
+//         return (
+//           <TableCell
+//             key={col.key}
+//             cell={row[col.key]}
+//             getTextColorFromBackGround={getTextColorFromBackGround}
+//           />
+//         );
+//       })}
+//     </DataTableRow>
+//   );
+// };
+const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, isChecked, onToggle, selectable, }) => {
+    const handleCheckBoxChange = () => {
+        onToggle(row);
     };
-    const ready = useMemo(() => {
-        return searchText?.length ? !searchLoading : !loading;
-    }, [searchText, searchLoading, loading]);
-    const renderOrgUnitTree = () => {
-        if (searchText && searchText?.length > 0) {
-            if (searchLoading) {
-                return (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
-                    React__default.createElement(CircularLoader$1, { small: true })));
+    return (React__default.createElement(DataTableRow, { key: row.index.value, selected: isChecked },
+        selectable && (React__default.createElement(DataTableCell, { width: "48px" },
+            React__default.createElement(Checkbox, { onChange: handleCheckBoxChange, checked: isChecked }))),
+        columns.map((col) => {
+            if (col.key === 'actions') {
+                return (React__default.createElement(DataTableCell, { key: col.key }, actionOptions && (React__default.createElement(DataTableActions, { actionOptions: actionOptions, data: row, actionOptionOrientation: actionOptionOrientation, onClick: (option) => {
+                        const data = row['responseData']?.['value'];
+                        if (option.onClick)
+                            option.onClick(data);
+                        actionSelected.emit({
+                            action: option.label,
+                            data,
+                        });
+                    } }))));
             }
-            return (ready && (React__default.createElement(OrganisationUnitTree, { key: `${key}-search`, roots: searchData?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
-                    setSelectedOrgUnit(event);
-                    setShowOrgUnitTree(false);
-                    onSelectOrgUnit(event);
-                } })));
-        }
-        return (React__default.createElement(OrganisationUnitTree, { key: key, roots: rootOrgUnits?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
-                setSelectedOrgUnit(event);
-                setShowOrgUnitTree(false);
-                onSelectOrgUnit(event);
-            } }));
+            return (React__default.createElement(TableCell, { key: col.key, cell: row[col.key], getTextColorFromBackGround: getTextColorFromBackGround }));
+        })));
+};
+
+// export const TableBody = ({
+//   data,
+//   columns,
+//   getTextColorFromBackGround,
+//   actionOptions,
+//   actionOptionOrientation,
+//   actionSelected,
+// }: any) => (
+//   <DHISTableBody>
+//     {data.length > 0 ? (
+//       data.map((row: any) => (
+//         <TableRow
+//           key={row.index.value}
+//           row={row}
+//           columns={columns}
+//           getTextColorFromBackGround={getTextColorFromBackGround}
+//           actionOptions={actionOptions}
+//           actionOptionOrientation={actionOptionOrientation}
+//           actionSelected={actionSelected}
+//         />
+//       ))
+//     ) : (
+//       <DataTableRow>
+//         <DataTableCell
+//           colSpan={columns.length.toString()}
+//           style={{
+//             textAlign: 'center',
+//             fontWeight: 'bold',
+//             color: 'grey',
+//             padding: '20px',
+//           }}
+//         >
+//           No data found
+//         </DataTableCell>
+//       </DataTableRow>
+//     )}
+//   </DHISTableBody>
+// );
+const TableBody = ({ data, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectedRows, onRowToggle, selectable, }) => (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, isChecked: selectedRows.some((r) => r.index?.value === row.index?.value), onToggle: onRowToggle, selectable: selectable })))) : (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 })))));
+};
+
+// import { DataTable } from '@dhis2/ui';
+// import React from 'react';
+// import { TableHeader } from './tableHeader';
+// //import { TableBody } from './TableBody';
+// import { TableFooter } from './tableFooter';
+// import { TableBody } from './tableBody';
+// export const LineListTable = ({
+//     columns,
+//     data,
+//     pager,
+//     setPager,
+//     getTextColorFromBackGround,
+//     actionOptions,
+//     actionOptionOrientation,
+//     actionSelected,
+//   }: any) => {
+//     return (
+//       <DataTable>
+//         <TableHeader columns={columns} data={data} />
+//         <TableBody
+//           data={data}
+//           columns={columns}
+//           getTextColorFromBackGround={getTextColorFromBackGround}
+//           actionOptions={actionOptions}
+//           actionOptionOrientation={actionOptionOrientation}
+//           actionSelected={actionSelected}
+//         />
+//         <TableFooter columns={columns} pager={pager} setPager={setPager} />
+//       </DataTable>
+//     );
+//   };
+const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectable, rowsSelected, }) => {
+    const [selectedRows, setSelectedRows] = useState([]);
+    const handleRowToggle = (row) => {
+        const exists = selectedRows.find((r) => r.index?.value === row.index?.value);
+        const updatedRows = exists
+            ? selectedRows.filter((r) => r.index?.value !== row.index?.value)
+            : [...selectedRows, row];
+        setSelectedRows(updatedRows);
+        rowsSelected.emit(updatedRows.map((row) => row['responseData']?.value));
     };
-    const handleBlur = () => {
-        // onBlur && onBlur(null);
+    const handleSelectAll = (checked) => {
+        const updatedRows = checked ? data : [];
+        setSelectedRows(updatedRows);
+        rowsSelected.emit(updatedRows);
     };
-    return (config && (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
-        React__default.createElement("div", null,
-            label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
-                React__default.createElement("span", null, label),
-                required ? (React__default.createElement("span", { className: classes.orgUnitFieldRequiredLabel }, "*")) : (React__default.createElement(React__default.Fragment, null)))),
-            !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Tooltip, { content: selectedOrgUnitLabel },
-                    React__default.createElement(Chip, { onRemove: () => {
-                            setShowOrgUnitTree(true);
-                        } }, selectedOrgUnit.displayName)))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
-                React__default.createElement(CircularLoader$1, { small: true })))) : (React__default.createElement("div", { className: classes.container },
-                React__default.createElement("div", { className: classes.debounceFieldContainer },
-                    React__default.createElement(InputField$1, { placeholder: "Search", value: searchText, disabled: disabled, onChange: handleFilterChange })),
-                loading ? (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
-                    React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree()))))))));
+    return (React__default.createElement(DataTable, null,
+        React__default.createElement(TableHeader, { columns: columns, allSelected: selectedRows.length === data.length && data.length > 0, onSelectAll: handleSelectAll, selectable: selectable }),
+        React__default.createElement(TableBody, { data: data, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, selectedRows: selectedRows, onRowToggle: handleRowToggle, selectable: selectable }),
+        React__default.createElement(TableFooter, { columns: columns, pager: pager, setPager: setPager })));
 };
 
-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")))));
+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' }]
+            : []),
+    ];
+};
 
 // src/app/line-list-table.component.ts
 class LineListTableComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.actionOptionOrientation = 'DROPDOWN';
-        this.actionSelected = new EventEmitter();
-        this.reactStateUpdaters = null;
-        this.approvalSelected = new EventEmitter();
         this.isButtonLoading = false;
         this.filterRootOrgUnit = false;
         this.showFilters = false;
         this.isOptionSetNameVisible = false;
+        this.allowRowsSelection = false;
+        this.actionSelected = new EventEmitter();
+        this.rowsSelected = new EventEmitter();
+        this.reactStateUpdaters = null;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
         };
@@ -3738,6 +3936,7 @@ class LineListTableComponent extends ReactWrapperModule {
             const [prevValue, setPrevValue] = useState();
             const [dateStates, setDateStates] = useState({});
             const [metaData, setMetaData] = useState(null);
+            const [selectable, setSelectable] = useState(this.allowRowsSelection);
             const d2 = window.d2Web;
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
@@ -3748,6 +3947,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 setStartDateState,
                 setEndDateState,
                 setOptionSetNameVisible,
+                setSelectable,
             });
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
@@ -3828,7 +4028,6 @@ class LineListTableComponent extends ReactWrapperModule {
                 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,
@@ -3931,7 +4130,7 @@ class LineListTableComponent extends ReactWrapperModule {
                     } }, "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 })))));
+                React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected, selectable: selectable, rowsSelected: this.rowsSelected })))));
         };
     }
     ngOnChanges(changes) {
@@ -3960,6 +4159,9 @@ class LineListTableComponent extends ReactWrapperModule {
             if (changes['isButtonLoading']) {
                 this.reactStateUpdaters.setIsButtonLoading(this.isButtonLoading);
             }
+            if (changes['isSelectable']) {
+                this.reactStateUpdaters.setIsButtonLoading(this.allowRowsSelection);
+            }
         }
     }
     async ngAfterViewInit() {
@@ -3970,11 +4172,11 @@ 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", 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"] }); }
+    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", allowRowsSelection: "allowRowsSelection" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::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:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::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,
-            args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', standalone: false, 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"] }]
+            args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["@charset \"UTF-8\";::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:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::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"] }]
         }], propDecorators: { programId: [{
                 type: Input
             }], orgUnit: [{
@@ -3997,10 +4199,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], ouMode: [{
                 type: Input
-            }], actionSelected: [{
-                type: Output
-            }], approvalSelected: [{
-                type: Output
             }], isButtonLoading: [{
                 type: Input
             }], buttonFilter: [{
@@ -4011,6 +4209,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], isOptionSetNameVisible: [{
                 type: Input
+            }], allowRowsSelection: [{
+                type: Input
+            }], actionSelected: [{
+                type: Output
+            }], rowsSelected: [{
+                type: Output
             }] } });
 
 class LineListModule {
@@ -5096,6 +5300,7 @@ class FormMetaData {
                                 code: 'orgUnit',
                                 required: true,
                                 controlType: 'org-unit',
+                                isOrgUnit: true,
                             }),
                         ],
                     },
@@ -5518,10 +5723,9 @@ const OrgUnitFormField = (props) => {
                 React__default.createElement("span", null, label),
                 required ? (React__default.createElement("span", { className: classes.orgUnitFieldRequiredLabel }, "*")) : (React__default.createElement(React__default.Fragment, null)))),
             !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Tooltip, { content: selectedOrgUnitLabel },
-                    React__default.createElement(Chip, { onRemove: () => {
-                            setShowOrgUnitTree(true);
-                        } }, selectedOrgUnit.displayName)))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                React__default.createElement(Tooltip, { content: selectedOrgUnitLabel }, disabled ? (React__default.createElement(Chip, null, selectedOrgUnit.displayName)) : (React__default.createElement(Chip, { onRemove: () => {
+                        setShowOrgUnitTree(true);
+                    } }, selectedOrgUnit.displayName))))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
                 React__default.createElement(CircularLoader$1, { small: true })))) : (React__default.createElement("div", { className: classes.container },
                 React__default.createElement("div", { className: classes.debounceFieldContainer },
                     React__default.createElement(InputField$1, { placeholder: "Search", value: searchText, disabled: disabled, onChange: handleFilterChange })),
@@ -5591,20 +5795,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                     checkValueUniqueness();
                 }
             }, [this.isValueAssigned()]);
-            // TODO: START: Improve the approach of handling observables 
-            // useEffect(() => {
-            //   const fieldErrorSubscription = this.fieldError$
-            //     .pipe(filter((error) => error !== initialError))
-            //     .subscribe({
-            //       next: (error: string | undefined) => {
-            //         setInitialError(error);
-            //       },
-            //     });
-            //   return () => {
-            //     fieldErrorSubscription.unsubscribe();
-            //   };
-            // });
-            // TODO: END: Improve the approach of handling observables 
+            // TODO: Review error handling as take() has potential to missed any other updated error information
             useEffect(() => {
                 const fieldErrorSubscription = this.fieldError$
                     .pipe(filter((error) => error !== initialError), take(1) // Take only the first emitted value, then unsubscribe
@@ -5668,7 +5859,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
             const formFieldContent = () => {
                 switch (this.field().controlType) {
                     case 'textarea':
-                        return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => {
+                        return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, disabled: disabled, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => {
                                 this.ngZone.run(() => {
                                     (this.form().get(this.field().id) ||
                                         this.form().get(this.field().key))?.setValue(event.value);
@@ -5686,7 +5877,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                                 });
                             } }));
                     case 'org-unit':
-                        return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, required: this.field().required, onSelectOrgUnit: (selectedOrgUnit) => {
+                        return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, required: this.field().required, disabled: disabled, onSelectOrgUnit: (selectedOrgUnit) => {
                                 this.ngZone.run(() => {
                                     (this.form().get(this.field().id) ||
                                         this.form().get(this.field().key))?.setValue(selectedOrgUnit);
@@ -6433,11 +6624,11 @@ class FlatFormComponent extends BaseFormWrapperComponent {
         this.updateFormValidity(this.formGroup.valid);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FlatFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: FlatFormComponent, isStandalone: false, selector: "ng-dhis2-ui-flat-form", usesInheritance: true, ngImport: i0, template: "<!-- <ng-dhis2-ui-form\n*ngIf=\"fieldGroup.fields.length > 0\"\n[fields]=\"fieldGroup.fields\"\n[form]=\"formGroup\"\n[dataEntities]=\"dataValueEntities()\"\n[programRuleActions]=\"ruleActions()\"\n[isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n(formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n></ng-dhis2-ui-form> -->\n\n<ng-dhis2-ui-form\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n", dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: FlatFormComponent, isStandalone: false, selector: "ng-dhis2-ui-flat-form", usesInheritance: true, ngImport: i0, template: "<ng-dhis2-ui-form\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n", dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FlatFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-flat-form', standalone: false, template: "<!-- <ng-dhis2-ui-form\n*ngIf=\"fieldGroup.fields.length > 0\"\n[fields]=\"fieldGroup.fields\"\n[form]=\"formGroup\"\n[dataEntities]=\"dataValueEntities()\"\n[programRuleActions]=\"ruleActions()\"\n[isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n(formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n></ng-dhis2-ui-form> -->\n\n<ng-dhis2-ui-form\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n" }]
+            args: [{ selector: 'ng-dhis2-ui-flat-form', standalone: false, template: "<ng-dhis2-ui-form\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n" }]
         }] });
 
 class D2FormModule {
@@ -6856,6 +7047,7 @@ class TrackerFormComponent {
     }
     onFormUpdate(values) {
         const instance = this.instance;
+        console.log(instance);
         instance?.updateDataValues(values);
     }
     onSave(event) { }
@@ -7006,11 +7198,12 @@ class ProgramEntryFormFieldUtil {
         return new FormField({
             id: 'orgUnit',
             key: 'orgUnit',
-            label: this.program.orgUnitLabel || 'Registering unit',
+            label: this.program.orgUnitLabel ?? 'Registering unit',
             code: 'orgUnit',
             required: true,
             controlType: 'org-unit',
             disabled: this.config.disableRegistrationUnit,
+            isOrgUnit: true,
         });
     }
     #getEnrollmentDateField() {