@iapps/ng-dhis2-ui 1.1.56 → 1.1.59

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, Subject, takeUntil } from 'rxjs';
+import { catchError, of, map, zip, firstValueFrom, filter, Subject, takeUntil } from 'rxjs';
 import i18n from '@dhis2/d2-i18n';
 import { colors, theme, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
@@ -25,17 +25,17 @@ 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';
 import { format } from 'date-fns';
+import { DataQueryFilter, DataFilterCondition, ProgramRuleEngine } from '@iapps/d2-web-sdk';
 import moment from 'moment';
-import { ProgramRuleEngine } from '@iapps/d2-web-sdk';
 
 class SharedDhis2UiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SharedDhis2UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -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',
@@ -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],
                 }]
         }] });
@@ -4065,11 +4335,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 const useFieldValidation = (props) => {
-    const { form, touched, field, value } = props;
+    const { form, touched, field, value, initialError, recordExistError } = props;
     const hasError = useMemo(() => {
+        if (recordExistError) {
+            return true;
+        }
+        if (initialError && value) {
+            return true;
+        }
         return touched && (form.get(field.id) || form.get(field.key))?.invalid;
-    }, [value, touched]);
+    }, [value, touched, initialError, recordExistError]);
     const validationError = useMemo(() => {
+        if (recordExistError) {
+            return recordExistError;
+        }
+        if (initialError && value) {
+            return initialError;
+        }
         if (!touched) {
             return undefined;
         }
@@ -4080,25 +4362,26 @@ const useFieldValidation = (props) => {
         if (error['min']) {
             return `${field.label || 'Value'} should not be less than ${error['min'].min}!`;
         }
-        else if (error['max']) {
+        if (error['max']) {
             return `${field.label || 'Value'} should not be greater than ${error['max'].max}!`;
         }
-        else if (error['pattern']) {
+        if (error['pattern']) {
             if (field.type === 'email') {
                 return `The email address provided is not valid`;
             }
-            else if (field.type === 'tel') {
+            if (field.type === 'tel') {
                 return 'Phone number provided is not valid';
             }
-            else {
-                return `${field.label || 'Value'} should have appropriate format`;
-            }
+            return `${field.label || 'Value'} should have appropriate format`;
+        }
+        if (error['customError']) {
+            return error['customError'];
         }
         return error['required']
             ? `${field.label || 'Value'} is required`
             : undefined;
-    }, [hasError]);
-    return { hasError, validationError };
+    }, [touched, value, initialError, recordExistError]);
+    return { validationError, hasError };
 };
 
 // Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
@@ -4134,6 +4417,7 @@ class FormField {
         this.programStage = options.programStage;
         this.program = options.program;
         this.trackedEntityInstance = options.trackedEntityInstance;
+        this.trackedEntityType = options.trackedEntityType;
         this.hasOptions = options.hasOptions;
         this.dependentField = options.dependentField;
         this.displayInList = options.displayInList;
@@ -4319,6 +4603,8 @@ class FieldUtil {
                 return 'number';
             case FieldType.PHONE_NUMBER:
                 return 'tel';
+            case FieldType.EMAIL:
+                return 'email';
             case FieldType.ORG_UNIT:
                 return 'org-unit';
             case FieldType.DATE:
@@ -4435,8 +4721,11 @@ class FormUtil {
                 const maxValidators = field.max
                     ? [Validators.max(field.max)]
                     : [];
-                const phoneNumberValidator = field.type === 'tel'
-                    ? [Validators.pattern('\\+255[6-7][1-9][0-9]{7}$')]
+                const phoneNumberValidator = field.type === 'tel' ? [] : [];
+                const emailValidator = field.type === 'email'
+                    ? [
+                        Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$'),
+                    ]
                     : [];
                 group[field.key] = field.required
                     ? new UntypedFormControl({ value, disabled: field.disabled }, {
@@ -4445,6 +4734,7 @@ class FormUtil {
                             ...minValidators,
                             ...maxValidators,
                             ...phoneNumberValidator,
+                            ...emailValidator,
                         ],
                         updateOn: 'change',
                     })
@@ -4453,6 +4743,7 @@ class FormUtil {
                             ...minValidators,
                             ...maxValidators,
                             ...phoneNumberValidator,
+                            ...emailValidator,
                         ],
                     });
                 if (field.referenceKey) {
@@ -4466,6 +4757,7 @@ class FormUtil {
                                 ...minValidators,
                                 ...maxValidators,
                                 ...phoneNumberValidator,
+                                ...emailValidator,
                             ],
                             updateOn: 'change',
                         })
@@ -4474,6 +4766,7 @@ class FormUtil {
                                 ...minValidators,
                                 ...maxValidators,
                                 ...phoneNumberValidator,
+                                ...emailValidator,
                             ],
                         });
                 }
@@ -4692,6 +4985,9 @@ class MetadataRule {
         const regex = /(A|#|V)\{([^}]+)\}/g;
         return this.rule?.condition?.replace(regex, (match, _, ruleVariable) => {
             const ruleVariableObject = this.ruleVariables?.find((variable) => variable.name === ruleVariable);
+            if (!ruleVariableObject) {
+                return `{${ruleVariable}}`;
+            }
             const code = camelCase(ruleVariableObject?.dataElement?.code) ||
                 ruleVariableObject?.dataElement?.id ||
                 camelCase(ruleVariableObject?.trackedEntityAttribute?.code) ||
@@ -4719,6 +5015,7 @@ class FormMetadataSection {
                 sortOrder: programTrackedEntityAttribute['sortOrder'],
                 mandatory: programTrackedEntityAttribute['mandatory'],
                 allowFutureDate: programTrackedEntityAttribute['allowFutureDate'],
+                trackedEntityType: (this.params.program['trackedEntityType'] || {})['id'],
                 metaType: 'ATTRIBUTE',
             };
         });
@@ -5331,6 +5628,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.httpClient = inject(NgxDhis2HttpClientService);
         this.fieldType = 'textbox';
         this.field = input.required();
+        this.fieldError = input();
         this.fieldConfig = input(new FieldConfig());
         this.form = model.required();
         this.isValid = input();
@@ -5338,6 +5636,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.value = model();
         this.value$ = toObservable(this.value);
         this.isValueAssigned$ = toObservable(this.isValueAssigned);
+        this.fieldError$ = toObservable(this.fieldError);
         this.label = computed(() => {
             return !this.fieldConfig()?.hideLabel ? this.field().label : undefined;
         });
@@ -5369,13 +5668,30 @@ class BaseFormFieldComponent extends ReactWrapperModule {
             const [selected, setSelected] = useState();
             const [touched, setTouched] = useState(false);
             const [disabled, setDisabled] = useState(this.field()?.disabled ?? this.field()?.generated ?? false);
+            const [initialError, setInitialError] = useState();
+            const [recordExistError, setRecordExistError] = useState();
+            const [checkingUniqueness, setCheckingUniqueness] = useState();
             useEffect(() => {
                 if (this.isValueAssigned()) {
+                    const value = this.form().get(this.field().id)?.value ||
+                        this.form().get(this.field().key)?.value;
                     setDisabled(true);
-                    setValue(this.form().get(this.field().id)?.value ||
-                        this.form().get(this.field().key)?.value);
+                    setValue(value);
+                    checkValueUniqueness();
                 }
             }, [this.isValueAssigned()]);
+            useEffect(() => {
+                const fieldErrorSubscription = this.fieldError$
+                    .pipe(filter((error) => error !== initialError))
+                    .subscribe({
+                    next: (error) => {
+                        setInitialError(error);
+                    },
+                });
+                return () => {
+                    fieldErrorSubscription.unsubscribe();
+                };
+            });
             const onChange = (payload) => setSelected(payload.selected);
             const arrayValue = useMemo(() => {
                 if (value && value.length > 0) {
@@ -5383,131 +5699,186 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 }
                 return [];
             }, [value]);
-            const { hasError, validationError } = useFieldValidation({
+            const { validationError, hasError } = useFieldValidation({
                 field: this.field(),
                 form: this.form(),
+                initialError,
+                recordExistError,
                 value,
                 touched,
             });
-            switch (this.field().controlType) {
-                case 'textarea':
-                    return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => {
-                            this.ngZone.run(() => {
-                                (this.form().get(this.field().id) ||
-                                    this.form().get(this.field().key))?.setValue(event.value);
-                                this.immediateUpdate.emit({
-                                    form: this.form(),
-                                    value: event.value,
-                                });
-                            });
-                            setValue(event.value);
-                            setTouched(true);
-                        }, onBlur: () => {
-                            this.ngZone.run(() => {
-                                this.update.emit({ form: this.form(), value });
+            const checkValueUniqueness = async () => {
+                if (this.field().unique && this.field().trackedEntityType) {
+                    setCheckingUniqueness(true);
+                    setRecordExistError(undefined);
+                    const d2 = window.d2Web;
+                    try {
+                        const response = (await d2.trackerModule.trackedEntity
+                            .setTrackedEntityType(this.field().trackedEntityType)
+                            .setOuMode('ACCESSIBLE')
+                            .setFilters([
+                            new DataQueryFilter()
+                                .setAttribute(this.field().id)
+                                .setCondition(DataFilterCondition.Equal)
+                                .setValue(value),
+                        ])
+                            .get())?.data;
+                        setCheckingUniqueness(false);
+                        if (response?.length > 0) {
+                            const customError = `Record with this ${this.label()} is already registered`;
+                            (this.form().controls[this.field().id] ||
+                                this.form().controls[this.field().key])?.setErrors({
+                                customError,
                             });
-                        } }));
-                case 'org-unit':
-                    return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, required: this.field().required, onSelectOrgUnit: (selectedOrgUnit) => {
-                            this.ngZone.run(() => {
-                                (this.form().get(this.field().id) ||
-                                    this.form().get(this.field().key))?.setValue(selectedOrgUnit);
-                                this.update.emit({
-                                    form: this.form(),
-                                    value: selectedOrgUnit,
+                            setRecordExistError(customError);
+                        }
+                    }
+                    catch (e) {
+                        setCheckingUniqueness(false);
+                        setRecordExistError(undefined);
+                    }
+                }
+            };
+            const formFieldContent = () => {
+                switch (this.field().controlType) {
+                    case 'textarea':
+                        return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => {
+                                this.ngZone.run(() => {
+                                    (this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key))?.setValue(event.value);
+                                    this.immediateUpdate.emit({
+                                        form: this.form(),
+                                        value: event.value,
+                                    });
                                 });
-                            });
-                            setValue(selectedOrgUnit);
-                            setTouched(true);
-                        }, selected: value }));
-                case 'transfer':
-                    return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, leftHeader: React__default.createElement("div", { style: {
-                                fontSize: 14,
-                                padding: '8px 4px',
-                            } }, this.field().availableOptionsLabel), rightHeader: React__default.createElement("div", { style: {
-                                fontSize: 14,
-                                padding: '8px 4px',
-                            } }, this.field().selectedOptionsLabel), options: this.field().options, onChange: (event) => {
-                            onChange({ selected: event.selected });
-                            this.ngZone.run(() => {
-                                (this.form().get(this.field().id) ||
-                                    this.form().get(this.field().key))?.setValue(event.selected);
-                            });
-                            setValue(event.selected);
-                            setTouched(true);
-                            this.update.emit({ form: this.form(), value });
-                        } }));
-                case 'checkbox':
-                    return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, disabled: disabled, onChange: (event) => {
-                            this.ngZone.run(() => {
-                                (this.form().get(this.field().id) ||
-                                    this.form().get(this.field().key))?.setValue(event.checked);
-                            });
-                            setValue(event.checked);
-                            setTouched(true);
-                        }, onBlur: () => {
-                            this.ngZone.run(() => {
+                                setValue(event.value);
+                                setTouched(true);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                                this.ngZone.run(() => {
+                                    this.update.emit({ form: this.form(), value });
+                                });
+                            } }));
+                    case 'org-unit':
+                        return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, required: this.field().required, onSelectOrgUnit: (selectedOrgUnit) => {
+                                this.ngZone.run(() => {
+                                    (this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key))?.setValue(selectedOrgUnit);
+                                    this.update.emit({
+                                        form: this.form(),
+                                        value: selectedOrgUnit,
+                                    });
+                                });
+                                setValue(selectedOrgUnit);
+                                setTouched(true);
+                            }, selected: value }));
+                    case 'transfer':
+                        return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, leftHeader: React__default.createElement("div", { style: {
+                                    fontSize: 14,
+                                    padding: '8px 4px',
+                                } }, this.field().availableOptionsLabel), rightHeader: React__default.createElement("div", { style: {
+                                    fontSize: 14,
+                                    padding: '8px 4px',
+                                } }, this.field().selectedOptionsLabel), options: this.field().options, onChange: (event) => {
+                                onChange({ selected: event.selected });
+                                this.ngZone.run(() => {
+                                    (this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key))?.setValue(event.selected);
+                                });
+                                setValue(event.selected);
+                                setTouched(true);
                                 this.update.emit({ form: this.form(), value });
-                            });
-                        } }));
-                case 'dropdown':
-                    return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, required: this.field().required, className: "select", label: this.label(), selected: value, onChange: (event) => {
-                            this.ngZone.run(() => {
-                                (this.form().get(this.field().id) ||
-                                    this.form().get(this.field().key))?.setValue(event.selected);
-                                this.update.emit({
-                                    form: this.form(),
-                                    value: event.selected,
+                            } }));
+                    case 'checkbox':
+                        return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, disabled: disabled, onChange: (event) => {
+                                this.ngZone.run(() => {
+                                    (this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key))?.setValue(event.checked);
                                 });
-                            });
-                            setValue(event.selected);
-                            setTouched(true);
-                        } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.key, label: option.label, value: option.value })))));
-                case 'multi-dropdown':
-                    return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, label: this.label(), required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
-                            const selectedValue = (event.selected || []).join(',');
-                            this.ngZone.run(() => {
-                                (this.form().get(this.field().id) ||
-                                    this.form().get(this.field().key))?.setValue(selectedValue);
-                                this.update.emit({
-                                    form: this.form(),
-                                    value: selectedValue,
+                                setValue(event.checked);
+                                setTouched(true);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                                this.ngZone.run(() => {
+                                    this.update.emit({ form: this.form(), value });
                                 });
-                            });
-                            setValue(selectedValue);
-                            setTouched(true);
-                        }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: option.key, label: option.label, value: option.value })))));
-                case 'file':
-                    return (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(FileUploadField, { label: this.label(), id: this.field().id, hasError: hasError, required: this.field().required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => {
+                            } }));
+                    case 'dropdown':
+                        return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, required: this.field().required, className: "select", label: this.label(), selected: value, onChange: (event) => {
                                 this.ngZone.run(() => {
-                                    this.form().get(this.field().id) ||
-                                        this.form().get(this.field().key)?.setValue(fileId);
+                                    (this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key))?.setValue(event.selected);
                                     this.update.emit({
                                         form: this.form(),
-                                        value: fileId,
+                                        value: event.selected,
                                     });
                                 });
-                                setValue(fileId);
+                                setValue(event.selected);
                                 setTouched(true);
-                            } })));
-                default:
-                    return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => {
-                            this.ngZone.run(() => {
-                                (this.form().get(this.field().id) ||
-                                    this.form().get(this.field().key))?.setValue(event.value);
-                                this.immediateUpdate.emit({
-                                    form: this.form(),
-                                    value: event.value,
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                            } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.key, label: option.label, value: option.value })))));
+                    case 'multi-dropdown':
+                        return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, label: this.label(), required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
+                                const selectedValue = (event.selected || []).join(',');
+                                this.ngZone.run(() => {
+                                    (this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key))?.setValue(selectedValue);
+                                    this.update.emit({
+                                        form: this.form(),
+                                        value: selectedValue,
+                                    });
                                 });
-                            });
-                            setValue(event.value);
-                            setTouched(true);
-                        }, onBlur: () => {
-                            this.ngZone.run(() => {
-                                this.update.emit({ form: this.form(), value });
-                            });
-                        } }));
+                                setValue(selectedValue);
+                                setTouched(true);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                            }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: option.key, label: option.label, value: option.value })))));
+                    case 'file':
+                        return (React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement(FileUploadField, { label: this.label(), id: this.field().id, hasError: hasError, required: this.field().required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => {
+                                    this.ngZone.run(() => {
+                                        this.form().get(this.field().id) ||
+                                            this.form().get(this.field().key)?.setValue(fileId);
+                                        this.update.emit({
+                                            form: this.form(),
+                                            value: fileId,
+                                        });
+                                    });
+                                    setValue(fileId);
+                                    setTouched(true);
+                                } })));
+                    default:
+                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => {
+                                this.ngZone.run(() => {
+                                    (this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key))?.setValue(event.value);
+                                    this.immediateUpdate.emit({
+                                        form: this.form(),
+                                        value: event.value,
+                                    });
+                                });
+                                setValue(event.value);
+                                setTouched(true);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                                this.ngZone.run(() => {
+                                    this.update.emit({ form: this.form(), value });
+                                });
+                            } }));
+                }
+            };
+            {
+                return (React__default.createElement(React__default.Fragment, null,
+                    formFieldContent(),
+                    checkingUniqueness && (React__default.createElement("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 8,
+                            paddingTop: 8,
+                        } },
+                        React__default.createElement(CircularLoader$1, { small: true }),
+                        React__default.createElement("div", { style: { color: colors$1.grey800, fontSize: 14 } }, "Checking...")))));
             }
         };
     }
@@ -5515,7 +5886,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.value.set(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.8", type: BaseFormFieldComponent, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isValueAssigned: { classPropertyName: "isValueAssigned", publicName: "isValueAssigned", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", value: "valueChange", update: "update", immediateUpdate: "immediateUpdate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.8", type: BaseFormFieldComponent, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldError: { classPropertyName: "fieldError", publicName: "fieldError", isSignal: true, isRequired: false, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isValueAssigned: { classPropertyName: "isValueAssigned", publicName: "isValueAssigned", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", value: "valueChange", update: "update", immediateUpdate: "immediateUpdate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormFieldComponent, decorators: [{
             type: Directive
@@ -5548,6 +5919,7 @@ class FormFieldComponent {
         this.immediateFieldUpdate = new EventEmitter();
         this.runtimeOptionChange = new EventEmitter();
         this.value = signal('');
+        this.runtimeError = signal(undefined);
         this._runtimeOptions = [];
         this.runtimeOptions = [];
         this.fieldFilterControl = new FormControl();
@@ -5581,9 +5953,10 @@ class FormFieldComponent {
         });
     }
     #processRules(ruleActions) {
-        ruleActions
-            .filter((ruleAction) => ruleAction.field === this.field().id)
-            .forEach((ruleAction) => {
+        const fieldRuleActions = ruleActions.filter((ruleAction) => ruleAction.field === this.field().id);
+        let runtimeError;
+        let isValueAssigned = false;
+        fieldRuleActions.forEach((ruleAction) => {
             switch (ruleAction.actionType) {
                 case 'ASSIGN': {
                     if (ruleAction.assignedData) {
@@ -5592,16 +5965,26 @@ class FormFieldComponent {
                             this.form
                                 ?.get(this.field().key)
                                 ?.setValue(ruleAction.assignedData);
-                            this.isValueAssigned.set(true);
+                            isValueAssigned = true;
                             this.onValueChange();
                         }
                     }
                     break;
                 }
+                case 'SHOWERROR': {
+                    runtimeError = ruleAction.displayedContent;
+                    (this.form.controls[this.field().id] ||
+                        this.form.controls[this.field().key])?.setErrors({
+                        customError: runtimeError,
+                    });
+                    break;
+                }
                 default:
                     break;
             }
         });
+        this.runtimeError.set(runtimeError);
+        this.isValueAssigned.set(isValueAssigned);
     }
     ngOnDestroy() {
         this._onDestroy.next();
@@ -5709,11 +6092,11 @@ class FormFieldComponent {
         this._runtimeOptions = [...options];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: false, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: false, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldError]=\"runtimeError()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form-field', standalone: false, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-form-field', standalone: false, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldError]=\"runtimeError()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fieldConfig: [{
                 type: Input
             }], form: [{
@@ -6647,6 +7030,7 @@ class ProgramEntryFormFieldUtil {
                 sortOrder: programTrackedEntityAttribute.sortOrder,
                 mandatory: programTrackedEntityAttribute.mandatory,
                 allowFutureDate: programTrackedEntityAttribute.allowFutureDate,
+                trackedEntityType: this.program.trackedEntityType?.id,
                 metaType: 'ATTRIBUTE',
                 stepId: null,
             };
@@ -6729,7 +7113,7 @@ class ProgramEntryFormFieldUtil {
                 label: field.formName || field.name,
                 key: field.code ? camelCase(field.code) : field.id,
                 required: field.mandatory,
-                type: field.valueType,
+                type: FieldUtil.getFieldType(field.valueType),
                 options,
                 disabled: this.#getDisabledStatus(field),
                 order: field.sortOrder,
@@ -7000,7 +7384,7 @@ class ProgramEntryFormModule {
             const instance = await this.#getInstance();
             this.instance.set(instance);
             if (this.config().autoAssignedValues) {
-                this.#updateInstanceWithAutoAssignedValues(this.config().autoAssignedValues);
+                this.#updateInstanceWithAutoAssignedValues(this.config().autoAssignedValues || []);
             }
             this.loading.set(false);
         }