@iapps/ng-dhis2-ui 1.1.69 → 1.1.70

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

@@ -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;
@@ -4096,127 +4137,6 @@ class LineListTableComponent extends ReactWrapperModule {
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
             }, []);
-            // TODO: START: Improve the approach of handling observables 
-            // useEffect(() => {
-            //   setLoading(true);
-            //   this.lineListService
-            //     .getLineListData(
-            //       this.programId,
-            //       orgUnitState,
-            //       this.programStageId,
-            //       pager.page,
-            //       pager.pageSize,
-            //       attributeFiltersState,
-            //       startDateState,
-            //       endDateState,
-            //       this.ouMode,
-            //       this.filterRootOrgUnit,
-            //       this.useOuModeWithOlderDHIS2Instance
-            //     )
-            //     .subscribe((response: LineListResponse) => {
-            //       let entityColumns: ColumnDefinition[] = [];
-            //       let responsePager: Pager;
-            //       let entityData: TableRow[] = [];
-            //       let filteredDataColumns: ColumnDefinition[] = [];
-            //       if (this.programStageId) {
-            //         responsePager = (response.data as EventsResponse).pager;
-            //         const { columns, data } = getProgramStageData(
-            //           response,
-            //           this.programStageId,
-            //           pager,
-            //           this.isOptionSetNameVisible
-            //         );
-            //         entityColumns = columns;
-            //         entityData = data;
-            //       } else if (
-            //         'trackedEntities' in response.data ||
-            //         'instances' in response.data
-            //       ) {
-            //         const responseData: any = response.data as TrackedEntityResponse;
-            //         responsePager = (response.data as TrackedEntityResponse).pager || {
-            //           page: responseData.page,
-            //           pageSize: responseData.pageSize,
-            //           total: responseData.total,
-            //           pageCount: responseData.pageCount,
-            //         };
-            //         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 as TrackedEntityResponse
-            //             )?.trackedEntities?.[0]?.enrollments?.[0]?.events?.flatMap(
-            //               (event) =>
-            //                 event.dataValues
-            //                   .filter((dataValue) =>
-            //                     /^[A-Za-z]{3}$/.test(dataValue.value)
-            //                   )
-            //                   .map((dataValue) => dataValue.value)
-            //             ) ??
-            //               (
-            //                 response.data as TrackedEntityResponse
-            //               )?.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);
-            //           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;
-            //       } else {
-            //         responsePager = (response.data as EventsResponse).pager;
-            //         const { columns, data } = getEventData(
-            //           response,
-            //           pager,
-            //           this.isOptionSetNameVisible
-            //         );
-            //         entityColumns = columns;
-            //         entityData = data;
-            //       }
-            //       const finalColumns: ColumnDefinition[] = addActionsColumn(
-            //         [{ label: '#', key: 'index' }, ...entityColumns],
-            //         this.actionOptions
-            //       );
-            //       setLoading(false);
-            //       setColumns(...[finalColumns]);
-            //       setData(...[entityData]);
-            //       setPager(...[responsePager]);
-            //     });
-            // }, [
-            //   programIdState,
-            //   orgUnitState,
-            //   programStageIdState,
-            //   attributeFiltersState,
-            //   startDateState,
-            //   endDateState,
-            //   pager.page,
-            //   pager.pageSize,
-            //   isOptionSetNameVisibleState,
-            // ]);
-            // TODO: END: Improve the approach of handling observables 
             useEffect(() => {
                 setLoading(true);
                 const subscription = this.lineListService
@@ -4233,8 +4153,8 @@ class LineListTableComponent extends ReactWrapperModule {
                         entityColumns = columns;
                         entityData = data;
                     }
-                    else if ("trackedEntities" in response.data ||
-                        "instances" in response.data) {
+                    else if ('trackedEntities' in response.data ||
+                        'instances' in response.data) {
                         const responseData = response.data;
                         responsePager = responseData.pager || {
                             page: responseData.page,
@@ -4266,7 +4186,7 @@ class LineListTableComponent extends ReactWrapperModule {
                         entityColumns = columns;
                         entityData = data;
                     }
-                    const finalColumns = addActionsColumn([{ label: "#", key: "index" }, ...entityColumns], this.actionOptions);
+                    const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
                     setLoading(false);
                     setColumns(finalColumns);
                     setData(entityData);
@@ -4286,68 +4206,14 @@ 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 });
-                    },
-                }));
-            };
-            // TODO: START::: Improve the approach on handling observables 
-            // const handleApprovalClick = () => {
-            //   setIsButtonLoading(true);
-            //   this.lineListService
-            //     .getLineListData(
-            //       this.programId,
-            //       this.orgUnit,
-            //       this.programStageId,
-            //       pager.page,
-            //       1000,
-            //       this.attributeFilters,
-            //       this.startDate,
-            //       this.endDate,
-            //       this.ouMode
-            //     )
-            //     .subscribe((response: LineListResponse) => {
-            //       if (
-            //         'trackedEntities' in response.data ||
-            //         'instances' in response.data
-            //       ) {
-            //         const trackedEntityInstances = (
-            //           response.data as TrackedEntityResponse
-            //         ).trackedEntities;
-            //         // 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,
-            //                   enrollmentId: matchingEnrollment.enrollment,
-            //                 }
-            //               : null;
-            //           })
-            //           .filter((item) => item !== null); // Remove null entries (no matching enrollment)
-            //         this.approvalSelected.emit(teiEnrollmentList);
-            //       } else {
-            //         this.approvalSelected.emit([]); // Emit empty array if no TEIs
-            //       }
-            //     });
-            // };
-            // TODO: END::: Improve the approach on handling observables 
             const handleApprovalClick = () => {
                 setIsButtonLoading(true);
                 const subscription = this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, 1000, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
                     .pipe(take(1)) // Ensures the observable emits only once
                     .subscribe((response) => {
-                    if ("trackedEntities" in response.data || "instances" in response.data) {
+                    if ('trackedEntities' in response.data ||
+                        'instances' in response.data) {
                         const trackedEntityInstances = response.data.trackedEntities;
                         // Map TEIs to objects with teiId and enrollmentId
                         const teiEnrollmentList = trackedEntityInstances
@@ -4415,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);
@@ -4434,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,
@@ -4468,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',
@@ -4530,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: [{
@@ -4543,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: [{
@@ -4592,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',