@iapps/ng-dhis2-ui 1.1.68 → 1.1.70

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, filter, Subject, takeUntil } from 'rxjs';
+import { catchError, of, map, zip, firstValueFrom, take, filter, Subject, takeUntil } from 'rxjs';
 import i18n from '@dhis2/d2-i18n';
 import { colors, theme, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
@@ -3195,13 +3195,237 @@ const DropdownMenu$1 = (props) => {
     const ref = useRef();
     const [visible, setVisible] = useState(false);
     const { dropdownOptions, onClick } = props;
-    return (React__default.createElement("div", { ref: ref, style: { display: "inline-block" } },
+    return (React__default.createElement("div", { ref: ref, style: { display: 'inline-block' } },
         React__default.createElement(Button$1, { small: true, secondary: true, icon: React__default.createElement(IconMore24, { color: colors$1.grey600 }), onClick: () => setVisible(true) }),
         visible && (React__default.createElement(ContextMenu$1, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
                 onClick(dropDownOption);
             } }))));
 };
 
+// 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 DataTableActions = (props) => {
+    const { 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 : '')))));
+        case 'DROPDOWN':
+            return (React__default.createElement(DropdownMenu$1, { dropdownOptions: actionOptions, onClick: (option) => {
+                    onClick(option);
+                } }));
+        case 'LINK':
+            return (React__default.createElement("div", { style: {
+                    display: 'flex',
+                    gap: 16,
+                    alignItems: 'center',
+                } }, actionOptions.map((option) => (React__default.createElement("a", { style: {
+                    cursor: 'pointer',
+                    textDecoration: 'underline',
+                    fontSize: 14,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 4,
+                    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.
+
+// 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);
+    };
+    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()))))))));
+};
+
 // export function buildFilters(filters: AttributeFilter[]): string {
 //   return filters
 //     .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
@@ -3849,194 +4073,11 @@ const addActionsColumn = (columns, actionOptions) => {
     ];
 };
 
-// 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);
-    };
-    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()))))))));
-};
-
 // 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;
@@ -4098,8 +4139,9 @@ class LineListTableComponent extends ReactWrapperModule {
             }, []);
             useEffect(() => {
                 setLoading(true);
-                this.lineListService
+                const subscription = this.lineListService
                     .getLineListData(this.programId, orgUnitState, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, startDateState, endDateState, this.ouMode, this.filterRootOrgUnit, this.useOuModeWithOlderDHIS2Instance)
+                    .pipe(take(1)) // Automatically unsubscribe after the first emission
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
@@ -4114,7 +4156,7 @@ class LineListTableComponent extends ReactWrapperModule {
                     else if ('trackedEntities' in response.data ||
                         'instances' in response.data) {
                         const responseData = response.data;
-                        responsePager = response.data.pager || {
+                        responsePager = responseData.pager || {
                             page: responseData.page,
                             pageSize: responseData.pageSize,
                             total: responseData.total,
@@ -4123,23 +4165,18 @@ class LineListTableComponent extends ReactWrapperModule {
                         const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.isOptionSetNameVisible, this.filters);
                         entityColumns = columns;
                         entityData = data;
-                        //TODO: Should be done on the parent
                         const checkValues = [
-                            ...new Set(response.data?.trackedEntities?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
+                            ...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)) ??
-                                response.data?.instances?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
+                                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) {
-                            // this.firstValue.emit(firstTei);
+                        if (checkValues.length > 0) {
                             setCheckValue(checkValues);
                             setValuesMatch(!checkValues.includes(this.buttonFilter));
                         }
-                        //  setFilteredColumns(filteredEntityColumns);
-                        // Ensure filter inputs do not disappear when no data is returned
-                        // If filteredEntityColumns is empty, keep the previous columns instead of clearing them
                         setFilteredColumns((prev) => filteredEntityColumns.length > 0 ? filteredEntityColumns : prev);
                         filteredDataColumns = filteredEntityColumns;
                     }
@@ -4151,10 +4188,13 @@ class LineListTableComponent extends ReactWrapperModule {
                     }
                     const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
                     setLoading(false);
-                    setColumns(...[finalColumns]);
-                    setData(...[entityData]);
-                    setPager(...[responsePager]);
+                    setColumns(finalColumns);
+                    setData(entityData);
+                    setPager(responsePager);
                 });
+                return () => {
+                    subscription.unsubscribe(); // Ensure cleanup on unmount
+                };
             }, [
                 programIdState,
                 orgUnitState,
@@ -4166,19 +4206,11 @@ class LineListTableComponent extends ReactWrapperModule {
                 pager.pageSize,
                 isOptionSetNameVisibleState,
             ]);
-            const getDropdownOptions = (row) => {
-                return (this.actionOptions || []).map((option) => ({
-                    ...option,
-                    onClick: () => {
-                        option.onClick?.(row);
-                        this.actionSelected.emit({ action: option.label, row });
-                    },
-                }));
-            };
             const handleApprovalClick = () => {
                 setIsButtonLoading(true);
-                this.lineListService
+                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)) // Ensures the observable emits only once
                     .subscribe((response) => {
                     if ('trackedEntities' in response.data ||
                         'instances' in response.data) {
@@ -4186,9 +4218,7 @@ class LineListTableComponent extends ReactWrapperModule {
                         // Map TEIs to objects with teiId and enrollmentId
                         const teiEnrollmentList = trackedEntityInstances
                             .map((tei) => {
-                            // Find the enrollment where program matches this.programId
                             const matchingEnrollment = tei.enrollments?.find((enrollment) => enrollment.program === this.programId);
-                            // Return object with teiId and enrollmentId (if found)
                             return matchingEnrollment
                                 ? {
                                     teiId: tei.trackedEntity,
@@ -4196,13 +4226,17 @@ class LineListTableComponent extends ReactWrapperModule {
                                 }
                                 : null;
                         })
-                            .filter((item) => item !== null); // Remove null entries (no matching enrollment)
+                            .filter(Boolean); // Removes null entries
                         this.approvalSelected.emit(teiEnrollmentList);
                     }
                     else {
                         this.approvalSelected.emit([]); // Emit empty array if no TEIs
                     }
+                    setIsButtonLoading(false); // Stop loading after processing
                 });
+                return () => {
+                    subscription.unsubscribe(); // Cleanup to avoid potential memory leaks
+                };
             };
             const handleInputChange = (key, value) => {
                 setInputValues((prevValues) => ({
@@ -4247,15 +4281,7 @@ class LineListTableComponent extends ReactWrapperModule {
                     React__default.createElement(Modal$1, { hide: hide },
                         React__default.createElement(ModalTitle$1, null, "Select organization unit"),
                         React__default.createElement(ModalContent$1, null,
-                            React__default.createElement(OrgUnitFormField$1
-                            //  label="Select organization unit"
-                            , { 
-                                //  label="Select organization unit"
-                                key: selectedOrgUnit, onSelectOrgUnit: (selectedOrgUnit) => {
-                                    // console.log(
-                                    //   'this is the selected org unit key',
-                                    //   selectedOrgUnit
-                                    // );
+                            React__default.createElement(OrgUnitFormField$1, { key: selectedOrgUnit, onSelectOrgUnit: (selectedOrgUnit) => {
                                     setSelectedOrgUnit(selectedOrgUnit.displayName);
                                     setOrgUnitState(selectedOrgUnit.id);
                                     setHide(true);
@@ -4266,17 +4292,18 @@ class LineListTableComponent extends ReactWrapperModule {
                     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: "Location:", value: selectedOrgUnit, onFocus: () => setHide(false), className: "custom-input" }),
-                            React__default.createElement(CalendarInput, { label: "Start Date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: startDateState, onDateSelect: (selectedDate) => {
+                            React__default.createElement(InputField$1, { key: "location", label: "Registraring unit:", value: selectedOrgUnit, clearable: true, onFocus: () => setHide(false), className: "custom-input" }),
+                            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) => {
+                            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 }) => (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', onChange: (e) => {
+                            (visibleFilters ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', clearable: true, onChange: (e) => {
                                     if ('target' in e && e.target) {
                                         setInputValues((prevValues) => ({
                                             ...prevValues,
@@ -4300,12 +4327,19 @@ class LineListTableComponent extends ReactWrapperModule {
                                     }
                                     handleInputChange(key, currentValue);
                                 } }))),
-                            React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters), className: "custom-button", secondary: true, large: true }, showAllFilters ? 'Less Filters' : 'More Filters')))),
+                            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' ? (React__default.createElement(DropdownMenu$1, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key] || '--' // Display '--' if value is undefined or null
-                        )))))))) : (React__default.createElement(DataTableRow, null,
+                        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) => {
+                                    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',
@@ -4362,11 +4396,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", 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;padding-left:16px}::ng-deep .custom-input input{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::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}\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", 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 label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!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;padding-left:16px}::ng-deep .custom-input input{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::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}\n"] }]
+            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 label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}\n"] }]
         }], propDecorators: { programId: [{
                 type: Input
             }], orgUnit: [{
@@ -4375,6 +4409,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], actionOptions: [{
                 type: Input
+            }], actionOptionOrientation: [{
+                type: Input
             }], attributeFilters: [{
                 type: Input
             }], useOuModeWithOlderDHIS2Instance: [{
@@ -4424,6 +4460,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 }]
         }] });
 
+// 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 dropdownStyles = {
     layer: {
         zIndex: '1 !important',
@@ -5975,9 +6015,24 @@ 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 
             useEffect(() => {
                 const fieldErrorSubscription = this.fieldError$
-                    .pipe(filter((error) => error !== initialError))
+                    .pipe(filter((error) => error !== initialError), take(1) // Take only the first emitted value, then unsubscribe
+                )
                     .subscribe({
                     next: (error) => {
                         setInitialError(error);
@@ -5986,7 +6041,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 return () => {
                     fieldErrorSubscription.unsubscribe();
                 };
-            });
+            }, [initialError]); // Add initialError as a dependency to avoid stale closures
             const onChange = (payload) => setSelected(payload.selected);
             const arrayValue = useMemo(() => {
                 if (value && value.length > 0) {
@@ -6873,14 +6928,30 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             const [selected, setSelected] = useState([]);
             const [rootOrgUnits, setRootOrgUnits] = useState();
             const [config, setConfig] = useState();
+            // TODO: START::: Improve approach on handling observables 
+            // useEffect(() => {
+            //   zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
+            //     next: ([appConfig, rootOrgUnits]) => {
+            //       setConfig(appConfig);
+            //       setRootOrgUnits(rootOrgUnits);
+            //     },
+            //     error: (error) => console.error(error),
+            //   });
+            // }, []);
+            // TODO: END::: Improve approach on handling observables 
             useEffect(() => {
-                zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
+                const subscription = zip(this.getAppConfig(), this.getRootOrgUnits())
+                    .pipe(take(1)) // Ensures only one emission
+                    .subscribe({
                     next: ([appConfig, rootOrgUnits]) => {
                         setConfig(appConfig);
                         setRootOrgUnits(rootOrgUnits);
                     },
                     error: (error) => console.error(error),
                 });
+                return () => {
+                    subscription.unsubscribe(); // Cleanup to avoid memory leaks
+                };
             }, []);
             return config ? (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(Modal$1, { position: "middle", large: true },
                 React__default.createElement(ModalTitle$1, null, "Organisation unit"),