@iapps/ng-dhis2-ui 1.1.58 → 1.1.60

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

@@ -25,11 +25,11 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
-import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, Chip, MultiSelectField, TextAreaField } from '@dhis2/ui';
-import { isObject, isString, sortBy, isArray, find, camelCase, flatten, isUndefined, debounce, head, isEmpty } from 'lodash';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, CalendarInput, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { 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 { map as map$1, switchMap } from 'rxjs/operators';
+import { switchMap, map as map$1 } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { Validators, UntypedFormControl, UntypedFormGroup, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { toObservable } from '@angular/core/rxjs-interop';
@@ -3287,32 +3287,100 @@ const getFilteredTrackedEntityInstances = (trackedEntityInstances, filters) => {
         event.dataValues?.some((dataValue) => dataValue.dataElement === filter.dataElement &&
             matchesCondition(dataValue.value, filter.operator, filter.value))))));
 };
+const getFilteredTrackedEntites = (trackedEntities, filters) => {
+    if (!filters.length)
+        return trackedEntities;
+    return trackedEntities.filter((tei) => filters.every((filter) => tei.enrollments?.some((enrollment) => enrollment.events?.some((event) => event.programStage === filter.programStage &&
+        event.dataValues?.some((dataValue) => dataValue.dataElement === filter.dataElement &&
+            matchesCondition(dataValue.value, filter.operator, filter.value))))));
+};
 
 class LineListService {
     constructor(httpClient) {
         this.httpClient = httpClient;
     }
     getProgramMetadata(programId) {
-        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],organisationUnits[id,name],*`);
-    }
+        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],programTrackedEntityAttributes[*]`);
+    }
+    // private getTrackedEntityInstances(
+    //   programId: string,
+    //   orgUnit: string,
+    //   page: number,
+    //   pageSize: number,
+    //   filters: AttributeFilter[] = [],
+    //   startDate?: string,
+    //   endDate?: string,
+    //   ouMode?: string,
+    //   filterRootOrgUnit?: boolean
+    // ): Observable<TrackedEntityResponse> {
+    //   const filterParams = buildFilters(filters);
+    //  // const dateFilter = startDate || endDate ? `enrollmentEnrolledAfter=${startDate}&enrollmentEnrolledBefore=${endDate}` : '';
+    //  const dateFilter = [
+    //   startDate ? `enrollmentEnrolledAfter=${startDate}` : '',
+    //   endDate ? `enrollmentEnrolledBefore=${endDate}` : '',
+    // ].filter(Boolean).join('&');
+    //   const ouModeIdentifier = ouMode ? `&orgUnitMode=${ouMode}`: ``;
+    //   return this.httpClient.get(
+    //     `tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc`
+    //   ).pipe(
+    //     map((response: any) => {
+    //       if (filterRootOrgUnit) {
+    //         response.trackedEntities = response.trackedEntities.filter(
+    //           (tei: any) => tei.orgUnit !== orgUnit // Exclude TEIs with the root orgUnit
+    //         );
+    //       }
+    //       return response;
+    //     })
+    //   );
+    // }
     getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode, filterRootOrgUnit) {
         const filterParams = buildFilters(filters);
-        const dateFilter = startDate && endDate ? `&programStartDate=${startDate}&programEndDate=${endDate}` : '';
-        const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
-        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,orgUnit,attributes[*,displayInList],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=created:desc`).pipe(map$1((response) => {
+        const dateFilter = [
+            startDate ? `enrollmentEnrolledAfter=${startDate}` : '',
+            endDate ? `enrollmentEnrolledBefore=${endDate}` : '',
+        ].filter(Boolean).join('&');
+        const ouModeIdentifier = ouMode ? `&orgUnitMode=${ouMode}` : '';
+        return this.httpClient
+            .get(`tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc`)
+            .pipe(switchMap((response) => {
             if (filterRootOrgUnit) {
-                response.trackedEntityInstances = response.trackedEntityInstances.filter((tei) => tei.orgUnit !== orgUnit // Exclude TEIs with the root orgUnit
-                );
+                response.trackedEntities = response.trackedEntities.filter((tei) => tei.orgUnit !== orgUnit);
             }
-            return response;
+            // **Step 1:** Extract unique orgUnits from enrollments
+            const uniqueOrgUnitIds = new Set();
+            response.trackedEntities.forEach((tei) => {
+                tei.enrollments?.forEach((enrollment) => {
+                    if (enrollment.program === programId) {
+                        uniqueOrgUnitIds.add(enrollment.orgUnit);
+                    }
+                });
+            });
+            // If no unique orgUnits found, return immediately
+            if (uniqueOrgUnitIds.size === 0) {
+                return of({ ...response, orgUnitsMap: new Map() });
+            }
+            // **Step 2:** Fetch orgUnit names in a single request
+            return this.fetchOrgUnits(Array.from(uniqueOrgUnitIds)).pipe(map$1((orgUnitsMap) => ({
+                ...response,
+                orgUnitsMap, // Attach orgUnitId → orgUnitName map
+            })));
+        }));
+    }
+    //filter=id:in:[id1,id2,id3]
+    /**
+     * 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;
         }));
-        // pipe(
-        //   map((response: any) => {
-        //    //TODO: use the api to to order by desc
-        //   // response.trackedEntityInstances.reverse();
-        //     return response;
-        //   })
-        // );
     }
     getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
@@ -3338,6 +3406,7 @@ class LineListService {
                 return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode, filterRootOrgUnit).pipe(map$1((teis) => ({
                     metadata: programMetadata,
                     data: teis,
+                    orgUnits: teis.orgUnitsMap
                 })));
             }
             else {
@@ -3382,15 +3451,18 @@ const getProgramStageData = (response, programStageId, pager) => {
 };
 const getTrackedEntityData = (response, programId, pager, filters) => {
     let teis = response.data
-        .trackedEntityInstances;
+        .trackedEntities;
     let programMetaData = response.metadata.programTrackedEntityAttributes;
-    //organisation units from metadata
-    let orgUnitsFromMetaData = response.metadata.organisationUnits;
-    //a Map to efficiently look up orgUnit names by ID
-    const orgUnitMap = new Map(orgUnitsFromMetaData.map((ou) => [
-        ou.id,
-        ou.name,
-    ]));
+    // //organisation units from metadata
+    // let orgUnitsFromMetaData = response.metadata.organisationUnits;
+    // //a Map to efficiently look up orgUnit names by ID
+    // const orgUnitMap = new Map<string, string>(
+    //   orgUnitsFromMetaData.map((ou: { id: string; name: string }) => [
+    //     ou.id,
+    //     ou.name,
+    //   ])
+    // );
+    const orgUnitMap = response.data.orgUnitsMap;
     const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
         displayInList: attr.displayInList,
         searchable: attr.searchable,
@@ -3403,7 +3475,7 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
         return acc;
     }, {});
     if (filters) {
-        teis = getFilteredTrackedEntityInstances(teis, filters);
+        teis = getFilteredTrackedEntites(teis, filters);
     }
     const allAttributes = new Set();
     teis.forEach((tei) => {
@@ -3431,10 +3503,6 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
         // Check if the column label is part of any value in programAttributesMap
         return Object.values(programAttributesMap).some((value) => value.includes(column.label));
     });
-    // entityColumns.push({
-    //   label: 'Location',
-    //   key: 'orgUnit',
-    // });
     // Add orgUnit as the first column
     entityColumns.unshift({
         label: 'Location',
@@ -3452,7 +3520,7 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
     const filteredEntityColumns = entityColumns.filter((column) => searchableKeys.has(column.key));
     const attributesData = teis.map((tei, idx) => {
         let row = {
-            trackedEntityInstance: tei.trackedEntityInstance,
+            trackedEntityInstance: tei.trackedEntity,
             index: (pager.page - 1) * pager.pageSize + idx + 1,
         };
         allAttributes.forEach((attrId) => (row[attrId] = ''));
@@ -3462,9 +3530,14 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             : tei.attributes;
         attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
         //include orgUnit in the row for id access
-        row['orgUnitId'] = tei.orgUnit;
+        row['orgUnitId'] = matchingEnrollment.orgUnit;
         // Access the name of the orgUnit using the Map
-        row['orgUnit'] = orgUnitMap.get(tei.orgUnit) || tei.orgUnit || 'N/A';
+        //  row['orgUnit'] = matchingEnrollment.orgUnitName;
+        row['orgUnit'] = orgUnitMap?.get(matchingEnrollment.orgUnit) || 'N/A';
+        //  row['orgUnit'] =
+        // orgUnitMap && orgUnitMap[matchingEnrollment.orgUnit]
+        //   ? orgUnitMap[matchingEnrollment.orgUnit]
+        //   : 'N/A';
         return row;
     });
     return {
@@ -3503,12 +3576,195 @@ 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.dispatchTeis = false;
-        this.showFilterButton = false;
         this.actionSelected = new EventEmitter();
         this.reactStateUpdaters = null;
         this.approvalSelected = new EventEmitter();
@@ -3516,6 +3772,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.buttonLabel = '';
         this.firstValue = new EventEmitter();
         this.filterRootOrgUnit = false;
+        this.showFilters = false;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
         };
@@ -3544,6 +3801,12 @@ class LineListTableComponent extends ReactWrapperModule {
             //TODO: this will be migrated on the parent component
             const [checkValue, setCheckValue] = useState([]);
             const [valueMatch, setValuesMatch] = useState(false);
+            const [selectedOrgUnit, setSelectedOrgUnit] = useState(''); // for testing purposes to be removed
+            const [hide, setHide] = useState(true);
+            const [showAllFilters, setShowAllFilters] = useState(false);
+            const visibleFilters = showAllFilters
+                ? filteredColumns ?? []
+                : (filteredColumns ?? []).slice(0, 2);
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -3557,25 +3820,10 @@ class LineListTableComponent extends ReactWrapperModule {
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
             }, []);
-            useEffect(() => {
-                if (!loading) {
-                    setTimeout(() => {
-                        const paginationContainer = document.querySelector('[data-test="dhis2-uiwidgets-pagination"]');
-                        if (paginationContainer) {
-                            paginationContainer.style.display = 'flex';
-                            paginationContainer.style.flexDirection = 'row';
-                            paginationContainer.style.justifyContent = 'space-between';
-                            paginationContainer.style.alignItems = 'center';
-                        }
-                    }, 500); // Short delay to ensure styles apply after data renders
-                }
-            }, [loading]);
             useEffect(() => {
                 setLoading(true);
                 this.lineListService
-                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, 
-                // this.attributeFilters,
-                this.startDate, this.endDate, this.ouMode, this.filterRootOrgUnit)
+                    .getLineListData(this.programId, orgUnitState, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, startDateState, endDateState, this.ouMode, this.filterRootOrgUnit)
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
@@ -3587,15 +3835,14 @@ class LineListTableComponent extends ReactWrapperModule {
                         entityColumns = columns;
                         entityData = data;
                     }
-                    else if ('trackedEntityInstances' in response.data) {
-                        responsePager = response.data
-                            .pager;
+                    else if ('trackedEntities' in response.data) {
+                        responsePager = response.data.pager;
                         const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.filters);
                         entityColumns = columns;
                         entityData = data;
                         //TODO: Should be done on the parent
                         let checkValues = [
-                            ...new Set(response.data?.trackedEntityInstances?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
+                            ...new Set(response.data?.trackedEntities?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
                                 .filter((dataValue) => /^[A-Za-z]{3}$/.test(dataValue.value))
                                 .map((dataValue) => dataValue.value))),
                         ];
@@ -3646,8 +3893,8 @@ class LineListTableComponent extends ReactWrapperModule {
                 this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, 1000, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
                     .subscribe((response) => {
-                    if ('trackedEntityInstances' in response.data) {
-                        const trackedEntityInstances = response.data.trackedEntityInstances;
+                    if ('trackedEntities' in response.data) {
+                        const trackedEntityInstances = response.data.trackedEntities;
                         // Map TEIs to objects with teiId and enrollmentId
                         const teiEnrollmentList = trackedEntityInstances
                             .map((tei) => {
@@ -3656,7 +3903,7 @@ class LineListTableComponent extends ReactWrapperModule {
                             // Return object with teiId and enrollmentId (if found)
                             return matchingEnrollment
                                 ? {
-                                    teiId: tei.trackedEntityInstance,
+                                    teiId: tei.trackedEntity,
                                     enrollmentId: matchingEnrollment.enrollment,
                                 }
                                 : null;
@@ -3685,55 +3932,17 @@ class LineListTableComponent extends ReactWrapperModule {
                 });
             };
             return (React__default.createElement("div", null,
-                React__default.createElement("div", null,
-                    valueMatch &&
-                        this.dispatchTeis &&
-                        (isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (
-                        //TODO: this implementation should be done where the library will be consumed
-                        React__default.createElement(Button$1, { style: {
-                                backgroundColor: '#3b82f6',
-                                color: 'white',
-                                padding: '8px 16px',
-                                borderRadius: '4px',
-                                cursor: 'pointer',
-                            }, onClick: handleApprovalClick, primary: true }, this.buttonLabel))),
-                    this.showFilterButton && (React__default.createElement(Button$1
-                    // style={{
-                    //   backgroundColor: '#6b7280', 
-                    //   color: 'white',
-                    //   padding: '8px 16px',
-                    //   borderRadius: '4px',
-                    //   cursor: 'pointer',
-                    //   display: 'flex',
-                    //   alignItems: 'center',
-                    //   gap: 8,
-                    // }}
-                    , { 
-                        // style={{
-                        //   backgroundColor: '#6b7280', 
-                        //   color: 'white',
-                        //   padding: '8px 16px',
-                        //   borderRadius: '4px',
-                        //   cursor: 'pointer',
-                        //   display: 'flex',
-                        //   alignItems: 'center',
-                        //   gap: 8,
-                        // }}
-                        onClick: () => {
-                            setFilters(!filters);
-                        }, secondary: true },
-                        React__default.createElement(IconFilter16, null),
-                        filters ? 'Hide Filters' : 'Show Filters'))),
-                filters && (React__default.createElement("div", null, (filteredColumns ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: label, value: inputValues[key] || '', onChange: (e) => {
-                        // Check if it's a standard event with target.value
-                        if ('target' in e && e.target) {
-                            handleInputChange(key, e.target.value);
-                        }
-                        // Check if it's an event with direct value
-                        else if ('value' in e) {
-                            handleInputChange(key, e.value ?? '');
-                        }
-                    } }))))),
+                React__default.createElement("div", null, valueMatch &&
+                    this.dispatchTeis &&
+                    (isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (
+                    //TODO: this implementation should be done where the library will be consumed
+                    React__default.createElement(Button$1, { style: {
+                            backgroundColor: '#3b82f6',
+                            color: 'white',
+                            padding: '8px 16px',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                        }, onClick: handleApprovalClick, primary: true }, this.buttonLabel)))),
                 loading ? (React__default.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
@@ -3743,29 +3952,90 @@ class LineListTableComponent extends ReactWrapperModule {
                     React__default.createElement(CircularLoader$1, { small: true }),
                     React__default.createElement("div", { style: {
                             fontSize: 14,
-                        } }, "Loading"))) : (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(DataTableCell, { colSpan: columns.length?.toString(), style: {
-                                textAlign: 'center',
-                                fontWeight: 'bold',
-                                color: 'grey',
-                                padding: '20px',
-                            } }, "No data found")))),
-                    React__default.createElement(TableFoot, null,
-                        React__default.createElement(DataTableRow, null,
-                            React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
-                                React__default.createElement("div", null,
-                                    React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
-                                            const newPageSize = Number(pageSize);
-                                            setPager((prev) => ({
-                                                ...prev,
-                                                page: 1,
-                                                pageSize: newPageSize,
-                                            }));
-                                        }, pageSizes: ['5', '10', '20', '50'] })))))))));
+                        } }, "Loading"))) : (
+                // <div>
+                //   <div/>
+                React__default.createElement("div", null,
+                    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
+                                    // );
+                                    setSelectedOrgUnit(selectedOrgUnit.displayName);
+                                    setOrgUnitState(selectedOrgUnit.id);
+                                    setHide(true);
+                                } })),
+                        React__default.createElement(ModalActions$1, null,
+                            React__default.createElement(ButtonStrip$1, { end: true },
+                                React__default.createElement(Button$1, { onClick: () => setHide(true), secondary: true }, "Close")))),
+                    this.showFilters && (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
+                        React__default.createElement("div", { style: {
+                                display: 'flex',
+                                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) => {
+                                    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 }) => (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', onChange: (e) => {
+                                    if ('target' in e && e.target) {
+                                        setInputValues((prevValues) => ({
+                                            ...prevValues,
+                                            [key]: e
+                                                .target.value,
+                                        }));
+                                    }
+                                    else if ('value' in e) {
+                                        setInputValues((prevValues) => ({
+                                            ...prevValues,
+                                            [key]: e.value ?? '',
+                                        }));
+                                    }
+                                }, onBlur: (e) => {
+                                    let currentValue = '';
+                                    if ('target' in e && e.target) {
+                                        currentValue = e.target.value;
+                                    }
+                                    else if ('value' in e) {
+                                        currentValue = e.value ?? '';
+                                    }
+                                    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(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(DataTableCell, { colSpan: columns.length?.toString(), style: {
+                                    textAlign: 'center',
+                                    fontWeight: 'bold',
+                                    color: 'grey',
+                                    padding: '20px',
+                                } }, "No data found")))),
+                        React__default.createElement(TableFoot, null,
+                            React__default.createElement(DataTableRow, null,
+                                React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
+                                    React__default.createElement("div", null,
+                                        React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
+                                                const newPageSize = Number(pageSize);
+                                                setPager((prev) => ({
+                                                    ...prev,
+                                                    page: 1,
+                                                    pageSize: newPageSize,
+                                                }));
+                                            }, pageSizes: ['10', '20', '50', '100', '500'] }))))))))));
         };
     }
     ngOnChanges(changes) {
@@ -3801,11 +4071,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: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", showFilterButton: "showFilterButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!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", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters" }, 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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!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;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"] }]
         }], propDecorators: { programId: [{
                 type: Input
             }], orgUnit: [{
@@ -3826,8 +4096,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], dispatchTeis: [{
                 type: Input
-            }], showFilterButton: [{
-                type: Input
             }], actionSelected: [{
                 type: Output
             }], approvalSelected: [{
@@ -3842,11 +4110,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], filterRootOrgUnit: [{
                 type: Input
+            }], showFilters: [{
+                type: Input
             }] } });
 
 class LineListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, declarations: [LineListTableComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [LineListTableComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, declarations: [LineListTableComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [LineListTableComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, providers: [LineListService], imports: [CommonModule, SharedDhis2UiModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, decorators: [{
@@ -3854,7 +4124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             args: [{
                     declarations: [LineListTableComponent],
                     exports: [LineListTableComponent],
-                    imports: [CommonModule, SharedDhis2UiModule],
+                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule],
                     providers: [LineListService],
                 }]
         }] });